Split by name instead of index, and add color

Splitting by name is necessary when we have a split-by value, because there are multiple series per mainValue, and we can't identify them by index. Color is applied when there isn't a split-by, but can't be when there is because there are several colours.
finos · texodus · May 15, 2019 · May 2, 2019 · May 2, 2019 · May 3, 2019
commit 802adbfe5d028506cbb98bbb6d454d726840a331
diff --git a/packages/perspective-viewer-d3fc/src/js/axis/axisSplitter.js b/packages/perspective-viewer-d3fc/src/js/axis/axisSplitter.js
@@ -9,15 +9,20 @@
 import {splitterLabels} from "./splitterLabels";
 
 export const axisSplitter = (settings, sourceData) => {
-    // splitMainValues is an array of main-value indexes (numbers) to put into the alt-axis
+    let color;
+
+    // splitMainValues is an array of main-value names to put into the alt-axis
     const splitMainValues = settings.splitMainValues || [];
-    const altValue = (value, index) => splitMainValues.includes(index);
+    const altValue = name => {
+        const split = name.split("|");
+        return splitMainValues.includes(split[split.length - 1]);
+    };
 
-    const haveSplit = settings["mainValues"].some(altValue);
+    const haveSplit = settings["mainValues"].some(m => altValue(m.name));
 
     // Split the data into main and alt displays
-    const data = haveSplit ? sourceData.map(d => d.filter((v, i) => !altValue(v, i))) : sourceData;
-    const altData = haveSplit ? sourceData.map(d => d.filter(altValue)) : null;
+    const data = haveSplit ? sourceData.map(d => d.filter(v => !altValue(v.key))) : sourceData;
+    const altData = haveSplit ? sourceData.map(d => d.filter(v => altValue(v.key))) : null;
 
     // Renderer to show the special controls for moving between axes
     const splitter = selection => {
@@ -27,17 +32,27 @@ export const axisSplitter = (settings, sourceData) => {
             index: i,
             name: v.name
         }));
-        const mainLabels = labelsInfo.filter((v, i) => !altValue(v, i));
-        const altLabels = labelsInfo.filter(altValue);
+        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(splitterLabels(settings).labels(mainLabels));
+        selection.select(".y-label-container>.y-label").call(labeller().labels(mainLabels));
         selection.select(".y2-label-container>.y-label").call(
-            splitterLabels(settings)
+            labeller()
                 .labels(altLabels)
                 .alt(true)
         );
     };
 
+    splitter.color = (...args) => {
+        if (!args.length) {
+            return color;
+        }
+        color = args[0];
+        return splitter;
+    };
+
     splitter.haveSplit = () => haveSplit;
     splitter.data = () => data;
     splitter.altData = () => altData;

diff --git a/packages/perspective-viewer-d3fc/src/js/axis/splitterLabels.js b/packages/perspective-viewer-d3fc/src/js/axis/splitterLabels.js
@@ -8,27 +8,32 @@
  */
 import * as fc from "d3fc";
 import {getChartElement} from "../plugin/root";
+import {withoutOpacity} from "../series/seriesColors.js";
 
 // Render a set of labels with the little left/right arrows for moving between axes
 export const splitterLabels = settings => {
     let labels = [];
     let alt = false;
+    let color;
 
     const _render = selection => {
         selection.text("");
 
         const labelDataJoin = fc.dataJoin("span", "splitter-label").key(d => d);
+
         const disabled = !alt && labels.length === 1;
+        const coloured = color && settings.splitValues.length === 0;
         labelDataJoin(selection, labels)
             .classed("disabled", disabled)
             .text(d => d.name)
+            .style("color", d => (coloured ? withoutOpacity(color(d.name)) : undefined))
             .on("click", d => {
                 if (disabled) return;
 
                 if (alt) {
-                    settings.splitMainValues = settings.splitMainValues.filter(v => v !== d.index);
+                    settings.splitMainValues = settings.splitMainValues.filter(v => v != d.name);
                 } else {
-                    settings.splitMainValues = [d.index].concat(settings.splitMainValues || []);
+                    settings.splitMainValues = [d.name].concat(settings.splitMainValues || []);
                 }
 
                 redrawChart(selection);
@@ -55,5 +60,13 @@ export const splitterLabels = settings => {
         alt = args[0];
         return _render;
     };
+
+    _render.color = (...args) => {
+        if (!args.length) {
+            return color;
+        }
+        color = args[0];
+        return _render;
+    };
     return _render;
 };
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/line.js b/packages/perspective-viewer-d3fc/src/js/charts/line.js
@@ -48,7 +48,7 @@ function lineChart(container, settings) {
         .paddingStrategy(paddingStrategy);
 
     // Check whether we've split some values into a second y-axis
-    const splitter = axisSplitter(settings, data);
+    const splitter = axisSplitter(settings, data).color(color);
 
     const yAxis1 = yAxisFactory(splitter.data());