chore(dataviz): add some storybook decorator utils and examples dir

packages/dataviz/.storybook/main.ts

@@ -1,7 +1,11 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: [
+    '../decorators/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../examples/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+  ],
   addons: ['@storybook/addon-essentials'],
   framework: {
     name: '@storybook/react-vite',

packages/dataviz/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+  rel="stylesheet"
+/>

packages/dataviz/decorators/OutlineOriginCenter.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { OutlineOriginCenter } from './OutlineOriginCenter';
+
+const meta: Meta<typeof OutlineOriginCenter> = {
+  title: 'Decorators/OutlineOriginCenter',
+  component: OutlineOriginCenter,
+  decorators: (Story) => (
+    <svg viewBox="-100 -100 200 200" width="200" height="200">
+      <Story />
+    </svg>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OutlineOriginCenter>;
+
+export const Example: Story = {
+  args: {},
+};

packages/dataviz/decorators/OutlineOriginCenter.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export const OutlineOriginCenter = () => (
+  <>
+    <path
+      d="M -100 -100 H 100 V 100 H -100 V -100 Z"
+      stroke="black"
+      stroke-width="1"
+      fill="none"
+      stroke-dasharray="5,5"
+    />
+    <path
+      d="M -100 0 H 100"
+      stroke="red"
+      stroke-width="1"
+      stroke-dasharray="5,5"
+    />
+    <path
+      d="M 0 -100 V 100"
+      stroke="blue"
+      stroke-width="1"
+      stroke-dasharray="5,5"
+    />
+  </>
+);

packages/dataviz/decorators/OutlineOriginTopLeft.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { OutlineOriginTopLeft } from './OutlineOriginTopLeft';
+
+const meta: Meta<typeof OutlineOriginTopLeft> = {
+  title: 'Decorators/OutlineOriginTopLeft',
+  component: OutlineOriginTopLeft,
+  decorators: (Story) => (
+    <svg viewBox="0 0 200 200" width="200" height="200">
+      <Story />
+    </svg>
+  ),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OutlineOriginTopLeft>;
+
+export const Example: Story = {
+  args: {},
+};

packages/dataviz/decorators/OutlineOriginTopLeft.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const OutlineOriginTopLeft = () => (
+  <>
+    <path
+      d="M 0 0 H 200 V 200"
+      stroke="black"
+      stroke-width="1"
+      fill="none"
+      stroke-dasharray="5,5"
+    />
+    <path
+      d="M 0 0 V 200 H 200"
+      stroke="black"
+      stroke-width="1"
+      fill="none"
+      stroke-dasharray="5,5"
+    />
+    <path
+      d="M 0 0 H 200"
+      stroke="red"
+      stroke-width="1"
+      stroke-dasharray="5,5"
+    />
+    <path
+      d="M 0 0 V 200"
+      stroke="blue"
+      stroke-width="1"
+      stroke-dasharray="5,5"
+    />
+  </>
+);

packages/dataviz/decorators/index.ts

@@ -0,0 +1,2 @@
+export * from './OutlineOriginCenter';
+export * from './OutlineOriginTopLeft';

packages/dataviz/examples/report-card/empowerment-metric/DualLinearGauge.stories.tsx

@@ -0,0 +1,242 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Bar,
+  BarFill,
+  BarProps,
+  BarScale,
+  BarUnitLabel,
+  BarUnits,
+  useResponsiveChart,
+} from '../../../src';
+
+const Purple500 = '#6554C0';
+const Purple200 = '#C0B6F2';
+
+const Neutral400 = '#42526E';
+const Neutral100 = '#6B778C';
+const FontWeightNormal = 400;
+const FontWeightBold = 600;
+
+const unitLabelStyle = (at: number, value: number) => {
+  const isPrimaryValue = at === value;
+  const fontWeight = isPrimaryValue ? FontWeightBold : FontWeightNormal;
+  const fill = isPrimaryValue ? Neutral400 : Neutral100;
+  return {
+    fontFamily: '"Inter"',
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight,
+    fill,
+  };
+};
+
+const ReportCardEmpowermentMetricDualLinearGauge = (props: {
+  valueMin: number;
+  valueMax: number;
+  // current week
+  valuePrimary: number;
+  thicknessPrimary: number;
+  // previous week
+  valueSecondary: number;
+  thicknessSecondary: number;
+  // extra
+  cornerRadius: BarProps['cornerRadius'];
+  valuePrimaryContinuous: number;
+  valueSecondaryContinuous: number;
+  borderWidth: BarProps['borderWidth'];
+  unitsOffset: number;
+}) => {
+  const {
+    valueMin,
+    valueMax,
+    valuePrimary: valuePrimaryProp,
+    valueSecondary: valueSecondaryProp,
+    thicknessPrimary,
+    thicknessSecondary,
+    cornerRadius,
+    valuePrimaryContinuous,
+    valueSecondaryContinuous,
+    borderWidth,
+    unitsOffset,
+  } = props;
+
+  const valuePrimary =
+    valuePrimaryContinuous < valueMin
+      ? valuePrimaryProp
+      : valuePrimaryContinuous;
+  const valueSecondary =
+    valueSecondaryContinuous < valueMin
+      ? valueSecondaryProp
+      : valueSecondaryContinuous;
+
+  const marginTop = 8;
+  const marginRight = 8;
+  const marginBottom = 8;
+  const marginLeft = 8;
+  const innerHeight = 70;
+  const height = innerHeight + marginTop + marginBottom;
+  // const minWidth = 220;
+
+  const chart = useResponsiveChart({
+    height,
+    innerHeight,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop,
+  });
+
+  return (
+    <div ref={chart.container.ref} {...chart.container.props}>
+      <svg {...chart.svg.props}>
+        {/* inner */}
+        <g {...chart.inner.props}>
+          <BarScale
+            lengthMax={chart.inner.dim.width}
+            valueMin={valueMin}
+            valueMax={valueMax}
+          >
+            <Bar
+              thickness={thicknessPrimary}
+              cornerRadius={cornerRadius}
+              borderWidth={borderWidth}
+            >
+              <BarFill
+                overrides={{
+                  barScale: {
+                    lengthMin: thicknessPrimary / 2,
+                  },
+                }}
+                to={valuePrimary}
+                style={{ fill: Purple500 }}
+              />
+
+              <BarUnits offset={thicknessSecondary + unitsOffset}>
+                <BarUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
+                  Not really
+                </BarUnitLabel>
+                <BarUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
+                  Kind of
+                </BarUnitLabel>
+                <BarUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
+                  Very
+                </BarUnitLabel>
+              </BarUnits>
+            </Bar>
+
+            <Bar
+              thickness={thicknessSecondary}
+              cornerRadius={cornerRadius}
+              dy={thicknessPrimary}
+              borderWidth={borderWidth}
+            >
+              <BarFill
+                overrides={{
+                  barScale: {
+                    lengthMin: thicknessSecondary / 2,
+                  },
+                }}
+                to={valueSecondary}
+                style={{ fill: Purple200 }}
+              />
+            </Bar>
+          </BarScale>
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ReportCardEmpowermentMetricDualLinearGauge> = {
+  title: 'Examples/Report Card/Empowerment Metric/DualLinearGauge',
+  component: ReportCardEmpowermentMetricDualLinearGauge,
+  args: {
+    valueMin: 1,
+    valueMax: 3,
+    valuePrimary: 2,
+    valueSecondary: 3,
+    thicknessPrimary: 30,
+    thicknessSecondary: 16,
+    cornerRadius: { end: '50%' },
+    valuePrimaryContinuous: 1 - 0.05,
+    valueSecondaryContinuous: 1 - 0.05,
+    borderWidth: 1.66,
+    unitsOffset: 6,
+  },
+  argTypes: {
+    valuePrimary: {
+      control: {
+        type: 'range',
+        min: 1,
+        max: 3,
+        step: 1,
+      },
+    },
+    valueSecondary: {
+      control: {
+        type: 'range',
+        min: 1,
+        max: 3,
+        step: 1,
+      },
+    },
+    thicknessPrimary: {
+      control: {
+        type: 'range',
+        min: 1,
+        max: 30,
+        step: 1,
+      },
+    },
+    thicknessSecondary: {
+      control: {
+        type: 'range',
+        min: 1,
+        max: 30,
+        step: 1,
+      },
+    },
+    cornerRadius: {
+      control: { type: 'object' },
+    },
+    valuePrimaryContinuous: {
+      control: {
+        type: 'range',
+        min: 1 - 0.05,
+        max: 3,
+        step: 0.05,
+      },
+    },
+    valueSecondaryContinuous: {
+      control: {
+        type: 'range',
+        min: 1 - 0.05,
+        max: 3,
+        step: 0.05,
+      },
+    },
+    borderWidth: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 2,
+        step: 0.33,
+      },
+    },
+    unitsOffset: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 16,
+        step: 1,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ReportCardEmpowermentMetricDualLinearGauge>;
+
+export const Example: Story = {};