@@ -1156,7 +1156,6 @@ class BaseChart { | |||
this.options = {}; | |||
if(this.config.isNavigable) { | |||
this.state.currentIndex = 0; | |||
this.overlays = []; | |||
} | |||
@@ -1313,8 +1312,12 @@ class BaseChart { | |||
updateNav() { | |||
if(this.config.isNavigable) { | |||
this.makeOverlay(); | |||
this.bindUnits(); | |||
// if(!this.overlayGuides){ | |||
this.makeOverlay(); | |||
this.bindUnits(); | |||
// } else { | |||
// this.updateOverlay(); | |||
// } | |||
} | |||
} | |||
@@ -1363,7 +1366,9 @@ class BaseChart { | |||
document.addEventListener('keydown', (e) => { | |||
if(isElementInViewport(this.chartWrapper)) { | |||
e = e || window.event; | |||
this.keyActions[e.keyCode](); | |||
if(this.keyActions[e.keyCode]) { | |||
this.keyActions[e.keyCode](); | |||
} | |||
} | |||
}); | |||
} | |||
@@ -2494,7 +2499,7 @@ let componentConfigs = { | |||
makeElements(data) { | |||
let c = this.constants; | |||
this.unitType = 'bar'; | |||
return data.yPositions.map((y, j) => { | |||
this.units = data.yPositions.map((y, j) => { | |||
return datasetBar( | |||
data.xPositions[j], | |||
y, | |||
@@ -2510,6 +2515,7 @@ let componentConfigs = { | |||
} | |||
) | |||
}); | |||
return this.units; | |||
}, | |||
animateElements(newData) { | |||
let c = this.constants; | |||
@@ -2573,10 +2579,10 @@ let componentConfigs = { | |||
} | |||
); | |||
this.dots = []; | |||
this.units = []; | |||
if(!c.hideDots) { | |||
this.dots = data.yPositions.map((y, j) => { | |||
this.units = data.yPositions.map((y, j) => { | |||
return datasetDot( | |||
data.xPositions[j], | |||
y, | |||
@@ -2588,8 +2594,7 @@ let componentConfigs = { | |||
}); | |||
} | |||
return Object.values(this.paths).concat(this.dots); | |||
// return this.dots; | |||
return Object.values(this.paths).concat(this.units); | |||
}, | |||
animateElements(newData) { | |||
let newXPos = newData.xPositions; | |||
@@ -2619,8 +2624,8 @@ let componentConfigs = { | |||
animateElements = animateElements.concat(animatePath( | |||
this.paths, newXPos, newYPos, newData.zeroLine)); | |||
if(this.dots.length) { | |||
this.dots.map((dot, i) => { | |||
if(this.units.length) { | |||
this.units.map((dot, i) => { | |||
animateElements = animateElements.concat(animateDot( | |||
dot, newXPos[i], newYPos[i])); | |||
}); | |||
@@ -3009,20 +3014,6 @@ class AxisChart extends BaseChart { | |||
} | |||
makeOverlay() { | |||
// Just make one out of the first element | |||
// let index = this.xAxisLabels.length - 1; | |||
// let unit = this.y[0].svg_units[index]; | |||
// this.setCurrentDataPoint(index); | |||
// if(this.overlay) { | |||
// this.overlay.parentNode.removeChild(this.overlay); | |||
// } | |||
// this.overlay = unit.cloneNode(); | |||
// this.overlay.style.fill = '#000000'; | |||
// this.overlay.style.opacity = '0.4'; | |||
// this.drawArea.appendChild(this.overlay); | |||
if(this.overlayGuides) { | |||
this.overlayGuides.forEach(g => { | |||
let o = g.overlay; | |||
@@ -3034,12 +3025,12 @@ class AxisChart extends BaseChart { | |||
return { | |||
type: c.unitType, | |||
overlay: undefined, | |||
units: c.store, | |||
units: c.units, | |||
} | |||
}); | |||
if(this.state.currentIndex === undefined) { | |||
this.state.currentIndex = 0; | |||
this.state.currentIndex = this.state.datasetLength - 1; | |||
} | |||
// Render overlays | |||
@@ -3051,10 +3042,19 @@ class AxisChart extends BaseChart { | |||
} | |||
updateOverlayGuides() { | |||
if(this.overlayGuides) { | |||
this.overlayGuides.forEach(g => { | |||
let o = g.overlay; | |||
o.parentNode.removeChild(o); | |||
}); | |||
} | |||
} | |||
bindOverlay() { | |||
// on event, update overlay | |||
this.parent.addEventListener('data-select', (e) => { | |||
this.updateOverlay(e.svg_unit); | |||
this.updateOverlay(); | |||
}); | |||
} | |||
@@ -1,7 +1,7 @@ | |||
// Composite Chart | |||
// ================================================================================ | |||
let report_count_list = [17, 40, 33, 44, 126, 156, | |||
324, 333, 478, 495, 176]; | |||
324, 333, 478, 495, 527]; | |||
let bar_composite_data = { | |||
labels: ["2007", "2008", "2009", "2010", "2011", "2012", | |||
@@ -36,7 +36,7 @@ let bar_composite_data = { | |||
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": [37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35], | |||
// "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], | |||
}] | |||
@@ -54,7 +54,7 @@ let more_line_data = [ | |||
[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, 58, 82, 62], | |||
// [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 40, 40] | |||
// [-36, -46, -45, -32, -27, -31, -30, -36, -39, -49, -40, -40] | |||
]; | |||
@@ -65,26 +65,29 @@ 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', | |||
type: 'line', | |||
height: 180, | |||
colors: ['orange'], | |||
colors: ['green'], | |||
isNavigable: 1, | |||
isSeries: 1, | |||
valuesOverPoints: 1, | |||
yAxisMode: 'tick' | |||
// valuesOverPoints: 1, | |||
lineOptions: { | |||
dotSize: 8 | |||
}, | |||
// yAxisMode: 'tick' | |||
// regionFill: 1 | |||
}); | |||
let line_composite_chart = new Chart (c2, { | |||
data: line_composite_data, | |||
type: 'line', | |||
lineOptions: { | |||
dotSize: 10 | |||
}, | |||
type: 'bar', | |||
height: 180, | |||
colors: ['green'], | |||
colors: ['#46a9f9'], | |||
isSeries: 1, | |||
valuesOverPoints: 1, | |||
xAxisMode: 'tick' | |||
}); | |||
bar_composite_chart.parent.addEventListener('data-select', (e) => { | |||
@@ -173,6 +176,7 @@ let type_chart = new Chart("#chart-types", { | |||
xAxisMode: 'tick', | |||
yAxisMode: 'span', | |||
valuesOverPoints: 1, | |||
isNavigable: 1, | |||
barOptions: { | |||
stacked: 1 | |||
} | |||
@@ -413,7 +417,7 @@ let aggr_chart = new Chart("#chart-aggr", { | |||
colors: ['light-green', 'blue'], | |||
valuesOverPoints: 1, | |||
barOptions: { | |||
// stacked: 1 | |||
stacked: 1 | |||
} | |||
}); | |||
@@ -0,0 +1,559 @@ | |||
// 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; | |||
} | |||
@@ -0,0 +1,312 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Frappe Charts</title> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<meta name="keywords" content="open source javascript js charts library svg zero-dependency interactive data visualization beautiful drag resize"> | |||
<meta name="description" content="A simple, responsive, modern charts library for the web."> | |||
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen"> | |||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> | |||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen"> | |||
<link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen"> | |||
<script src="assets/js/highlight.pack.js"></script> | |||
<script>hljs.initHighlightingOnLoad();</script> | |||
<link rel="shortcut icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon"> | |||
<link rel="icon" href="https://frappe.github.io/frappe/assets/img/favicon.png" type="image/x-icon"> | |||
</head> | |||
<body> | |||
<div class="container"> | |||
<div class="row hero" style="padding-top: 30px; padding-bottom: 0px;"> | |||
<div class="jumbotron" style="background: transparent;"> | |||
<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;"> | |||
<div id="chart-composite-1" class="border"><svg height=225></svg></div> | |||
<p class="mt-1">Click or use arrow keys to navigate data points</p> | |||
</div> | |||
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;"> | |||
<div id="chart-composite-2" class="border"><svg height=225></svg></div> | |||
</div> | |||
</div> | |||
<div class="group later"> | |||
<div class="row section"> | |||
<div class="col-sm-10 push-sm-1"> | |||
<div class="dashboard-section"> | |||
<h6 class="margin-vertical-rem"> | |||
<!--Bars, Lines or <a href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts" target="_blank">Percentages</a>--> | |||
Create a chart | |||
</h6> | |||
<p class="step-explain">Install</p> | |||
<pre><code class="hljs console"> npm install frappe-charts</code></pre> | |||
<p class="step-explain">And include it in your project</p> | |||
<pre><code class="hljs javascript"> import Chart from "frappe-charts/dist/frappe-charts.min.esm"</code></pre> | |||
<p class="step-explain">... or include it directly in your HTML</p> | |||
<pre><code class="hljs html"> <script src="https://unpkg.com/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script></code></pre> | |||
<p class="step-explain">Make a new Chart</p> | |||
<pre><code class="hljs html"> <!--HTML--> | |||
<div id="chart"></div></code></pre> | |||
<pre><code class="hljs javascript"> // Javascript | |||
let data = { | |||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", | |||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"], | |||
datasets: [ | |||
{ | |||
label: "Some Data", | |||
values: [25, 40, 30, 35, 8, 52, 17, -4] | |||
}, | |||
{ | |||
label: "Another Set", | |||
values: [25, 50, -10, 15, 18, 32, 27, 14] | |||
}, | |||
{ | |||
label: "Yet Another", | |||
values: [15, 20, -3, -15, 58, 12, -17, 37] | |||
} | |||
] | |||
}; | |||
let chart = new Chart({ | |||
parent: "#chart", // or a DOM element | |||
title: "My Awesome Chart", | |||
data: data, | |||
type: 'bar', // or 'line', 'scatter', 'pie', 'percentage' | |||
height: 250, | |||
colors: ['#7cd6fd', 'violet', 'blue'], | |||
// hex-codes or these preset colors; | |||
// defaults (in order): | |||
// ['light-blue', 'blue', 'violet', 'red', | |||
// 'orange', 'yellow', 'green', 'light-green', | |||
// 'purple', 'magenta', 'grey', 'dark-grey'] | |||
format_tooltip_x: d => (d + '').toUpperCase(), | |||
format_tooltip_y: d => d + ' pts' | |||
});</code></pre> | |||
<div id="chart-types" class="border"></div> | |||
<div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-type='bar'>Bar Chart</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type='line'>Line Chart</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type='pie'>Pie Chart</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button> | |||
</div> | |||
<p class="text-muted"> | |||
<a target="_blank" href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts">Why Percentage?</a> | |||
</p> | |||
</div> | |||
</div> | |||
<div class="col-sm-10 push-sm-1"> | |||
<div class="dashboard-section"> | |||
<h6 class="margin-vertical-rem"> | |||
Update Values | |||
</h6> | |||
<pre><code class="hljs javascript"> // Update entire datasets | |||
chart.updateData( | |||
[ | |||
{values: new_dataset_1_values}, | |||
{values: new_dataset_2_values} | |||
], | |||
new_labels | |||
); | |||
// Add a new data point | |||
chart.add_data_point( | |||
[new_value_1, new_value_2], | |||
new_label, | |||
index // defaults to last index | |||
); | |||
// Remove a data point | |||
chart.remove_data_point(index);</code></pre> | |||
<div id="chart-update" class="border"></div> | |||
<div class="chart-update-buttons mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-update="add">Add Value</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button> | |||
</div> | |||
<pre><code class="hljs javascript margin-vertical-px"> ... | |||
// Include specific Y values in input data to be displayed as lines | |||
// (before passing data to a new chart): | |||
data.specific_values = [ | |||
{ | |||
label: "Altitude", | |||
line_type: "dashed", // or "solid" | |||
value: 38 | |||
} | |||
] | |||
...</code></pre> | |||
</div> | |||
</div> | |||
<div class="col-sm-10 push-sm-1"> | |||
<div class="dashboard-section"> | |||
<h6 class="margin-vertical-rem"> | |||
Plot Trends | |||
</h6> | |||
<pre><code class="hljs javascript"> ... | |||
xAxisMode: 'tick', // for short label ticks | |||
// or 'span' for long spanning vertical axis lines | |||
yAxisMode: 'span', // for long horizontal lines, or 'tick' | |||
isSeries: 1, // to allow for skipping of X values | |||
...</code></pre> | |||
<div id="chart-trends" class="border"></div> | |||
<div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type="line">Line</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type="dots">Dots</button> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-type="region">Region</button> | |||
</div> | |||
<pre><code class="hljs javascript margin-vertical-px"> ... | |||
type: 'line', // Line Chart specific properties: | |||
hideDots: 1, // Hide data points on the line; default 0 | |||
heatline: 1, // Show a value-wise line gradient; default 0 | |||
regionFill: 1, // Fill the area under the graph; default 0 | |||
...</code></pre> | |||
</div> | |||
</div> | |||
<div class="col-sm-10 push-sm-1"> | |||
<div class="dashboard-section"> | |||
<h6 class="margin-vertical-rem"> | |||
Listen to state change | |||
</h6> | |||
<div class="row"> | |||
<div class="col-sm-8"> | |||
<div id="chart-events" class="border"></div> | |||
</div> | |||
<div class="col-sm-4"> | |||
<div class="chart-events-data" class="border data-container"> | |||
<div class="image-container border"> | |||
<img class="moon-image" src="./assets/img/europa.jpg"> | |||
</div> | |||
<div class="data margin-vertical-px"> | |||
<h6 class="moon-name">Europa</h6> | |||
<p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p> | |||
<p>Mass: <span class="mass">4800000</span> x 10^16 kg</p> | |||
<p>Diameter: <span class="diameter">3121.6</span> km</p> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<pre><code class="hljs javascript margin-vertical-px"> ... | |||
type: 'bar', // Bar Chart specific properties: | |||
isNavigable: 1, // Navigate across bars; default 0 | |||
... | |||
chart.parent.addEventListener('data-select', (e) => { | |||
update_moon_data(e.index); // e contains index and value of current datapoint | |||
});</code></pre> | |||
</div> | |||
</div> | |||
<div class="col-sm-10 push-sm-1"> | |||
<div class="dashboard-section"> | |||
<h6 class="margin-vertical-rem"> | |||
Simple Aggregations | |||
</h6> | |||
<div id="chart-aggr" class="border"></div> | |||
<div class="chart-aggr-buttons mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary" data-aggregation="sums">Show Sums</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-aggregation="average">Show Averages</button> | |||
</div> | |||
<pre><code class="hljs javascript margin-vertical-px"> chart.show_sums(); // and `hide_sums()` | |||
chart.show_averages(); // and `hide_averages()`</code></pre> | |||
</div> | |||
</div> | |||
<div class="col-sm-10 push-sm-1"> | |||
<div class="dashboard-section"> | |||
<h6 class="margin-vertical-rem"> | |||
And a Month-wise Heatmap | |||
</h6> | |||
<div id="chart-heatmap" class="border" | |||
style="overflow: scroll; text-align: center; padding: 20px;"></div> | |||
<div class="heatmap-mode-buttons btn-group mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-mode="discrete">Discrete</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button> | |||
</div> | |||
<div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group"> | |||
<button type="button" class="btn btn-sm btn-secondary active" data-color="default">Default green</button> | |||
<button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button> | |||
</div> | |||
<pre><code class="hljs javascript margin-vertical-px"> let heatmap = new Chart({ | |||
parent: "#heatmap", | |||
type: 'heatmap', | |||
height: 115, | |||
data: heatmap_data, // object with date/timestamp-value pairs | |||
discrete_domains: 1 // default: 0 | |||
start: start_date, | |||
// A Date object; | |||
// default: today's date in past year | |||
// for an annual heatmap | |||
legend_colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'], | |||
// Set of five incremental colors, | |||
// beginning with a low-saturation color for zero data; | |||
// default: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'] | |||
});</code></pre> | |||
</div> | |||
</div> | |||
<div class="col-sm-10 push-sm-1"> | |||
<div class="dashboard-section"> | |||
<!-- Closing --> | |||
<div class="text-center" style="margin-top: 70px"> | |||
<a href="https://github.com/frappe/charts/archive/master.zip"><button class="large blue button">Download</button></a> | |||
<p style="margin-top: 3rem;margin-bottom: 1.5rem;"><a href="https://github.com/frappe/charts" target="_blank">View on GitHub</a></p> | |||
<p style="margin-top: 1rem;"><iframe src="https://ghbtns.com/github-btn.html?user=frappe&repo=charts&type=star&count=true" frameborder="0" scrolling="0" width="94px" height="20px"></iframe></p> | |||
<p>License: MIT</p> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="built-with-frappe text-center" style="margin-top: -20px"> | |||
<img style="padding: 5px; width: 40px; background: #fff" class="frappe-bird" src="https://frappe.github.io/frappe/assets/img/frappe-bird-grey.svg"> | |||
<p style="margin: 24px 0 0px 0; font-size: 15px"> | |||
Project maintained by <a href="https://frappe.io" target="_blank">Frappe</a>. | |||
Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>. | |||
Read the <a href="https://medium.com/@pratu16x7/so-we-decided-to-create-our-own-charts-a95cb5032c97" target="_blank">blog post</a>. | |||
</p> | |||
<p style="margin: 24px 0 80px 0; font-size: 12px"> | |||
Data from the <a href="https://www.amsmeteors.org" target="_blank">American Meteor Society</a>, | |||
<a href="http://www.sidc.be/silso" target="_blank">SILSO</a> and | |||
<a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a> | |||
</p> | |||
</div> | |||
<a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github"> | |||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9a9a9a; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"> | |||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> | |||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path> | |||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> | |||
</svg> | |||
</a> | |||
<script src="assets/js/frappe-charts.min.js"></script> | |||
<script src="assets/js/old_index.js"></script> | |||
</body> | |||
</html> |
@@ -377,20 +377,6 @@ export default class AxisChart extends BaseChart { | |||
} | |||
makeOverlay() { | |||
// Just make one out of the first element | |||
// let index = this.xAxisLabels.length - 1; | |||
// let unit = this.y[0].svg_units[index]; | |||
// this.setCurrentDataPoint(index); | |||
// if(this.overlay) { | |||
// this.overlay.parentNode.removeChild(this.overlay); | |||
// } | |||
// this.overlay = unit.cloneNode(); | |||
// this.overlay.style.fill = '#000000'; | |||
// this.overlay.style.opacity = '0.4'; | |||
// this.drawArea.appendChild(this.overlay); | |||
if(this.overlayGuides) { | |||
this.overlayGuides.forEach(g => { | |||
let o = g.overlay; | |||
@@ -402,12 +388,12 @@ export default class AxisChart extends BaseChart { | |||
return { | |||
type: c.unitType, | |||
overlay: undefined, | |||
units: c.store, | |||
units: c.units, | |||
} | |||
}); | |||
if(this.state.currentIndex === undefined) { | |||
this.state.currentIndex = 0; | |||
this.state.currentIndex = this.state.datasetLength - 1; | |||
} | |||
// Render overlays | |||
@@ -419,10 +405,19 @@ export default class AxisChart extends BaseChart { | |||
} | |||
updateOverlayGuides() { | |||
if(this.overlayGuides) { | |||
this.overlayGuides.forEach(g => { | |||
let o = g.overlay; | |||
o.parentNode.removeChild(o); | |||
}); | |||
} | |||
} | |||
bindOverlay() { | |||
// on event, update overlay | |||
this.parent.addEventListener('data-select', (e) => { | |||
this.updateOverlay(e.svg_unit); | |||
this.updateOverlay(); | |||
}); | |||
} | |||
@@ -35,7 +35,6 @@ export default class BaseChart { | |||
this.options = {}; | |||
if(this.config.isNavigable) { | |||
this.state.currentIndex = 0; | |||
this.overlays = []; | |||
} | |||
@@ -192,8 +191,12 @@ export default class BaseChart { | |||
updateNav() { | |||
if(this.config.isNavigable) { | |||
this.makeOverlay(); | |||
this.bindUnits(); | |||
// if(!this.overlayGuides){ | |||
this.makeOverlay(); | |||
this.bindUnits(); | |||
// } else { | |||
// this.updateOverlay(); | |||
// } | |||
} | |||
} | |||
@@ -242,7 +245,9 @@ export default class BaseChart { | |||
document.addEventListener('keydown', (e) => { | |||
if(isElementInViewport(this.chartWrapper)) { | |||
e = e || window.event; | |||
this.keyActions[e.keyCode](); | |||
if(this.keyActions[e.keyCode]) { | |||
this.keyActions[e.keyCode](); | |||
} | |||
} | |||
}); | |||
} | |||
@@ -201,7 +201,7 @@ let componentConfigs = { | |||
makeElements(data) { | |||
let c = this.constants; | |||
this.unitType = 'bar'; | |||
return data.yPositions.map((y, j) => { | |||
this.units = data.yPositions.map((y, j) => { | |||
return datasetBar( | |||
data.xPositions[j], | |||
y, | |||
@@ -217,6 +217,7 @@ let componentConfigs = { | |||
} | |||
) | |||
}); | |||
return this.units; | |||
}, | |||
animateElements(newData) { | |||
let c = this.constants; | |||
@@ -280,10 +281,10 @@ let componentConfigs = { | |||
} | |||
) | |||
this.dots = [] | |||
this.units = [] | |||
if(!c.hideDots) { | |||
this.dots = data.yPositions.map((y, j) => { | |||
this.units = data.yPositions.map((y, j) => { | |||
return datasetDot( | |||
data.xPositions[j], | |||
y, | |||
@@ -295,8 +296,7 @@ let componentConfigs = { | |||
}); | |||
} | |||
return Object.values(this.paths).concat(this.dots); | |||
// return this.dots; | |||
return Object.values(this.paths).concat(this.units); | |||
}, | |||
animateElements(newData) { | |||
let c = this.constants; | |||
@@ -328,8 +328,8 @@ let componentConfigs = { | |||
animateElements = animateElements.concat(animatePath( | |||
this.paths, newXPos, newYPos, newData.zeroLine)); | |||
if(this.dots.length) { | |||
this.dots.map((dot, i) => { | |||
if(this.units.length) { | |||
this.units.map((dot, i) => { | |||
animateElements = animateElements.concat(animateDot( | |||
dot, newXPos[i], newYPos[i])); | |||
}); | |||