jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[add] sums and average

Browse Source
This commit is contained in:
pratu16x7 2017-10-26 10:00:35 +05:30
parent 911d9a033c
commit 854bfb02a1
4 changed files with 170 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/assets/css/index.css
View File

@ -39,11 +39,6 @@ hr {
margin-bottom: 2rem;
}
.graphics-container {
border: 1px solid #ddd;
border-radius: 3px;
}
pre.highlight {
background: #f7f7f7;
border-radius: 3px;
@ -62,10 +57,26 @@ pre.highlight {
.hero {
/*font-size: 1.4rem;*/
}
.data-container {
height: 302px;
padding: 20px;
}
.image-container {
padding: 3px;
}
.image-container img{
width: 170px;
height: 120px;
}
.margin-vertical-px {
margin: 15px 0px;
}
.margin-vertical-rem {
margin: 2em 0 1em 0;
}
}
.border {
border: 1px solid #ddd;
border-radius: 3px;
}

27
docs/assets/js/index.js
View File

@ -4,7 +4,7 @@ let bar_composite_data = {
"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
"datasets": [{
"color": "orange",
"values": [50804, 10000, 20000, 61500, 82936.88, 24010, 40000, 60000, 25840, 50804.82, 116820],
"values": [50804, 10000, 20000, 61500, 72936.88, 24010, 40000, 60000, 25840, 50804.82, 16820],
"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"],
}
]
@ -189,7 +189,7 @@ let events_chart = new frappe.chart.FrappeChart({
let aggr_chart = new frappe.chart.FrappeChart({
parent: "#chart-aggr",
data: aggr_data,
type: 'line',
type: 'bar',
height: 250
});
@ -221,6 +221,8 @@ Array.prototype.slice.call(
});
});
let chart_update_buttons = document.querySelector('.chart-update-buttons');
chart_update_buttons.querySelector('[data-update="random"]').addEventListener("click", (e) => {
@ -244,3 +246,24 @@ chart_update_buttons.querySelector('[data-update="remove"]').addEventListener("c
update_chart.remove_data_point();
});
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 Average") {
aggr_chart.show_average();
e.target.innerHTML = "Hide Average";
} else {
aggr_chart.hide_average();
e.target.innerHTML = "Show Average";
}
});

35
docs/index.html
View File

@ -33,11 +33,11 @@
</div>
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
<div id="chart-composite-1" class="graphics-container"><svg height=225></svg></div>
<div id="chart-composite-1" class="border"><svg height=225></svg></div>
<p class="mt-1">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="graphics-container"><svg height=225></svg></div>
<div id="chart-composite-2" class="border"><svg height=225></svg></div>
</div>
</div>
@ -51,7 +51,7 @@
Create a new chart
</h6>
<pre><code class="hljs html">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
<div id="chart-types" class="graphics-container"></div>
<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>
@ -66,7 +66,7 @@
Update Values
</h6>
<pre><code class="hljs html">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
<div id="chart-update" class="graphics-container"></div>
<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>
@ -81,7 +81,18 @@
<h6 class="margin-vertical-rem">
Listen to state change
</h6>
<div id="chart-events" class="graphics-container"></div>
<div class="row">
<div class="col-sm-8">
<div id="chart-events" class="border"></div>
</div>
<div class="col-sm-4">
<div id="chart-events-data" class="border data-container">
<div class="image-container border">
<img src="https://apod.nasa.gov/apod/image/1208/perseids2012_hackmann_2000.jpg">
</div>
</div>
</div>
</div>
<pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
@ -91,10 +102,10 @@
<h6 class="margin-vertical-rem">
Simple Aggregations
</h6>
<div id="chart-aggr" class="graphics-container"></div>
<div class="mt-1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary">Show Sums</button>
<button type="button" class="btn btn-sm btn-secondary">Show Average</button>
<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 Average</button>
</div>
<pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
</div>
@ -105,7 +116,7 @@
<h6 class="margin-vertical-rem">
Oh, and an Annual Heatmap
</h6>
<div id="chart-heatmap" class="graphics-container"
<div id="chart-heatmap" class="border"
style="overflow: scroll; text-align: center; padding: 20px;"></div>
<div class="mt-1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary active">Dicrete</button>
@ -133,8 +144,8 @@
<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">Made with ♥ by <a href="https://github.com/pratu16x7" target="_blank">pratu16x7</a>. Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.</p>
<p style="margin: 24px 0 80px 0; font-size: 12px">Data from <a href="https://api.nasa.gov/index.html" target="_blank">NASA Open APIs</a></p>
<p style="margin: 24px 0 80px 0; font-size: 15px">Made with ♥ by <a href="https://github.com/pratu16x7" target="_blank">pratu16x7</a>. Used in <a href="https://erpnext.com" target="_blank">ERPNext</a>.</p>
<!--<p style="margin: 24px 0 80px 0; font-size: 12px">Data from <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">

