jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

add and remove values, animate specifics lines

Browse Source
This commit is contained in:
pratu16x7 2017-10-25 19:12:42 +05:30
parent e6bfdd03a0
commit f10b45af38
4 changed files with 317 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,18 +70,33 @@ let type_data = {
] ]
}; };
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"];
let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58,
12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17];
// 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 = { let update_data = {
"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], "labels": get_update_data(update_data_all_labels),
"datasets": [{ "datasets": [{
"color": "red", "color": "red",
"values": [25, 40, 30, 35, 48, 52, 17] "values": get_update_data(update_data_all_values)
} }
], ],
"specific_values": [ "specific_values": [
{ {
title: "Altitude", title: "Altitude",
line_type: "dashed", // "dashed" or "solid" // title: "Altiteragrwst ude",
value: 43 line_type: "dashed",
value: 38
}, },
] ]
}; };
@ -138,7 +153,7 @@ let bar_composite_chart = new frappe.chart.FrappeChart ({
let line_composite_chart = new frappe.chart.FrappeChart ({ let line_composite_chart = new frappe.chart.FrappeChart ({
parent: "#chart-composite-2", parent: "#chart-composite-2",
data: line_composite_data, data: line_composite_data,
type: 'line', type: 'bar',
height: 180 height: 180
}) })
@ -188,3 +203,44 @@ let heatmap = new frappe.chart.FrappeChart({
// Events // Events
// ================================================================================ // ================================================================================
Array.prototype.slice.call(
document.querySelectorAll('.chart-type-buttons button')
).map(el => {
el.addEventListener('click', (e) => {
btn = e.target;
let type = btn.getAttribute('data-type');
type_chart = type_chart.get_different_chart(type);
Array.prototype.slice.call(
btn.parentNode.querySelectorAll('button')).map(el => {
el.classList.remove('active');
});
btn.classList.add('active');
});
});
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();
});

41
docs/index.html
View File

@ -8,7 +8,7 @@
<meta name="description" content="A simple, responsive, modern charts library for the web."> <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 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 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/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/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/index.css" media="screen">
@ -33,11 +33,11 @@
</div> </div>
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;"> <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
<div id="chart-composite-1" class="graphics-container"></div> <div id="chart-composite-1" class="graphics-container"><svg height=225></svg></div>
<p class="mt-1">Use arrow keys to navigate data points</p> <p class="mt-1">Use arrow keys to navigate data points</p>
</div> </div>
<div class="col-sm-10 push-sm-1 later" style="font-size: 14px;"> <div class="col-sm-10 push-sm-1 later" style="font-size: 14px;">
<div id="chart-composite-2" class="graphics-container"></div> <div id="chart-composite-2" class="graphics-container"><svg height=225></svg></div>
</div> </div>
</div> </div>
@ -47,15 +47,16 @@
<div class="col-sm-10 push-sm-1"> <div class="col-sm-10 push-sm-1">
<div class="dashboard-section"> <div class="dashboard-section">
<h6 class="margin-vertical-rem"> <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> <!--Bars, Lines or <a href="http://www.storytellingwithdata.com/blog/2011/07/death-to-pie-charts" target="_blank">Percentages</a>-->
Create a new chart
</h6> </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="graphics-container"></div>
<div class="mt-1 mx-auto" role="group"> <div class="btn-group chart-type-buttons margin-vertical-px mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary active">Bar Chart</button> <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">Line 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">Percentage Chart</button> <button type="button" class="btn btn-sm btn-secondary" data-type='percentage'>Percentage Chart</button>
</div> </div>
<pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
</div> </div>
</div> </div>
@ -64,11 +65,12 @@
<h6 class="margin-vertical-rem"> <h6 class="margin-vertical-rem">
Update Values Update Values
</h6> </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="graphics-container"></div>
<div class="mt-1 mx-auto" role="group"> <div class="chart-update-buttons mt-1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary">Random Data</button> <button type="button" class="btn btn-sm btn-secondary" data-update="random">Random Data</button>
<button type="button" class="btn btn-sm btn-secondary">Add Value</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">Remove Value</button> <button type="button" class="btn btn-sm btn-secondary" data-update="remove">Remove Value</button>
</div> </div>
<pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre> <pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
</div> </div>
@ -131,15 +133,16 @@
<div class="built-with-frappe text-center" style="margin-top: -20px"> <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"> <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 80px 0; font-size: 15px">Made 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 0px 0; font-size: 15px">Made 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> </div>
<a href="https://github.com/frappe/charts" target="_blank" class="github-corner" aria-label="View source on Github"> <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"> <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="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="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> <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> </svg>
</a> </a>
<script src="../src/charts.js"></script> <script src="../src/charts.js"></script>

2
src/charts.css
View File

@ -45,7 +45,7 @@
} }
.chart-container .axis line, .chart-container .axis line,
.chart-container .chart-label line { .chart-container .chart-label line {
stroke: rgba(27, 31, 35, 0.2); stroke: #dadada;
} }
.chart-container .percentage-graph .progress { .chart-container .percentage-graph .progress {
margin-bottom: 0px; margin-bottom: 0px;

356
src/charts.js
View File

@ -18,7 +18,7 @@
// Validate all arguments, check passed data format, set defaults // Validate all arguments, check passed data format, set defaults
"use strict"; "use strict";
let frappe = {chart:{}}; let frappe = {chart:{}, chart_types:['line', 'bar', 'percentage', 'heatmap']};
frappe.chart.FrappeChart = class { frappe.chart.FrappeChart = class {
constructor({ constructor({
@ -50,6 +50,8 @@ frappe.chart.FrappeChart = class {
} }
} }
this.raw_chart_args = arguments[0];
this.parent = document.querySelector(parent); this.parent = document.querySelector(parent);
this.title = title; this.title = title;
this.subtitle = subtitle; this.subtitle = subtitle;
@ -65,9 +67,45 @@ frappe.chart.FrappeChart = class {
this.current_index = 0; this.current_index = 0;
} }
$$.createSVG('svg', {
className: 'chart',
inside: parent,
width: 1000,
height: height
});
this.set_margins(height); this.set_margins(height);
} }
get_different_chart(type) {
if(!frappe.chart_types.includes(type)) {
console.error(`'${type}' is not a valid chart type.`);
}
if(type === this.type) return;
// Only across compatible types
let compatible_types = {
bar: ['line', 'percentage'],
line: ['bar', 'percentage'],
percentage: ['bar', 'line'],
heatmap: []
}
if(!compatible_types[this.type].includes(type)) {
console.error(`'${this.type}' chart cannot be converted to a '${type}' chart.`);
}
// Okay, this is anticlimactic
// this function will need to be 'change_chart_type(type)'
// that will update only the required elements, but for now ...
return new frappe.chart.FrappeChart({
parent: this.raw_chart_args.parent,
data: this.raw_chart_args.data,
type: type,
height: this.raw_chart_args.height
});
}
set_margins(height) { set_margins(height) {
this.base_height = height; this.base_height = height;
this.height = height - 40; this.height = height - 40;
@ -113,7 +151,7 @@ frappe.chart.FrappeChart = class {
let special_values_width = 0; let special_values_width = 0;
this.specific_values.map(val => { this.specific_values.map(val => {
if(this.get_strwidth(val.title) > special_values_width) { if(this.get_strwidth(val.title) > special_values_width) {
special_values_width = this.get_strwidth(val.title); special_values_width = this.get_strwidth(val.title) - 40;
} }
}); });
this.base_width = this.parent.offsetWidth - special_values_width; this.base_width = this.parent.offsetWidth - special_values_width;
@ -159,7 +197,7 @@ frappe.chart.FrappeChart = class {
make_draw_area() { make_draw_area() {
this.draw_area = $$.createSVG("g", { this.draw_area = $$.createSVG("g", {
className: this.type, className: this.type + '-chart',
inside: this.svg, inside: this.svg,
transform: `translate(${this.translate_x}, ${this.translate_y})` transform: `translate(${this.translate_x}, ${this.translate_y})`
}); });
@ -305,13 +343,18 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
const y_pts = this.y_axis_values; const y_pts = this.y_axis_values;
const value_range = y_pts[y_pts.length-1] - y_pts[0]; const value_range = y_pts[y_pts.length-1] - y_pts[0];
if(this.multiplier) this.old_multiplier = this.multiplier;
this.multiplier = this.height / value_range; this.multiplier = this.height / value_range;
if(!this.old_multiplier) this.old_multiplier = this.multiplier;
const zero_index = y_pts.indexOf(0); const zero_index = y_pts.indexOf(0);
const interval = y_pts[1] - y_pts[0]; const interval = y_pts[1] - y_pts[0];
const interval_height = interval * this.multiplier; const interval_height = interval * this.multiplier;
if(this.zero_line) this.old_zero_line = this.zero_line;
this.zero_line = this.height - (zero_index * interval_height); this.zero_line = this.height - (zero_index * interval_height);
if(!this.old_zero_line) this.old_zero_line = this.zero_line;
} }
setup_components() { setup_components() {
@ -374,20 +417,14 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
// make HORIZONTAL lines for y values // make HORIZONTAL lines for y values
make_y_axis(animate=false) { make_y_axis(animate=false) {
let width, text_end_at = -9, axis_line_class = '', start_at = 0;
if(this.y_axis_mode === 'span') { // long spanning lines
width = this.width + 6;
start_at = -6;
} else if(this.y_axis_mode === 'tick'){ // short label lines
width = -6;
axis_line_class = 'y-axis-label';
}
if(animate) { if(animate) {
this.make_anim_y_axis(width, text_end_at, axis_line_class, start_at); this.make_anim_y_axis();
this.make_anim_y_specifics();
return; return;
} }
let [width, text_end_at, axis_line_class, start_at] = this.get_y_axis_line_props();
this.y_axis_group.textContent = ''; this.y_axis_group.textContent = '';
this.y_axis_values.map((value, i) => { this.y_axis_values.map((value, i) => {
this.y_axis_group.appendChild( this.y_axis_group.appendChild(
@ -405,6 +442,22 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}); });
} }
get_y_axis_line_props(specific=false) {
if(specific) {
return[this.width, this.width + 5, 'specific-value', 0];
}
let width, text_end_at = -9, axis_line_class = '', start_at = 0;
if(this.y_axis_mode === 'span') { // long spanning lines
width = this.width + 6;
start_at = -6;
} else if(this.y_axis_mode === 'tick'){ // short label lines
width = -6;
axis_line_class = 'y-axis-label';
}
return [width, text_end_at, axis_line_class, start_at];
}
draw_graph() { draw_graph() {
// TODO: Don't animate on refresh // TODO: Don't animate on refresh
let data = []; let data = [];
@ -457,6 +510,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
make_y_specifics() { make_y_specifics() {
this.specific_values.map(d => { this.specific_values.map(d => {
this.specific_y_group.textContent = '';
this.specific_y_group.appendChild( this.specific_y_group.appendChild(
this.make_y_line( this.make_y_line(
0, 0,
@ -542,17 +596,16 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
setTimeout(() => { setTimeout(() => {
if(!this.updating) this.make_x_axis(); if(!this.updating) this.make_x_axis();
}, 300) }, 300)
} else {
this.make_x_axis();
} }
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.make_y_axis(true); this.make_y_axis(true);
setTimeout(() => { setTimeout(() => {
if(!this.updating) this.make_y_axis(); if(!this.updating) {
this.make_y_axis();
this.make_y_specifics();
}
}, 300) }, 300)
} else {
this.make_y_axis();
} }
// Change in data, so calculate dependencies // Change in data, so calculate dependencies
@ -566,9 +619,24 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
this.updating = false; this.updating = false;
} }
add_data_point(data_point) { add_data_point(y_point, x_point, index=this.x.length) {
this.x.push(data_point.label); let new_y = this.y.map(data_set => { return {values:data_set.values}; });
this.y.values.push(); new_y.map((d, i) => { d.values.splice(index, 0, y_point[i]); });
let new_x = this.x.slice();
new_x.splice(index, 0, x_point);
this.update_values(new_y, new_x);
}
remove_data_point(index = this.x.length-1) {
if(this.x.length < 3) return;
let new_y = this.y.map(data_set => { return {values:data_set.values}; });
new_y.map((d, i) => { d.values.splice(index, 1); });
let new_x = this.x.slice();
new_x.splice(index, 1);
this.update_values(new_y, new_x);
} }
run_animation() { run_animation() {
@ -589,6 +657,63 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}, 200); }, 200);
} }
animate_graphs() {
this.y.map((d, i) => {
// Pre-prep, equilize no of positions between old and new
let [old_x, old_y, new_x, new_y] = this.calc_old_and_new_postions(d, i);
if(this.no_of_extra_pts >= 0) {
this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
this.make_new_units_for_dataset(old_x, old_y, d.color || this.colors[i], i);
}
d.path && this.animate_path(d, i, old_x, old_y, new_x, new_y);
this.animate_units(d, i, old_x, old_y, new_x, new_y);
});
// TODO: replace with real units
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);
});
}, 300);
}
animate_path(d, i, old_x, old_y, new_x, new_y) {
// Animate path
const new_points_list = new_y.map((y, i) => (new_x[i] + ',' + y));
const new_path_str = new_points_list.join("L");
const path_args = [{unit: d.path, object: d, key: 'path'}, {d:"M"+new_path_str}, 250, "easein"];
this.elements_to_animate.push(path_args);
// Animate region
if(d.region_path) {
let reg_start_pt = `0,${this.zero_line}L`;
let reg_end_pt = `L${this.width},${this.zero_line}`;
const region_args = [
{unit: d.region_path, object: d, key: 'region_path'},
{d:"M" + reg_start_pt + new_path_str + reg_end_pt},
250,
"easein"
];
this.elements_to_animate.push(region_args);
}
}
animate_units(d, index, old_x, old_y, new_x, new_y) {
let type = this.unit_args.type;
d.svg_units.map((unit, i) => {
this.elements_to_animate.push(this.animate[type](
{unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data
new_x[i],
new_y[i],
index
));
});
}
calc_old_and_new_postions(d, i) { calc_old_and_new_postions(d, i) {
let old_x = this.x_old_axis_positions.slice(); let old_x = this.x_old_axis_positions.slice();
let new_x = this.x_axis_positions.slice(); let new_x = this.x_axis_positions.slice();
@ -628,63 +753,6 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
return [old_x, old_y, new_x, new_y]; return [old_x, old_y, new_x, new_y];
} }
animate_graphs() {
this.y.map((d, i) => {
// Pre-prep, equilize no of positions between old and new
let [old_x, old_y, new_x, new_y] = this.calc_old_and_new_postions(d, i);
if(this.no_of_extra_pts >= 0) {
this.make_path && this.make_path(d, i, old_x, old_y, d.color || this.colors[i]);
this.make_new_units_for_dataset(old_x, old_y, d.color || this.colors[i], i);
}
d.path && this.animate_path(d, i, old_x, old_y, new_x, new_y);
this.animate_units(d, i, old_x, old_y, new_x, new_y);
});
// TODO: replace with real units
// 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);
// });
// }, 300);
}
animate_path(d, i, old_x, old_y, new_x, new_y) {
// Animate path
const new_points_list = new_y.map((y, i) => (new_x[i] + ',' + y));
const new_path_str = new_points_list.join("L");
const path_args = [{unit: d.path, object: d, key: 'path'}, {d:"M"+new_path_str}, 250, "easein"];
this.elements_to_animate.push(path_args);
// Animate region
if(d.region_path) {
let reg_start_pt = `0,${this.zero_line}L`;
let reg_end_pt = `L${this.width},${this.zero_line}`;
const region_args = [
{unit: d.region_path, object: d, key: 'region_path'},
{d:"M" + reg_start_pt + new_path_str + reg_end_pt},
250,
"easein"
];
this.elements_to_animate.push(region_args);
}
}
animate_units(d, index, old_x, old_y, new_x, new_y) {
let type = this.unit_args.type;
d.svg_units.map((unit, i) => {
this.elements_to_animate.push(this.animate[type](
{unit:unit, array:d.svg_units, index: i}, // unit, with info to replace where it came from in the data
new_x[i],
new_y[i],
index
));
});
}
make_anim_x_axis(height, text_start_at, axis_line_class) { make_anim_x_axis(height, text_start_at, axis_line_class) {
// Animate X AXIS to account for more or less axis lines // Animate X AXIS to account for more or less axis lines
@ -713,7 +781,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
250, 250,
"easein", "easein",
"translate", "translate",
`${ old_pos }, 0` {transform: `${ old_pos }, 0`}
]); ]);
} }
@ -729,7 +797,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
); );
} }
make_anim_y_axis(width, text_end_at, axis_line_class, start_at) { make_anim_y_axis() {
// Animate Y AXIS to account for more or less axis lines // Animate Y AXIS to account for more or less axis lines
const old_pos = this.y_old_axis_values.map(value => const old_pos = this.y_old_axis_values.map(value =>
@ -742,32 +810,6 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
const last_line_pos = old_pos[old_pos.length - 1]; const last_line_pos = old_pos[old_pos.length - 1];
let add_and_animate_line = (value, old_pos, new_pos, i) => {
const y_line = this.make_y_line(
start_at,
width,
text_end_at,
value,
'y-value-text',
axis_line_class,
old_pos, // old position
(value === 0 && i !== 0) // Non-first Zero line
);
// this.zero_line - value * this.multiplier
this.y_axis_group.appendChild(y_line);
// console.log(`0, ${ new_pos }`, `0, ${ old_pos }`);
this.elements_to_animate && this.elements_to_animate.push([
{unit: y_line, array: [0], index: 0},
{transform: `0, ${ new_pos }`},
250,
"easein",
"translate",
`0, ${ old_pos }`
]);
}
this.y_axis_group.textContent = ''; this.y_axis_group.textContent = '';
this.make_new_axis_anim_lines( this.make_new_axis_anim_lines(
@ -776,11 +818,27 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
old_vals, old_vals,
new_vals, new_vals,
last_line_pos, last_line_pos,
add_and_animate_line this.add_and_animate_y_line.bind(this),
this.y_axis_group
); );
} }
make_new_axis_anim_lines(old_pos, new_pos, old_vals, new_vals, last_line_pos, add_and_animate_line) { make_anim_y_specifics() {
this.specific_y_group.textContent = '';
this.specific_values.map((d, i) => {
this.add_and_animate_y_line(
d.title,
this.old_zero_line - d.value * this.old_multiplier,
this.zero_line - d.value * this.multiplier,
0,
this.specific_y_group,
d.line_type,
true
);
});
}
make_new_axis_anim_lines(old_pos, new_pos, old_vals, new_vals, last_line_pos, add_and_animate_line, group) {
let superimposed_positions, superimposed_values; let superimposed_positions, superimposed_values;
let no_of_extras = new_vals.length - old_vals.length; let no_of_extras = new_vals.length - old_vals.length;
if(no_of_extras > 0) { if(no_of_extras > 0) {
@ -802,7 +860,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
// console.log(superimposed_values, old_pos, new_pos); // console.log(superimposed_values, old_pos, new_pos);
superimposed_values.map((value, i) => { superimposed_values.map((value, i) => {
add_and_animate_line(value, old_pos[i], superimposed_positions[i], i); add_and_animate_line(value, old_pos[i], superimposed_positions[i], i, group);
}); });
if(no_of_extras > 0) { if(no_of_extras > 0) {
@ -812,7 +870,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
const extra_positions = new_pos.slice(old_pos.length); const extra_positions = new_pos.slice(old_pos.length);
extra_values.map((value, i) => { extra_values.map((value, i) => {
add_and_animate_line(value, last_line_pos, extra_positions[i], i); add_and_animate_line(value, last_line_pos, extra_positions[i], i, group);
}); });
} }
} }
@ -883,7 +941,34 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
return y_level; return y_level;
} }
// Helpers add_and_animate_y_line(value, old_pos, new_pos, i, group, type, specific=false) {
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();
const y_line = this.make_y_line(
start_at,
width,
text_end_at,
value,
axis_label_class,
axis_line_class,
old_pos, // old position
(value === 0 && i !== 0), // Non-first Zero line
type
);
group.appendChild(y_line);
this.elements_to_animate && this.elements_to_animate.push([
{unit: y_line, array: [0], index: 0},
{transform: `0, ${ new_pos }`},
250,
"easein",
"translate",
{transform: `0, ${ old_pos }`}
]);
}
get_y_axis_points(array) { get_y_axis_points(array) {
//*** Where the magic happens *** //*** Where the magic happens ***
@ -967,13 +1052,12 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
// and a consequent optimal number of parts // and a consequent optimal number of parts
const part_size = Math.pow(10, ((max_val+"").length - 1)); const part_size = Math.pow(10, ((max_val+"").length - 1));
const no_of_parts = this.calc_no_of_parts(max_val, part_size);
let no_of_parts = this.calc_no_of_parts(max_val, part_size);
// Use it to get a nice even upper bound // Use it to get a nice even upper bound
const upper_bound = part_size * no_of_parts; const upper_bound = part_size * no_of_parts;
return [upper_bound, this.get_optimal_no_of_parts(no_of_parts)]; return [upper_bound, no_of_parts];
} }
calc_no_of_parts(value, divisor) { calc_no_of_parts(value, divisor) {
@ -1020,7 +1104,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}); });
} }
get_rect_height_and_y_attr(y_top) { get_bar_height_and_y_attr(y_top) {
let height, y; let height, y;
if (y_top <= this.zero_line) { if (y_top <= this.zero_line) {
height = this.zero_line - y_top; height = this.zero_line - y_top;
@ -1028,7 +1112,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
// In case of invisible bars // In case of invisible bars
if(height === 0) { if(height === 0) {
height = this.height * 0.02; height = this.height * 0.01;
y -= height; y -= height;
} }
} else { } else {
@ -1037,7 +1121,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
// In case of invisible bars // In case of invisible bars
if(height === 0) { if(height === 0) {
height = this.height * 0.02; height = this.height * 0.01;
} }
} }
@ -1053,7 +1137,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
let width = total_width / args.no_of_datasets; let width = total_width / args.no_of_datasets;
let current_x = start_x + width * index; let current_x = start_x + width * index;
let [height, y] = this.get_rect_height_and_y_attr(y_top); let [height, y] = this.get_bar_height_and_y_attr(y_top);
return $$.createSVG('rect', { return $$.createSVG('rect', {
className: `bar mini fill ${color}`, className: `bar mini fill ${color}`,
@ -1065,6 +1149,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
}, },
'dot': (x, y, args, color) => { 'dot': (x, y, args, color) => {
console.log(x, y);
return $$.createSVG('circle', { return $$.createSVG('circle', {
className: `fill ${color}`, className: `fill ${color}`,
cx: x, cx: x,
@ -1078,7 +1163,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
'bar': (bar_obj, x, y_top, index) => { 'bar': (bar_obj, x, y_top, index) => {
let start = x - this.avg_unit_width/4; let start = x - this.avg_unit_width/4;
let width = (this.avg_unit_width/2)/this.y.length; let width = (this.avg_unit_width/2)/this.y.length;
let [height, y] = this.get_rect_height_and_y_attr(y_top); let [height, y] = this.get_bar_height_and_y_attr(y_top);
x = start + (width * index); x = start + (width * index);
@ -1086,6 +1171,7 @@ frappe.chart.AxisChart = class AxisChart extends frappe.chart.FrappeChart {
// bar.animate({height: args.new_height, y: y_top}, 250, mina.easein); // bar.animate({height: args.new_height, y: y_top}, 250, mina.easein);
}, },
'dot': (dot_obj, x, y_top) => { 'dot': (dot_obj, x, y_top) => {
console.log(dot_obj, x, y_top);
return [dot_obj, {cx: x, cy: y_top}, 250, "easein"]; return [dot_obj, {cx: x, cy: y_top}, 250, "easein"];
// dot.animate({cy: y_top}, 250, mina.easein); // dot.animate({cy: y_top}, 250, mina.easein);
} }
@ -1097,7 +1183,7 @@ frappe.chart.BarChart = class BarChart extends frappe.chart.AxisChart {
constructor(args) { constructor(args) {
super(args); super(args);
this.type = 'bar-graph'; this.type = 'bar';
this.x_axis_mode = args.x_axis_mode || 'tick'; this.x_axis_mode = args.x_axis_mode || 'tick';
this.y_axis_mode = args.y_axis_mode || 'span'; this.y_axis_mode = args.y_axis_mode || 'span';
this.setup(); this.setup();
@ -1164,7 +1250,7 @@ frappe.chart.LineChart = class LineChart extends frappe.chart.AxisChart {
return; return;
} }
this.type = 'line-graph'; this.type = 'line';
this.region_fill = args.region_fill; this.region_fill = args.region_fill;
this.x_axis_mode = args.x_axis_mode || 'span'; this.x_axis_mode = args.x_axis_mode || 'span';
this.y_axis_mode = args.y_axis_mode || 'span'; this.y_axis_mode = args.y_axis_mode || 'span';
@ -1250,6 +1336,7 @@ frappe.chart.LineChart = class LineChart extends frappe.chart.AxisChart {
frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.FrappeChart { frappe.chart.PercentageChart = class PercentageChart extends frappe.chart.FrappeChart {
constructor(args) { constructor(args) {
super(args); super(args);
this.type = 'percentage';
this.get_x_label = this.format_lambdas.x_label; this.get_x_label = this.format_lambdas.x_label;
this.get_y_label = this.format_lambdas.y_label; this.get_y_label = this.format_lambdas.y_label;
@ -1811,6 +1898,29 @@ $$.arrays_equal = (arr1, arr2) => {
return are_equal; return are_equal;
} }
$$.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;
}
// $$.findNodeIndex = (node) => // $$.findNodeIndex = (node) =>
// { // {
// var i = 0; // var i = 0;
@ -1913,7 +2023,7 @@ $$.runSVGAnimation = (svg_container, elements) => {
// $$.animateMotion = (element, props, dur, easing_type="linear") // $$.animateMotion = (element, props, dur, easing_type="linear")
$$.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_value=undefined) => { $$.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_values={}) => {
let easing = { let easing = {
ease: "0.25 0.1 0.25 1", ease: "0.25 0.1 0.25 1",
linear: "0 0 1 1", linear: "0 0 1 1",
@ -1933,7 +2043,7 @@ $$.animateSVG = (element, props, dur, easing_type="linear", type=undefined, old_
} else { } else {
animate_element = document.createElementNS("http://www.w3.org/2000/svg", "animate"); animate_element = document.createElementNS("http://www.w3.org/2000/svg", "animate");
} }
let current_value = old_value || element.getAttribute(attributeName); let current_value = old_values[attributeName] || element.getAttribute(attributeName);
let value = props[attributeName]; let value = props[attributeName];
let anim_attr = { let anim_attr = {