wip

Author: nicolaskruchten

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

@@ -17,6 +17,8 @@ class TraceMarkerSection extends Component {
     const traceType = context.fullContainer.type;
     if (['bar', 'histogram'].includes(traceType)) {
       this.name = _('Bars');
+    } else if (traceType === 'funnelarea') {
+      this.name = _('Funnel Segments');
     } else if (traceType === 'pie') {
       this.name = _('Pie Segments');
     } else if (traceType === 'sunburst') {

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

@@ -591,11 +591,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'});
     }
 

src/default_panels/StyleTracesPanel.js

@@ -122,7 +122,28 @@ const StyleTracesPanel = (props, {localize: _}) => (
         />
       </LayoutSection>
     </TraceTypeSection>
-    <PlotlySection name={_('Pie Title')} attr="title.text">
+    <TraceTypeSection name={_('Funnel Area Colors')} traceTypes={['funnelarea']} mode="trace">
+      <LayoutSection attr="name">
+        <ColorwayPicker label={_('Colors')} attr="funnelareacolorway" />
+        <Radio
+          label={_('Extended Colors')}
+          attr="extendfunnelareacolors"
+          options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
+        />
+      </LayoutSection>
+    </TraceTypeSection>
+    <PlotlySection name={_('Funnel Dimensions')} traceTypes={['funnelarea']} attr="aspectratio">
+      <Numeric
+        label={_('Aspect Ratio')}
+        attr="aspectratio"
+        step={0.01}
+        min={0}
+        max={2}
+        showSlider
+      />
+      <NumericFraction label={_('Base Ratio')} attr="baseratio" />
+    </PlotlySection>
+    <PlotlySection name={_('Subplot Title')} attr="title.text">
       <TextEditor label={_('Name')} attr="title.text" />
       <Dropdown
         label={'Title Position'}
@@ -637,6 +658,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
         attr="connector.visible"
         options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
+      <MultiColorPicker label={_('Fill Color')} attr="connector.fillcolor" />
       <Numeric label={_('Line Width')} attr="connector.line.width" />
       <MultiColorPicker label={_('Line Color')} attr="connector.line.color" />
       <LineDashSelector label={_('Line Type')} attr="connector.line.dash" />

src/lib/customTraceType.js

@@ -1,5 +1,3 @@
-import {COLORS} from 'lib/constants';
-
 export function plotlyTraceToCustomTrace(trace) {
   if (typeof trace !== 'object') {
     throw new Error(
@@ -45,29 +43,10 @@ export function traceTypeToPlotlyInitFigure(traceType, gl = '') {
       return {type: 'scatter' + gl, mode: 'lines', stackgroup: 1};
     case 'scatterpolar':
       return {type: 'scatterpolar' + gl};
-    case 'ohlc':
-      return {
-        type: 'ohlc',
-        decreasing: {line: {color: COLORS.middleGray}},
-        increasing: {line: {color: COLORS.blueTeal}},
-      };
     case 'waterfall':
       return {
         type: 'waterfall',
-        decreasing: {line: {color: COLORS.middleGray}},
-        increasing: {line: {color: COLORS.blueTeal}},
-      };
-    case 'candlestick':
-      return {
-        type: 'candlestick',
-        decreasing: {
-          line: {color: COLORS.middleGray},
-          fillcolor: 'rgba(127, 127, 127, 0.5)',
-        },
-        increasing: {
-          line: {color: COLORS.blueTeal},
-          fillcolor: 'rgba(23, 190, 207, 0.5)',
-        },
+        orientation: 'v',
       };
     case 'box':
       return {

src/lib/traceTypes.js

@@ -200,6 +200,16 @@ export const traceTypes = _ => [
     label: _('Waterfall'),
     category: chartCategory(_).FINANCIAL,
   },
+  {
+    value: 'funnel',
+    label: _('Funnel'),
+    category: chartCategory(_).FINANCIAL,
+  },
+  {
+    value: 'funnelarea',
+    label: _('Funnel Area'),
+    category: chartCategory(_).FINANCIAL,
+  },
   {
     value: 'scattergl',
     icon: 'scatter',