Tooltip: Improved Timeseries and Candlestick tooltips (#75841)

packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx

@@ -1,21 +1,24 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { FALLBACK_COLOR, GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 
-import { ColorIndicator } from './types';
+import { ColorIndicator, DEFAULT_COLOR_INDICATOR } from './types';
 import { getColorIndicatorClass } from './utils';
 
 interface Props {
-  color: string;
-  colorIndicator: ColorIndicator;
+  color?: string;
+  colorIndicator?: ColorIndicator;
 }
 
 export type ColorIndicatorStyles = ReturnType<typeof getStyles>;
 
-export const VizTooltipColorIndicator = ({ color, colorIndicator = ColorIndicator.value }: Props) => {
+export const VizTooltipColorIndicator = ({
+  color = FALLBACK_COLOR,
+  colorIndicator = DEFAULT_COLOR_INDICATOR,
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   return (

packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx

@@ -19,7 +19,7 @@ export const VizTooltipContent = ({ contentLabelValue, customContent }: Props) =
   return (
     <div className={styles.wrapper}>
       <div>
-        {contentLabelValue?.map((labelValue, i) => {
+        {contentLabelValue.map((labelValue, i) => {
           const { label, value, color, colorIndicator, colorPlacement, isActive } = labelValue;
           return (
             <VizTooltipRow
@@ -29,7 +29,6 @@ export const VizTooltipContent = ({ contentLabelValue, customContent }: Props) =
               color={color}
               colorIndicator={colorIndicator}
               colorPlacement={colorPlacement}
-              colorFirst={false}
               isActive={isActive}
               justify={'space-between'}
             />

packages/grafana-ui/src/components/VizTooltip/VizTooltipHeaderLabelValue.tsx

@@ -16,7 +16,6 @@ export const VizTooltipHeaderLabelValue = ({ keyValuePairs }: Props) => (
         value={keyValuePair.value}
         color={keyValuePair.color}
         colorIndicator={keyValuePair.colorIndicator!}
-        colorFirst={false}
         justify={'space-between'}
       />
     ))}

packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx

@@ -11,7 +11,6 @@ import { ColorPlacement, LabelValue } from './types';
 
 interface Props extends LabelValue {
   justify?: string;
-  colorFirst?: boolean;
   isActive?: boolean; // for series list
   marginRight?: string;
 }
@@ -21,9 +20,8 @@ export const VizTooltipRow = ({
   value,
   color,
   colorIndicator,
-  colorPlacement = ColorPlacement.leading,
+  colorPlacement = ColorPlacement.first,
   justify = 'flex-start',
-  colorFirst = true,
   isActive = false,
   marginRight = '0px',
 }: Props) => {
@@ -52,7 +50,9 @@ export const VizTooltipRow = ({
     <div className={styles.contentWrapper}>
       {(color || label) && (
         <div className={styles.valueWrapper}>
-          {color && colorFirst && <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator!} />}
+          {color && colorPlacement === ColorPlacement.first && (
+            <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />
+          )}
           <Tooltip content={label} interactive={false} show={showLabelTooltip}>
             <div
               className={cx(styles.label, isActive && styles.activeSeries)}
@@ -66,18 +66,18 @@ export const VizTooltipRow = ({
       )}
 
       <div className={styles.valueWrapper}>
-        {color && !colorFirst && colorPlacement === ColorPlacement.leading && (
-          <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator!} />
+        {color && colorPlacement === ColorPlacement.leading && (
+          <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />
         )}
         <Tooltip content={value ? value.toString() : ''} interactive={false} show={showValueTooltip}>
           <div className={cx(styles.value, isActive)} onMouseEnter={onMouseEnterValue} onMouseLeave={onMouseLeaveValue}>
             {value}
           </div>
         </Tooltip>
-        {color && !colorFirst && colorPlacement === ColorPlacement.trailing && (
+        {color && colorPlacement === ColorPlacement.trailing && (
           <>
             &nbsp;
-            <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator!} />
+            <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />
           </>
         )}
       </div>

packages/grafana-ui/src/components/VizTooltip/types.ts

@@ -12,6 +12,7 @@ export enum ColorIndicator {
 
 export enum ColorPlacement {
   hidden = 'hidden',
+  first = 'first',
   leading = 'leading',
   trailing = 'trailing',
 }
@@ -24,3 +25,5 @@ export interface LabelValue {
   colorPlacement?: ColorPlacement;
   isActive?: boolean;
 }
+
+export const DEFAULT_COLOR_INDICATOR = ColorIndicator.series;

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx

@@ -10,6 +10,8 @@ import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 
 import { CloseButton } from './CloseButton';
 
+export const DEFAULT_TOOLTIP_WIDTH = 280;
+
 // todo: barchart? histogram?
 export const enum TooltipHoverMode {
   // Single mode in TimeSeries, Candlestick, Trend, StateTimeline, Heatmap?