@wallarm-org/claude-design 4.8.0 → 4.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/dist/SETUP.md +35 -8
- package/dist/UPDATE.md +11 -9
- package/dist/project/README.md +49 -19
- package/dist/project/app-skeleton.dc.html +268 -0
- package/dist/project/components/AgentAvatar/README.md +5 -5
- package/dist/project/components/AgentGlyph/README.md +3 -3
- package/dist/project/components/AppShell/README.md +1 -1
- package/dist/project/components/AreaChart/README.md +3 -7
- package/dist/project/components/AreaChart/stories.js +1 -1
- package/dist/project/components/Attribute/README.md +1 -1
- package/dist/project/components/Avatar/README.md +1 -1
- package/dist/project/components/Badge/README.md +5 -31
- package/dist/project/components/BarList/README.md +0 -4
- package/dist/project/components/BarList/stories.js +1 -1
- package/dist/project/components/Calendar/README.md +6 -6
- package/dist/project/components/Chart/README.md +0 -4
- package/dist/project/components/Chart/stories.js +1 -1
- package/dist/project/components/Checkbox/README.md +3 -3
- package/dist/project/components/CodeEditor/README.md +8 -8
- package/dist/project/components/CodeEditor/stories.js +4 -4
- package/dist/project/components/CodeEditor/stories.md +0 -4
- package/dist/project/components/CodeSnippet/README.md +0 -8
- package/dist/project/components/CodeSnippet/stories.js +2 -2
- package/dist/project/components/ColumnChart/README.md +1 -5
- package/dist/project/components/ColumnChart/stories.js +1 -1
- package/dist/project/components/DateInput/README.md +6 -6
- package/dist/project/components/DateRangeInput/README.md +1 -1
- package/dist/project/components/Dialog/README.md +1 -1
- package/dist/project/components/Drawer/README.md +1 -1
- package/dist/project/components/DropdownMenu/README.md +4 -4
- package/dist/project/components/FeedbackPulse/README.md +1 -1
- package/dist/project/components/FileUpload/README.md +1 -1
- package/dist/project/components/FilterCascade/README.md +2 -2
- package/dist/project/components/FilterDropdown/README.md +7 -7
- package/dist/project/components/FilterInput/README.md +4 -4
- package/dist/project/components/HorizontalBarStack/README.md +1 -5
- package/dist/project/components/HorizontalBarStack/stories.js +1 -1
- package/dist/project/components/HttpMethod/README.md +1 -1
- package/dist/project/components/ImageCropper/README.md +1 -1
- package/dist/project/components/InlineEdit/README.md +3 -3
- package/dist/project/components/LineChart/README.md +2 -41
- package/dist/project/components/LineChart/stories.js +1 -1
- package/dist/project/components/List/README.md +1 -1
- package/dist/project/components/List/stories.js +1 -1
- package/dist/project/components/Logo/README.md +2 -2
- package/dist/project/components/Metric/README.md +0 -9
- package/dist/project/components/Metric/stories.js +1 -1
- package/dist/project/components/NotificationCenter/README.md +1 -1
- package/dist/project/components/NumberInput/README.md +3 -3
- package/dist/project/components/OverflowList/README.md +1 -1
- package/dist/project/components/OverflowTooltip/README.md +1 -1
- package/dist/project/components/Overview/README.md +0 -4
- package/dist/project/components/Overview/stories.js +1 -1
- package/dist/project/components/Pagination/README.md +3 -3
- package/dist/project/components/ParameterPath/README.md +2 -2
- package/dist/project/components/PasswordComplexity/README.md +1 -1
- package/dist/project/components/PieChart/README.md +1 -5
- package/dist/project/components/PieChart/stories.js +1 -1
- package/dist/project/components/Popover/README.md +2 -2
- package/dist/project/components/Progress/README.md +1 -1
- package/dist/project/components/RemoteShell/README.md +1 -1
- package/dist/project/components/ScrollArea/README.md +1 -1
- package/dist/project/components/Select/README.md +8 -8
- package/dist/project/components/Slider/README.md +1 -1
- package/dist/project/components/SplashScreen/README.md +2 -2
- package/dist/project/components/Stepper/README.md +3 -3
- package/dist/project/components/Switch/README.md +2 -2
- package/dist/project/components/Table/README.md +15 -15
- package/dist/project/components/Tabs/README.md +1 -1
- package/dist/project/components/TimeInput/README.md +6 -6
- package/dist/project/components/Toast/README.md +1 -1
- package/dist/project/components/Tooltip/README.md +2 -2
- package/dist/project/components/UTILITIES.md +3 -3
- package/dist/project/components/WallyAssistant/README.md +12 -12
- package/dist/project/components/WallyIcon/README.md +1 -1
- package/dist/project/components/bundle.css +15 -6
- package/dist/project/components/bundle.js +4 -4
- package/dist/project/components/index.d.ts +2 -2
- package/dist/project/design-system.json +4 -4
- package/dist/project/sampler.dc.html +5 -7
- package/dist/project/tokens.json +2 -2
- package/dist/wallarm-app.dc.html +269 -0
- package/dist/wallarm-sampler.dc.html +5 -7
- package/package.json +4 -4
|
@@ -11,7 +11,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
11
11
|
| `disabled` | `boolean \| undefined` | no | — | Whether the input is disabled. Prevents user interaction. |
|
|
12
12
|
| `read-only` | `boolean \| undefined` | no | — | Whether the input is read-only. Segments are focusable but not editable. |
|
|
13
13
|
| `placeholder` | `string \| undefined` | no | — | Placeholder shown when no value is selected. |
|
|
14
|
-
| `size` | `
|
|
14
|
+
| `size` | `TemporalInputSize \| undefined` | no | — | Visual size. Default: 'default' (36px). |
|
|
15
15
|
| `title` | `string \| undefined` | no | — | |
|
|
16
16
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
17
17
|
| `auto-focus` | `boolean \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `kind` | `
|
|
9
|
+
| `kind` | `DrawerKind \| undefined` | no | — | Which overlay family this root belongs to. Drives the same-kind nesting counter behind the pushed-back animation: a Drawer only pushes back for a nested Drawer, a Dialog only for a nested Dialog. Set to 'dialog' by the Dialog component — consumers should not need to touch this. |
|
|
10
10
|
| `open` | `boolean \| undefined` | no | — | Controlled open state |
|
|
11
11
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | Controlled open change handler |
|
|
12
12
|
| `close-on-escape` | `boolean \| undefined` | no | — | Whether ESC key closes the drawer (default: true) |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `kind` | `
|
|
9
|
+
| `kind` | `DrawerKind \| undefined` | no | `drawer` | Which overlay family this root belongs to. Drives the same-kind nesting counter behind the pushed-back animation: a Drawer only pushes back for a nested Drawer, a Dialog only for a nested Dialog. Set to 'dialog' by the Dialog component — consumers should not need to touch this. |
|
|
10
10
|
| `open` | `boolean \| undefined` | no | — | Controlled open state |
|
|
11
11
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | Controlled open change handler |
|
|
12
12
|
| `close-on-escape` | `boolean \| undefined` | no | `true` | Whether ESC key closes the drawer (default: true) |
|
|
@@ -11,12 +11,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
11
11
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | |
|
|
12
12
|
| `modal` | `boolean \| undefined` | no | — | |
|
|
13
13
|
| `anchor-point` | `{ x: number; y: number; } \| undefined` | no | — | Virtual anchor point for positioning without a trigger element |
|
|
14
|
-
| `positioning` | `
|
|
14
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | Override default positioning config |
|
|
15
15
|
| `highlighted-value` | `string \| null \| undefined` | no | — | Programmatically control which item is highlighted |
|
|
16
|
-
| `on-highlight-change` | `
|
|
16
|
+
| `on-highlight-change` | `((details: HighlightChangeDetails) => void) \| undefined` | no | — | Callback when the highlighted item changes (e.g. on mouse hover) |
|
|
17
17
|
| `close-on-select` | `boolean \| undefined` | no | — | Whether selecting an item closes the menu (default true) |
|
|
18
|
-
| `on-request-dismiss` | `
|
|
19
|
-
| `ids` | `
|
|
18
|
+
| `on-request-dismiss` | `((event: LayerDismissEvent) => void) \| undefined` | no | — | Called when another layer asks this menu to dismiss — e.g. a layer below it in the stack is removed. Call `event.preventDefault()` to keep the menu open. |
|
|
19
|
+
| `ids` | `ElementIds \| undefined` | no | — | Override the trigger element's id. Pass the same id to another compound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to compose their triggers on one element via nested `asChild` without an extra wrapper node — otherwise the outer trigger's id wins and the other component can't find its own anchor. |
|
|
20
20
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
21
21
|
|
|
22
22
|
## Sub-components
|
|
@@ -7,7 +7,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `open` | `boolean` | yes | — | |
|
|
10
|
-
| `on-open-change` | `
|
|
10
|
+
| `on-open-change` | `(open: boolean, reason?: FeedbackPulseCloseReason \| undefined) => void` | yes | — | |
|
|
11
11
|
| `on-submit` | `(result: { score: number; comment?: string \| undefined; }) => void` | yes | — | |
|
|
12
12
|
| `question` | `string \| undefined` | no | `How easy was it to use this feature?` | |
|
|
13
13
|
| `scale-labels` | `readonly [string, string] \| undefined` | no | `['Very difficult', 'Very easy']` | |
|
|
@@ -9,7 +9,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
9
9
|
| `value` | `File[] \| undefined` | no | — | Controlled accepted files. |
|
|
10
10
|
| `default-value` | `File[] \| undefined` | no | — | Uncontrolled initial files. |
|
|
11
11
|
| `on-value-change` | `((files: File[]) => void) \| undefined` | no | — | Every change to the accepted list — pick, drop, replace, delete (then `[]`). |
|
|
12
|
-
| `on-file-reject` | `
|
|
12
|
+
| `on-file-reject` | `((rejections: FileUploadRejection[]) => void) \| undefined` | no | — | Files that failed validation (for consumers that also want a toast). |
|
|
13
13
|
| `accept` | `string \| string[] \| undefined` | no | — | Extensions and/or MIME types: `'.so,.dylib'`, `'image/png'`, `['.lua']`. |
|
|
14
14
|
| `max-files` | `number \| undefined` | no | `1` | Default `1`: a new pick replaces the file, and the picker stays visible, with the chosen file shown below it. |
|
|
15
15
|
| `max-file-size` | `number \| undefined` | no | — | Bytes. Checked on pick, drop and replace. |
|
|
@@ -7,10 +7,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `label` | `string` | yes | — | Attribute name: the trigger text, its aria-label, «Clear {label}», «Search {label}». |
|
|
10
|
-
| `collection` | `
|
|
10
|
+
| `collection` | `FilterCascadeCollection<T>` | yes | — | From `createFilterCascadeCollection`. |
|
|
11
11
|
| `value` | `string[] \| undefined` | no | — | Controlled path, top level first; `[]` = unset. |
|
|
12
12
|
| `default-value` | `string[] \| undefined` | no | — | |
|
|
13
|
-
| `on-value-change` | `
|
|
13
|
+
| `on-value-change` | `((details: FilterCascadeValueChangeDetails<T>) => void) \| undefined` | no | — | |
|
|
14
14
|
| `open` | `boolean \| undefined` | no | — | |
|
|
15
15
|
| `default-open` | `boolean \| undefined` | no | — | |
|
|
16
16
|
| `on-open-change` | `((open: boolean) => void) \| undefined` | no | — | |
|
|
@@ -16,8 +16,8 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
16
16
|
| `disabled` | `boolean \| undefined` | no | `false` | Whether the select is disabled |
|
|
17
17
|
| `as-child` | `boolean \| undefined` | no | — | Use the provided child element as the default rendered element, combining their props and behavior. |
|
|
18
18
|
| `data-testid` | `string \| undefined` | no | — | |
|
|
19
|
-
| `positioning` | `
|
|
20
|
-
| `ids` | `
|
|
19
|
+
| `positioning` | `PositioningOptions \| undefined` | no | — | Override default floating positioning (merged with DS defaults). |
|
|
20
|
+
| `ids` | `ElementIds \| undefined` | no | — | The ids of the elements in the select. Useful for composition. |
|
|
21
21
|
| `loop-focus` | `boolean \| undefined` | no | — | Whether to loop the keyboard navigation through the options |
|
|
22
22
|
| `close-on-select` | `boolean \| undefined` | no | — | Whether the select should close after an item is selected |
|
|
23
23
|
| `open` | `boolean \| undefined` | no | — | Whether the select menu is open |
|
|
@@ -34,18 +34,18 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
34
34
|
| `read-only` | `boolean \| undefined` | no | — | Whether the select is read-only |
|
|
35
35
|
| `required` | `boolean \| undefined` | no | — | Whether the select is required |
|
|
36
36
|
| `invalid` | `boolean \| undefined` | no | — | Whether the select is invalid |
|
|
37
|
-
| `translations` | `
|
|
38
|
-
| `scroll-to-index-fn` | `
|
|
37
|
+
| `translations` | `IntlTranslations \| undefined` | no | — | Specifies the localized strings that identifies the accessibility elements and their states |
|
|
38
|
+
| `scroll-to-index-fn` | `((details: ScrollToIndexDetails) => void) \| undefined` | no | — | Function to scroll to a specific index |
|
|
39
39
|
| `skip-animation-on-mount` | `boolean \| undefined` | no | — | Whether to allow the initial presence animation. |
|
|
40
40
|
| `hide-mode` | `"display-none" \| "activity"` | no | — | How to hide content when mounted but not present. - `'display-none'`: HTML `hidden` attribute. Effects stay alive. - `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+. |
|
|
41
41
|
| `label` | `string` | yes | — | Attribute name: trigger text in multi mode, the trigger's aria-label, «Clear {label}». |
|
|
42
42
|
| `all-label` | `string \| undefined` | no | `All` | Single mode: trigger text while unset and the default text of `FilterDropdownAllOption`. |
|
|
43
|
-
| `collection` | `
|
|
43
|
+
| `collection` | `ListCollection<T>` | yes | — | Items to pick from. `groupBy` is supported. |
|
|
44
44
|
| `multiple` | `boolean \| undefined` | no | `false` | Checkbox mode: several values, OR-ed, the menu stays open. |
|
|
45
45
|
| `value` | `string[] \| undefined` | no | — | Controlled picked values; `[]` = unset. |
|
|
46
46
|
| `default-value` | `string[] \| undefined` | no | — | |
|
|
47
|
-
| `on-value-change` | `
|
|
48
|
-
| `on-open-change` | `
|
|
47
|
+
| `on-value-change` | `((details: FilterDropdownValueChangeDetails<T>) => void) \| undefined` | no | — | |
|
|
48
|
+
| `on-open-change` | `((details: FilterDropdownOpenChangeDetails) => void) \| undefined` | no | — | |
|
|
49
49
|
| `search-threshold` | `number \| undefined` | no | `8` | Item count from which the search field and (multi) the "Selected" section appear. Counts the collection's own items only. |
|
|
50
50
|
| `filter-fn` | `((itemString: string, item: T, query: string) => boolean) \| undefined` | no | — | Overrides the default case-insensitive match on the item label. |
|
|
51
51
|
| `selected-on-top` | `boolean \| undefined` | no | `true` | Multi mode: pin the picked values under «Selected» on top of the list (from `searchThreshold` items, hidden while searching). Render `FilterDropdownSelected` for it. |
|
|
@@ -6,10 +6,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `fields` | `
|
|
10
|
-
| `field-groups` | `
|
|
11
|
-
| `value` | `
|
|
12
|
-
| `on-change` | `
|
|
9
|
+
| `fields` | `FieldMetadata[] \| undefined` | no | `[]` | Filter-field configurations driving the autocomplete. A few names are **reserved** and auto-wired with design-system helpers — DS-supplied callbacks **override** consumer values for the reserved slots, because the field semantics (mask range, accepted chars, backend form) are fixed by DS: - `status_code` — HTTP status code field (mask suggestions, format validation, digit-or-X input filter, partial-input normalization). To opt out, use a different `name` and attach the factories (`createStatusCodeSuggestions`, …) manually. |
|
|
10
|
+
| `field-groups` | `FieldGroup[] \| undefined` | no | — | Optional grouping for the field-selection menu. When omitted, fields render as a flat list. When provided, fields render under labeled group headers (group order = array order; field order = listed order). Fields not referenced by any group fall into a trailing headerless section. Referenced by field `name`; unknown names are ignored. |
|
|
11
|
+
| `value` | `ExprNode \| null \| undefined` | no | — | |
|
|
12
|
+
| `on-change` | `((expression: ExprNode \| null) => void) \| undefined` | no | — | |
|
|
13
13
|
| `placeholder` | `string \| undefined` | no | `Type to filter...` | |
|
|
14
14
|
| `error` | `boolean \| undefined` | no | `false` | |
|
|
15
15
|
| `external-errors` | `string[] \| undefined` | no | — | Field names whose values were rejected by the backend. Matching chips are rendered with a value error (red). Purely presentational: conditions and `onChange` output are unaffected, and the consumer is expected to render its own message (e.g. an alert with the backend error text) and clear the prop when the filter changes or the query succeeds. |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `data` | `
|
|
9
|
+
| `data` | `HorizontalBarStackDatum[]` | yes | — | Segments + legend. One array drives both, so colors stay in sync. |
|
|
10
10
|
| `total` | `number \| undefined` | no | — | Bar denominator. `> sum(data.value)` → grey remainder tail. Default: `sum(data.value)`. |
|
|
11
11
|
| `legend` | `boolean \| undefined` | no | `true` | Show/hide the legend. Default: true. |
|
|
12
12
|
| `active-name` | `string \| null \| undefined` | no | — | Controlled hover target, joined by `name`. Omitted → managed internally. Set together with `onActiveNameChange` to sync hover across charts (e.g. a sibling highlights the same series). Mirrors `PieChart`. |
|
|
@@ -104,9 +104,6 @@ import {
|
|
|
104
104
|
} from './HorizontalBarStack';
|
|
105
105
|
import { HorizontalBarStackSkeleton } from './HorizontalBarStackSkeleton';
|
|
106
106
|
|
|
107
|
-
const figmaUrl =
|
|
108
|
-
'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883';
|
|
109
|
-
|
|
110
107
|
const severityData: HorizontalBarStackDatum[] = [
|
|
111
108
|
{ name: 'Critical', value: 42, color: 'red' },
|
|
112
109
|
{ name: 'High', value: 31, color: 'brand' },
|
|
@@ -123,7 +120,6 @@ const meta = {
|
|
|
123
120
|
component: HorizontalBarStack,
|
|
124
121
|
parameters: {
|
|
125
122
|
layout: 'centered',
|
|
126
|
-
design: { type: 'figma', url: figmaUrl },
|
|
127
123
|
docs: { description: { component: DESCRIPTION } },
|
|
128
124
|
},
|
|
129
125
|
args: {
|
|
@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,a;/**
|
|
|
9
9
|
* @nolint
|
|
10
10
|
* @preventMunge
|
|
11
11
|
* @preserve-invariant-messages
|
|
12
|
-
*/var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>k,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>z,c:()=>R,clearRenderCounterRegistry:()=>T,renderCounterRegistry:()=>D,useRenderCounter:()=>j};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:b,isValidElement:v}=g,S=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=_;return t[_]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[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 $=null;function N(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===E)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(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.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 M(e){for(let t=0;t<e.length;t++)e[t]=_}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function T(){for(let e of D.values())e.forEach(e=>{e.count=0})}function j(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var x=new Set;function z(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);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}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);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}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(v(t)||v(r))v(t)!==v(r)?o(`type ${v(t)?"React element":"object"}`,`type ${v(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`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||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}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"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=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=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)),l=a}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=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=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 l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(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=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:z,useState:A,useSyncExternalStore:W,useTransition:I,version:P,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,use:L,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:T,useMemo:j,useReducer:x,useRef:z,useState:A,useSyncExternalStore:W,useTransition:I,version:P})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.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 l=r("vD"),o=r("C");let i=window.WallarmDS.Chart,c=window.WallarmDS.ChartHeader,s=window.WallarmDS.ChartTitle,u=window.WallarmDS.MetricDelta,d=window.WallarmDS.MetricHeader,f=window.WallarmDS.MetricValue,p=window.WallarmDS.HorizontalBarStack,m=window.WallarmDS.HorizontalBarStackSkeleton,h=[{name:"Critical",value:42,color:"red"},{name:"High",value:31,color:"brand"},{name:"Medium",value:18,color:"amber"}],y={title:"Data Display/SimpleCharts/HorizontalBarStack",component:p,parameters:{layout:"centered",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=9667-10883"},docs:{description:{component:"One total read as a few named parts in a single band — reach for `BarList` when each part deserves a row of its own, and `Metric` when there is no breakdown to show at all. The header is composed from the shared `Metric` bricks rather than configured, so a value and its delta read the same here as anywhere else in the family; hovering a segment or a legend item fades the rest."}}},args:{"data-testid":"horizontal-bar-stack"},argTypes:{data:{control:!1},children:{control:!1},selectedNames:{control:!1},onSelect:{control:!1},activeName:{control:!1},onActiveNameChange:{control:!1},ref:{control:!1},className:{control:"text"}}},g=r=>{let n,a,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{children:e(s,{children:"Findings by severity"})}),o[0]=n):n=o[0],o[1]!==r?(a=e("div",{className:"w-400",children:t(i,{children:[n,e(p,{...r})]})}),o[1]=r,o[2]=a):a=o[2],a},w=g.bind({});w.args={data:h,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})};let b=g.bind({});b.args={data:h,children:e(d,{children:e(f,{children:"91"})})};let v=g.bind({});v.args={data:h};let S=g.bind({});S.args={data:h,total:120,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:4,trend:"down",sentiment:"positive"})]})};let _=g.bind({});_.args={data:h,legend:!1,children:e(d,{children:e(f,{children:"91"})})};let R=g.bind({});R.args={data:["red","brand","amber","blue","green","purple"].map((e,t)=>({name:e,value:10+t,color:e})),children:e(d,{children:e(f,{children:"75"})})};let E=[{name:"Default",story:w,meta:y},{name:"NoDelta",story:b,meta:y},{name:"NoValue",story:v,meta:y},{name:"WithRemainder",story:S,meta:y},{name:"LegendOff",story:_,meta:y},{name:"Palette",story:R,meta:y},{name:"Loading",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-400",children:t(i,{children:[e(c,{children:e(s,{children:"Findings by severity"})}),e(m,{"data-testid":"horizontal-bar-stack-skeleton"})]})}),n[0]=r):r=n[0],r},meta:y},{name:"Selectable",story:()=>{let r,n,a,u,m,y=(0,l.c)(7),[g,w]=(0,o.useState)("Critical");return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{children:e(s,{children:"Findings by severity"})}),y[0]=r):r=y[0],y[1]!==g?(n=g?[g]:[],y[1]=g,y[2]=n):n=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(a=e=>w(t=>t===e?null:e),y[3]=a):a=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(d,{children:e(f,{children:"91"})}),y[4]=u):u=y[4],y[5]!==n?(m=e("div",{className:"w-400",children:t(i,{children:[r,e(p,{"data-testid":"horizontal-bar-stack",data:h,selectedNames:n,onSelect:a,children:u})]})}),y[5]=n,y[6]=m):m=y[6],m},meta:y}];function $({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,l=()=>o.default.createElement(a,n),i={args:n,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,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,E.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();
|
|
12
|
+
*/var l,o,i=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,u=Object.getOwnPropertyNames,d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty,p=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of u(t))f.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},m={},h={$dispatcherGuard:()=>k,$makeReadOnly:()=>O,$reset:()=>M,$structuralCheck:()=>z,c:()=>R,clearRenderCounterRegistry:()=>j,renderCounterRegistry:()=>D,useRenderCounter:()=>T};for(var y in h)c(m,y,{get:h[y],enumerable:!0});e.exports=p(c({},"__esModule",{value:!0}),m);var g=(a=null!=(n=r("C"))?i(d(n)):{},p(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:w,useEffect:b,isValidElement:v}=g,S=null!=(l=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,_=Symbol.for("react.memo_cache_sentinel"),R="function"==typeof(null==(o=g.__COMPILER_RUNTIME)?void 0:o.c)?g.__COMPILER_RUNTIME.c:function(e){return g.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=_;return t[_]=!0,t},[])},E={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{E[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 $=null;function N(e){return S.ReactCurrentDispatcher.current=e,S.ReactCurrentDispatcher.current}E.useMemoCache=e=>{if(null!=$)return $.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var C=[];function k(e){let t=S.ReactCurrentDispatcher.current;if(0===e){if(C.push(t),1===C.length&&($=t),t===E)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(E)}else if(1===e){let e=C.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===C.length&&($=null),N(e)}else if(2===e)C.push(t),N($);else if(3===e){let e=C.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 M(e){for(let t=0;t<e.length;t++)e[t]=_}function O(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function j(){for(let e of D.values())e.forEach(e=>{e.count=0})}function T(e){let t=w(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var x=new Set;function z(e,t,r,n,a,l){function o(e,t,o,i){let c=`${n}:${l} [${a}] ${r}${o} changed from ${e} to ${t} at depth ${i}`;x.has(c)||(x.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)o(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),i=Array.isArray(r);if(null===t&&null!==r)o("null",`type ${typeof r}`,n,a);else if(null===r)o(`type ${typeof t}`,"null",n,a);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}`,n,a);else for(let[l,i]of t)r.has(l)?e(i,r.get(l),`${n}.get(${l})`,a+1):o(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else o("Map instance","other value",n,a);else if(r instanceof Map)o("other value","Map instance",n,a);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}`,n,a);else for(let e of r)t.has(e)||o(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else o("Set instance","other value",n,a);else if(r instanceof Set)o("other value","Set instance",n,a);else if(l||i)if(l!==i)o(`type ${l?"array":"object"}`,`type ${i?"array":"object"}`,n,a);else if(t.length!==r.length)o(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(v(t)||v(r))v(t)!==v(r)?o(`type ${v(t)?"React element":"object"}`,`type ${v(r)?"React element":"object"}`,n,a):t.type!==r.type?o(`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||o(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):o(`object with key ${l}`,`object without key ${l}`,n,a)}}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"}`,n,a):t!==r&&o(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=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=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)),l=a}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=a.get(e);r||(r=new Map,a.set(e,r));let n=r.get(t);if(n)return n;let l=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 l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:o}}function o(e){let t=(t,r,n)=>{let a=l(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=l(e,t,r??{}),{children:o,...i}=a.props;return e.createElement(a.type,void 0===n?i:{...i,key:n},...Array.isArray(o)?o:[o])},jsxDEV:t,Fragment:e.Fragment}}function i(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),o=a.ref,i=l(e,a.type,{...a.props,ref:o});return i.type===a.type&&"string"!=typeof a.type?a:e.createElement(i.type,{...i.props,key:a.key})}}}r.d(t,{MA:()=>o,YJ:()=>i})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:j,useMemo:T,useReducer:x,useRef:z,useState:A,useSyncExternalStore:I,useTransition:P,version:W,use:L}=n;r.d(t,{},{Children:a,Component:l,Fragment:o,Profiler:i,PureComponent:c,StrictMode:s,Suspense:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:f,cloneElement:p,createContext:m,createElement:h,createFactory:y,createRef:g,default:n,forwardRef:w,isValidElement:b,lazy:v,memo:S,startTransition:_,unstable_act:R,use:L,useCallback:E,useContext:$,useDebugValue:N,useDeferredValue:C,useEffect:k,useId:M,useImperativeHandle:O,useInsertionEffect:D,useLayoutEffect:j,useMemo:T,useReducer:x,useRef:z,useState:A,useSyncExternalStore:I,useTransition:P,version:W})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.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 l=r("vD"),o=r("C");let i=window.WallarmDS.Chart,c=window.WallarmDS.ChartHeader,s=window.WallarmDS.ChartTitle,u=window.WallarmDS.MetricDelta,d=window.WallarmDS.MetricHeader,f=window.WallarmDS.MetricValue,p=window.WallarmDS.HorizontalBarStack,m=window.WallarmDS.HorizontalBarStackSkeleton,h=[{name:"Critical",value:42,color:"red"},{name:"High",value:31,color:"brand"},{name:"Medium",value:18,color:"amber"}],y={title:"Data Display/SimpleCharts/HorizontalBarStack",component:p,parameters:{layout:"centered",docs:{description:{component:"One total read as a few named parts in a single band — reach for `BarList` when each part deserves a row of its own, and `Metric` when there is no breakdown to show at all. The header is composed from the shared `Metric` bricks rather than configured, so a value and its delta read the same here as anywhere else in the family; hovering a segment or a legend item fades the rest."}}},args:{"data-testid":"horizontal-bar-stack"},argTypes:{data:{control:!1},children:{control:!1},selectedNames:{control:!1},onSelect:{control:!1},activeName:{control:!1},onActiveNameChange:{control:!1},ref:{control:!1},className:{control:"text"}}},g=r=>{let n,a,o=(0,l.c)(3);return o[0]===Symbol.for("react.memo_cache_sentinel")?(n=e(c,{children:e(s,{children:"Findings by severity"})}),o[0]=n):n=o[0],o[1]!==r?(a=e("div",{className:"w-400",children:t(i,{children:[n,e(p,{...r})]})}),o[1]=r,o[2]=a):a=o[2],a},w=g.bind({});w.args={data:h,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:10,trend:"up",sentiment:"negative"})]})};let b=g.bind({});b.args={data:h,children:e(d,{children:e(f,{children:"91"})})};let v=g.bind({});v.args={data:h};let S=g.bind({});S.args={data:h,total:120,children:t(d,{children:[e(f,{children:"91"}),e(u,{value:4,trend:"down",sentiment:"positive"})]})};let _=g.bind({});_.args={data:h,legend:!1,children:e(d,{children:e(f,{children:"91"})})};let R=g.bind({});R.args={data:["red","brand","amber","blue","green","purple"].map((e,t)=>({name:e,value:10+t,color:e})),children:e(d,{children:e(f,{children:"75"})})};let E=[{name:"Default",story:w,meta:y},{name:"NoDelta",story:b,meta:y},{name:"NoValue",story:v,meta:y},{name:"WithRemainder",story:S,meta:y},{name:"LegendOff",story:_,meta:y},{name:"Palette",story:R,meta:y},{name:"Loading",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-400",children:t(i,{children:[e(c,{children:e(s,{children:"Findings by severity"})}),e(m,{"data-testid":"horizontal-bar-stack-skeleton"})]})}),n[0]=r):r=n[0],r},meta:y},{name:"Selectable",story:()=>{let r,n,a,u,m,y=(0,l.c)(7),[g,w]=(0,o.useState)("Critical");return y[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(c,{children:e(s,{children:"Findings by severity"})}),y[0]=r):r=y[0],y[1]!==g?(n=g?[g]:[],y[1]=g,y[2]=n):n=y[2],y[3]===Symbol.for("react.memo_cache_sentinel")?(a=e=>w(t=>t===e?null:e),y[3]=a):a=y[3],y[4]===Symbol.for("react.memo_cache_sentinel")?(u=e(d,{children:e(f,{children:"91"})}),y[4]=u):u=y[4],y[5]!==n?(m=e("div",{className:"w-400",children:t(i,{children:[r,e(p,{"data-testid":"horizontal-bar-stack",data:h,selectedNames:n,onSelect:a,children:u})]})}),y[5]=n,y[6]=m):m=y[6],m},meta:y}];function $({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,l=()=>o.default.createElement(a,n),i={args:n,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,i)}return o.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},o.default.createElement("h2",{className:"text-sm mb-12"},e.name),o.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(o.default.createElement(window.WallarmDS.Root,null,E.map((e,t)=>o.default.createElement($,{key:t,entry:e})))),t}}})();
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `method` | `
|
|
9
|
+
| `method` | `(string & {}) \| HttpMethodName` | yes | — | HTTP method to render. Known values from `HttpMethodName` get a dedicated color via `HTTP_METHOD_COLOR`; any other string renders in slate as the "Other" fallback (the text itself is shown verbatim). |
|
|
10
10
|
| `size` | `"small" \| "medium" \| "large" \| null \| undefined` | no | `medium` | Badge size — defaults to `medium`. |
|
|
11
11
|
| `title` | `string \| undefined` | no | — | |
|
|
12
12
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
@@ -6,7 +6,7 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
6
6
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
|
-
| `output-size` | `
|
|
9
|
+
| `output-size` | `ImageCropperSize` | yes | — | Exact exported pixel dimensions; also determines the visible frame's aspect ratio. |
|
|
10
10
|
| `zoom` | `number \| undefined` | no | — | |
|
|
11
11
|
| `default-zoom` | `number \| undefined` | no | `1` | |
|
|
12
12
|
| `min-zoom` | `number \| undefined` | no | `1` | The minimum scale, relative to the image covering the frame. Must be at least 1. |
|
|
@@ -15,10 +15,10 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
15
15
|
| `edit` | `boolean \| undefined` | no | — | |
|
|
16
16
|
| `default-edit` | `boolean \| undefined` | no | `false` | |
|
|
17
17
|
| `on-edit-change` | `((editing: boolean) => void) \| undefined` | no | — | |
|
|
18
|
-
| `activation-mode` | `
|
|
19
|
-
| `submit-mode` | `
|
|
18
|
+
| `activation-mode` | `InlineEditActivationMode \| undefined` | no | `click` | |
|
|
19
|
+
| `submit-mode` | `InlineEditSubmitMode \| undefined` | no | `both` | |
|
|
20
20
|
| `select-on-focus` | `boolean \| undefined` | no | `true` | |
|
|
21
|
-
| `status` | `
|
|
21
|
+
| `status` | `InlineEditStatus \| undefined` | no | — | |
|
|
22
22
|
| `saved-duration` | `number \| undefined` | no | `2000` | |
|
|
23
23
|
| `disabled` | `boolean \| undefined` | no | `false` | |
|
|
24
24
|
| `read-only` | `boolean \| undefined` | no | `false` | |
|
|
@@ -7,12 +7,12 @@ Use kebab-case attribute names. Pass non-string values through renderVals holes,
|
|
|
7
7
|
| Attribute | Type | Required | Default | Description |
|
|
8
8
|
| --- | --- | --- | --- | --- |
|
|
9
9
|
| `data` | `T[]` | yes | — | Long-form data array, one entry per X position. |
|
|
10
|
-
| `series` | `
|
|
10
|
+
| `series` | `LineChartSeries<Extract<keyof T, string>>[]` | yes | — | Schema describing each line drawn from `data`. |
|
|
11
11
|
| `x-key` | `Extract<keyof T, string>` | yes | — | Key on each datum used as the X-axis value. Required — a silent fallback would hide key-name typos until the chart renders empty. |
|
|
12
12
|
| `active-key` | `string \| null \| undefined` | no | — | Controlled hover key — pass alongside `onActiveKeyChange` for cross-chart sync. **Heads-up:** if the controlled value points at a series key that no longer exists in `series` (filter, schema change, refresh), the chart pushes `null` back through `onActiveKeyChange` so sibling charts stop highlighting a stale key. If you wire `activeKey` to external state, the snap-to-null write will arrive as a normal state change — do not be surprised when your value resets after a series disappears. |
|
|
13
13
|
| `on-active-key-change` | `((key: string \| null) => void) \| undefined` | no | — | |
|
|
14
14
|
| `filtered-keys` | `string[] \| undefined` | no | — | Controlled set of `series.key` values to hide from the plot. |
|
|
15
|
-
| `on-zoom-change` | `
|
|
15
|
+
| `on-zoom-change` | `((range: LineChartZoomRange \| null) => void) \| undefined` | no | — | Fired after the user confirms a brush selection. |
|
|
16
16
|
| `sync-id` | `string \| number \| undefined` | no | — | Charts that share a `syncId` synchronise their tooltip cursor and brush via recharts' built-in middleware — hovering one chart highlights the matching X on every sibling chart with the same id. Pair with `activeKey` + `onActiveKeyChange` if you also want the *series* highlight to sync. |
|
|
17
17
|
| `sync-method` | `complex` | no | — | How sibling `syncId` charts match X positions. Defaults to `'index'` (Recharts' default). Use `'value'` when the synced charts have different dataset lengths but share categorical X values. |
|
|
18
18
|
| `default-checked` | `boolean \| undefined` | no | — | |
|
|
@@ -240,10 +240,6 @@ const meta = {
|
|
|
240
240
|
},
|
|
241
241
|
parameters: {
|
|
242
242
|
layout: 'padded',
|
|
243
|
-
design: {
|
|
244
|
-
type: 'figma',
|
|
245
|
-
url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123142&m=dev',
|
|
246
|
-
},
|
|
247
243
|
docs: { description: { component: DESCRIPTION } },
|
|
248
244
|
},
|
|
249
245
|
tags: ['autodocs'],
|
|
@@ -277,13 +273,6 @@ export const Default: StoryFn<typeof meta> = () => {
|
|
|
277
273
|
);
|
|
278
274
|
};
|
|
279
275
|
|
|
280
|
-
Default.parameters = {
|
|
281
|
-
design: {
|
|
282
|
-
type: 'figma',
|
|
283
|
-
url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123143&m=dev',
|
|
284
|
-
},
|
|
285
|
-
};
|
|
286
|
-
|
|
287
276
|
/**
|
|
288
277
|
* Three series with a legend composed from `LineChartLegendItem` rows. The dot in each row is
|
|
289
278
|
* the same one the tooltip uses, so the colours cannot drift apart.
|
|
@@ -325,13 +314,6 @@ export const DefaultMulti: StoryFn<typeof meta> = () => {
|
|
|
325
314
|
);
|
|
326
315
|
};
|
|
327
316
|
|
|
328
|
-
DefaultMulti.parameters = {
|
|
329
|
-
design: {
|
|
330
|
-
type: 'figma',
|
|
331
|
-
url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7509-2355&m=dev',
|
|
332
|
-
},
|
|
333
|
-
};
|
|
334
|
-
|
|
335
317
|
const MultiLegend = ({ series = multiSeries }: { series?: LineChartSeries[] }) => (
|
|
336
318
|
<LineChartLegend>
|
|
337
319
|
{series.map(s => (
|
|
@@ -379,13 +361,6 @@ export const WithMetric: StoryFn<typeof meta> = () => {
|
|
|
379
361
|
);
|
|
380
362
|
};
|
|
381
363
|
|
|
382
|
-
WithMetric.parameters = {
|
|
383
|
-
design: {
|
|
384
|
-
type: 'figma',
|
|
385
|
-
url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11626-37312',
|
|
386
|
-
},
|
|
387
|
-
};
|
|
388
|
-
|
|
389
364
|
/**
|
|
390
365
|
* Straight joins tell the truth about where the samples are; `monotone` smooths between them
|
|
391
366
|
* and reads better for a rate. Mix the two only when the series mean genuinely different
|
|
@@ -1029,13 +1004,6 @@ export const Loading: StoryFn<typeof meta> = () => (
|
|
|
1029
1004
|
</div>
|
|
1030
1005
|
);
|
|
1031
1006
|
|
|
1032
|
-
Loading.parameters = {
|
|
1033
|
-
design: {
|
|
1034
|
-
type: 'figma',
|
|
1035
|
-
url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7519-2617&m=dev',
|
|
1036
|
-
},
|
|
1037
|
-
};
|
|
1038
|
-
|
|
1039
1007
|
type RefreshingPlacement = 'none' | 'top' | 'bottom' | 'left' | 'right';
|
|
1040
1008
|
|
|
1041
1009
|
const RefreshingChart = ({
|
|
@@ -1180,13 +1148,6 @@ export const Empty: StoryFn<typeof meta> = () => (
|
|
|
1180
1148
|
</div>
|
|
1181
1149
|
);
|
|
1182
1150
|
|
|
1183
|
-
Empty.parameters = {
|
|
1184
|
-
design: {
|
|
1185
|
-
type: 'figma',
|
|
1186
|
-
url: 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=8670-2594&m=dev',
|
|
1187
|
-
},
|
|
1188
|
-
};
|
|
1189
|
-
|
|
1190
1151
|
const LongTimeRangeChart = () => {
|
|
1191
1152
|
const { formatDate, formatDateTime, formatDateTimeWithTimezone } = useChartTimeFormatters();
|
|
1192
1153
|
const formatDateTimeRangeText = useMemo(() => formatRange(formatDateTime), [formatDateTime]);
|
|
@@ -9,4 +9,4 @@ var e={vD(e,t,r){let n,a;/**
|
|
|
9
9
|
* @nolint
|
|
10
10
|
* @preventMunge
|
|
11
11
|
* @preserve-invariant-messages
|
|
12
|
-
*/var l,i,o=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,d=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,u=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))h.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},y={},f={$dispatcherGuard:()=>N,$makeReadOnly:()=>F,$reset:()=>E,$structuralCheck:()=>M,c:()=>x,clearRenderCounterRegistry:()=>K,renderCounterRegistry:()=>D,useRenderCounter:()=>$};for(var p in f)c(y,p,{get:f[p],enumerable:!0});e.exports=u(c({},"__esModule",{value:!0}),y);var _=(a=null!=(n=r("C"))?o(d(n)):{},u(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:S,useEffect:b,isValidElement:k}=_,w=null!=(l=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),x="function"==typeof(null==(i=_.__COMPILER_RUNTIME)?void 0:i.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 C=null;function R(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var T=[];function N(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(T.push(t),1===T.length&&(C=t),t===v)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.");R(v)}else if(1===e){let e=T.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===T.length&&(C=null),R(e)}else if(2===e)T.push(t),R(C);else if(3===e){let e=T.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function E(e){for(let t=0;t<e.length;t++)e[t]=g}function F(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function K(){for(let e of D.values())e.forEach(e=>{e.count=0})}function $(e){let t=S(null);null!=t.current&&(t.current.count+=1),b(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var W=new Set;function M(e,t,r,n,a,l){function i(e,t,i,o){let c=`${n}:${l} [${a}] ${r}${i} changed from ${e} to ${t} at depth ${o}`;W.has(c)||(W.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)i(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)i("null",`type ${typeof r}`,n,a);else if(null===r)i(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)i(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,o]of t)r.has(l)?e(o,r.get(l),`${n}.get(${l})`,a+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else i("Map instance","other value",n,a);else if(r instanceof Map)i("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)i(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else i("Set instance","other value",n,a);else if(r instanceof Set)i("other value","Set instance",n,a);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,n,a);else if(t.length!==r.length)i(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(k(t)||k(r))k(t)!==k(r)?i(`type ${k(t)?"React element":"object"}`,`type ${k(r)?"React element":"object"}`,n,a):t.type!==r.type?i(`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||i(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):i(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&i(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,i=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!=i.ref&&!l.prototype?.isReactComponent){let t=l,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)),l=a}if("string"==typeof l&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof l&&null!=i.ref&&(l=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 l=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 l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,r,n)=>{let a=l(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=l(e,t,r??{}),{children:i,...o}=a.props;return e.createElement(a.type,void 0===n?o:{...o,key:n},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),i=a.ref,o=l(e,a.type,{...a.props,ref:i});return o.type===a.type&&"string"!=typeof a.type?a:e.createElement(o.type,{...o.props,key:a.key})}}}r.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:u,createContext:y,createElement:f,createFactory:p,createRef:_,forwardRef:S,isValidElement:b,lazy:k,memo:w,startTransition:g,unstable_act:x,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:T,useEffect:N,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:W,useRef:M,useState:L,useSyncExternalStore:O,useTransition:G,version:I,use:A}=n;r.d(t,{},{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:u,createContext:y,createElement:f,createFactory:p,createRef:_,default:n,forwardRef:S,isValidElement:b,lazy:k,memo:w,startTransition:g,unstable_act:x,use:A,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:T,useEffect:N,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:W,useRef:M,useState:L,useSyncExternalStore:O,useTransition:G,version:I})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.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 l=r("vD"),i=r("C");let o=new Intl.NumberFormat("en-US"),c=e=>t=>`${e(t.from)} → ${e(t.to)}`,s=(e,t,r)=>{let n=43758.5453*Math.sin((e+t)*r);return n-Math.floor(n)},m=(e,t=1)=>{let r=new Date(2025,0,1,0,0,0).getTime(),n=[];for(let a=0;a<e;a++){let e=r+60*a*6e4,l=Math.round(120+30*Math.sin((a+t)/4)+(s(a,t,12.9898)-.5)*80),i=Math.round(24+10*Math.cos((a+t)/5)+(s(a,t,78.233)-.5)*32),o=Math.round(80+14*Math.sin((a+t)/6)+(s(a,t,39.346)-.5)*40);n.push({timestamp:e,requests:l,errors:i,latency:o})}return n},d=[{key:"requests",label:"Requests",color:"brand"}],h=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors",color:"red"},{key:"latency",label:"Latency",color:"blue"}],u=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors (target)",color:"red",variant:"dashed"}],y=[{key:"requests",label:"Requests",color:"var(--color-violet-500)"},{key:"errors",label:"Errors",color:"var(--color-emerald-500)"}],f=m(24),p=m(24,1),_=m(24,7),S=(()=>{let e=new Date(2024,0,1,0,0,0).getTime(),t=[];for(let r=0;r<60;r++){let n=e+24*r*36e5,a=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:n,requests:a,errors:l})}return t})(),b=m(1e3),k=[{timestamp:new Date(2025,0,1,12,0,0).getTime(),requests:142}],w=f.map((e,t)=>t>=6&&t<=8||t>=15&&t<=16?{...e,errors:null}:e),g={requests:" req",errors:" err",latency:" ms"},x=window.WallarmDS.Icons.FilterX,v=window.WallarmDS.Icons.RefreshCcw,C=window.WallarmDS.Icons.ZoomOut,R=window.WallarmDS.Button,T=window.WallarmDS.Skeleton,N=window.WallarmDS.HStack,E=window.WallarmDS.Tooltip,F=window.WallarmDS.TooltipContent,D=window.WallarmDS.TooltipTrigger,K=window.WallarmDS.Chart,$=window.WallarmDS.ChartActions,W=window.WallarmDS.ChartHeader,M=window.WallarmDS.ChartTitle,L=window.WallarmDS.useChartTimeFormatters,O=window.WallarmDS.MetricDelta,G=window.WallarmDS.MetricHeader,I=window.WallarmDS.MetricValue,A=window.WallarmDS.LineChart,j=window.WallarmDS.LineChartBody,q=window.WallarmDS.LineChartEmpty,P=window.WallarmDS.LineChartGrid,z=window.WallarmDS.LineChartHoverPopover,H=window.WallarmDS.LineChartHoverPopoverDot,V=window.WallarmDS.LineChartHoverPopoverRow,X=window.WallarmDS.LineChartHoverPopoverTimestamp,Z=window.WallarmDS.LineChartLegend,U=window.WallarmDS.LineChartLegendItem,B=window.WallarmDS.LineChartLine,J=window.WallarmDS.LineChartTooltip,Y=window.WallarmDS.LineChartXAxis,Q=window.WallarmDS.LineChartYAxis,ee=window.WallarmDS.LineChartZoomBrush,et=e=>{let t;return t=Number(e),o.format(t)},er={title:"Data Display/SimpleCharts/LineChart",component:A,subcomponents:{LineChartBody:j,LineChartGrid:P,LineChartXAxis:Y,LineChartYAxis:Q,LineChartLine:B,LineChartTooltip:J,LineChartHoverPopover:z,LineChartHoverPopoverTimestamp:X,LineChartHoverPopoverRow:V,LineChartHoverPopoverDot:H,LineChartLegend:Z,LineChartLegendItem:U,LineChartZoomBrush:ee,LineChartEmpty:q},parameters:{layout:"padded",design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123142&m=dev"},docs:{description:{component:"A time series in the family's card — request volume, error rate, latency, anything where the X axis reads left to right; reach for `BarList` for a top-N comparison and `PieChart` for a share of a total. Every part is an opt-in child, so a bare sparkline and a fully instrumented panel are the same component with different children, and hover, filtering and zoom all travel through one context."}}},tags:["autodocs"]},en=()=>{let r,n,a,i,o,c,s,m=(0,l.c)(11),{formatHour:h,formatHourWithTimezone:u}=L();return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Requests per hour"})}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(P,{}),m[1]=n):n=m[1],m[2]!==h?(a=e(Y,{tickFormatter:h,minTickGap:32}),m[2]=h,m[3]=a):a=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(Q,{tickFormatter:et}),o=e(B,{seriesKey:"requests",curve:"linear"}),m[4]=i,m[5]=o):(i=m[4],o=m[5]),m[6]!==u?(c=e(J,{xTickFormatter:u}),m[6]=u,m[7]=c):c=m[7],m[8]!==a||m[9]!==c?(s=e("div",{className:"w-560",children:t(K,{children:[r,e(A,{data:f,series:d,xKey:"timestamp",children:t(j,{children:[n,a,i,o,c]})})]})}),m[8]=a,m[9]=c,m[10]=s):s=m[10],s};en.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7490-123143&m=dev"}};let ea=()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=L();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Traffic, errors, and latency"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(ey)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(ef),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(J,{xTickFormatter:y}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-560",children:t(K,{"data-testid":"chart",children:[r,t(A,{"data-testid":"line-chart",data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m};ea.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7509-2355&m=dev"}};let el=t=>{let r,n,a=(0,l.c)(4),{series:i}=t,o=void 0===i?h:i;return a[0]!==o?(r=o.map(ep),a[0]=o,a[1]=r):r=a[1],a[2]!==r?(n=e(Z,{children:r}),a[2]=r,a[3]=n):n=a[3],n},ei=()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=L();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Requests per hour"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"flex items-center justify-between pr-8",children:[t(G,{className:"px-16",children:[e(I,{children:2903}),e(O,{value:10,trend:"up",sentiment:"negative"})]}),e(el,{})]}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(e_),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(J,{xTickFormatter:y}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-800",children:t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m};ei.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=11626-37312"}};let eo=()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,S,b,k,w,g,x,v,C,R,T,E,F,D,$,O,G,I,q,z,H,V,X,U=(0,l.c)(57),{formatHour:B,formatHourWithTimezone:ee}=L();return U[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Top — JSX order"})}),U[0]=r):r=U[0],U[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(eC)}),U[1]=n):n=U[1],U[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),U[2]=a):a=U[2],U[3]!==B?(i=e(Y,{tickFormatter:B,minTickGap:32}),U[3]=B,U[4]=i):i=U[4],U[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(eR),U[5]=o,U[6]=c):(o=U[5],c=U[6]),U[7]!==ee?(s=e(J,{xTickFormatter:ee}),U[7]=ee,U[8]=s):s=U[8],U[9]!==i||U[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),U[9]=i,U[10]=s,U[11]=m):m=U[11],U[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(W,{children:e(M,{children:"Bottom — JSX order"})}),U[12]=d):d=U[12],U[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(P,{}),U[13]=u):u=U[13],U[14]!==B?(y=e(Y,{tickFormatter:B,minTickGap:32}),U[14]=B,U[15]=y):y=U[15],U[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eT),U[16]=p,U[17]=_):(p=U[16],_=U[17]),U[18]!==ee?(S=e(J,{xTickFormatter:ee}),U[18]=ee,U[19]=S):S=U[19],U[20]!==y||U[21]!==S?(b=t(j,{children:[u,y,p,_,S]}),U[20]=y,U[21]=S,U[22]=b):b=U[22],U[23]===Symbol.for("react.memo_cache_sentinel")?(k=e(Z,{children:h.map(eN)}),U[23]=k):k=U[23],U[24]!==b?(w=t(K,{children:[d,t(A,{data:f,series:h,xKey:"timestamp",children:[b,k]})]}),U[24]=b,U[25]=w):w=U[25],U[26]===Symbol.for("react.memo_cache_sentinel")?(g=e(W,{children:e(M,{children:"Left — wrapped in HStack"})}),U[26]=g):g=U[26],U[27]===Symbol.for("react.memo_cache_sentinel")?(x=e(Z,{orientation:"vertical",children:h.map(eE)}),U[27]=x):x=U[27],U[28]===Symbol.for("react.memo_cache_sentinel")?(v=e(P,{}),U[28]=v):v=U[28],U[29]!==B?(C=e(Y,{tickFormatter:B,minTickGap:32}),U[29]=B,U[30]=C):C=U[30],U[31]===Symbol.for("react.memo_cache_sentinel")?(R=e(Q,{tickFormatter:et}),T=h.map(eF),U[31]=R,U[32]=T):(R=U[31],T=U[32]),U[33]!==ee?(E=e(J,{xTickFormatter:ee}),U[33]=ee,U[34]=E):E=U[34],U[35]!==C||U[36]!==E?(F=t(K,{children:[g,e(A,{data:f,series:h,xKey:"timestamp",children:t(N,{flexGrow:!0,gap:12,align:"stretch",children:[x,t(j,{children:[v,C,R,T,E]})]})})]}),U[35]=C,U[36]=E,U[37]=F):F=U[37],U[38]===Symbol.for("react.memo_cache_sentinel")?(D=e(W,{children:e(M,{children:"Right — wrapped in HStack"})}),U[38]=D):D=U[38],U[39]===Symbol.for("react.memo_cache_sentinel")?($=e(P,{}),U[39]=$):$=U[39],U[40]!==B?(O=e(Y,{tickFormatter:B,minTickGap:32}),U[40]=B,U[41]=O):O=U[41],U[42]===Symbol.for("react.memo_cache_sentinel")?(G=e(Q,{tickFormatter:et}),I=h.map(eD),U[42]=G,U[43]=I):(G=U[42],I=U[43]),U[44]!==ee?(q=e(J,{xTickFormatter:ee}),U[44]=ee,U[45]=q):q=U[45],U[46]!==O||U[47]!==q?(z=t(j,{children:[$,O,G,I,q]}),U[46]=O,U[47]=q,U[48]=z):z=U[48],U[49]===Symbol.for("react.memo_cache_sentinel")?(H=e(Z,{orientation:"vertical",children:h.map(eK)}),U[49]=H):H=U[49],U[50]!==z?(V=t(K,{children:[D,e(A,{data:f,series:h,xKey:"timestamp",children:t(N,{flexGrow:!0,gap:12,align:"stretch",children:[z,H]})})]}),U[50]=z,U[51]=V):V=U[51],U[52]!==w||U[53]!==F||U[54]!==V||U[55]!==m?(X=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,w,F,V]}),U[52]=w,U[53]=F,U[54]=V,U[55]=m,U[56]=X):X=U[56],X};eo.parameters={layout:"padded"};let ec=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,b,k,w,g,x,v=(0,l.c)(32),{formatDate:T,formatDateWithTimezone:N}=L(),[O,G]=(0,i.useState)(S);v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{e?G(t=>t.slice(e.fromIndex,e.toIndex+1)):G(S)},v[0]=r):r=v[0];let I=r,q=O!==S;v[1]!==T?(n=c(T),v[1]=T,v[2]=n):n=v[2];let z=n,H=(0,i.useRef)(null);return v[3]!==q?(a=()=>{if(!q)return;let e=e=>{if("Escape"!==e.key)return;let t=e.target,r=null===t||t===document.body||t===document.documentElement,n=t instanceof Node&&H.current?.contains(t);(r||n)&&(e.preventDefault(),I(null))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},o=[q,I],v[3]=q,v[4]=a,v[5]=o):(a=v[4],o=v[5]),(0,i.useEffect)(a,o),v[6]===Symbol.for("react.memo_cache_sentinel")?(s=e(M,{children:'Drag on the plot, then click "Zoom in" — Esc to cancel'}),v[6]=s):s=v[6],v[7]!==q?(m=q&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>I(null),children:e(C,{})})}),e(F,{children:"Reset time selection"})]}),v[7]=q,v[8]=m):m=v[8],v[9]!==q||v[10]!==m?(d=t(W,{children:[s,e($,{alwaysVisible:q,children:m})]}),v[9]=q,v[10]=m,v[11]=d):d=v[11],v[12]===Symbol.for("react.memo_cache_sentinel")?(u=e(el,{}),v[12]=u):u=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(P,{}),v[13]=y):y=v[13],v[14]!==T?(f=e(Y,{tickFormatter:T,minTickGap:48}),v[14]=T,v[15]=f):f=v[15],v[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eI),v[16]=p,v[17]=_):(p=v[16],_=v[17]),v[18]!==N?(b=e(J,{xTickFormatter:N}),v[18]=N,v[19]=b):b=v[19],v[20]!==z?(k=e(ee,{formatRange:z}),v[20]=z,v[21]=k):k=v[21],v[22]!==b||v[23]!==k||v[24]!==f?(w=t(j,{height:220,children:[y,f,p,_,b,k]}),v[22]=b,v[23]=k,v[24]=f,v[25]=w):w=v[25],v[26]!==w||v[27]!==O?(g=t(A,{"data-testid":"line-chart",data:O,series:h,xKey:"timestamp",onZoomChange:I,children:[u,w]}),v[26]=w,v[27]=O,v[28]=g):g=v[28],v[29]!==g||v[30]!==d?(x=t(K,{ref:H,"data-testid":"chart",children:[d,g]}),v[29]=g,v[30]=d,v[31]=x):x=v[31],x},es=t=>{let r,n,a=(0,l.c)(3),{orientation:i}=t;return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=[0,1,2].map(eA),a[0]=r):r=a[0],a[1]!==i?(n=e(Z,{orientation:i,children:r}),a[1]=i,a[2]=n):n=a[2],n},em=()=>{let r,n,a,i,o,c,s,m=(0,l.c)(7);return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(W,{children:e(M,{children:"No legend"})}),e(q,{})]}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(W,{children:e(M,{children:"Top — JSX order"})}),e(es,{}),e(q,{})]}),m[1]=n):n=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(W,{children:e(M,{children:"Bottom — JSX order"})}),e(q,{}),e(es,{})]}),m[2]=a):a=m[2],m[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(W,{children:e(M,{children:"Left — wrapped in HStack"})}),m[3]=i):i=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(K,{"aria-busy":"true","aria-live":"polite",children:[i,t(N,{flexGrow:!0,gap:12,align:"stretch",children:[e(es,{orientation:"vertical"}),e(q,{className:"flex-1 min-w-0"})]})]}),m[4]=o):o=m[4],m[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(W,{children:e(M,{children:"Right — wrapped in HStack"})}),m[5]=c):c=m[5],m[6]===Symbol.for("react.memo_cache_sentinel")?(s=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[r,n,a,o,t(K,{"aria-busy":"true","aria-live":"polite",children:[c,t(N,{flexGrow:!0,gap:12,align:"stretch",children:[e(q,{className:"flex-1 min-w-0"}),e(es,{orientation:"vertical"})]})]})]}),m[6]=s):s=m[6],s};em.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=7519-2617&m=dev"}};let ed=r=>{let n,o,c,s,m,d,u,y,p,_,S,b,k,w,g=(0,l.c)(43),{placement:x,title:C}=r,{formatHour:T,formatHourWithTimezone:O}=L(),[G,I]=(0,i.useState)(!0);g[0]!==G?(n=()=>{if(!G)return;let e=setTimeout(()=>I(!1),2e3);return()=>clearTimeout(e)},o=[G],g[0]=G,g[1]=n,g[2]=o):(n=g[1],o=g[2]),(0,i.useEffect)(n,o);let z="left"===x||"right"===x,H=z?"vertical":"horizontal";g[3]!==G||g[4]!==H?(c=G?e(es,{orientation:H}):e(Z,{orientation:H,children:h.map(ej)}),g[3]=G,g[4]=H,g[5]=c):c=g[5];let V=c;g[6]!==T||g[7]!==O||g[8]!==z||g[9]!==G?(s=G?e(q,{className:z?"flex-1 min-w-0":void 0}):t(j,{children:[e(P,{}),e(Y,{tickFormatter:T,minTickGap:32}),e(Q,{tickFormatter:et}),h.map(eq),e(J,{xTickFormatter:O})]}),g[6]=T,g[7]=O,g[8]=z,g[9]=G,g[10]=s):s=g[10];let X=s;if("none"===x)m=X;else if("top"===x){let e;g[11]!==X||g[12]!==V?(e=t(a,{children:[V,X]}),g[11]=X,g[12]=V,g[13]=e):e=g[13],m=e}else if("bottom"===x){let e;g[14]!==X||g[15]!==V?(e=t(a,{children:[X,V]}),g[14]=X,g[15]=V,g[16]=e):e=g[16],m=e}else if("left"===x){let e;g[17]!==X||g[18]!==V?(e=t(N,{flexGrow:!0,gap:12,align:"stretch",children:[V,X]}),g[17]=X,g[18]=V,g[19]=e):e=g[19],m=e}else{let e;g[20]!==X||g[21]!==V?(e=t(N,{flexGrow:!0,gap:12,align:"stretch",children:[X,V]}),g[20]=X,g[21]=V,g[22]=e):e=g[22],m=e}return g[23]!==C?(d=e(M,{children:C}),g[23]=C,g[24]=d):d=g[24],g[25]===Symbol.for("react.memo_cache_sentinel")?(u=()=>I(!0),y=e(v,{}),g[25]=u,g[26]=y):(u=g[25],y=g[26]),g[27]!==G?(p=e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reload",disabled:G,onClick:u,children:y})}),g[27]=G,g[28]=p):p=g[28],g[29]===Symbol.for("react.memo_cache_sentinel")?(_=e(F,{children:"Reload"}),g[29]=_):_=g[29],g[30]!==G||g[31]!==p?(S=e($,{alwaysVisible:!0,children:t(E,{disabled:G,children:[p,_]})}),g[30]=G,g[31]=p,g[32]=S):S=g[32],g[33]!==S||g[34]!==d?(b=t(W,{children:[d,S]}),g[33]=S,g[34]=d,g[35]=b):b=g[35],g[36]!==m||g[37]!==G?(k=G?m:e(A,{data:f,series:h,xKey:"timestamp",children:m}),g[36]=m,g[37]=G,g[38]=k):k=g[38],g[39]!==G||g[40]!==b||g[41]!==k?(w=t(K,{"aria-busy":G,"aria-live":"polite",children:[b,k]}),g[39]=G,g[40]=b,g[41]=k,g[42]=w):w=g[42],w},eh=()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-560",children:t(K,{children:[e(W,{children:e(M,{children:"No data"})}),e(q,{children:"No data"})]})}),n[0]=r):r=n[0],r};eh.parameters={design:{type:"figma",url:"https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=8670-2594&m=dev"}};let eu=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,S,k,w,g=(0,l.c)(31),{formatDate:x,formatDateTime:v,formatDateTimeWithTimezone:T}=L();g[0]!==v?(r=c(v),g[0]=v,g[1]=r):r=g[1];let N=r,[O,G]=(0,i.useState)(null);e:{let e;if(!O){n=b;break e}g[2]!==O.fromIndex||g[3]!==O.toIndex?(e=b.slice(O.fromIndex,O.toIndex+1),g[2]=O.fromIndex,g[3]=O.toIndex,g[4]=e):e=g[4],n=e}let I=n;g[5]===Symbol.for("react.memo_cache_sentinel")?(a=e(M,{children:"1,000 hourly samples — drag to zoom"}),g[5]=a):a=g[5];let q=null!==O;return g[6]!==O?(o=null!==O&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>G(null),children:e(C,{})})}),e(F,{children:"Reset time selection"})]}),g[6]=O,g[7]=o):o=g[7],g[8]!==q||g[9]!==o?(s=t(W,{children:[a,e($,{alwaysVisible:q,children:o})]}),g[8]=q,g[9]=o,g[10]=s):s=g[10],g[11]===Symbol.for("react.memo_cache_sentinel")?(m=e(Z,{children:h.map(eP)}),g[11]=m):m=g[11],g[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(P,{}),g[12]=d):d=g[12],g[13]!==x?(u=e(Y,{tickFormatter:x,minTickGap:64}),g[13]=x,g[14]=u):u=g[14],g[15]===Symbol.for("react.memo_cache_sentinel")?(f=e(Q,{tickFormatter:et}),y=h.map(ez),g[15]=y,g[16]=f):(y=g[15],f=g[16]),g[17]!==T?(p=e(J,{xTickFormatter:T}),g[17]=T,g[18]=p):p=g[18],g[19]!==N?(_=e(ee,{formatRange:N}),g[19]=N,g[20]=_):_=g[20],g[21]!==p||g[22]!==_||g[23]!==u?(S=t(j,{height:220,children:[d,u,f,y,p,_]}),g[21]=p,g[22]=_,g[23]=u,g[24]=S):S=g[24],g[25]!==S||g[26]!==I?(k=t(A,{data:I,series:h,xKey:"timestamp",onZoomChange:G,children:[m,S]}),g[25]=S,g[26]=I,g[27]=k):k=g[27],g[28]!==k||g[29]!==s?(w=t(K,{children:[s,k]}),g[28]=k,g[29]=s,g[30]=w):w=g[30],w};function ey(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ef(t){return e(B,{seriesKey:t.key},t.key)}function ep(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function e_(t){return e(B,{seriesKey:t.key},t.key)}function eS(t){return e(B,{seriesKey:t.key,curve:"linear"},t.key)}function eb(t){return e(B,{seriesKey:t.key},t.key)}function ek(t){return e(B,{seriesKey:t.key},t.key)}function ew(t){return e(B,{seriesKey:t.key},t.key)}function eg(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ex(t){return e(B,{seriesKey:t.key},t.key)}function ev(t){let{series:r,value:n}=t,a=g[r.key]??"";return e(V,{series:r,value:"number"==typeof n?n:0,formatValue:e=>`${"number"==typeof e?o.format(e):String(e??"")}${a}`},r.key)}function eC(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eR(t){return e(B,{seriesKey:t.key},t.key)}function eT(t){return e(B,{seriesKey:t.key},t.key)}function eN(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eE(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eF(t){return e(B,{seriesKey:t.key},t.key)}function eD(t){return e(B,{seriesKey:t.key},t.key)}function eK(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function e$(e){return e.key}function eW(t){return e(B,{seriesKey:t.key},t.key)}function eM(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eL(t){return e(B,{seriesKey:t.key},t.key)}function eO(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eG(t){return e(B,{seriesKey:t.key},t.key)}function eI(t){return e(B,{seriesKey:t.key},t.key)}function eA(t){return e(U,{seriesKey:`skeleton-${t}`,children:e(T,{width:"72px",height:"20px",rounded:4})},t)}function ej(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eq(t){return e(B,{seriesKey:t.key},t.key)}function eP(r){return t(U,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ez(t){return e(B,{seriesKey:t.key,disableAnimation:!0},t.key)}let eH=[{name:"Default",story:en,meta:er},{name:"DefaultMulti",story:ea,meta:er},{name:"WithMetric",story:ei,meta:er},{name:"Curves",story:()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,S,b,k,w,g,x,v=(0,l.c)(29),{formatHour:C,formatHourWithTimezone:R}=L();return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Linear interpolation"})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(el,{}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),v[2]=a):a=v[2],v[3]!==C?(i=e(Y,{tickFormatter:C,minTickGap:32}),v[3]=C,v[4]=i):i=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(eS),v[5]=o,v[6]=c):(o=v[5],c=v[6]),v[7]!==R?(s=e(J,{xTickFormatter:R}),v[7]=R,v[8]=s):s=v[8],v[9]!==i||v[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),v[9]=i,v[10]=s,v[11]=m):m=v[11],v[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(W,{children:e(M,{children:"Mixed curves — monotone vs linear"})}),v[12]=d):d=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(el,{}),v[13]=u):u=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(y=e(P,{}),v[14]=y):y=v[14],v[15]!==C?(p=e(Y,{tickFormatter:C,minTickGap:32}),v[15]=C,v[16]=p):p=v[16],v[17]===Symbol.for("react.memo_cache_sentinel")?(_=e(Q,{tickFormatter:et}),S=e(B,{seriesKey:"requests",curve:"monotone"}),b=e(B,{seriesKey:"errors",curve:"linear"}),k=e(B,{seriesKey:"latency",curve:"linear"}),v[17]=_,v[18]=S,v[19]=b,v[20]=k):(_=v[17],S=v[18],b=v[19],k=v[20]),v[21]!==R?(w=e(J,{xTickFormatter:R}),v[21]=R,v[22]=w):w=v[22],v[23]!==p||v[24]!==w?(g=t(K,{children:[d,t(A,{data:f,series:h,xKey:"timestamp",children:[u,t(j,{children:[y,p,_,S,b,k,w]})]})]}),v[23]=p,v[24]=w,v[25]=g):g=v[25],v[26]!==g||v[27]!==m?(x=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,g]}),v[26]=g,v[27]=m,v[28]=x):x=v[28],x},meta:er},{name:"LineStyling",story:()=>{let r,n,a,i,o,c,s,m,d,h,p,_,S,b,k,w,g,x=(0,l.c)(27),{formatHour:v,formatHourWithTimezone:C}=L();return x[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Solid + dashed series"})}),x[0]=r):r=x[0],x[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(el,{series:u}),x[1]=n):n=x[1],x[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),x[2]=a):a=x[2],x[3]!==v?(i=e(Y,{tickFormatter:v,minTickGap:32}),x[3]=v,x[4]=i):i=x[4],x[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=u.map(eb),x[5]=o,x[6]=c):(o=x[5],c=x[6]),x[7]!==C?(s=e(J,{xTickFormatter:C}),x[7]=C,x[8]=s):s=x[8],x[9]!==i||x[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:u,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),x[9]=i,x[10]=s,x[11]=m):m=x[11],x[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(W,{children:e(M,{children:"Custom palette via CSS color string"})}),x[12]=d):d=x[12],x[13]===Symbol.for("react.memo_cache_sentinel")?(h=e(el,{series:y}),x[13]=h):h=x[13],x[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(P,{}),x[14]=p):p=x[14],x[15]!==v?(_=e(Y,{tickFormatter:v,minTickGap:32}),x[15]=v,x[16]=_):_=x[16],x[17]===Symbol.for("react.memo_cache_sentinel")?(S=e(Q,{tickFormatter:et}),b=y.map(ek),x[17]=S,x[18]=b):(S=x[17],b=x[18]),x[19]!==C?(k=e(J,{xTickFormatter:C}),x[19]=C,x[20]=k):k=x[20],x[21]!==_||x[22]!==k?(w=t(K,{children:[d,t(A,{data:f,series:y,xKey:"timestamp",children:[h,t(j,{children:[p,_,S,b,k]})]})]}),x[21]=_,x[22]=k,x[23]=w):w=x[23],x[24]!==w||x[25]!==m?(g=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,w]}),x[24]=w,x[25]=m,x[26]=g):g=x[26],g},meta:er},{name:"EdgeCases",story:()=>{let r,n,a,i,o,c,s,m,u,y,p,_,S,b,g,x,v,C,R=(0,l.c)(28),{formatHour:T,formatHourWithTimezone:N}=L();return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Sparkline — no chrome"})}),R[0]=r):r=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(K,{children:[r,e(A,{data:f,series:d,xKey:"timestamp",children:e(j,{children:e(B,{seriesKey:"requests"})})})]}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(W,{children:e(M,{children:"Single data point"})}),R[2]=a):a=R[2],R[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(P,{}),R[3]=i):i=R[3],R[4]!==T?(o=e(Y,{tickFormatter:T}),R[4]=T,R[5]=o):o=R[5],R[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=e(B,{seriesKey:"requests"}),R[6]=c,R[7]=s):(c=R[6],s=R[7]),R[8]!==N?(m=e(J,{xTickFormatter:N}),R[8]=N,R[9]=m):m=R[9],R[10]!==o||R[11]!==m?(u=t(K,{children:[a,e(A,{data:k,series:d,xKey:"timestamp",children:t(j,{children:[i,o,c,s,m]})})]}),R[10]=o,R[11]=m,R[12]=u):u=R[12],R[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(W,{children:e(M,{children:"Series with null gaps"})}),R[13]=y):y=R[13],R[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(el,{}),R[14]=p):p=R[14],R[15]===Symbol.for("react.memo_cache_sentinel")?(_=e(P,{}),R[15]=_):_=R[15],R[16]!==T?(S=e(Y,{tickFormatter:T,minTickGap:32}),R[16]=T,R[17]=S):S=R[17],R[18]===Symbol.for("react.memo_cache_sentinel")?(b=e(Q,{tickFormatter:et}),g=h.map(ew),R[18]=b,R[19]=g):(b=R[18],g=R[19]),R[20]!==N?(x=e(J,{xTickFormatter:N}),R[20]=N,R[21]=x):x=R[21],R[22]!==S||R[23]!==x?(v=t(K,{children:[y,t(A,{data:w,series:h,xKey:"timestamp",children:[p,t(j,{children:[_,S,b,g,x]})]})]}),R[22]=S,R[23]=x,R[24]=v):v=R[24],R[25]!==v||R[26]!==u?(C=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[n,u,v]}),R[25]=v,R[26]=u,R[27]=C):C=R[27],C},meta:er},{name:"CustomTooltip",story:()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=L();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Custom tooltip with units"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(eg)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(ex),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(J,{children:r=>{let{rows:n,xValue:a}=r;return t(z,{children:[e(X,{children:y(a)}),n.map(ev)]})}}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-560",children:t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m},meta:er},{name:"LegendPlacements",story:eo,meta:er},{name:"Filterable",story:()=>{let r,n,a,o,c,s,m,d,u,y,p,_,S,b,k,w=(0,l.c)(29),{formatHour:g,formatHourWithTimezone:v}=L();w[0]===Symbol.for("react.memo_cache_sentinel")?(r=[],w[0]=r):r=w[0];let[C,T]=(0,i.useState)(r);w[1]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{T(t=>0===t.length?h.filter(t=>t.key!==e).map(e$):t.includes(e)?t.filter(t=>t!==e):[...t,e])},w[1]=n):n=w[1];let N=n,O=C.length>0;return w[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(M,{children:"Click a row to isolate, click another to add"}),w[2]=a):a=w[2],w[3]!==O?(o=O&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",onClick:()=>T([]),children:e(x,{})})}),e(F,{children:"Remove filter"})]}),w[3]=O,w[4]=o):o=w[4],w[5]!==O||w[6]!==o?(c=t(W,{children:[a,e($,{alwaysVisible:O,children:o})]}),w[5]=O,w[6]=o,w[7]=c):c=w[7],w[8]!==C?(s=h.map(r=>t(E,{children:[e(D,{asChild:!0,children:t(U,{seriesKey:r.key,onClick:()=>N(r.key),children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]})}),e(F,{children:C.includes(r.key)?"Remove filter":"Click to filter"})]},r.key)),w[8]=C,w[9]=s):s=w[9],w[10]!==s?(m=e(Z,{children:s}),w[10]=s,w[11]=m):m=w[11],w[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(P,{}),w[12]=d):d=w[12],w[13]!==g?(u=e(Y,{tickFormatter:g,minTickGap:32}),w[13]=g,w[14]=u):u=w[14],w[15]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),y=h.map(eW),w[15]=y,w[16]=p):(y=w[15],p=w[16]),w[17]!==v?(_=e(J,{xTickFormatter:v}),w[17]=v,w[18]=_):_=w[18],w[19]!==_||w[20]!==u?(S=t(j,{children:[d,u,p,y,_]}),w[19]=_,w[20]=u,w[21]=S):S=w[21],w[22]!==C||w[23]!==S||w[24]!==m?(b=t(A,{"data-testid":"line-chart",data:f,series:h,xKey:"timestamp",filteredKeys:C,children:[m,S]}),w[22]=C,w[23]=S,w[24]=m,w[25]=b):b=w[25],w[26]!==b||w[27]!==c?(k=e("div",{className:"w-560",children:t(K,{"data-testid":"chart",children:[c,b]})}),w[26]=b,w[27]=c,w[28]=k):k=w[28],k},meta:er},{name:"CrossChartHoverSync",story:()=>{let r,n,a,o,c,s,m,d,u,y,f,S,b,k,w,g,x,v,C,R=(0,l.c)(33),{formatHour:T,formatHourWithTimezone:N}=L(),[E,F]=(0,i.useState)(null);return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(W,{children:e(M,{children:"Region A"})}),R[0]=r):r=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(Z,{children:h.map(eM)}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(P,{}),R[2]=a):a=R[2],R[3]!==T?(o=e(Y,{tickFormatter:T,minTickGap:32}),R[3]=T,R[4]=o):o=R[4],R[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=h.map(eL),R[5]=c,R[6]=s):(c=R[5],s=R[6]),R[7]!==N?(m=e(J,{xTickFormatter:N}),R[7]=N,R[8]=m):m=R[8],R[9]!==o||R[10]!==m?(d=t(j,{children:[a,o,c,s,m]}),R[9]=o,R[10]=m,R[11]=d):d=R[11],R[12]!==E||R[13]!==d?(u=t(K,{children:[r,t(A,{data:p,series:h,xKey:"timestamp",syncId:"regions",activeKey:E,onActiveKeyChange:F,children:[n,d]})]}),R[12]=E,R[13]=d,R[14]=u):u=R[14],R[15]===Symbol.for("react.memo_cache_sentinel")?(y=e(W,{children:e(M,{children:"Region B"})}),R[15]=y):y=R[15],R[16]===Symbol.for("react.memo_cache_sentinel")?(f=e(Z,{children:h.map(eO)}),R[16]=f):f=R[16],R[17]===Symbol.for("react.memo_cache_sentinel")?(S=e(P,{}),R[17]=S):S=R[17],R[18]!==T?(b=e(Y,{tickFormatter:T,minTickGap:32}),R[18]=T,R[19]=b):b=R[19],R[20]===Symbol.for("react.memo_cache_sentinel")?(k=e(Q,{tickFormatter:et}),w=h.map(eG),R[20]=k,R[21]=w):(k=R[20],w=R[21]),R[22]!==N?(g=e(J,{xTickFormatter:N}),R[22]=N,R[23]=g):g=R[23],R[24]!==b||R[25]!==g?(x=t(j,{children:[S,b,k,w,g]}),R[24]=b,R[25]=g,R[26]=x):x=R[26],R[27]!==E||R[28]!==x?(v=t(K,{children:[y,t(A,{data:_,series:h,xKey:"timestamp",syncId:"regions",activeKey:E,onActiveKeyChange:F,children:[f,x]})]}),R[27]=E,R[28]=x,R[29]=v):v=R[29],R[30]!==v||R[31]!==u?(C=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[u,v]}),R[30]=v,R[31]=u,R[32]=C):C=R[32],C},meta:er},{name:"Zoom",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-560",children:e(ec,{})}),r[0]=t):t=r[0],t},meta:er},{name:"Loading",story:em,meta:er},{name:"Refreshing",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[e(ed,{placement:"none",title:"No legend"}),e(ed,{placement:"top",title:"Top — JSX order"}),e(ed,{placement:"bottom",title:"Bottom — JSX order"}),e(ed,{placement:"left",title:"Left — wrapped in HStack"}),e(ed,{placement:"right",title:"Right — wrapped in HStack"})]}),n[0]=r):r=n[0],r},meta:er},{name:"Empty",story:eh,meta:er},{name:"LongTimeRange",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-720",children:e(eu,{})}),r[0]=t):t=r[0],t},meta:er}];function eV({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,l=()=>i.default.createElement(a,n),o={args:n,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 i.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},i.default.createElement("h2",{className:"text-sm mb-12"},e.name),i.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(i.default.createElement(window.WallarmDS.Root,null,eH.map((e,t)=>i.default.createElement(eV,{key:t,entry:e})))),t}}})();
|
|
12
|
+
*/var l,i,o=Object.create,c=Object.defineProperty,s=Object.getOwnPropertyDescriptor,m=Object.getOwnPropertyNames,d=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,u=(e,t,r,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let a of m(t))h.call(e,a)||a===r||c(e,a,{get:()=>t[a],enumerable:!(n=s(t,a))||n.enumerable});return e},y={},f={$dispatcherGuard:()=>T,$makeReadOnly:()=>F,$reset:()=>E,$structuralCheck:()=>L,c:()=>x,clearRenderCounterRegistry:()=>K,renderCounterRegistry:()=>D,useRenderCounter:()=>$};for(var p in f)c(y,p,{get:f[p],enumerable:!0});e.exports=u(c({},"__esModule",{value:!0}),y);var _=(a=null!=(n=r("C"))?o(d(n)):{},u(n&&n.__esModule?a:c(a,"default",{value:n,enumerable:!0}),n)),{useRef:k,useEffect:S,isValidElement:b}=_,w=null!=(l=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE)?l:_.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,g=Symbol.for("react.memo_cache_sentinel"),x="function"==typeof(null==(i=_.__COMPILER_RUNTIME)?void 0:i.c)?_.__COMPILER_RUNTIME.c:function(e){return _.useMemo(()=>{let t=Array(e);for(let r=0;r<e;r++)t[r]=g;return t[g]=!0,t},[])},v={};["readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","getCacheSignal","getCacheForType","useCacheRefresh"].forEach(e=>{v[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 C=null;function R(e){return w.ReactCurrentDispatcher.current=e,w.ReactCurrentDispatcher.current}v.useMemoCache=e=>{if(null!=C)return C.useMemoCache(e);throw Error("React Compiler internal invariant violation: unexpected null dispatcher")};var N=[];function T(e){let t=w.ReactCurrentDispatcher.current;if(0===e){if(N.push(t),1===N.length&&(C=t),t===v)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.");R(v)}else if(1===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");0===N.length&&(C=null),R(e)}else if(2===e)N.push(t),R(C);else if(3===e){let e=N.pop();if(null==e)throw Error("React Compiler internal error: unexpected null in guard stack");R(e)}else throw Error("React Compiler internal error: unreachable block"+e)}function E(e){for(let t=0;t<e.length;t++)e[t]=g}function F(){throw Error("TODO: implement $makeReadOnly in react-compiler-runtime")}var D=new Map;function K(){for(let e of D.values())e.forEach(e=>{e.count=0})}function $(e){let t=k(null);null!=t.current&&(t.current.count+=1),S(()=>{if(null==t.current){let r,n={count:0};null==(r=D.get(e))&&(r=new Set,D.set(e,r)),r.add(n),t.current=n}return()=>{var r;let n;null!==t.current&&(r=t.current,null!=(n=D.get(e))&&n.delete(r))}})}var M=new Set;function L(e,t,r,n,a,l){function i(e,t,i,o){let c=`${n}:${l} [${a}] ${r}${i} changed from ${e} to ${t} at depth ${o}`;M.has(c)||(M.add(c),console.error(c))}!function e(t,r,n,a){if(!(a>2)){if(t!==r)if(typeof t!=typeof r)i(`type ${typeof t}`,`type ${typeof r}`,n,a);else if("object"==typeof t){let l=Array.isArray(t),o=Array.isArray(r);if(null===t&&null!==r)i("null",`type ${typeof r}`,n,a);else if(null===r)i(`type ${typeof t}`,"null",n,a);else if(t instanceof Map)if(r instanceof Map)if(t.size!==r.size)i(`Map instance with size ${t.size}`,`Map instance with size ${r.size}`,n,a);else for(let[l,o]of t)r.has(l)?e(o,r.get(l),`${n}.get(${l})`,a+1):i(`Map instance with key ${l}`,`Map instance without key ${l}`,n,a);else i("Map instance","other value",n,a);else if(r instanceof Map)i("other value","Map instance",n,a);else if(t instanceof Set)if(r instanceof Set)if(t.size!==r.size)i(`Set instance with size ${t.size}`,`Set instance with size ${r.size}`,n,a);else for(let e of r)t.has(e)||i(`Set instance without element ${e}`,`Set instance with element ${e}`,n,a);else i("Set instance","other value",n,a);else if(r instanceof Set)i("other value","Set instance",n,a);else if(l||o)if(l!==o)i(`type ${l?"array":"object"}`,`type ${o?"array":"object"}`,n,a);else if(t.length!==r.length)i(`array with length ${t.length}`,`array with length ${r.length}`,n,a);else for(let l=0;l<t.length;l++)e(t[l],r[l],`${n}[${l}]`,a+1);else if(b(t)||b(r))b(t)!==b(r)?i(`type ${b(t)?"React element":"object"}`,`type ${b(r)?"React element":"object"}`,n,a):t.type!==r.type?i(`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||i(`object without key ${e}`,`object with key ${e}`,n,a);for(let l in t)l in r?e(t[l],r[l],`${n}.${l}`,a+1):i(`object with key ${l}`,`object without key ${l}`,n,a)}}else{if("function"==typeof t)return;isNaN(t)||isNaN(r)?isNaN(t)!==isNaN(r)&&i(`${isNaN(t)?"NaN":"non-NaN value"}`,`${isNaN(r)?"NaN":"non-NaN value"}`,n,a):t!==r&&i(t,r,n,a)}}}(e,t,"",0)}},p(e,t,r){let n=new WeakMap,a=new WeakMap;function l(e,t,r){let l=t,i=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!=i.ref&&!l.prototype?.isReactComponent){let t=l,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)),l=a}if("string"==typeof l&&"boolean"==typeof i.inert&&((i={...i}).inert?i.inert="":delete i.inert),"string"==typeof l)for(let[e,t]of[["fill-rule","fillRule"],["clip-rule","clipRule"]])e in i&&(i={...i,[t]:i[e]},delete i[e]);return"string"==typeof l&&null!=i.ref&&(l=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 l=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 l.displayName=`CanvasHost(${t})`,r.set(t,l),l}(e,l)),{type:l,props:i}}function i(e){let t=(t,r,n)=>{let a=l(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=l(e,t,r??{}),{children:i,...o}=a.props;return e.createElement(a.type,void 0===n?o:{...o,key:n},...Array.isArray(i)?i:[i])},jsxDEV:t,Fragment:e.Fragment}}function o(e){return{...e,createElement:(t,r,...n)=>{let a=l(e,t,r??{});return e.createElement(a.type,a.props,...n)},cloneElement:(t,r,...n)=>{let a=e.cloneElement(t,r??void 0,...n),i=a.ref,o=l(e,a.type,{...a.props,ref:i});return o.type===a.type&&"string"!=typeof a.type?a:e.createElement(o.type,{...o.props,key:a.key})}}}r.d(t,{MA:()=>i,YJ:()=>o})},C(e,t,r){r.r(t);let n=(0,r("p").YJ)(window.React),{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:u,createContext:y,createElement:f,createFactory:p,createRef:_,forwardRef:k,isValidElement:S,lazy:b,memo:w,startTransition:g,unstable_act:x,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:N,useEffect:T,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:M,useRef:L,useState:W,useSyncExternalStore:O,useTransition:I,version:G,use:A}=n;r.d(t,{},{Children:a,Component:l,Fragment:i,Profiler:o,PureComponent:c,StrictMode:s,Suspense:m,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:d,act:h,cloneElement:u,createContext:y,createElement:f,createFactory:p,createRef:_,default:n,forwardRef:k,isValidElement:S,lazy:b,memo:w,startTransition:g,unstable_act:x,use:A,useCallback:v,useContext:C,useDebugValue:R,useDeferredValue:N,useEffect:T,useId:E,useImperativeHandle:F,useInsertionEffect:D,useLayoutEffect:K,useMemo:$,useReducer:M,useRef:L,useState:W,useSyncExternalStore:O,useTransition:I,version:G})}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var l=t[n]={exports:{}};return e[n](l,l.exports,r),l.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 l=r("vD"),i=r("C");let o=new Intl.NumberFormat("en-US"),c=e=>t=>`${e(t.from)} → ${e(t.to)}`,s=(e,t,r)=>{let n=43758.5453*Math.sin((e+t)*r);return n-Math.floor(n)},m=(e,t=1)=>{let r=new Date(2025,0,1,0,0,0).getTime(),n=[];for(let a=0;a<e;a++){let e=r+60*a*6e4,l=Math.round(120+30*Math.sin((a+t)/4)+(s(a,t,12.9898)-.5)*80),i=Math.round(24+10*Math.cos((a+t)/5)+(s(a,t,78.233)-.5)*32),o=Math.round(80+14*Math.sin((a+t)/6)+(s(a,t,39.346)-.5)*40);n.push({timestamp:e,requests:l,errors:i,latency:o})}return n},d=[{key:"requests",label:"Requests",color:"brand"}],h=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors",color:"red"},{key:"latency",label:"Latency",color:"blue"}],u=[{key:"requests",label:"Requests",color:"brand"},{key:"errors",label:"Errors (target)",color:"red",variant:"dashed"}],y=[{key:"requests",label:"Requests",color:"var(--color-violet-500)"},{key:"errors",label:"Errors",color:"var(--color-emerald-500)"}],f=m(24),p=m(24,1),_=m(24,7),k=(()=>{let e=new Date(2024,0,1,0,0,0).getTime(),t=[];for(let r=0;r<60;r++){let n=e+24*r*36e5,a=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:n,requests:a,errors:l})}return t})(),S=m(1e3),b=[{timestamp:new Date(2025,0,1,12,0,0).getTime(),requests:142}],w=f.map((e,t)=>t>=6&&t<=8||t>=15&&t<=16?{...e,errors:null}:e),g={requests:" req",errors:" err",latency:" ms"},x=window.WallarmDS.Icons.FilterX,v=window.WallarmDS.Icons.RefreshCcw,C=window.WallarmDS.Icons.ZoomOut,R=window.WallarmDS.Button,N=window.WallarmDS.Skeleton,T=window.WallarmDS.HStack,E=window.WallarmDS.Tooltip,F=window.WallarmDS.TooltipContent,D=window.WallarmDS.TooltipTrigger,K=window.WallarmDS.Chart,$=window.WallarmDS.ChartActions,M=window.WallarmDS.ChartHeader,L=window.WallarmDS.ChartTitle,W=window.WallarmDS.useChartTimeFormatters,O=window.WallarmDS.MetricDelta,I=window.WallarmDS.MetricHeader,G=window.WallarmDS.MetricValue,A=window.WallarmDS.LineChart,j=window.WallarmDS.LineChartBody,P=window.WallarmDS.LineChartEmpty,z=window.WallarmDS.LineChartGrid,q=window.WallarmDS.LineChartHoverPopover,H=window.WallarmDS.LineChartHoverPopoverDot,U=window.WallarmDS.LineChartHoverPopoverRow,V=window.WallarmDS.LineChartHoverPopoverTimestamp,B=window.WallarmDS.LineChartLegend,X=window.WallarmDS.LineChartLegendItem,J=window.WallarmDS.LineChartLine,Z=window.WallarmDS.LineChartTooltip,Y=window.WallarmDS.LineChartXAxis,Q=window.WallarmDS.LineChartYAxis,ee=window.WallarmDS.LineChartZoomBrush,et=e=>{let t;return t=Number(e),o.format(t)},er={title:"Data Display/SimpleCharts/LineChart",component:A,subcomponents:{LineChartBody:j,LineChartGrid:z,LineChartXAxis:Y,LineChartYAxis:Q,LineChartLine:J,LineChartTooltip:Z,LineChartHoverPopover:q,LineChartHoverPopoverTimestamp:V,LineChartHoverPopoverRow:U,LineChartHoverPopoverDot:H,LineChartLegend:B,LineChartLegendItem:X,LineChartZoomBrush:ee,LineChartEmpty:P},parameters:{layout:"padded",docs:{description:{component:"A time series in the family's card — request volume, error rate, latency, anything where the X axis reads left to right; reach for `BarList` for a top-N comparison and `PieChart` for a share of a total. Every part is an opt-in child, so a bare sparkline and a fully instrumented panel are the same component with different children, and hover, filtering and zoom all travel through one context."}}},tags:["autodocs"]},en=t=>{let r,n,a=(0,l.c)(4),{series:i}=t,o=void 0===i?h:i;return a[0]!==o?(r=o.map(ed),a[0]=o,a[1]=r):r=a[1],a[2]!==r?(n=e(B,{children:r}),a[2]=r,a[3]=n):n=a[3],n},ea=()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,k,S,b,w,g,x,v,C,R,N,E,F,D,$,O,I,G,P,q,H,U,V,X=(0,l.c)(57),{formatHour:J,formatHourWithTimezone:ee}=W();return X[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Top — JSX order"})}),X[0]=r):r=X[0],X[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(eb)}),X[1]=n):n=X[1],X[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),X[2]=a):a=X[2],X[3]!==J?(i=e(Y,{tickFormatter:J,minTickGap:32}),X[3]=J,X[4]=i):i=X[4],X[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(ew),X[5]=o,X[6]=c):(o=X[5],c=X[6]),X[7]!==ee?(s=e(Z,{xTickFormatter:ee}),X[7]=ee,X[8]=s):s=X[8],X[9]!==i||X[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),X[9]=i,X[10]=s,X[11]=m):m=X[11],X[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(M,{children:e(L,{children:"Bottom — JSX order"})}),X[12]=d):d=X[12],X[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(z,{}),X[13]=u):u=X[13],X[14]!==J?(y=e(Y,{tickFormatter:J,minTickGap:32}),X[14]=J,X[15]=y):y=X[15],X[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eg),X[16]=p,X[17]=_):(p=X[16],_=X[17]),X[18]!==ee?(k=e(Z,{xTickFormatter:ee}),X[18]=ee,X[19]=k):k=X[19],X[20]!==y||X[21]!==k?(S=t(j,{children:[u,y,p,_,k]}),X[20]=y,X[21]=k,X[22]=S):S=X[22],X[23]===Symbol.for("react.memo_cache_sentinel")?(b=e(B,{children:h.map(ex)}),X[23]=b):b=X[23],X[24]!==S?(w=t(K,{children:[d,t(A,{data:f,series:h,xKey:"timestamp",children:[S,b]})]}),X[24]=S,X[25]=w):w=X[25],X[26]===Symbol.for("react.memo_cache_sentinel")?(g=e(M,{children:e(L,{children:"Left — wrapped in HStack"})}),X[26]=g):g=X[26],X[27]===Symbol.for("react.memo_cache_sentinel")?(x=e(B,{orientation:"vertical",children:h.map(ev)}),X[27]=x):x=X[27],X[28]===Symbol.for("react.memo_cache_sentinel")?(v=e(z,{}),X[28]=v):v=X[28],X[29]!==J?(C=e(Y,{tickFormatter:J,minTickGap:32}),X[29]=J,X[30]=C):C=X[30],X[31]===Symbol.for("react.memo_cache_sentinel")?(R=e(Q,{tickFormatter:et}),N=h.map(eC),X[31]=R,X[32]=N):(R=X[31],N=X[32]),X[33]!==ee?(E=e(Z,{xTickFormatter:ee}),X[33]=ee,X[34]=E):E=X[34],X[35]!==C||X[36]!==E?(F=t(K,{children:[g,e(A,{data:f,series:h,xKey:"timestamp",children:t(T,{flexGrow:!0,gap:12,align:"stretch",children:[x,t(j,{children:[v,C,R,N,E]})]})})]}),X[35]=C,X[36]=E,X[37]=F):F=X[37],X[38]===Symbol.for("react.memo_cache_sentinel")?(D=e(M,{children:e(L,{children:"Right — wrapped in HStack"})}),X[38]=D):D=X[38],X[39]===Symbol.for("react.memo_cache_sentinel")?($=e(z,{}),X[39]=$):$=X[39],X[40]!==J?(O=e(Y,{tickFormatter:J,minTickGap:32}),X[40]=J,X[41]=O):O=X[41],X[42]===Symbol.for("react.memo_cache_sentinel")?(I=e(Q,{tickFormatter:et}),G=h.map(eR),X[42]=I,X[43]=G):(I=X[42],G=X[43]),X[44]!==ee?(P=e(Z,{xTickFormatter:ee}),X[44]=ee,X[45]=P):P=X[45],X[46]!==O||X[47]!==P?(q=t(j,{children:[$,O,I,G,P]}),X[46]=O,X[47]=P,X[48]=q):q=X[48],X[49]===Symbol.for("react.memo_cache_sentinel")?(H=e(B,{orientation:"vertical",children:h.map(eN)}),X[49]=H):H=X[49],X[50]!==q?(U=t(K,{children:[D,e(A,{data:f,series:h,xKey:"timestamp",children:t(T,{flexGrow:!0,gap:12,align:"stretch",children:[q,H]})})]}),X[50]=q,X[51]=U):U=X[51],X[52]!==w||X[53]!==F||X[54]!==U||X[55]!==m?(V=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,w,F,U]}),X[52]=w,X[53]=F,X[54]=U,X[55]=m,X[56]=V):V=X[56],V};ea.parameters={layout:"padded"};let el=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,S,b,w,g,x,v=(0,l.c)(32),{formatDate:N,formatDateWithTimezone:T}=W(),[O,I]=(0,i.useState)(k);v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e=>{e?I(t=>t.slice(e.fromIndex,e.toIndex+1)):I(k)},v[0]=r):r=v[0];let G=r,P=O!==k;v[1]!==N?(n=c(N),v[1]=N,v[2]=n):n=v[2];let q=n,H=(0,i.useRef)(null);return v[3]!==P?(a=()=>{if(!P)return;let e=e=>{if("Escape"!==e.key)return;let t=e.target,r=null===t||t===document.body||t===document.documentElement,n=t instanceof Node&&H.current?.contains(t);(r||n)&&(e.preventDefault(),G(null))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},o=[P,G],v[3]=P,v[4]=a,v[5]=o):(a=v[4],o=v[5]),(0,i.useEffect)(a,o),v[6]===Symbol.for("react.memo_cache_sentinel")?(s=e(L,{children:'Drag on the plot, then click "Zoom in" — Esc to cancel'}),v[6]=s):s=v[6],v[7]!==P?(m=P&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>G(null),children:e(C,{})})}),e(F,{children:"Reset time selection"})]}),v[7]=P,v[8]=m):m=v[8],v[9]!==P||v[10]!==m?(d=t(M,{children:[s,e($,{alwaysVisible:P,children:m})]}),v[9]=P,v[10]=m,v[11]=d):d=v[11],v[12]===Symbol.for("react.memo_cache_sentinel")?(u=e(en,{}),v[12]=u):u=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(z,{}),v[13]=y):y=v[13],v[14]!==N?(f=e(Y,{tickFormatter:N,minTickGap:48}),v[14]=N,v[15]=f):f=v[15],v[16]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),_=h.map(eM),v[16]=p,v[17]=_):(p=v[16],_=v[17]),v[18]!==T?(S=e(Z,{xTickFormatter:T}),v[18]=T,v[19]=S):S=v[19],v[20]!==q?(b=e(ee,{formatRange:q}),v[20]=q,v[21]=b):b=v[21],v[22]!==S||v[23]!==b||v[24]!==f?(w=t(j,{height:220,children:[y,f,p,_,S,b]}),v[22]=S,v[23]=b,v[24]=f,v[25]=w):w=v[25],v[26]!==w||v[27]!==O?(g=t(A,{"data-testid":"line-chart",data:O,series:h,xKey:"timestamp",onZoomChange:G,children:[u,w]}),v[26]=w,v[27]=O,v[28]=g):g=v[28],v[29]!==g||v[30]!==d?(x=t(K,{ref:H,"data-testid":"chart",children:[d,g]}),v[29]=g,v[30]=d,v[31]=x):x=v[31],x},ei=t=>{let r,n,a=(0,l.c)(3),{orientation:i}=t;return a[0]===Symbol.for("react.memo_cache_sentinel")?(r=[0,1,2].map(eL),a[0]=r):r=a[0],a[1]!==i?(n=e(B,{orientation:i,children:r}),a[1]=i,a[2]=n):n=a[2],n},eo=r=>{let n,o,c,s,m,d,u,y,p,_,k,S,b,w,g=(0,l.c)(43),{placement:x,title:C}=r,{formatHour:N,formatHourWithTimezone:O}=W(),[I,G]=(0,i.useState)(!0);g[0]!==I?(n=()=>{if(!I)return;let e=setTimeout(()=>G(!1),2e3);return()=>clearTimeout(e)},o=[I],g[0]=I,g[1]=n,g[2]=o):(n=g[1],o=g[2]),(0,i.useEffect)(n,o);let q="left"===x||"right"===x,H=q?"vertical":"horizontal";g[3]!==I||g[4]!==H?(c=I?e(ei,{orientation:H}):e(B,{orientation:H,children:h.map(eW)}),g[3]=I,g[4]=H,g[5]=c):c=g[5];let U=c;g[6]!==N||g[7]!==O||g[8]!==q||g[9]!==I?(s=I?e(P,{className:q?"flex-1 min-w-0":void 0}):t(j,{children:[e(z,{}),e(Y,{tickFormatter:N,minTickGap:32}),e(Q,{tickFormatter:et}),h.map(eO),e(Z,{xTickFormatter:O})]}),g[6]=N,g[7]=O,g[8]=q,g[9]=I,g[10]=s):s=g[10];let V=s;if("none"===x)m=V;else if("top"===x){let e;g[11]!==V||g[12]!==U?(e=t(a,{children:[U,V]}),g[11]=V,g[12]=U,g[13]=e):e=g[13],m=e}else if("bottom"===x){let e;g[14]!==V||g[15]!==U?(e=t(a,{children:[V,U]}),g[14]=V,g[15]=U,g[16]=e):e=g[16],m=e}else if("left"===x){let e;g[17]!==V||g[18]!==U?(e=t(T,{flexGrow:!0,gap:12,align:"stretch",children:[U,V]}),g[17]=V,g[18]=U,g[19]=e):e=g[19],m=e}else{let e;g[20]!==V||g[21]!==U?(e=t(T,{flexGrow:!0,gap:12,align:"stretch",children:[V,U]}),g[20]=V,g[21]=U,g[22]=e):e=g[22],m=e}return g[23]!==C?(d=e(L,{children:C}),g[23]=C,g[24]=d):d=g[24],g[25]===Symbol.for("react.memo_cache_sentinel")?(u=()=>G(!0),y=e(v,{}),g[25]=u,g[26]=y):(u=g[25],y=g[26]),g[27]!==I?(p=e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reload",disabled:I,onClick:u,children:y})}),g[27]=I,g[28]=p):p=g[28],g[29]===Symbol.for("react.memo_cache_sentinel")?(_=e(F,{children:"Reload"}),g[29]=_):_=g[29],g[30]!==I||g[31]!==p?(k=e($,{alwaysVisible:!0,children:t(E,{disabled:I,children:[p,_]})}),g[30]=I,g[31]=p,g[32]=k):k=g[32],g[33]!==k||g[34]!==d?(S=t(M,{children:[d,k]}),g[33]=k,g[34]=d,g[35]=S):S=g[35],g[36]!==m||g[37]!==I?(b=I?m:e(A,{data:f,series:h,xKey:"timestamp",children:m}),g[36]=m,g[37]=I,g[38]=b):b=g[38],g[39]!==I||g[40]!==S||g[41]!==b?(w=t(K,{"aria-busy":I,"aria-live":"polite",children:[S,b]}),g[39]=I,g[40]=S,g[41]=b,g[42]=w):w=g[42],w},ec=()=>{let r,n,a,o,s,m,d,u,y,f,p,_,k,b,w,g=(0,l.c)(31),{formatDate:x,formatDateTime:v,formatDateTimeWithTimezone:N}=W();g[0]!==v?(r=c(v),g[0]=v,g[1]=r):r=g[1];let T=r,[O,I]=(0,i.useState)(null);e:{let e;if(!O){n=S;break e}g[2]!==O.fromIndex||g[3]!==O.toIndex?(e=S.slice(O.fromIndex,O.toIndex+1),g[2]=O.fromIndex,g[3]=O.toIndex,g[4]=e):e=g[4],n=e}let G=n;g[5]===Symbol.for("react.memo_cache_sentinel")?(a=e(L,{children:"1,000 hourly samples — drag to zoom"}),g[5]=a):a=g[5];let P=null!==O;return g[6]!==O?(o=null!==O&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Reset time selection",onClick:()=>I(null),children:e(C,{})})}),e(F,{children:"Reset time selection"})]}),g[6]=O,g[7]=o):o=g[7],g[8]!==P||g[9]!==o?(s=t(M,{children:[a,e($,{alwaysVisible:P,children:o})]}),g[8]=P,g[9]=o,g[10]=s):s=g[10],g[11]===Symbol.for("react.memo_cache_sentinel")?(m=e(B,{children:h.map(eI)}),g[11]=m):m=g[11],g[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(z,{}),g[12]=d):d=g[12],g[13]!==x?(u=e(Y,{tickFormatter:x,minTickGap:64}),g[13]=x,g[14]=u):u=g[14],g[15]===Symbol.for("react.memo_cache_sentinel")?(f=e(Q,{tickFormatter:et}),y=h.map(eG),g[15]=y,g[16]=f):(y=g[15],f=g[16]),g[17]!==N?(p=e(Z,{xTickFormatter:N}),g[17]=N,g[18]=p):p=g[18],g[19]!==T?(_=e(ee,{formatRange:T}),g[19]=T,g[20]=_):_=g[20],g[21]!==p||g[22]!==_||g[23]!==u?(k=t(j,{height:220,children:[d,u,f,y,p,_]}),g[21]=p,g[22]=_,g[23]=u,g[24]=k):k=g[24],g[25]!==k||g[26]!==G?(b=t(A,{data:G,series:h,xKey:"timestamp",onZoomChange:I,children:[m,k]}),g[25]=k,g[26]=G,g[27]=b):b=g[27],g[28]!==b||g[29]!==s?(w=t(K,{children:[s,b]}),g[28]=b,g[29]=s,g[30]=w):w=g[30],w};function es(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function em(t){return e(J,{seriesKey:t.key},t.key)}function ed(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eh(t){return e(J,{seriesKey:t.key},t.key)}function eu(t){return e(J,{seriesKey:t.key,curve:"linear"},t.key)}function ey(t){return e(J,{seriesKey:t.key},t.key)}function ef(t){return e(J,{seriesKey:t.key},t.key)}function ep(t){return e(J,{seriesKey:t.key},t.key)}function e_(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ek(t){return e(J,{seriesKey:t.key},t.key)}function eS(t){let{series:r,value:n}=t,a=g[r.key]??"";return e(U,{series:r,value:"number"==typeof n?n:0,formatValue:e=>`${"number"==typeof e?o.format(e):String(e??"")}${a}`},r.key)}function eb(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ew(t){return e(J,{seriesKey:t.key},t.key)}function eg(t){return e(J,{seriesKey:t.key},t.key)}function ex(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function ev(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eC(t){return e(J,{seriesKey:t.key},t.key)}function eR(t){return e(J,{seriesKey:t.key},t.key)}function eN(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eT(e){return e.key}function eE(t){return e(J,{seriesKey:t.key},t.key)}function eF(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eD(t){return e(J,{seriesKey:t.key},t.key)}function eK(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function e$(t){return e(J,{seriesKey:t.key},t.key)}function eM(t){return e(J,{seriesKey:t.key},t.key)}function eL(t){return e(X,{seriesKey:`skeleton-${t}`,children:e(N,{width:"72px",height:"20px",rounded:4})},t)}function eW(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eO(t){return e(J,{seriesKey:t.key},t.key)}function eI(r){return t(X,{seriesKey:r.key,children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]},r.key)}function eG(t){return e(J,{seriesKey:t.key,disableAnimation:!0},t.key)}let eA=[{name:"Default",story:()=>{let r,n,a,i,o,c,s,m=(0,l.c)(11),{formatHour:h,formatHourWithTimezone:u}=W();return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Requests per hour"})}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(z,{}),m[1]=n):n=m[1],m[2]!==h?(a=e(Y,{tickFormatter:h,minTickGap:32}),m[2]=h,m[3]=a):a=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(i=e(Q,{tickFormatter:et}),o=e(J,{seriesKey:"requests",curve:"linear"}),m[4]=i,m[5]=o):(i=m[4],o=m[5]),m[6]!==u?(c=e(Z,{xTickFormatter:u}),m[6]=u,m[7]=c):c=m[7],m[8]!==a||m[9]!==c?(s=e("div",{className:"w-560",children:t(K,{children:[r,e(A,{data:f,series:d,xKey:"timestamp",children:t(j,{children:[n,a,i,o,c]})})]})}),m[8]=a,m[9]=c,m[10]=s):s=m[10],s},meta:er},{name:"DefaultMulti",story:()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=W();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Traffic, errors, and latency"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(es)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(em),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(Z,{xTickFormatter:y}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-560",children:t(K,{"data-testid":"chart",children:[r,t(A,{"data-testid":"line-chart",data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m},meta:er},{name:"WithMetric",story:()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=W();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Requests per hour"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=t("div",{className:"flex items-center justify-between pr-8",children:[t(I,{className:"px-16",children:[e(G,{children:2903}),e(O,{value:10,trend:"up",sentiment:"negative"})]}),e(en,{})]}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(eh),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(Z,{xTickFormatter:y}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-800",children:t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m},meta:er},{name:"Curves",story:()=>{let r,n,a,i,o,c,s,m,d,u,y,p,_,k,S,b,w,g,x,v=(0,l.c)(29),{formatHour:C,formatHourWithTimezone:R}=W();return v[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Linear interpolation"})}),v[0]=r):r=v[0],v[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(en,{}),v[1]=n):n=v[1],v[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),v[2]=a):a=v[2],v[3]!==C?(i=e(Y,{tickFormatter:C,minTickGap:32}),v[3]=C,v[4]=i):i=v[4],v[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(eu),v[5]=o,v[6]=c):(o=v[5],c=v[6]),v[7]!==R?(s=e(Z,{xTickFormatter:R}),v[7]=R,v[8]=s):s=v[8],v[9]!==i||v[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),v[9]=i,v[10]=s,v[11]=m):m=v[11],v[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(M,{children:e(L,{children:"Mixed curves — monotone vs linear"})}),v[12]=d):d=v[12],v[13]===Symbol.for("react.memo_cache_sentinel")?(u=e(en,{}),v[13]=u):u=v[13],v[14]===Symbol.for("react.memo_cache_sentinel")?(y=e(z,{}),v[14]=y):y=v[14],v[15]!==C?(p=e(Y,{tickFormatter:C,minTickGap:32}),v[15]=C,v[16]=p):p=v[16],v[17]===Symbol.for("react.memo_cache_sentinel")?(_=e(Q,{tickFormatter:et}),k=e(J,{seriesKey:"requests",curve:"monotone"}),S=e(J,{seriesKey:"errors",curve:"linear"}),b=e(J,{seriesKey:"latency",curve:"linear"}),v[17]=_,v[18]=k,v[19]=S,v[20]=b):(_=v[17],k=v[18],S=v[19],b=v[20]),v[21]!==R?(w=e(Z,{xTickFormatter:R}),v[21]=R,v[22]=w):w=v[22],v[23]!==p||v[24]!==w?(g=t(K,{children:[d,t(A,{data:f,series:h,xKey:"timestamp",children:[u,t(j,{children:[y,p,_,k,S,b,w]})]})]}),v[23]=p,v[24]=w,v[25]=g):g=v[25],v[26]!==g||v[27]!==m?(x=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,g]}),v[26]=g,v[27]=m,v[28]=x):x=v[28],x},meta:er},{name:"LineStyling",story:()=>{let r,n,a,i,o,c,s,m,d,h,p,_,k,S,b,w,g,x=(0,l.c)(27),{formatHour:v,formatHourWithTimezone:C}=W();return x[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Solid + dashed series"})}),x[0]=r):r=x[0],x[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(en,{series:u}),x[1]=n):n=x[1],x[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),x[2]=a):a=x[2],x[3]!==v?(i=e(Y,{tickFormatter:v,minTickGap:32}),x[3]=v,x[4]=i):i=x[4],x[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=u.map(ey),x[5]=o,x[6]=c):(o=x[5],c=x[6]),x[7]!==C?(s=e(Z,{xTickFormatter:C}),x[7]=C,x[8]=s):s=x[8],x[9]!==i||x[10]!==s?(m=t(K,{children:[r,t(A,{data:f,series:u,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]}),x[9]=i,x[10]=s,x[11]=m):m=x[11],x[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(M,{children:e(L,{children:"Custom palette via CSS color string"})}),x[12]=d):d=x[12],x[13]===Symbol.for("react.memo_cache_sentinel")?(h=e(en,{series:y}),x[13]=h):h=x[13],x[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(z,{}),x[14]=p):p=x[14],x[15]!==v?(_=e(Y,{tickFormatter:v,minTickGap:32}),x[15]=v,x[16]=_):_=x[16],x[17]===Symbol.for("react.memo_cache_sentinel")?(k=e(Q,{tickFormatter:et}),S=y.map(ef),x[17]=k,x[18]=S):(k=x[17],S=x[18]),x[19]!==C?(b=e(Z,{xTickFormatter:C}),x[19]=C,x[20]=b):b=x[20],x[21]!==_||x[22]!==b?(w=t(K,{children:[d,t(A,{data:f,series:y,xKey:"timestamp",children:[h,t(j,{children:[p,_,k,S,b]})]})]}),x[21]=_,x[22]=b,x[23]=w):w=x[23],x[24]!==w||x[25]!==m?(g=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[m,w]}),x[24]=w,x[25]=m,x[26]=g):g=x[26],g},meta:er},{name:"EdgeCases",story:()=>{let r,n,a,i,o,c,s,m,u,y,p,_,k,S,g,x,v,C,R=(0,l.c)(28),{formatHour:N,formatHourWithTimezone:T}=W();return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Sparkline — no chrome"})}),R[0]=r):r=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(K,{children:[r,e(A,{data:f,series:d,xKey:"timestamp",children:e(j,{children:e(J,{seriesKey:"requests"})})})]}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(M,{children:e(L,{children:"Single data point"})}),R[2]=a):a=R[2],R[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(z,{}),R[3]=i):i=R[3],R[4]!==N?(o=e(Y,{tickFormatter:N}),R[4]=N,R[5]=o):o=R[5],R[6]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=e(J,{seriesKey:"requests"}),R[6]=c,R[7]=s):(c=R[6],s=R[7]),R[8]!==T?(m=e(Z,{xTickFormatter:T}),R[8]=T,R[9]=m):m=R[9],R[10]!==o||R[11]!==m?(u=t(K,{children:[a,e(A,{data:b,series:d,xKey:"timestamp",children:t(j,{children:[i,o,c,s,m]})})]}),R[10]=o,R[11]=m,R[12]=u):u=R[12],R[13]===Symbol.for("react.memo_cache_sentinel")?(y=e(M,{children:e(L,{children:"Series with null gaps"})}),R[13]=y):y=R[13],R[14]===Symbol.for("react.memo_cache_sentinel")?(p=e(en,{}),R[14]=p):p=R[14],R[15]===Symbol.for("react.memo_cache_sentinel")?(_=e(z,{}),R[15]=_):_=R[15],R[16]!==N?(k=e(Y,{tickFormatter:N,minTickGap:32}),R[16]=N,R[17]=k):k=R[17],R[18]===Symbol.for("react.memo_cache_sentinel")?(S=e(Q,{tickFormatter:et}),g=h.map(ep),R[18]=S,R[19]=g):(S=R[18],g=R[19]),R[20]!==T?(x=e(Z,{xTickFormatter:T}),R[20]=T,R[21]=x):x=R[21],R[22]!==k||R[23]!==x?(v=t(K,{children:[y,t(A,{data:w,series:h,xKey:"timestamp",children:[p,t(j,{children:[_,k,S,g,x]})]})]}),R[22]=k,R[23]=x,R[24]=v):v=R[24],R[25]!==v||R[26]!==u?(C=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[n,u,v]}),R[25]=v,R[26]=u,R[27]=C):C=R[27],C},meta:er},{name:"CustomTooltip",story:()=>{let r,n,a,i,o,c,s,m,d=(0,l.c)(12),{formatHour:u,formatHourWithTimezone:y}=W();return d[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Custom tooltip with units"})}),d[0]=r):r=d[0],d[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(e_)}),d[1]=n):n=d[1],d[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),d[2]=a):a=d[2],d[3]!==u?(i=e(Y,{tickFormatter:u,minTickGap:32}),d[3]=u,d[4]=i):i=d[4],d[5]===Symbol.for("react.memo_cache_sentinel")?(o=e(Q,{tickFormatter:et}),c=h.map(ek),d[5]=o,d[6]=c):(o=d[5],c=d[6]),d[7]!==y?(s=e(Z,{children:r=>{let{rows:n,xValue:a}=r;return t(q,{children:[e(V,{children:y(a)}),n.map(eS)]})}}),d[7]=y,d[8]=s):s=d[8],d[9]!==i||d[10]!==s?(m=e("div",{className:"w-560",children:t(K,{children:[r,t(A,{data:f,series:h,xKey:"timestamp",children:[n,t(j,{children:[a,i,o,c,s]})]})]})}),d[9]=i,d[10]=s,d[11]=m):m=d[11],m},meta:er},{name:"LegendPlacements",story:ea,meta:er},{name:"Filterable",story:()=>{let r,n,a,o,c,s,m,d,u,y,p,_,k,S,b,w=(0,l.c)(29),{formatHour:g,formatHourWithTimezone:v}=W();w[0]===Symbol.for("react.memo_cache_sentinel")?(r=[],w[0]=r):r=w[0];let[C,N]=(0,i.useState)(r);w[1]===Symbol.for("react.memo_cache_sentinel")?(n=e=>{N(t=>0===t.length?h.filter(t=>t.key!==e).map(eT):t.includes(e)?t.filter(t=>t!==e):[...t,e])},w[1]=n):n=w[1];let T=n,O=C.length>0;return w[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(L,{children:"Click a row to isolate, click another to add"}),w[2]=a):a=w[2],w[3]!==O?(o=O&&t(E,{children:[e(D,{asChild:!0,children:e(R,{variant:"ghost",color:"neutral",size:"small","aria-label":"Clear filter",onClick:()=>N([]),children:e(x,{})})}),e(F,{children:"Remove filter"})]}),w[3]=O,w[4]=o):o=w[4],w[5]!==O||w[6]!==o?(c=t(M,{children:[a,e($,{alwaysVisible:O,children:o})]}),w[5]=O,w[6]=o,w[7]=c):c=w[7],w[8]!==C?(s=h.map(r=>t(E,{children:[e(D,{asChild:!0,children:t(X,{seriesKey:r.key,onClick:()=>T(r.key),children:[e(H,{color:r.color}),e("span",{className:"text-xs font-mono text-text-primary",children:r.label})]})}),e(F,{children:C.includes(r.key)?"Remove filter":"Click to filter"})]},r.key)),w[8]=C,w[9]=s):s=w[9],w[10]!==s?(m=e(B,{children:s}),w[10]=s,w[11]=m):m=w[11],w[12]===Symbol.for("react.memo_cache_sentinel")?(d=e(z,{}),w[12]=d):d=w[12],w[13]!==g?(u=e(Y,{tickFormatter:g,minTickGap:32}),w[13]=g,w[14]=u):u=w[14],w[15]===Symbol.for("react.memo_cache_sentinel")?(p=e(Q,{tickFormatter:et}),y=h.map(eE),w[15]=y,w[16]=p):(y=w[15],p=w[16]),w[17]!==v?(_=e(Z,{xTickFormatter:v}),w[17]=v,w[18]=_):_=w[18],w[19]!==_||w[20]!==u?(k=t(j,{children:[d,u,p,y,_]}),w[19]=_,w[20]=u,w[21]=k):k=w[21],w[22]!==C||w[23]!==k||w[24]!==m?(S=t(A,{"data-testid":"line-chart",data:f,series:h,xKey:"timestamp",filteredKeys:C,children:[m,k]}),w[22]=C,w[23]=k,w[24]=m,w[25]=S):S=w[25],w[26]!==S||w[27]!==c?(b=e("div",{className:"w-560",children:t(K,{"data-testid":"chart",children:[c,S]})}),w[26]=S,w[27]=c,w[28]=b):b=w[28],b},meta:er},{name:"CrossChartHoverSync",story:()=>{let r,n,a,o,c,s,m,d,u,y,f,k,S,b,w,g,x,v,C,R=(0,l.c)(33),{formatHour:N,formatHourWithTimezone:T}=W(),[E,F]=(0,i.useState)(null);return R[0]===Symbol.for("react.memo_cache_sentinel")?(r=e(M,{children:e(L,{children:"Region A"})}),R[0]=r):r=R[0],R[1]===Symbol.for("react.memo_cache_sentinel")?(n=e(B,{children:h.map(eF)}),R[1]=n):n=R[1],R[2]===Symbol.for("react.memo_cache_sentinel")?(a=e(z,{}),R[2]=a):a=R[2],R[3]!==N?(o=e(Y,{tickFormatter:N,minTickGap:32}),R[3]=N,R[4]=o):o=R[4],R[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(Q,{tickFormatter:et}),s=h.map(eD),R[5]=c,R[6]=s):(c=R[5],s=R[6]),R[7]!==T?(m=e(Z,{xTickFormatter:T}),R[7]=T,R[8]=m):m=R[8],R[9]!==o||R[10]!==m?(d=t(j,{children:[a,o,c,s,m]}),R[9]=o,R[10]=m,R[11]=d):d=R[11],R[12]!==E||R[13]!==d?(u=t(K,{children:[r,t(A,{data:p,series:h,xKey:"timestamp",syncId:"regions",activeKey:E,onActiveKeyChange:F,children:[n,d]})]}),R[12]=E,R[13]=d,R[14]=u):u=R[14],R[15]===Symbol.for("react.memo_cache_sentinel")?(y=e(M,{children:e(L,{children:"Region B"})}),R[15]=y):y=R[15],R[16]===Symbol.for("react.memo_cache_sentinel")?(f=e(B,{children:h.map(eK)}),R[16]=f):f=R[16],R[17]===Symbol.for("react.memo_cache_sentinel")?(k=e(z,{}),R[17]=k):k=R[17],R[18]!==N?(S=e(Y,{tickFormatter:N,minTickGap:32}),R[18]=N,R[19]=S):S=R[19],R[20]===Symbol.for("react.memo_cache_sentinel")?(b=e(Q,{tickFormatter:et}),w=h.map(e$),R[20]=b,R[21]=w):(b=R[20],w=R[21]),R[22]!==T?(g=e(Z,{xTickFormatter:T}),R[22]=T,R[23]=g):g=R[23],R[24]!==S||R[25]!==g?(x=t(j,{children:[k,S,b,w,g]}),R[24]=S,R[25]=g,R[26]=x):x=R[26],R[27]!==E||R[28]!==x?(v=t(K,{children:[y,t(A,{data:_,series:h,xKey:"timestamp",syncId:"regions",activeKey:E,onActiveKeyChange:F,children:[f,x]})]}),R[27]=E,R[28]=x,R[29]=v):v=R[29],R[30]!==v||R[31]!==u?(C=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[u,v]}),R[30]=v,R[31]=u,R[32]=C):C=R[32],C},meta:er},{name:"Zoom",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-560",children:e(el,{})}),r[0]=t):t=r[0],t},meta:er},{name:"Loading",story:()=>{let r,n,a,i,o,c,s,m=(0,l.c)(7);return m[0]===Symbol.for("react.memo_cache_sentinel")?(r=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(M,{children:e(L,{children:"No legend"})}),e(P,{})]}),m[0]=r):r=m[0],m[1]===Symbol.for("react.memo_cache_sentinel")?(n=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(M,{children:e(L,{children:"Top — JSX order"})}),e(ei,{}),e(P,{})]}),m[1]=n):n=m[1],m[2]===Symbol.for("react.memo_cache_sentinel")?(a=t(K,{"aria-busy":"true","aria-live":"polite",children:[e(M,{children:e(L,{children:"Bottom — JSX order"})}),e(P,{}),e(ei,{})]}),m[2]=a):a=m[2],m[3]===Symbol.for("react.memo_cache_sentinel")?(i=e(M,{children:e(L,{children:"Left — wrapped in HStack"})}),m[3]=i):i=m[3],m[4]===Symbol.for("react.memo_cache_sentinel")?(o=t(K,{"aria-busy":"true","aria-live":"polite",children:[i,t(T,{flexGrow:!0,gap:12,align:"stretch",children:[e(ei,{orientation:"vertical"}),e(P,{className:"flex-1 min-w-0"})]})]}),m[4]=o):o=m[4],m[5]===Symbol.for("react.memo_cache_sentinel")?(c=e(M,{children:e(L,{children:"Right — wrapped in HStack"})}),m[5]=c):c=m[5],m[6]===Symbol.for("react.memo_cache_sentinel")?(s=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[r,n,a,o,t(K,{"aria-busy":"true","aria-live":"polite",children:[c,t(T,{flexGrow:!0,gap:12,align:"stretch",children:[e(P,{className:"flex-1 min-w-0"}),e(ei,{orientation:"vertical"})]})]})]}),m[6]=s):s=m[6],s},meta:er},{name:"Refreshing",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=t("div",{className:"grid grid-cols-2 gap-16 w-1120",children:[e(eo,{placement:"none",title:"No legend"}),e(eo,{placement:"top",title:"Top — JSX order"}),e(eo,{placement:"bottom",title:"Bottom — JSX order"}),e(eo,{placement:"left",title:"Left — wrapped in HStack"}),e(eo,{placement:"right",title:"Right — wrapped in HStack"})]}),n[0]=r):r=n[0],r},meta:er},{name:"Empty",story:()=>{let r,n=(0,l.c)(1);return n[0]===Symbol.for("react.memo_cache_sentinel")?(r=e("div",{className:"w-560",children:t(K,{children:[e(M,{children:e(L,{children:"No data"})}),e(P,{children:"No data"})]})}),n[0]=r):r=n[0],r},meta:er},{name:"LongTimeRange",story:()=>{let t,r=(0,l.c)(1);return r[0]===Symbol.for("react.memo_cache_sentinel")?(t=e("div",{className:"w-720",children:e(ec,{})}),r[0]=t):t=r[0],t},meta:er}];function ej({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,l=()=>i.default.createElement(a,n),o={args:n,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 i.default.createElement("section",{"data-preview-story":e.name,className:"p-16"},i.default.createElement("h2",{className:"text-sm mb-12"},e.name),i.default.createElement(l))}window.WallarmPreview={mount(e){let t=window.ReactDOM.createRoot(e);return t.render(i.default.createElement(window.WallarmDS.Root,null,eA.map((e,t)=>i.default.createElement(ej,{key:t,entry:e})))),t}}})();
|