add series, init; update trends chart
This commit is contained in:
pratu16x7
parent
371c227029
commit
00c8e1b5df
2
dist/frappe-charts.min.js
vendored
2
dist/frappe-charts.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/frappe-charts.min.js.map
vendored
2
dist/frappe-charts.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -110,28 +110,68 @@ Array.prototype.slice.call(
|
||||
// Trends Chart
|
||||
// ================================================================================
|
||||
let trends_data = {
|
||||
"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"],
|
||||
"labels": [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976,
|
||||
1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986,
|
||||
1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996,
|
||||
1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006,
|
||||
2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016] ,
|
||||
"datasets": [
|
||||
{
|
||||
"color": "blue",
|
||||
"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]
|
||||
"values": [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4,
|
||||
39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8,
|
||||
33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6,
|
||||
28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7,
|
||||
12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let plot_chart = new Chart({
|
||||
let plot_chart_args = {
|
||||
parent: "#chart-trends",
|
||||
title: "Mean Total Sunspot Count - Yearly",
|
||||
data: trends_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
is_series: 1,
|
||||
show_dots: 0,
|
||||
// region_fill: 1,
|
||||
heatline: 1,
|
||||
x_axis_mode: 'tick',
|
||||
y_axis_mode: 'tick'
|
||||
y_axis_mode: 'span'
|
||||
};
|
||||
|
||||
new Chart(plot_chart_args);
|
||||
|
||||
Array.prototype.slice.call(
|
||||
document.querySelectorAll('.chart-plot-buttons button')
|
||||
).map(el => {
|
||||
el.addEventListener('click', (e) => {
|
||||
let btn = e.target;
|
||||
let type = btn.getAttribute('data-type');
|
||||
let conf = [];
|
||||
|
||||
if(type === 'line') {
|
||||
conf = [0, 0, 0];
|
||||
} else if(type === 'region') {
|
||||
conf = [0, 0, 1];
|
||||
} else {
|
||||
conf = [0, 1, 0];
|
||||
}
|
||||
|
||||
plot_chart_args.show_dots = conf[0];
|
||||
plot_chart_args.heatline = conf[1];
|
||||
plot_chart_args.region_fill = conf[2];
|
||||
|
||||
plot_chart_args.init = false;
|
||||
|
||||
new Chart(plot_chart_args);
|
||||
|
||||
Array.prototype.slice.call(
|
||||
btn.parentNode.querySelectorAll('button')).map(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
btn.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Update values chart
|
||||
@ -215,6 +255,7 @@ let update_chart = new Chart({
|
||||
data: update_data,
|
||||
type: 'line',
|
||||
height: 250,
|
||||
is_series: 1,
|
||||
region_fill: 1
|
||||
});
|
||||
|
||||
|
||||
@ -118,13 +118,14 @@
|
||||
<pre><code class="hljs javascript"> ...
|
||||
x_axis_mode: 'tick', // for short label ticks
|
||||
// or 'span' for long spanning vertical axis lines
|
||||
y_axis_mode: 'tick',
|
||||
y_axis_mode: 'span', // for long horizontal lines, or 'tick'
|
||||
is_series: 1, // to allow for skipping of X values
|
||||
...</code></pre>
|
||||
<div id="chart-trends" class="border"></div>
|
||||
<div class="btn-group chart-plot-buttons mt-1 mx-auto" role="group">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-update="line">Line</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-update="heatline">HeatLine</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-update="region">Region</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-type="line">Line</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary active" data-type="heatline">HeatLine</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-type="region">Region</button>
|
||||
</div>
|
||||
<pre><code class="hljs javascript margin-vertical-px"> ...
|
||||
type: 'line', // Line chart specific properties:
|
||||
|
||||
@ -9,6 +9,8 @@ export default class AxisChart extends BaseChart {
|
||||
this.x = this.data.labels;
|
||||
this.y = this.data.datasets;
|
||||
|
||||
this.is_series = args.is_series;
|
||||
|
||||
this.get_y_label = this.format_lambdas.y_label;
|
||||
this.get_y_tooltip = this.format_lambdas.y_tooltip;
|
||||
this.get_x_tooltip = this.format_lambdas.x_tooltip;
|
||||
@ -130,8 +132,26 @@ export default class AxisChart extends BaseChart {
|
||||
return;
|
||||
}
|
||||
|
||||
let allowed_space = this.avg_unit_width * 1.5;
|
||||
let allowed_letters = allowed_space / 8;
|
||||
|
||||
this.x_axis_group.textContent = '';
|
||||
this.x.map((point, i) => {
|
||||
let space_taken = this.get_strwidth(point);
|
||||
if(space_taken > allowed_space) {
|
||||
if(this.is_series) {
|
||||
// Skip some axis lines if X axis is a series
|
||||
let skips = 1;
|
||||
while((space_taken/skips)*2 > allowed_space) {
|
||||
skips++;
|
||||
}
|
||||
if(i % skips !== 0) {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
point = point.slice(0, allowed_letters-3) + " ...";
|
||||
}
|
||||
}
|
||||
this.x_axis_group.appendChild(
|
||||
this.make_x_line(
|
||||
height,
|
||||
@ -218,10 +238,14 @@ export default class AxisChart extends BaseChart {
|
||||
}
|
||||
|
||||
setup_navigation(init) {
|
||||
// Hack: defer nav till initial update_values
|
||||
setTimeout(() => {
|
||||
if(init) {
|
||||
// Hack: defer nav till initial update_values
|
||||
setTimeout(() => {
|
||||
super.setup_navigation(init);
|
||||
}, 500);
|
||||
} else {
|
||||
super.setup_navigation(init);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
make_new_units(d, i) {
|
||||
@ -705,13 +729,6 @@ export default class AxisChart extends BaseChart {
|
||||
}
|
||||
|
||||
make_x_line(height, text_start_at, point, label_class, axis_line_class, x_pos) {
|
||||
let allowed_space = this.avg_unit_width * 1.5;
|
||||
|
||||
if(this.get_strwidth(point) > allowed_space) {
|
||||
let allowed_letters = allowed_space / 8;
|
||||
point = point.slice(0, allowed_letters-3) + " ...";
|
||||
}
|
||||
|
||||
let line = $.createSVG('line', {
|
||||
x1: 0,
|
||||
x2: 0,
|
||||
@ -858,6 +875,12 @@ export default class AxisChart extends BaseChart {
|
||||
if(no_of_parts > 5) {
|
||||
no_of_parts /= 2;
|
||||
part_size *= 2;
|
||||
|
||||
pos_no_of_parts /=2;
|
||||
}
|
||||
|
||||
if (max_val < (pos_no_of_parts - 1) * part_size) {
|
||||
no_of_parts--;
|
||||
}
|
||||
|
||||
return this.get_intervals(
|
||||
|
||||
@ -82,7 +82,11 @@ export default class BaseChart {
|
||||
|
||||
setup() {
|
||||
this.bind_window_events();
|
||||
this.refresh(true);
|
||||
if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
|
||||
this.refresh();
|
||||
} else {
|
||||
this.refresh(true);
|
||||
}
|
||||
}
|
||||
|
||||
bind_window_events() {
|
||||
@ -252,7 +256,7 @@ export default class BaseChart {
|
||||
|
||||
// Helpers
|
||||
get_strwidth(string) {
|
||||
return string.length * 8;
|
||||
return (string+"").length * 8;
|
||||
}
|
||||
|
||||
// Objects
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user