Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1D charts generated from columnar data #231

Merged
merged 5 commits into from
Sep 27, 2018
Merged

1D charts generated from columnar data #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab72aac
add 1D columnar charting, preserve old APIs
sc1f Sep 6, 2018
31a0c68
add columnar data parser and ChartAxis
sc1f Sep 7, 2018
e6f8b11
add 2D columnar charting
sc1f Sep 13, 2018
08ae7cd
Optimize make_xy_column_data, now consistently achieves 2-6x speedup …
sc1f Sep 19, 2018
ffe31e1
rebase onto latest master, fix prettify issues, fix merge conflicts
sc1f Sep 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 42 additions & 19 deletions packages/perspective-viewer-highcharts/src/js/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import "../less/highcharts.less";

import {COLORS_10, COLORS_20} from "./externals.js";
import {color_axis} from "./color_axis.js";
import {make_tree_data, make_y_data, make_xy_data, make_xyz_data} from "./series.js";
import {make_tree_data, make_y_data, make_xy_data, make_xyz_data, make_xy_column_data} from "./series.js";
import {set_boost, set_category_axis, set_both_axis, default_config, set_tick_size} from "./config.js";

export const draw = mode =>
Expand All @@ -23,7 +23,9 @@ export const draw = mode =>
const aggregates = this._get_view_aggregates();
const hidden = this._get_view_hidden(aggregates);

const [js, schema, tschema] = await Promise.all([view.to_json(), view.schema(), this._table.schema()]);
const [schema, tschema] = await Promise.all([view.schema(), this._table.schema()]);

let js;

if (task.cancelled) {
return;
Expand All @@ -33,17 +35,6 @@ export const draw = mode =>
this._charts = [];
}

if (this.hasAttribute("updating") && this._charts.length > 0) {
for (let chart of this._charts) {
try {
chart.destroy();
} catch (e) {
console.warn("Scatter plot destroy() call failed - this is probably leaking memory");
}
}
this._charts = [];
}

let configs = [],
xaxis_name = aggregates.length > 0 ? aggregates[0].column : undefined,
xaxis_type = schema[xaxis_name],
Expand All @@ -56,8 +47,10 @@ export const draw = mode =>
num_aggregates = aggregates.length - hidden.length;

if (mode === "scatter") {
let config = (configs[0] = default_config.call(this, aggregates, mode, js, col_pivots));
let [series, xtop, colorRange, ytop] = make_xy_data(js, schema, aggregates.map(x => x.column), row_pivots, col_pivots, hidden);
const cols = await view.to_columns();
const [series, xtop, colorRange, ytop] = make_xy_column_data(cols, schema, aggregates.map(x => x.column), row_pivots, col_pivots, hidden);
const config = (configs[0] = default_config.call(this, aggregates, mode));

config.legend.floating = series.length <= 20;
config.legend.enabled = col_pivots.length > 0;
config.series = series;
Expand All @@ -77,6 +70,7 @@ export const draw = mode =>
set_both_axis(config, "yAxis", yaxis_name, yaxis_type, yaxis_type, ytop);
set_tick_size.call(this, config);
} else if (mode === "heatmap") {
js = await view.to_json();
let config = (configs[0] = default_config.call(this, aggregates, mode, js, col_pivots));
let [series, top, ytop, colorRange] = make_xyz_data(js, row_pivots, hidden, ytree_type);
config.series = [
Expand All @@ -94,6 +88,7 @@ export const draw = mode =>
set_category_axis(config, "xAxis", xtree_type, top);
set_category_axis(config, "yAxis", ytree_type, ytop);
} else if (mode === "treemap" || mode === "sunburst") {
js = await view.to_json();
let [charts, , colorRange] = make_tree_data(js, row_pivots, hidden, aggregates, mode === "treemap");
for (let series of charts) {
let config = default_config.call(this, aggregates, mode, js, col_pivots);
Expand All @@ -109,8 +104,21 @@ export const draw = mode =>
configs.push(config);
}
} else if (mode === "line") {
let s;
let config = (configs[0] = default_config.call(this, aggregates, mode, js, col_pivots));
let [series, xtop, , ytop] = make_xy_data(js, schema, aggregates.map(x => x.column), row_pivots, col_pivots, hidden);

if (col_pivots.length === 0) {
const cols = await view.to_columns();
s = await make_xy_column_data(cols, schema, aggregates.map(x => x.column), row_pivots, col_pivots, hidden);
} else {
js = await view.to_json();
s = await make_xy_data(js, schema, aggregates.map(x => x.column), row_pivots, col_pivots, hidden);
}

const series = s[0];
const xtop = s[1];
const ytop = s[3];

const colors = series.length <= 10 ? COLORS_10 : COLORS_20;
config.legend.floating = series.length <= 20;
config.legend.enabled = col_pivots.length > 0;
Expand All @@ -123,8 +131,9 @@ export const draw = mode =>
set_both_axis(config, "xAxis", xaxis_name, xaxis_type, xaxis_type, xtop);
set_both_axis(config, "yAxis", yaxis_name, yaxis_type, yaxis_type, ytop);
} else {
let config = (configs[0] = default_config.call(this, aggregates, mode, js, col_pivots));
let [series, top] = make_y_data(js, row_pivots, hidden);
let config = (configs[0] = default_config.call(this, aggregates, mode));
let cols = await view.to_columns();
let [series, top] = make_y_data(cols, row_pivots, hidden);
config.series = series;
config.colors = series.length <= 10 ? COLORS_10 : COLORS_20;
config.legend.enabled = col_pivots.length > 0 || series.length > 1;
Expand All @@ -147,6 +156,17 @@ export const draw = mode =>
});
}

if (this.hasAttribute("updating") && this._charts.length > 0) {
for (let chart of this._charts) {
try {
chart.destroy();
} catch (e) {
console.warn("Scatter plot destroy() call failed - this is probably leaking memory");
}
}
this._charts = [];
}

if (this._charts.length > 0) {
let idx = 0;
for (let chart of this._charts) {
Expand Down Expand Up @@ -179,7 +199,10 @@ export const draw = mode =>
this._charts.push(() => Highcharts.chart(chart, config));
}

this._charts = this._charts.map(x => x());
for (let i = 0; i < this._charts.length; i++) {
this._charts[i] = this._charts[i]();
}
//this._charts = this._charts.map(x => x());
}

if (!this._charts.every(x => document.contains(x.renderTo))) {
Expand Down
Loading