@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/AreaChart/README.md

@@ -0,0 +1,673 @@
+A stacked or overlaid area chart in the SimpleCharts family — ideal for showing cumulative totals or comparing volume across series over time. All interactions (hover crosshair, tooltip, legend click-to-filter, drag-to-zoom) come from the shared LineChart infrastructure and work identically.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `data` | `T[]` | yes | — | Long-form data array, one entry per X position. |
+| `series` | `complex` | yes | — | Schema describing each area drawn from `data`. |
+| `x-key` | `Extract<keyof T, string>` | yes | — | Key on each datum used as the X-axis value. |
+| `variant` | `"standard" \| "stacked"` | no | `stacked` | Area chart variant. - `'stacked'` (default): series stack cumulatively — each band starts where the previous ends. - `'standard'`: series overlap from the baseline with transparency. |
+| `active-key` | `string \| null \| undefined` | no | — | Controlled hover key — pass alongside `onActiveKeyChange` for cross-chart sync. |
+| `on-active-key-change` | `((key: string \| null) => void) \| undefined` | no | — |  |
+| `filtered-keys` | `string[] \| undefined` | no | — | Controlled set of `series.key` values to hide from the plot. |
+| `on-zoom-change` | `complex` | no | — | Fired after the user confirms a brush selection. |
+| `sync-id` | `string \| number \| undefined` | no | — | Charts that share a `syncId` synchronise their tooltip cursor. |
+| `sync-method` | `complex` | no | — | How sibling `syncId` charts match X positions. |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.AreaChartArea` — `AreaChartAreaProps` in the declaration bundle.
+- `WallarmDS.AreaChartBody` — `AreaChartBodyProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+Three series stacked cumulatively — each band starts where the previous ends, showing the
+total volume as the top edge of the topmost area.
+
+Source: SimpleCharts/AreaChart/AreaChart.stories.tsx#Default
+
+### Standard
+
+Standard (overlaid) variant — each series draws from the baseline independently with
+transparency, useful when stacking would be misleading.
+
+Source: SimpleCharts/AreaChart/AreaChart.stories.tsx#Standard
+
+### WithMetric
+
+The metric variant: `Metric` bricks sit to the left of the legend in a row between the
+header and the plot.
+
+Source: SimpleCharts/AreaChart/AreaChart.stories.tsx#WithMetric
+
+### Filterable
+
+Clicking a legend row isolates that series and clicking another adds it back.
+
+Source: SimpleCharts/AreaChart/AreaChart.stories.tsx#Filterable
+
+### Zoom
+
+Drag across the plot to choose a range, then confirm in the popover.
+
+Source: SimpleCharts/AreaChart/AreaChart.stories.tsx#Zoom
+
+### Loading
+
+Loading skeleton state composed from the same primitives as a populated chart.
+
+Source: SimpleCharts/AreaChart/AreaChart.stories.tsx#Loading
+
+### Empty
+
+Empty state — `LineChartEmpty` keeps the dashed plot frame and puts the message inside it.
+
+Source: SimpleCharts/AreaChart/AreaChart.stories.tsx#Empty
+
+## Story sources
+
+### SimpleCharts/AreaChart/AreaChart.stories.tsx
+
+```tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { FilterX, ZoomOut } from '../../../icons';
+import { formatFullNumber } from '../../../utils/abbreviateNumber';
+import { Button } from '../../Button';
+import { Skeleton } from '../../Skeleton';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../Tooltip';
+import { Chart } from '../Chart/Chart';
+import { ChartActions } from '../Chart/ChartActions';
+import { ChartHeader } from '../Chart/ChartHeader';
+import { ChartTitle } from '../Chart/ChartTitle';
+import { useChartTimeFormatters } from '../hooks/useChartTimeFormatters';
+import type { LineChartSeries, LineChartZoomRange } from '../LineChart/LineChartContext';
+import { LineChartEmpty } from '../LineChart/LineChartEmpty';
+import { LineChartGrid } from '../LineChart/LineChartGrid';
+import { LineChartHoverPopoverDot } from '../LineChart/LineChartHoverPopoverDot';
+import { LineChartLegend } from '../LineChart/LineChartLegend';
+import { LineChartLegendItem } from '../LineChart/LineChartLegendItem';
+import { LineChartTooltip } from '../LineChart/LineChartTooltip';
+import { LineChartXAxis } from '../LineChart/LineChartXAxis';
+import { LineChartYAxis } from '../LineChart/LineChartYAxis';
+import { LineChartZoomBrush } from '../LineChart/LineChartZoomBrush';
+import { formatRange } from '../LineChart/lib/formatRange';
+import { dailyData60, hourlyData24, multiSeries } from '../LineChart/lib/sampleData';
+import { MetricDelta } from '../Metric/MetricDelta';
+import { MetricHeader } from '../Metric/MetricHeader';
+import { MetricValue } from '../Metric/MetricValue';
+import { AreaChart } from './AreaChart';
+import { AreaChartArea } from './AreaChartArea';
+import { AreaChartBody } from './AreaChartBody';
+
+const formatYTick = (value: unknown) => formatFullNumber(Number(value));
+
+const DESCRIPTION = [
+  'A stacked or overlaid area chart in the SimpleCharts family — ideal for showing cumulative totals or comparing volume across series over time.',
+  'All interactions (hover crosshair, tooltip, legend click-to-filter, drag-to-zoom) come from the shared LineChart infrastructure and work identically.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/SimpleCharts/AreaChart',
+  component: AreaChart,
+  subcomponents: {
+    AreaChartBody,
+    AreaChartArea,
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11973-4142&m=dev',
+    },
+    docs: { description: { component: DESCRIPTION } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AreaChart>;
+
+export default meta;
+
+const MultiLegend = ({ series = multiSeries }: { series?: LineChartSeries[] }) => (
+  <LineChartLegend>
+    {series.map(s => (
+      <LineChartLegendItem key={s.key} seriesKey={s.key}>
+        <LineChartHoverPopoverDot color={s.color} />
+        <span className='text-xs font-mono text-text-primary'>{s.label}</span>
+      </LineChartLegendItem>
+    ))}
+  </LineChartLegend>
+);
+
+/**
+ * Three series stacked cumulatively — each band starts where the previous ends, showing the
+ * total volume as the top edge of the topmost area.
+ */
+export const Default: StoryFn<typeof meta> = () => {
+  const { formatHour, formatHourWithTimezone } = useChartTimeFormatters();
+  return (
+    <div className='w-560'>
+      <Chart data-testid='chart'>
+        <ChartHeader>
+          <ChartTitle>Traffic breakdown (stacked)</ChartTitle>
+        </ChartHeader>
+        <AreaChart
+          data-testid='area-chart'
+          data={hourlyData24}
+          series={multiSeries}
+          xKey='timestamp'
+        >
+          <MultiLegend />
+          <AreaChartBody>
+            <LineChartGrid />
+            <LineChartXAxis tickFormatter={formatHour} minTickGap={32} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            {multiSeries.map(s => (
+              <AreaChartArea key={s.key} seriesKey={s.key} />
+            ))}
+            <LineChartTooltip xTickFormatter={formatHourWithTimezone} />
+          </AreaChartBody>
+        </AreaChart>
+      </Chart>
+    </div>
+  );
+};
+
+/**
+ * Standard (overlaid) variant — each series draws from the baseline independently with
+ * transparency, useful when stacking would be misleading.
+ */
+export const Standard: StoryFn<typeof meta> = () => {
+  const { formatHour, formatHourWithTimezone } = useChartTimeFormatters();
+  return (
+    <div className='w-560'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Traffic breakdown (standard)</ChartTitle>
+        </ChartHeader>
+        <AreaChart data={hourlyData24} series={multiSeries} xKey='timestamp' variant='standard'>
+          <MultiLegend />
+          <AreaChartBody>
+            <LineChartGrid />
+            <LineChartXAxis tickFormatter={formatHour} minTickGap={32} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            {multiSeries.map(s => (
+              <AreaChartArea key={s.key} seriesKey={s.key} />
+            ))}
+            <LineChartTooltip xTickFormatter={formatHourWithTimezone} />
+          </AreaChartBody>
+        </AreaChart>
+      </Chart>
+    </div>
+  );
+};
+
+/**
+ * The metric variant: `Metric` bricks sit to the left of the legend in a row between the
+ * header and the plot.
+ */
+export const WithMetric: StoryFn<typeof meta> = () => {
+  const { formatHour, formatHourWithTimezone } = useChartTimeFormatters();
+  return (
+    <div className='w-800'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Requests per hour</ChartTitle>
+        </ChartHeader>
+        <AreaChart data={hourlyData24} series={multiSeries} xKey='timestamp'>
+          <div className='flex items-center justify-between pr-8'>
+            <MetricHeader className='px-16'>
+              <MetricValue>{2903}</MetricValue>
+              <MetricDelta value={10} trend='up' sentiment='negative' />
+            </MetricHeader>
+            <MultiLegend />
+          </div>
+          <AreaChartBody>
+            <LineChartGrid />
+            <LineChartXAxis tickFormatter={formatHour} minTickGap={32} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            {multiSeries.map(s => (
+              <AreaChartArea key={s.key} seriesKey={s.key} />
+            ))}
+            <LineChartTooltip xTickFormatter={formatHourWithTimezone} />
+          </AreaChartBody>
+        </AreaChart>
+      </Chart>
+    </div>
+  );
+};
+
+/**
+ * Clicking a legend row isolates that series and clicking another adds it back.
+ */
+export const Filterable: StoryFn<typeof meta> = () => {
+  const { formatHour, formatHourWithTimezone } = useChartTimeFormatters();
+  const [hidden, setHidden] = useState<string[]>([]);
+  const toggle = (key: string) => {
+    setHidden(prev => {
+      if (prev.length === 0) return multiSeries.filter(s => s.key !== key).map(s => s.key);
+      if (prev.includes(key)) return prev.filter(k => k !== key);
+      return [...prev, key];
+    });
+  };
+  const filtered = hidden.length > 0;
+
+  return (
+    <div className='w-560'>
+      <Chart data-testid='chart'>
+        <ChartHeader>
+          <ChartTitle>Click a row to isolate, click another to add</ChartTitle>
+          <ChartActions alwaysVisible={filtered}>
+            {filtered && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant='ghost'
+                    color='neutral'
+                    size='small'
+                    aria-label='Clear filter'
+                    onClick={() => setHidden([])}
+                  >
+                    <FilterX />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Remove filter</TooltipContent>
+              </Tooltip>
+            )}
+          </ChartActions>
+        </ChartHeader>
+        <AreaChart
+          data-testid='area-chart'
+          data={hourlyData24}
+          series={multiSeries}
+          xKey='timestamp'
+          filteredKeys={hidden}
+        >
+          <LineChartLegend>
+            {multiSeries.map(s => (
+              <Tooltip key={s.key}>
+                <TooltipTrigger asChild>
+                  <LineChartLegendItem seriesKey={s.key} onClick={() => toggle(s.key)}>
+                    <LineChartHoverPopoverDot color={s.color} />
+                    <span className='text-xs font-mono text-text-primary'>{s.label}</span>
+                  </LineChartLegendItem>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {hidden.includes(s.key) ? 'Remove filter' : 'Click to filter'}
+                </TooltipContent>
+              </Tooltip>
+            ))}
+          </LineChartLegend>
+          <AreaChartBody>
+            <LineChartGrid />
+            <LineChartXAxis tickFormatter={formatHour} minTickGap={32} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            {multiSeries.map(s => (
+              <AreaChartArea key={s.key} seriesKey={s.key} />
+            ))}
+            <LineChartTooltip xTickFormatter={formatHourWithTimezone} />
+          </AreaChartBody>
+        </AreaChart>
+      </Chart>
+    </div>
+  );
+};
+
+const ZoomControlledChart = () => {
+  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();
+  const [visibleData, setVisibleData] = useState(dailyData60);
+  const handleZoom = useCallback((range: LineChartZoomRange | null) => {
+    if (!range) {
+      setVisibleData(dailyData60);
+      return;
+    }
+    setVisibleData(prev => prev.slice(range.fromIndex, range.toIndex + 1));
+  }, []);
+  const isZoomed = visibleData !== dailyData60;
+  const formatDateOnlyRange = useMemo(() => formatRange(formatDate), [formatDate]);
+
+  const chartRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isZoomed) return;
+    const handleKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      const target = event.target;
+      const isAmbient =
+        target === null || target === document.body || target === document.documentElement;
+      const isInChart = target instanceof Node && chartRef.current?.contains(target);
+      if (!isAmbient && !isInChart) return;
+      event.preventDefault();
+      handleZoom(null);
+    };
+
+    window.addEventListener('keydown', handleKey);
+
+    return () => window.removeEventListener('keydown', handleKey);
+  }, [isZoomed, handleZoom]);
+
+  return (
+    <Chart ref={chartRef}>
+      <ChartHeader>
+        <ChartTitle>Drag on the plot, then click "Zoom in" — Esc to cancel</ChartTitle>
+        <ChartActions alwaysVisible={isZoomed}>
+          {isZoomed && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant='ghost'
+                  color='neutral'
+                  size='small'
+                  aria-label='Reset time selection'
+                  onClick={() => handleZoom(null)}
+                >
+                  <ZoomOut />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Reset time selection</TooltipContent>
+            </Tooltip>
+          )}
+        </ChartActions>
+      </ChartHeader>
+      <AreaChart data={visibleData} series={multiSeries} xKey='timestamp' onZoomChange={handleZoom}>
+        <MultiLegend />
+        <AreaChartBody height={220}>
+          <LineChartGrid />
+          <LineChartXAxis tickFormatter={formatDate} minTickGap={48} />
+          <LineChartYAxis tickFormatter={formatYTick} />
+          {multiSeries.map(s => (
+            <AreaChartArea key={s.key} seriesKey={s.key} />
+          ))}
+          <LineChartTooltip xTickFormatter={formatDateWithTimezone} />
+          <LineChartZoomBrush formatRange={formatDateOnlyRange} />
+        </AreaChartBody>
+      </AreaChart>
+    </Chart>
+  );
+};
+
+/**
+ * Drag across the plot to choose a range, then confirm in the popover.
+ */
+export const Zoom: StoryFn<typeof meta> = () => (
+  <div className='w-560'>
+    <ZoomControlledChart />
+  </div>
+);
+
+const LoadingLegend = ({ orientation }: { orientation?: 'horizontal' | 'vertical' }) => (
+  <LineChartLegend orientation={orientation}>
+    {[0, 1, 2].map(i => (
+      <LineChartLegendItem key={i} seriesKey={`skeleton-${i}`}>
+        <Skeleton width='72px' height='20px' rounded={4} />
+      </LineChartLegendItem>
+    ))}
+  </LineChartLegend>
+);
+
+/**
+ * Loading skeleton state composed from the same primitives as a populated chart.
+ */
+export const Loading: StoryFn<typeof meta> = () => (
+  <div className='w-560'>
+    <Chart aria-busy='true' aria-live='polite'>
+      <ChartHeader>
+        <ChartTitle>Loading</ChartTitle>
+      </ChartHeader>
+      <LoadingLegend />
+      <LineChartEmpty />
+    </Chart>
+  </div>
+);
+
+/**
+ * Empty state — `LineChartEmpty` keeps the dashed plot frame and puts the message inside it.
+ */
+export const Empty: StoryFn<typeof meta> = () => (
+  <div className='w-560'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>No data</ChartTitle>
+      </ChartHeader>
+      <LineChartEmpty>No data</LineChartEmpty>
+    </Chart>
+  </div>
+);
+```
+
+### ../utils/abbreviateNumber.ts
+
+```tsx
+/**
+ * Suffix tiers: [minAbsValue, divisor, suffix].
+ * Sorted descending so the first match wins.
+ *
+ * Boundaries use "rounding-aware" thresholds:
+ * 999,500 rounds to 1M (not 999.5k), 999,499 stays 999k.
+ */
+const tiers: [threshold: number, divisor: number, suffix: string][] = [
+  [999_500_000_000, 1e12, 'T'],
+  [999_500_000, 1e9, 'B'],
+  [999_500, 1e6, 'M'],
+  [1_000, 1e3, 'k'],
+];
+
+const fullFormatter = new Intl.NumberFormat('en-US');
+
+/**
+ * Abbreviate a number for table cells: `12042` → `"12k"`, `59614283` → `"59.6M"`.
+ *
+ * Rules (from the Number display & abbreviation guide):
+ * - Suffixes: k (10³), M (10⁶), B (10⁹), T (10¹²) — k lowercase, rest uppercase, no space
+ * - Boundary: moves to next suffix when rounding would reach 1000×
+ * - Precision: ≥100 → 0 decimals; 10–99 → 1 decimal (drop .0); 1–9.9 → 1 decimal
+ * - Negative numbers supported
+ */
+export const abbreviateNumber = (value: number): string => {
+  if (value === 0) return '0';
+
+  const sign = value < 0 ? '-' : '';
+  const abs = Math.abs(value);
+
+  if (abs < 1_000) return String(value);
+
+  const tier = tiers.find(([threshold]) => abs >= threshold);
+
+  if (!tier) return String(value);
+
+  const [, divisor, suffix] = tier;
+  const scaled = abs / divisor;
+
+  // ≥100 → 0 decimals; <100 → 1 decimal (drop trailing .0)
+  const precision = scaled >= 100 ? 0 : 1;
+  const rounded = Math.round(scaled * 10 ** precision) / 10 ** precision;
+  const formatted = rounded % 1 === 0 ? String(rounded) : rounded.toFixed(1);
+
+  return `${sign}${formatted}${suffix}`;
+};
+
+/**
+ * Format a number with thousand separators for tooltips: `59614283` → `"59,614,283"`.
+ */
+export const formatFullNumber = (value: number): string => fullFormatter.format(value);
+
+/**
+ * Format a percentage with boundary safety:
+ * - Never show 100% when real value < 100 → ">99%" (or ">99.9%" etc.)
+ * - Never show 0% when real value > 0 → "<1%" (or "<0.1%" etc.)
+ * - `decimals` controls fractional precision (default 0)
+ */
+export const formatPercent = (value: number, decimals = 0): string => {
+  if (value === 0) return '0%';
+  if (value === 100) return '100%';
+
+  const factor = 10 ** decimals;
+  const rounded = Math.round(value * factor) / factor;
+
+  // Boundary safety: value > 0 but rounds to 0
+  if (value > 0 && rounded === 0) {
+    const threshold = 1 / factor;
+    return `<${threshold}%`;
+  }
+
+  // Boundary safety: value < 100 but rounds to 100
+  if (value < 100 && rounded === 100) {
+    const max = 100 - 1 / factor;
+    return `>${decimals > 0 ? max.toFixed(decimals) : String(max)}%`;
+  }
+
+  return `${decimals > 0 ? rounded.toFixed(decimals) : String(rounded)}%`;
+};
+
+/**
+ * Byte-formatting tiers: [minValue, divisor, suffix].
+ * Uses decimal (SI) units: KB = 1000, MB = 1e6, etc.
+ */
+const byteTiers: [threshold: number, divisor: number, suffix: string][] = [
+  [999_500_000_000, 1e12, 'TB'],
+  [999_500_000, 1e9, 'GB'],
+  [999_500, 1e6, 'MB'],
+  [1_000, 1e3, 'KB'],
+];
+
+/**
+ * Format bytes using decimal (SI) units: 512 B, 3.4 KB, 12.7 MB, 2.3 GB, 1.1 TB.
+ * Same decimal precision rules as abbreviateNumber.
+ * Returns `{ display, full }` where `full` = "2,345,678,901 bytes".
+ */
+export const formatBytes = (value: number): { display: string; full: string } => {
+  const full = `${fullFormatter.format(value)} bytes`;
+
+  if (value < 1_000) {
+    return { display: `${value} B`, full };
+  }
+
+  const tier = byteTiers.find(([threshold]) => value >= threshold);
+
+  if (!tier) {
+    return { display: `${value} B`, full };
+  }
+
+  const [, divisor, suffix] = tier;
+  const scaled = value / divisor;
+
+  const precision = scaled >= 100 ? 0 : 1;
+  const rounded = Math.round(scaled * 10 ** precision) / 10 ** precision;
+  const formatted = rounded % 1 === 0 ? String(rounded) : rounded.toFixed(1);
+
+  return { display: `${formatted} ${suffix}`, full };
+};
+```
+
+### SimpleCharts/LineChart/lib/formatRange.ts
+
+```tsx
+/** Higher-order range formatter — joins `format(from)` and `format(to)` with `→`. */
+export const formatRange =
+  (format: (value: unknown) => string) =>
+  (range: { from: unknown; to: unknown }): string =>
+    `${format(range.from)} → ${format(range.to)}`;
+```
+
+### SimpleCharts/LineChart/lib/sampleData.ts
+
+```tsx
+import type { LineChartDatum, LineChartSeries } from '../LineChartContext';
+
+// Deterministic pseudo-random in [0, 1) so the same `(i, seed, salt)` produces
+// the same value across runs — keeps screenshot tests stable while letting us
+// add point-to-point jitter that monotone smooths out and linear preserves.
+const jitter = (i: number, seed: number, salt: number): number => {
+  const v = Math.sin((i + seed) * salt) * 43758.5453;
+  return v - Math.floor(v);
+};
+
+export const genHourly = (count: number, seed = 1): LineChartDatum[] => {
+  // Local-time anchor so the first sample reads `00:00` in the viewer's
+  // timezone instead of drifting by the UTC offset.
+  const start = new Date(2025, 0, 1, 0, 0, 0).getTime();
+  const out: LineChartDatum[] = [];
+  for (let i = 0; i < count; i++) {
+    const t = start + i * 60 * 60 * 1000;
+    const requests = Math.round(
+      120 + Math.sin((i + seed) / 4) * 30 + (jitter(i, seed, 12.9898) - 0.5) * 80,
+    );
+    const errors = Math.round(
+      24 + Math.cos((i + seed) / 5) * 10 + (jitter(i, seed, 78.233) - 0.5) * 32,
+    );
+    const latency = Math.round(
+      80 + Math.sin((i + seed) / 6) * 14 + (jitter(i, seed, 39.346) - 0.5) * 40,
+    );
+    out.push({ timestamp: t, requests, errors, latency });
+  }
+  return out;
+};
+
+export const genDaily = (count: number): LineChartDatum[] => {
+  const start = new Date(2024, 0, 1, 0, 0, 0).getTime();
+  const out: LineChartDatum[] = [];
+  for (let i = 0; i < count; i++) {
+    const t = start + i * 24 * 60 * 60 * 1000;
+    const requests = Math.round(1000 + Math.sin(i / 9) * 400 + (i % 13) * 12);
+    const errors = Math.round(80 + Math.cos(i / 11) * 30 + (i % 7) * 3);
+    out.push({ timestamp: t, requests, errors });
+  }
+  return out;
+};
+
+export const singleSeries: LineChartSeries[] = [
+  { key: 'requests', label: 'Requests', color: 'brand' },
+];
+
+export const multiSeries: LineChartSeries[] = [
+  { key: 'requests', label: 'Requests', color: 'brand' },
+  { key: 'errors', label: 'Errors', color: 'red' },
+  { key: 'latency', label: 'Latency', color: 'blue' },
+];
+
+export const dashedSeries: LineChartSeries[] = [
+  { key: 'requests', label: 'Requests', color: 'brand' },
+  { key: 'errors', label: 'Errors (target)', color: 'red', variant: 'dashed' },
+];
+
+export const customColorSeries: LineChartSeries[] = [
+  { key: 'requests', label: 'Requests', color: 'var(--color-violet-500)' },
+  { key: 'errors', label: 'Errors', color: 'var(--color-emerald-500)' },
+];
+
+export const hourlyData24 = genHourly(24);
+export const hourlyDataA = genHourly(24, 1);
+export const hourlyDataB = genHourly(24, 7);
+export const dailyData60 = genDaily(60);
+export const hourlyData1000 = genHourly(1000);
+
+export const singlePointData: LineChartDatum[] = [
+  { timestamp: new Date(2025, 0, 1, 12, 0, 0).getTime(), requests: 142 },
+];
+
+export const dataWithErrorGaps: LineChartDatum[] = hourlyData24.map((d, i) => {
+  if ((i >= 6 && i <= 8) || (i >= 15 && i <= 16)) {
+    return { ...d, errors: null };
+  }
+  return d;
+});
+
+export const unitsByKey: Record<string, string> = {
+  requests: ' req',
+  errors: ' err',
+  latency: ' ms',
+};
+```

package/dist/project/components/AreaChart/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Data Display" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>