tweaks

Author: nicolaskruchten

src/default_panels/StyleLayoutPanel.js

@@ -26,8 +26,12 @@ const StyleLayoutPanel = (props, {localize: _}) => (
       <PlotlySection name={_('Color Scales')} attr="colorway">
         <ColorwayPicker label={_('Categorical')} attr="colorway" />
         <ColorscalePicker label={_('Sequential')} attr="colorscale.sequential" />
-        <ColorscalePicker label={_('Diverging')} attr="colorscale.diverging" />
-        <ColorscalePicker label={_('Sequential Negative')} attr="colorscale.sequentialminus" />
+        <ColorscalePicker
+          label={_('Diverging')}
+          attr="colorscale.diverging"
+          initialCategory="divergent"
+        />
+        <ColorscalePicker label={_('Negative Sequential')} attr="colorscale.sequentialminus" />
       </PlotlySection>
       <PlotlySection name={_('Text')} attr="font.family">
         <FontSelector label={_('Typeface')} attr="font.family" clearable={false} />

src/default_panels/StyleTracesPanel.js

@@ -144,7 +144,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
         ]}
       />
     </PlotlySection>
-
     <PlotlySection name={_('Header')}>
       <Numeric label={_('Height')} attr="header.height" />
       <MultiColorPicker label={_('Fill Color')} attr="header.fill.color" />
@@ -195,7 +194,38 @@ const StyleTracesPanel = (props, {localize: _}) => (
         label={_('Flatshading')}
         options={[{label: _('Enable'), value: true}, {label: _('Disable'), value: false}]}
       />
-    </PlotlySection>
+    </PlotlySection>{' '}
+    <TraceTypeSection
+      name={_('Bar Grouping, Sizing and Spacing')}
+      traceTypes={['bar', 'histogram']}
+      mode="trace"
+    >
+      <LayoutSection attr="name">
+        <Dropdown
+          label={_('Bar Mode')}
+          attr="barmode"
+          options={[
+            {label: _('Grouped'), value: 'group'},
+            {label: _('Positive/Negative Stacked'), value: 'relative'},
+            {label: _('Strict Sum Stacked'), value: 'stack'},
+            {label: _('Overlaid'), value: 'overlay'},
+          ]}
+          clearable={false}
+        />
+        <Dropdown
+          label={_('Normalization')}
+          attr="barnorm"
+          options={[
+            {label: _('None'), value: ''},
+            {label: _('Fraction'), value: 'fraction'},
+            {label: _('Percent'), value: 'percent'},
+          ]}
+          clearable={false}
+        />
+        <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
+        <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
+      </LayoutSection>
+    </TraceTypeSection>
     <PlotlySection name={_('Binning')}>
       <NumericOrDate label={_('X Bin Start')} attr="xbins.start" axis="x" />
       <NumericOrDate label={_('X Bin End')} attr="xbins.end" axis="x" />
@@ -212,7 +242,29 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Numeric label={_('Offset')} attr="offset" />
       <Numeric label={_('Width')} attr="width" />
     </PlotlySection>
-
+    <TraceTypeSection name={_('Box Size and Spacing')} traceTypes={['box']} mode="trace">
+      <LayoutSection attr="name">
+        <Radio
+          label={_('Box Mode')}
+          attr="boxmode"
+          options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
+        />
+        <NumericFractionInverse label={_('Box Width')} attr="boxgap" />
+        <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
+      </LayoutSection>
+    </TraceTypeSection>
+    <TraceTypeSection name={_('Violin Size and Spacing')} traceTypes={['violin']} mode="trace">
+      <LayoutSection attr="name">
+        <Radio
+          label={_('Violin Mode')}
+          attr="violinmode"
+          options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
+        />
+        <NumericFractionInverse label={_('Violin Width')} attr="violingap" />
+        <NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
+      </LayoutSection>
+    </TraceTypeSection>
+    <NumericFraction label={_('Whisker Width')} attr="whiskerwidth" />
     <TraceMarkerSection>
       <Radio
         label={_('Order')}
@@ -272,62 +324,6 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MultiColorPicker label={_('Border Color')} attr="marker.line.color" />
       <Numeric label={_('Max Number of Points')} attr="marker.maxdisplayed" />
     </TraceMarkerSection>
-
-    <TraceTypeSection
-      name={_('Bar Size and Spacing')}
-      traceTypes={['bar', 'histogram']}
-      mode="trace"
-    >
-      <LayoutSection attr="name">
-        <Dropdown
-          label={_('Bar Mode')}
-          attr="barmode"
-          options={[
-            {label: _('Overlay'), value: 'overlay'},
-            {label: _('Group'), value: 'group'},
-            {label: _('Stack'), value: 'stack'},
-            {label: _('Relative'), value: 'relative'},
-          ]}
-          clearable={false}
-        />
-        <Dropdown
-          label={_('Normalization')}
-          attr="barnorm"
-          options={[
-            {label: _('None'), value: ''},
-            {label: _('Fraction'), value: 'fraction'},
-            {label: _('Percent'), value: 'percent'},
-          ]}
-          clearable={false}
-        />
-        <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
-        <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
-      </LayoutSection>
-    </TraceTypeSection>
-    <TraceTypeSection name={_('Box Size and Spacing')} traceTypes={['box']} mode="trace">
-      <LayoutSection attr="name">
-        <Radio
-          label={_('Box Mode')}
-          attr="boxmode"
-          options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
-        />
-        <NumericFractionInverse label={_('Box Width')} attr="boxgap" />
-        <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
-      </LayoutSection>
-    </TraceTypeSection>
-    <TraceTypeSection name={_('Violin Size and Spacing')} traceTypes={['violin']} mode="trace">
-      <LayoutSection attr="name">
-        <Radio
-          label={_('Violin Mode')}
-          attr="violinmode"
-          options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
-        />
-        <NumericFractionInverse label={_('Violin Width')} attr="violingap" />
-        <NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
-      </LayoutSection>
-    </TraceTypeSection>
-
-    <NumericFraction label={_('Whisker Width')} attr="whiskerwidth" />
     <PlotlySection name={_('Ticks')}>
       <Numeric label={_('Width')} attr="tickwidth" />
     </PlotlySection>
@@ -632,27 +628,23 @@ const StyleTracesPanel = (props, {localize: _}) => (
         <Numeric label={_('Contour Width')} attr="contour.width" />
       </VisibilitySelect>
     </PlotlySection>
-
     <PlotlySection name={_('Hover Action')}>
       <HoveronDropdown attr="hoveron" label={_('Hover on')} />
     </PlotlySection>
-
     <TraceTypeSection
       name={_('Error Bars X')}
       traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
       mode="trace"
     >
       <ErrorBars attr="error_x" />
     </TraceTypeSection>
-
     <TraceTypeSection
       name={_('Error Bars Y')}
       traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
       mode="trace"
     >
       <ErrorBars attr="error_y" />
     </TraceTypeSection>
-
     <TraceTypeSection name={_('Error Bars Z')} traceTypes={['scatter3d']} mode="trace">
       <ErrorBars attr="error_z" />
     </TraceTypeSection>