Added "Multi Chart" that allows mix-and-match of different series types

packages/perspective-viewer-d3fc/src/js/axis/axisSplitter.js

@@ -9,43 +9,52 @@
 import {splitterLabels} from "./splitterLabels";
 
 export const axisSplitter = (settings, sourceData, splitFn = dataSplitFunction) => {
+    // splitMainValues is an array of main-value names to put into the alt-axis
+    const splitMainValues = settings.splitMainValues || [];
+
     let color;
     let data;
     let altData;
+    let decorate = () => {};
 
-    // splitMainValues is an array of main-value names to put into the alt-axis
-    const splitMainValues = settings.splitMainValues || [];
-    const altValue = name => {
+    // Renderer to show the special controls for moving between axes
+    const splitter = selection => {
+        if (settings["mainValues"].length !== 1) {
+            const labelsInfo = settings["mainValues"].map((v, i) => ({
+                index: i,
+                name: v.name
+            }));
+            const mainLabels = labelsInfo.filter(v => !splitter.isOnAltAxis(v.name));
+            const altLabels = labelsInfo.filter(v => splitter.isOnAltAxis(v.name));
+
+            const labeller = () => splitterLabels(settings).color(color);
+
+            selection.select(".y-label-container>.y-label").call(labeller().labels(mainLabels));
+            selection.select(".y2-label-container>.y-label").call(
+                labeller()
+                    .labels(altLabels)
+                    .alt(true)
+            );
+        }
+
+        decorate(selection.select(".y-label-container"), 0);
+        decorate(selection.select(".y2-label-container"), 1);
+    };
+
+    splitter.isOnAltAxis = name => {
+        // Check whether this "aggregate" name should be on the alternate y-axis
         const split = name.split("|");
         return splitMainValues.includes(split[split.length - 1]);
     };
 
-    const haveSplit = settings["mainValues"].some(m => altValue(m.name));
-
-    // Split the data into main and alt displays
-    data = haveSplit ? splitFn(sourceData, key => !altValue(key)) : sourceData;
-    altData = haveSplit ? splitFn(sourceData, altValue) : null;
+    const haveSplit = settings["mainValues"].some(m => splitter.isOnAltAxis(m.name));
+    splitter.haveSplit = () => haveSplit;
 
-    // Renderer to show the special controls for moving between axes
-    const splitter = selection => {
-        if (settings["mainValues"].length === 1) return;
-
-        const labelsInfo = settings["mainValues"].map((v, i) => ({
-            index: i,
-            name: v.name
-        }));
-        const mainLabels = labelsInfo.filter(v => !altValue(v.name));
-        const altLabels = labelsInfo.filter(v => altValue(v.name));
-
-        const labeller = () => splitterLabels(settings).color(color);
-
-        selection.select(".y-label-container>.y-label").call(labeller().labels(mainLabels));
-        selection.select(".y2-label-container>.y-label").call(
-            labeller()
-                .labels(altLabels)
-                .alt(true)
-        );
-    };
+    if (sourceData) {
+        // Split the data into main and alt displays
+        data = haveSplit ? splitFn(sourceData, key => !splitter.isOnAltAxis(key)) : sourceData;
+        altData = haveSplit ? splitFn(sourceData, splitter.isOnAltAxis) : null;
+    }
 
     splitter.color = (...args) => {
         if (!args.length) {
@@ -55,8 +64,6 @@ export const axisSplitter = (settings, sourceData, splitFn = dataSplitFunction)
         return splitter;
     };
 
-    splitter.haveSplit = () => haveSplit;
-
     splitter.data = (...args) => {
         if (!args.length) {
             return data;
@@ -71,6 +78,13 @@ export const axisSplitter = (settings, sourceData, splitFn = dataSplitFunction)
         altData = args[0];
         return splitter;
     };
+    splitter.decorate = (...args) => {
+        if (!args.length) {
+            return decorate;
+        }
+        decorate = args[0];
+        return splitter;
+    };
 
     return splitter;
 };
@@ -79,7 +93,7 @@ export const dataSplitFunction = (sourceData, isIncludedFn) => {
     return sourceData.map(d => d.filter(v => isIncludedFn(v.key)));
 };
 
-export const dataBlankFunction = (sourceData, isIncludedFn) => {
+export const groupBlankFunction = (sourceData, isIncludedFn) => {
     return sourceData.map(series => {
         if (!isIncludedFn(series.key)) {
             // Blank this data
@@ -89,6 +103,14 @@ export const dataBlankFunction = (sourceData, isIncludedFn) => {
     });
 };
 
-export const groupedBlankFunction = (sourceData, isIncludedFn) => {
-    return sourceData.map(group => dataBlankFunction(group, isIncludedFn));
+export const multiGroupBlankFunction = (sourceData, isIncludedFn) => {
+    return sourceData.map(group => groupBlankFunction(group, isIncludedFn));
+};
+
+export const groupRemoveFunction = (sourceData, isIncludedFn) => {
+    return sourceData.filter(series => isIncludedFn(series.key));
+};
+
+export const multiGroupRemoveFunction = (sourceData, isIncludedFn) => {
+    return sourceData.map(group => groupRemoveFunction(group, isIncludedFn));
 };

packages/perspective-viewer-d3fc/src/js/axis/chartFactory.js

@@ -15,6 +15,8 @@ export const chartCanvasFactory = (xAxis, yAxis) => chartFactory(xAxis, yAxis, f
 const chartFactory = (xAxis, yAxis, cartesian, canvas) => {
     let axisSplitter = null;
     let altAxis = null;
+    let altPlotArea = null;
+    let altXScale = null;
 
     const chart = cartesian({
         xScale: xAxis.scale,
@@ -59,6 +61,22 @@ const chartFactory = (xAxis, yAxis, cartesian, canvas) => {
         return chart;
     };
 
+    chart.altPlotArea = (...args) => {
+        if (!args.length) {
+            return altPlotArea;
+        }
+        altPlotArea = args[0];
+        return chart;
+    };
+
+    chart.altXScale = (...args) => {
+        if (!args.length) {
+            return altXScale;
+        }
+        altXScale = args[0];
+        return chart;
+    };
+
     const oldDecorate = chart.decorate();
     chart.decorate((container, data) => {
         oldDecorate(container, data);
@@ -112,14 +130,19 @@ const chartFactory = (xAxis, yAxis, cartesian, canvas) => {
                 });
 
             // Render all the series using either the primary or alternate y-scales
+            const plotAreas = [chart.plotArea(), altPlotArea || chart.plotArea()];
+            const xScales = [xAxis.scale, altXScale || xAxis.scale];
+            const yScales = [yAxis.scale, y2Scale];
             if (canvas) {
                 const drawMultiCanvasSeries = selection => {
-                    const canvasPlotArea = chart.plotArea();
-                    canvasPlotArea.context(selection.node().getContext("2d")).xScale(xAxis.scale);
+                    if (altXScale) altXScale.range(xAxis.scale.range());
 
-                    const yScales = [yAxis.scale, y2Scale];
                     [data, altData].forEach((d, i) => {
-                        canvasPlotArea.yScale(yScales[i]);
+                        const canvasPlotArea = plotAreas[i];
+                        canvasPlotArea
+                            .context(selection.node().getContext("2d"))
+                            .xScale(xScales[i])
+                            .yScale(yScales[i]);
                         canvasPlotArea(d);
                     });
                 };
@@ -129,12 +152,11 @@ const chartFactory = (xAxis, yAxis, cartesian, canvas) => {
                 });
             } else {
                 const drawMultiSvgSeries = selection => {
-                    const svgPlotArea = chart.plotArea();
-                    svgPlotArea.xScale(xAxis.scale);
+                    if (altXScale) altXScale.range(xAxis.scale.range());
 
-                    const yScales = [yAxis.scale, y2Scale];
                     ySeriesDataJoin(selection, [data, altData]).each((d, i, nodes) => {
-                        svgPlotArea.yScale(yScales[i]);
+                        const svgPlotArea = plotAreas[i];
+                        svgPlotArea.xScale(xScales[i]).yScale(yScales[i]);
                         d3.select(nodes[i])
                             .datum(d)
                             .call(svgPlotArea);

packages/perspective-viewer-d3fc/src/js/axis/ordinalAxis.js

@@ -98,13 +98,6 @@ export const component = settings => {
         };
     };
 
-    const pickAxis = multiLevel => {
-        if (multiLevel) {
-            return orient === "horizontal" ? multiAxisBottom : multiAxisLeft;
-        }
-        return orient === "horizontal" ? fc.axisOrdinalBottom : fc.axisOrdinalLeft;
-    };
-
     const getAxisSet = multiLevel => {
         if (multiLevel) {
             return {

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
+    };
+};

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

@@ -7,6 +7,7 @@
  *
  */
 
+import multiChart from "./multi";
 import barChart from "./bar";
 import columnChart from "./column";
 import lineChart from "./line";
@@ -19,6 +20,6 @@ import candlestick from "./candlestick";
 import sunburst from "./sunburst";
 import treemap from "./treemap";
 
-const chartClasses = [barChart, columnChart, lineChart, areaChart, yScatter, xyScatter, heatmap, ohlc, candlestick, sunburst, treemap];
+const chartClasses = [multiChart, barChart, columnChart, lineChart, areaChart, yScatter, xyScatter, heatmap, ohlc, candlestick, sunburst, treemap];
 
 export default chartClasses;

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

@@ -10,8 +10,8 @@ import * as fc from "d3fc";
 import {axisFactory} from "../axis/axisFactory";
 import {chartSvgFactory} from "../axis/chartFactory";
 import domainMatchOrigins from "../axis/domainMatchOrigins";
-import {axisSplitter, dataBlankFunction, groupedBlankFunction} from "../axis/axisSplitter";
-import {AXIS_TYPES} from "../axis/axisType";
+import {axisSplitter, groupBlankFunction, multiGroupBlankFunction, groupRemoveFunction, multiGroupRemoveFunction} from "../axis/axisSplitter";
+import {axisType, AXIS_TYPES} from "../axis/axisType";
 import {barSeries} from "../series/barSeries";
 import {seriesColors} from "../series/seriesColors";
 import {groupAndStackData} from "../data/groupData";
@@ -22,23 +22,18 @@ import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
 
 function columnChart(container, settings) {
-    const data = groupAndStackData(settings, filterData(settings));
     const color = seriesColors(settings);
+    const {data, series, splitFn, xScaleFn} = getDataAndSeries(settings, color);
 
     const legend = colorLegend()
         .settings(settings)
         .scale(color);
 
-    const bars = barSeries(settings, color).orient("vertical");
-    const series = fc
-        .seriesSvgMulti()
-        .mapping((data, index) => data[index])
-        .series(data.map(() => bars));
-
     const xAxis = axisFactory(settings)
         .excludeType(AXIS_TYPES.linear)
         .settingName("crossValues")
         .valueName("crossValue")(data);
+
     const yAxisFactory = axisFactory(settings)
         .settingName("mainValues")
         .valueName("mainValue")
@@ -48,8 +43,7 @@ function columnChart(container, settings) {
         .paddingStrategy(hardLimitZeroPadding());
 
     // Check whether we've split some values into a second y-axis
-    const blankFunction = settings.mainValues.length > 1 ? groupedBlankFunction : dataBlankFunction;
-    const splitter = axisSplitter(settings, data, blankFunction).color(color);
+    const splitter = axisSplitter(settings, data, splitFn).color(color);
 
     const yAxis1 = yAxisFactory(splitter.data());
 
@@ -60,11 +54,8 @@ function columnChart(container, settings) {
         .axisSplitter(splitter)
         .plotArea(plotSeries);
 
-    if (chart.xPaddingInner) {
-        chart.xPaddingInner(0.5);
-        chart.xPaddingOuter(0.25);
-        bars.align("left");
-    }
+    xScaleFn(xAxis.scale);
+
     chart.yNice && chart.yNice();
 
     const zoomChart = zoomableChart()
@@ -91,3 +82,40 @@ columnChart.plugin = {
 };
 
 export default columnChart;
+
+const getData = settings => groupAndStackData(settings, filterData(settings));
+const getSeries = (settings, data, color, options = {mixCharts: false}) => {
+    const bars = barSeries(settings, color, options).orient("vertical");
+
+    if (axisType(settings).excludeType(AXIS_TYPES.linear)() == AXIS_TYPES.ordinal) {
+        bars.align("left");
+    }
+
+    return fc
+        .seriesSvgMulti()
+        .mapping((data, index) => data[index])
+        .series(data.map(() => bars));
+};
+
+const getSplitFn = (settings, options) => {
+    const grouped = settings.mainValues.length > 1;
+    if (options.mixCharts) {
+        return grouped ? multiGroupRemoveFunction : groupRemoveFunction;
+    }
+    return grouped ? multiGroupBlankFunction : groupBlankFunction;
+};
+
+export const getDataAndSeries = (settings, color, symbols, options = {mixCharts: false}) => {
+    const data = getData(settings);
+    return {
+        data,
+        series: getSeries(settings, data, color, options),
+        splitFn: getSplitFn(settings, options),
+        xScaleFn: scale => {
+            if (scale.paddingInner) {
+                scale.paddingInner(0.5);
+                scale.paddingOuter(0.25);
+            }
+        }
+    };
+};