[docs] cleanup scripts, build index.min.js
This commit is contained in:
Prateeksha Singh
parent
4d2ddf18cd
commit
3d4e5c106f
36
dist/frappe-charts.esm.js
vendored
36
dist/frappe-charts.esm.js
vendored
@ -224,7 +224,7 @@ const DATA_COLOR_DIVISIONS = {
|
||||
heatmap: HEATMAP_DISTRIBUTION_SIZE
|
||||
};
|
||||
|
||||
const BASE_CHART_TOP_MARGIN = 30;
|
||||
const BASE_CHART_TOP_MARGIN = 10;
|
||||
const BASE_CHART_LEFT_MARGIN = 20;
|
||||
const BASE_CHART_RIGHT_MARGIN = 20;
|
||||
|
||||
@ -268,6 +268,10 @@ const DEFAULT_COLORS = {
|
||||
heatmap: HEATMAP_COLORS
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the value of a number upto 2 decimal places.
|
||||
* @param {Number} d Any number
|
||||
*/
|
||||
function floatTwo(d) {
|
||||
return parseFloat(d.toFixed(2));
|
||||
}
|
||||
@ -1276,7 +1280,7 @@ class BaseChart {
|
||||
bindTooltip() {}
|
||||
|
||||
draw(onlyWidthChange=false, init=false) {
|
||||
this.calcWidth();
|
||||
this.updateWidth();
|
||||
this.calc(onlyWidthChange);
|
||||
this.makeChartArea();
|
||||
this.setupComponents();
|
||||
@ -1297,7 +1301,7 @@ class BaseChart {
|
||||
this.setupNavigation(init);
|
||||
}
|
||||
|
||||
calcWidth() {
|
||||
updateWidth() {
|
||||
this.baseWidth = getElementContentWidth(this.parent);
|
||||
this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
|
||||
}
|
||||
@ -1343,12 +1347,8 @@ class BaseChart {
|
||||
|
||||
updateNav() {
|
||||
if(this.config.isNavigable) {
|
||||
// if(!this.overlayGuides){
|
||||
this.makeOverlay();
|
||||
this.bindUnits();
|
||||
// } else {
|
||||
// this.updateOverlay();
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -2148,6 +2148,8 @@ const NO_OF_MILLIS = 1000;
|
||||
const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
|
||||
|
||||
|
||||
// https://stackoverflow.com/a/11252167/6495043
|
||||
function treatAsUtc(dateStr) {
|
||||
let result = new Date(dateStr);
|
||||
@ -2165,6 +2167,8 @@ function getDdMmYyyy(date) {
|
||||
].join('-');
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getWeeksBetween(startDateStr, endDateStr) {
|
||||
return Math.ceil(getDaysBetween(startDateStr, endDateStr) / 7);
|
||||
}
|
||||
@ -2431,13 +2435,7 @@ class Heatmap extends BaseChart {
|
||||
this.no_of_cols = getWeeksBetween(this.firstWeekStart + '', this.lastWeekStart + '') + 1;
|
||||
}
|
||||
|
||||
setMargins() {
|
||||
super.setMargins();
|
||||
// this.leftMargin = HEATMAP_SQUARE_SIZE;
|
||||
// this.topMargin = HEATMAP_SQUARE_SIZE;
|
||||
}
|
||||
|
||||
calcWidth() {
|
||||
updateWidth() {
|
||||
this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
|
||||
|
||||
if(this.discreteDomains) {
|
||||
@ -2457,8 +2455,13 @@ class Heatmap extends BaseChart {
|
||||
}
|
||||
|
||||
calc() {
|
||||
let dataValues = Object.keys(this.dataPoints).map(key => this.dataPoints[key]);
|
||||
this.distribution = calcDistribution(dataValues, HEATMAP_DISTRIBUTION_SIZE);
|
||||
this.distribution = calcDistribution(
|
||||
Object.values(this.dataPoints), HEATMAP_DISTRIBUTION_SIZE);
|
||||
}
|
||||
|
||||
update(data=this.data) {
|
||||
this.data = this.prepareData(data);
|
||||
this.draw();
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -3282,6 +3285,7 @@ class AxisChart extends BaseChart {
|
||||
// removeDataPoint(index = 0) {}
|
||||
}
|
||||
|
||||
// import MultiAxisChart from './charts/MultiAxisChart';
|
||||
const chartTypes = {
|
||||
// multiaxis: MultiAxisChart,
|
||||
percentage: PercentageChart,
|
||||
|
||||
2
dist/frappe-charts.min.cjs.js
vendored
2
dist/frappe-charts.min.cjs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.esm.js
vendored
2
dist/frappe-charts.min.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.iife.js
vendored
2
dist/frappe-charts.min.iife.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.iife.js.map
vendored
2
dist/frappe-charts.min.iife.js.map
vendored
File diff suppressed because one or more lines are too long
196
docs/assets/js/data.js
Normal file
196
docs/assets/js/data.js
Normal file
@ -0,0 +1,196 @@
|
||||
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,
|
||||
}
|
||||
],
|
||||
|
||||
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,
|
||||
// type: 'dashed'
|
||||
}
|
||||
],
|
||||
|
||||
yRegions: [
|
||||
{
|
||||
label: "Region",
|
||||
start: -10,
|
||||
end: 50
|
||||
},
|
||||
],
|
||||
|
||||
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.700, 671.034],
|
||||
diameters: [5262.4, 4820.6, 3637.4, 3121.6],
|
||||
};
|
||||
|
||||
// const jupiterMoons = {
|
||||
// 'Ganymede': {
|
||||
// mass: '14819000 x 10^16 kg',
|
||||
// 'semi-major-axis': '1070412 km',
|
||||
// 'diameter': '5262.4 km'
|
||||
// },
|
||||
// 'Callisto': {
|
||||
// mass: '10759000 x 10^16 kg',
|
||||
// 'semi-major-axis': '1882709 km',
|
||||
// 'diameter': '4820.6 km'
|
||||
// },
|
||||
// 'Io': {
|
||||
// mass: '8931900 x 10^16 kg',
|
||||
// 'semi-major-axis': '421700 km',
|
||||
// 'diameter': '3637.4 km'
|
||||
// },
|
||||
// 'Europa': {
|
||||
// mass: '4800000 x 10^16 kg',
|
||||
// 'semi-major-axis': '671034 km',
|
||||
// 'diameter': '3121.6 km'
|
||||
// },
|
||||
// };
|
||||
|
||||
// ================================================================================
|
||||
|
||||
let today = new Date();
|
||||
let start = new Date(today.getTime());
|
||||
let end = new Date(today.getTime());
|
||||
start.setFullYear( start.getFullYear() - 2 );
|
||||
end.setFullYear( start.getFullYear() - 1 );
|
||||
|
||||
export let dataPoints = {};
|
||||
let current_date = new Date();
|
||||
let timestamp = current_date.getTime()/1000;
|
||||
timestamp = Math.floor(timestamp - (timestamp % 86400)).toFixed(1); // convert to midnight
|
||||
for (var i = 0; i< 375; i++) {
|
||||
dataPoints[parseInt(timestamp)] = Math.floor(Math.random() * 5);
|
||||
timestamp = Math.floor(timestamp - 86400).toFixed(1);
|
||||
}
|
||||
|
||||
export const heatmapData = {
|
||||
dataPoints: dataPoints,
|
||||
start: start,
|
||||
end: end
|
||||
};
|
||||
2
docs/assets/js/frappe-charts.min.js
vendored
2
docs/assets/js/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,92 +1,15 @@
|
||||
// Composite Chart
|
||||
import { shuffle } from '../../../src/js/utils/helpers';
|
||||
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
|
||||
barCompositeData, typeData, trendsData, moonData, heatmapData } from './data';
|
||||
|
||||
// ================================================================================
|
||||
let reportCountList = [152, 222, 199, 287, 534, 709,
|
||||
1179, 1256, 1632, 1856, 1850];
|
||||
|
||||
let lineCompositeData = {
|
||||
labels: ["2007", "2008", "2009", "2010", "2011", "2012",
|
||||
"2013", "2014", "2015", "2016", "2017"],
|
||||
|
||||
yMarkers: [
|
||||
{
|
||||
label: "Average 100 reports/month",
|
||||
value: 1200,
|
||||
}
|
||||
],
|
||||
|
||||
datasets: [{
|
||||
"name": "Events",
|
||||
"values": reportCountList
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
let 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],
|
||||
];
|
||||
let 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],
|
||||
];
|
||||
let 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]
|
||||
];
|
||||
|
||||
let monthNames = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
|
||||
let barCompositeData = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
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]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let c1 = document.querySelector("#chart-composite-1");
|
||||
let c2 = document.querySelector("#chart-composite-2");
|
||||
|
||||
let lineCompositeChart = new frappe.Chart (c1, {
|
||||
let Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||
|
||||
let lineCompositeChart = new Chart (c1, {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: 'line',
|
||||
@ -102,7 +25,7 @@ let lineCompositeChart = new frappe.Chart (c1, {
|
||||
// regionFill: 1
|
||||
});
|
||||
|
||||
let barCompositeChart = new frappe.Chart (c2, {
|
||||
let barCompositeChart = new Chart (c2, {
|
||||
data: barCompositeData,
|
||||
type: 'bar',
|
||||
height: 190,
|
||||
@ -124,67 +47,8 @@ lineCompositeChart.parent.addEventListener('data-select', (e) => {
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
// Demo Chart (bar, linepts, scatter(blobs), percentage)
|
||||
// ================================================================================
|
||||
let typeData = {
|
||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
||||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
||||
|
||||
yMarkers: [
|
||||
{
|
||||
label: "Marker",
|
||||
value: 43,
|
||||
// type: 'dashed'
|
||||
}
|
||||
],
|
||||
|
||||
yRegions: [
|
||||
{
|
||||
label: "Region",
|
||||
start: -10,
|
||||
end: 50
|
||||
},
|
||||
],
|
||||
|
||||
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'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// let typeChart = new frappe.Chart("#chart-types", {
|
||||
// title: "My Awesome Chart",
|
||||
// data: typeData,
|
||||
// type: 'bar',
|
||||
// height: 250,
|
||||
// colors: ['purple', 'magenta', 'red'],
|
||||
// tooltipOptions: {
|
||||
// formatTooltipX: d => (d + '').toUpperCase(),
|
||||
// formatTooltipY: d => d + ' pts',
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
|
||||
|
||||
// Aggregation chart
|
||||
// ================================================================================
|
||||
let args = {
|
||||
data: typeData,
|
||||
type: 'axis-mixed',
|
||||
@ -198,8 +62,9 @@ let args = {
|
||||
formatTooltipX: d => (d + '').toUpperCase(),
|
||||
formatTooltipY: d => d + ' pts',
|
||||
}
|
||||
}
|
||||
let aggrChart = new frappe.Chart("#chart-aggr", args);
|
||||
};
|
||||
|
||||
let aggrChart = new Chart("#chart-aggr", args);
|
||||
|
||||
Array.prototype.slice.call(
|
||||
document.querySelectorAll('.aggr-type-buttons button')
|
||||
@ -223,25 +88,25 @@ Array.prototype.slice.call(
|
||||
|
||||
// Update values chart
|
||||
// ================================================================================
|
||||
let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
|
||||
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(Math.random() * 75 - 15);
|
||||
let update_data_all_values = Array.from({length: 30}, getRandom);
|
||||
let updateDataAllValues = Array.from({length: 30}, getRandom);
|
||||
|
||||
// We're gonna be shuffling this
|
||||
let update_data_all_indices = update_data_all_labels.map((d,i) => i);
|
||||
let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
|
||||
|
||||
let get_update_data = (source_array, length=10) => {
|
||||
let indices = update_data_all_indices.slice(0, length);
|
||||
let getUpdateData = (source_array, length=10) => {
|
||||
let indices = updateDataAllIndices.slice(0, length);
|
||||
return indices.map((index) => source_array[index]);
|
||||
};
|
||||
|
||||
let update_data = {
|
||||
labels: get_update_data(update_data_all_labels),
|
||||
labels: getUpdateData(updateDataAllLabels),
|
||||
datasets: [{
|
||||
"values": get_update_data(update_data_all_values)
|
||||
"values": getUpdateData(updateDataAllValues)
|
||||
}],
|
||||
yMarkers: [
|
||||
{
|
||||
@ -259,7 +124,7 @@ let update_data = {
|
||||
],
|
||||
};
|
||||
|
||||
let update_chart = new frappe.Chart("#chart-update", {
|
||||
let update_chart = new Chart("#chart-update", {
|
||||
data: update_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
@ -272,14 +137,14 @@ let update_chart = new frappe.Chart("#chart-update", {
|
||||
|
||||
let chart_update_buttons = document.querySelector('.chart-update-buttons');
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
|
||||
shuffle(update_data_all_indices);
|
||||
chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", () => {
|
||||
shuffle(updateDataAllIndices);
|
||||
let value = getRandom();
|
||||
let start = getRandom();
|
||||
let end = getRandom();
|
||||
let data = {
|
||||
labels: update_data_all_labels.slice(0, 10),
|
||||
datasets: [{values: get_update_data(update_data_all_values)}],
|
||||
labels: updateDataAllLabels.slice(0, 10),
|
||||
datasets: [{values: getUpdateData(updateDataAllValues)}],
|
||||
yMarkers: [
|
||||
{
|
||||
label: "Altitude",
|
||||
@ -294,44 +159,28 @@ chart_update_buttons.querySelector('[data-update="random"]').addEventListener("c
|
||||
end: end
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
update_chart.update(data);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
|
||||
chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", () => {
|
||||
let index = update_chart.state.datasetLength; // last index to add
|
||||
if(index >= update_data_all_indices.length) return;
|
||||
if(index >= updateDataAllIndices.length) return;
|
||||
update_chart.addDataPoint(
|
||||
update_data_all_labels[index], [update_data_all_values[index]]
|
||||
updateDataAllLabels[index], [updateDataAllValues[index]]
|
||||
);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
|
||||
chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", () => {
|
||||
update_chart.removeDataPoint();
|
||||
});
|
||||
|
||||
// Trends Chart
|
||||
// ================================================================================
|
||||
let trends_data = {
|
||||
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]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let plotChartArgs = {
|
||||
title: "Mean Total Sunspot Count - Yearly",
|
||||
data: trends_data,
|
||||
data: trendsData,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
colors: ['#238e38'],
|
||||
@ -346,7 +195,7 @@ let plotChartArgs = {
|
||||
}
|
||||
};
|
||||
|
||||
new frappe.Chart("#chart-trends", plotChartArgs);
|
||||
new Chart("#chart-trends", plotChartArgs);
|
||||
|
||||
Array.prototype.slice.call(
|
||||
document.querySelectorAll('.chart-plot-buttons button')
|
||||
@ -364,7 +213,7 @@ Array.prototype.slice.call(
|
||||
// plotChartArgs.init = false;
|
||||
plotChartArgs.lineOptions = config;
|
||||
|
||||
new frappe.Chart("#chart-trends", plotChartArgs);
|
||||
new Chart("#chart-trends", plotChartArgs);
|
||||
|
||||
Array.prototype.slice.call(
|
||||
btn.parentNode.querySelectorAll('button')).map(el => {
|
||||
@ -377,89 +226,44 @@ Array.prototype.slice.call(
|
||||
|
||||
// Event chart
|
||||
// ================================================================================
|
||||
let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
|
||||
let masses = [14819000, 10759000, 8931900, 4800000];
|
||||
let distances = [1070.412, 1882.709, 421.700, 671.034];
|
||||
let diameters = [5262.4, 4820.6, 3637.4, 3121.6];
|
||||
|
||||
let jupiter_moons = {
|
||||
'Ganymede': {
|
||||
mass: '14819000 x 10^16 kg',
|
||||
'semi-major-axis': '1070412 km',
|
||||
'diameter': '5262.4 km'
|
||||
},
|
||||
'Callisto': {
|
||||
mass: '10759000 x 10^16 kg',
|
||||
'semi-major-axis': '1882709 km',
|
||||
'diameter': '4820.6 km'
|
||||
},
|
||||
'Io': {
|
||||
mass: '8931900 x 10^16 kg',
|
||||
'semi-major-axis': '421700 km',
|
||||
'diameter': '3637.4 km'
|
||||
},
|
||||
'Europa': {
|
||||
mass: '4800000 x 10^16 kg',
|
||||
'semi-major-axis': '671034 km',
|
||||
'diameter': '3121.6 km'
|
||||
},
|
||||
};
|
||||
|
||||
let events_data = {
|
||||
|
||||
let eventsData = {
|
||||
labels: ["Ganymede", "Callisto", "Io", "Europa"],
|
||||
datasets: [
|
||||
{
|
||||
"values": distances,
|
||||
"formatted": distances.map(d => d*1000 + " km")
|
||||
"values": moonData.distances,
|
||||
"formatted": moonData.distances.map(d => d*1000 + " km")
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let events_chart = new frappe.Chart("#chart-events", {
|
||||
let eventsChart = new Chart("#chart-events", {
|
||||
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
||||
data: events_data,
|
||||
data: eventsData,
|
||||
type: 'bar',
|
||||
height: 250,
|
||||
colors: ['grey'],
|
||||
isNavigable: 1,
|
||||
});
|
||||
|
||||
let data_div = document.querySelector('.chart-events-data');
|
||||
let dataDiv = document.querySelector('.chart-events-data');
|
||||
|
||||
events_chart.parent.addEventListener('data-select', (e) => {
|
||||
let name = moon_names[e.index];
|
||||
data_div.querySelector('.moon-name').innerHTML = name;
|
||||
data_div.querySelector('.semi-major-axis').innerHTML = distances[e.index] * 1000;
|
||||
data_div.querySelector('.mass').innerHTML = masses[e.index];
|
||||
data_div.querySelector('.diameter').innerHTML = diameters[e.index];
|
||||
data_div.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
|
||||
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 heatmapData = {};
|
||||
let current_date = new Date();
|
||||
let timestamp = current_date.getTime()/1000;
|
||||
timestamp = Math.floor(timestamp - (timestamp % 86400)).toFixed(1); // convert to midnight
|
||||
for (var i = 0; i< 375; i++) {
|
||||
heatmapData[parseInt(timestamp)] = Math.floor(Math.random() * 5);
|
||||
timestamp = Math.floor(timestamp - 86400).toFixed(1);
|
||||
}
|
||||
|
||||
let today = new Date();
|
||||
let start = today;
|
||||
let end = '';
|
||||
start.setFullYear( start.getFullYear() - 2 );
|
||||
|
||||
let heatmap = new frappe.Chart("#chart-heatmap", {
|
||||
data: {
|
||||
dataPoints: heatmapData,
|
||||
start: start,
|
||||
end: end,
|
||||
},
|
||||
let heatmap = new Chart("#chart-heatmap", {
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
height: 115,
|
||||
discreteDomains: 1,
|
||||
@ -488,7 +292,7 @@ Array.prototype.slice.call(
|
||||
colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
||||
}
|
||||
|
||||
new frappe.Chart("#chart-heatmap", {
|
||||
new Chart("#chart-heatmap", {
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
legendScale: [0, 1, 2, 4, 5],
|
||||
@ -526,7 +330,7 @@ Array.prototype.slice.call(
|
||||
discreteDomains = 0;
|
||||
}
|
||||
|
||||
new frappe.Chart("#chart-heatmap", {
|
||||
new Chart("#chart-heatmap", {
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
legendScale: [0, 1, 2, 4, 5],
|
||||
@ -542,29 +346,3 @@ Array.prototype.slice.call(
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Helpers
|
||||
// ================================================================================
|
||||
function shuffle(array) {
|
||||
// https://stackoverflow.com/a/2450976/6495043
|
||||
// Awesomeness: https://bost.ocks.org/mike/shuffle/
|
||||
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
// While there remain elements to shuffle...
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
// Pick a remaining element...
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
// And swap it with the current element.
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
|
||||
|
||||
556
docs/assets/js/index.min.js
vendored
Normal file
556
docs/assets/js/index.min.js
vendored
Normal file
@ -0,0 +1,556 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function __$styleInject(css, ref) {
|
||||
if ( ref === void 0 ) ref = {};
|
||||
var insertAt = ref.insertAt;
|
||||
|
||||
if (!css || typeof document === 'undefined') { return; }
|
||||
|
||||
var head = document.head || document.getElementsByTagName('head')[0];
|
||||
var style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
|
||||
if (insertAt === 'top') {
|
||||
if (head.firstChild) {
|
||||
head.insertBefore(style, head.firstChild);
|
||||
} else {
|
||||
head.appendChild(style);
|
||||
}
|
||||
} else {
|
||||
head.appendChild(style);
|
||||
}
|
||||
|
||||
if (style.styleSheet) {
|
||||
style.styleSheet.cssText = css;
|
||||
} else {
|
||||
style.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
|
||||
// Universal constants
|
||||
|
||||
|
||||
|
||||
// Fixed 5-color theme,
|
||||
// More colors are difficult to parse visually
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
// Playing around with dates
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
|
||||
// https://stackoverflow.com/a/11252167/6495043
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// mutates
|
||||
|
||||
// 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
|
||||
}],
|
||||
|
||||
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
|
||||
// type: 'dashed'
|
||||
}],
|
||||
|
||||
yRegions: [{
|
||||
label: "Region",
|
||||
start: -10,
|
||||
end: 50
|
||||
}],
|
||||
|
||||
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.700, 671.034],
|
||||
diameters: [5262.4, 4820.6, 3637.4, 3121.6]
|
||||
};
|
||||
|
||||
// const jupiterMoons = {
|
||||
// 'Ganymede': {
|
||||
// mass: '14819000 x 10^16 kg',
|
||||
// 'semi-major-axis': '1070412 km',
|
||||
// 'diameter': '5262.4 km'
|
||||
// },
|
||||
// 'Callisto': {
|
||||
// mass: '10759000 x 10^16 kg',
|
||||
// 'semi-major-axis': '1882709 km',
|
||||
// 'diameter': '4820.6 km'
|
||||
// },
|
||||
// 'Io': {
|
||||
// mass: '8931900 x 10^16 kg',
|
||||
// 'semi-major-axis': '421700 km',
|
||||
// 'diameter': '3637.4 km'
|
||||
// },
|
||||
// 'Europa': {
|
||||
// mass: '4800000 x 10^16 kg',
|
||||
// 'semi-major-axis': '671034 km',
|
||||
// 'diameter': '3121.6 km'
|
||||
// },
|
||||
// };
|
||||
|
||||
// ================================================================================
|
||||
|
||||
var today = new Date();
|
||||
var start = new Date(today.getTime());
|
||||
var end = new Date(today.getTime());
|
||||
start.setFullYear(start.getFullYear() - 2);
|
||||
end.setFullYear(start.getFullYear() - 1);
|
||||
|
||||
var dataPoints = {};
|
||||
var current_date = new Date();
|
||||
var timestamp = current_date.getTime() / 1000;
|
||||
timestamp = Math.floor(timestamp - timestamp % 86400).toFixed(1); // convert to midnight
|
||||
for (var i = 0; i < 375; i++) {
|
||||
dataPoints[parseInt(timestamp)] = Math.floor(Math.random() * 5);
|
||||
timestamp = Math.floor(timestamp - 86400).toFixed(1);
|
||||
}
|
||||
|
||||
var heatmapData = {
|
||||
dataPoints: dataPoints,
|
||||
start: start,
|
||||
end: end
|
||||
};
|
||||
|
||||
var c1 = document.querySelector("#chart-composite-1");
|
||||
var c2 = document.querySelector("#chart-composite-2");
|
||||
|
||||
var Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||
|
||||
var lineCompositeChart = new Chart(c1, {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: 'line',
|
||||
height: 190,
|
||||
colors: ['green'],
|
||||
isNavigable: 1,
|
||||
valuesOverPoints: 1,
|
||||
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
}
|
||||
// yAxisMode: 'tick'
|
||||
// regionFill: 1
|
||||
});
|
||||
|
||||
var barCompositeChart = new Chart(c2, {
|
||||
data: barCompositeData,
|
||||
type: 'bar',
|
||||
height: 190,
|
||||
colors: ['violet', 'light-blue', '#46a9f9'],
|
||||
valuesOverPoints: 1,
|
||||
axisOptions: {
|
||||
xAxisMode: 'tick'
|
||||
},
|
||||
barOptions: {
|
||||
stacked: 1
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
lineCompositeChart.parent.addEventListener('data-select', function (e) {
|
||||
var i = e.index;
|
||||
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
|
||||
});
|
||||
|
||||
// ================================================================================
|
||||
|
||||
var args = {
|
||||
data: typeData,
|
||||
type: 'axis-mixed',
|
||||
height: 250,
|
||||
colors: ['purple', 'magenta', 'light-blue'],
|
||||
|
||||
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", args);
|
||||
|
||||
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');
|
||||
args.type = type;
|
||||
|
||||
var newChart = aggrChart.getDifferentChart(type);
|
||||
if (newChart) {
|
||||
aggrChart = newChart;
|
||||
}
|
||||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 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(Math.random() * 75 - 15);
|
||||
};
|
||||
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 update_data = {
|
||||
labels: getUpdateData(updateDataAllLabels),
|
||||
datasets: [{
|
||||
"values": getUpdateData(updateDataAllValues)
|
||||
}],
|
||||
yMarkers: [{
|
||||
label: "Altitude",
|
||||
value: 25,
|
||||
type: 'dashed'
|
||||
}],
|
||||
yRegions: [{
|
||||
label: "Range",
|
||||
start: 10,
|
||||
end: 45
|
||||
}]
|
||||
};
|
||||
|
||||
var update_chart = new Chart("#chart-update", {
|
||||
data: update_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
colors: ['#ff6c03'],
|
||||
lineOptions: {
|
||||
// hideLine: 1,
|
||||
regionFill: 1
|
||||
}
|
||||
});
|
||||
|
||||
var chart_update_buttons = document.querySelector('.chart-update-buttons');
|
||||
|
||||
chart_update_buttons.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
|
||||
}]
|
||||
};
|
||||
update_chart.update(data);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", function () {
|
||||
var index = update_chart.state.datasetLength; // last index to add
|
||||
if (index >= updateDataAllIndices.length) return;
|
||||
update_chart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", function () {
|
||||
update_chart.removeDataPoint();
|
||||
});
|
||||
|
||||
// Trends Chart
|
||||
// ================================================================================
|
||||
|
||||
var plotChartArgs = {
|
||||
title: "Mean Total Sunspot Count - Yearly",
|
||||
data: trendsData,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
colors: ['#238e38'],
|
||||
lineOptions: {
|
||||
hideDots: 1,
|
||||
heatline: 1
|
||||
},
|
||||
axisOptions: {
|
||||
xAxisMode: 'tick',
|
||||
yAxisMode: 'span',
|
||||
xIsSeries: 1
|
||||
}
|
||||
};
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
// 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: 250,
|
||||
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 heatmap = new Chart("#chart-heatmap", {
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
height: 115,
|
||||
discreteDomains: 1,
|
||||
colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
|
||||
});
|
||||
|
||||
console.log(heatmapData, heatmap);
|
||||
|
||||
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 = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
||||
}
|
||||
|
||||
new Chart("#chart-heatmap", {
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
legendScale: [0, 1, 2, 4, 5],
|
||||
height: 115,
|
||||
discreteDomains: discreteDomains,
|
||||
colors: colors
|
||||
});
|
||||
|
||||
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 = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
||||
}
|
||||
|
||||
var discreteDomains = 1;
|
||||
|
||||
var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode');
|
||||
if (view_mode === 'continuous') {
|
||||
discreteDomains = 0;
|
||||
}
|
||||
|
||||
new Chart("#chart-heatmap", {
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
legendScale: [0, 1, 2, 4, 5],
|
||||
height: 115,
|
||||
discreteDomains: discreteDomains,
|
||||
colors: colors
|
||||
});
|
||||
|
||||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=index.min.js.map
|
||||
1
docs/assets/js/index.min.js.map
Normal file
1
docs/assets/js/index.min.js.map
Normal file
File diff suppressed because one or more lines are too long
@ -1,559 +0,0 @@
|
||||
// Composite Chart
|
||||
// ================================================================================
|
||||
let report_count_list = [17, 40, 33, 44, 126, 156,
|
||||
324, 333, 478, 495, 176];
|
||||
|
||||
let bar_composite_data = {
|
||||
labels: ["2007", "2008", "2009", "2010", "2011", "2012",
|
||||
"2013", "2014", "2015", "2016", "2017"],
|
||||
|
||||
yMarkers: [
|
||||
{
|
||||
label: "Marker 1",
|
||||
value: 420,
|
||||
},
|
||||
{
|
||||
label: "Marker 2",
|
||||
value: 250,
|
||||
}
|
||||
],
|
||||
|
||||
yRegions: [
|
||||
{
|
||||
label: "Region Y 1",
|
||||
start: 100,
|
||||
end: 300
|
||||
},
|
||||
],
|
||||
|
||||
datasets: [{
|
||||
"name": "Events",
|
||||
"values": report_count_list,
|
||||
// "formatted": report_count_list.map(d => d + " reports")
|
||||
}]
|
||||
};
|
||||
|
||||
let line_composite_data = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
|
||||
// "values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40],
|
||||
// "values": [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40],
|
||||
}]
|
||||
};
|
||||
|
||||
let more_line_data = [
|
||||
[4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1],
|
||||
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4],
|
||||
[7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1],
|
||||
[0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10],
|
||||
[9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13],
|
||||
[9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24],
|
||||
[20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38],
|
||||
[29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27],
|
||||
[36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26],
|
||||
[37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35],
|
||||
[36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
|
||||
// [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40]
|
||||
// [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40]
|
||||
];
|
||||
|
||||
let c1 = document.querySelector("#chart-composite-1");
|
||||
let c2 = document.querySelector("#chart-composite-2");
|
||||
|
||||
let bar_composite_chart = new Chart (c1, {
|
||||
title: "Fireball/Bolide Events - Yearly (more than 5 reports)",
|
||||
data: bar_composite_data,
|
||||
type: 'bar',
|
||||
height: 180,
|
||||
colors: ['orange'],
|
||||
isNavigable: 1,
|
||||
isSeries: 1,
|
||||
valuesOverPoints: 1,
|
||||
yAxisMode: 'tick'
|
||||
// regionFill: 1
|
||||
});
|
||||
|
||||
let line_composite_chart = new Chart (c2, {
|
||||
data: line_composite_data,
|
||||
type: 'line',
|
||||
lineOptions: {
|
||||
dotSize: 10
|
||||
},
|
||||
height: 180,
|
||||
colors: ['green'],
|
||||
isSeries: 1,
|
||||
valuesOverPoints: 1,
|
||||
});
|
||||
|
||||
bar_composite_chart.parent.addEventListener('data-select', (e) => {
|
||||
line_composite_chart.updateDataset(more_line_data[e.index]);
|
||||
});
|
||||
|
||||
|
||||
// Demo Chart (bar, linepts, scatter(blobs), percentage)
|
||||
// ================================================================================
|
||||
let type_data = {
|
||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
||||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
||||
|
||||
yMarkers: [
|
||||
{
|
||||
label: "Marker 1",
|
||||
value: 42,
|
||||
type: 'dashed'
|
||||
},
|
||||
{
|
||||
label: "Marker 2",
|
||||
value: 25,
|
||||
type: 'dashed'
|
||||
}
|
||||
],
|
||||
|
||||
yRegions: [
|
||||
{
|
||||
label: "Region Y 1",
|
||||
start: -10,
|
||||
end: 50
|
||||
},
|
||||
],
|
||||
|
||||
// will depend on series code for calculating X values
|
||||
// xRegions: [
|
||||
// {
|
||||
// label: "Region X 2",
|
||||
// start: ,
|
||||
// end: ,
|
||||
// }
|
||||
// ],
|
||||
|
||||
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'
|
||||
}
|
||||
|
||||
// temp : Stacked
|
||||
// {
|
||||
// name: "Some Data",
|
||||
// values:[25, 30, 50, 45, 18, 12, 27, 14]
|
||||
// },
|
||||
// {
|
||||
// name: "Another Set",
|
||||
// values: [18, 20, 30, 35, 8, 7, 17, 4]
|
||||
// },
|
||||
// {
|
||||
// name: "Another Set",
|
||||
// values: [11, 8, 19, 15, 3, 4, 10, 2]
|
||||
// },
|
||||
]
|
||||
};
|
||||
|
||||
let type_chart = new Chart("#chart-types", {
|
||||
// title: "My Awesome Chart",
|
||||
data: type_data,
|
||||
type: 'bar',
|
||||
height: 250,
|
||||
colors: ['purple', 'magenta', 'light-blue'],
|
||||
isSeries: 1,
|
||||
xAxisMode: 'tick',
|
||||
yAxisMode: 'span',
|
||||
valuesOverPoints: 1,
|
||||
barOptions: {
|
||||
stacked: 1
|
||||
}
|
||||
// formatTooltipX: d => (d + '').toUpperCase(),
|
||||
// formatTooltipY: d => d + ' pts'
|
||||
});
|
||||
|
||||
Array.prototype.slice.call(
|
||||
document.querySelectorAll('.chart-type-buttons button')
|
||||
).map(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
let btn = e.target;
|
||||
let type = btn.getAttribute('data-type');
|
||||
|
||||
let newChart = type_chart.getDifferentChart(type);
|
||||
if(newChart){
|
||||
type_chart = newChart;
|
||||
}
|
||||
Array.prototype.slice.call(
|
||||
btn.parentNode.querySelectorAll('button')).map(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Trends Chart
|
||||
// ================================================================================
|
||||
let trends_data = {
|
||||
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]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let plot_chart_args = {
|
||||
title: "Mean Total Sunspot Count - Yearly",
|
||||
data: trends_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
colors: ['blue'],
|
||||
isSeries: 1,
|
||||
lineOptions: {
|
||||
hideDots: 1,
|
||||
heatline: 1,
|
||||
},
|
||||
xAxisMode: 'tick',
|
||||
yAxisMode: 'span'
|
||||
};
|
||||
|
||||
new Chart("#chart-trends", plot_chart_args);
|
||||
|
||||
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 = [];
|
||||
|
||||
if(type === 'line') {
|
||||
config = [0, 0, 0];
|
||||
} else if(type === 'region') {
|
||||
config = [0, 0, 1];
|
||||
} else {
|
||||
config = [0, 1, 0];
|
||||
}
|
||||
|
||||
plot_chart_args.hideDots = config[0];
|
||||
plot_chart_args.heatline = config[1];
|
||||
plot_chart_args.regionFill = config[2];
|
||||
|
||||
plot_chart_args.init = false;
|
||||
|
||||
new Chart("#chart-trends", plot_chart_args);
|
||||
|
||||
Array.prototype.slice.call(
|
||||
btn.parentNode.querySelectorAll('button')).map(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Update values chart
|
||||
// ================================================================================
|
||||
let update_data_all_labels = ["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 update_data_all_values = Array.from({length: 30}, () => Math.floor(Math.random() * 75 - 15));
|
||||
|
||||
// We're gonna be shuffling this
|
||||
let update_data_all_indices = update_data_all_labels.map((d,i) => i);
|
||||
|
||||
let get_update_data = (source_array, length=10) => {
|
||||
let indices = update_data_all_indices.slice(0, length);
|
||||
return indices.map((index) => source_array[index]);
|
||||
};
|
||||
|
||||
let update_data = {
|
||||
labels: get_update_data(update_data_all_labels),
|
||||
datasets: [{
|
||||
"values": get_update_data(update_data_all_values)
|
||||
}],
|
||||
"specific_values": [
|
||||
{
|
||||
name: "Altitude",
|
||||
// name: "A very long text",
|
||||
line_type: "dashed",
|
||||
value: 38
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
let update_chart = new Chart("#chart-update", {
|
||||
data: update_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
colors: ['red'],
|
||||
isSeries: 1,
|
||||
lineOptions: {
|
||||
regionFill: 1
|
||||
},
|
||||
});
|
||||
|
||||
let chart_update_buttons = document.querySelector('.chart-update-buttons');
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
|
||||
shuffle(update_data_all_indices);
|
||||
let data = {
|
||||
labels: update_data_all_labels.slice(0, 10),
|
||||
datasets: [{values: get_update_data(update_data_all_values)}],
|
||||
}
|
||||
update_chart.update(data);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
|
||||
let index = update_chart.state.datasetLength; // last index to add
|
||||
if(index >= update_data_all_indices.length) return;
|
||||
update_chart.addDataPoint(
|
||||
update_data_all_labels[index], [update_data_all_values[index]]
|
||||
);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
|
||||
update_chart.removeDataPoint();
|
||||
});
|
||||
|
||||
|
||||
// Event chart
|
||||
// ================================================================================
|
||||
let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
|
||||
let masses = [14819000, 10759000, 8931900, 4800000];
|
||||
let distances = [1070.412, 1882.709, 421.700, 671.034];
|
||||
let diameters = [5262.4, 4820.6, 3637.4, 3121.6];
|
||||
|
||||
let jupiter_moons = {
|
||||
'Ganymede': {
|
||||
mass: '14819000 x 10^16 kg',
|
||||
'semi-major-axis': '1070412 km',
|
||||
'diameter': '5262.4 km'
|
||||
},
|
||||
'Callisto': {
|
||||
mass: '10759000 x 10^16 kg',
|
||||
'semi-major-axis': '1882709 km',
|
||||
'diameter': '4820.6 km'
|
||||
},
|
||||
'Io': {
|
||||
mass: '8931900 x 10^16 kg',
|
||||
'semi-major-axis': '421700 km',
|
||||
'diameter': '3637.4 km'
|
||||
},
|
||||
'Europa': {
|
||||
mass: '4800000 x 10^16 kg',
|
||||
'semi-major-axis': '671034 km',
|
||||
'diameter': '3121.6 km'
|
||||
},
|
||||
};
|
||||
|
||||
let events_data = {
|
||||
labels: ["Ganymede", "Callisto", "Io", "Europa"],
|
||||
datasets: [
|
||||
{
|
||||
"values": distances,
|
||||
"formatted": distances.map(d => d*1000 + " km")
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let events_chart = new Chart("#chart-events", {
|
||||
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
||||
data: events_data,
|
||||
type: 'bar',
|
||||
height: 250,
|
||||
colors: ['grey'],
|
||||
isNavigable: 1,
|
||||
});
|
||||
|
||||
let data_div = document.querySelector('.chart-events-data');
|
||||
|
||||
events_chart.parent.addEventListener('data-select', (e) => {
|
||||
let name = moon_names[e.index];
|
||||
data_div.querySelector('.moon-name').innerHTML = name;
|
||||
data_div.querySelector('.semi-major-axis').innerHTML = distances[e.index] * 1000;
|
||||
data_div.querySelector('.mass').innerHTML = masses[e.index];
|
||||
data_div.querySelector('.diameter').innerHTML = diameters[e.index];
|
||||
data_div.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
|
||||
});
|
||||
|
||||
// Aggregation chart
|
||||
// ================================================================================
|
||||
let aggr_data = {
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
datasets: [
|
||||
{
|
||||
"values": [25, 40, 30, 35, 8, 52, 17]
|
||||
},
|
||||
{
|
||||
"values": [25, 50, 10, 15, 18, 32, 27],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let aggr_chart = new Chart("#chart-aggr", {
|
||||
data: aggr_data,
|
||||
type: 'bar',
|
||||
height: 250,
|
||||
colors: ['light-green', 'blue'],
|
||||
valuesOverPoints: 1,
|
||||
barOptions: {
|
||||
// stacked: 1
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
|
||||
if(e.target.innerHTML === "Show Sums") {
|
||||
aggr_chart.show_sums();
|
||||
e.target.innerHTML = "Hide Sums";
|
||||
} else {
|
||||
aggr_chart.hide_sums();
|
||||
e.target.innerHTML = "Show Sums";
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
|
||||
if(e.target.innerHTML === "Show Averages") {
|
||||
aggr_chart.show_averages();
|
||||
e.target.innerHTML = "Hide Averages";
|
||||
} else {
|
||||
aggr_chart.hide_averages();
|
||||
e.target.innerHTML = "Show Averages";
|
||||
}
|
||||
});
|
||||
|
||||
// Heatmap
|
||||
// ================================================================================
|
||||
|
||||
let heatmap_data = {};
|
||||
let current_date = new Date();
|
||||
let timestamp = current_date.getTime()/1000;
|
||||
timestamp = Math.floor(timestamp - (timestamp % 86400)).toFixed(1); // convert to midnight
|
||||
for (var i = 0; i< 375; i++) {
|
||||
heatmap_data[parseInt(timestamp)] = Math.floor(Math.random() * 5);
|
||||
timestamp = Math.floor(timestamp - 86400).toFixed(1);
|
||||
}
|
||||
|
||||
new Chart("#chart-heatmap", {
|
||||
data: heatmap_data,
|
||||
type: 'heatmap',
|
||||
legend_scale: [0, 1, 2, 4, 5],
|
||||
height: 115,
|
||||
discrete_domains: 1
|
||||
});
|
||||
|
||||
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 discrete_domains = 0;
|
||||
|
||||
if(mode === 'discrete') {
|
||||
discrete_domains = 1;
|
||||
}
|
||||
|
||||
let colors = [];
|
||||
let colors_mode = document
|
||||
.querySelector('.heatmap-color-buttons .active')
|
||||
.getAttribute('data-color');
|
||||
if(colors_mode === 'halloween') {
|
||||
colors = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
||||
}
|
||||
|
||||
new Chart("#chart-heatmap", {
|
||||
data: heatmap_data,
|
||||
type: 'heatmap',
|
||||
legend_scale: [0, 1, 2, 4, 5],
|
||||
height: 115,
|
||||
discrete_domains: discrete_domains,
|
||||
legend_colors: colors
|
||||
});
|
||||
|
||||
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 = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
||||
}
|
||||
|
||||
let discrete_domains = 1;
|
||||
|
||||
let view_mode = document
|
||||
.querySelector('.heatmap-mode-buttons .active')
|
||||
.getAttribute('data-mode');
|
||||
if(view_mode === 'continuous') {
|
||||
discrete_domains = 0;
|
||||
}
|
||||
|
||||
new Chart("#chart-heatmap", {
|
||||
data: heatmap_data,
|
||||
type: 'heatmap',
|
||||
legend_scale: [0, 1, 2, 4, 5],
|
||||
height: 115,
|
||||
discrete_domains: discrete_domains,
|
||||
legend_colors: colors
|
||||
});
|
||||
|
||||
Array.prototype.slice.call(
|
||||
btn.parentNode.querySelectorAll('button')).map(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Helpers
|
||||
// ================================================================================
|
||||
function shuffle(array) {
|
||||
// https://stackoverflow.com/a/2450976/6495043
|
||||
// Awesomeness: https://bost.ocks.org/mike/shuffle/
|
||||
|
||||
var currentIndex = array.length, temporaryValue, randomIndex;
|
||||
|
||||
// While there remain elements to shuffle...
|
||||
while (0 !== currentIndex) {
|
||||
|
||||
// Pick a remaining element...
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
// And swap it with the current element.
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,6 @@
|
||||
<h1>Frappe Charts</h1>
|
||||
<p class="mt-2">GitHub-inspired simple and modern charts for the web</p>
|
||||
<p class="mt-2">with zero dependencies.</p>
|
||||
<!--<p class="mt-2">Because dumb charts are hard to come by.</p>-->
|
||||
</div>
|
||||
|
||||
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
|
||||
@ -182,7 +181,7 @@
|
||||
And a Month-wise Heatmap
|
||||
</h6>
|
||||
<div id="chart-heatmap" class="border"
|
||||
style="overflow: scroll; text-align: center; padding: 20px;"></div>
|
||||
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>
|
||||
@ -336,6 +335,6 @@
|
||||
</a>
|
||||
|
||||
<script src="assets/js/frappe-charts.min.js"></script>
|
||||
<script src="assets/js/index.js"></script>
|
||||
<script src="assets/js/index.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -56,6 +56,43 @@ export default [
|
||||
uglify()
|
||||
]
|
||||
},
|
||||
{
|
||||
input: 'docs/assets/js/index.js',
|
||||
sourcemap: true,
|
||||
output: [
|
||||
{
|
||||
file: 'docs/assets/js/index.min.js',
|
||||
format: 'iife',
|
||||
}
|
||||
],
|
||||
name: 'frappe',
|
||||
plugins: [
|
||||
postcss({
|
||||
preprocessor: (content, id) => new Promise((resolve, reject) => {
|
||||
const result = sass.renderSync({ file: id })
|
||||
resolve({ code: result.css.toString() })
|
||||
}),
|
||||
extensions: [ '.scss' ],
|
||||
plugins: [
|
||||
nested(),
|
||||
cssnext({ warnForDuplicates: false }),
|
||||
cssnano()
|
||||
]
|
||||
}),
|
||||
eslint({
|
||||
exclude: [
|
||||
'src/scss/**'
|
||||
]
|
||||
}),
|
||||
babel({
|
||||
exclude: 'node_modules/**'
|
||||
}),
|
||||
replace({
|
||||
exclude: 'node_modules/**',
|
||||
ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
|
||||
})
|
||||
]
|
||||
},
|
||||
{
|
||||
input: 'src/js/chart.js',
|
||||
output: [
|
||||
|
||||
@ -112,7 +112,7 @@ export default class BaseChart {
|
||||
bindTooltip() {}
|
||||
|
||||
draw(onlyWidthChange=false, init=false) {
|
||||
this.calcWidth();
|
||||
this.updateWidth();
|
||||
this.calc(onlyWidthChange);
|
||||
this.makeChartArea();
|
||||
this.setupComponents();
|
||||
@ -133,7 +133,7 @@ export default class BaseChart {
|
||||
this.setupNavigation(init);
|
||||
}
|
||||
|
||||
calcWidth() {
|
||||
updateWidth() {
|
||||
this.baseWidth = getElementContentWidth(this.parent);
|
||||
this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
|
||||
}
|
||||
@ -179,12 +179,8 @@ export default class BaseChart {
|
||||
|
||||
updateNav() {
|
||||
if(this.config.isNavigable) {
|
||||
// if(!this.overlayGuides){
|
||||
this.makeOverlay();
|
||||
this.bindUnits();
|
||||
// } else {
|
||||
// this.updateOverlay();
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import BaseChart from './BaseChart';
|
||||
import { makeSVGGroup, makeHeatSquare, makeText } from '../utils/draw';
|
||||
import { addDays, getDdMmYyyy, getWeeksBetween, getMonthName,
|
||||
import { addDays, getDdMmYyyy, getWeeksBetween, getMonthName, clone,
|
||||
NO_OF_MILLIS, NO_OF_YEAR_MONTHS, NO_OF_DAYS_IN_WEEK } from '../utils/date-utils';
|
||||
import { calcDistribution, getMaxCheckpoint } from '../utils/intervals';
|
||||
import { HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE,
|
||||
@ -42,13 +42,7 @@ export default class Heatmap extends BaseChart {
|
||||
this.no_of_cols = getWeeksBetween(this.firstWeekStart + '', this.lastWeekStart + '') + 1;
|
||||
}
|
||||
|
||||
setMargins() {
|
||||
super.setMargins();
|
||||
// this.leftMargin = HEATMAP_SQUARE_SIZE;
|
||||
// this.topMargin = HEATMAP_SQUARE_SIZE;
|
||||
}
|
||||
|
||||
calcWidth() {
|
||||
updateWidth() {
|
||||
this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
|
||||
|
||||
if(this.discreteDomains) {
|
||||
@ -68,8 +62,13 @@ export default class Heatmap extends BaseChart {
|
||||
}
|
||||
|
||||
calc() {
|
||||
let dataValues = Object.keys(this.dataPoints).map(key => this.dataPoints[key]);
|
||||
this.distribution = calcDistribution(dataValues, HEATMAP_DISTRIBUTION_SIZE);
|
||||
this.distribution = calcDistribution(
|
||||
Object.values(this.dataPoints), HEATMAP_DISTRIBUTION_SIZE);
|
||||
}
|
||||
|
||||
update(data=this.data) {
|
||||
this.data = this.prepareData(data);
|
||||
this.draw();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -16,7 +16,7 @@ export const DATA_COLOR_DIVISIONS = {
|
||||
heatmap: HEATMAP_DISTRIBUTION_SIZE
|
||||
};
|
||||
|
||||
export const BASE_CHART_TOP_MARGIN = 30;
|
||||
export const BASE_CHART_TOP_MARGIN = 10;
|
||||
export const BASE_CHART_LEFT_MARGIN = 20;
|
||||
export const BASE_CHART_RIGHT_MARGIN = 20;
|
||||
|
||||
|
||||
@ -7,6 +7,8 @@ export const NO_OF_MILLIS = 1000;
|
||||
export const MONTH_NAMES = ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"];
|
||||
|
||||
export const MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
|
||||
// https://stackoverflow.com/a/11252167/6495043
|
||||
function treatAsUtc(dateStr) {
|
||||
let result = new Date(dateStr);
|
||||
@ -24,6 +26,10 @@ export function getDdMmYyyy(date) {
|
||||
].join('-');
|
||||
}
|
||||
|
||||
export function clone(date) {
|
||||
return new Date(date.getTime());
|
||||
}
|
||||
|
||||
export function getWeeksBetween(startDateStr, endDateStr) {
|
||||
return Math.ceil(getDaysBetween(startDateStr, endDateStr) / 7);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user