Merge pull request #666 from plotly/hoveron-options

correct hoveron options for each trace type

Author: dmt0

dev/percy/panelTest.json

@@ -80,7 +80,7 @@
         "shape": "spline",
         "color": "rgb(31, 119, 180)"
       },
-      "hoveron": "fills+points",
+      "hoveron": "points+fills",
       "uid": "3102ee"
     },
     {
@@ -145,7 +145,7 @@
         "shape": "spline",
         "color": "rgb(31, 119, 180)"
       },
-      "hoveron": "fills+points",
+      "hoveron": "points+fills",
       "uid": "f4d7ad"
     }
   ],

src/components/fields/derived.js

@@ -539,16 +539,12 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       ].includes(container.type)
     ) {
       options.push({label: _('Z'), value: 'z'});
-    }
-
-    if (container.type === 'choropleth') {
+    } else if (container.type === 'choropleth') {
       options = [
         {label: _('Location'), value: 'location'},
         {label: _('Values'), value: 'z'},
       ];
-    }
-
-    if (container.type === 'scattergeo') {
+    } else if (container.type === 'scattergeo') {
       if (container.locations) {
         options = [{label: _('Location'), value: 'location'}];
       } else if (container.lat || container.lon) {
@@ -557,40 +553,30 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
           {label: _('Latitude'), value: 'lat'},
         ];
       }
-    }
-
-    if (container.type === 'scattermapbox') {
+    } else if (container.type === 'scattermapbox') {
       options = [
         {label: _('Longitude'), value: 'loc'},
         {label: _('Latitude'), value: 'lat'},
       ];
-    }
-
-    if (container.type === 'scatterternary') {
+    } else if (container.type === 'scatterternary') {
       options = [
         {label: _('A'), value: 'a'},
         {label: _('B'), value: 'b'},
         {label: _('C'), value: 'c'},
       ];
-    }
-
-    if (container.type === 'table') {
-      plotProps.isVisible = false;
-    }
-
-    if (['scatterpolar', 'scatterpolargl'].includes(container.type)) {
+    } else if (['scatterpolar', 'scatterpolargl'].includes(container.type)) {
       options = [
         {label: _('R'), value: 'r'},
         {label: _('Theta'), value: 'theta'},
       ];
-    }
-
-    if (container.type === 'pie') {
+    } else if (container.type === 'pie') {
       options = [
         {label: _('Label'), value: 'label'},
         {label: _('Value'), value: 'value'},
         {label: _('Percent'), value: 'percent'},
       ];
+    } else if (container.type === 'table') {
+      plotProps.isVisible = false;
     }
 
     if (container.text) {
@@ -625,9 +611,7 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
         {label: _('To Self'), value: 'toself'},
         {label: _('To Next'), value: 'tonext'},
       ];
-    }
-
-    if (
+    } else if (
       context.container.type === 'scattergeo' ||
       context.container.type === 'scattermapbox'
     ) {
@@ -641,3 +625,55 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
     plotProps.clearable = false;
   },
 });
+
+export const HoveronDropdown = connectToContainer(UnconnectedDropdown, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
+
+    let options;
+    if (context.container.type === 'box') {
+      options = [
+        {label: _('Boxes'), value: 'boxes'},
+        {label: _('Points'), value: 'points'},
+        {label: _('Boxes and Points'), value: 'boxes+points'},
+      ];
+    } else if (context.container.type === 'violin') {
+      options = [
+        {label: _('Violins'), value: 'violins'},
+        {label: _('Points'), value: 'points'},
+        {label: _('KDE'), value: 'kde'},
+        {label: _('Violins and Points'), value: 'violins+points'},
+        {label: _('Violins, Points and KDE'), value: 'violins+points+kde'},
+      ];
+    } else {
+      options = [
+        {label: _('Points'), value: 'points'},
+        {label: _('Fills'), value: 'fills'},
+        {label: _('Points and Fills'), value: 'points+fills'},
+      ];
+    }
+
+    plotProps.options = options;
+    plotProps.clearable = false;
+  },
+});
+
+export const HovermodeDropdown = connectToContainer(UnconnectedDropdown, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
+
+    plotProps.options =
+      context.container.xaxis && Object.keys(context.container.xaxis).length > 0
+        ? [
+            {label: _('Closest'), value: 'closest'},
+            {label: _('X Axis'), value: 'x'},
+            {label: _('Y Axis'), value: 'y'},
+            {label: _('Disable'), value: false},
+          ]
+        : [
+            {label: _('Closest'), value: 'closest'},
+            {label: _('Disable'), value: false},
+          ];
+    plotProps.clearable = false;
+  },
+});

