Added buttons for cycling through series types on each y-axis

finos · andy-lee-eng · May 17, 2019 · May 17, 2019 · May 17, 2019 · May 17, 2019
commit 6ef848e4059a720545cd23e742751aa07c66b4d9
diff --git a/packages/perspective-viewer-d3fc/src/js/axis/axisSplitter.js b/packages/perspective-viewer-d3fc/src/js/axis/axisSplitter.js
@@ -15,6 +15,7 @@ export const axisSplitter = (settings, sourceData, splitFn = dataSplitFunction)
     let color;
     let data;
     let altData;
+    let decorate = () => {};
 
     // Renderer to show the special controls for moving between axes
     const splitter = selection => {
@@ -35,6 +36,9 @@ export const axisSplitter = (settings, sourceData, splitFn = dataSplitFunction)
                 .labels(altLabels)
                 .alt(true)
         );
+
+        decorate(selection.select(".y-label-container"), 0);
+        decorate(selection.select(".y2-label-container"), 1);
     };
 
     splitter.isOnAltAxis = name => {
@@ -74,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;
 };

diff --git a/packages/perspective-viewer-d3fc/src/js/charts/multi.js b/packages/perspective-viewer-d3fc/src/js/charts/multi.js
@@ -22,6 +22,9 @@ import nearbyTip from "../tooltip/nearbyTip";
 import {getDataAndSeries as getLineDataAndSeries} from "./line";
 import {getDataAndSeries as getColumnDataAndSeries} from "./column";
 
+import seriesPicker from "../picker/series-picker";
+import {getChartElement} from "../plugin/root";
+
 const seriesFunctions = {
     line: getLineDataAndSeries,
     column: getColumnDataAndSeries
@@ -58,7 +61,18 @@ function multiChart(container, settings) {
         .paddingStrategy(paddingStrategy);
 
     // Check whether we've split some values into a second y-axis
-    const splitter = axisSplitter(settings, data, splitFn).color(color);
+    const splitter = axisSplitter(settings, data, splitFn)
+        .color(color)
+        .decorate((container, i) => {
+            const multiSide = i === 0 ? "primary" : "alternate";
+            seriesPicker()
+                .current(multiTypes[multiSide])
+                .onChange(newType => {
+                    multiTypes[multiSide] = newType;
+                    settings.multiTypes = multiTypes;
+                    redrawChart(container);
+                })(container);
+        });
 
     const yAxis1 = yAxisFactory(splitter.data());
 
@@ -121,3 +135,9 @@ multiChart.plugin = {
 };
 
 export default multiChart;
+
+const redrawChart = selection => {
+    const chartElement = getChartElement(selection.node());
+    chartElement.remove();
+    chartElement.draw();
+};
diff --git a/packages/perspective-viewer-d3fc/src/js/picker/column-chart-svg.js b/packages/perspective-viewer-d3fc/src/js/picker/column-chart-svg.js
@@ -0,0 +1,7 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="transparent" stroke-width="3">
+<path d="M4,28L4,12"/>
+<path d="M11,28L11,5"/>
+<path d="M18,28L18,20"/>
+<path d="M25,28L25,14"/>
+</svg>
+`;
diff --git a/packages/perspective-viewer-d3fc/src/js/picker/line-chart-svg.js b/packages/perspective-viewer-d3fc/src/js/picker/line-chart-svg.js
@@ -0,0 +1,3 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill-opacity="0" stroke-width="3">
+  <path d="M2,25L5,8L9,18L15,15L20,22,L25,5"/>
+</svg>`;
diff --git a/packages/perspective-viewer-d3fc/src/js/picker/picker.js b/packages/perspective-viewer-d3fc/src/js/picker/picker.js
@@ -0,0 +1,54 @@
+import {dataJoin} from "d3fc";
+
+export default () => {
+    let className = "picker";
+    let svgs = {};
+    let current;
+    let onChange = () => {};
+
+    const picker = selection => {
+        const pickerDataJoin = dataJoin("div", className).key(d => d);
+
+        const next = d => {
+            const keys = Object.keys(svgs);
+            let index = keys.indexOf(d) + 1;
+            if (index >= keys.length) index = 0;
+            return keys[index];
+        };
+
+        pickerDataJoin(selection, current ? [current] : [])
+            .html(d => svgs[d])
+            .on("click", d => onChange(next(d)));
+    };
+
+    picker.className = (...args) => {
+        if (!args.length) {
+            return className;
+        }
+        className = args[0];
+        return picker;
+    };
+    picker.svgs = (...args) => {
+        if (!args.length) {
+            return svgs;
+        }
+        svgs = args[0];
+        return picker;
+    };
+    picker.current = (...args) => {
+        if (!args.length) {
+            return current;
+        }
+        current = args[0];
+        return picker;
+    };
+    picker.onChange = (...args) => {
+        if (!args.length) {
+            return onChange;
+        }
+        onChange = args[0];
+        return picker;
+    };
+
+    return picker;
+};
diff --git a/packages/perspective-viewer-d3fc/src/js/picker/series-picker.js b/packages/perspective-viewer-d3fc/src/js/picker/series-picker.js
@@ -0,0 +1,23 @@
+import {rebindAll} from "d3fc";
+import picker from "./picker";
+
+import lineSvg from "./line-chart-svg";
+import columnSvg from "./column-chart-svg";
+
+const typeSvgs = {
+    line: lineSvg,
+    column: columnSvg
+};
+
+export default () => {
+    const base = picker()
+        .className("series-picker")
+        .svgs(typeSvgs);
+
+    const seriesPicker = selection => {
+        base(selection);
+    };
+
+    rebindAll(seriesPicker, base);
+    return seriesPicker;
+};
diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/template.js b/packages/perspective-viewer-d3fc/src/js/plugin/template.js
@@ -103,7 +103,12 @@ class D3FCChartElement extends HTMLElement {
             if (areArraysEqualSimple(oldValues, newValues)) return {...oldSettings, data: newSettings.data, colorStyles: null};
         }
         this.remove();
-        return newSettings;
+
+        // Some settings can be preserved even when the chart schema changes
+        const preserved = oldSettings && {
+            multiTypes: oldSettings.multiTypes
+        };
+        return {...preserved, ...newSettings};
     }
 }
 

diff --git a/packages/perspective-viewer-d3fc/src/less/chart.less b/packages/perspective-viewer-d3fc/src/less/chart.less
@@ -221,6 +221,40 @@
             content: "\1f845";
         }
 
+        & .y-label-container, & .y2-label-container {
+            position: relative;
+        }
+
+        & .series-picker {
+            position: absolute;
+            bottom: -48px;
+            width: 24px;
+            height: 24px;
+            padding: 2px;
+            box-sizing: border-box;
+            border: 1px solid transparent;
+            border-radius: 5px;
+            cursor: pointer;
+
+            & svg {
+                width: 20px;
+                height: 20px;
+                fill: var(--d3fc-series-picker, rgb(150, 170, 180));
+                stroke: var(--d3fc-series-picker, rgb(150, 170, 180));
+            }
+
+            transition: 100ms background-color;
+            &:hover {
+                border-color: #aaa;
+            }
+        }
+        & .y-label-container .series-picker {
+            left: 0;
+        }
+        & .y2-label-container .series-picker {
+            right: 0;
+        }
+
         &.d3_y_bar .y-axis path,
         &.d3_y_line .y-axis path,
         &.d3_y_area .y-axis path,