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

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

@@ -0,0 +1,521 @@
+Vertical stacked columns in the SimpleCharts family — a column per step (a day, an hour), split by category, with a legend over the plot that carries each category and its total. Parts stack in legend order, the first category on top. Column width adapts to the chart width and the number of steps, from 32px down to 16px. Hover a column for its breakdown; hover a legend item to fade the other categories out.
+
+## 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 | — | One entry per column (step), sorted ascending by `xKey`. |
+| `series` | `complex` | yes | — | The categories each column is split into, in legend order — the first one stacks on top. The same schema drives the legend, the parts and the hover popover rows. |
+| `x-key` | `Extract<keyof T, string>` | yes | — | Key on each datum used as the X-axis value (the step: a day, an hour, …). |
+| `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.ColumnChartBody` — `ColumnChartBodyProps` in the declaration bundle.
+- `WallarmDS.ColumnChartXAxis` — `ColumnChartXAxisProps` in the declaration bundle.
+- `WallarmDS.ColumnChartStack` — `ColumnChartStackProps` in the declaration bundle.
+
+## Stories
+
+### Default
+
+Findings by verdict over a week: the legend carries each verdict and its total for the
+period, a column per day stacks the verdicts in legend order with the first on top. Hover a
+column for the day's breakdown, or a legend item to fade the other verdicts out.
+
+Source: SimpleCharts/ColumnChart/ColumnChart.stories.tsx#Default
+
+### AdaptiveWidth
+
+Column width follows the chart width and the number of steps: up to 32px, a fixed 22px
+between columns below that, and 16px at least. The same week in a narrow card keeps 32px
+columns; two weeks in it narrow them.
+
+Source: SimpleCharts/ColumnChart/ColumnChart.stories.tsx#AdaptiveWidth
+
+### CardHeight
+
+The plot follows the card height: set a height on `<Chart>` and the columns stretch or
+shrink with it. The card goes down to 128px — header, legend and a 72px plot.
+
+Source: SimpleCharts/ColumnChart/ColumnChart.stories.tsx#CardHeight
+
+### ClickableLegend
+
+Legend items become buttons when they get an `onClick` — here a verdict opens its list, as
+on the Agentic Overview. The item's `data-key` carries the series key, so one handler serves
+every item. Hover and keyboard focus fade the other verdicts out alike.
+
+Source: SimpleCharts/ColumnChart/ColumnChart.stories.tsx#ClickableLegend
+
+### Loading
+
+Loading: skeleton legend items over `LineChartEmpty`'s dashed plot frame.
+
+Source: SimpleCharts/ColumnChart/ColumnChart.stories.tsx#Loading
+
+### Empty
+
+Empty: `LineChartEmpty` keeps the dashed plot frame and puts the message inside it.
+
+Source: SimpleCharts/ColumnChart/ColumnChart.stories.tsx#Empty
+
+## Story sources
+
+### SimpleCharts/ColumnChart/ColumnChart.stories.tsx
+
+```tsx
+import type { MouseEvent } from 'react';
+import { fn } from 'storybook/test';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { formatFullNumber } from '../../../utils/abbreviateNumber';
+import { Skeleton } from '../../Skeleton';
+import { Chart } from '../Chart/Chart';
+import { ChartHeader } from '../Chart/ChartHeader';
+import { ChartTitle } from '../Chart/ChartTitle';
+import { useChartTimeFormatters } from '../hooks/useChartTimeFormatters';
+import type { LineChartDatum, LineChartSeries } 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 { LineChartYAxis } from '../LineChart/LineChartYAxis';
+import { ColumnChart } from './ColumnChart';
+import { ColumnChartBody } from './ColumnChartBody';
+import { ColumnChartStack } from './ColumnChartStack';
+import { ColumnChartXAxis } from './ColumnChartXAxis';
+
+const DESCRIPTION = [
+  'Vertical stacked columns in the SimpleCharts family — a column per step (a day, an hour), split by category, with a legend over the plot that carries each category and its total.',
+  'Parts stack in legend order, the first category on top. Column width adapts to the chart width and the number of steps, from 32px down to 16px.',
+  'Hover a column for its breakdown; hover a legend item to fade the other categories out.',
+].join(' ');
+
+const meta = {
+  title: 'Data Display/SimpleCharts/Vertical Stacked Columns Chart',
+  component: ColumnChart,
+  subcomponents: { ColumnChartBody, ColumnChartStack, ColumnChartXAxis },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12612-31838',
+    },
+    docs: { description: { component: DESCRIPTION } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColumnChart>;
+
+export default meta;
+
+const DAY = 24 * 60 * 60 * 1000;
+const START = Date.UTC(2026, 0, 1);
+
+const verdicts: LineChartSeries[] = [
+  { key: 'malicious', label: 'Malicious anomaly', color: 'red' },
+  { key: 'truePositive', label: 'True positive', color: 'brand' },
+  { key: 'falsePositive', label: 'False positive', color: 'amber' },
+  { key: 'benign', label: 'Benign anomaly', color: 'green' },
+];
+
+const findings: LineChartDatum[] = [
+  [4, 6, 38, 4],
+  [5, 0, 12, 10],
+  [6, 40, 34, 4],
+  [6, 14, 72, 4],
+  [4, 0, 1, 30],
+  [3, 8, 22, 6],
+  [7, 18, 46, 5],
+].map(([malicious, truePositive, falsePositive, benign], i) => ({
+  timestamp: START + i * DAY,
+  malicious,
+  truePositive,
+  falsePositive,
+  benign,
+}));
+
+const findingsTotals = Object.fromEntries(
+  verdicts.map(s => [s.key, findings.reduce((sum, d) => sum + Number(d[s.key] ?? 0), 0)]),
+);
+
+// Fourteen days of the same verdicts — enough steps to narrow the columns below 32px.
+const findings14: LineChartDatum[] = [...findings, ...findings].map((d, i) => ({
+  ...d,
+  timestamp: START + i * DAY,
+}));
+
+const formatYTick = (value: unknown) => formatFullNumber(Number(value));
+
+/**
+ * Findings by verdict over a week: the legend carries each verdict and its total for the
+ * period, a column per day stacks the verdicts in legend order with the first on top. Hover a
+ * column for the day's breakdown, or a legend item to fade the other verdicts out.
+ */
+export const Default: StoryFn<typeof meta> = () => {
+  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();
+  return (
+    <div className='w-800'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Findings by verdict</ChartTitle>
+        </ChartHeader>
+        <ColumnChart data={findings} series={verdicts} xKey='timestamp' data-testid='column-chart'>
+          <LineChartLegend>
+            {verdicts.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>
+                <span className='text-xs font-mono font-medium text-text-primary'>
+                  {formatFullNumber(findingsTotals[s.key] ?? 0)}
+                </span>
+              </LineChartLegendItem>
+            ))}
+          </LineChartLegend>
+          <ColumnChartBody>
+            <LineChartGrid />
+            <ColumnChartXAxis tickFormatter={formatDate} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            <ColumnChartStack />
+            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />
+          </ColumnChartBody>
+        </ColumnChart>
+      </Chart>
+    </div>
+  );
+};
+
+/**
+ * Column width follows the chart width and the number of steps: up to 32px, a fixed 22px
+ * between columns below that, and 16px at least. The same week in a narrow card keeps 32px
+ * columns; two weeks in it narrow them.
+ */
+export const AdaptiveWidth: StoryFn<typeof meta> = () => {
+  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();
+  return (
+    <div className='flex gap-16'>
+      <div className='w-428'>
+        <Chart>
+          <ChartHeader>
+            <ChartTitle>7 days</ChartTitle>
+          </ChartHeader>
+          <ColumnChart
+            data={findings}
+            series={verdicts}
+            xKey='timestamp'
+            data-testid='column-chart-week'
+          >
+            <ColumnChartBody>
+              <LineChartGrid />
+              <ColumnChartXAxis tickFormatter={formatDate} />
+              <LineChartYAxis tickFormatter={formatYTick} />
+              <ColumnChartStack />
+              <LineChartTooltip xTickFormatter={formatDateWithTimezone} />
+            </ColumnChartBody>
+          </ColumnChart>
+        </Chart>
+      </div>
+      <div className='w-428'>
+        <Chart>
+          <ChartHeader>
+            <ChartTitle>14 days</ChartTitle>
+          </ChartHeader>
+          <ColumnChart
+            data={findings14}
+            series={verdicts}
+            xKey='timestamp'
+            data-testid='column-chart-two-weeks'
+          >
+            <ColumnChartBody>
+              <LineChartGrid />
+              <ColumnChartXAxis tickFormatter={formatDate} />
+              <LineChartYAxis tickFormatter={formatYTick} />
+              <ColumnChartStack />
+              <LineChartTooltip xTickFormatter={formatDateWithTimezone} />
+            </ColumnChartBody>
+          </ColumnChart>
+        </Chart>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * The plot follows the card height: set a height on `<Chart>` and the columns stretch or
+ * shrink with it. The card goes down to 128px — header, legend and a 72px plot.
+ */
+export const CardHeight: StoryFn<typeof meta> = () => {
+  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();
+  return (
+    <div className='flex w-800 flex-col gap-16'>
+      <Chart className='h-128'>
+        <ChartHeader>
+          <ChartTitle>128px card</ChartTitle>
+        </ChartHeader>
+        <ColumnChart
+          data={findings}
+          series={verdicts}
+          xKey='timestamp'
+          data-testid='column-chart-min'
+        >
+          <LineChartLegend>
+            {verdicts.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>
+          <ColumnChartBody>
+            <LineChartGrid />
+            <ColumnChartXAxis tickFormatter={formatDate} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            <ColumnChartStack />
+            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />
+          </ColumnChartBody>
+        </ColumnChart>
+      </Chart>
+      <Chart className='h-320'>
+        <ChartHeader>
+          <ChartTitle>320px card</ChartTitle>
+        </ChartHeader>
+        <ColumnChart
+          data={findings}
+          series={verdicts}
+          xKey='timestamp'
+          data-testid='column-chart-tall'
+        >
+          <LineChartLegend>
+            {verdicts.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>
+          <ColumnChartBody>
+            <LineChartGrid />
+            <ColumnChartXAxis tickFormatter={formatDate} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            <ColumnChartStack />
+            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />
+          </ColumnChartBody>
+        </ColumnChart>
+      </Chart>
+    </div>
+  );
+};
+
+const openVerdict = fn().mockName('openVerdict');
+
+/**
+ * Legend items become buttons when they get an `onClick` — here a verdict opens its list, as
+ * on the Agentic Overview. The item's `data-key` carries the series key, so one handler serves
+ * every item. Hover and keyboard focus fade the other verdicts out alike.
+ */
+export const ClickableLegend: StoryFn<typeof meta> = () => {
+  const { formatDate, formatDateWithTimezone } = useChartTimeFormatters();
+  const handleLegendClick = (event: MouseEvent<HTMLDivElement>) => {
+    openVerdict(event.currentTarget.dataset.key);
+  };
+  return (
+    <div className='w-800'>
+      <Chart>
+        <ChartHeader>
+          <ChartTitle>Click a verdict to open it</ChartTitle>
+        </ChartHeader>
+        <ColumnChart data={findings} series={verdicts} xKey='timestamp' data-testid='column-chart'>
+          <LineChartLegend>
+            {verdicts.map(s => (
+              <LineChartLegendItem key={s.key} seriesKey={s.key} onClick={handleLegendClick}>
+                <LineChartHoverPopoverDot color={s.color} />
+                <span className='text-xs font-mono text-text-primary'>{s.label}</span>
+                <span className='text-xs font-mono font-medium text-text-primary'>
+                  {formatFullNumber(findingsTotals[s.key] ?? 0)}
+                </span>
+              </LineChartLegendItem>
+            ))}
+          </LineChartLegend>
+          <ColumnChartBody>
+            <LineChartGrid />
+            <ColumnChartXAxis tickFormatter={formatDate} />
+            <LineChartYAxis tickFormatter={formatYTick} />
+            <ColumnChartStack />
+            <LineChartTooltip xTickFormatter={formatDateWithTimezone} />
+          </ColumnChartBody>
+        </ColumnChart>
+      </Chart>
+    </div>
+  );
+};
+
+/**
+ * Loading: skeleton legend items over `LineChartEmpty`'s dashed plot frame.
+ */
+export const Loading: StoryFn<typeof meta> = () => (
+  <div className='w-800'>
+    <Chart aria-busy='true' aria-live='polite'>
+      <ChartHeader>
+        <ChartTitle>Findings by verdict</ChartTitle>
+      </ChartHeader>
+      <LineChartLegend>
+        {verdicts.map(s => (
+          <LineChartLegendItem key={s.key} seriesKey={s.key}>
+            <Skeleton width='96px' height='16px' rounded={4} />
+          </LineChartLegendItem>
+        ))}
+      </LineChartLegend>
+      <LineChartEmpty />
+    </Chart>
+  </div>
+);
+
+/**
+ * Empty: `LineChartEmpty` keeps the dashed plot frame and puts the message inside it.
+ */
+export const Empty: StoryFn<typeof meta> = () => (
+  <div className='w-800'>
+    <Chart>
+      <ChartHeader>
+        <ChartTitle>Findings by verdict</ChartTitle>
+      </ChartHeader>
+      <LineChartEmpty>No findings in this period</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 };
+};
+```

