Merge pull request #617 from plotly/fix-categorical

Categorical scale fixes

Author: VeraZab

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "author": "Plotly, Inc.",
   "bugs": {
     "url": "https://github.com/plotly/react-chart-editor/issues"
@@ -19,7 +19,7 @@
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",
-    "react-colorscales": "0.5.8",
+    "react-colorscales": "0.5.9",
     "react-dropzone": "^4.2.9",
     "react-plotly.js": "^2.2.0",
     "react-rangeslider": "^2.2.0",

src/components/fields/Colorscale.js

@@ -10,7 +10,7 @@ class Colorscale extends Component {
     this.onUpdate = this.onUpdate.bind(this);
   }
 
-  onUpdate(colorscale) {
+  onUpdate(colorscale, colorscaleType) {
     if (Array.isArray(colorscale)) {
       this.props.updatePlot(
         colorscale.map((c, i) => {
@@ -19,7 +19,8 @@ class Colorscale extends Component {
             step = 0;
           }
           return [step, c];
-        })
+        }),
+        colorscaleType
       );
     }
   }

src/components/fields/MarkerColor.js

@@ -100,13 +100,33 @@ class UnconnectedMarkerColor extends Component {
     );
   }
 
-  setColors(colorscale) {
+  setColors(colorscale, colorscaleType) {
     const numberOfTraces = this.context.traceIndexes.length;
     const colors = colorscale.map(c => c[1]);
 
-    let adjustedColors = getColorscale(colors, numberOfTraces);
-    if (adjustedColors.every(c => c === adjustedColors[0])) {
-      adjustedColors = colors;
+    let adjustedColors = colors;
+
+    if (colorscaleType !== 'categorical') {
+      adjustedColors = getColorscale(
+        colors,
+        numberOfTraces,
+        null,
+        null,
+        colorscaleType
+      );
+    }
+
+    if (
+      adjustedColors.every(c => c === adjustedColors[0]) ||
+      colorscaleType === 'categorical'
+    ) {
+      const repetitions = Math.ceil(numberOfTraces / colors.length);
+      const newArray = new Array(repetitions).fill(colors);
+      adjustedColors = newArray
+        .reduce((a, b) => {
+          return a.concat(b);
+        }, [])
+        .slice(0, numberOfTraces);
     }
 
     const updates = adjustedColors.map(color => ({