163
src/charts.js
View File

@ -1,21 +1,3 @@
// specific_values = [
// {
// title: "Average",
// line_type: "dashed", // "dashed" or "solid"
// value: 10
// },
// ]
// summary = [
// {
// title: "Total",
// color: 'blue', // Indicator colors: 'grey', 'blue', 'red', 'green', 'orange',
// // 'violet', 'darkgrey', 'black', 'yellow', 'light-blue'
// value: 80
// }
// ]
// Validate all arguments, check passed data format, set defaults
"use strict";
let frappe = {chart:{}, chart_types:['line', 'bar', 'percentage', 'heatmap']};
@ -297,10 +279,9 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
this.x = this.data.labels;
this.y = this.data.datasets;
this.get_x_label = this.format_lambdas.x_label;
this.get_y_label = this.format_lambdas.y_label;
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.get_y_tooltip = this.format_lambdas.y_tooltip;
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.colors = ['green', 'blue', 'violet', 'red', 'orange',
'yellow', 'light-blue', 'light-green', 'purple', 'magenta'];
@ -331,20 +312,22 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}
setup_y() {
const values = this.get_all_y_values();
if(this.y_axis_values) {
this.y_old_axis_values = this.y_axis_values.slice();
}
let values = this.get_all_y_values();
if(this.y_sums && this.y_sums.length > 0) {
values = values.concat(this.y_sums);
}
this.y_axis_values = this.get_y_axis_points(values);
if(!this.y_old_axis_values) {
this.y_old_axis_values = this.y_axis_values.slice();
}
// this.y_axis_values = this.get_y_axis_points(values);
const y_pts = this.y_axis_values;
const value_range = y_pts[y_pts.length-1] - y_pts[0];
@ -483,7 +466,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
this.y.map((d, i) => {
d.svg_units = [];
this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
this.make_new_units(d, i);
});
}
@ -496,7 +479,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
d.svg_units = [];
this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
this.make_new_units(d, i);
});
setTimeout(() => {
@ -511,35 +494,41 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}, 500);
}
make_new_units() {
this.y.map((d, i) => {
this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
});
make_new_units(d, i) {
this.make_new_units_for_dataset(
this.x_axis_positions,
d.y_tops,
d.color || this.colors[i],
i,
this.y.length
);
}
make_new_units_for_dataset(x_values, y_values, color, dataset_index, no_of_datasets) {
let group = this.svg_units_groups[dataset_index];
group.textContent = '';
this.y[dataset_index].svg_units = [];
make_new_units_for_dataset(x_values, y_values, color, dataset_index, no_of_datasets, group, array, unit) {
if(!group) group = this.svg_units_groups[dataset_index];
if(!array) array = this.y[dataset_index].svg_units;
if(!unit) unit = this.unit_args;
group.textContent = '';
array.length = 0;
let d = this.unit_args;
y_values.map((y, i) => {
let data_unit = this.draw[d.type](
let data_unit = this.draw[unit.type](
x_values[i],
y,
d.args,
unit.args,
color,
dataset_index,
no_of_datasets
);
group.appendChild(data_unit);
this.y[dataset_index].svg_units.push(data_unit);
array.push(data_unit);
});
}
make_y_specifics() {
this.specific_y_group.textContent = '';
this.specific_values.map(d => {
this.specific_y_group.textContent = '';
this.specific_y_group.appendChild(
this.make_y_line(
0,
@ -598,19 +587,82 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}
// API
show_sums() {
// Remake y axis
this.updating = true;
// Make sum units and animate
this.y_sums = new Array(this.x_axis_positions.length).fill(0);
this.y.map(d => {
d.values.map( (value, i) => {
this.y_sums[i] += value;
});
});
// Remake y axis, animate
this.update_values();
// Then make sum units, don't animate
this.sum_units = [];
this.make_new_units_for_dataset(
this.x_axis_positions,
this.y_sums.map( val => $$.float_2(this.zero_line - val * this.multiplier)),
'light-grey',
0,
1,
this.sum_group,
this.sum_units
);
// this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
this.updating = false;
}
hide_sums() {
//
if(this.updating) return;
this.y_sums = [];
this.sum_group.textContent = '';
this.sum_units = [];
this.update_values();
}
show_average() {
// has to be animated as well
this.old_specific_values = this.specific_values.slice();
this.y.map((d, i) => {
let sum = 0;
d.values.map(e => {sum+=e});
let average = sum/d.values.length;
this.specific_values.push({
title: "AVG" + " " + (i+1),
line_type: "dashed",
value: average,
auto: 1
});
});
console.log(this.specific_values);
this.update_values();
}
hide_average() {
this.old_specific_values = this.specific_values.slice();
let indices_to_remove = [];
this.specific_values.map((d, i) => {
if(d.auto) indices_to_remove.unshift(i);
});
console.log(indices_to_remove);
indices_to_remove.map(index => {
this.specific_values.splice(index, 1);
});
console.log(this.specific_values);
this.update_values();
}
update_values(new_y, new_x) {
@ -628,7 +680,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
this.no_of_extra_pts = new_x.length - this.x.length;
// Just update values prop, setup_x/y() will do the rest
this.y.map((d, i) => {d.values = new_y[i].values;});
if(new_y) this.y.map((d, i) => {d.values = new_y[i].values;});
if(new_x) this.x = new_x;
this.setup_x();
@ -642,7 +694,10 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}, 300)
}
if(!$$.arrays_equal(this.y_old_axis_values, this.y_axis_values)) {
if(!$$.arrays_equal(this.y_old_axis_values, this.y_axis_values) ||
(this.old_specific_values &&
!$$.arrays_equal(this.old_specific_values, this.specific_values))) {
this.make_y_axis(true);
setTimeout(() => {
if(!this.updating) {
@ -717,7 +772,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
setTimeout(() => {
this.y.map((d, i) => {
this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
this.make_new_units_for_dataset(this.x_axis_positions, d.y_tops, d.color || this.colors[i], i, this.y.length);
this.make_new_units(d, i);
});
}, 300);
}
@ -1145,14 +1200,6 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}
});
});
// Sums
this.y_sums = new Array(this.x_axis_positions.length).fill(0);
this.y.map(d => {
d.values.map( (value, i) => {
this.y_sums[i] += value;
});
});
}
get_bar_height_and_y_attr(y_top) {
@ -1251,8 +1298,9 @@ frappe.chart.BarChart = class BarChart extends frappe.chart.AxisChart {
make_overlay() {
// Just make one out of the first element
let unit = this.y[0].svg_units[0];
this.update_current_data_point(0);
let index = this.x.length - 1;
let unit = this.y[0].svg_units[index];
this.update_current_data_point(index);
if(this.overlay) {
this.overlay.parentNode.removeChild(this.overlay);
@ -1394,7 +1442,6 @@ frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.Frappe
super(args);
this.type = 'percentage';
this.get_x_label = this.format_lambdas.x_label;
this.get_y_label = this.format_lambdas.y_label;
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.get_y_tooltip = this.format_lambdas.y_tooltip;