Merge pull request #644 from plotly/bugfixes

Style/Traces cleanup

Author: nicolaskruchten

src/components/fields/ErrorBars.js

@@ -77,9 +77,9 @@ class ErrorBars extends Component {
           onOptionChange={this.updatePlot}
           activeOption={this.getMode()}
           options={[
+            {label: _('None'), value: 'hidden'},
             {label: _('Symmetric'), value: 'symmetric'},
             {label: _('Asymmetric'), value: 'asymmetric'},
-            {label: _('Hidden'), value: 'hidden'},
           ]}
         />
       </Field>

src/components/fields/derived.js

@@ -461,7 +461,7 @@ export const TextPosition = connectToContainer(UnconnectedDropdown, {
       {label: _('Bottom Center'), value: 'bottom center'},
       {label: _('Bottom Right'), value: 'bottom right'},
     ];
-    if (context.container.type === 'pie') {
+    if (context.container.type === 'pie' || context.container.type === 'bar') {
       options = [
         {label: _('Inside'), value: 'inside'},
         {label: _('Outside'), value: 'outside'},
@@ -477,11 +477,7 @@ export const TextPosition = connectToContainer(UnconnectedDropdown, {
 export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _, container} = context;
-    let options = [
-      {label: _('X'), value: 'x'},
-      {label: _('Y'), value: 'y'},
-      {label: _('Name'), value: 'name'},
-    ];
+    let options = [{label: _('X'), value: 'x'}, {label: _('Y'), value: 'y'}];
 
     if (
       [
@@ -496,24 +492,13 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         'mesh3d',
       ].includes(container.type)
     ) {
-      options = [
-        {label: _('X'), value: 'x'},
-        {label: _('Y'), value: 'y'},
-        {label: _('Z'), value: 'z'},
-        {label: _('Name'), value: 'name'},
-      ];
-    }
-
-    if (container.mode && container.mode.includes('text')) {
-      options.push({label: _('Text'), value: 'text'});
+      options.push({label: _('Z'), value: 'z'});
     }
 
     if (container.type === 'choropleth') {
       options = [
         {label: _('Location'), value: 'location'},
         {label: _('Values'), value: 'z'},
-        {label: _('Text'), value: 'text'},
-        {label: _('Name'), value: 'name'},
       ];
     }
 
@@ -522,17 +507,13 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         {label: _('Longitude'), value: 'loc'},
         {label: _('Latitude'), value: 'lat'},
         {label: _('Location'), value: 'location'},
-        {label: _('Text'), value: 'text'},
-        {label: _('Name'), value: 'name'},
       ];
     }
 
     if (container.type === 'scattermapbox') {
       options = [
         {label: _('Longitude'), value: 'loc'},
         {label: _('Latitude'), value: 'lat'},
-        {label: _('Text'), value: 'text'},
-        {label: _('Name'), value: 'name'},
       ];
     }
 
@@ -541,8 +522,6 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         {label: _('A'), value: 'a'},
         {label: _('B'), value: 'b'},
         {label: _('C'), value: 'c'},
-        {label: _('Text'), value: 'text'},
-        {label: _('Name'), value: 'name'},
       ];
     }
 
@@ -554,8 +533,6 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       options = [
         {label: _('R'), value: 'r'},
         {label: _('Theta'), value: 'theta'},
-        {label: _('Text'), value: 'text'},
-        {label: _('Name'), value: 'name'},
       ];
     }
 
@@ -564,11 +541,15 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         {label: _('Label'), value: 'label'},
         {label: _('Value'), value: 'value'},
         {label: _('Percent'), value: 'percent'},
-        {label: _('Text'), value: 'text'},
-        {label: _('Name'), value: 'name'},
       ];
     }
 
+    if (container.text) {
+      options.push({label: _('Text'), value: 'text'});
+    }
+
+    options.push({label: _('Trace name'), value: 'name'});
+
     plotProps.options = options;
   },
 });

src/default_panels/GraphCreatePanel.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {
   DataSelector,
   Dropdown,
-  ErrorBars,
   Radio,
   PlotlySection,
   LayoutSection,
@@ -103,18 +102,6 @@ const GraphCreatePanel = (props, {localize: _}) => {
       <AxesCreator attr="fake_attr" />
       <SubplotCreator attr="fake_attr" />
 
-      <PlotlySection name={_('Error Bars X')}>
-        <ErrorBars attr="error_x" />
-      </PlotlySection>
-
-      <PlotlySection name={_('Error Bars Y')}>
-        <ErrorBars attr="error_y" />
-      </PlotlySection>
-
-      <PlotlySection name={_('Error Bars Z')}>
-        <ErrorBars attr="error_z" />
-      </PlotlySection>
-
       <PlotlySection name={_('Header Options')}>
         <DataSelector label={_('Fill Color')} attr="header.fill.color" />
         <DataSelector label={_('Font Color')} attr="header.font.color" />

src/default_panels/StyleTracesPanel.js

@@ -26,6 +26,7 @@ import {
   MarkerSize,
   MarkerColor,
   MultiColorPicker,
+  ErrorBars,
   DataSelector,
   VisibilitySelect,
 } from '../components';
@@ -354,13 +355,14 @@ const StyleTracesPanel = (props, {localize: _}) => (
         'pie',
         'scatter3d',
         'scatterternary',
+        'bar',
       ]}
     >
       <DataSelector label={_('Text')} attr="text" />
+      <TextPosition label={_('Text Position')} attr="textposition" />
       <FontSelector label={_('Typeface')} attr="textfont.family" />
       <Numeric label={_('Font Size')} attr="textfont.size" units="px" />
       <MultiColorPicker label={_('Font Color')} attr="textfont.color" />
-      <TextPosition label={_('Text Position')} attr="textposition" />
     </TraceTypeSection>
     <PlotlySection name={_('Colorscale')}>
       <ColorscalePicker label={_('Colorscale')} attr="colorscale" />
@@ -616,6 +618,24 @@ const StyleTracesPanel = (props, {localize: _}) => (
         clearable={false}
       />
     </TraceTypeSection>
+
+    <TraceTypeSection
+      name={_('Error Bars X')}
+      traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
+    >
+      <ErrorBars attr="error_x" />
+    </TraceTypeSection>
+
+    <TraceTypeSection
+      name={_('Error Bars Y')}
+      traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
+    >
+      <ErrorBars attr="error_y" />
+    </TraceTypeSection>
+
+    <TraceTypeSection name={_('Error Bars Z')} traceTypes={['scatter3d']}>
+      <ErrorBars attr="error_z" />
+    </TraceTypeSection>
   </TraceAccordion>
 );