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

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

@@ -0,0 +1,445 @@
+The family of self-contained charts for a dashboard card: each owns its own data and they all share one frame — `Chart`, with `ChartHeader`, `ChartTitle` and `ChartActions`. This page is the family portrait, for checking they still read as one system after any one of them changes; the API and the interaction stories live on each chart's own page, and `Chart` by itself is the frame rather than a chart to reach for.
+
+## Stories
+
+### Default
+
+One card per chart, at its default: a `BarList` top-five, a `PieChart` share-of-total, a
+`LineChart` over time, a `HorizontalBarStack` composition and a bare `Metric`.
+
+Source: SimpleCharts/Overview/Overview.stories.tsx#Default
+
+## Story sources
+
+### SimpleCharts/Overview/Overview.stories.tsx
+
+```tsx
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { formatFullNumber } from '../../../utils/abbreviateNumber';
+import { Badge } from '../../Badge';
+import { BarList } from '../BarList/BarList';
+import { BarListBar } from '../BarList/BarListBar';
+import { BarListItem } from '../BarList/BarListItem';
+import { BarListLabel } from '../BarList/BarListLabel';
+import { BarListPercent } from '../BarList/BarListPercent';
+import { BarListValue } from '../BarList/BarListValue';
+import { Chart } from '../Chart/Chart';
+import { ChartHeader } from '../Chart/ChartHeader';
+import { ChartTitle } from '../Chart/ChartTitle';
+import {
+  HorizontalBarStack,
+  type HorizontalBarStackDatum,
+} from '../HorizontalBarStack/HorizontalBarStack';
+import { useChartTimeFormatters } from '../hooks/useChartTimeFormatters';
+import { LineChart } from '../LineChart/LineChart';
+import { LineChartBody } from '../LineChart/LineChartBody';
+import { LineChartGrid } from '../LineChart/LineChartGrid';
+import { LineChartLine } from '../LineChart/LineChartLine';
+import { LineChartTooltip } from '../LineChart/LineChartTooltip';
+import { LineChartXAxis } from '../LineChart/LineChartXAxis';
+import { LineChartYAxis } from '../LineChart/LineChartYAxis';
+import { hourlyData24, singleSeries } from '../LineChart/lib/sampleData';
+import { Metric } from '../Metric/Metric';
+import { MetricCaption } from '../Metric/MetricCaption';
+import { MetricDelta } from '../Metric/MetricDelta';
+import { MetricHeader } from '../Metric/MetricHeader';
+import { MetricTotal } from '../Metric/MetricTotal';
+import { MetricValue } from '../Metric/MetricValue';
+import { LegendDot } from '../PieChart/LegendDot';
+import { PieChart } from '../PieChart/PieChart';
+import {
+  PieChartCenter,
+  PieChartCenterLabel,
+  PieChartCenterValue,
+} from '../PieChart/PieChartCenter';
+import { PieChartDonut } from '../PieChart/PieChartDonut';
+import { PieChartLegend } from '../PieChart/PieChartLegend';
+import { PieChartLegendItem } from '../PieChart/PieChartLegendItem';
+import { PieChartLegendPercent } from '../PieChart/PieChartLegendPercent';
+import { PieChartLegendValue } from '../PieChart/PieChartLegendValue';
+import type { ChartColor } from '../types';
+
+const formatValue = (n: number) => n.toLocaleString('en-US');
+const formatYTick = (value: unknown) => formatFullNumber(Number(value));
+
+const barRows: { name: string; value: number; color: ChartColor }[] = [
+  { name: '/api/v1/users', value: 1240, color: 'brand' },
+  { name: '/api/v1/auth/login', value: 890, color: 'green' },
+  { name: '/api/v1/orders', value: 612, color: 'blue' },
+  { name: '/api/v1/products', value: 358, color: 'amber' },
+  { name: '/api/v1/search', value: 174, color: 'red' },
+];
+const barTotal = barRows.reduce((sum, r) => sum + r.value, 0);
+
+const pieRows = [
+  { name: '4XX', value: 35, color: 'amber' as const, badgeColor: 'amber' as const },
+  { name: '2XX', value: 31, color: 'green' as const, badgeColor: 'green' as const },
+  { name: '5XX', value: 15, color: 'red' as const, badgeColor: 'red' as const },
+  { name: '3XX', value: 18, color: 'blue' as const, badgeColor: 'blue' as const },
+  { name: '1XX', value: 1, color: 'slate' as const, badgeColor: 'slate' as const },
+];
+const pieTotal = pieRows.reduce((sum, r) => sum + r.value, 0);
+
+const severityData: HorizontalBarStackDatum[] = [
+  { name: 'Critical', value: 42, color: 'red' },
+  { name: 'High', value: 31, color: 'brand' },
+  { name: 'Medium', value: 18, color: 'amber' },
+];
+
+const DESCRIPTION = [
+  'The family of self-contained charts for a dashboard card: each owns its own data and they all share one frame — `Chart`, with `ChartHeader`, `ChartTitle` and `ChartActions`.',
+  "This page is the family portrait, for checking they still read as one system after any one of them changes; the API and the interaction stories live on each chart's own page, and `Chart` by itself is the frame rather than a chart to reach for.",
+].join(' ');
+
+const meta = {
+  title: 'Data Display/SimpleCharts/Overview',
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-121203&m=dev',
+    },
+    docs: { description: { component: DESCRIPTION } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+
+const BarChartCard = () => (
+  <Chart>
+    <ChartHeader>
+      <ChartTitle>Top 5 endpoints</ChartTitle>
+    </ChartHeader>
+    <BarList max={barTotal}>
+      {barRows.map(row => (
+        <BarListItem key={row.name} value={row.value}>
+          <BarListBar />
+          <BarListLabel>{row.name}</BarListLabel>
+          <BarListValue>
+            {formatValue(row.value)}
+            <BarListPercent />
+          </BarListValue>
+        </BarListItem>
+      ))}
+    </BarList>
+  </Chart>
+);
+
+const PieChartCard = () => (
+  <Chart>
+    <ChartHeader>
+      <ChartTitle>Response status</ChartTitle>
+    </ChartHeader>
+    <PieChart data={pieRows} total={pieTotal}>
+      <PieChartDonut>
+        <PieChartCenter>
+          <PieChartCenterValue formatHoveredValue={d => formatValue(d.value)}>
+            {formatValue(pieTotal)}
+          </PieChartCenterValue>
+          <PieChartCenterLabel
+            className='whitespace-nowrap'
+            pluralize={{ one: 'request', other: 'requests' }}
+          />
+        </PieChartCenter>
+      </PieChartDonut>
+      <PieChartLegend>
+        {pieRows.map(row => (
+          <PieChartLegendItem key={row.name} name={row.name}>
+            <Badge color={row.badgeColor} type='secondary' textVariant='code'>
+              {row.name}
+            </Badge>
+            <PieChartLegendValue>
+              {formatValue(row.value)}
+              <LegendDot />
+              <PieChartLegendPercent />
+            </PieChartLegendValue>
+          </PieChartLegendItem>
+        ))}
+      </PieChartLegend>
+    </PieChart>
+  </Chart>
+);
+
+const LineChartCard = () => {
+  const { formatHour, formatHourWithTimezone } = useChartTimeFormatters();
+  return (
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>Requests per hour</ChartTitle>
+      </ChartHeader>
+      <LineChart data={hourlyData24} series={singleSeries} xKey='timestamp'>
+        <LineChartBody>
+          <LineChartGrid />
+          <LineChartXAxis tickFormatter={formatHour} minTickGap={32} />
+          <LineChartYAxis tickFormatter={formatYTick} />
+          <LineChartLine seriesKey='requests' curve='linear' />
+          <LineChartTooltip xTickFormatter={formatHourWithTimezone} />
+        </LineChartBody>
+      </LineChart>
+    </Chart>
+  );
+};
+
+const HorizontalBarStackCard = () => (
+  <Chart>
+    <ChartHeader>
+      <ChartTitle>Findings by severity</ChartTitle>
+    </ChartHeader>
+    <HorizontalBarStack data={severityData}>
+      <MetricHeader>
+        <MetricValue>91</MetricValue>
+        <MetricDelta value={10} trend='up' sentiment='negative' />
+      </MetricHeader>
+    </HorizontalBarStack>
+  </Chart>
+);
+
+const MetricCard = () => (
+  <Chart>
+    <ChartHeader>
+      <ChartTitle>Blocked attacks</ChartTitle>
+    </ChartHeader>
+    <Metric>
+      <MetricHeader>
+        <MetricValue>91</MetricValue>
+        <MetricTotal connector='of'>120</MetricTotal>
+        <MetricDelta value={10} trend='up' sentiment='negative' />
+      </MetricHeader>
+      <MetricCaption>Last 24 hours</MetricCaption>
+    </Metric>
+  </Chart>
+);
+
+/**
+ * One card per chart, at its default: a `BarList` top-five, a `PieChart` share-of-total, a
+ * `LineChart` over time, a `HorizontalBarStack` composition and a bare `Metric`.
+ */
+export const Default: StoryFn<typeof meta> = () => (
+  <div className='flex flex-col gap-16 w-832'>
+    <div className='grid grid-cols-2 gap-16'>
+      <BarChartCard />
+      <PieChartCard />
+    </div>
+    <LineChartCard />
+    <div className='grid grid-cols-2 gap-16'>
+      <HorizontalBarStackCard />
+      <MetricCard />
+    </div>
+  </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/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/Overview/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>

package/dist/project/components/Overview/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let a,n;/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @lightSyntaxTransform
+ * @noflow
+ * @nolint
+ * @preventMunge
+ * @preserve-invariant-messages
+ */var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,f=(e,t,r,a)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of u(t))m.call(e,n)||n===r||c(e,n,{get:()=>t[n],enumerable:!(a=s(t,n))||a.enumerable});return e},h={},p={$dispatcherGuard:()=>M,$makeReadOnly:()=>W,$reset:()=>N,$structuralCheck:()=>P,c:()=>C,clearRenderCounterRegistry:()=>L,renderCounterRegistry:()=>k,useRenderCounter:()=>O};for(var y in p)c(h,y,{get:p[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),h);var w=(n=null!=(a=r("C"))?i(d(a)):{},f(a&&a.__esModule?n:c(n,"default",{value:a,enumerable:!0}),a)),{useRef:S,useEffect:g,isValidElement:v}=w,b=null!=(l=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),C="function"==typeof(null==(o=w.__COMPILER_RUNTIME)?void 0:o.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=_;return t[_]=!0,t},[])},D={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{D[e]=()=>{throw Error(`[React] Unexpected React hook call (${e}) from a React compiled function. Check that all hooks are called directly and named according to convention ('use[A-Z]') `)}});var R=null;function E(e){return b.ReactCurrentDispatcher.current=e,b.ReactCurrentDispatcher.current}D.useMemoCache=e=>{if(null!=R)return R.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var $=[];function M(e){let t=b.ReactCurrentDispatcher.current;if(0===e){if($.push(t),1===$.length&&(R=t),t===D)throw Error("[React] Unexpected call to custom hook or component from a React compiled function. Check that (1) all hooks are called directly and named according to convention ('use[A-Z]') and (2) components are returned as JSX instead of being directly invoked.");E(D)}else if(1===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===$.length&&(R=null),E(e)}else if(2===e)$.push(t),E(R);else if(3===e){let e=$.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");E(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function N(e){for(let t=0;t<e.length;t++)e[t]=_}function W(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var k=new Map;function L(){for(let e of k.values())e.forEach(e=>{e.count=0})}function O(e){let t=S(null);null!=t.current&&(t.current.count+=1),g(()=>{if(null==t.current){let r,a={count:0};null==(r=k.get(e))&&(r=new Set,k.set(e,r)),r.add(a),t.current=a}return()=>{var r;let a;null!==t.current&&(r=t.current,null!=(a=k.get(e))&&a.delete(r))}})}var T=new Set;function P(e,t,r,a,n,l){function o(e,t,o,i){let c=`${a}:${l} [${n}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;T.has(c)||(T.add(c),console.error(c))}!function e(t,r,a,n){if(!(n>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,a,n);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,a,n);else if(null===r)o(`type ${typeof t}`,"null",a,n);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)o(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,a,n);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${a}.get(${l})`,n+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,a,n);else o("Map instance","other value",a,n);else if(r instanceof Map)o("other value","Map instance",a,n);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)o(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,a,n);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,a,n);else o("Set instance","other value",a,n);else if(r instanceof Set)o("other value","Set instance",a,n);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,a,n);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,a,n);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${a}[${l}]`,n+1);else if(v(t)||v(r))v(t)!==v(r)?o(`type ${v(t)?"React element":"object"}`,`type ${v(r)?"React element":"object"}`,a,n):t.type!==r.type?o(`React element of type ${t.type}`,`React element of type ${r.type}`,a,n):e(t.props,r.props,`[props of ${a}]`,n+1);else{for(let e in r)e in t||o(`object without key ${e}`,`object with key ${e}`,a,n);for(let l in t)l in r?e(t[l],r[l],`${a}.${l}`,n+1):o(`object with key ${l}`,`object without key ${l}`,a,n)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&o(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,a,n):t!==r&&o(t,r,a,n)}}}(e,t,"",0)}},p(e,t,r){let a=new WeakMap,n=new WeakMap;function l(e,t,r){let l=t,o=r;if("object"==typeof l&&null!==l&&"$$typeof"in l&&l.$$typeof===Symbol.for("react.context")&&"Provider"in l&&(l=l.Provider),"function"==typeof l&&null!=o.ref&&!l.prototype?.isReactComponent){let t=l,r=a.get(e);r||(r=new WeakMap,a.set(e,r));let n=r.get(t);n||((n=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,n)),l=n}if("string"==typeof l&&"boolean"==typeof o.inert&&((o={...o}).inert?o.inert="":delete o.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in o&&(o={...o,[t]:o[e]},delete o[e]);return"string"==typeof l&&null!=o.ref&&(l=function(e,t){let r=n.get(e);r||(r=new Map,n.set(e,r));let a=r.get(t);if(a)return a;let l=e.forwardRef((r,a)=>{let n=e.useRef(null);if(!n.current||n.current.original!==a){let e;n.current={original:a,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof a){let r=a(t);e="function"==typeof r?r:void 0}else a&&(a.current=t)}}}return e.createElement(t,{...r,ref:n.current.callback})});return l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,a)=>{let n=l(e,t,r??{});return e.createElement(n.type,void 0===a?n.props:{...n.props,key:a})};return{jsx:t,jsxs:(t,r,a)=>{let n=l(e,t,r??{}),{children:o,...i}=n.props;return e.createElement(n.type,void 0===a?i:{...i,key:a},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...a)=>{let n=l(e,t,r??{});return e.createElement(n.type,n.props,...a)},cloneElement:(t,r,...a)=>{let n=e.cloneElement(t,r??void 0,...a),o=n.ref,i=l(e,n.type,{...n.props,ref:o});return i.type===n.type&&"string"!=typeof n.type?n:e.createElement(i.type,{...i.props,key:n.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let a=(0,r("p").YJ)(window.React),{Children:n,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:w,forwardRef:S,isValidElement:g,lazy:v,memo:b,startTransition:_,unstable_act:C,useCallback:D,useContext:R,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:N,useImperativeHandle:W,useInsertionEffect:k,useLayoutEffect:L,useMemo:O,useReducer:T,useRef:P,useState:x,useSyncExternalStore:j,useTransition:A,version:I,use:U}=a;r.d(t,{},{Children:n,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:m,cloneElement:f,createContext:h,createElement:p,createFactory:y,createRef:w,default:a,forwardRef:S,isValidElement:g,lazy:v,memo:b,startTransition:_,unstable_act:C,use:U,useCallback:D,useContext:R,useDebugValue:E,useDeferredValue:$,useEffect:M,useId:N,useImperativeHandle:W,useInsertionEffect:k,useLayoutEffect:L,useMemo:O,useReducer:T,useRef:P,useState:x,useSyncExternalStore:j,useTransition:A,version:I})}},t={};function r(a){var n=t[a];if(void 0!==n)return n.exports;var l=t[a]={exports:{}};return e[a](l,l.exports,r),l.exports}r.d=(e,t,a)=>{var n=(t,a)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,[a]:t[n]})};n(t,"get"),n(a,"value")},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{let{jsx:e,jsxs:t,jsxDEV:a,Fragment:n}=(0,r("p").MA)(window.React);var l=r("vD");let o=new Intl.NumberFormat("en-US"),i=(e,t,r)=>{let a=43758.5453*Math.sin((e+t)*r);return a-Math.floor(a)},c=(e,t=1)=>{let r=new Date(2025,0,1,0,0,0).getTime(),a=[];for(let n=0;n<e;n++){let e=r+60*n*6e4,l=Math.round(120+30*Math.sin((n+t)/4)+(i(n,t,12.9898)-.5)*80),o=Math.round(24+10*Math.cos((n+t)/5)+(i(n,t,78.233)-.5)*32),c=Math.round(80+14*Math.sin((n+t)/6)+(i(n,t,39.346)-.5)*40);a.push({timestamp:e,requests:l,errors:o,latency:c})}return a},s=[{key:"requests",label:"Requests",color:"brand"}],u=c(24);c(24,1),c(24,7),(()=>{let e=new Date(2024,0,1,0,0,0).getTime(),t=[];for(let r=0;r<60;r++){let a=e+24*r*36e5,n=Math.round(1e3+400*Math.sin(r/9)+r%13*12),l=Math.round(80+30*Math.cos(r/11)+r%7*3);t.push({timestamp:a,requests:n,errors:l})}})(),c(1e3),new Date(2025,0,1,12,0,0).getTime(),u.map((e,t)=>t>=6&&t<=8||t>=15&&t<=16?{...e,errors:null}:e);let d=window.WallarmDS.Badge,m=window.WallarmDS.BarList,f=window.WallarmDS.BarListBar,h=window.WallarmDS.BarListItem,p=window.WallarmDS.BarListLabel,y=window.WallarmDS.BarListPercent,w=window.WallarmDS.BarListValue,S=window.WallarmDS.Chart,g=window.WallarmDS.ChartHeader,v=window.WallarmDS.ChartTitle,b=window.WallarmDS.HorizontalBarStack,_=window.WallarmDS.useChartTimeFormatters,C=window.WallarmDS.LineChart,D=window.WallarmDS.LineChartBody,R=window.WallarmDS.LineChartGrid,E=window.WallarmDS.LineChartLine,$=window.WallarmDS.LineChartTooltip,M=window.WallarmDS.LineChartXAxis,N=window.WallarmDS.LineChartYAxis,W=window.WallarmDS.Metric,k=window.WallarmDS.MetricCaption,L=window.WallarmDS.MetricDelta,O=window.WallarmDS.MetricHeader,T=window.WallarmDS.MetricTotal,P=window.WallarmDS.MetricValue,x=window.WallarmDS.LegendDot,j=window.WallarmDS.PieChart,A=window.WallarmDS.PieChartCenter,I=window.WallarmDS.PieChartCenterLabel,U=window.WallarmDS.PieChartCenterValue,z=window.WallarmDS.PieChartDonut,B=window.WallarmDS.PieChartLegend,F=window.WallarmDS.PieChartLegendItem,V=window.WallarmDS.PieChartLegendPercent,X=window.WallarmDS.PieChartLegendValue,H=e=>{let t;return t=Number(e),o.format(t)},q=[{name:"/api/v1/users",value:1240,color:"brand"},{name:"/api/v1/auth/login",value:890,color:"green"},{name:"/api/v1/orders",value:612,color:"blue"},{name:"/api/v1/products",value:358,color:"amber"},{name:"/api/v1/search",value:174,color:"red"}],Y=q.reduce((e,t)=>e+t.value,0),G=[{name:"4XX",value:35,color:"amber",badgeColor:"amber"},{name:"2XX",value:31,color:"green",badgeColor:"green"},{name:"5XX",value:15,color:"red",badgeColor:"red"},{name:"3XX",value:18,color:"blue",badgeColor:"blue"},{name:"1XX",value:1,color:"slate",badgeColor:"slate"}],J=G.reduce((e,t)=>e+t.value,0),K=[{name:"Critical",value:42,color:"red"},{name:"High",value:31,color:"brand"},{name:"Medium",value:18,color:"amber"}],Z=()=>{let r,a,n=(0,l.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Top 5 endpoints"})}),n[0]=r):r=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(S,{children:[r,e(m,{max:Y,children:q.map(ea)})]}),n[1]=a):a=n[1],a},Q=()=>{let r,a,n,o,i=(0,l.c)(4);return(i[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Response status"})}),i[0]=r):r=i[0],i[1]===Symbol.for("react.memo_cache_sentinel"))?(a=e(U,{formatHoveredValue:en,children:J.toLocaleString("en-US")}),i[1]=a):a=i[1],i[2]===Symbol.for("react.memo_cache_sentinel")?(n=e(z,{children:t(A,{children:[a,e(I,{className:"whitespace-nowrap",pluralize:{one:"request",other:"requests"}})]})}),i[2]=n):n=i[2],i[3]===Symbol.for("react.memo_cache_sentinel")?(o=t(S,{children:[r,t(j,{data:G,total:J,children:[n,e(B,{children:G.map(el)})]})]}),i[3]=o):o=i[3],o},ee=()=>{let r,a,n,o,i,c,d,m=(0,l.c)(11),{formatHour:f,formatHourWithTimezone:h}=_();return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Requests per hour"})}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(a=e(R,{}),m[1]=a):a=m[1],m[2]!==f?(n=e(M,{tickFormatter:f,minTickGap:32}),m[2]=f,m[3]=n):n=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(o=e(N,{tickFormatter:H}),i=e(E,{seriesKey:"requests",curve:"linear"}),m[4]=o,m[5]=i):(o=m[4],i=m[5]),m[6]!==h?(c=e($,{xTickFormatter:h}),m[6]=h,m[7]=c):c=m[7],m[8]!==n||m[9]!==c?(d=t(S,{children:[r,e(C,{data:u,series:s,xKey:"timestamp",children:t(D,{children:[a,n,o,i,c]})})]}),m[8]=n,m[9]=c,m[10]=d):d=m[10],d},et=()=>{let r,a,n=(0,l.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Findings by severity"})}),n[0]=r):r=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(S,{children:[r,e(b,{data:K,children:t(O,{children:[e(P,{children:"91"}),e(L,{value:10,trend:"up",sentiment:"negative"})]})})]}),n[1]=a):a=n[1],a},er=()=>{let r,a,n=(0,l.c)(2);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(g,{children:e(v,{children:"Blocked attacks"})}),n[0]=r):r=n[0],n[1]===Symbol.for("react.memo_cache_sentinel")?(a=t(S,{children:[r,t(W,{children:[t(O,{children:[e(P,{children:"91"}),e(T,{connector:"of",children:"120"}),e(L,{value:10,trend:"up",sentiment:"negative"})]}),e(k,{children:"Last 24 hours"})]})]}),n[1]=a):a=n[1],a};function ea(r){return t(h,{value:r.value,children:[e(f,{}),e(p,{children:r.name}),t(w,{children:[r.value.toLocaleString("en-US"),e(y,{})]})]},r.name)}function en(e){return e.value.toLocaleString("en-US")}function el(r){return t(F,{name:r.name,children:[e(d,{color:r.badgeColor,type:"secondary",textVariant:"code",children:r.name}),t(X,{children:[r.value.toLocaleString("en-US"),e(x,{}),e(V,{})]})]},r.name)}var eo=r("C");let ei=[{name:"Default",story:()=>{let r,a,n,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"grid grid-cols-2 gap-16",children:[e(Z,{}),e(Q,{})]}),a=e(ee,{}),o[0]=r,o[1]=a):(r=o[0],a=o[1]),o[2]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"flex flex-col gap-16 w-832",children:[r,a,t("div",{className:"grid grid-cols-2 gap-16",children:[e(et,{}),e(er,{})]})]}),o[2]=n):n=o[2],n},meta:{title:"Data Display/SimpleCharts/Overview",parameters:{layout:"padded",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-121203&m=dev"},docs:{description:{component:"The family of self-contained charts for a dashboard card: each owns its own data and they all share one frame — `Chart`, with `ChartHeader`, `ChartTitle` and `ChartActions`. This page is the family portrait, for checking they still read as one system after any one of them changes; the API and the interaction stories live on each chart's own page, and `Chart` by itself is the frame rather than a chart to reach for."}}},tags:["autodocs"]}}];function ec({entry:e}){let{story:t,meta:r}=e,a={...r.args,...t.args},n="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,l=()=>eo.default.createElement(n,a),o={args:a,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=l;l=()=>e(t,o)}return eo.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},eo.default.createElement("h2",{className:"text-sm mb-12"},e.name),eo.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(eo.default.createElement(window.WallarmDS.Root,null,ei.map((e,t)=>eo.default.createElement(ec,{key:t,entry:e})))),t}}})();