From 505a2eef3e3b942bdf96fcaa82a42486738d13cc Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Sun, 1 Oct 2017 21:45:17 +0530 Subject: [PATCH] animate on initial values --- src/charts.css | 4 +- src/charts.js | 175 +++++++++++++++++++++++++++++-------------------- 2 files changed, 107 insertions(+), 72 deletions(-) diff --git a/src/charts.css b/src/charts.css index e0f62b3..a05d429 100644 --- a/src/charts.css +++ b/src/charts.css @@ -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; diff --git a/src/charts.js b/src/charts.js index bdbd3a6..cfdc9b6 100644 --- a/src/charts.js +++ b/src/charts.js @@ -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;` });