From 483c5977406b2ceb0c7a6798ca5b67a68e2b4b24 Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Tue, 17 Aug 2021 10:14:57 +0200
Subject: [PATCH] Storybook: Fix Graph with Tooltip story (#37937)

---
 .../components/Graph/Graph.story.internal.tsx   | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx b/packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx
index 77369a6c3ba..e90a6cc7ee5 100644
--- a/packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx
+++ b/packages/grafana-ui/src/components/Graph/Graph.story.internal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { dateTime, ArrayVector, FieldType, GraphSeriesXY, FieldColorModeId } from '@grafana/data';
+import { dateTime, ArrayVector, FieldType, GraphSeriesXY, FieldColorModeId, getDisplayProcessor } from '@grafana/data';
 import { Story } from '@storybook/react';
+import { useTheme2 } from '../../themes';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { VizTooltip, TooltipDisplayMode, VizTooltipContentProps } from '../VizTooltip';
 import { JSONFormatter } from '../JSONFormatter/JSONFormatter';
@@ -108,9 +109,19 @@ export default {
   },
 };
 
-export const WithTooltip: Story<GraphProps & { tooltipMode: TooltipDisplayMode }> = ({ tooltipMode, ...args }) => {
+export const WithTooltip: Story<GraphProps & { tooltipMode: TooltipDisplayMode }> = ({
+  tooltipMode,
+  series,
+  ...args
+}) => {
+  const theme = useTheme2();
+  const seriesWithDisplay = series.map((data) => ({
+    ...data,
+    valueField: { ...data.valueField, display: getDisplayProcessor({ field: data.valueField, theme }) },
+  }));
+
   return (
-    <Graph {...args}>
+    <Graph series={seriesWithDisplay} {...args}>
       <VizTooltip mode={tooltipMode} />
     </Graph>
   );