Tooltips: Components update (#77410)

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

@@ -0,0 +1,69 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2, GraphSeriesValue } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
+import { HorizontalGroup } from '../Layout/Layout';
+
+import { VizTooltipColorIndicator } from './VizTooltipColorIndicator';
+import { ColorIndicator } from './types';
+
+export interface SeriesListProps {
+  series: SingleSeriesProps[];
+}
+
+// Based on SeriesTable, with new styling
+export const SeriesList = ({ series }: SeriesListProps) => {
+  return (
+    <>
+      {series.map((series, index) => {
+        return (
+          <SingleSeries
+            isActive={series.isActive}
+            label={series.label}
+            color={series.color}
+            value={series.value}
+            key={`${series.label}-${index}`}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export interface SingleSeriesProps {
+  color?: string;
+  label?: React.ReactNode;
+  value?: string | GraphSeriesValue;
+  isActive?: boolean;
+  colorIndicator?: ColorIndicator;
+}
+
+const SingleSeries = ({ label, value, color, colorIndicator = ColorIndicator.series, isActive }: SingleSeriesProps) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <HorizontalGroup justify="space-between" spacing="md" className={styles.hgContainer}>
+      <>
+        {color && <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} />}
+        {label && <div className={cx(styles.label, isActive && styles.activeSeries)}>{label}</div>}
+      </>
+      {value && <div className={cx(isActive && styles.activeSeries)}>{value}</div>}
+    </HorizontalGroup>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  hgContainer: css({
+    flexGrow: 1,
+  }),
+  activeSeries: css({
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.colors.text.maxContrast,
+  }),
+  label: css({
+    color: theme.colors.text.secondary,
+    fontWeight: 400,
+  }),
+});

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

@@ -0,0 +1,64 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../themes';
+
+import { ColorIndicator } from './types';
+import { getColorIndicatorClass } from './utils';
+
+interface Props {
+  color: string;
+  colorIndicator: ColorIndicator;
+}
+
+export type ColorIndicatorStyles = ReturnType<typeof getStyles>;
+
+export const VizTooltipColorIndicator = ({ color, colorIndicator = ColorIndicator.value }: Props) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <span
+      style={{ backgroundColor: color }}
+      className={cx(styles.colorIndicator, getColorIndicatorClass(colorIndicator, styles))}
+    />
+  );
+};
+
+// @TODO Update classes/add svgs
+const getStyles = (theme: GrafanaTheme2) => ({
+  colorIndicator: css({
+    marginRight: theme.spacing(0.5),
+  }),
+  series: css({
+    width: '14px',
+    height: '4px',
+    borderRadius: theme.shape.radius.pill,
+  }),
+  value: css({
+    width: '12px',
+    height: '12px',
+    borderRadius: theme.shape.radius.default,
+    fontWeight: 500,
+  }),
+  hexagon: css({}),
+  pie_1_4: css({}),
+  pie_2_4: css({}),
+  pie_3_4: css({}),
+  marker_sm: css({
+    width: '4px',
+    height: '4px',
+    borderRadius: theme.shape.radius.circle,
+  }),
+  marker_md: css({
+    width: '8px',
+    height: '8px',
+    borderRadius: theme.shape.radius.circle,
+  }),
+  marker_lg: css({
+    width: '12px',
+    height: '12px',
+    borderRadius: theme.shape.radius.circle,
+  }),
+});

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

@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -6,15 +6,13 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { HorizontalGroup } from '..';
 import { useStyles2 } from '../../themes';
 
+import { VizTooltipColorIndicator } from './VizTooltipColorIndicator';
 import { LabelValue } from './types';
-import { getColorIndicatorClass } from './utils';
 
 interface Props {
   keyValuePairs?: LabelValue[];
 }
 
-export type HeaderLabelValueStyles = ReturnType<typeof getStyles>;
-
 export const VizTooltipHeaderLabelValue = ({ keyValuePairs }: Props) => {
   const styles = useStyles2(getStyles);
 
@@ -25,10 +23,9 @@ export const VizTooltipHeaderLabelValue = ({ keyValuePairs }: Props) => {
           <HorizontalGroup justify="space-between" spacing="md" className={styles.hgContainer} key={i}>
             <div className={styles.label}>{keyValuePair.label}</div>
             <>
-              <span
-                style={{ backgroundColor: keyValuePair.color }}
-                className={cx(styles.colorIndicator, getColorIndicatorClass(keyValuePair.colorIndicator!, styles))}
-              />
+              {keyValuePair.color && (
+                <VizTooltipColorIndicator color={keyValuePair.color} colorIndicator={keyValuePair.colorIndicator!} />
+              )}
               {keyValuePair.value}
             </>
           </HorizontalGroup>
@@ -38,46 +35,12 @@ export const VizTooltipHeaderLabelValue = ({ keyValuePairs }: Props) => {
   );
 };
 
-// @TODO Update classes/add svgs?
 const getStyles = (theme: GrafanaTheme2) => ({
   hgContainer: css({
     flexGrow: 1,
   }),
-  colorIndicator: css({
-    marginRight: theme.spacing(0.5),
-  }),
   label: css({
     color: theme.colors.text.secondary,
     fontWeight: 400,
   }),
-  series: css({
-    width: '14px',
-    height: '4px',
-    borderRadius: theme.shape.radius.pill,
-  }),
-  value: css({
-    width: '12px',
-    height: '12px',
-    borderRadius: theme.shape.radius.default,
-    fontWeight: 500,
-  }),
-  hexagon: css({}),
-  pie_1_4: css({}),
-  pie_2_4: css({}),
-  pie_3_4: css({}),
-  marker_sm: css({
-    width: '4px',
-    height: '4px',
-    borderRadius: theme.shape.radius.circle,
-  }),
-  marker_md: css({
-    width: '8px',
-    height: '8px',
-    borderRadius: theme.shape.radius.circle,
-  }),
-  marker_lg: css({
-    width: '12px',
-    height: '12px',
-    borderRadius: theme.shape.radius.circle,
-  }),
 });

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

@@ -1,4 +1,4 @@
-import { HeaderLabelValueStyles } from './VizTooltipHeaderLabelValue';
+import { ColorIndicatorStyles } from './VizTooltipColorIndicator';
 import { ColorIndicator } from './types';
 
 export const calculateTooltipPosition = (
@@ -42,7 +42,7 @@ export const calculateTooltipPosition = (
   return { x, y };
 };
 
-export const getColorIndicatorClass = (colorIndicator: string, styles: HeaderLabelValueStyles) => {
+export const getColorIndicatorClass = (colorIndicator: string, styles: ColorIndicatorStyles) => {
   switch (colorIndicator) {
     case ColorIndicator.value:
       return styles.value;