@@ -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, | |||
@@ -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 | |||
}; |
@@ -1,92 +1,15 @@ | |||
// Composite Chart | |||
// ================================================================================ | |||
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 | |||
}] | |||
}; | |||
import { shuffle } from '../../../src/js/utils/helpers'; | |||
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData, | |||
barCompositeData, typeData, trendsData, moonData, heatmapData } from './data'; | |||
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; | |||
} | |||
@@ -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,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); | |||
} | |||