Added Area and Y-Scatter series types to the multi=chart

finos · andy-lee-eng · May 17, 2019 · May 17, 2019 · May 17, 2019 · May 17, 2019
commit c53507e4ccbe0416ddd0ce8da324742506c358ab
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/area.js b/packages/perspective-viewer-d3fc/src/js/charts/area.js
@@ -9,7 +9,7 @@
 import * as fc from "d3fc";
 import {axisFactory} from "../axis/axisFactory";
 import {chartSvgFactory} from "../axis/chartFactory";
-import {axisSplitter} from "../axis/axisSplitter";
+import {axisSplitter, dataSplitFunction} from "../axis/axisSplitter";
 import {AXIS_TYPES} from "../axis/axisType";
 import {areaSeries} from "../series/areaSeries";
 import {seriesColors} from "../series/seriesColors";
@@ -23,15 +23,13 @@ import zoomableChart from "../zoom/zoomableChart";
 import nearbyTip from "../tooltip/nearbyTip";
 
 function areaChart(container, settings) {
-    const data = splitAndBaseData(settings, filterData(settings));
-
     const color = seriesColors(settings);
+    const {data, series, splitFn} = getDataAndSeries(settings, color);
+
     const legend = colorLegend()
         .settings(settings)
         .scale(color);
 
-    const series = fc.seriesSvgRepeat().series(areaSeries(settings, color).orient("vertical"));
-
     const xAxis = axisFactory(settings)
         .excludeType(AXIS_TYPES.linear)
         .settingName("crossValues")
@@ -45,7 +43,7 @@ function areaChart(container, settings) {
         .paddingStrategy(hardLimitZeroPadding());
 
     // Check whether we've split some values into a second y-axis
-    const splitter = axisSplitter(settings, data).color(color);
+    const splitter = axisSplitter(settings, data, splitFn).color(color);
 
     const yAxis1 = yAxisFactory(splitter.data());
 
@@ -90,3 +88,14 @@ areaChart.plugin = {
 };
 
 export default areaChart;
+
+const getData = settings => splitAndBaseData(settings, filterData(settings));
+const getSeries = (settings, color) => fc.seriesSvgRepeat().series(areaSeries(settings, color).orient("vertical"));
+
+export const getDataAndSeries = (settings, color) => {
+    return {
+        data: getData(settings),
+        series: getSeries(settings, color),
+        splitFn: dataSplitFunction
+    };
+};
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/column.js b/packages/perspective-viewer-d3fc/src/js/charts/column.js
@@ -105,7 +105,7 @@ const getSplitFn = (settings, options) => {
     return grouped ? multiGroupBlankFunction : groupBlankFunction;
 };
 
-export const getDataAndSeries = (settings, color, options = {mixCharts: false}) => {
+export const getDataAndSeries = (settings, color, symbols, options = {mixCharts: false}) => {
     const data = getData(settings);
     return {
         data,

diff --git a/packages/perspective-viewer-d3fc/src/js/charts/multi.js b/packages/perspective-viewer-d3fc/src/js/charts/multi.js
@@ -14,20 +14,25 @@ import domainMatchOrigins from "../axis/domainMatchOrigins";
 import {seriesColors} from "../series/seriesColors";
 import {colorLegend} from "../legend/legend";
 import withGridLines from "../gridlines/gridlines";
+import {symbolType} from "../series/categoryPointSeries";
 
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
 import nearbyTip from "../tooltip/nearbyTip";
 
 import {getDataAndSeries as getLineDataAndSeries} from "./line";
 import {getDataAndSeries as getColumnDataAndSeries} from "./column";
+import {getDataAndSeries as getAreaDataAndSeries} from "./area";
+import {getDataAndSeries as getYScatterDataAndSeries} from "./y-scatter";
 
 import seriesPicker from "../picker/series-picker";
 import {getChartElement} from "../plugin/root";
 
 const seriesFunctions = {
     line: getLineDataAndSeries,
-    column: getColumnDataAndSeries
+    column: getColumnDataAndSeries,
+    area: getAreaDataAndSeries,
+    yscatter: getYScatterDataAndSeries
 };
 
 function multiChart(container, settings) {
@@ -38,7 +43,8 @@ function multiChart(container, settings) {
     const mixCharts = multiTypes.primary != multiTypes.alternate;
 
     const color = seriesColors(settings);
-    const {data, series, splitFn, xScaleFn} = primarySeriesFn(settings, color, {mixCharts});
+    const symbols = symbolType(settings);
+    const {data, series, splitFn, xScaleFn} = primarySeriesFn(settings, color, symbols, {mixCharts});
 
     const legend = colorLegend()
         .settings(settings)
@@ -97,7 +103,7 @@ function multiChart(container, settings) {
         .data(data);
 
     if (splitter.haveSplit()) {
-        const alt = altSeriesFn(settings, color, {mixCharts});
+        const alt = altSeriesFn(settings, color, symbols, {mixCharts});
         const altData = alt.splitFn(alt.data, splitter.isOnAltAxis);
         splitter.altData(altData);
 

diff --git a/packages/perspective-viewer-d3fc/src/js/charts/y-scatter.js b/packages/perspective-viewer-d3fc/src/js/charts/y-scatter.js
@@ -10,7 +10,7 @@ import * as fc from "d3fc";
 import {axisFactory} from "../axis/axisFactory";
 import {AXIS_TYPES} from "../axis/axisType";
 import {chartSvgFactory} from "../axis/chartFactory";
-import {axisSplitter} from "../axis/axisSplitter";
+import {axisSplitter, dataSplitFunction} from "../axis/axisSplitter";
 import {seriesColors} from "../series/seriesColors";
 import {categoryPointSeries, symbolType} from "../series/categoryPointSeries";
 import {groupData} from "../data/groupData";
@@ -22,20 +22,15 @@ import zoomableChart from "../zoom/zoomableChart";
 import nearbyTip from "../tooltip/nearbyTip";
 
 function yScatter(container, settings) {
-    const data = groupData(settings, filterData(settings));
-    const symbols = symbolType(settings);
     const color = seriesColors(settings);
+    const symbols = symbolType(settings);
+    const {data, series, splitFn} = getDataAndSeries(settings, color, symbols);
 
     const legend = symbolLegend()
         .settings(settings)
         .scale(symbols)
         .color(color);
 
-    const series = fc
-        .seriesSvgMulti()
-        .mapping((data, index) => data[index])
-        .series(data.map(series => categoryPointSeries(settings, series.key, color, symbols)));
-
     const paddingStrategy = hardLimitZeroPadding()
         .pad([0.05, 0.05])
         .padUnit("percent");
@@ -51,7 +46,7 @@ function yScatter(container, settings) {
         .paddingStrategy(paddingStrategy);
 
     // Check whether we've split some values into a second y-axis
-    const splitter = axisSplitter(settings, data).color(color);
+    const splitter = axisSplitter(settings, data, splitFn).color(color);
 
     const yAxis1 = yAxisFactory(splitter.data());
 
@@ -98,3 +93,19 @@ yScatter.plugin = {
 };
 
 export default yScatter;
+
+const getData = settings => groupData(settings, filterData(settings));
+const getSeries = (settings, data, color, symbols) =>
+    fc
+        .seriesSvgMulti()
+        .mapping((data, index) => data[index])
+        .series(data.map(series => categoryPointSeries(settings, series.key, color, symbols)));
+
+export const getDataAndSeries = (settings, color, symbols) => {
+    const data = getData(settings);
+    return {
+        data,
+        series: getSeries(settings, data, color, symbols),
+        splitFn: dataSplitFunction
+    };
+};
diff --git a/packages/perspective-viewer-d3fc/src/js/picker/area-chart-svg.js b/packages/perspective-viewer-d3fc/src/js/picker/area-chart-svg.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke-opacity="0" stroke-width="3">
+  <path d="M2,28L2,25L5,8L9,18L15,15L20,22,L25,5,L25,28"/>
+</svg>`;
diff --git a/packages/perspective-viewer-d3fc/src/js/picker/series-picker.js b/packages/perspective-viewer-d3fc/src/js/picker/series-picker.js
@@ -3,10 +3,14 @@ import picker from "./picker";
 
 import lineSvg from "./line-chart-svg";
 import columnSvg from "./column-chart-svg";
+import areaSvg from "./area-chart-svg";
+import yscatterSvg from "./yscatter-chart-svg";
 
 const typeSvgs = {
     line: lineSvg,
-    column: columnSvg
+    column: columnSvg,
+    area: areaSvg,
+    yscatter: yscatterSvg
 };
 
 export default () => {

diff --git a/packages/perspective-viewer-d3fc/src/js/picker/yscatter-chart-svg.js b/packages/perspective-viewer-d3fc/src/js/picker/yscatter-chart-svg.js
@@ -0,0 +1,6 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill-opacity="0.5" stroke-width="1">
+  <circle cx="5" cy="8" r="4" />  
+  <circle cx="12" cy="15" r="4" />  
+  <circle cx="20" cy="22" r="4" />  
+  <circle cx="25" cy="5" r="4" />  
+</svg>`;