376 lines
9.5 KiB
JavaScript
376 lines
9.5 KiB
JavaScript
import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
|
|
import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
|
|
import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
|
|
/* eslint-disable no-unused-vars */
|
|
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
|
|
barCompositeData, typeData, trendsData, moonData } from './data';
|
|
/* eslint-enable no-unused-vars */
|
|
import demoConfig from './demoConfig';
|
|
// import { lineComposite, barComposite } from './demoConfig';
|
|
// ================================================================================
|
|
|
|
let Chart = frappe.Chart; // eslint-disable-line no-undef
|
|
|
|
let lc = demoConfig.lineComposite;
|
|
let lineCompositeChart = new Chart (lc.elementID, lc.options);
|
|
|
|
let bc = demoConfig.barComposite;
|
|
let barCompositeChart = new Chart (bc.elementID, bc.options);
|
|
|
|
lineCompositeChart.parent.addEventListener('data-select', (e) => {
|
|
let i = e.index;
|
|
barCompositeChart.updateDatasets([
|
|
fireballOver25[i], fireball_5_25[i], fireball_2_5[i]
|
|
]);
|
|
});
|
|
|
|
// ================================================================================
|
|
|
|
let customColors = ['purple', 'magenta', 'light-blue'];
|
|
let typeChartArgs = {
|
|
title: "My Awesome Chart",
|
|
data: typeData,
|
|
type: 'axis-mixed',
|
|
height: 300,
|
|
colors: customColors,
|
|
|
|
// maxLegendPoints: 6,
|
|
maxSlices: 10,
|
|
|
|
tooltipOptions: {
|
|
formatTooltipX: d => (d + '').toUpperCase(),
|
|
formatTooltipY: d => d + ' pts',
|
|
}
|
|
};
|
|
|
|
let aggrChart = new Chart("#chart-aggr", typeChartArgs);
|
|
|
|
Array.prototype.slice.call(
|
|
document.querySelectorAll('.aggr-type-buttons button')
|
|
).map(el => {
|
|
el.addEventListener('click', (e) => {
|
|
let btn = e.target;
|
|
let type = btn.getAttribute('data-type');
|
|
typeChartArgs.type = type;
|
|
if(type !== 'axis-mixed') {
|
|
typeChartArgs.colors = undefined;
|
|
} else {
|
|
typeChartArgs.colors = customColors;
|
|
}
|
|
|
|
if(type !== 'percentage') {
|
|
typeChartArgs.height = 300;
|
|
} else {
|
|
typeChartArgs.height = undefined;
|
|
}
|
|
|
|
let newChart = new Chart("#chart-aggr", typeChartArgs);
|
|
if(newChart){
|
|
aggrChart = newChart;
|
|
}
|
|
Array.prototype.slice.call(
|
|
btn.parentNode.querySelectorAll('button')).map(el => {
|
|
el.classList.remove('active');
|
|
});
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
document.querySelector('.export-aggr').addEventListener('click', () => {
|
|
aggrChart.export();
|
|
});
|
|
|
|
// Update values chart
|
|
// ================================================================================
|
|
let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
|
|
"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
|
|
"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
|
|
|
|
let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
|
|
let updateDataAllValues = Array.from({length: 30}, getRandom);
|
|
|
|
// We're gonna be shuffling this
|
|
let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
|
|
|
|
let getUpdateData = (source_array, length=10) => {
|
|
let indices = updateDataAllIndices.slice(0, length);
|
|
return indices.map((index) => source_array[index]);
|
|
};
|
|
|
|
let updateData = {
|
|
labels: getUpdateData(updateDataAllLabels),
|
|
datasets: [{
|
|
"values": getUpdateData(updateDataAllValues)
|
|
}],
|
|
yMarkers: [
|
|
{
|
|
label: "Altitude",
|
|
value: 25,
|
|
type: 'dashed'
|
|
}
|
|
],
|
|
yRegions: [
|
|
{
|
|
label: "Range",
|
|
start: 10,
|
|
end: 45
|
|
},
|
|
],
|
|
};
|
|
|
|
let updateChart = new Chart("#chart-update", {
|
|
data: updateData,
|
|
type: 'line',
|
|
height: 300,
|
|
colors: ['#ff6c03'],
|
|
lineOptions: {
|
|
// hideLine: 1,
|
|
regionFill: 1
|
|
},
|
|
});
|
|
|
|
let chartUpdateButtons = document.querySelector('.chart-update-buttons');
|
|
|
|
chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", () => {
|
|
shuffle(updateDataAllIndices);
|
|
let value = getRandom();
|
|
let start = getRandom();
|
|
let end = getRandom();
|
|
let data = {
|
|
labels: updateDataAllLabels.slice(0, 10),
|
|
datasets: [{values: getUpdateData(updateDataAllValues)}],
|
|
yMarkers: [
|
|
{
|
|
label: "Altitude",
|
|
value: value,
|
|
type: 'dashed'
|
|
}
|
|
],
|
|
yRegions: [
|
|
{
|
|
label: "Range",
|
|
start: start,
|
|
end: end
|
|
},
|
|
],
|
|
};
|
|
updateChart.update(data);
|
|
});
|
|
|
|
chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", () => {
|
|
let index = updateChart.state.datasetLength; // last index to add
|
|
if(index >= updateDataAllIndices.length) return;
|
|
updateChart.addDataPoint(
|
|
updateDataAllLabels[index], [updateDataAllValues[index]]
|
|
);
|
|
});
|
|
|
|
chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", () => {
|
|
updateChart.removeDataPoint();
|
|
});
|
|
|
|
document.querySelector('.export-update').addEventListener('click', () => {
|
|
updateChart.export();
|
|
});
|
|
|
|
// Trends Chart
|
|
// ================================================================================
|
|
|
|
let plotChartArgs = {
|
|
title: "Mean Total Sunspot Count - Yearly",
|
|
data: trendsData,
|
|
type: 'line',
|
|
height: 300,
|
|
colors: ['#238e38'],
|
|
lineOptions: {
|
|
hideDots: 1,
|
|
heatline: 1,
|
|
},
|
|
axisOptions: {
|
|
xAxisMode: 'tick',
|
|
yAxisMode: 'span',
|
|
xIsSeries: 1
|
|
}
|
|
};
|
|
|
|
let trendsChart = new Chart("#chart-trends", plotChartArgs);
|
|
|
|
Array.prototype.slice.call(
|
|
document.querySelectorAll('.chart-plot-buttons button')
|
|
).map(el => {
|
|
el.addEventListener('click', (e) => {
|
|
let btn = e.target;
|
|
let type = btn.getAttribute('data-type');
|
|
let config = {};
|
|
config[type] = 1;
|
|
|
|
if(['regionFill', 'heatline'].includes(type)) {
|
|
config.hideDots = 1;
|
|
}
|
|
|
|
// plotChartArgs.init = false;
|
|
plotChartArgs.lineOptions = config;
|
|
|
|
new Chart("#chart-trends", plotChartArgs);
|
|
|
|
Array.prototype.slice.call(
|
|
btn.parentNode.querySelectorAll('button')).map(el => {
|
|
el.classList.remove('active');
|
|
});
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
document.querySelector('.export-trends').addEventListener('click', () => {
|
|
trendsChart.export();
|
|
});
|
|
|
|
|
|
// Event chart
|
|
// ================================================================================
|
|
|
|
|
|
|
|
let eventsData = {
|
|
labels: ["Ganymede", "Callisto", "Io", "Europa"],
|
|
datasets: [
|
|
{
|
|
"values": moonData.distances,
|
|
"formatted": moonData.distances.map(d => d*1000 + " km")
|
|
}
|
|
]
|
|
};
|
|
|
|
let eventsChart = new Chart("#chart-events", {
|
|
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
|
data: eventsData,
|
|
type: 'bar',
|
|
height: 330,
|
|
colors: ['grey'],
|
|
isNavigable: 1,
|
|
});
|
|
|
|
let dataDiv = document.querySelector('.chart-events-data');
|
|
|
|
eventsChart.parent.addEventListener('data-select', (e) => {
|
|
let name = moonData.names[e.index];
|
|
dataDiv.querySelector('.moon-name').innerHTML = name;
|
|
dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
|
|
dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
|
|
dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
|
|
dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
|
|
});
|
|
|
|
// Heatmap
|
|
// ================================================================================
|
|
|
|
let today = new Date();
|
|
let start = clone(today);
|
|
addDays(start, 4);
|
|
let end = clone(start);
|
|
start.setFullYear( start.getFullYear() - 2 );
|
|
end.setFullYear( end.getFullYear() - 1 );
|
|
|
|
let dataPoints = {};
|
|
|
|
let startTs = timestampSec(start);
|
|
let endTs = timestampSec(end);
|
|
|
|
startTs = timestampToMidnight(startTs);
|
|
endTs = timestampToMidnight(endTs, true);
|
|
|
|
while (startTs < endTs) {
|
|
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
|
|
startTs += SEC_IN_DAY;
|
|
}
|
|
|
|
const heatmapData = {
|
|
dataPoints: dataPoints,
|
|
start: start,
|
|
end: end
|
|
};
|
|
|
|
let heatmapArgs = {
|
|
title: "Monthly Distribution",
|
|
data: heatmapData,
|
|
type: 'heatmap',
|
|
discreteDomains: 1,
|
|
countLabel: 'Level',
|
|
colors: HEATMAP_COLORS_BLUE,
|
|
legendScale: [0, 1, 2, 4, 5]
|
|
};
|
|
let heatmapChart = new Chart("#chart-heatmap", heatmapArgs);
|
|
|
|
Array.prototype.slice.call(
|
|
document.querySelectorAll('.heatmap-mode-buttons button')
|
|
).map(el => {
|
|
el.addEventListener('click', (e) => {
|
|
let btn = e.target;
|
|
let mode = btn.getAttribute('data-mode');
|
|
let discreteDomains = 0;
|
|
|
|
if(mode === 'discrete') {
|
|
discreteDomains = 1;
|
|
}
|
|
|
|
let colors = [];
|
|
let colors_mode = document
|
|
.querySelector('.heatmap-color-buttons .active')
|
|
.getAttribute('data-color');
|
|
if(colors_mode === 'halloween') {
|
|
colors = HEATMAP_COLORS_YELLOW;
|
|
} else if (colors_mode === 'blue') {
|
|
colors = HEATMAP_COLORS_BLUE;
|
|
}
|
|
|
|
heatmapArgs.discreteDomains = discreteDomains;
|
|
heatmapArgs.colors = colors;
|
|
new Chart("#chart-heatmap", heatmapArgs);
|
|
|
|
Array.prototype.slice.call(
|
|
btn.parentNode.querySelectorAll('button')).map(el => {
|
|
el.classList.remove('active');
|
|
});
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
Array.prototype.slice.call(
|
|
document.querySelectorAll('.heatmap-color-buttons button')
|
|
).map(el => {
|
|
el.addEventListener('click', (e) => {
|
|
let btn = e.target;
|
|
let colors_mode = btn.getAttribute('data-color');
|
|
let colors = [];
|
|
|
|
if(colors_mode === 'halloween') {
|
|
colors = HEATMAP_COLORS_YELLOW;
|
|
} else if (colors_mode === 'blue') {
|
|
colors = HEATMAP_COLORS_BLUE;
|
|
}
|
|
|
|
let discreteDomains = 1;
|
|
|
|
let view_mode = document
|
|
.querySelector('.heatmap-mode-buttons .active')
|
|
.getAttribute('data-mode');
|
|
if(view_mode === 'continuous') {
|
|
discreteDomains = 0;
|
|
}
|
|
|
|
heatmapArgs.discreteDomains = discreteDomains;
|
|
heatmapArgs.colors = colors;
|
|
new Chart("#chart-heatmap", heatmapArgs);
|
|
|
|
Array.prototype.slice.call(
|
|
btn.parentNode.querySelectorAll('button')).map(el => {
|
|
el.classList.remove('active');
|
|
});
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
document.querySelector('.export-heatmap').addEventListener('click', () => {
|
|
heatmapChart.export();
|
|
});
|