Removed old SVG X/Y chart and replace with the Canvas one (#88)

* Removed old SVG X/Y chart and replace with the Canvas one * Remove old pointSeries
finos · Mar 12, 2019 · 3b00eec · 3b00eec
1 parent c724cae
commit 3b00eec
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 275 deletions.
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/charts.js b/packages/perspective-viewer-d3fc/src/js/charts/charts.js
@@ -13,9 +13,8 @@ import lineChart from "./line";
 import areaChart from "./area";
 import yScatter from "./y-scatter";
 import xyScatter from "./xy-scatter";
-import xyScatterCanvas from "./xy-scatter-canvas";
 import heatmap from "./heatmap";
 
-const chartClasses = [barChart, columnChart, lineChart, areaChart, yScatter, xyScatter, xyScatterCanvas, heatmap];
+const chartClasses = [barChart, columnChart, lineChart, areaChart, yScatter, xyScatter, heatmap];
 
 export default chartClasses;
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter-canvas.js b/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter-canvas.js
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js b/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js
@@ -1,84 +1,98 @@
-/******************************************************************************
- *
- * Copyright (c) 2017, the Perspective Authors.
- *
- * This file is part of the Perspective library, distributed under the terms of
- * the Apache License 2.0.  The full license can be found in the LICENSE file.
- *
- */
-import * as fc from "d3fc";
-import * as mainAxis from "../axis/mainAxis";
-import {pointSeries, symbolTypeFromGroups} from "../series/pointSeries";
-import {pointData} from "../data/pointData";
-import {seriesColoursFromGroups} from "../series/seriesColours";
-import {seriesLinearRange, seriesColourRange} from "../series/seriesRange";
-import {symbolLegend} from "../legend/legend";
-import {colourRangeLegend} from "../legend/colourRangeLegend";
-import {filterDataByGroup} from "../legend/filter";
-import {withGridLines} from "../gridlines/gridlines";
-import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
-import zoomableChart from "../zoom/zoomableChart";
-
-function xyScatter(container, settings) {
-    const data = pointData(settings, filterDataByGroup(settings));
-    const symbols = symbolTypeFromGroups(settings);
-    const useGroupColours = settings.mainValues.length <= 2;
-    let colour = null;
-    let legend = null;
-
-    if (useGroupColours) {
-        colour = seriesColoursFromGroups(settings);
-
-        legend = symbolLegend()
-            .settings(settings)
-            .scale(symbols)
-            .colour(useGroupColours ? colour : null);
-    } else {
-        colour = seriesColourRange(settings, data, "colorValue");
-        legend = colourRangeLegend().scale(colour);
-    }
-
-    const size = settings.mainValues.length > 3 ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;
-
-    const series = fc
-        .seriesSvgMulti()
-        .mapping((data, index) => data[index])
-        .series(data.map(series => pointSeries(settings, series.key, size, colour, symbols)));
-
-    const domainDefault = () => mainAxis.domain(settings).paddingStrategy(hardLimitZeroPadding().pad([0.1, 0.1]));
-
-    const xScale = mainAxis.scale(settings);
-    const yScale = mainAxis.scale(settings);
-
-    const chart = fc
-        .chartSvgCartesian(xScale, yScale)
-        .xDomain(domainDefault().valueName("x")(data))
-        .xLabel(settings.mainValues[0].name)
-        .yDomain(domainDefault().valueName("y")(data))
-        .yLabel(settings.mainValues[1].name)
-        .yOrient("left")
-        .yNice()
-        .xNice()
-        .plotArea(withGridLines(series));
-
-    const zoomChart = zoomableChart()
-        .chart(chart)
-        .settings(settings)
-        .xScale(xScale)
-        .yScale(yScale);
-
-    // render
-    container.datum(data).call(zoomChart);
-    if (legend) container.call(legend);
-}
-xyScatter.plugin = {
-    type: "d3_xy_scatter",
-    name: "[d3fc] X/Y Scatter",
-    max_size: 25000,
-    initial: {
-        type: "number",
-        count: 2
-    }
-};
-
-export default xyScatter;
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+import * as fc from "d3fc";
+import * as mainAxis from "../axis/mainAxis";
+import {pointSeriesCanvas, symbolTypeFromGroups} from "../series/pointSeriesCanvas";
+import {pointData} from "../data/pointData";
+import {seriesColoursFromGroups} from "../series/seriesColours";
+import {seriesLinearRange, seriesColourRange} from "../series/seriesRange";
+import {symbolLegend} from "../legend/legend";
+import {colourRangeLegend} from "../legend/colourRangeLegend";
+import {filterDataByGroup} from "../legend/filter";
+import {withCanvasGridLines} from "../gridlines/gridlines";
+import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
+import zoomableChart from "../zoom/zoomableChart";
+import nearbyTip from "../tooltip/nearbyTip";
+
+function xyScatter(container, settings) {
+    const data = pointData(settings, filterDataByGroup(settings));
+    const symbols = symbolTypeFromGroups(settings);
+    const useGroupColours = settings.mainValues.length <= 2;
+    let colour = null;
+    let legend = null;
+
+    if (useGroupColours) {
+        colour = seriesColoursFromGroups(settings);
+
+        legend = symbolLegend()
+            .settings(settings)
+            .scale(symbols)
+            .colour(useGroupColours ? colour : null);
+    } else {
+        colour = seriesColourRange(settings, data, "colorValue");
+        legend = colourRangeLegend().scale(colour);
+    }
+
+    const size = settings.mainValues.length > 3 ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;
+
+    const series = fc
+        .seriesCanvasMulti()
+        .mapping((data, index) => data[index])
+        .series(data.map(series => pointSeriesCanvas(settings, series.key, size, colour, symbols)));
+
+    const domainDefault = () => mainAxis.domain(settings).paddingStrategy(hardLimitZeroPadding().pad([0.1, 0.1]));
+
+    const xScale = mainAxis.scale(settings);
+    const yScale = mainAxis.scale(settings);
+
+    const chart = fc
+        .chartCanvasCartesian(xScale, yScale)
+        .xDomain(domainDefault().valueName("x")(data))
+        .xLabel(settings.mainValues[0].name)
+        .yDomain(domainDefault().valueName("y")(data))
+        .yLabel(settings.mainValues[1].name)
+        .yOrient("left")
+        .yNice()
+        .xNice()
+        .plotArea(withCanvasGridLines(series));
+
+    const zoomChart = zoomableChart()
+        .chart(chart)
+        .settings(settings)
+        .xScale(xScale)
+        .yScale(yScale)
+        .canvas(true);
+
+    const toolTip = nearbyTip()
+        .chart(chart)
+        .settings(settings)
+        .canvas(true)
+        .xScale(xScale)
+        .xValueName("x")
+        .yValueName("y")
+        .yScale(yScale)
+        .colour(useGroupColours && colour)
+        .data(data);
+    container.call(toolTip);
+
+    // render
+    container.datum(data).call(zoomChart);
+    if (legend) container.call(legend);
+}
+xyScatter.plugin = {
+    type: "d3_xy_scatter",
+    name: "[d3fc] X/Y Scatter",
+    max_size: 25000,
+    initial: {
+        type: "number",
+        count: 2
+    }
+};
+
+export default xyScatter;
diff --git a/packages/perspective-viewer-d3fc/src/js/series/pointSeries.js b/packages/perspective-viewer-d3fc/src/js/series/pointSeries.js
diff --git a/packages/perspective-viewer-d3fc/src/js/series/pointSeriesCanvas.js b/packages/perspective-viewer-d3fc/src/js/series/pointSeriesCanvas.js
@@ -8,6 +8,8 @@
  */
 import {seriesCanvasPoint} from "d3fc";
 import {withOpacity, withoutOpacity} from "./seriesColours";
+import {groupFromKey} from "./seriesKey";
+import {fromDomain} from "./seriesSymbols";
 
 export function pointSeriesCanvas(settings, seriesKey, size, colour, symbols) {
     let series = seriesCanvasPoint()
@@ -23,8 +25,10 @@ export function pointSeriesCanvas(settings, seriesKey, size, colour, symbols) {
 
     series.decorate((context, d) => {
         if (colour) {
-            context.strokeStyle = withoutOpacity(colour(d.colorValue || seriesKey));
-            context.fillStyle = withOpacity(colour(d.colorValue || seriesKey));
+            const color = colour(d.colorValue !== undefined ? d.colorValue : seriesKey);
+
+            context.strokeStyle = withoutOpacity(color);
+            context.fillStyle = withOpacity(color);
         } else {
             context.strokeStyle = "rgb(31, 119, 180)";
             context.fillStyle = "rgba(31, 119, 180, 0.5)";
@@ -33,3 +37,17 @@ export function pointSeriesCanvas(settings, seriesKey, size, colour, symbols) {
 
     return series;
 }
+
+export function symbolTypeFromGroups(settings) {
+    const col = settings.data && settings.data.length > 0 ? settings.data[0] : {};
+    const domain = [];
+    Object.keys(col).forEach(key => {
+        if (key !== "__ROW_PATH__") {
+            const group = groupFromKey(key);
+            if (!domain.includes(group)) {
+                domain.push(group);
+            }
+        }
+    });
+    return fromDomain(domain);
+}
diff --git a/packages/perspective-viewer-d3fc/src/less/chart.less b/packages/perspective-viewer-d3fc/src/less/chart.less
@@ -30,7 +30,7 @@
         & d3fc-canvas.plot-area {
             display: none;
         }
-        &.d3_xy_scatter_canvas {
+        &.d3_xy_scatter {
             & d3fc-canvas.plot-area {
                 display: block;
             }