treemap support

Author: nicolaskruchten

src/components/containers/SubplotAccordion.js

@@ -118,6 +118,7 @@ class SubplotAccordion extends Component {
       pie: 0,
       table: 0,
       sunburst: 0,
+      treemap: 0,
       sankey: 0,
       parcoords: 0,
       parcats: 0,
@@ -126,9 +127,16 @@ class SubplotAccordion extends Component {
     data.forEach((d, i) => {
       if (
         (d.type === 'pie' && d.values) ||
-        ['pie', 'table', 'sunburst', 'sankey', 'parcoords', 'parcats', 'funnelarea'].includes(
-          d.type
-        )
+        [
+          'pie',
+          'table',
+          'sunburst',
+          'treemap',
+          'sankey',
+          'parcoords',
+          'parcats',
+          'funnelarea',
+        ].includes(d.type)
       ) {
         counter[d.type]++;
         const currentCount = counter[d.type];

src/components/containers/TraceMarkerSection.js

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

src/components/fields/derived.js

@@ -169,7 +169,11 @@ export const TickFormat = connectToContainer(UnconnectedDropdownCustom, {
 
 export const ShowInLegend = connectToContainer(UnconnectedVisibilitySelect, {
   modifyPlotProps: (props, context, plotProps) => {
-    if (context.container.type && context.container.type !== 'sunburst') {
+    if (
+      context.container.type &&
+      context.container.type !== 'sunburst' &&
+      context.container.type !== 'treemap'
+    ) {
       plotProps.isVisible = context.fullLayout.showlegend;
     }
 
@@ -628,15 +632,15 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         {label: _('Norm'), value: 'norm'},
         {label: _('Divergence'), value: 'divergence'},
       ];
-    } else if (container.type === 'sunburst') {
+    } else if (container.type === 'sunburst' || container.type === 'treemap') {
       options = [];
     }
 
-    if (container.labels && ['pie', 'sunburst', 'funnelarea'].includes(container.type)) {
+    if (container.labels && ['pie', 'sunburst', 'treemap', 'funnelarea'].includes(container.type)) {
       options.push({label: _('Label'), value: 'label'});
     }
 
-    if (container.values && ['pie', 'sunburst', 'funnelarea'].includes(container.type)) {
+    if (container.values && ['pie', 'sunburst', 'treemap', 'funnelarea'].includes(container.type)) {
       options.push({label: _('Value'), value: 'value'});
     }
 

src/default_panels/GraphCreatePanel.js

@@ -38,7 +38,7 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => {
       <DataSelector label={_('Labels')} attr="labels" />
       <DataSelector label={_('Parents')} attr="parents" />
 
-      <TraceTypeSection traceTypes={['sunburst']} mode="trace">
+      <TraceTypeSection traceTypes={['sunburst', 'treemap']} mode="trace">
         <DataSelector label={_('IDs')} attr="ids" />
       </TraceTypeSection>
       <Dropdown

src/default_panels/StyleTracesPanel.js

@@ -56,7 +56,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
   <TraceAccordion canGroup>
     <TextEditor label={_('Name')} attr="name" richTextOnly />
     <NumericFraction label={_('Trace Opacity')} attr="opacity" />
-    <TraceTypeSection name={_('Leaves')} traceTypes={['sunburst']} mode="trace">
+    <TraceTypeSection name={_('Leaves')} traceTypes={['sunburst', 'treemap']} mode="trace">
       <LevelRendered label={_('Start at Level')} attr="level" />
       <Numeric label={_('Max Depth')} attr="maxdepth" min={-1} step={1} />
       <NumericFraction label={_('Opacity')} attr="leaf.opacity" />
@@ -99,7 +99,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
     <MultiColorPicker label={_('Color')} attr="color" />
     <TraceTypeSection
       name={_('Segment Colors')}
-      traceTypes={['pie', 'sunburst', 'funnelarea']}
+      traceTypes={['pie', 'sunburst', 'treemap', 'funnelarea']}
       mode="trace"
     >
       <LayoutSection attr="name">
@@ -113,6 +113,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
           ]}
         />
         <ColorwayPicker label={_('Colors')} attr="sunburstcolorway" />
+        <ColorwayPicker label={_('Colors')} attr="treemapcolorway" />
         <Radio
           label={_('Extended Colors')}
           attr="extendsunburstcolors"
@@ -121,6 +122,14 @@ const StyleTracesPanel = (props, {localize: _}) => (
             {label: _('Off'), value: false},
           ]}
         />
+        <Radio
+          label={_('Extended Colors')}
+          attr="extendtreemapcolors"
+          options={[
+            {label: _('On'), value: true},
+            {label: _('Off'), value: false},
+          ]}
+        />
         <ColorwayPicker label={_('Colors')} attr="funnelareacolorway" />
         <Radio
           label={_('Extended Colors')}
@@ -879,6 +888,23 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MultiColorPicker label={_('Line Color')} attr="link.line.color" />
       <Numeric label={_('Line Width')} attr="link.line.width" min={0} />
     </PlotlySection>
+    <PlotlySection name={_('Path Bar')} attr="pathbar.visible">
+      <Radio
+        attr="pathbar.visible"
+        options={[
+          {label: _('Show'), value: true},
+          {label: _('Hide'), value: false},
+        ]}
+      />
+      <Radio
+        attr="pathbar.side"
+        options={[
+          {label: _('Top'), value: 'top'},
+          {label: _('Bottom'), value: 'bottom'},
+        ]}
+        label={_('Side')}
+      />
+    </PlotlySection>
     <PlotlySection name={_('Hover/Tooltip')}>
       <HoveronDropdown attr="hoveron" label={_('Hover on')} />
       <Radio

src/lib/traceTypes.js

@@ -190,6 +190,11 @@ export const traceTypes = _ => [
     label: _('Sunburst'),
     category: chartCategory(_).SPECIALIZED,
   },
+  {
+    value: 'treemap',
+    label: _('Treemap'),
+    category: chartCategory(_).SPECIALIZED,
+  },
   {
     value: 'sankey',
     label: _('Sankey'),