package/dist/project/components/ColumnChart/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/ColumnChart/stories.js

@@ -0,0 +1,12 @@
+var e={vD(e,t,r){let n,a;/**
+ * 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 o,l,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))d.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},p={},h={$dispatcherGuard:()=>E,$makeReadOnly:()=>D,$reset:()=>$,$structuralCheck:()=>W,c:()=>v,clearRenderCounterRegistry:()=>M,renderCounterRegistry:()=>O,useRenderCounter:()=>T};for(var y in h)c(p,y,{get:h[y],enumerable:!0});e.exports=f(c({},"__esModule",{value:!0}),p);var w=(a=null!=(n=r("C"))?i(u(n)):{},f(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:_,useEffect:b,isValidElement:S}=w,k=null!=(o=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?o:w.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),v="function"==typeof(null==(l=w.__COMPILER_RUNTIME)?void 0:l.c)?w.__COMPILER_RUNTIME.c:function(e){return w.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},C={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{C[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 x=null;function N(e){return k.ReactCurrentDispatcher.current=e,k.ReactCurrentDispatcher.current}C.useMemoCache=e=>{if(null!=x)return x.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var R=[];function E(e){let t=k.ReactCurrentDispatcher.current;if(0===e){if(R.push(t),1===R.length&&(x=t),t===C)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.");N(C)}else if(1===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===R.length&&(x=null),N(e)}else if(2===e)R.push(t),N(x);else if(3===e){let e=R.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");N(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function $(e){for(let t=0;t<e.length;t++)e[t]=g}function D(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var O=new Map;function M(){for(let e of O.values())e.forEach(e=>{e.count=0})}function T(e){let t=_(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=O.get(e))&&(r=new Set,O.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=O.get(e))&&n.delete(r))}})}var F=new Set;function W(e,t,r,n,a,o){function l(e,t,l,i){let c=`${n}:${o} [${a}] ${r}${l} changed from ${e} to ${t} at depth ${i}`;F.has(c)||(F.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)l(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let o=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)l("null",`type ${typeof r}`,n,a);else if(null===r)l(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)l(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[o,i]of t)r.has(o)?e(i,r.get(o),`${n}.get(${o})`,a+1):l(`Map instance with key ${o}`,`Map instance without key ${o}`,n,a);else l("Map instance","other value",n,a);else if(r instanceof Map)l("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)l(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||l(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else l("Set instance","other value",n,a);else if(r instanceof Set)l("other value","Set instance",n,a);else if(o||i)if(o!==i)l(`type ${o?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)l(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let o=0;o<t.length;o++)e(t[o],r[o],`${n}[${o}]`,a+1);else if(S(t)||S(r))S(t)!==S(r)?l(`type ${S(t)?"React element":"object"}`,`type ${S(r)?"React element":"object"}`,n,a):t.type!==r.type?l(`React element of type ${t.type}`,`React element of type ${r.type}`,n,a):e(t.props,r.props,`[props of ${n}]`,a+1);else{for(let e in r)e in t||l(`object without key ${e}`,`object with key ${e}`,n,a);for(let o in t)o in r?e(t[o],r[o],`${n}.${o}`,a+1):l(`object with key ${o}`,`object without key ${o}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&l(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&l(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function o(e,t,r){let o=t,l=r;if("object"==typeof o&&null!==o&&"$$typeof"in o&&o.$$typeof===Symbol.for("react.context")&&"Provider"in o&&(o=o.Provider),"function"==typeof o&&null!=l.ref&&!o.prototype?.isReactComponent){let t=o,r=n.get(e);r||(r=new WeakMap,n.set(e,r));let a=r.get(t);a||((a=e.forwardRef((e,r)=>t({...e,ref:r}))).displayName=t.displayName??t.name,r.set(t,a)),o=a}if("string"==typeof o&&"boolean"==typeof l.inert&&((l={...l}).inert?l.inert="":delete l.inert),"string"==typeof o)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in l&&(l={...l,[t]:l[e]},delete l[e]);return"string"==typeof o&&null!=l.ref&&(o=function(e,t){let r=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let o=e.forwardRef((r,n)=>{let a=e.useRef(null);if(!a.current||a.current.original!==n){let e;a.current={original:n,callback:t=>{if(null==t&&e){let t=e;e=void 0,t();return}if("function"==typeof n){let r=n(t);e="function"==typeof r?r:void 0}else n&&(n.current=t)}}}return e.createElement(t,{...r,ref:a.current.callback})});return o.displayName=`CanvasHost(${t})`,r.set(t,o),o}(e,o)),{type:o,props:l}}function l(e){let t=(t,r,n)=>{let a=o(e,t,r??{});return e.createElement(a.type,void 0===n?a.props:{...a.props,key:n})};return{jsx:t,jsxs:(t,r,n)=>{let a=o(e,t,r??{}),{children:l,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(l)?l:[l])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=o(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),l=a.ref,i=o(e,a.type,{...a.props,ref:l});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>l,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:w,forwardRef:_,isValidElement:b,lazy:S,memo:k,startTransition:g,unstable_act:v,useCallback:C,useContext:x,useDebugValue:N,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:M,useMemo:T,useReducer:F,useRef:W,useState:j,useSyncExternalStore:L,useTransition:I,version:P,use:A}=n;r.d(t,{},{Children:a,Component:o,Fragment:l,Profiler:i,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:u,act:d,cloneElement:f,createContext:p,createElement:h,createFactory:y,createRef:w,default:n,forwardRef:_,isValidElement:b,lazy:S,memo:k,startTransition:g,unstable_act:v,use:A,useCallback:C,useContext:x,useDebugValue:N,useDeferredValue:R,useEffect:E,useId:$,useImperativeHandle:D,useInsertionEffect:O,useLayoutEffect:M,useMemo:T,useReducer:F,useRef:W,useState:j,useSyncExternalStore:L,useTransition:I,version:P})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}r.d=(e,t,n)=>{var a=(t,n)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,[n]:t[a]})};a(t,"get"),a(n,"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:n,Fragment:a}=(0,r("p").MA)(window.React);var o=r("vD");let l=new Intl.NumberFormat("en-US"),i=window.WallarmDS.Skeleton,c=window.WallarmDS.Chart,s=window.WallarmDS.ChartHeader,m=window.WallarmDS.ChartTitle,u=window.WallarmDS.useChartTimeFormatters,d=window.WallarmDS.LineChartEmpty,f=window.WallarmDS.LineChartGrid,p=window.WallarmDS.LineChartHoverPopoverDot,h=window.WallarmDS.LineChartLegend,y=window.WallarmDS.LineChartLegendItem,w=window.WallarmDS.LineChartTooltip,_=window.WallarmDS.LineChartYAxis,b=window.WallarmDS.ColumnChart,S=window.WallarmDS.ColumnChartBody,k=window.WallarmDS.ColumnChartStack,g=window.WallarmDS.ColumnChartXAxis,v={title:"Data Display/SimpleCharts/Vertical Stacked Columns Chart",component:b,subcomponents:{ColumnChartBody:S,ColumnChartStack:k,ColumnChartXAxis:g},parameters:{layout:"centered",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12612-31838"},docs:{description:{component:"Vertical stacked columns in the SimpleCharts family — a column per step (a day, an hour), split by category, with a legend over the plot that carries each category and its total. Parts stack in legend order, the first category on top. Column width adapts to the chart width and the number of steps, from 32px down to 16px. Hover a column for its breakdown; hover a legend item to fade the other categories out."}}},tags:["autodocs"]},C=Date.UTC(2026,0,1),x=[{key:"malicious",label:"Malicious anomaly",color:"red"},{key:"truePositive",label:"True positive",color:"brand"},{key:"falsePositive",label:"False positive",color:"amber"},{key:"benign",label:"Benign anomaly",color:"green"}],N=[[4,6,38,4],[5,0,12,10],[6,40,34,4],[6,14,72,4],[4,0,1,30],[3,8,22,6],[7,18,46,5]].map(([e,t,r,n],a)=>({timestamp:C+864e5*a,malicious:e,truePositive:t,falsePositive:r,benign:n})),R=Object.fromEntries(x.map(e=>[e.key,N.reduce((t,r)=>t+Number(r[e.key]??0),0)])),E=[...N,...N].map((e,t)=>({...e,timestamp:C+864e5*t})),$=e=>{let t;return t=Number(e),l.format(t)},D=(function(e=()=>{}){let t=(...t)=>e(...t);for(let r of["mockName","mockReturnValue","mockResolvedValue","mockImplementation"])t[r]=n=>("mockImplementation"===r?e=n:"mockReturnValue"===r?e=()=>n:"mockResolvedValue"===r&&(e=()=>Promise.resolve(n)),t);return t})().mockName("openVerdict");function O(r){let n;return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label}),e("span",{className:"text-xs font-mono font-medium text-text-primary",children:(n=R[r.key]??0,l.format(n))})]},r.key)}function M(r){return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function T(r){return t(y,{seriesKey:r.key,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function F(e){D(e.currentTarget.dataset.key)}function W(t){return e(y,{seriesKey:t.key,children:e(i,{width:"96px",height:"16px",rounded:4})},t.key)}var j=r("C");let L=[{name:"Default",story:()=>{let r,n,a,l,i,d,p,y,v=(0,o.c)(12),{formatDate:C,formatDateWithTimezone:R}=u();return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Findings by verdict"})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:x.map(O)}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),v[2]=a):a=v[2],v[3]!==C?(l=e(g,{tickFormatter:C}),v[3]=C,v[4]=l):l=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{tickFormatter:$}),d=e(k,{}),v[5]=i,v[6]=d):(i=v[5],d=v[6]),v[7]!==R?(p=e(w,{xTickFormatter:R}),v[7]=R,v[8]=p):p=v[8],v[9]!==l||v[10]!==p?(y=e("div",{className:"w-800",children:t(c,{children:[r,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart",children:[n,t(S,{children:[a,l,i,d,p]})]})]})}),v[9]=l,v[10]=p,v[11]=y):y=v[11],y},meta:v},{name:"AdaptiveWidth",story:()=>{let r,n,a,l,i,d,p,h,y,v,C,R,D,O,M,T=(0,o.c)(25),{formatDate:F,formatDateWithTimezone:W}=u();return T[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"7 days"})}),T[0]=r):r=T[0],T[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(f,{}),T[1]=n):n=T[1],T[2]!==F?(a=e(g,{tickFormatter:F}),T[2]=F,T[3]=a):a=T[3],T[4]===Symbol.for("react.memo_cache_sentinel")?(l=e(_,{tickFormatter:$}),i=e(k,{}),T[4]=l,T[5]=i):(l=T[4],i=T[5]),T[6]!==W?(d=e(w,{xTickFormatter:W}),T[6]=W,T[7]=d):d=T[7],T[8]!==a||T[9]!==d?(p=e("div",{className:"w-428",children:t(c,{children:[r,e(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart-week",children:t(S,{children:[n,a,l,i,d]})})]})}),T[8]=a,T[9]=d,T[10]=p):p=T[10],T[11]===Symbol.for("react.memo_cache_sentinel")?(h=e(s,{children:e(m,{children:"14 days"})}),T[11]=h):h=T[11],T[12]===Symbol.for("react.memo_cache_sentinel")?(y=e(f,{}),T[12]=y):y=T[12],T[13]!==F?(v=e(g,{tickFormatter:F}),T[13]=F,T[14]=v):v=T[14],T[15]===Symbol.for("react.memo_cache_sentinel")?(C=e(_,{tickFormatter:$}),R=e(k,{}),T[15]=C,T[16]=R):(C=T[15],R=T[16]),T[17]!==W?(D=e(w,{xTickFormatter:W}),T[17]=W,T[18]=D):D=T[18],T[19]!==D||T[20]!==v?(O=e("div",{className:"w-428",children:t(c,{children:[h,e(b,{data:E,series:x,xKey:"timestamp","data-testid":"column-chart-two-weeks",children:t(S,{children:[y,v,C,R,D]})})]})}),T[19]=D,T[20]=v,T[21]=O):O=T[21],T[22]!==O||T[23]!==p?(M=t("div",{className:"flex gap-16",children:[p,O]}),T[22]=O,T[23]=p,T[24]=M):M=T[24],M},meta:v},{name:"CardHeight",story:()=>{let r,n,a,l,i,d,p,y,v,C,R,E,D,O,F,W,j,L=(0,o.c)(27),{formatDate:I,formatDateWithTimezone:P}=u();return L[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"128px card"})}),L[0]=r):r=L[0],L[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:x.map(M)}),L[1]=n):n=L[1],L[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),L[2]=a):a=L[2],L[3]!==I?(l=e(g,{tickFormatter:I}),L[3]=I,L[4]=l):l=L[4],L[5]===Symbol.for("react.memo_cache_sentinel")?(i=e(_,{tickFormatter:$}),d=e(k,{}),L[5]=i,L[6]=d):(i=L[5],d=L[6]),L[7]!==P?(p=e(w,{xTickFormatter:P}),L[7]=P,L[8]=p):p=L[8],L[9]!==l||L[10]!==p?(y=t(c,{className:"h-128",children:[r,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart-min",children:[n,t(S,{children:[a,l,i,d,p]})]})]}),L[9]=l,L[10]=p,L[11]=y):y=L[11],L[12]===Symbol.for("react.memo_cache_sentinel")?(v=e(s,{children:e(m,{children:"320px card"})}),L[12]=v):v=L[12],L[13]===Symbol.for("react.memo_cache_sentinel")?(C=e(h,{children:x.map(T)}),L[13]=C):C=L[13],L[14]===Symbol.for("react.memo_cache_sentinel")?(R=e(f,{}),L[14]=R):R=L[14],L[15]!==I?(E=e(g,{tickFormatter:I}),L[15]=I,L[16]=E):E=L[16],L[17]===Symbol.for("react.memo_cache_sentinel")?(D=e(_,{tickFormatter:$}),O=e(k,{}),L[17]=D,L[18]=O):(D=L[17],O=L[18]),L[19]!==P?(F=e(w,{xTickFormatter:P}),L[19]=P,L[20]=F):F=L[20],L[21]!==E||L[22]!==F?(W=t(c,{className:"h-320",children:[v,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart-tall",children:[C,t(S,{children:[R,E,D,O,F]})]})]}),L[21]=E,L[22]=F,L[23]=W):W=L[23],L[24]!==W||L[25]!==y?(j=t("div",{className:"flex w-800 flex-col gap-16",children:[y,W]}),L[24]=W,L[25]=y,L[26]=j):j=L[26],j},meta:v},{name:"ClickableLegend",story:()=>{let r,n,a,i,d,v,C,E,D=(0,o.c)(12),{formatDate:O,formatDateWithTimezone:M}=u();return D[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Click a verdict to open it"})}),D[0]=r):r=D[0],D[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(h,{children:x.map(r=>{let n;return t(y,{seriesKey:r.key,onClick:F,children:[e(p,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label}),e("span",{className:"text-xs font-mono font-medium text-text-primary",children:(n=R[r.key]??0,l.format(n))})]},r.key)})}),D[1]=n):n=D[1],D[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(f,{}),D[2]=a):a=D[2],D[3]!==O?(i=e(g,{tickFormatter:O}),D[3]=O,D[4]=i):i=D[4],D[5]===Symbol.for("react.memo_cache_sentinel")?(d=e(_,{tickFormatter:$}),v=e(k,{}),D[5]=d,D[6]=v):(d=D[5],v=D[6]),D[7]!==M?(C=e(w,{xTickFormatter:M}),D[7]=M,D[8]=C):C=D[8],D[9]!==i||D[10]!==C?(E=e("div",{className:"w-800",children:t(c,{children:[r,t(b,{data:N,series:x,xKey:"timestamp","data-testid":"column-chart",children:[n,t(S,{children:[a,i,d,v,C]})]})]})}),D[9]=i,D[10]=C,D[11]=E):E=D[11],E},meta:v},{name:"Loading",story:()=>{let r,n,a=(0,o.c)(2);return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(s,{children:e(m,{children:"Findings by verdict"})}),a[0]=r):r=a[0],a[1]===Symbol.for("react.memo_cache_sentinel")?(n=e("div",{className:"w-800",children:t(c,{"aria-busy":"true","aria-live":"polite",children:[r,e(h,{children:x.map(W)}),e(d,{})]})}),a[1]=n):n=a[1],n},meta:v},{name:"Empty",story:()=>{let r,n=(0,o.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-800",children:t(c,{children:[e(s,{children:e(m,{children:"Findings by verdict"})}),e(d,{children:"No findings in this period"})]})}),n[0]=r):r=n[0],r},meta:v}];function I({entry:e}){let{story:t,meta:r}=e,n={...r.args,...t.args},a="function"==typeof t||t.$$typeof?t:t.render||r.render||r.component,o=()=>j.default.createElement(a,n),l={args:n,globals:{theme:"light"},parameters:{...r.parameters,...t.parameters},viewMode:"story"};for(let e of[...r.decorators||[],...t.decorators||[]].reverse()){let t=o;o=()=>e(t,l)}return j.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},j.default.createElement("h2",{className:"text-sm mb-12"},e.name),j.default.createElement(o))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(j.default.createElement(window.WallarmDS.Root,null,L.map((e,t)=>j.default.createElement(I,{key:t,entry:e})))),t}}})();