Storybook: Cleanup and simplify Tooltip stories (#3952)

recharts · Nov 12, 2023 · 60a72bb · 60a72bb
1 parent 77b42f4
commit 60a72bb
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 179 deletions.
diff --git a/storybook/stories/API/component/Tooltip.stories.tsx b/storybook/stories/API/component/Tooltip.stories.tsx
@@ -3,7 +3,6 @@ import { ResponsiveContainer, Tooltip, LineChart, Line } from '../../../../src';
 import { pageData } from '../../data';
 import { getStoryArgsFromArgsTypesObject } from '../props/utils';
 import { StorybookArgs } from '../../../StorybookArgs';
-import { generateMockData } from '../../../../test/helper/generateMockData';
 
 const TooltipProps: StorybookArgs = {
   separator: {
@@ -260,37 +259,3 @@ export const API = {
     useTranslate3d: false,
   },
 };
-
-export const LargeDataArray = {
-  render: (args: Record<string, any>) => {
-    const [surfaceWidth, surfaceHeight] = [600, 300];
-    return (
-      <ResponsiveContainer width="100%" height={surfaceHeight}>
-        <LineChart
-          width={surfaceWidth}
-          height={surfaceHeight}
-          margin={{
-            top: 20,
-            right: 20,
-            bottom: 20,
-            left: 20,
-          }}
-          data={generateMockData(1000, 334058656)}
-        >
-          {/* The target component */}
-          <Tooltip {...args} />
-          <Line dataKey="x" />
-          <Line dataKey="y" />
-          <Line dataKey="z" />
-        </LineChart>
-      </ResponsiveContainer>
-    );
-  },
-  args: {
-    // This API story should have explicit values for all props
-    ...getStoryArgsFromArgsTypesObject(TooltipProps),
-    trigger: 'hover',
-    shared: false,
-    useTranslate3d: false,
-  },
-};
diff --git a/storybook/stories/API/tooltip/Tooltip.stories.tsx b/storybook/stories/API/tooltip/Tooltip.stories.tsx
diff --git a/storybook/stories/Examples/Tooltip.stories.tsx b/storybook/stories/Examples/Tooltip.stories.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 import { pageData } from '../data';
 import { Area, Bar, ComposedChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from '../../../src';
 import { DefaultTooltipContent } from '../../../src/component/DefaultTooltipContent';
+import { generateMockData } from '../../../test/helper/generateMockData';
 
 export default {
   component: Tooltip,
@@ -135,3 +136,99 @@ export const SeparateDataSetsForChart = {
     );
   },
 };
+
+export const TriggerTooltipByClick = {
+  render: (tooltipArgs: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width="100%" height={400}>
+        <ComposedChart data={pageData}>
+          <Tooltip {...tooltipArgs} />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Line dataKey="uv" />
+        </ComposedChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {
+    trigger: 'click',
+  },
+};
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: payloadType[];
+  label?: number;
+}
+
+type payloadType = {
+  value: string | number;
+  name: string;
+};
+
+const CustomContent = ({ active, payload }: CustomTooltipProps) => {
+  if (active && payload && payload.length > 0) {
+    return (
+      <div
+        style={{
+          backgroundColor: '#5b63ffe7',
+          padding: '10px',
+          borderRadius: '10px',
+          boxShadow: '1px 2px 10px -2px #7873ffb1',
+        }}
+      >
+        {payload.map((pld: payloadType) => (
+          <p
+            key={pld.name}
+            style={{
+              borderStyle: 'solid 1px',
+              fontSize: '13px',
+              fontWeight: '600',
+              fontFamily: 'sans-serif',
+              color: '#fff',
+            }}
+          >
+            {`${pld.name} : ${pld.value}`}
+          </p>
+        ))}
+      </div>
+    );
+  }
+  return null;
+};
+
+export const CustomContentExample = {
+  ...TriggerTooltipByClick,
+  args: {
+    content: <CustomContent />,
+    trigger: 'hover',
+  },
+};
+
+export const LargeDataArray = {
+  render: (args: Record<string, any>) => {
+    const [surfaceWidth, surfaceHeight] = [600, 300];
+    return (
+      <ResponsiveContainer width="100%" height={surfaceHeight}>
+        <ComposedChart
+          width={surfaceWidth}
+          height={surfaceHeight}
+          margin={{
+            top: 20,
+            right: 20,
+            bottom: 20,
+            left: 20,
+          }}
+          data={generateMockData(1000, 334058656)}
+        >
+          {/* The target component */}
+          <Tooltip {...args} />
+          <Line dataKey="x" />
+          <Line dataKey="y" />
+          <Line dataKey="z" />
+        </ComposedChart>
+      </ResponsiveContainer>
+    );
+  },
+  args: {},
+};