linechart spline option
This commit is contained in:
Niclas Ostberg
parent
317136eec4
commit
b8b58149a8
3957
dist/frappe-charts.esm.js
vendored
3957
dist/frappe-charts.esm.js
vendored
File diff suppressed because it is too large
Load Diff
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
1
dist/frappe-charts.min.cjs.js.map
vendored
1
dist/frappe-charts.min.cjs.js.map
vendored
File diff suppressed because one or more lines are too long
1
dist/frappe-charts.min.css
vendored
1
dist/frappe-charts.min.css
vendored
@ -1 +0,0 @@
|
||||
.chart-container{position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ol,.graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}
|
||||
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
1
dist/frappe-charts.min.esm.js.map
vendored
1
dist/frappe-charts.min.esm.js.map
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
1
dist/frappe-charts.min.iife.js.map
vendored
1
dist/frappe-charts.min.iife.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,179 +0,0 @@
|
||||
import { MONTH_NAMES_SHORT } from '../../../src/js/utils/date-utils';
|
||||
|
||||
// Composite Chart
|
||||
// ================================================================================
|
||||
const reportCountList = [152, 222, 199, 287, 534, 709,
|
||||
1179, 1256, 1632, 1856, 1850];
|
||||
|
||||
export const lineCompositeData = {
|
||||
labels: ["2007", "2008", "2009", "2010", "2011", "2012",
|
||||
"2013", "2014", "2015", "2016", "2017"],
|
||||
|
||||
yMarkers: [
|
||||
{
|
||||
label: "Average 100 reports/month",
|
||||
value: 1200,
|
||||
options: { labelPos: 'left' }
|
||||
}
|
||||
],
|
||||
|
||||
datasets: [{
|
||||
"name": "Events",
|
||||
"values": reportCountList
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
export const fireball_5_25 = [
|
||||
[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1],
|
||||
[2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4],
|
||||
[5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1],
|
||||
[0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8],
|
||||
[6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11],
|
||||
[7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20],
|
||||
[13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29],
|
||||
[24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18],
|
||||
[31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24],
|
||||
[32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32],
|
||||
[31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50],
|
||||
];
|
||||
export const fireball_2_5 = [
|
||||
[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20],
|
||||
[11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24],
|
||||
[20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9],
|
||||
[7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33],
|
||||
[38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53],
|
||||
[50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69],
|
||||
[54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87],
|
||||
[84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93],
|
||||
[73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89],
|
||||
[106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156],
|
||||
[81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171],
|
||||
];
|
||||
export const fireballOver25 = [
|
||||
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
|
||||
[1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2],
|
||||
[3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1],
|
||||
[2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4],
|
||||
[7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9],
|
||||
[5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9],
|
||||
[5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2],
|
||||
[5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3],
|
||||
[8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]
|
||||
];
|
||||
|
||||
export const barCompositeData = {
|
||||
labels: MONTH_NAMES_SHORT,
|
||||
datasets: [
|
||||
{
|
||||
name: "Over 25 reports",
|
||||
values: fireballOver25[9],
|
||||
},
|
||||
{
|
||||
name: "5 to 25 reports",
|
||||
values: fireball_5_25[9],
|
||||
},
|
||||
{
|
||||
name: "2 to 5 reports",
|
||||
values: fireball_2_5[9]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Demo Chart multitype Chart
|
||||
// ================================================================================
|
||||
export const typeData = {
|
||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
||||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
||||
|
||||
yMarkers: [
|
||||
{
|
||||
label: "Marker",
|
||||
value: 43,
|
||||
options: { labelPos: 'left' }
|
||||
// type: 'dashed'
|
||||
}
|
||||
],
|
||||
|
||||
yRegions: [
|
||||
{
|
||||
label: "Region",
|
||||
start: -10,
|
||||
end: 50,
|
||||
options: { labelPos: 'right' }
|
||||
},
|
||||
],
|
||||
|
||||
datasets: [
|
||||
{
|
||||
name: "Some Data",
|
||||
values: [18, 40, 30, 35, 8, 52, 17, -4],
|
||||
axisPosition: 'right',
|
||||
chartType: 'bar'
|
||||
},
|
||||
{
|
||||
name: "Another Set",
|
||||
values: [30, 50, -10, 15, 18, 32, 27, 14],
|
||||
axisPosition: 'right',
|
||||
chartType: 'bar'
|
||||
},
|
||||
{
|
||||
name: "Yet Another",
|
||||
values: [15, 20, -3, -15, 58, 12, -17, 37],
|
||||
chartType: 'line'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export const trendsData = {
|
||||
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
|
||||
1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
|
||||
1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996,
|
||||
1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
|
||||
2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016] ,
|
||||
datasets: [
|
||||
{
|
||||
values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
|
||||
39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8,
|
||||
33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6,
|
||||
28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7,
|
||||
12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export const moonData = {
|
||||
names: ["Ganymede", "Callisto", "Io", "Europa"],
|
||||
masses: [14819000, 10759000, 8931900, 4800000],
|
||||
distances: [1070.412, 1882.709, 421.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'
|
||||
// },
|
||||
// };
|
||||
|
||||
// ================================================================================
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import { lineCompositeData, barCompositeData } from './data';
|
||||
|
||||
export default {
|
||||
lineComposite: {
|
||||
elementID: "#chart-composite-1",
|
||||
options: {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: "line",
|
||||
height: 190,
|
||||
colors: ["green"],
|
||||
isNavigable: 1,
|
||||
valuesOverPoints: 1,
|
||||
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
barComposite: {
|
||||
elementID: "#chart-composite-2",
|
||||
options: {
|
||||
data: barCompositeData,
|
||||
type: "bar",
|
||||
height: 210,
|
||||
colors: ["violet", "light-blue", "#46a9f9"],
|
||||
valuesOverPoints: 1,
|
||||
axisOptions: {
|
||||
xAxisMode: "tick",
|
||||
shortenYAxisNumbers: true
|
||||
},
|
||||
barOptions: {
|
||||
stacked: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
demoMain: {
|
||||
elementID: "",
|
||||
options: {
|
||||
title: "My Awesome Chart",
|
||||
data: "typeData",
|
||||
type: "axis-mixed",
|
||||
height: 300,
|
||||
colors: ["purple", "magenta", "light-blue"],
|
||||
maxSlices: 10,
|
||||
|
||||
tooltipOptions: {
|
||||
formatTooltipX: d => (d + '').toUpperCase(),
|
||||
formatTooltipY: d => d + ' pts',
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
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
File diff suppressed because one or more lines are too long
@ -1,373 +0,0 @@
|
||||
import { shuffle, getRandomBias } from '../../../src/js/utils/helpers';
|
||||
import { HEATMAP_COLORS_YELLOW, HEATMAP_COLORS_BLUE } from '../../../src/js/utils/constants';
|
||||
import { SEC_IN_DAY, clone, timestampToMidnight, timestampSec, addDays } from '../../../src/js/utils/date-utils';
|
||||
import { fireballOver25, fireball_2_5, fireball_5_25, lineCompositeData,
|
||||
barCompositeData, typeData, trendsData, moonData } from './data';
|
||||
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();
|
||||
});
|
||||
657
docs/assets/js/index.min.js
vendored
657
docs/assets/js/index.min.js
vendored
@ -1,657 +0,0 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// Fixed 5-color theme,
|
||||
// More colors are difficult to parse visually
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
|
||||
var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
||||
|
||||
|
||||
|
||||
// Universal constants
|
||||
|
||||
/**
|
||||
* Returns the value of a number upto 2 decimal places.
|
||||
* @param {Number} d Any number
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Returns whether or not two given arrays are equal.
|
||||
* @param {Array} arr1 First array
|
||||
* @param {Array} arr2 Second array
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Shuffles array in place. ES6 version
|
||||
* @param {Array} array An array containing the items.
|
||||
*/
|
||||
function shuffle(array) {
|
||||
// Awesomeness: https://bost.ocks.org/mike/shuffle/
|
||||
// https://stackoverflow.com/a/2450976/6495043
|
||||
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
|
||||
|
||||
for (var i = array.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var _ref = [array[j], array[i]];
|
||||
array[i] = _ref[0];
|
||||
array[j] = _ref[1];
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fill an array with extra points
|
||||
* @param {Array} array Array
|
||||
* @param {Number} count number of filler elements
|
||||
* @param {Object} element element to fill with
|
||||
* @param {Boolean} start fill at start?
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Returns pixel width of string.
|
||||
* @param {String} string
|
||||
* @param {Number} charWidth Width of single char in pixels
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
// https://stackoverflow.com/a/29325222
|
||||
function getRandomBias(min, max, bias, influence) {
|
||||
var range = max - min;
|
||||
var biasValue = range * bias + min;
|
||||
var rnd = Math.random() * range + min,
|
||||
// random in range
|
||||
mix = Math.random() * influence; // random mixer
|
||||
return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
|
||||
}
|
||||
|
||||
// Playing around with dates
|
||||
|
||||
|
||||
|
||||
|
||||
var NO_OF_MILLIS = 1000;
|
||||
var SEC_IN_DAY = 86400;
|
||||
|
||||
|
||||
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function clone(date) {
|
||||
return new Date(date.getTime());
|
||||
}
|
||||
|
||||
function timestampSec(date) {
|
||||
return date.getTime() / NO_OF_MILLIS;
|
||||
}
|
||||
|
||||
function timestampToMidnight(timestamp) {
|
||||
var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
||||
|
||||
var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
|
||||
if (roundAhead) {
|
||||
return midnightTs + SEC_IN_DAY;
|
||||
}
|
||||
return midnightTs;
|
||||
}
|
||||
|
||||
// export function getMonthsBetween(startDate, endDate) {}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// mutates
|
||||
|
||||
|
||||
// mutates
|
||||
function addDays(date, numberOfDays) {
|
||||
date.setDate(date.getDate() + numberOfDays);
|
||||
}
|
||||
|
||||
// Composite Chart
|
||||
// ================================================================================
|
||||
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
|
||||
|
||||
var lineCompositeData = {
|
||||
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
|
||||
|
||||
yMarkers: [{
|
||||
label: "Average 100 reports/month",
|
||||
value: 1200,
|
||||
options: { labelPos: 'left' }
|
||||
}],
|
||||
|
||||
datasets: [{
|
||||
"name": "Events",
|
||||
"values": reportCountList
|
||||
}]
|
||||
};
|
||||
|
||||
var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
|
||||
var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
|
||||
var fireballOver25 = [
|
||||
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];
|
||||
|
||||
var barCompositeData = {
|
||||
labels: MONTH_NAMES_SHORT,
|
||||
datasets: [{
|
||||
name: "Over 25 reports",
|
||||
values: fireballOver25[9]
|
||||
}, {
|
||||
name: "5 to 25 reports",
|
||||
values: fireball_5_25[9]
|
||||
}, {
|
||||
name: "2 to 5 reports",
|
||||
values: fireball_2_5[9]
|
||||
}]
|
||||
};
|
||||
|
||||
// Demo Chart multitype Chart
|
||||
// ================================================================================
|
||||
var typeData = {
|
||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
||||
|
||||
yMarkers: [{
|
||||
label: "Marker",
|
||||
value: 43,
|
||||
options: { labelPos: 'left'
|
||||
// type: 'dashed'
|
||||
} }],
|
||||
|
||||
yRegions: [{
|
||||
label: "Region",
|
||||
start: -10,
|
||||
end: 50,
|
||||
options: { labelPos: 'right' }
|
||||
}],
|
||||
|
||||
datasets: [{
|
||||
name: "Some Data",
|
||||
values: [18, 40, 30, 35, 8, 52, 17, -4],
|
||||
axisPosition: 'right',
|
||||
chartType: 'bar'
|
||||
}, {
|
||||
name: "Another Set",
|
||||
values: [30, 50, -10, 15, 18, 32, 27, 14],
|
||||
axisPosition: 'right',
|
||||
chartType: 'bar'
|
||||
}, {
|
||||
name: "Yet Another",
|
||||
values: [15, 20, -3, -15, 58, 12, -17, 37],
|
||||
chartType: 'line'
|
||||
}]
|
||||
};
|
||||
|
||||
var trendsData = {
|
||||
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
||||
datasets: [{
|
||||
values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
|
||||
}]
|
||||
};
|
||||
|
||||
var moonData = {
|
||||
names: ["Ganymede", "Callisto", "Io", "Europa"],
|
||||
masses: [14819000, 10759000, 8931900, 4800000],
|
||||
distances: [1070.412, 1882.709, 421.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 demoConfig = {
|
||||
lineComposite: {
|
||||
elementID: "#chart-composite-1",
|
||||
options: {
|
||||
title: "Fireball/Bolide Events - Yearly (reported)",
|
||||
data: lineCompositeData,
|
||||
type: "line",
|
||||
height: 190,
|
||||
colors: ["green"],
|
||||
isNavigable: 1,
|
||||
valuesOverPoints: 1,
|
||||
|
||||
lineOptions: {
|
||||
dotSize: 8
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
barComposite: {
|
||||
elementID: "#chart-composite-2",
|
||||
options: {
|
||||
data: barCompositeData,
|
||||
type: "bar",
|
||||
height: 210,
|
||||
colors: ["violet", "light-blue", "#46a9f9"],
|
||||
valuesOverPoints: 1,
|
||||
axisOptions: {
|
||||
xAxisMode: "tick",
|
||||
shortenYAxisNumbers: true
|
||||
},
|
||||
barOptions: {
|
||||
stacked: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
demoMain: {
|
||||
elementID: "",
|
||||
options: {
|
||||
title: "My Awesome Chart",
|
||||
data: "typeData",
|
||||
type: "axis-mixed",
|
||||
height: 300,
|
||||
colors: ["purple", "magenta", "light-blue"],
|
||||
maxSlices: 10,
|
||||
|
||||
tooltipOptions: {
|
||||
formatTooltipX: function formatTooltipX(d) {
|
||||
return (d + '').toUpperCase();
|
||||
},
|
||||
formatTooltipY: function formatTooltipY(d) {
|
||||
return d + ' pts';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// import { lineComposite, barComposite } from './demoConfig';
|
||||
// ================================================================================
|
||||
|
||||
var Chart = frappe.Chart; // eslint-disable-line no-undef
|
||||
|
||||
var lc = demoConfig.lineComposite;
|
||||
var lineCompositeChart = new Chart(lc.elementID, lc.options);
|
||||
|
||||
var bc = demoConfig.barComposite;
|
||||
var barCompositeChart = new Chart(bc.elementID, bc.options);
|
||||
|
||||
lineCompositeChart.parent.addEventListener('data-select', function (e) {
|
||||
var i = e.index;
|
||||
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
|
||||
});
|
||||
|
||||
// ================================================================================
|
||||
|
||||
var customColors = ['purple', 'magenta', 'light-blue'];
|
||||
var typeChartArgs = {
|
||||
title: "My Awesome Chart",
|
||||
data: typeData,
|
||||
type: 'axis-mixed',
|
||||
height: 300,
|
||||
colors: customColors,
|
||||
|
||||
// maxLegendPoints: 6,
|
||||
maxSlices: 10,
|
||||
|
||||
tooltipOptions: {
|
||||
formatTooltipX: function formatTooltipX(d) {
|
||||
return (d + '').toUpperCase();
|
||||
},
|
||||
formatTooltipY: function formatTooltipY(d) {
|
||||
return d + ' pts';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var aggrChart = new Chart("#chart-aggr", typeChartArgs);
|
||||
|
||||
Array.prototype.slice.call(document.querySelectorAll('.aggr-type-buttons button')).map(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
var btn = e.target;
|
||||
var type = btn.getAttribute('data-type');
|
||||
typeChartArgs.type = type;
|
||||
if (type !== 'axis-mixed') {
|
||||
typeChartArgs.colors = undefined;
|
||||
} else {
|
||||
typeChartArgs.colors = customColors;
|
||||
}
|
||||
|
||||
if (type !== 'percentage') {
|
||||
typeChartArgs.height = 300;
|
||||
} else {
|
||||
typeChartArgs.height = undefined;
|
||||
}
|
||||
|
||||
var newChart = new Chart("#chart-aggr", typeChartArgs);
|
||||
if (newChart) {
|
||||
aggrChart = newChart;
|
||||
}
|
||||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector('.export-aggr').addEventListener('click', function () {
|
||||
aggrChart.export();
|
||||
});
|
||||
|
||||
// Update values chart
|
||||
// ================================================================================
|
||||
var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
|
||||
|
||||
var getRandom = function getRandom() {
|
||||
return Math.floor(getRandomBias(-40, 60, 0.8, 1));
|
||||
};
|
||||
var updateDataAllValues = Array.from({ length: 30 }, getRandom);
|
||||
|
||||
// We're gonna be shuffling this
|
||||
var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
|
||||
return i;
|
||||
});
|
||||
|
||||
var getUpdateData = function getUpdateData(source_array) {
|
||||
var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
|
||||
|
||||
var indices = updateDataAllIndices.slice(0, length);
|
||||
return indices.map(function (index) {
|
||||
return source_array[index];
|
||||
});
|
||||
};
|
||||
|
||||
var updateData = {
|
||||
labels: getUpdateData(updateDataAllLabels),
|
||||
datasets: [{
|
||||
"values": getUpdateData(updateDataAllValues)
|
||||
}],
|
||||
yMarkers: [{
|
||||
label: "Altitude",
|
||||
value: 25,
|
||||
type: 'dashed'
|
||||
}],
|
||||
yRegions: [{
|
||||
label: "Range",
|
||||
start: 10,
|
||||
end: 45
|
||||
}]
|
||||
};
|
||||
|
||||
var updateChart = new Chart("#chart-update", {
|
||||
data: updateData,
|
||||
type: 'line',
|
||||
height: 300,
|
||||
colors: ['#ff6c03'],
|
||||
lineOptions: {
|
||||
// hideLine: 1,
|
||||
regionFill: 1
|
||||
}
|
||||
});
|
||||
|
||||
var chartUpdateButtons = document.querySelector('.chart-update-buttons');
|
||||
|
||||
chartUpdateButtons.querySelector('[data-update="random"]').addEventListener("click", function () {
|
||||
shuffle(updateDataAllIndices);
|
||||
var value = getRandom();
|
||||
var start = getRandom();
|
||||
var end = getRandom();
|
||||
var data = {
|
||||
labels: updateDataAllLabels.slice(0, 10),
|
||||
datasets: [{ values: getUpdateData(updateDataAllValues) }],
|
||||
yMarkers: [{
|
||||
label: "Altitude",
|
||||
value: value,
|
||||
type: 'dashed'
|
||||
}],
|
||||
yRegions: [{
|
||||
label: "Range",
|
||||
start: start,
|
||||
end: end
|
||||
}]
|
||||
};
|
||||
updateChart.update(data);
|
||||
});
|
||||
|
||||
chartUpdateButtons.querySelector('[data-update="add"]').addEventListener("click", function () {
|
||||
var index = updateChart.state.datasetLength; // last index to add
|
||||
if (index >= updateDataAllIndices.length) return;
|
||||
updateChart.addDataPoint(updateDataAllLabels[index], [updateDataAllValues[index]]);
|
||||
});
|
||||
|
||||
chartUpdateButtons.querySelector('[data-update="remove"]').addEventListener("click", function () {
|
||||
updateChart.removeDataPoint();
|
||||
});
|
||||
|
||||
document.querySelector('.export-update').addEventListener('click', function () {
|
||||
updateChart.export();
|
||||
});
|
||||
|
||||
// Trends Chart
|
||||
// ================================================================================
|
||||
|
||||
var plotChartArgs = {
|
||||
title: "Mean Total Sunspot Count - Yearly",
|
||||
data: trendsData,
|
||||
type: 'line',
|
||||
height: 300,
|
||||
colors: ['#238e38'],
|
||||
lineOptions: {
|
||||
hideDots: 1,
|
||||
heatline: 1
|
||||
},
|
||||
axisOptions: {
|
||||
xAxisMode: 'tick',
|
||||
yAxisMode: 'span',
|
||||
xIsSeries: 1
|
||||
}
|
||||
};
|
||||
|
||||
var trendsChart = new Chart("#chart-trends", plotChartArgs);
|
||||
|
||||
Array.prototype.slice.call(document.querySelectorAll('.chart-plot-buttons button')).map(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
var btn = e.target;
|
||||
var type = btn.getAttribute('data-type');
|
||||
var config = {};
|
||||
config[type] = 1;
|
||||
|
||||
if (['regionFill', 'heatline'].includes(type)) {
|
||||
config.hideDots = 1;
|
||||
}
|
||||
|
||||
// plotChartArgs.init = false;
|
||||
plotChartArgs.lineOptions = config;
|
||||
|
||||
new Chart("#chart-trends", plotChartArgs);
|
||||
|
||||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector('.export-trends').addEventListener('click', function () {
|
||||
trendsChart.export();
|
||||
});
|
||||
|
||||
// Event chart
|
||||
// ================================================================================
|
||||
|
||||
|
||||
var eventsData = {
|
||||
labels: ["Ganymede", "Callisto", "Io", "Europa"],
|
||||
datasets: [{
|
||||
"values": moonData.distances,
|
||||
"formatted": moonData.distances.map(function (d) {
|
||||
return d * 1000 + " km";
|
||||
})
|
||||
}]
|
||||
};
|
||||
|
||||
var eventsChart = new Chart("#chart-events", {
|
||||
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
||||
data: eventsData,
|
||||
type: 'bar',
|
||||
height: 330,
|
||||
colors: ['grey'],
|
||||
isNavigable: 1
|
||||
});
|
||||
|
||||
var dataDiv = document.querySelector('.chart-events-data');
|
||||
|
||||
eventsChart.parent.addEventListener('data-select', function (e) {
|
||||
var name = moonData.names[e.index];
|
||||
dataDiv.querySelector('.moon-name').innerHTML = name;
|
||||
dataDiv.querySelector('.semi-major-axis').innerHTML = moonData.distances[e.index] * 1000;
|
||||
dataDiv.querySelector('.mass').innerHTML = moonData.masses[e.index];
|
||||
dataDiv.querySelector('.diameter').innerHTML = moonData.diameters[e.index];
|
||||
dataDiv.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
|
||||
});
|
||||
|
||||
// Heatmap
|
||||
// ================================================================================
|
||||
|
||||
var today = new Date();
|
||||
var start = clone(today);
|
||||
addDays(start, 4);
|
||||
var end = clone(start);
|
||||
start.setFullYear(start.getFullYear() - 2);
|
||||
end.setFullYear(end.getFullYear() - 1);
|
||||
|
||||
var dataPoints = {};
|
||||
|
||||
var startTs = timestampSec(start);
|
||||
var endTs = timestampSec(end);
|
||||
|
||||
startTs = timestampToMidnight(startTs);
|
||||
endTs = timestampToMidnight(endTs, true);
|
||||
|
||||
while (startTs < endTs) {
|
||||
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
|
||||
startTs += SEC_IN_DAY;
|
||||
}
|
||||
|
||||
var heatmapData = {
|
||||
dataPoints: dataPoints,
|
||||
start: start,
|
||||
end: end
|
||||
};
|
||||
|
||||
var heatmapArgs = {
|
||||
title: "Monthly Distribution",
|
||||
data: heatmapData,
|
||||
type: 'heatmap',
|
||||
discreteDomains: 1,
|
||||
countLabel: 'Level',
|
||||
colors: HEATMAP_COLORS_BLUE,
|
||||
legendScale: [0, 1, 2, 4, 5]
|
||||
};
|
||||
var heatmapChart = new Chart("#chart-heatmap", heatmapArgs);
|
||||
|
||||
Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
var btn = e.target;
|
||||
var mode = btn.getAttribute('data-mode');
|
||||
var discreteDomains = 0;
|
||||
|
||||
if (mode === 'discrete') {
|
||||
discreteDomains = 1;
|
||||
}
|
||||
|
||||
var colors = [];
|
||||
var colors_mode = document.querySelector('.heatmap-color-buttons .active').getAttribute('data-color');
|
||||
if (colors_mode === 'halloween') {
|
||||
colors = HEATMAP_COLORS_YELLOW;
|
||||
} else if (colors_mode === 'blue') {
|
||||
colors = HEATMAP_COLORS_BLUE;
|
||||
}
|
||||
|
||||
heatmapArgs.discreteDomains = discreteDomains;
|
||||
heatmapArgs.colors = colors;
|
||||
new Chart("#chart-heatmap", heatmapArgs);
|
||||
|
||||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
Array.prototype.slice.call(document.querySelectorAll('.heatmap-color-buttons button')).map(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
var btn = e.target;
|
||||
var colors_mode = btn.getAttribute('data-color');
|
||||
var colors = [];
|
||||
|
||||
if (colors_mode === 'halloween') {
|
||||
colors = HEATMAP_COLORS_YELLOW;
|
||||
} else if (colors_mode === 'blue') {
|
||||
colors = HEATMAP_COLORS_BLUE;
|
||||
}
|
||||
|
||||
var discreteDomains = 1;
|
||||
|
||||
var view_mode = document.querySelector('.heatmap-mode-buttons .active').getAttribute('data-mode');
|
||||
if (view_mode === 'continuous') {
|
||||
discreteDomains = 0;
|
||||
}
|
||||
|
||||
heatmapArgs.discreteDomains = discreteDomains;
|
||||
heatmapArgs.colors = colors;
|
||||
new Chart("#chart-heatmap", heatmapArgs);
|
||||
|
||||
Array.prototype.slice.call(btn.parentNode.querySelectorAll('button')).map(function (el) {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector('.export-heatmap').addEventListener('click', function () {
|
||||
heatmapChart.export();
|
||||
});
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=index.min.js.map
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user