@@ -1,2 +0,0 @@ | |||
plugins: | |||
- jekyll-redirect-from |
@@ -1,99 +0,0 @@ | |||
/* | |||
github.com style (c) Vasily Polovnyov <vast@whiteants.net> | |||
*/ | |||
.hljs { | |||
display: block; | |||
color: #36414c; | |||
overflow-x: auto; | |||
padding: 0.5em; | |||
background: #F8F8F9; | |||
border-radius: 3px; | |||
} | |||
.hljs-comment, | |||
.hljs-quote { | |||
color: #998; | |||
font-style: italic; | |||
} | |||
.hljs-keyword, | |||
.hljs-selector-tag, | |||
.hljs-subst { | |||
color: #333; | |||
font-weight: bold; | |||
} | |||
.hljs-number, | |||
.hljs-literal, | |||
.hljs-variable, | |||
.hljs-template-variable, | |||
.hljs-tag .hljs-attr { | |||
color: #008080; | |||
} | |||
.hljs-string, | |||
.hljs-doctag { | |||
color: #d14; | |||
} | |||
.hljs-title, | |||
.hljs-section, | |||
.hljs-selector-id { | |||
color: #900; | |||
font-weight: bold; | |||
} | |||
.hljs-subst { | |||
font-weight: normal; | |||
} | |||
.hljs-type, | |||
.hljs-class .hljs-title { | |||
color: #458; | |||
font-weight: bold; | |||
} | |||
.hljs-tag, | |||
.hljs-name, | |||
.hljs-attribute { | |||
color: #000080; | |||
font-weight: normal; | |||
} | |||
.hljs-regexp, | |||
.hljs-link { | |||
color: #009926; | |||
} | |||
.hljs-symbol, | |||
.hljs-bullet { | |||
color: #990073; | |||
} | |||
.hljs-built_in, | |||
.hljs-builtin-name { | |||
color: #0086b3; | |||
} | |||
.hljs-meta { | |||
color: #999; | |||
font-weight: bold; | |||
} | |||
.hljs-deletion { | |||
background: #fdd; | |||
} | |||
.hljs-addition { | |||
background: #dfd; | |||
} | |||
.hljs-emphasis { | |||
font-style: italic; | |||
} | |||
.hljs-strong { | |||
font-weight: bold; | |||
} |
@@ -1,110 +0,0 @@ | |||
body { | |||
/* container styles */ | |||
max-width: 720px; | |||
margin: auto; | |||
font-family: "proxima-nova", sans-serif; | |||
font-size: 15px; | |||
color: #6c7680; | |||
text-rendering: optimizeLegibility !important; | |||
line-height: 1.5em; | |||
-moz-osx-font-smoothing: grayscale; | |||
-webkit-font-smoothing: antialiased; | |||
} | |||
h1, | |||
h2, | |||
h3, | |||
h4, | |||
h5, | |||
h6, | |||
.lead, | |||
.page-sidebar, | |||
.breadcrumb, | |||
.label, | |||
.h6, | |||
.sans, | |||
blockquote { | |||
font-family: "proxima-nova", sans-serif; | |||
color: #36414C; | |||
} | |||
header { | |||
margin: 4rem 0; /* SAME 1 */ | |||
font-size: 1.6em; | |||
font-weight: 300; | |||
text-align: center; | |||
} | |||
header .lead-text { | |||
line-height: 3rem; | |||
margin: 2rem 0; | |||
} | |||
.demo-tip { | |||
margin-top: 1rem; /* SAME 2 */ | |||
font-size: 1rem; | |||
} | |||
section { | |||
margin: 4em 0; /* SAME 1 */ | |||
} | |||
h1 { | |||
font-size: 3.5rem; | |||
margin-bottom: 1.5rem; | |||
} | |||
h1, h6 { | |||
font-weight: 700; | |||
} | |||
.btn { | |||
outline: none !important; | |||
} | |||
.blue.button { | |||
color: #fff; | |||
background: #7575ff; | |||
border: 0px; | |||
border-bottom: 3px solid rgba(0, 0, 0, 0.2); | |||
} | |||
.blue.button:hover { | |||
background: #5b5be5; | |||
} | |||
.large.button { | |||
font-size: 1.33em; | |||
padding: 12px 24px 10px; | |||
border-bottom: 3px solid rgba(0, 0, 0, 0.2); | |||
} | |||
a { | |||
color: #5E64FF; | |||
} | |||
a, a:focus, a:hover { | |||
transition: color 0.3s, border 0.3s, background-color 0.3s; | |||
} | |||
/* BaseCSS */ | |||
.margin-top { | |||
margin-top: 1rem; /* SAME 2 */ | |||
} | |||
.mv1 { | |||
margin: 2em 0 1em 0; | |||
} | |||
.border { | |||
border: 1px solid #ddd; | |||
border-radius: 3px; | |||
} | |||
/* Moon images */ | |||
.image-container { | |||
padding: 3px; | |||
} | |||
.image-container img{ | |||
display: block; | |||
width: 100%; | |||
} | |||
.content-data p { | |||
margin-bottom: 5px; | |||
font-size: 12px; | |||
} | |||
.text-center { | |||
text-align: center; | |||
} |
@@ -1,353 +0,0 @@ | |||
/*! | |||
*this reset is a copy of bootstrap's reboot.css which is inturn a fork of normalise* | |||
* Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com) | |||
* Copyright 2011-2017 The Bootstrap Authors | |||
* Copyright 2011-2017 Twitter, Inc. | |||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) | |||
*/ | |||
*, | |||
*::before, | |||
*::after { | |||
box-sizing: border-box; | |||
} | |||
html { | |||
font-family: sans-serif; | |||
-webkit-text-size-adjust: 100%; | |||
-ms-text-size-adjust: 100%; | |||
-ms-overflow-style: scrollbar; | |||
-webkit-tap-highlight-color: transparent; | |||
--line-height: 3; | |||
line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px); | |||
} | |||
@-ms-viewport { | |||
width: device-width; | |||
} | |||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { | |||
display: block; | |||
} | |||
body { | |||
margin: 0; | |||
font-size: 1em; | |||
font-weight: 400; | |||
/* line-height: 1.5; */ | |||
text-align: left; | |||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Noto, Oxygen-Sans, "Noto Sans", Ubuntu,Cantarell, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |||
color: #36414c; | |||
font-weight:normal; | |||
-webkit-text-size-adjust: 100%; | |||
-webkit-font-feature-settings: "kern" 1; | |||
-moz-font-feature-settings: "kern" 1; | |||
-o-font-feature-settings: "kern" 1; | |||
font-feature-settings: "kern" 1; | |||
font-kerning: normal; | |||
text-rendering: optimizeLegibility; | |||
} | |||
[tabindex="-1"]:focus { | |||
outline: 0 !important; | |||
} | |||
hr { | |||
box-sizing: content-box; | |||
height: 0; | |||
overflow: visible; | |||
} | |||
h1, h2, h3, h4, h5, h6 { | |||
margin-top: 0; | |||
margin-bottom: 1.6rem; | |||
} | |||
p { | |||
margin-top: 0; | |||
margin-bottom: 1rem; | |||
} | |||
abbr[title], | |||
abbr[data-original-title] { | |||
text-decoration: underline; | |||
-webkit-text-decoration: underline dotted; | |||
text-decoration: underline dotted; | |||
cursor: help; | |||
border-bottom: 0; | |||
} | |||
address { | |||
margin-bottom: 1rem; | |||
font-style: normal; | |||
line-height: inherit; | |||
} | |||
ol, | |||
ul, | |||
dl { | |||
margin-top: 0; | |||
margin-bottom: 1rem; | |||
} | |||
ol ol, | |||
ul ul, | |||
ol ul, | |||
ul ol { | |||
margin-bottom: 0; | |||
} | |||
dt { | |||
font-weight: 700; | |||
} | |||
dd { | |||
margin-bottom: .5rem; | |||
margin-left: 0; | |||
} | |||
blockquote { | |||
margin: 0 0 1rem; | |||
} | |||
dfn { | |||
font-style: italic; | |||
} | |||
b, | |||
strong { | |||
font-weight: bolder; | |||
} | |||
small { | |||
font-size: 80%; | |||
} | |||
sub, | |||
sup { | |||
position: relative; | |||
font-size: 75%; | |||
line-height: 0; | |||
vertical-align: baseline; | |||
} | |||
sub { | |||
bottom: -.25em; | |||
} | |||
sup { | |||
top: -.5em; | |||
} | |||
a { | |||
color: #007bff; | |||
text-decoration: none; | |||
background-color: transparent; | |||
-webkit-text-decoration-skip: objects; | |||
} | |||
a:hover { | |||
color: #0056b3; | |||
text-decoration: underline; | |||
} | |||
a:not([href]):not([tabindex]) { | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
a:not([href]):not([tabindex]):focus { | |||
outline: 0; | |||
} | |||
pre, | |||
code, | |||
kbd, | |||
samp { | |||
font-family: monospace, monospace; | |||
font-size: 1em; | |||
} | |||
pre { | |||
margin-top: 0; | |||
margin-bottom: 1rem; | |||
overflow: auto; | |||
-ms-overflow-style: scrollbar; | |||
} | |||
figure { | |||
margin: 0 0 1rem; | |||
} | |||
img { | |||
vertical-align: middle; | |||
border-style: none; | |||
} | |||
svg:not(:root) { | |||
overflow: hidden; | |||
} | |||
a, | |||
area, | |||
button, | |||
[role="button"], | |||
input:not([type="range"]), | |||
label, | |||
select, | |||
summary, | |||
textarea { | |||
-ms-touch-action: manipulation; | |||
touch-action: manipulation; | |||
} | |||
table { | |||
border-collapse: collapse; | |||
} | |||
caption { | |||
padding-top: 0.75rem; | |||
padding-bottom: 0.75rem; | |||
color: #6c757d; | |||
text-align: left; | |||
caption-side: bottom; | |||
} | |||
th { | |||
text-align: inherit; | |||
} | |||
label { | |||
display: inline-block; | |||
margin-bottom: .5rem; | |||
} | |||
button { | |||
border-radius: 0; | |||
} | |||
button:focus { | |||
outline: 1px dotted; | |||
outline: 5px auto -webkit-focus-ring-color; | |||
} | |||
input, | |||
button, | |||
select, | |||
optgroup, | |||
textarea { | |||
margin: 0; | |||
font-family: inherit; | |||
font-size: inherit; | |||
line-height: inherit; | |||
} | |||
button, | |||
input { | |||
overflow: visible; | |||
} | |||
button, | |||
select { | |||
text-transform: none; | |||
} | |||
button, | |||
html [type="button"], | |||
[type="reset"], | |||
[type="submit"] { | |||
-webkit-appearance: button; | |||
} | |||
button::-moz-focus-inner, | |||
[type="button"]::-moz-focus-inner, | |||
[type="reset"]::-moz-focus-inner, | |||
[type="submit"]::-moz-focus-inner { | |||
padding: 0; | |||
border-style: none; | |||
} | |||
input[type="radio"], | |||
input[type="checkbox"] { | |||
box-sizing: border-box; | |||
padding: 0; | |||
} | |||
input[type="date"], | |||
input[type="time"], | |||
input[type="datetime-local"], | |||
input[type="month"] { | |||
-webkit-appearance: listbox; | |||
} | |||
textarea { | |||
overflow: auto; | |||
resize: vertical; | |||
} | |||
fieldset { | |||
min-width: 0; | |||
padding: 0; | |||
margin: 0; | |||
border: 0; | |||
} | |||
legend { | |||
display: block; | |||
width: 100%; | |||
max-width: 100%; | |||
padding: 0; | |||
margin-bottom: .5rem; | |||
font-size: 1.5rem; | |||
line-height: inherit; | |||
color: inherit; | |||
white-space: normal; | |||
} | |||
progress { | |||
vertical-align: baseline; | |||
} | |||
[type="number"]::-webkit-inner-spin-button, | |||
[type="number"]::-webkit-outer-spin-button { | |||
height: auto; | |||
} | |||
[type="search"] { | |||
outline-offset: -2px; | |||
-webkit-appearance: none; | |||
} | |||
[type="search"]::-webkit-search-cancel-button, | |||
[type="search"]::-webkit-search-decoration { | |||
-webkit-appearance: none; | |||
} | |||
::-webkit-file-upload-button { | |||
font: inherit; | |||
-webkit-appearance: button; | |||
} | |||
output { | |||
display: inline-block; | |||
} | |||
summary { | |||
display: list-item; | |||
cursor: pointer; | |||
} | |||
template { | |||
display: none; | |||
} | |||
[hidden] { | |||
display: none !important; | |||
} | |||
/*# sourceMappingURL=bootstrap-reboot.css.map */ |
@@ -1,278 +0,0 @@ | |||
import { MONTH_NAMES_SHORT } from "../../../src/js/utils/date-utils"; | |||
// Composite Chart | |||
// ================================================================================ | |||
const reportCountList = [ | |||
152, | |||
222, | |||
199, | |||
287, | |||
534, | |||
709, | |||
1179, | |||
1256, | |||
1632, | |||
1856, | |||
1850, | |||
]; | |||
export const lineCompositeData = { | |||
labels: [ | |||
"2007", | |||
"2008", | |||
"2009", | |||
"2010", | |||
"2011", | |||
"2012", | |||
"2013", | |||
"2014", | |||
"2015", | |||
"2016", | |||
"2017", | |||
], | |||
yMarkers: [ | |||
{ | |||
label: "Average 100 reports/month", | |||
value: 1200, | |||
options: { labelPos: "left" }, | |||
}, | |||
], | |||
datasets: [ | |||
{ | |||
name: "Events", | |||
values: reportCountList, | |||
}, | |||
], | |||
}; | |||
export const fireball_5_25 = [ | |||
[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], | |||
[2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], | |||
[5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], | |||
[0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], | |||
[6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], | |||
[7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], | |||
[13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], | |||
[24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], | |||
[31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], | |||
[32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], | |||
[31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50], | |||
]; | |||
export const fireball_2_5 = [ | |||
[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], | |||
[11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], | |||
[20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], | |||
[7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], | |||
[38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], | |||
[50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], | |||
[54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], | |||
[84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], | |||
[73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], | |||
[106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], | |||
[81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171], | |||
]; | |||
export const fireballOver25 = [ | |||
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], | |||
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], | |||
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], | |||
[1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], | |||
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], | |||
[3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], | |||
[2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], | |||
[7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], | |||
[5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], | |||
[5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], | |||
[5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], | |||
[8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12], | |||
]; | |||
export const barCompositeData = { | |||
labels: MONTH_NAMES_SHORT, | |||
datasets: [ | |||
{ | |||
name: "Over 25 reports", | |||
values: fireballOver25[9], | |||
}, | |||
{ | |||
name: "5 to 25 reports", | |||
values: fireball_5_25[9], | |||
}, | |||
{ | |||
name: "2 to 5 reports", | |||
values: fireball_2_5[9], | |||
}, | |||
], | |||
}; | |||
// Demo Chart multitype Chart | |||
// ================================================================================ | |||
export const typeData = { | |||
labels: [ | |||
"12am-3am", | |||
"3am-6am", | |||
"6am-9am", | |||
"9am-12pm", | |||
"12pm-3pm", | |||
"3pm-6pm", | |||
"6pm-9pm", | |||
"9pm-12am", | |||
], | |||
yMarkers: [ | |||
{ | |||
label: "Marker", | |||
value: 43, | |||
options: { labelPos: "left" }, | |||
// type: 'dashed' | |||
}, | |||
], | |||
yRegions: [ | |||
{ | |||
label: "Region", | |||
start: -10, | |||
end: 50, | |||
options: { labelPos: "right" }, | |||
}, | |||
], | |||
datasets: [ | |||
{ | |||
name: "Some Data", | |||
values: [18, 40, 30, 35, 8, 52, 17, -4], | |||
axisPosition: "right", | |||
chartType: "bar", | |||
}, | |||
{ | |||
name: "Another Set", | |||
values: [30, 50, -10, 15, 18, 32, 27, 14], | |||
axisPosition: "right", | |||
chartType: "bar", | |||
}, | |||
{ | |||
name: "Yet Another", | |||
values: [15, 20, -3, -15, 58, 12, -17, 37], | |||
chartType: "line", | |||
}, | |||
], | |||
}; | |||
export const trendsData = { | |||
labels: [ | |||
1967, | |||
1968, | |||
1969, | |||
1970, | |||
1971, | |||
1972, | |||
1973, | |||
1974, | |||
1975, | |||
1976, | |||
1977, | |||
1978, | |||
1979, | |||
1980, | |||
1981, | |||
1982, | |||
1983, | |||
1984, | |||
1985, | |||
1986, | |||
1987, | |||
1988, | |||
1989, | |||
1990, | |||
1991, | |||
1992, | |||
1993, | |||
1994, | |||
1995, | |||
1996, | |||
1997, | |||
1998, | |||
1999, | |||
2000, | |||
2001, | |||
2002, | |||
2003, | |||
2004, | |||
2005, | |||
2006, | |||
2007, | |||
2008, | |||
2009, | |||
2010, | |||
2011, | |||
2012, | |||
2013, | |||
2014, | |||
2015, | |||
2016, | |||
], | |||
datasets: [ | |||
{ | |||
values: [ | |||
132.9, | |||
150.0, | |||
149.4, | |||
148.0, | |||
94.4, | |||
97.6, | |||
54.1, | |||
49.2, | |||
22.5, | |||
18.4, | |||
39.3, | |||
131.0, | |||
220.1, | |||
218.9, | |||
198.9, | |||
162.4, | |||
91.0, | |||
60.5, | |||
20.6, | |||
14.8, | |||
33.9, | |||
123.0, | |||
211.1, | |||
191.8, | |||
203.3, | |||
133.0, | |||
76.1, | |||
44.9, | |||
25.1, | |||
11.6, | |||
28.9, | |||
88.3, | |||
136.3, | |||
173.9, | |||
170.4, | |||
163.6, | |||
99.3, | |||
65.3, | |||
45.8, | |||
24.7, | |||
12.6, | |||
4.2, | |||
4.8, | |||
24.9, | |||
80.8, | |||
84.5, | |||
94.0, | |||
113.3, | |||
69.8, | |||
39.8, | |||
], | |||
}, | |||
], | |||
}; | |||
export const moonData = { | |||
names: ["Ganymede", "Callisto", "Io", "Europa"], | |||
masses: [14819000, 10759000, 8931900, 4800000], | |||
distances: [1070.412, 1882.709, 421.7, 671.034], | |||
diameters: [5262.4, 4820.6, 3637.4, 3121.6], | |||
}; |
@@ -1,55 +0,0 @@ | |||
import { lineCompositeData, barCompositeData } from './data'; | |||
export default { | |||
lineComposite: { | |||
elementID: "#chart-composite-1", | |||
options: { | |||
title: "Fireball/Bolide Events - Yearly (reported)", | |||
data: lineCompositeData, | |||
type: "line", | |||
height: 190, | |||
colors: ["green"], | |||
isNavigable: 1, | |||
valuesOverPoints: 1, | |||
lineOptions: { | |||
dotSize: 8 | |||
} | |||
} | |||
}, | |||
barComposite: { | |||
elementID: "#chart-composite-2", | |||
options: { | |||
data: barCompositeData, | |||
type: "bar", | |||
height: 210, | |||
colors: ["violet", "light-blue", "#46a9f9"], | |||
valuesOverPoints: 1, | |||
axisOptions: { | |||
xAxisMode: "tick", | |||
shortenYAxisNumbers: true | |||
}, | |||
barOptions: { | |||
stacked: 1 | |||
} | |||
} | |||
}, | |||
demoMain: { | |||
elementID: "", | |||
options: { | |||
title: "My Awesome Chart", | |||
data: "typeData", | |||
type: "axis-mixed", | |||
height: 300, | |||
colors: ["purple", "magenta", "light-blue"], | |||
maxSlices: 10, | |||
tooltipOptions: { | |||
formatTooltipX: d => (d + '').toUpperCase(), | |||
formatTooltipY: d => d + ' pts', | |||
} | |||
} | |||
} | |||
}; |
@@ -1,375 +0,0 @@ | |||
import { shuffle, getRandomBias } from '../../../src/js/utils/helpers'; | |||
import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants'; | |||
import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils'; | |||
/* eslint-disable no-unused-vars */ | |||
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData, | |||
barCompositeData, typeData, trendsData, moonData } from './data'; | |||
/* eslint-enable no-unused-vars */ | |||
import demoConfig from './demoConfig'; | |||
// import { lineComposite, barComposite } from './demoConfig'; | |||
// ================================================================================ | |||
let Chart = frappe.Chart; // eslint-disable-line no-undef | |||
let lc = demoConfig.lineComposite; | |||
let lineCompositeChart = new Chart (lc.elementID, lc.options); | |||
let bc = demoConfig.barComposite; | |||
let barCompositeChart = new Chart (bc.elementID, bc.options); | |||
lineCompositeChart.parent.addEventListener('data-select', (e) => { | |||
let i = e.index; | |||
barCompositeChart.updateDatasets([ | |||
fireballOver25[i], fireball_5_25[i], fireball_2_5[i] | |||
]); | |||
}); | |||
// ================================================================================ | |||
let customColors = ['purple', 'magenta', 'light-blue']; | |||
let typeChartArgs = { | |||
title: "My Awesome Chart", | |||
data: typeData, | |||
type: 'axis-mixed', | |||
height: 300, | |||
colors: customColors, | |||
// maxLegendPoints: 6, | |||
maxSlices: 10, | |||
tooltipOptions: { | |||
formatTooltipX: d => (d + '').toUpperCase(), | |||
formatTooltipY: d => d + ' pts', | |||
} | |||
}; | |||
let aggrChart = new Chart("#chart-aggr", typeChartArgs); | |||
Array.prototype.slice.call( | |||
document.querySelectorAll('.aggr-type-buttons button') | |||
).map(el => { | |||
el.addEventListener('click', (e) => { | |||
let btn = e.target; | |||
let type = btn.getAttribute('data-type'); | |||
typeChartArgs.type = type; | |||
if(type !== 'axis-mixed') { | |||
typeChartArgs.colors = undefined; | |||
} else { | |||
typeChartArgs.colors = customColors; | |||
} | |||
if(type !== 'percentage') { | |||
typeChartArgs.height = 300; | |||
} else { | |||
typeChartArgs.height = undefined; | |||
} | |||
let newChart = new Chart("#chart-aggr", typeChartArgs); | |||
if(newChart){ | |||
aggrChart = newChart; | |||
} | |||
Array.prototype.slice.call( | |||
btn.parentNode.querySelectorAll('button')).map(el => { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
document.querySelector('.export-aggr').addEventListener('click', () => { | |||
aggrChart.export(); | |||
}); | |||
// Update values chart | |||
// ================================================================================ | |||
let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", | |||
"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", | |||
"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"]; | |||
let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1)); | |||
let updateDataAllValues = Array.from({length: 30}, getRandom); | |||
// We're gonna be shuffling this | |||
let updateDataAllIndices = updateDataAllLabels.map((d,i) => i); | |||
let getUpdateData = (source_array, length=10) => { | |||
let indices = updateDataAllIndices.slice(0, length); | |||
return indices.map((index) => source_array[index]); | |||
}; | |||
let updateData = { | |||
labels: getUpdateData(updateDataAllLabels), | |||
datasets: [{ | |||
"values": getUpdateData(updateDataAllValues) | |||
}], | |||
yMarkers: [ | |||
{ | |||
label: "Altitude", | |||
value: 25, | |||
type: 'dashed' | |||
} | |||
], | |||
yRegions: [ | |||
{ | |||
label: "Range", | |||
start: 10, | |||
end: 45 | |||
}, | |||
], | |||
}; | |||
let updateChart = new Chart("#chart-update", { | |||
data: updateData, | |||
type: 'line', | |||
height: 300, | |||
colors: ['#ff6c03'], | |||
lineOptions: { | |||
// hideLine: 1, | |||
regionFill: 1 | |||
}, | |||
}); | |||
let chartUpdateButtons = document.querySelector('.chart-update-buttons'); | |||
chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", () => { | |||
shuffle(updateDataAllIndices); | |||
let value = getRandom(); | |||
let start = getRandom(); | |||
let end = getRandom(); | |||
let data = { | |||
labels: updateDataAllLabels.slice(0, 10), | |||
datasets: [{values: getUpdateData(updateDataAllValues)}], | |||
yMarkers: [ | |||
{ | |||
label: "Altitude", | |||
value: value, | |||
type: 'dashed' | |||
} | |||
], | |||
yRegions: [ | |||
{ | |||
label: "Range", | |||
start: start, | |||
end: end | |||
}, | |||
], | |||
}; | |||
updateChart.update(data); | |||
}); | |||
chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", () => { | |||
let index = updateChart.state.datasetLength; // last index to add | |||
if(index >= updateDataAllIndices.length) return; | |||
updateChart.addDataPoint( | |||
updateDataAllLabels[index], [updateDataAllValues[index]] | |||
); | |||
}); | |||
chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", () => { | |||
updateChart.removeDataPoint(); | |||
}); | |||
document.querySelector('.export-update').addEventListener('click', () => { | |||
updateChart.export(); | |||
}); | |||
// Trends Chart | |||
// ================================================================================ | |||
let plotChartArgs = { | |||
title: "Mean Total Sunspot Count - Yearly", | |||
data: trendsData, | |||
type: 'line', | |||
height: 300, | |||
colors: ['#238e38'], | |||
lineOptions: { | |||
hideDots: 1, | |||
heatline: 1, | |||
}, | |||
axisOptions: { | |||
xAxisMode: 'tick', | |||
yAxisMode: 'span', | |||
xIsSeries: 1 | |||
} | |||
}; | |||
let trendsChart = new Chart("#chart-trends", plotChartArgs); | |||
Array.prototype.slice.call( | |||
document.querySelectorAll('.chart-plot-buttons button') | |||
).map(el => { | |||
el.addEventListener('click', (e) => { | |||
let btn = e.target; | |||
let type = btn.getAttribute('data-type'); | |||
let config = {}; | |||
config[type] = 1; | |||
if(['regionFill', 'heatline'].includes(type)) { | |||
config.hideDots = 1; | |||
} | |||
// plotChartArgs.init = false; | |||
plotChartArgs.lineOptions = config; | |||
new Chart("#chart-trends", plotChartArgs); | |||
Array.prototype.slice.call( | |||
btn.parentNode.querySelectorAll('button')).map(el => { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
document.querySelector('.export-trends').addEventListener('click', () => { | |||
trendsChart.export(); | |||
}); | |||
// Event chart | |||
// ================================================================================ | |||
let eventsData = { | |||
labels: ["Ganymede", "Callisto", "Io", "Europa"], | |||
datasets: [ | |||
{ | |||
"values": moonData.distances, | |||
"formatted": moonData.distances.map(d => d*1000 + " km") | |||
} | |||
] | |||
}; | |||
let eventsChart = new Chart("#chart-events", { | |||
title: "Jupiter's Moons: Semi-major Axis (1000 km)", | |||
data: eventsData, | |||
type: 'bar', | |||
height: 330, | |||
colors: ['grey'], | |||
isNavigable: 1, | |||
}); | |||
let dataDiv = document.querySelector('.chart-events-data'); | |||
eventsChart.parent.addEventListener('data-select', (e) => { | |||
let name = moonData.names[e.index]; | |||
dataDiv.querySelector('.moon-name').innerHTML = name; | |||
dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000; | |||
dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index]; | |||
dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index]; | |||
dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg"; | |||
}); | |||
// Heatmap | |||
// ================================================================================ | |||
let today = new Date(); | |||
let start = clone(today); | |||
addDays(start, 4); | |||
let end = clone(start); | |||
start.setFullYear( start.getFullYear() - 2 ); | |||
end.setFullYear( end.getFullYear() - 1 ); | |||
let dataPoints = {}; | |||
let startTs = timestampSec(start); | |||
let endTs = timestampSec(end); | |||
startTs = timestampToMidnight(startTs); | |||
endTs = timestampToMidnight(endTs, true); | |||
while (startTs < endTs) { | |||
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1)); | |||
startTs += SEC_IN_DAY; | |||
} | |||
const heatmapData = { | |||
dataPoints: dataPoints, | |||
start: start, | |||
end: end | |||
}; | |||
let heatmapArgs = { | |||
title: "Monthly Distribution", | |||
data: heatmapData, | |||
type: 'heatmap', | |||
discreteDomains: 1, | |||
countLabel: 'Level', | |||
colors: HEATMAP_COLORS_BLUE, | |||
legendScale: [0, 1, 2, 4, 5] | |||
}; | |||
let heatmapChart = new Chart("#chart-heatmap", heatmapArgs); | |||
Array.prototype.slice.call( | |||
document.querySelectorAll('.heatmap-mode-buttons button') | |||
).map(el => { | |||
el.addEventListener('click', (e) => { | |||
let btn = e.target; | |||
let mode = btn.getAttribute('data-mode'); | |||
let discreteDomains = 0; | |||
if(mode === 'discrete') { | |||
discreteDomains = 1; | |||
} | |||
let colors = []; | |||
let colors_mode = document | |||
.querySelector('.heatmap-color-buttons .active') | |||
.getAttribute('data-color'); | |||
if(colors_mode === 'halloween') { | |||
colors = HEATMAP_COLORS_YELLOW; | |||
} else if (colors_mode === 'blue') { | |||
colors = HEATMAP_COLORS_BLUE; | |||
} | |||
heatmapArgs.discreteDomains = discreteDomains; | |||
heatmapArgs.colors = colors; | |||
new Chart("#chart-heatmap", heatmapArgs); | |||
Array.prototype.slice.call( | |||
btn.parentNode.querySelectorAll('button')).map(el => { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
Array.prototype.slice.call( | |||
document.querySelectorAll('.heatmap-color-buttons button') | |||
).map(el => { | |||
el.addEventListener('click', (e) => { | |||
let btn = e.target; | |||
let colors_mode = btn.getAttribute('data-color'); | |||
let colors = []; | |||
if(colors_mode === 'halloween') { | |||
colors = HEATMAP_COLORS_YELLOW; | |||
} else if (colors_mode === 'blue') { | |||
colors = HEATMAP_COLORS_BLUE; | |||
} | |||
let discreteDomains = 1; | |||
let view_mode = document | |||
.querySelector('.heatmap-mode-buttons .active') | |||
.getAttribute('data-mode'); | |||
if(view_mode === 'continuous') { | |||
discreteDomains = 0; | |||
} | |||
heatmapArgs.discreteDomains = discreteDomains; | |||
heatmapArgs.colors = colors; | |||
new Chart("#chart-heatmap", heatmapArgs); | |||
Array.prototype.slice.call( | |||
btn.parentNode.querySelectorAll('button')).map(el => { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
document.querySelector('.export-heatmap').addEventListener('click', () => { | |||
heatmapChart.export(); | |||
}); |
@@ -1,648 +0,0 @@ | |||
(function () { | |||
'use strict'; | |||
// Fixed 5-color theme, | |||
// More colors are difficult to parse visually | |||
var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']; | |||
var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']; | |||
// Universal constants | |||
/** | |||
* Returns the value of a number upto 2 decimal places. | |||
* @param {Number} d Any number | |||
*/ | |||
/** | |||
* Returns whether or not two given arrays are equal. | |||
* @param {Array} arr1 First array | |||
* @param {Array} arr2 Second array | |||
*/ | |||
/** | |||
* Shuffles array in place. ES6 version | |||
* @param {Array} array An array containing the items. | |||
*/ | |||
function shuffle(array) { | |||
// Awesomeness: https://bost.ocks.org/mike/shuffle/ | |||
// https://stackoverflow.com/a/2450976/6495043 | |||
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1 | |||
for (var i = array.length - 1; i > 0; i--) { | |||
var j = Math.floor(Math.random() * (i + 1)); | |||
var _ref = [array[j], array[i]]; | |||
array[i] = _ref[0]; | |||
array[j] = _ref[1]; | |||
} | |||
return array; | |||
} | |||
/** | |||
* Fill an array with extra points | |||
* @param {Array} array Array | |||
* @param {Number} count number of filler elements | |||
* @param {Object} element element to fill with | |||
* @param {Boolean} start fill at start? | |||
*/ | |||
/** | |||
* Returns pixel width of string. | |||
* @param {String} string | |||
* @param {Number} charWidth Width of single char in pixels | |||
*/ | |||
// https://stackoverflow.com/a/29325222 | |||
function getRandomBias(min, max, bias, influence) { | |||
var range = max - min; | |||
var biasValue = range * bias + min; | |||
var rnd = Math.random() * range + min, | |||
// random in range | |||
mix = Math.random() * influence; // random mixer | |||
return rnd * (1 - mix) + biasValue * mix; // mix full range and bias | |||
} | |||
/** | |||
* Check if a number is valid for svg attributes | |||
* @param {object} candidate Candidate to test | |||
* @param {Boolean} nonNegative flag to treat negative number as invalid | |||
*/ | |||
/** | |||
* Round a number to the closes precision, max max precision 4 | |||
* @param {Number} d Any Number | |||
*/ | |||
// Playing around with dates | |||
var NO_OF_MILLIS = 1000; | |||
var SEC_IN_DAY = 86400; | |||
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; | |||
function clone(date) { | |||
return new Date(date.getTime()); | |||
} | |||
function timestampSec(date) { | |||
return date.getTime() / NO_OF_MILLIS; | |||
} | |||
function timestampToMidnight(timestamp) { | |||
var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | |||
var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY); | |||
if (roundAhead) { | |||
return midnightTs + SEC_IN_DAY; | |||
} | |||
return midnightTs; | |||
} | |||
// export function getMonthsBetween(startDate, endDate) {} | |||
// mutates | |||
// mutates | |||
function addDays(date, numberOfDays) { | |||
date.setDate(date.getDate() + numberOfDays); | |||
} | |||
// Composite Chart | |||
// ================================================================================ | |||
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850]; | |||
var lineCompositeData = { | |||
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"], | |||
yMarkers: [{ | |||
label: "Average 100 reports/month", | |||
value: 1200, | |||
options: { labelPos: "left" } | |||
}], | |||
datasets: [{ | |||
name: "Events", | |||
values: reportCountList | |||
}] | |||
}; | |||
var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]]; | |||
var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]]; | |||
var fireballOver25 = [ | |||
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], | |||
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]]; | |||
var barCompositeData = { | |||
labels: MONTH_NAMES_SHORT, | |||
datasets: [{ | |||
name: "Over 25 reports", | |||
values: fireballOver25[9] | |||
}, { | |||
name: "5 to 25 reports", | |||
values: fireball_5_25[9] | |||
}, { | |||
name: "2 to 5 reports", | |||
values: fireball_2_5[9] | |||
}] | |||
}; | |||
// Demo Chart multitype Chart | |||
// ================================================================================ | |||
var typeData = { | |||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"], | |||
yMarkers: [{ | |||
label: "Marker", | |||
value: 43, | |||
options: { labelPos: "left" } | |||
// type: 'dashed' | |||
}], | |||
yRegions: [{ | |||
label: "Region", | |||
start: -10, | |||
end: 50, | |||
options: { labelPos: "right" } | |||
}], | |||
datasets: [{ | |||
name: "Some Data", | |||
values: [18, 40, 30, 35, 8, 52, 17, -4], | |||
axisPosition: "right", | |||
chartType: "bar" | |||
}, { | |||
name: "Another Set", | |||
values: [30, 50, -10, 15, 18, 32, 27, 14], | |||
axisPosition: "right", | |||
chartType: "bar" | |||
}, { | |||
name: "Yet Another", | |||
values: [15, 20, -3, -15, 58, 12, -17, 37], | |||
chartType: "line" | |||
}] | |||
}; | |||
var trendsData = { | |||
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016], | |||
datasets: [{ | |||
values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8] | |||
}] | |||
}; | |||
var moonData = { | |||
names: ["Ganymede", "Callisto", "Io", "Europa"], | |||
masses: [14819000, 10759000, 8931900, 4800000], | |||
distances: [1070.412, 1882.709, 421.7, 671.034], | |||
diameters: [5262.4, 4820.6, 3637.4, 3121.6] | |||
}; | |||
var demoConfig = { | |||
lineComposite: { | |||
elementID: "#chart-composite-1", | |||
options: { | |||
title: "Fireball/Bolide Events - Yearly (reported)", | |||
data: lineCompositeData, | |||
type: "line", | |||
height: 190, | |||
colors: ["green"], | |||
isNavigable: 1, | |||
valuesOverPoints: 1, | |||
lineOptions: { | |||
dotSize: 8 | |||
} | |||
} | |||
}, | |||
barComposite: { | |||
elementID: "#chart-composite-2", | |||
options: { | |||
data: barCompositeData, | |||
type: "bar", | |||
height: 210, | |||
colors: ["violet", "light-blue", "#46a9f9"], | |||
valuesOverPoints: 1, | |||
axisOptions: { | |||
xAxisMode: "tick", | |||
shortenYAxisNumbers: true | |||
}, | |||
barOptions: { | |||
stacked: 1 | |||
} | |||
} | |||
}, | |||
demoMain: { | |||
elementID: "", | |||
options: { | |||
title: "My Awesome Chart", | |||
data: "typeData", | |||
type: "axis-mixed", | |||
height: 300, | |||
colors: ["purple", "magenta", "light-blue"], | |||
maxSlices: 10, | |||
tooltipOptions: { | |||
formatTooltipX: function formatTooltipX(d) { | |||
return (d + '').toUpperCase(); | |||
}, | |||
formatTooltipY: function formatTooltipY(d) { | |||
return d + ' pts'; | |||
} | |||
} | |||
} | |||
} | |||
}; | |||
/* eslint-disable no-unused-vars */ | |||
/* eslint-enable no-unused-vars */ | |||
// import { lineComposite, barComposite } from './demoConfig'; | |||
// ================================================================================ | |||
var Chart = frappe.Chart; // eslint-disable-line no-undef | |||
var lc = demoConfig.lineComposite; | |||
var lineCompositeChart = new Chart(lc.elementID, lc.options); | |||
var bc = demoConfig.barComposite; | |||
var barCompositeChart = new Chart(bc.elementID, bc.options); | |||
lineCompositeChart.parent.addEventListener('data-select', function (e) { | |||
var i = e.index; | |||
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]); | |||
}); | |||
// ================================================================================ | |||
var customColors = ['purple', 'magenta', 'light-blue']; | |||
var typeChartArgs = { | |||
title: "My Awesome Chart", | |||
data: typeData, | |||
type: 'axis-mixed', | |||
height: 300, | |||
colors: customColors, | |||
// maxLegendPoints: 6, | |||
maxSlices: 10, | |||
tooltipOptions: { | |||
formatTooltipX: function formatTooltipX(d) { | |||
return (d + '').toUpperCase(); | |||
}, | |||
formatTooltipY: function formatTooltipY(d) { | |||
return d + ' pts'; | |||
} | |||
} | |||
}; | |||
var aggrChart = new Chart("#chart-aggr", typeChartArgs); | |||
Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) { | |||
el.addEventListener('click', function (e) { | |||
var btn = e.target; | |||
var type = btn.getAttribute('data-type'); | |||
typeChartArgs.type = type; | |||
if (type !== 'axis-mixed') { | |||
typeChartArgs.colors = undefined; | |||
} else { | |||
typeChartArgs.colors = customColors; | |||
} | |||
if (type !== 'percentage') { | |||
typeChartArgs.height = 300; | |||
} else { | |||
typeChartArgs.height = undefined; | |||
} | |||
var newChart = new Chart("#chart-aggr", typeChartArgs); | |||
if (newChart) { | |||
aggrChart = newChart; | |||
} | |||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
document.querySelector('.export-aggr').addEventListener('click', function () { | |||
aggrChart.export(); | |||
}); | |||
// Update values chart | |||
// ================================================================================ | |||
var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"]; | |||
var getRandom = function getRandom() { | |||
return Math.floor(getRandomBias(-40, 60, 0.8, 1)); | |||
}; | |||
var updateDataAllValues = Array.from({ length: 30 }, getRandom); | |||
// We're gonna be shuffling this | |||
var updateDataAllIndices = updateDataAllLabels.map(function (d, i) { | |||
return i; | |||
}); | |||
var getUpdateData = function getUpdateData(source_array) { | |||
var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10; | |||
var indices = updateDataAllIndices.slice(0, length); | |||
return indices.map(function (index) { | |||
return source_array[index]; | |||
}); | |||
}; | |||
var updateData = { | |||
labels: getUpdateData(updateDataAllLabels), | |||
datasets: [{ | |||
"values": getUpdateData(updateDataAllValues) | |||
}], | |||
yMarkers: [{ | |||
label: "Altitude", | |||
value: 25, | |||
type: 'dashed' | |||
}], | |||
yRegions: [{ | |||
label: "Range", | |||
start: 10, | |||
end: 45 | |||
}] | |||
}; | |||
var updateChart = new Chart("#chart-update", { | |||
data: updateData, | |||
type: 'line', | |||
height: 300, | |||
colors: ['#ff6c03'], | |||
lineOptions: { | |||
// hideLine: 1, | |||
regionFill: 1 | |||
} | |||
}); | |||
var chartUpdateButtons = document.querySelector('.chart-update-buttons'); | |||
chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", function () { | |||
shuffle(updateDataAllIndices); | |||
var value = getRandom(); | |||
var start = getRandom(); | |||
var end = getRandom(); | |||
var data = { | |||
labels: updateDataAllLabels.slice(0, 10), | |||
datasets: [{ values: getUpdateData(updateDataAllValues) }], | |||
yMarkers: [{ | |||
label: "Altitude", | |||
value: value, | |||
type: 'dashed' | |||
}], | |||
yRegions: [{ | |||
label: "Range", | |||
start: start, | |||
end: end | |||
}] | |||
}; | |||
updateChart.update(data); | |||
}); | |||
chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", function () { | |||
var index = updateChart.state.datasetLength; // last index to add | |||
if (index >= updateDataAllIndices.length) return; | |||
updateChart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]); | |||
}); | |||
chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", function () { | |||
updateChart.removeDataPoint(); | |||
}); | |||
document.querySelector('.export-update').addEventListener('click', function () { | |||
updateChart.export(); | |||
}); | |||
// Trends Chart | |||
// ================================================================================ | |||
var plotChartArgs = { | |||
title: "Mean Total Sunspot Count - Yearly", | |||
data: trendsData, | |||
type: 'line', | |||
height: 300, | |||
colors: ['#238e38'], | |||
lineOptions: { | |||
hideDots: 1, | |||
heatline: 1 | |||
}, | |||
axisOptions: { | |||
xAxisMode: 'tick', | |||
yAxisMode: 'span', | |||
xIsSeries: 1 | |||
} | |||
}; | |||
var trendsChart = new Chart("#chart-trends", plotChartArgs); | |||
Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button')).map(function (el) { | |||
el.addEventListener('click', function (e) { | |||
var btn = e.target; | |||
var type = btn.getAttribute('data-type'); | |||
var config = {}; | |||
config[type] = 1; | |||
if (['regionFill', 'heatline'].includes(type)) { | |||
config.hideDots = 1; | |||
} | |||
// plotChartArgs.init = false; | |||
plotChartArgs.lineOptions = config; | |||
new Chart("#chart-trends", plotChartArgs); | |||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
document.querySelector('.export-trends').addEventListener('click', function () { | |||
trendsChart.export(); | |||
}); | |||
// Event chart | |||
// ================================================================================ | |||
var eventsData = { | |||
labels: ["Ganymede", "Callisto", "Io", "Europa"], | |||
datasets: [{ | |||
"values": moonData.distances, | |||
"formatted": moonData.distances.map(function (d) { | |||
return d * 1000 + " km"; | |||
}) | |||
}] | |||
}; | |||
var eventsChart = new Chart("#chart-events", { | |||
title: "Jupiter's Moons: Semi-major Axis (1000 km)", | |||
data: eventsData, | |||
type: 'bar', | |||
height: 330, | |||
colors: ['grey'], | |||
isNavigable: 1 | |||
}); | |||
var dataDiv = document.querySelector('.chart-events-data'); | |||
eventsChart.parent.addEventListener('data-select', function (e) { | |||
var name = moonData.names[e.index]; | |||
dataDiv.querySelector('.moon-name').innerHTML = name; | |||
dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000; | |||
dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index]; | |||
dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index]; | |||
dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg"; | |||
}); | |||
// Heatmap | |||
// ================================================================================ | |||
var today = new Date(); | |||
var start = clone(today); | |||
addDays(start, 4); | |||
var end = clone(start); | |||
start.setFullYear(start.getFullYear() - 2); | |||
end.setFullYear(end.getFullYear() - 1); | |||
var dataPoints = {}; | |||
var startTs = timestampSec(start); | |||
var endTs = timestampSec(end); | |||
startTs = timestampToMidnight(startTs); | |||
endTs = timestampToMidnight(endTs, true); | |||
while (startTs < endTs) { | |||
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1)); | |||
startTs += SEC_IN_DAY; | |||
} | |||
var heatmapData = { | |||
dataPoints: dataPoints, | |||
start: start, | |||
end: end | |||
}; | |||
var heatmapArgs = { | |||
title: "Monthly Distribution", | |||
data: heatmapData, | |||
type: 'heatmap', | |||
discreteDomains: 1, | |||
countLabel: 'Level', | |||
colors: HEATMAP_COLORS_BLUE, | |||
legendScale: [0, 1, 2, 4, 5] | |||
}; | |||
var heatmapChart = new Chart("#chart-heatmap", heatmapArgs); | |||
Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) { | |||
el.addEventListener('click', function (e) { | |||
var btn = e.target; | |||
var mode = btn.getAttribute('data-mode'); | |||
var discreteDomains = 0; | |||
if (mode === 'discrete') { | |||
discreteDomains = 1; | |||
} | |||
var colors = []; | |||
var colors_mode = document.querySelector('.heatmap-color-buttons .active').getAttribute('data-color'); | |||
if (colors_mode === 'halloween') { | |||
colors = HEATMAP_COLORS_YELLOW; | |||
} else if (colors_mode === 'blue') { | |||
colors = HEATMAP_COLORS_BLUE; | |||
} | |||
heatmapArgs.discreteDomains = discreteDomains; | |||
heatmapArgs.colors = colors; | |||
new Chart("#chart-heatmap", heatmapArgs); | |||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons button')).map(function (el) { | |||
el.addEventListener('click', function (e) { | |||
var btn = e.target; | |||
var colors_mode = btn.getAttribute('data-color'); | |||
var colors = []; | |||
if (colors_mode === 'halloween') { | |||
colors = HEATMAP_COLORS_YELLOW; | |||
} else if (colors_mode === 'blue') { | |||
colors = HEATMAP_COLORS_BLUE; | |||
} | |||
var discreteDomains = 1; | |||
var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode'); | |||
if (view_mode === 'continuous') { | |||
discreteDomains = 0; | |||
} | |||
heatmapArgs.discreteDomains = discreteDomains; | |||
heatmapArgs.colors = colors; | |||
new Chart("#chart-heatmap", heatmapArgs); | |||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) { | |||
el.classList.remove('active'); | |||
}); | |||
btn.classList.add('active'); | |||
}); | |||
}); | |||
document.querySelector('.export-heatmap').addEventListener('click', function () { | |||
heatmapChart.export(); | |||
}); | |||
}()); | |||
//# sourceMappingURL=index.min.js.map |
@@ -1,323 +0,0 @@ | |||
--- | |||
redirect_to: "https://frappe.io/charts" | |||
--- | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Frappe Charts</title> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize"> | |||
<meta name="description" content="A simple, responsive, modern charts library for the web."> | |||
<link rel="stylesheet" type="text/css" href="assets/css/reset.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/hljs.css" media="screen"> | |||
<script src="assets/js/highlight.pack.js"></script> | |||
<script>hljs.initHighlightingOnLoad();</script> | |||
<link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon"> | |||
<link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon"> | |||
<script async defer src="https://buttons.github.io/buttons.js"></script> | |||
</head> | |||
<body> | |||
<header> | |||
<h1>Frappe Charts</h1> | |||
<p class="lead-text">GitHub-inspired simple and modern SVG charts for the web<br>with zero dependencies.</p> | |||
<div id="chart-composite-1" class="border"></div> | |||
<p class="demo-tip">Click or use arrow keys to navigate data points</p> | |||
<div id="chart-composite-2" class="border"></div> | |||
</header> | |||
<section> | |||
<h6>Create a chart</h6> | |||
<pre><code class="hljs html"> <!--HTML--> | |||
<div id="chart"></div></code></pre> | |||
<pre><code class="hljs javascript"> // Javascript | |||
let chart = new frappe.Chart( "#chart", { // or DOM element | |||
data: { | |||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", | |||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"], | |||
datasets: [ | |||
{ | |||
name: "Some Data", chartType: 'bar', | |||
values: [25, 40, 30, 35, 8, 52, 17, -4] | |||
}, | |||
{ | |||
name: "Another Set", chartType: 'bar', | |||
values: [25, 50, -10, 15, 18, 32, 27, 14] | |||
}, | |||
{ | |||
name: "Yet Another", chartType: 'line', | |||
values: [15, 20, -3, -15, 58, 12, -17, 37] | |||
} | |||
], | |||
yMarkers: [{ label: "Marker", value: 70, | |||
options: { labelPos: 'left' }}], | |||
yRegions: [{ label: "Region", start: -10, end: 50, | |||
options: { labelPos: 'right' }}] | |||
}, | |||
title: "My Awesome Chart", | |||
type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage', 'donut' | |||
height: 300, | |||
colors: ['purple', '#ffa3ef', 'light-blue'], | |||
tooltipOptions: { | |||
formatTooltipX: d => (d + '').toUpperCase(), | |||
formatTooltipY: d => d + ' pts', | |||
} | |||
}); | |||
chart.export(); | |||
</code></pre> | |||
<div id="chart-aggr" class="border"></div> | |||
<div class="btn-group aggr-type-buttons margin-top mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-type='axis-mixed'>Mixed</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type='donut'>Donut Chart</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button> | |||
</div> | |||
<div class="btn-group export-buttons margin-top mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary export-aggr">Export ...</button> | |||
</div> | |||
</section> | |||
<section> | |||
<h6>Update Values</h6> | |||
<div id="chart-update" class="border"></div> | |||
<div class="chart-update-buttons mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button> | |||
<button type="button" class="btn btn-sm btn-secondary export-update">Export ...</button> | |||
</div> | |||
</section> | |||
<section> | |||
<h6>Plot Trends</h6> | |||
<div id="chart-trends" class="border"></div> | |||
<div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type="hideDots">Line</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type="hideLine">Dots</button> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type="regionFill">Region</button> | |||
</div> | |||
<div class="btn-group export-buttons mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary export-trends">Export ...</button> | |||
</div> | |||
</section> | |||
<section> | |||
<h6>Listen to state change</h6> | |||
<div class="row"> | |||
<div class="col-sm-8"> | |||
<div id="chart-events" class="border"></div> | |||
</div> | |||
<div class="col-sm-4 chart-events-data"> | |||
<div class="image-container border"> | |||
<img class="moon-image" src="./assets/img/europa.jpg"> | |||
</div> | |||
<div class="content-data margin-top"> | |||
<h6 class="moon-name">Europa</h6> | |||
<p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p> | |||
<p>Mass: <span class="mass">4800000</span> x 10^16 kg</p> | |||
<p>Diameter: <span class="diameter">3121.6</span> km</p> | |||
</div> | |||
</div> | |||
</div> | |||
<pre><code class="hljs javascript margin-top"> ... | |||
isNavigable: 1, // Navigate across data points; default 0 | |||
... | |||
chart.parent.addEventListener('data-select', (e) => { | |||
update_moon_data(e.index); // e contains index and value of current datapoint | |||
});</code></pre> | |||
</section> | |||
<section> | |||
<h6> | |||
And a Month-wise Heatmap | |||
</h6> | |||
<div id="chart-heatmap" class="border" | |||
style="overflow: scroll;"></div> | |||
<div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button> | |||
</div> | |||
<div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button> | |||
</div> | |||
<div class="btn-group export-buttons mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary export-heatmap">Export ...</button> | |||
</div> | |||
<pre><code class="hljs javascript margin-top"> let heatmap = new frappe.Chart("#heatmap", { | |||
type: 'heatmap', | |||
title: "Monthly Distribution", | |||
data: { | |||
dataPoints: {'1524064033': 8, /* ... */}, | |||
// object with timestamp-value pairs | |||
start: startDate | |||
end: endDate // Date objects | |||
}, | |||
countLabel: 'Level', | |||
discreteDomains: 0 // default: 1 | |||
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'], | |||
// Set of five incremental colors, | |||
// preferably with a low-saturation color for zero data; | |||
// def: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'] | |||
});</code></pre> | |||
</section> | |||
<section> | |||
<h6>Demo</h6> | |||
<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result" | |||
data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen"> | |||
See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a> | |||
by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on | |||
<a href="https://codepen.io">CodePen</a>. | |||
</p> | |||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script> | |||
</section> | |||
<section> | |||
<h6>Available options</h6> | |||
<pre><code class="hljs javascript"> | |||
... | |||
{ | |||
data: { | |||
labels: [], | |||
datasets: [], | |||
yRegions: [], | |||
yMarkers: [] | |||
} | |||
title: '', | |||
colors: [], | |||
height: 200, | |||
tooltipOptions: { | |||
formatTooltipX: d => (d + '').toUpperCase(), | |||
formatTooltipY: d => d + ' pts', | |||
} | |||
// Axis charts | |||
isNavigable: 1, // default: 0 | |||
valuesOverPoints: 1, // default: 0 | |||
barOptions: { | |||
spaceRatio: 1 // default: 0.5 | |||
stacked: 1 // default: 0 | |||
} | |||
lineOptions: { | |||
dotSize: 6, // default: 4 | |||
hideLine: 0, // default: 0 | |||
hideDots: 1, // default: 0 | |||
heatline: 1, // default: 0 | |||
regionFill: 1 // default: 0 | |||
} | |||
axisOptions: { | |||
yAxisMode: 'span', // Axis lines, default | |||
xAxisMode: 'tick', // No axis lines, only short ticks | |||
xIsSeries: 1 // Allow skipping x values for space | |||
// default: 0 | |||
}, | |||
// Pie/Percentage/Donut charts | |||
maxLegendPoints: 6, // default: 20 | |||
maxSlices: 10, // default: 20 | |||
// Percentage chart | |||
barOptions: { | |||
height: 15 // default: 20 | |||
depth: 5 // default: 2 | |||
} | |||
// Heatmap | |||
discreteDomains: 1, // default: 1 | |||
} | |||
... | |||
// Updating values | |||
chart.update(data); | |||
// Axis charts: | |||
chart.addDataPoint(label, valueFromEachDataset, index) | |||
chart.removeDataPoint(index) | |||
chart.updateDataset(datasetValues, index) | |||
// Exporting | |||
chart.export(); | |||
// Unbind window-resize events | |||
chart.destroy(); | |||
</code></pre> | |||
</section> | |||
<section> | |||
<h6>Install</h6> | |||
<p>Install via npm</p> | |||
<pre><code class="hljs console"> npm install frappe-charts</code></pre> | |||
<p>And include it in your project</p> | |||
<pre><code class="hljs javascript"> import { Chart } from "frappe-charts"</code></pre> | |||
<p>(for ES6+ import the ESModule from the dist folder)</p> | |||
<pre><code class="hljs javascript"> import { Chart } from "frappe-charts/dist/frappe-charts.esm.js"</code></pre> | |||
<p>... or include it directly in your HTML</p> | |||
<pre><code class="hljs html"> <script src="https://unpkg.com/frappe-charts@1.1.0"></script></code></pre> | |||
<p>Use as:</p> | |||
<pre><code class="hljs javascript"> new Chart(); // ES6 module | |||
// or | |||
new frappe.Chart(); // Browser</code></pre> | |||
</section> | |||
<section class="text-center"> | |||
<!-- Closing --> | |||
<a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button btn">Download</button></a> | |||
<p style="margin-top: 3rem;margin-bottom: 1.5rem;"> | |||
<!-- <a href="docs.html" style="margin-right: 1rem;" target="_blank">Documentation</a> --> | |||
<a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a> | |||
</p> | |||
<p style="margin-top: 1rem;"> | |||
<a class="github-button" href="https://github.com/frappe/charts" data-icon="octicon-star" data-show-count="true" aria-label="Star frappe/charts on GitHub">Star</a> | |||
</p> | |||
<p>License: MIT</p> | |||
</section> | |||
<footer class="built-with-frappe text-center"> | |||
<img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="./assets/img/frappe-bird.png"> | |||
<p style="margin: 24px 0 0px 0; font-size: 15px"> | |||
Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>. | |||
Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>. | |||
Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>. | |||
</p> | |||
<p style="margin: 24px 0 80px 0; font-size: 12px"> | |||
Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>, | |||
<a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and | |||
<a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a> | |||
</p> | |||
</footer> | |||
<a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github"> | |||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"> | |||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> | |||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> | |||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> | |||
</svg> | |||
</a> | |||
<script src="assets/js/frappe-charts.min.js"></script> | |||
<script src="assets/js/index.min.js"></script> | |||
</body> | |||
</html> |