Merge pull request #934 from plotly/funnels

Funnel support

Author: nicolaskruchten

dev/mocks.json

@@ -3,6 +3,8 @@
   "/percy/panelTest.json",
   "/percy/bar.json",
   "/percy/box.json",
+  "/percy/funnel.json",
+  "/percy/funnelarea.json",
   "/percy/histogram.json",
   "/percy/histogram2d.json",
   "/percy/pie.json",

dev/percy/funnel.json

@@ -0,0 +1,9 @@
+{
+  "data": [
+    {
+      "type": "funnel",
+      "y": ["Lead", "Pipeline", "Proposal", "Negotiation", "Closed (Won)"],
+      "x": [ 610, 432, 231, 103, 54 ]
+    }
+  ]
+}

dev/percy/funnelarea.json

@@ -0,0 +1,9 @@
+{
+  "data": [
+    {
+      "type": "funnelarea",
+      "labels": ["Lead", "Pipeline", "Proposal", "Negotiation", "Closed (Won)"],
+      "values": [ 610, 432, 231, 103, 54 ]
+    }
+  ]
+}

dev/percy/index.js

@@ -8,4 +8,6 @@ export {default as box} from './box.json';
 export {default as waterfall} from './waterfall.json';
 export {default as sunburst} from './sunburst.json';
 export {default as sankey} from './sankey.json';
+export {default as funnel} from './funnel.json';
+export {default as funnelarea} from './funnelarea.json';
 export {default as geoTest} from './geoTest.json';

src/EditorControls.js

@@ -11,6 +11,7 @@ import {
   shamefullyAdjustSplitStyleTargetContainers,
   shamefullyDeleteRelatedAnalysisTransforms,
   shamefullyAdjustSizeref,
+  shamefullyAdjustAxisDirection,
 } from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
@@ -71,7 +72,7 @@ class EditorControls extends Component {
         }
 
         shamefullyAdjustSizeref(graphDiv, payload);
-
+        shamefullyAdjustAxisDirection(graphDiv, payload);
         shamefullyClearAxisTypes(graphDiv, payload);
         shamefullyAdjustAxisRef(graphDiv, payload);
         shamefullyAddTableColumns(graphDiv, payload);

src/components/containers/SubplotAccordion.js

@@ -64,7 +64,7 @@ class SubplotAccordion extends Component {
     // of right type that have attr 'subplot': 'ternary' in their data.
 
     /**
-    Example: 
+    Example:
     {
       "data": [
         {
@@ -126,7 +126,9 @@ class SubplotAccordion extends Component {
     data.forEach((d, i) => {
       if (
         (d.type === 'pie' && d.values) ||
-        ['pie', 'table', 'sunburst', 'sankey', 'parcoords', 'parcats'].includes(d.type)
+        ['pie', 'table', 'sunburst', 'sankey', 'parcoords', 'parcats', 'funnelarea'].includes(
+          d.type
+        )
       ) {
         counter[d.type]++;
         const currentCount = counter[d.type];

src/components/containers/TraceMarkerSection.js

@@ -15,12 +15,10 @@ class TraceMarkerSection extends Component {
   setLocals(context) {
     const _ = this.context.localize;
     const traceType = context.fullContainer.type;
-    if (['bar', 'histogram'].includes(traceType)) {
+    if (['bar', 'histogram', 'funnel', 'waterfall'].includes(traceType)) {
       this.name = _('Bars');
-    } else if (traceType === 'pie') {
-      this.name = _('Pie Segments');
-    } else if (traceType === 'sunburst') {
-      this.name = _('Sunburst Segments');
+    } else if (['funnelarea', 'pie', 'sunburst'].includes(traceType)) {
+      this.name = _('Segments');
     } else {
       this.name = _('Points');
     }

src/components/fields/DataSelector.js

@@ -40,6 +40,7 @@ export class UnconnectedDataSelector extends Component {
             'scatter',
             'scattergl',
             'bar',
+            'funnel',
             'heatmap',
             'heatmapgl',
             'violin',

src/components/fields/TextPosition.js

@@ -91,14 +91,17 @@ export default connectToContainer(UnconnectedTextPosition, {
       {label: _('Bottom Center'), value: 'bottom center'},
       {label: _('Bottom Right'), value: 'bottom right'},
     ];
-    if (['pie', 'bar', 'waterfall'].includes(context.container.type)) {
+    if (['pie', 'bar', 'funnel', 'waterfall'].includes(context.container.type)) {
       options = [
         {label: _('Inside'), value: 'inside'},
         {label: _('Outside'), value: 'outside'},
         {label: _('Auto'), value: 'auto'},
         {label: _('None'), value: 'none'},
       ];
     }
+    if (['funnelarea'].includes(context.container.type)) {
+      options = [{label: _('Inside'), value: 'inside'}, {label: _('None'), value: 'none'}];
+    }
     plotProps.options = options;
     plotProps.clearable = false;
   },

src/components/fields/derived.js

@@ -500,12 +500,23 @@ function computeAxesRefOptions(axes, propsAttr) {
 export const TextInfo = connectToContainer(UnconnectedFlaglist, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _, container} = context;
-    const options = [
+
+    let options = [
       {label: _('Label'), value: 'label'},
       {label: _('Value'), value: 'value'},
       {label: _('%'), value: 'percent'},
     ];
 
+    if (container.type === 'funnel') {
+      options = [
+        {label: _('Label'), value: 'label'},
+        {label: _('Value'), value: 'value'},
+        {label: _('% initial'), value: 'percent initial'},
+        {label: _('% previous'), value: 'percent previous'},
+        {label: _('% total'), value: 'percent total'},
+      ];
+    }
+
     if (container.text) {
       options.push({label: _('Text'), value: 'text'});
     }
@@ -591,11 +602,11 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       options = [];
     }
 
-    if (container.labels && ['pie', 'sunburst'].includes(container.type)) {
+    if (container.labels && ['pie', 'sunburst', 'funnelarea'].includes(container.type)) {
       options.push({label: _('Label'), value: 'label'});
     }
 
-    if (container.values && ['pie', 'sunburst'].includes(container.type)) {
+    if (container.values && ['pie', 'sunburst', 'funnelarea'].includes(container.type)) {
       options.push({label: _('Value'), value: 'value'});
     }