src/components/fields/index.js

@@ -48,6 +48,8 @@ import {
   AxisSide,
   TextPosition,
   ShowInLegend,
+  HoveronDropdown,
+  HovermodeDropdown,
 } from './derived';
 import {LineDashSelector, LineShapeSelector} from './LineSelectors';
 
@@ -104,4 +106,6 @@ export {
   VisibilitySelect,
   RectanglePositioner,
   LocationSelector,
+  HoveronDropdown,
+  HovermodeDropdown,
 };

src/components/index.js

@@ -50,6 +50,8 @@ import {
   VisibilitySelect,
   RectanglePositioner,
   LocationSelector,
+  HoveronDropdown,
+  HovermodeDropdown,
 } from './fields';
 
 import {
@@ -157,4 +159,6 @@ export {
   VisibilitySelect,
   RectanglePositioner,
   LocationSelector,
+  HoveronDropdown,
+  HovermodeDropdown,
 };

src/default_panels/StyleLayoutPanel.js

@@ -10,6 +10,7 @@ import {
   PlotlySection,
   TraceRequiredPanel,
   VisibilitySelect,
+  HovermodeDropdown,
 } from '../components';
 
 const StyleLayoutPanel = (props, {localize: _}) => (
@@ -31,17 +32,7 @@ const StyleLayoutPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
       <ColorPicker label={_('Plot Background')} attr="polar.bgcolor" />
       <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
-      <Dropdown
-        label={_('Hover Interaction')}
-        attr="hovermode"
-        options={[
-          {label: _('Closest'), value: 'closest'},
-          {label: _('X Axis'), value: 'x'},
-          {label: _('Y Axis'), value: 'y'},
-          {label: _('Disable'), value: false},
-        ]}
-        clearable={false}
-      />
+      <HovermodeDropdown label={_('Hover Interaction')} attr="hovermode" />
       <Dropdown
         label={_('Drag Interaction')}
         attr="dragmode"

src/default_panels/StyleTracesPanel.js

@@ -36,6 +36,7 @@ import {
   NumericReciprocal,
   ShowInLegend,
   TextInfo,
+  HoveronDropdown,
 } from '../components/fields/derived';
 
 const StyleTracesPanel = (props, {localize: _}) => (
@@ -584,36 +585,10 @@ const StyleTracesPanel = (props, {localize: _}) => (
         <Numeric label={_('Contour Width')} attr="contour.width" />
       </VisibilitySelect>
     </PlotlySection>
-    <TraceTypeSection name={_('Hover Action')} traceTypes={['box']}>
-      <Flaglist
-        attr="hoveron"
-        label={_('Hover on')}
-        options={[
-          {label: _('Boxes'), value: 'boxes'},
-          {label: _('Points'), value: 'points'},
-        ]}
-      />
-    </TraceTypeSection>
-    <TraceTypeSection
-      name={_('Hover Action')}
-      traceTypes={[
-        'scatter',
-        'scatterternary',
-        'scatterpolar',
-        'scatterpolargl',
-      ]}
-    >
-      <Dropdown
-        attr="hoveron"
-        label={_('Hover on')}
-        options={[
-          {label: _('Fills'), value: 'fills'},
-          {label: _('Points'), value: 'points'},
-          {label: _('Fills & Points'), value: 'fills+points'},
-        ]}
-        clearable={false}
-      />
-    </TraceTypeSection>
+
+    <PlotlySection name={_('Hover Action')}>
+      <HoveronDropdown attr="hoveron" label={_('Hover on')} />
+    </PlotlySection>
 
     <TraceTypeSection
       name={_('Error Bars X')}