Enterprise3.4

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.40.3",
+  "version": "0.41.0",
   "author": "Plotly, Inc.",
   "bugs": {
     "url": "https://github.com/plotly/react-chart-editor/issues"
@@ -34,8 +34,8 @@
     "draft-js-utils": "^1.3.3",
     "fast-isnumeric": "^1.1.2",
     "immutability-helper": "^3.0.0",
-    "plotly-icons": "1.3.13",
-    "plotly.js": "1.51.3",
+    "plotly-icons": "1.3.14",
+    "plotly.js": "1.52.1",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "react-color": "^2.17.0",

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/Dropzone.js

@@ -27,7 +27,7 @@ UnconnectedDropzone.propTypes = {
 UnconnectedDropzone.displayName = 'UnconnectedDropzone';
 
 function modifyPlotProps(props, context, plotProps) {
-  if (context.container.type === 'choroplethmapbox') {
+  if (context.container.type === 'choroplethmapbox' || context.container.type === 'choropleth') {
     plotProps.isVisible = true;
   }
 }

src/components/fields/LocationSelector.js

@@ -28,6 +28,7 @@ class UnconnectedLocation extends Component {
           attr="locationmode"
           clearable={false}
           options={[
+            {label: _('GeoJSON feature'), value: 'geojson-id'},
             {label: _('Country Names'), value: 'country names'},
             {label: _('Country Abbreviations (ISO-3)'), value: 'ISO-3'},
             {

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   DataSelector,
   Dropdown,
+  DropdownCustom,
   Radio,
   PlotlySection,
   AxesCreator,
@@ -37,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
@@ -74,6 +75,17 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => {
         }}
         attr="z"
       />
+      <DropdownCustom
+        label={_('GeoJSON Location Field')}
+        attr="featureidkey"
+        options={[
+          {label: _('id'), value: 'id'},
+          {label: _('Custom'), value: 'custom'},
+        ]}
+        customOpt="custom"
+        dafaultOpt=""
+        clearable={false}
+      />
       <Numeric label={_('Radius')} attr="radius" min={0} max={50} showSlider />
       <DataSelector label={_('Measure')} attr="measure" />
 

src/default_panels/StyleLayoutPanel.js

@@ -54,7 +54,7 @@ const StyleLayoutPanel = (props, {localize: _}) => (
       </PlotlySection>
       <PlotlySection name={_('Text')} attr="font.family">
         <FontSelector label={_('Typeface')} attr="font.family" clearable={false} />
-        <Numeric label={_('Font Size')} attr="font.size" units="px" />
+        <Numeric label={_('Base Font Size')} attr="font.size" units="px" />
         <ColorPicker label={_('Font Color')} attr="font.color" />
         <Dropdown
           label={_('Number format')}
@@ -67,6 +67,17 @@ const StyleLayoutPanel = (props, {localize: _}) => (
           ]}
           clearable={false}
         />
+        <Dropdown
+          label={_('Uniform Text Mode')}
+          attr="uniformtext.mode"
+          options={[
+            {label: _('Off'), value: false},
+            {label: _('Show'), value: 'show'},
+            {label: _('Hide'), value: 'hide'},
+          ]}
+          clearable={false}
+        />
+        <Numeric label={_('Uniform Text Size Minimum')} attr="uniformtext.minsize" units="px" />
       </PlotlySection>
     </PlotlyFold>
 

src/default_panels/StyleLegendPanel.js

@@ -9,6 +9,7 @@ import {
   PlotlySection,
   Dropdown,
   TraceRequiredPanel,
+  TextEditor,
 } from '../components';
 
 const StyleLegendPanel = (props, {localize: _}) => (
@@ -21,6 +22,13 @@ const StyleLegendPanel = (props, {localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
+
+      <PlotlySection name={_('Legend Title')}>
+        <TextEditor label={_('Text')} attr="legend.title.text" richTextOnly />
+        <FontSelector label={_('Typeface')} attr="legend.title.font.family" />
+        <Numeric label={_('Size')} attr="legend.title.font.size" units="px" />
+        <ColorPicker label={_('Color')} attr="legend.title.font.color" />
+      </PlotlySection>
       <PlotlySection name={_('Text')}>
         <FontSelector label={_('Typeface')} attr="legend.font.family" />
         <Numeric label={_('Size')} attr="legend.font.size" units="px" />

src/default_panels/StyleMapsPanel.js

@@ -35,6 +35,16 @@ const StyleMapsPanel = (props, {localize: _}) => (
       <Numeric label={_('Zoom Level')} attr="zoom" min={0} />
       <Numeric label={_('Bearing')} attr="bearing" />
       <Numeric label={_('Pitch')} attr="pitch" min={0} />
+      <Dropdown
+        label={_('Bounds Fitting')}
+        attr="fitbounds"
+        options={[
+          {label: _('Off'), value: false},
+          {label: _('Locations'), value: 'locations'},
+          {label: _('GeoJSON'), value: 'geojson'},
+        ]}
+        clearable={false}
+      />
     </PlotlySection>
 
     <PlotlySection name={_('Map Projection')}>
@@ -84,6 +94,28 @@ const StyleMapsPanel = (props, {localize: _}) => (
           {label: _('Sinusoidal'), value: 'sinusoidal'},
         ]}
       />
+      <Numeric label={_('Scale')} attr="projection.scale" min={0} />
+      <Numeric label={_('Center Latitude')} attr="projection.rotation.lon" min={0} />
+      <Numeric label={_('Center Longitude')} attr="projection.rotation.lat" min={0} />
+      <Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
+    </PlotlySection>
+
+    <PlotlySection name={_('Base Map')} attr="visible">
+      <Radio
+        attr="visible"
+        options={[
+          {label: _('Show'), value: true},
+          {label: _('Hide'), value: false},
+        ]}
+      />
+      <Radio
+        label={_('Resolution')}
+        attr="resolution"
+        options={[
+          {label: _('1:110,000,000'), value: 110},
+          {label: _('1:50,000,000'), value: 50},
+        ]}
+      />
     </PlotlySection>
 
     <PlotlySection name={_('Country Borders')} attr="showcountries">
@@ -172,21 +204,6 @@ const StyleMapsPanel = (props, {localize: _}) => (
       <Numeric label={_('Width')} attr="framewidth" units="px" />
       <ColorPicker label={_('Color')} attr="framecolor" />
     </PlotlySection>
-
-    <PlotlySection name={_('Map Options')}>
-      <Radio
-        label={_('Resolution')}
-        attr="resolution"
-        options={[
-          {label: _('1:110,000,000'), value: 110},
-          {label: _('1:50,000,000'), value: 50},
-        ]}
-      />
-      <Numeric label={_('Scale')} attr="projection.scale" min={0} />
-      <Numeric label={_('Latitude')} attr="projection.rotation.lon" min={0} />
-      <Numeric label={_('Longitude')} attr="projection.rotation.lat" min={0} />
-      <Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
-    </PlotlySection>
   </SubplotAccordion>
 );
 

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')}
@@ -633,9 +642,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
       <Numeric label={_('Width')} attr="notchwidth" min={0} max={0.5} step={0.1} />
     </PlotlySection>
-    <PlotlySection name={_('Text Attributes')}>
-      <TextInfo attr="textinfo" />
-    </PlotlySection>
     <TraceTypeSection
       name={_('Text')}
       traceTypes={allTraceTypes.filter(
@@ -653,11 +659,38 @@ const StyleTracesPanel = (props, {localize: _}) => (
       )}
       mode="trace"
     >
-      <DataSelector label={_('Text')} attr="text" />
       <TextPosition label={_('Text Position')} attr="textposition" />
+      <HoverTemplateSwitch attr="texttemplate" label={_('Mode')} />
+      <TextInfo attr="textinfo" label={_('Show')} />
+      <HoverTemplateText attr="texttemplate" label={_('Template')} />
+      <DataSelector label={_('Text')} attr="text" />
       <FontSelector label={_('Typeface')} attr="textfont.family" />
       <Numeric label={_('Font Size')} attr="textfont.size" units="px" />
       <MultiColorPicker label={_('Font Color')} attr="textfont.color" />
+      <Dropdown
+        label={_('Inside Text Orientation')}
+        options={[
+          {label: _('Auto'), value: 'auto'},
+          {label: _('Radial'), value: 'radial'},
+          {label: _('Tangential'), value: 'tangential'},
+          {label: _('Horizontal'), value: 'horizontal'},
+        ]}
+        attr="insidetextorientation"
+        clearable={false}
+      />
+      <Dropdown
+        label={_('Text Angle')}
+        options={[
+          {label: _('Auto'), value: 'auto'},
+          {label: _('Horizontal'), value: 0},
+          {label: _('Vertical Up'), value: -90},
+          {label: _('Vertical Down'), value: 90},
+          {label: _('Angled Down'), value: 45},
+          {label: _('Angled Up'), value: -45},
+        ]}
+        attr="textangle"
+        clearable={false}
+      />
       <Dropdown
         label={_('Constrain Text')}
         options={[
@@ -855,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'),