jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

update aggr chart and heatmap

Browse Source
This commit is contained in:
pratu16x7 2017-10-30 09:01:32 +05:30
parent ae007f181b
commit 4cfe821b03
6 changed files with 104 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

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

@ -176,11 +176,10 @@ Array.prototype.slice.call(
// Update values chart // Update values chart
// ================================================================================ // ================================================================================
let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"]; "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58, let update_data_all_values = Array.from({length: 30}, () => Math.floor(Math.random() * 75 - 15));
12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17];
// We're gonna be shuffling this // We're gonna be shuffling this
let update_data_all_indices = update_data_all_labels.map((d,i) => i); let update_data_all_indices = update_data_all_labels.map((d,i) => i);
@ -215,6 +214,30 @@ let update_chart = new Chart({
region_fill: 1 region_fill: 1
}); });
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)}],
update_data_all_labels.slice(0, 10)
);
});
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();
});
// Event chart // Event chart
// ================================================================================ // ================================================================================
let moon_names = ["Ganymede", "Callisto", "Io", "Europa"]; let moon_names = ["Ganymede", "Callisto", "Io", "Europa"];
@ -250,7 +273,7 @@ let events_data = {
datasets: [ datasets: [
{ {
// "title": "km", // "title": "km",
"color": "light-green", "color": "grey",
"values": distances, "values": distances,
"formatted": distances.map(d => d*1000 + " km") "formatted": distances.map(d => d*1000 + " km")
} }
@ -313,10 +336,10 @@ document.querySelector('[data-aggregation="sums"]').addEventListener("click", (e
document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => { document.querySelector('[data-aggregation="average"]').addEventListener("click", (e) => {
if(e.target.innerHTML === "Show Average") { if(e.target.innerHTML === "Show Average") {
aggr_chart.show_average(); aggr_chart.show_averages();
e.target.innerHTML = "Hide Average"; e.target.innerHTML = "Hide Average";
} else { } else {
aggr_chart.hide_average(); aggr_chart.hide_averages();
e.target.innerHTML = "Show Average"; e.target.innerHTML = "Show Average";
} }
}); });
@ -342,36 +365,30 @@ let heatmap = new Chart({
data: heatmap_data, data: heatmap_data,
type: 'heatmap', type: 'heatmap',
height: 100, height: 100,
// discrete_domains: 1 discrete_domains: 1 // default 0
}); });
// Events document.querySelector('[data-heatmap="discrete"]').addEventListener("click", (e) => {
heatmap = new Chart({
parent: "#chart-heatmap",
data: heatmap_data,
type: 'heatmap',
height: 100,
discrete_domains: 1 // default 0
});
});
document.querySelector('[data-heatmap="continuous"]').addEventListener("click", (e) => {
heatmap = new Chart({
parent: "#chart-heatmap",
data: heatmap_data,
type: 'heatmap',
height: 100
});
});
// Helpers
// ================================================================================ // ================================================================================
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)}],
update_data_all_labels.slice(0, 10)
);
});
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();
});
function shuffle(array) { function shuffle(array) {
// https://stackoverflow.com/a/2450976/6495043 // https://stackoverflow.com/a/2450976/6495043
// Awesomeness: https://bost.ocks.org/mike/shuffle/ // Awesomeness: https://bost.ocks.org/mike/shuffle/

42
docs/index.html
View File

@ -99,14 +99,30 @@
<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> <pre><code class="hljs javascript"> // Update entire datasets
chart.update_values(
[
{values: new_dataset_1_values},
{values: new_dataset_2_values}
],
new_labels
);
// Add a new data point
chart.add_data_point(
[new_value_1, new_value_2],
new_label,
index // defaults to last index
);
// Remove a data point
chart.remove_data_point(index);</code></pre>
<div id="chart-update" class="border"></div> <div id="chart-update" class="border"></div>
<div class="chart-update-buttons 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" data-update="random">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" data-update="add">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" data-update="remove">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>
</div> </div>
</div> </div>
@ -160,7 +176,9 @@
</div> </div>
</div> </div>
</div> </div>
<pre><code class="hljs html margin-vertical-px">&lt;div id="chart"&gt;&lt;/div&gt;</code></pre> <pre><code class="hljs javascript margin-vertical-px"> chart.parent.addEventListener('data-select', (e) => {
update_moon_data(e.index); // e contains index and value of current datapoint
});</code></pre>
</div> </div>
</div> </div>
@ -174,22 +192,30 @@
<button type="button" class="btn btn-sm btn-secondary" data-aggregation="sums">Show Sums</button> <button type="button" class="btn btn-sm btn-secondary" data-aggregation="sums">Show Sums</button>
<button type="button" class="btn btn-sm btn-secondary" data-aggregation="average">Show Averages</button> <button type="button" class="btn btn-sm btn-secondary" data-aggregation="average">Show Averages</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 javascript margin-vertical-px"> chart.show_sums(); // and `hide_sums()`
chart.show_averages(); // and `hide_averages()`</code></pre>
</div> </div>
</div> </div>
<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">
Oh, and an Annual Heatmap And an Annual Heatmap
</h6> </h6>
<div id="chart-heatmap" class="border" <div id="chart-heatmap" class="border"
style="overflow: scroll; text-align: center; padding: 20px;"></div> style="overflow: scroll; text-align: center; padding: 20px;"></div>
<div class="mt-1 mx-auto" role="group"> <div class="mt-1 mx-auto" role="group">
<button type="button" class="btn btn-sm btn-secondary active">Dicrete</button> <button type="button" class="btn btn-sm btn-secondary active" data-heatmap="discrete">Dicrete</button>
<button type="button" class="btn btn-sm btn-secondary">Continuous</button> <button type="button" class="btn btn-sm btn-secondary" data-heatmap="continuous">Continuous</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 javascript margin-vertical-px"> let heatmap = new Chart({
parent: "#heatmap",
data: heatmap_data, // object with date/timestamp-value pairs
type: 'heatmap',
height: 100,
discrete_domains: 1 // default 0
});</code></pre>
</div> </div>
</div> </div>

