Kaynağa Gözat

animate on initial values

tags/1.2.0
pratu16x7 7 yıl önce
ebeveyn
işleme
505a2eef3e
2 değiştirilmiş dosya ile 107 ekleme ve 72 silme
  1. +2
    -2
      src/charts.css
  2. +105
    -70
      src/charts.js

+ 2
- 2
src/charts.css Dosyayı Görüntüle

@@ -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;


+ 105
- 70
src/charts.js Dosyayı Görüntüle

@@ -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;`
});


Yükleniyor…
İptal
Kaydet