Merge pull request #620 from plotly/color-pies

Color pie traces with colorscale

Author: VeraZab

dev/App.js

@@ -16,7 +16,7 @@ import 'brace/theme/textmate';
 import ACCESS_TOKENS from '../accessTokens';
 
 const dataSources = {
-  ints: [1, 2, 3, 4, 5, 6], // eslint-disable-line no-magic-numbers
+  ints: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17], // eslint-disable-line no-magic-numbers
   'jagged ints': [2, 1, 3, 5, 4, 6], // eslint-disable-line no-magic-numbers
   'toggle ints': [1, -1, 1, -1, 1, -1], // eslint-disable-line no-magic-numbers
   'big ints': [1000, 10100, 10000, 20000, 100000], // eslint-disable-line no-magic-numbers

src/components/fields/Colorscale.js

@@ -2,7 +2,7 @@ import ColorscalePicker from '../widgets/ColorscalePicker';
 import Field from './Field';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {connectToContainer} from 'lib';
+import {connectToContainer, adjustColorscale} from 'lib';
 
 class Colorscale extends Component {
   constructor(props) {
@@ -12,6 +12,18 @@ class Colorscale extends Component {
 
   onUpdate(colorscale, colorscaleType) {
     if (Array.isArray(colorscale)) {
+      if (this.context.container.type === 'pie') {
+        const numPieSlices = this.context.graphDiv.calcdata[0].length + 1;
+        const adjustedColorscale = adjustColorscale(
+          colorscale,
+          numPieSlices,
+          colorscaleType,
+          {repeat: true}
+        );
+        this.props.updatePlot(adjustedColorscale);
+        return;
+      }
+
       this.props.updatePlot(
         colorscale.map((c, i) => {
           let step = i / (colorscale.length - 1);
@@ -50,6 +62,11 @@ Colorscale.propTypes = {
   ...Field.propTypes,
 };
 
+Colorscale.contextTypes = {
+  container: PropTypes.object,
+  graphDiv: PropTypes.object,
+};
+
 export default connectToContainer(Colorscale, {
   modifyPlotProps: (props, context, plotProps) => {
     if (
@@ -65,5 +82,30 @@ export default connectToContainer(Colorscale, {
           .filter(t => context.traceIndexes.includes(t.index))
           .map(t => [0, t.marker.color]);
     }
+
+    if (
+      context &&
+      context.container &&
+      context.graphDiv &&
+      (!plotProps.fullValue ||
+        (Array.isArray(plotProps.fullValue) && !plotProps.fullValue.length)) &&
+      context.container.type === 'pie' &&
+      context.graphDiv.calcdata
+    ) {
+      plotProps.fullValue = context.graphDiv.calcdata[0].map(d => [0, d.color]);
+    }
+
+    if (
+      props.attr === 'marker.colors' &&
+      plotProps.fullValue &&
+      Array.isArray(plotProps.fullValue) &&
+      !plotProps.fullValue.every(el => Array.isArray(el))
+    ) {
+      plotProps.fullValue = plotProps.fullValue.map(c => [0, c]);
+    }
+
+    if (context.container.type === 'pie' && context.traceIndexes.length > 1) {
+      plotProps.isVisible = false;
+    }
   },
 });

src/components/fields/MarkerColor.js

@@ -1,7 +1,7 @@
 import Field from './Field';
 import PropTypes from 'prop-types';
 import React, {Component, Fragment} from 'react';
-import {connectToContainer} from 'lib';
+import {adjustColorscale, connectToContainer} from 'lib';
 import RadioBlocks from '../widgets/RadioBlocks';
 import Color from './Color';
 import Colorscale from './Colorscale';
@@ -11,7 +11,6 @@ import Info from './Info';
 import DataSelector from './DataSelector';
 import VisibilitySelect from './VisibilitySelect';
 import {MULTI_VALUED, COLORS} from 'lib/constants';
-import {getColorscale} from 'react-colorscales';
 
 class UnconnectedMarkerColor extends Component {
   constructor(props, context) {
@@ -107,26 +106,14 @@ class UnconnectedMarkerColor extends Component {
     let adjustedColors = colors;
 
     if (colorscaleType !== 'categorical') {
-      adjustedColors = getColorscale(
-        colors,
-        numberOfTraces,
-        null,
-        null,
-        colorscaleType
-      );
+      adjustedColors = adjustColorscale(colors, numberOfTraces);
     }
 
     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);
+      adjustedColors = adjustColorscale(colors, numberOfTraces, {repeat: true});
     }
 
     const updates = adjustedColors.map(color => ({

src/default_panels/GraphCreatePanel.js

@@ -28,8 +28,8 @@ const GraphCreatePanel = (props, {localize: _}) => {
       <PlotlySection name={_('Data')}>
         <DataSelector label={_('Latitude')} attr="lat" />
         <DataSelector label={_('Longitude')} attr="lon" />
-        <DataSelector label={_('Labels')} attr="labels" />
         <DataSelector label={_('Values')} attr="values" />
+        <DataSelector label={_('Labels')} attr="labels" />
         <DataSelector label={_('Locations')} attr="locations" />
         <Radio
           label={_('Orientation')}

src/default_panels/StyleTracesPanel.js

@@ -48,6 +48,11 @@ const StyleTracesPanel = (props, {localize: _}) => (
     />
     <NumericFraction label={_('Opacity')} attr="opacity" />
     <ColorPicker label={_('Color')} attr="color" />
+    <ColorscalePicker
+      label={_('Colors')}
+      attr="marker.colors"
+      initialCategory="categorical"
+    />
     <Dropdown
       label={_('Histogram Normalization')}
       options={[

src/lib/customTraceType.js

@@ -76,6 +76,13 @@ export function traceTypeToPlotlyInitFigure(traceType, gl = '') {
         type: 'scatter3d',
         mode: 'markers',
       };
+    case 'pie':
+      return {
+        marker: {
+          colors: [],
+        },
+        type: 'pie',
+      };
     default:
       return {type: traceType};
   }

src/lib/index.js

@@ -38,6 +38,7 @@ import {
   camelCase,
   pascalCase,
 } from './strings';
+import {getColorscale} from 'react-colorscales';
 
 const TOO_LIGHT_FACTOR = 0.8;
 
@@ -175,7 +176,33 @@ function maybeAdjustSrc(src, srcAttributePath, traceType, config) {
   return config && config.fromSrc ? config.fromSrc(src, traceType) : src;
 }
 
+function adjustColorscale(
+  colorscale,
+  numberOfNeededColors,
+  colorscaleType,
+  config
+) {
+  if (config.repeat) {
+    const repetitions = Math.ceil(numberOfNeededColors / colorscale.length);
+    const newArray = new Array(repetitions).fill(colorscale);
+    return newArray
+      .reduce((a, b) => {
+        return a.concat(b);
+      }, [])
+      .slice(0, numberOfNeededColors);
+  }
+
+  return getColorscale(
+    colorscale,
+    numberOfNeededColors,
+    null,
+    null,
+    colorscaleType
+  );
+}
+
 export {
+  adjustColorscale,
   axisIdToAxisName,
   bem,
   capitalize,