17
src/scripts/charts/AxisChart.js
View File

@ -209,6 +209,15 @@ export default class AxisChart extends BaseChart {
} }
draw_graph(init=false) { draw_graph(init=false) {
if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) {
this.y.map((d, i) => {
d.svg_units = [];
this.make_path && this.make_path(d, i, this.x_axis_positions, d.y_tops, d.color || this.colors[i]);
this.make_new_units(d, i);
this.calc_y_dependencies();
});
return;
}
if(init) { if(init) {
this.draw_new_graph_and_animate(); this.draw_new_graph_and_animate();
return; return;
@ -322,6 +331,8 @@ export default class AxisChart extends BaseChart {
} }
map_tooltip_x_position_and_show(relX) { map_tooltip_x_position_and_show(relX) {
console.warn(this.y_min_tops);
if(!this.y_min_tops) return;
for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) { for(var i=this.x_axis_positions.length - 1; i >= 0 ; i--) {
let x_val = this.x_axis_positions[i]; let x_val = this.x_axis_positions[i];
// let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1]; // let delta = i === 0 ? this.avg_unit_width : x_val - this.x_axis_positions[i-1];
@ -387,7 +398,7 @@ export default class AxisChart extends BaseChart {
this.update_values(); this.update_values();
} }
show_average() { show_averages() {
this.old_specific_values = this.specific_values.slice(); this.old_specific_values = this.specific_values.slice();
this.y.map((d, i) => { this.y.map((d, i) => {
let sum = 0; let sum = 0;
@ -405,7 +416,7 @@ export default class AxisChart extends BaseChart {
this.update_values(); this.update_values();
} }
hide_average() { hide_averages() {
this.old_specific_values = this.specific_values.slice(); this.old_specific_values = this.specific_values.slice();
let indices_to_remove = []; let indices_to_remove = [];
@ -971,6 +982,8 @@ export default class AxisChart extends BaseChart {
} }
}); });
}); });
// this.chart_wrapper.removeChild(this.tip.container);
// this.make_tooltip();
} }
get_bar_height_and_y_attr(y_top) { get_bar_height_and_y_attr(y_top) {

6
src/scripts/charts/BaseChart.js
View File

@ -82,11 +82,7 @@ export default class BaseChart {
setup() { setup() {
this.bind_window_events(); this.bind_window_events();
if(this.raw_chart_args.hasOwnProperty("init") && !this.raw_chart_args.init) { this.refresh(true);
this.refresh();
} else {
this.refresh(true);
}
} }
bind_window_events() { bind_window_events() {