Merge pull request #700 from finos/limit-charts

Limit charts

docs/static/css/material.dark.css

@@ -59,6 +59,7 @@ perspective-viewer {
   --column_type--padding: 0px 0px 0px 0px;
   --column_type--width: 25px;
   --column-selector--font-family: "Material Icons";
+  --close_button--before: "close";
   --active-column-selector--height: 45px;
   --column_selector--width: 31px;
   --column_selector--font-size: 16px;

packages/perspective-viewer-d3fc/src/js/charts/area.js

@@ -86,7 +86,8 @@ function areaChart(container, settings) {
 areaChart.plugin = {
     type: "d3_y_area",
     name: "Y Area Chart",
-    max_size: 25000
+    max_cells: 4000,
+    max_columns: 50
 };
 
 export default areaChart;

packages/perspective-viewer-d3fc/src/js/charts/bar.js

@@ -67,7 +67,8 @@ function barChart(container, settings) {
 barChart.plugin = {
     type: "d3_x_bar",
     name: "X Bar Chart",
-    max_size: 25000
+    max_cells: 1000,
+    max_columns: 50
 };
 
 export default barChart;

packages/perspective-viewer-d3fc/src/js/charts/candlestick.js

@@ -13,7 +13,8 @@ const candlestick = ohlcCandle(seriesCanvasCandlestick);
 candlestick.plugin = {
     type: "d3_candlestick",
     name: "Candlestick Chart",
-    max_size: 25000,
+    max_cells: 4000,
+    max_columns: 50,
     initial: {
         type: "number",
         count: 4,

packages/perspective-viewer-d3fc/src/js/charts/column.js

@@ -87,7 +87,8 @@ function columnChart(container, settings) {
 columnChart.plugin = {
     type: "d3_y_bar",
     name: "Y Bar Chart",
-    max_size: 25000
+    max_cells: 1000,
+    max_columns: 50
 };
 
 export default columnChart;

packages/perspective-viewer-d3fc/src/js/charts/heatmap.js

@@ -61,7 +61,8 @@ function heatmapChart(container, settings) {
 heatmapChart.plugin = {
     type: "d3_heatmap",
     name: "Heatmap",
-    max_size: 25000
+    max_cells: 1000,
+    max_columns: 50
 };
 
 export default heatmapChart;

packages/perspective-viewer-d3fc/src/js/charts/line.js

@@ -95,7 +95,8 @@ function lineChart(container, settings) {
 lineChart.plugin = {
     type: "d3_y_line",
     name: "Y Line Chart",
-    max_size: 25000
+    max_cells: 4000,
+    max_columns: 50
 };
 
 export default lineChart;

packages/perspective-viewer-d3fc/src/js/charts/ohlc.js

@@ -13,7 +13,8 @@ const ohlc = ohlcCandle(seriesCanvasOhlc);
 ohlc.plugin = {
     type: "d3_ohlc",
     name: "OHLC Chart",
-    max_size: 25000,
+    max_cells: 3500,
+    max_columns: 50,
     initial: {
         type: "number",
         count: 4,

packages/perspective-viewer-d3fc/src/js/charts/sunburst.js

@@ -67,10 +67,12 @@ function sunburst(container, settings) {
             tooltip().settings(settings)(sunburstElement.selectAll("g.segment"));
         });
 }
+
 sunburst.plugin = {
     type: "d3_sunburst",
     name: "Sunburst",
-    max_size: 25000,
+    max_cells: 7500,
+    max_columns: 50,
     initial: {
         type: "number",
         count: 2,

packages/perspective-viewer-d3fc/src/js/charts/treemap.js

@@ -62,7 +62,8 @@ function treemap(container, settings) {
 treemap.plugin = {
     type: "d3_treemap",
     name: "Treemap",
-    max_size: 25000,
+    max_cells: 5000,
+    max_columns: 50,
     initial: {
         type: "number",
         count: 2

packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js

@@ -95,7 +95,8 @@ function xyScatter(container, settings) {
 xyScatter.plugin = {
     type: "d3_xy_scatter",
     name: "X/Y Scatter Chart",
-    max_size: 25000,
+    max_cells: 50000,
+    max_columns: 50,
     initial: {
         type: "number",
         count: 2,

packages/perspective-viewer-d3fc/src/js/charts/y-scatter.js

@@ -94,7 +94,8 @@ function yScatter(container, settings) {
 yScatter.plugin = {
     type: "d3_y_scatter",
     name: "Y Scatter Chart",
-    max_size: 25000
+    max_cells: 4000,
+    max_columns: 50
 };
 
 export default yScatter;

packages/perspective-viewer-d3fc/src/js/plugin/plugin.js

@@ -39,22 +39,36 @@ export function register(...plugins) {
 }
 
 function drawChart(chart) {
-    return async function(el, view, task) {
-        const [tschema, schema, json, config] = await Promise.all([this._table.schema(false, false), view.schema(false), view.to_json(), view.get_config()]);
+    return async function(el, view, task, end_col, end_row) {
+        let jsonp;
+
+        if (end_col && end_row) {
+            jsonp = view.to_json({end_row, end_col, leaves_only: true});
+        } else if (end_col) {
+            jsonp = view.to_json({end_col, leaves_only: true});
+        } else if (end_row) {
+            jsonp = view.to_json({end_row, leaves_only: true});
+        } else {
+            jsonp = view.to_json({leaves_only: true});
+        }
+
+        let [tschema, schema, json, config] = await Promise.all([this._table.schema(false, false), view.schema(false), jsonp, view.get_config()]);
+
         if (task.cancelled) {
             return;
         }
-        const {columns, row_pivots, column_pivots, filter} = config;
 
+        const {columns, row_pivots, column_pivots, filter} = config;
         const filtered = row_pivots.length > 0 ? json.filter(col => col.__ROW_PATH__ && col.__ROW_PATH__.length == row_pivots.length) : json;
         const dataMap = (col, i) => (!row_pivots.length ? {...col, __ROW_PATH__: [i]} : col);
+        const mapped = filtered.map(dataMap);
 
         let settings = {
             crossValues: row_pivots.map(r => ({name: r, type: tschema[r]})),
             mainValues: columns.map(a => ({name: a, type: schema[a]})),
             splitValues: column_pivots.map(r => ({name: r, type: tschema[r]})),
             filter,
-            data: filtered.map(dataMap)
+            data: mapped
         };
 
         createOrUpdateChart.call(this, el, chart, settings);

packages/perspective-viewer-d3fc/test/results/results.json

@@ -104,8 +104,8 @@
     "heatmap.html/sorts by an alpha column.": "0baee7f2e20ce704d75d4fc59cc0a1b0",
     "heatmap.html/displays visible columns.": "382f28ea5e7e7f5af24ab6688884ac2b",
     "candlestick.html/filter to date range.": "5edaf5770c832422360b1ca8ddde01e8",
-    "candlestick.html/filter by a single instrument.": "529c797dcea96bbc4b07eb5991ea19d4",
-    "ohlc.html/filter by a single instrument.": "3dc5ff1e28b2310f7c17cb7cffd25f5d",
+    "candlestick.html/filter by a single instrument.": "f988ca6494d7a36bada09928cd1a544e",
+    "ohlc.html/filter by a single instrument.": "0110fac1f2befac1b97a9d33f0022acf",
     "ohlc.html/filter to date range.": "7252edbb00597bed894c89cc7b8301e7",
     "sunburst.html/shows a grid without any settings applied.": "e61a53b560304cfbe3a6464218910cb0",
     "sunburst.html/pivots by a row.": "099b036c83a9e2b50d1c59507f06ddc4",
@@ -120,5 +120,5 @@
     "sunburst.html/highlights invalid filter.": "e48566c24b1655a202d1d227424f71c5",
     "sunburst.html/sorts by an alpha column.": "dca6a09d9b0c4b4a3fd6cdb91fa1eb1a",
     "sunburst.html/displays visible columns.": "92769650f8ccaf823d070f3bd12aa73b",
-    "__GIT_COMMIT__": "e516798564eb956c7eae5cb02f81610c08071d6f"
+    "__GIT_COMMIT__": "0a60a1ac38467647c4a424ad0827605f680334e7"
 }

packages/perspective-viewer-highcharts/src/js/highcharts/draw.js

@@ -38,7 +38,7 @@ function get_or_create_element(div) {
 }
 
 export const draw = (mode, set_config, restyle) =>
-    async function(el, view, task) {
+    async function(el, view, task, end_col, end_row) {
         if (set_config) {
             this._config = await view.get_config();
             if (task.cancelled) {
@@ -72,7 +72,12 @@ export const draw = (mode, set_config, restyle) =>
 
         try {
             if (mode === "scatter") {
-                const cols = await view.to_columns();
+                let cols;
+                if (end_col || end_row) {
+                    cols = await view.to_columns({end_col, end_row, leaves_only: true});
+                } else {
+                    cols = await view.to_columns();
+                }
                 const config = (configs[0] = default_config.call(this, columns, mode));
                 const [series, xtop, colorRange, ytop] = make_xy_column_data(cols, schema, columns, row_pivots, col_pivots);
 
@@ -95,7 +100,12 @@ export const draw = (mode, set_config, restyle) =>
                 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 js;
+                if (end_col || end_row) {
+                    js = await view.to_json({end_col, end_row, leaves_only: false});
+                } else {
+                    js = await view.to_json();
+                }
                 let config = (configs[0] = default_config.call(this, columns, mode));
                 let [series, top, ytop, colorRange] = make_xyz_data(js, row_pivots, ytree_type);
                 config.series = [
@@ -113,7 +123,12 @@ export const draw = (mode, set_config, restyle) =>
                 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 js;
+                if (end_col || end_row) {
+                    js = await view.to_json({end_col, end_row, leaves_only: false});
+                } else {
+                    js = await view.to_json();
+                }
                 let [charts, , colorRange] = make_tree_data(js, row_pivots, columns, mode === "treemap");
                 for (let series of charts) {
                     let config = default_config.call(this, columns, mode);
@@ -133,10 +148,20 @@ export const draw = (mode, set_config, restyle) =>
                 let config = (configs[0] = default_config.call(this, columns, mode));
 
                 if (col_pivots.length === 0) {
-                    const cols = await view.to_columns();
+                    let cols;
+                    if (end_col || end_row) {
+                        cols = await view.to_columns({end_col, end_row, leaves_only: true});
+                    } else {
+                        cols = await view.to_columns();
+                    }
                     s = await make_xy_column_data(cols, schema, columns, row_pivots, col_pivots);
                 } else {
-                    js = await view.to_json();
+                    let js;
+                    if (end_col || end_row) {
+                        js = await view.to_json({end_col, end_row, leaves_only: false});
+                    } else {
+                        js = await view.to_json();
+                    }
                     s = await make_xy_data(js, schema, columns, row_pivots, col_pivots);
                 }
 
@@ -157,7 +182,13 @@ export const draw = (mode, set_config, restyle) =>
                 set_both_axis(config, "yAxis", yaxis_name, yaxis_type, yaxis_type, ytop);
             } else {
                 let config = (configs[0] = default_config.call(this, columns, mode));
-                let cols = await view.to_columns();
+                let cols;
+                if (end_col || end_row) {
+                    cols = await view.to_columns({end_col, end_row, leaves_only: false});
+                } else {
+                    cols = await view.to_columns();
+                }
+
                 let [series, top] = make_y_data(cols, row_pivots);
                 config.series = series;
                 config.colors = series.length <= 10 ? COLORS_10 : COLORS_20;
@@ -207,9 +238,18 @@ class HighchartsElement extends HTMLElement {
     render(mode, configs, callee) {
         if (this._charts.length > 0 && this._charts.length === configs.length) {
             let idx = 0;
-            for (let chart of this._charts) {
+            for (let cidx = 0; cidx < this._charts.length; cidx++) {
+                const chart = this._charts[cidx];
                 let config = configs[idx++];
-                if (mode === "scatter") {
+                if (config.boost) {
+                    let target = chart.renderTo;
+                    try {
+                        chart.destroy();
+                    } catch (e) {
+                        console.warn("Scatter plot destroy() call failed - this is probably leaking memory");
+                    }
+                    this._charts[cidx] = Highcharts.chart(target, config);
+                } else if (mode === "scatter") {
                     let conf = {
                         series: config.series,
                         plotOptions: {}
@@ -222,7 +262,7 @@ class HighchartsElement extends HTMLElement {
                 }
             }
         } else {
-            this.remove();
+            this.delete();
             for (let config of configs) {
                 let chart = document.createElement("div");
                 chart.className = "chart";