jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

animate on initial values

Browse Source
This commit is contained in:
pratu16x7 2017-10-01 21:45:17 +05:30
parent e08196e0fd
commit 505a2eef3e
2 changed files with 107 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/charts.css
View File

@ -38,11 +38,11 @@
.graph-container .axis,
.graph-container .chart-label {
font-size: 10px;
fill: #959ba1;
fill: #555b51;
}
.graph-container .axis line,
.graph-container .chart-label line {
stroke: rgba(27, 31, 35, 0.1);
stroke: rgba(27, 31, 35, 0.2);
}
.graph-container .percentage-graph .progress {
margin-bottom: 0px;

175
src/charts.js
View File

@ -46,7 +46,6 @@ class FrappeChart {
}
this.parent = document.querySelector(parent);
this.set_margins(height);
this.title = title;
this.subtitle = subtitle;
@ -61,6 +60,8 @@ class FrappeChart {
if(this.is_navigable) {
this.current_index = 0;
}
this.set_margins(height);
}
set_margins(height) {
@ -125,14 +126,18 @@ class FrappeChart {
this.parent.appendChild(this.container);
this.chart_wrapper = this.container.querySelector('.frappe-chart');
this.chart_wrapper.appendChild(this.make_graph_area());
// this.chart_wrapper.appendChild();
this.make_chart_area()
this.make_draw_area();
this.stats_wrapper = this.container.querySelector('.graph-stats-container');
}
make_graph_area() {
make_chart_area() {
this.svg = $$.createSVG('svg', {
className: 'chart',
inside: this.chart_wrapper,
width: this.base_width,
height: this.base_height
});
@ -140,8 +145,19 @@ class FrappeChart {
return this.svg;
}
make_draw_area() {
this.draw_area = $$.createSVG("g", {
className: this.type,
inside: this.svg,
transform: `translate(${this.translate_x}, ${this.translate_y})`
});
};
setup_components() {
this.svg_units = $$.createSVG('g', {className: 'data-points'});
this.svg_units_group = $$.createSVG('g', {
className: 'data-points',
inside: this.draw_area
});
}
make_tooltip() {
@ -151,6 +167,7 @@ class FrappeChart {
this.bind_tooltip();
}
show_summary() {}
show_custom_summary() {
this.summary.map(d => {
@ -274,6 +291,8 @@ class AxisGraph extends FrappeChart {
this.get_x_tooltip = this.format_lambdas.x_tooltip;
this.get_y_tooltip = this.format_lambdas.y_tooltip;
this.colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
'yellow', 'orange', 'red'];
}
setup_values() {
@ -287,63 +306,38 @@ class AxisGraph extends FrappeChart {
}
setup_y() {
// Metrics: upper limit, no. of parts, multiplier
this.setup_metrics();
// Axis values
this.y_axis_values = this.get_y_axis_values(this.upper_limit, this.parts);
// Data points
this.y.map(d => {
d.y_tops = d.values.map( val => chart_utils.float_2(this.height - val * this.multiplier));
d.svg_units = [];
});
this.calc_min_tops();
}
get_all_y_values() {
let all_values = [];
this.y.map(d => {
all_values = all_values.concat(d.values);
});
return all_values.concat(this.specific_values.map(d => d.value));
}
setup_metrics() {
let values = this.get_all_y_values();
[this.upper_limit, this.parts] = this.get_upper_limit_and_parts(values);
this.multiplier = this.height / this.upper_limit;
}
setup_components() {
this.y_axis_group = $$.createSVG('g', {className: 'y axis', inside: this.draw_area});
this.x_axis_group = $$.createSVG('g', {className: 'x axis', inside: this.draw_area});
this.specific_y_lines = $$.createSVG('g', {className: 'specific axis', inside: this.draw_area});
super.setup_components();
this.y_axis_group = $$.createSVG('g', {className: 'y axis'});
this.x_axis_group = $$.createSVG('g', {className: 'x axis'});
this.specific_y_lines = $$.createSVG('g', {className: 'specific axis'});
}
make_graph_components() {
this.make_y_axis();
this.make_x_axis();
this.y_colors = ['lightblue', 'purple', 'blue', 'green', 'lightgreen',
'yellow', 'orange', 'red']
this.y.map((d, i) => {
this.make_units(d.y_tops, d.color || this.y_colors[i], i);
this.make_path && this.make_path(d, d.color || this.y_colors[i]);
});
if(this.specific_values.length > 0) {
this.show_specific_values();
this.make_y_specifics();
}
this.setup_group();
this.draw_graph();
}
// make HORIZONTAL lines for y values
make_y_axis() {
if(this.y_axis_group.textContent) {
// animate from old to new, both elemnets
} else {
// only new
}
this.y_axis_group.textContent = '';
let width, text_end_at = -9, label_class = '', start_at = 0;
if(this.y_axis_mode === 'span') { // long spanning lines
width = this.width + 6;
@ -429,7 +423,38 @@ class AxisGraph extends FrappeChart {
});
}
make_units(y_values, color, dataset_index) {
draw_graph() {
let data = [];
this.y.map((d, i) => {
// Anim: Don't draw initial values, store them and update later
d.y_tops = d.values.map(val => this.height); // no value
data.push({values: d.values});
d.svg_units = [];
this.make_new_units(d.y_tops, d.color || this.colors[i], i);
this.make_path && this.make_path(d, d.color || this.colors[i]);
});
// Data points
// this.calc_all_y_tops();
// this.calc_min_tops();
setTimeout(() => {
this.update_values(data);
}, 500);
}
setup_navigation() {
// Hack: defer nav till initial update_values
setTimeout(() => {
super.setup_navigation();
}, 1000);
}
make_new_units(y_values, color, dataset_index) {
this.y[dataset_index].svg_units = [];
this.svg_units_group.textContent = '';
let d = this.unit_args;
y_values.map((y, i) => {
let data_unit = this.draw[d.type](
@ -439,12 +464,12 @@ class AxisGraph extends FrappeChart {
color,
dataset_index
);
this.svg_units.appendChild(data_unit);
this.svg_units_group.appendChild(data_unit);
this.y[dataset_index].svg_units.push(data_unit);
});
}
show_specific_values() {
make_y_specifics() {
this.specific_values.map(d => {
let line = $$.createSVG('line', {
className: d.line_type === "dashed" ? "dashed": "",
@ -474,21 +499,6 @@ class AxisGraph extends FrappeChart {
});
}
// translates everything with predefined x and y: TODO: make generic
setup_group() {
this.chart_group = $$.createSVG("g", {
className: this.type,
inside: this.svg,
transform: `translate(${this.translate_x}, ${this.translate_y})`
});
let all_components = [this.y_axis_group,
this.x_axis_group,
this.svg_units,
this.specific_y_lines]
all_components.map(c => this.chart_group.appendChild(c));
}
bind_tooltip() {
// should be w.r.t. this.parent, but will have to take care of
// all the elements and padding, margins on top
@ -523,7 +533,7 @@ class AxisGraph extends FrappeChart {
return {
title: set.title,
value: set.formatted ? set.formatted[i] : set.values[i],
color: set.color || this.y_colors[j],
color: set.color || this.colors[j],
}
});
@ -538,7 +548,6 @@ class AxisGraph extends FrappeChart {
update_values(new_y) {
let u = this.unit_args;
let elements = [];
elements = this.update_y_axis(elements);
this.y.map((d, i) => {
let new_d = new_y[i];
@ -576,6 +585,7 @@ class AxisGraph extends FrappeChart {
});
}
// elements = elements.concat(this.update_y_axis());
let new_svg_units, anim_svg;
[new_svg_units, anim_svg] = $$.runSVGAnimation(this.svg, elements);
@ -589,15 +599,19 @@ class AxisGraph extends FrappeChart {
}, 250);
}
// TODO:
update_y_axis(elements) {
// animate up or down
update_y_axis() {
let elements = [];
let old_upper_limit = this.upper_limit;
// this.setup_y();
this.setup_y();
console.log("upper limits", old_upper_limit, this.upper_limit);
if(this.old_upper_limit !== this.upper_limit){
//
// resetup y_axis
this.make_y_axis();
}
this.y.map((d, i) => {
this.make_new_units(d.y_tops, d.color || this.colors[i], i);
this.make_path && this.make_path(d, d.color || this.colors[i]);
});
return elements;
}
@ -638,6 +652,27 @@ class AxisGraph extends FrappeChart {
this.x_offset = 0;
}
setup_metrics() {
// Metrics: upper limit, no. of parts, multiplier
let values = this.get_all_y_values();
[this.upper_limit, this.parts] = this.get_upper_limit_and_parts(values);
this.multiplier = this.height / this.upper_limit;
}
get_all_y_values() {
let all_values = [];
this.y.map(d => {
all_values = all_values.concat(d.values);
});
return all_values.concat(this.specific_values.map(d => d.value));
}
calc_all_y_tops() {
this.y.map(d => {
d.y_tops = d.values.map( val => chart_utils.float_2(this.height - val * this.multiplier));
});
}
calc_min_tops() {
this.y_min_tops = new Array(this.x_axis_values.length).fill(9999);
this.y.map(d => {
@ -680,7 +715,7 @@ class BarGraph extends AxisGraph {
this.overlay = unit.cloneNode();
this.overlay.style.fill = '#000000';
this.overlay.style.opacity = '0.4';
this.chart_group.appendChild(this.overlay);
this.draw_area.appendChild(this.overlay);
}
bind_overlay() {
@ -746,7 +781,7 @@ class LineGraph extends AxisGraph {
d: path_str
});
this.svg_units.prepend(d.path);
this.svg_units_group.prepend(d.path);
}
}
@ -775,7 +810,7 @@ class PercentageGraph extends FrappeChart {
this.setup();
}
make_graph_area() {
make_chart_area() {
this.chart_wrapper.addClass('graph-focus-margin').attr({
style: `margin-top: 45px;`
});