hovertemplate

Author: nicolaskruchten

src/components/fields/derived.js

@@ -518,6 +518,17 @@ export const TextInfo = connectToContainer(UnconnectedFlaglist, {
   },
 });
 
+export const HoverTemplateSwitch = connectToContainer(UnconnectedRadio, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
+
+    plotProps.options = [
+      {label: _('Basic'), value: ''},
+      {label: _('Advanced'), value: plotProps.fullValue || 'template'},
+    ];
+  },
+});
+
 export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _, container} = context;

src/components/fields/index.js

@@ -43,6 +43,7 @@ import {
   ContourNumeric,
   FillDropdown,
   HoverInfo,
+  HoverTemplateSwitch,
   NumericFraction,
   NumericFractionDomain,
   PositioningNumeric,
@@ -85,6 +86,7 @@ export {
   Flaglist,
   FontSelector,
   HoverInfo,
+  HoverTemplateSwitch,
   Info,
   NumericFraction,
   NumericFractionDomain,

src/components/index.js

@@ -24,6 +24,7 @@ import {
   Flaglist,
   FontSelector,
   HoverInfo,
+  HoverTemplateSwitch,
   Info,
   NumericFraction,
   NumericFractionDomain,
@@ -132,6 +133,7 @@ export {
   Fold,
   FontSelector,
   HoverInfo,
+  HoverTemplateSwitch,
   Info,
   NumericFraction,
   NumericFractionDomain,

src/default_panels/StyleTracesPanel.js

@@ -20,6 +20,7 @@ import {
   ColorscalePicker,
   ColorwayPicker,
   HoverInfo,
+  HoverTemplateSwitch,
   Dropdown,
   FillDropdown,
   FontSelector,
@@ -611,7 +612,9 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MultiColorPicker label={_('Meanline Color')} attr="meanline.color" />
     </PlotlySection>
     <PlotlySection name={_('On Hover')}>
+      <HoverTemplateSwitch attr="hovertemplate" label={_('Mode')} />
       <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
+      <TextEditor attr="hovertemplate" label={_('Text Template')} />
       <Radio
         label={_('Split labels')}
         attr="hoverlabel.split"