Merge pull request #777 from plotly/plotly_142

Tracking Plotly 1.42.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-chart-editor",
   "description": "plotly.js chart editor react component UI",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "author": "Plotly, Inc.",
   "bugs": {
     "url": "https://github.com/plotly/react-chart-editor/issues"
@@ -15,7 +15,7 @@
     "fast-isnumeric": "^1.1.1",
     "immutability-helper": "^2.7.1",
     "plotly-icons": "1.2.2",
-    "plotly.js": "1.41.3",
+    "plotly.js": "1.42.0",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "react-color": "^2.13.8",

src/components/containers/TraceMarkerSection.js

@@ -18,7 +18,7 @@ class TraceMarkerSection extends Component {
     if (['bar', 'histogram'].includes(traceType)) {
       this.name = _('Bars');
     } else if (traceType === 'pie') {
-      this.name = _('Segments');
+      this.name = _('Pie Segments');
     } else {
       this.name = _('Points');
     }

src/components/fields/derived.js

@@ -118,15 +118,6 @@ export const ContourNumeric = connectToContainer(UnconnectedNumeric, {
   },
 });
 
-export const BinningNumeric = connectToContainer(UnconnectedNumeric, {
-  modifyPlotProps: (props, context, plotProps) => {
-    const {fullContainer} = plotProps;
-    if (plotProps.isVisible && fullContainer && fullContainer[`autobin${props.axis}`]) {
-      plotProps.isVisible = false;
-    }
-  },
-});
-
 export const BinningDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _} = context;

src/default_panels/StyleLayoutPanel.js

@@ -13,6 +13,7 @@ import {
   VisibilitySelect,
   HovermodeDropdown,
   Flaglist,
+  Radio,
 } from '../components';
 import {HoverColor} from '../components/fields/derived';
 
@@ -46,6 +47,17 @@ const StyleLayoutPanel = (props, {localize: _}) => (
         <ColorPicker label={_('Font Color')} attr="titlefont.color" />
       </PlotlySection>
     </PlotlyFold>
+
+    <PlotlyFold name={_('Modebar')}>
+      <Radio
+        label={_('Orientation')}
+        attr="modebar.orientation"
+        options={[{label: _('Horizontal'), value: 'h'}, {label: _('Vertical'), value: 'v'}]}
+      />
+      <ColorPicker label={_('Icon Color')} attr="modebar.color" />
+      <ColorPicker label={_('Active Icon Color')} attr="modebar.activecolor" />
+      <ColorPicker label={_('Background Color')} attr="modebar.bgcolor" />
+    </PlotlyFold>
     <PlotlyFold name={_('Layout')}>
       <VisibilitySelect
         attr="autosize"

src/default_panels/StyleTracesPanel.js

@@ -33,7 +33,6 @@ import {
   GroupCreator,
 } from '../components';
 import {
-  BinningNumeric,
   BinningDropdown,
   NumericReciprocal,
   ShowInLegend,
@@ -85,6 +84,24 @@ const StyleTracesPanel = (props, {localize: _}) => (
         />
       </LayoutSection>
     </TraceTypeSection>
+    <PlotlySection name={_('Pie Title')} attr="title">
+      <TextEditor label={_('Name')} attr="title" />
+      <Dropdown
+        label={'Title Position'}
+        attr="titleposition"
+        options={[
+          {label: _('Top Left'), value: 'top left'},
+          {label: _('Top Center'), value: 'top center'},
+          {label: _('Top Right'), value: 'top right'},
+          {label: _('Middle Center'), value: 'middle center'},
+          {label: _('Bottom Left'), value: 'bottom left'},
+          {label: _('Bottom Center'), value: 'bottom center'},
+          {label: _('Bottom Right'), value: 'bottom right'},
+        ]}
+      />
+      <FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
+      <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
+    </PlotlySection>
     <PlotlySection name={_('Values')}>
       <BinningDropdown label={_('Histogram Function')} attr="histfunc" />
       <Dropdown
@@ -176,23 +193,14 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
     </PlotlySection>
     <PlotlySection name={_('Binning')}>
-      <Radio
-        label={_('X Binning')}
-        attr="autobinx"
-        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
-      />
-      <BinningNumeric label={_('X Bin Start')} attr="xbins.start" axis="x" />
-      <BinningNumeric label={_('X Bin End')} attr="xbins.end" axis="x" />
-      <BinningNumeric label={_('X Bin Size')} attr="xbins.size" axis="x" />
+      <Numeric label={_('X Bin Start')} attr="xbins.start" axis="x" />
+      <Numeric label={_('X Bin End')} attr="xbins.end" axis="x" />
+      <Numeric label={_('X Bin Size')} attr="xbins.size" axis="x" />
       <Numeric label={_('Max X Bins')} attr="nbinsx" />
-      <Radio
-        label={_('Y Binning')}
-        attr="autobiny"
-        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
-      />
-      <BinningNumeric label={_('Y Bin Start')} attr="ybins.start" axis="y" />
-      <BinningNumeric label={_('Y Bin End')} attr="ybins.end" axis="y" />
-      <BinningNumeric label={_('Y Bin Size')} attr="ybins.size" axis="y" />
+
+      <Numeric label={_('Y Bin Start')} attr="ybins.start" axis="y" />
+      <Numeric label={_('Y Bin End')} attr="ybins.end" axis="y" />
+      <Numeric label={_('Y Bin Size')} attr="ybins.size" axis="y" />
       <Numeric label={_('Max Y Bins')} attr="nbinsy" />
     </PlotlySection>
     <PlotlySection label={_('Bar Position')}>
@@ -602,6 +610,11 @@ const StyleTracesPanel = (props, {localize: _}) => (
     </PlotlySection>
     <PlotlySection name={_('On Hover')}>
       <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
+      <Radio
+        label={_('Split labels')}
+        attr="hoverlabel.split"
+        options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
+      />
       <VisibilitySelect
         attr="contour.show"
         label={_('Show Contour')}