add event chart
This commit is contained in:
pratu16x7
parent
00c8e1b5df
commit
ae007f181b
2
dist/frappe-charts.min.js
vendored
2
dist/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.js.map
vendored
2
dist/frappe-charts.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -62,15 +62,19 @@ pre.highlight {
|
||||
/*font-size: 1.4rem;*/
|
||||
}
|
||||
.data-container {
|
||||
height: 302px;
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.image-container {
|
||||
padding: 3px;
|
||||
}
|
||||
.image-container img{
|
||||
width: 170px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.data p {
|
||||
margin-bottom: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.margin-vertical-px {
|
||||
margin: 15px 0px;
|
||||
|
||||
BIN
docs/assets/img/callisto.jpg
Normal file
BIN
docs/assets/img/callisto.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
docs/assets/img/europa.jpg
Normal file
BIN
docs/assets/img/europa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/assets/img/ganymede.jpg
Normal file
BIN
docs/assets/img/ganymede.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/assets/img/io.jpg
Normal file
BIN
docs/assets/img/io.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -4,10 +4,10 @@ let report_count_list = [17, 40, 33, 44, 126, 156,
|
||||
324, 333, 478, 495, 373];
|
||||
|
||||
let bar_composite_data = {
|
||||
"labels": ["2007", "2008", "2009", "2010", "2011", "2012",
|
||||
labels: ["2007", "2008", "2009", "2010", "2011", "2012",
|
||||
"2013", "2014", "2015", "2016", "2017"],
|
||||
|
||||
"datasets": [{
|
||||
datasets: [{
|
||||
"title": "Events",
|
||||
"color": "orange",
|
||||
"values": report_count_list,
|
||||
@ -16,8 +16,8 @@ let bar_composite_data = {
|
||||
};
|
||||
|
||||
let line_composite_data = {
|
||||
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
"datasets": [{
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
"color": "green",
|
||||
"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
|
||||
// "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
|
||||
@ -63,10 +63,10 @@ bar_composite_chart.parent.addEventListener('data-select', (e) => {
|
||||
// Demo Chart (bar, linepts, scatter(blobs), percentage)
|
||||
// ================================================================================
|
||||
let type_data = {
|
||||
"labels": ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
||||
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
|
||||
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
||||
|
||||
"datasets": [
|
||||
datasets: [
|
||||
{
|
||||
title: "Some Data", color: "light-blue",
|
||||
values: [25, 40, 30, 35, 8, 52, 17, -4]
|
||||
@ -110,12 +110,12 @@ Array.prototype.slice.call(
|
||||
// Trends Chart
|
||||
// ================================================================================
|
||||
let trends_data = {
|
||||
"labels": [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
|
||||
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": [
|
||||
datasets: [
|
||||
{
|
||||
"color": "blue",
|
||||
"values": [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
|
||||
@ -191,8 +191,8 @@ let get_update_data = (source_array, length=10) => {
|
||||
};
|
||||
|
||||
let update_data = {
|
||||
"labels": get_update_data(update_data_all_labels),
|
||||
"datasets": [{
|
||||
labels: get_update_data(update_data_all_labels),
|
||||
datasets: [{
|
||||
"color": "red",
|
||||
"values": get_update_data(update_data_all_values)
|
||||
}],
|
||||
@ -206,18 +206,83 @@ let update_data = {
|
||||
]
|
||||
};
|
||||
|
||||
let update_chart = new Chart({
|
||||
parent: "#chart-update",
|
||||
data: update_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
is_series: 1,
|
||||
region_fill: 1
|
||||
});
|
||||
|
||||
// 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": ["Sun", "Mon", "Tue", "Wed", "Thu"],
|
||||
"datasets": [{
|
||||
labels: ["Ganymede", "Callisto", "Io", "Europa"],
|
||||
datasets: [
|
||||
{
|
||||
// "title": "km",
|
||||
"color": "light-green",
|
||||
"values": [25, 40, 30, 35, 48]
|
||||
"values": distances,
|
||||
"formatted": distances.map(d => d*1000 + " km")
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let events_chart = new Chart({
|
||||
parent: "#chart-events",
|
||||
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
||||
data: events_data,
|
||||
type: 'bar',
|
||||
height: 250,
|
||||
is_navigable: 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];
|
||||
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": [{
|
||||
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
datasets: [
|
||||
{
|
||||
"color": "purple",
|
||||
"values": [25, 40, 30, 35, 8, 52, 17]
|
||||
},
|
||||
@ -229,44 +294,6 @@ let aggr_data = {
|
||||
]
|
||||
};
|
||||
|
||||
let heatmap_data = {
|
||||
1479753000.0: 1,
|
||||
1498588200.0: 1,
|
||||
1499193000.0: 1,
|
||||
1499625000.0: 2,
|
||||
1500921000.0: 1,
|
||||
1501612200.0: 1,
|
||||
1502994600.0: 1,
|
||||
1503858600.0: 1,
|
||||
1504809000.0: 3,
|
||||
1505241000.0: 1,
|
||||
1506277800.0: 2
|
||||
};
|
||||
|
||||
|
||||
// Charts
|
||||
// ================================================================================
|
||||
|
||||
|
||||
|
||||
|
||||
let update_chart = new Chart({
|
||||
parent: "#chart-update",
|
||||
data: update_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
is_series: 1,
|
||||
region_fill: 1
|
||||
});
|
||||
|
||||
let events_chart = new Chart({
|
||||
parent: "#chart-events",
|
||||
data: events_data,
|
||||
type: 'bar',
|
||||
height: 250,
|
||||
is_navigable: 1,
|
||||
});
|
||||
|
||||
let aggr_chart = new Chart({
|
||||
parent: "#chart-aggr",
|
||||
data: aggr_data,
|
||||
@ -274,43 +301,6 @@ let aggr_chart = new Chart({
|
||||
height: 250
|
||||
});
|
||||
|
||||
let heatmap = new Chart({
|
||||
parent: "#chart-heatmap",
|
||||
data: heatmap_data,
|
||||
type: 'heatmap',
|
||||
height: 100,
|
||||
// discrete_domains: 1
|
||||
});
|
||||
|
||||
// Events
|
||||
// ================================================================================
|
||||
|
||||
|
||||
let chart_update_buttons = document.querySelector('.chart-update-buttons');
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
|
||||
shuffle(update_data_all_indices);
|
||||
update_chart.update_values(
|
||||
[{values: get_update_data(update_data_all_values)}],
|
||||
get_update_data(update_data_all_labels)
|
||||
);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
|
||||
// NOTE: this ought to be problem, labels stay the same after update
|
||||
let index = update_chart.x.length; // last index to add
|
||||
if(index >= update_data_all_indices.length) return;
|
||||
update_chart.add_data_point(
|
||||
[update_data_all_values[index]], update_data_all_labels[index]
|
||||
);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
|
||||
update_chart.remove_data_point();
|
||||
});
|
||||
|
||||
|
||||
|
||||
document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e) => {
|
||||
if(e.target.innerHTML === "Show Sums") {
|
||||
aggr_chart.show_sums();
|
||||
@ -331,6 +321,57 @@ document.querySelector('[data-aggregation="average"]').addEventListener("click",
|
||||
}
|
||||
});
|
||||
|
||||
// Heatmap
|
||||
// ================================================================================
|
||||
let heatmap_data = {
|
||||
1479753000.0: 1,
|
||||
1498588200.0: 1,
|
||||
1499193000.0: 1,
|
||||
1499625000.0: 2,
|
||||
1500921000.0: 1,
|
||||
1501612200.0: 1,
|
||||
1502994600.0: 1,
|
||||
1503858600.0: 1,
|
||||
1504809000.0: 3,
|
||||
1505241000.0: 1,
|
||||
1506277800.0: 2
|
||||
};
|
||||
|
||||
let heatmap = new Chart({
|
||||
parent: "#chart-heatmap",
|
||||
data: heatmap_data,
|
||||
type: 'heatmap',
|
||||
height: 100,
|
||||
// discrete_domains: 1
|
||||
});
|
||||
|
||||
// Events
|
||||
// ================================================================================
|
||||
|
||||
|
||||
let chart_update_buttons = document.querySelector('.chart-update-buttons');
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
|
||||
shuffle(update_data_all_indices);
|
||||
update_chart.update_values(
|
||||
[{values: get_update_data(update_data_all_values)}],
|
||||
update_data_all_labels.slice(0, 10)
|
||||
);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="add"]').addEventListener("click", (e) => {
|
||||
// NOTE: this ought to be problem, labels stay the same after update
|
||||
let index = update_chart.x.length; // last index to add
|
||||
if(index >= update_data_all_indices.length) return;
|
||||
update_chart.add_data_point(
|
||||
[update_data_all_values[index]], update_data_all_labels[index]
|
||||
);
|
||||
});
|
||||
|
||||
chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("click", (e) => {
|
||||
update_chart.remove_data_point();
|
||||
});
|
||||
|
||||
function shuffle(array) {
|
||||
// https://stackoverflow.com/a/2450976/6495043
|
||||
// Awesomeness: https://bost.ocks.org/mike/shuffle/
|
||||
|
||||
@ -147,8 +147,15 @@
|
||||
<div id="chart-events" class="border"></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div id="chart-events-data" class="border data-container">
|
||||
<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>
|
||||
|
||||
@ -619,6 +619,9 @@ export default class AxisChart extends BaseChart {
|
||||
const last_line_pos = old_pos[old_pos.length - 1];
|
||||
|
||||
let add_and_animate_line = (value, old_pos, new_pos) => {
|
||||
if(typeof new_pos === 'string') {
|
||||
new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
|
||||
}
|
||||
const x_line = this.make_x_line(
|
||||
height,
|
||||
text_start_at,
|
||||
@ -708,7 +711,7 @@ export default class AxisChart extends BaseChart {
|
||||
const filler_vals = new Array(Math.abs(no_of_extras)).fill("");
|
||||
superimposed_values = new_vals.concat(filler_vals);
|
||||
|
||||
const filler_pos = new Array(Math.abs(no_of_extras)).fill(last_line_pos);
|
||||
const filler_pos = new Array(Math.abs(no_of_extras)).fill(last_line_pos + "F");
|
||||
superimposed_positions = new_pos.concat(filler_pos);
|
||||
}
|
||||
|
||||
@ -774,7 +777,8 @@ export default class AxisChart extends BaseChart {
|
||||
|
||||
let y_level = $.createSVG('g', {
|
||||
className: `tick ${axis_line_class}`,
|
||||
transform: `translate(0, ${y_pos})`
|
||||
transform: `translate(0, ${y_pos})`,
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
|
||||
if(darker) {
|
||||
@ -788,6 +792,19 @@ export default class AxisChart extends BaseChart {
|
||||
}
|
||||
|
||||
add_and_animate_y_line(value, old_pos, new_pos, i, group, type, specific=false) {
|
||||
let filler = false;
|
||||
if(typeof new_pos === 'string') {
|
||||
new_pos = parseInt(new_pos.substring(0, new_pos.length-1));
|
||||
filler = true;
|
||||
}
|
||||
let new_props = {transform: `0, ${ new_pos }`};
|
||||
let old_props = {transform: `0, ${ old_pos }`};
|
||||
|
||||
if(filler) {
|
||||
new_props['stroke-opacity'] = 0;
|
||||
// old_props['stroke-opacity'] = 1;
|
||||
}
|
||||
|
||||
let [width, text_end_at, axis_line_class, start_at] = this.get_y_axis_line_props(specific);
|
||||
let axis_label_class = !specific ? 'y-value-text' : 'specific-value';
|
||||
value = !specific ? value : (value+"").toUpperCase();
|
||||
@ -807,11 +824,11 @@ export default class AxisChart extends BaseChart {
|
||||
|
||||
this.elements_to_animate && this.elements_to_animate.push([
|
||||
{unit: y_line, array: [0], index: 0},
|
||||
{transform: `0, ${ new_pos }`},
|
||||
new_props,
|
||||
250,
|
||||
"easein",
|
||||
"translate",
|
||||
{transform: `0, ${ old_pos }`}
|
||||
old_props
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user