LineGraph addityional story + storybook upgrade

linode · Dec 14, 2023 · 10c1e1a · 10c1e1a
1 parent f70a7df
commit 10c1e1a
Show file tree

Hide file tree

Showing 4 changed files with 931 additions and 778 deletions.
diff --git a/packages/manager/.storybook/main.ts b/packages/manager/.storybook/main.ts
@@ -13,6 +13,7 @@ const config: StorybookConfig = {
     '@storybook/addon-measure',
     '@storybook/addon-actions',
     'storybook-dark-mode',
+    '@storybook/addon-storysource',
   ],
   staticDirs: ['../public'],
   framework: {

diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -112,16 +112,17 @@
   },
   "devDependencies": {
     "@linode/eslint-plugin-cloud-manager": "^0.0.3",
-    "@storybook/addon-actions": "~7.5.2",
-    "@storybook/addon-controls": "~7.5.2",
-    "@storybook/addon-docs": "~7.5.2",
-    "@storybook/addon-measure": "~7.5.2",
-    "@storybook/addon-viewport": "~7.5.2",
-    "@storybook/addons": "~7.5.2",
-    "@storybook/client-api": "~7.5.2",
-    "@storybook/react": "~7.5.2",
-    "@storybook/react-vite": "^7.5.2",
-    "@storybook/theming": "~7.5.2",
+    "@storybook/addon-actions": "~7.6.4",
+    "@storybook/addon-controls": "~7.6.4",
+    "@storybook/addon-docs": "~7.6.4",
+    "@storybook/addon-measure": "~7.6.4",
+    "@storybook/addon-storysource": "^7.6.4",
+    "@storybook/addon-viewport": "~7.6.4",
+    "@storybook/addons": "~7.6.4",
+    "@storybook/client-api": "~7.6.4",
+    "@storybook/react": "~7.6.4",
+    "@storybook/react-vite": "^7.6.4",
+    "@storybook/theming": "~7.6.4",
     "@swc/core": "^1.3.1",
     "@testing-library/cypress": "^10.0.0",
     "@testing-library/jest-dom": "~5.11.3",
@@ -203,8 +204,8 @@
     "redux-mock-store": "^1.5.3",
     "reselect-tools": "^0.0.7",
     "serve": "^14.0.1",
-    "storybook": "~7.5.2",
-    "storybook-dark-mode": "^3.0.1",
+    "storybook": "~7.6.4",
+    "storybook-dark-mode": "^3.0.3",
     "vite": "^5.0.7",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^1.0.4"

diff --git a/packages/manager/src/components/LineGraph/LineGraph.stories.tsx b/packages/manager/src/components/LineGraph/LineGraph.stories.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
 
 import { LineGraph } from 'src/components/LineGraph/LineGraph';
+import { formatPercentage, getMetrics } from 'src/utilities/statMetrics';
 
 import type { DataSet, LineGraphProps } from './LineGraph';
 import type { Meta, StoryObj } from '@storybook/react';
 
-export const Default: StoryObj<LineGraphProps> = {
-  render: (args) => <LineGraph {...args} />,
-};
-
 const data: DataSet['data'] = [
   [1644330600000, 0.45],
   [1644330900000, 0.45],
@@ -46,6 +43,28 @@ const data: DataSet['data'] = [
   [1644340500000, 0.45],
 ];
 
+const metrics = getMetrics(data as number[][]);
+
+export const Default: StoryObj<LineGraphProps> = {
+  render: (args) => <LineGraph {...args} />,
+};
+
+export const WithLegend: StoryObj<LineGraphProps> = {
+  render: (args) => (
+    <LineGraph
+      {...args}
+      legendRows={[
+        {
+          data: metrics,
+          format: formatPercentage,
+          legendColor: 'blue',
+          legendTitle: 'CPU %',
+        },
+      ]}
+    />
+  ),
+};
+
 const meta: Meta<LineGraphProps> = {
   args: {
     accessibleDataTable: {