neba 1.18.0 → 1.19.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/dist/a2ui/adapter-catalog.json +1 -1
- package/dist/a2ui/catalog.json +2 -2
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/agent-steps/AgentSteps.js +1 -1
- package/dist/components/alert/Alert.js +1 -1
- package/dist/components/anchor/Anchor.js +1 -1
- package/dist/components/animate-counter/AnimateCounter.js +1 -1
- package/dist/components/animate-headline/AnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/AnimateLighting.js +1 -1
- package/dist/components/animate-marquee/AnimateMarquee.js +1 -1
- package/dist/components/animate-scramble/AnimateScramble.js +1 -1
- package/dist/components/animate-typing/AnimateTyping.js +1 -1
- package/dist/components/app-logo/AppLogo.js +1 -1
- package/dist/components/approval/Approval.js +1 -1
- package/dist/components/aspect-ratio/AspectRatio.js +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/badge/Badge.js +1 -1
- package/dist/components/bar-chart/BarChart.js +1 -1
- package/dist/components/blockquote/Blockquote.js +1 -1
- package/dist/components/bottom-navigation/BottomNavigation.js +1 -1
- package/dist/components/breadcrumb/Breadcrumb.js +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button-group/ButtonGroup.js +1 -1
- package/dist/components/calendar/Calendar.js +1 -1
- package/dist/components/carousel/Carousel.js +1 -1
- package/dist/components/chat-bubble/ChatBubble.js +1 -1
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/checkbox/index.d.ts +1 -1
- package/dist/components/checkbox-group/CheckboxGroup.d.ts +84 -0
- package/dist/components/checkbox-group/CheckboxGroup.js +1 -0
- package/dist/components/checkbox-group/index.d.ts +2 -0
- package/dist/components/checkbox-group/index.js +1 -0
- package/dist/components/chip/Chip.d.ts +32 -3
- package/dist/components/chip/Chip.js +1 -1
- package/dist/components/code-block/CodeBlock.js +1 -1
- package/dist/components/collapsible/Collapsible.js +1 -1
- package/dist/components/color-picker/ColorPicker.js +1 -1
- package/dist/components/combobox/Combobox.d.ts +11 -0
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/combobox/index.d.ts +1 -1
- package/dist/components/command-palette/CommandPalette.d.ts +21 -5
- package/dist/components/command-palette/CommandPalette.js +1 -1
- package/dist/components/command-palette/CommandPaletteSheet.d.ts +27 -0
- package/dist/components/command-palette/CommandPaletteSheet.js +1 -0
- package/dist/components/command-palette/index.d.ts +1 -1
- package/dist/components/confirm/Confirm.d.ts +7 -5
- package/dist/components/confirm/Confirm.js +1 -1
- package/dist/components/data-list/DataList.js +1 -1
- package/dist/components/data-table/DataTable.js +1 -1
- package/dist/components/data-table/RowsPerPage.d.ts +43 -0
- package/dist/components/data-table/RowsPerPage.js +1 -0
- package/dist/components/date-picker/DatePicker.js +1 -1
- package/dist/components/date-range-picker/DateRangePicker.js +1 -1
- package/dist/components/date-time-picker/DateTimePicker.js +1 -1
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/dialog/index.d.ts +1 -1
- package/dist/components/drawer/Drawer.d.ts +1 -1
- package/dist/components/drawer/Drawer.js +1 -1
- package/dist/components/empty/Empty.js +1 -1
- package/dist/components/fieldset/Fieldset.d.ts +12 -1
- package/dist/components/fieldset/Fieldset.js +1 -1
- package/dist/components/file-picker/FilePicker.js +1 -1
- package/dist/components/floating-action-button/FloatingActionButton.js +1 -1
- package/dist/components/floating-action-button/index.d.ts +1 -0
- package/dist/components/floating-bottom-navigation/FloatingBottomNavigation.js +1 -1
- package/dist/components/footer/Footer.js +1 -1
- package/dist/components/form/Form.d.ts +8 -2
- package/dist/components/form/Form.js +1 -1
- package/dist/components/gallery/Gallery.js +1 -1
- package/dist/components/gauge-chart/GaugeChart.js +1 -1
- package/dist/components/header/Header.js +1 -1
- package/dist/components/heatmap-chart/HeatmapChart.js +1 -1
- package/dist/components/highlight/Highlight.js +1 -1
- package/dist/components/hover-card/HoverCard.js +1 -1
- package/dist/components/how-to-steps/HowToSteps.d.ts +3 -0
- package/dist/components/how-to-steps/HowToSteps.js +1 -1
- package/dist/components/image/Image.js +1 -1
- package/dist/components/inline-citation/InlineCitation.d.ts +24 -0
- package/dist/components/inline-citation/InlineCitation.js +1 -1
- package/dist/components/list/List.d.ts +9 -0
- package/dist/components/list/List.js +1 -1
- package/dist/components/menu/Menu.js +1 -1
- package/dist/components/menubar/Menubar.js +1 -1
- package/dist/components/meter/Meter.js +1 -1
- package/dist/components/mockup/Mockup.js +1 -1
- package/dist/components/navigation-menu/NavigationMenu.d.ts +2 -1
- package/dist/components/navigation-menu/NavigationMenu.js +1 -1
- package/dist/components/number-field/NumberField.js +1 -1
- package/dist/components/number-field/index.d.ts +1 -1
- package/dist/components/overlay/Overlay.js +1 -1
- package/dist/components/page-layout/PageLayout.js +1 -1
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/panes/Panes.js +1 -1
- package/dist/components/pie-chart/PieChart.js +1 -1
- package/dist/components/pill/Pill.js +1 -1
- package/dist/components/popover/Popover.js +1 -1
- package/dist/components/progress-box/ProgressBox.js +1 -1
- package/dist/components/progress-circular/ProgressCircular.js +1 -1
- package/dist/components/progress-linear/ProgressLinear.js +1 -1
- package/dist/components/prompt-input/PromptInput.js +1 -1
- package/dist/components/provider/NebaProvider.d.ts +3 -2
- package/dist/components/provider/NebaProvider.js +1 -1
- package/dist/components/radio-group/RadioGroup.d.ts +13 -0
- package/dist/components/radio-group/RadioGroup.js +1 -1
- package/dist/components/radio-group/index.d.ts +1 -1
- package/dist/components/rating/Rating.js +1 -1
- package/dist/components/reasoning/Reasoning.js +1 -1
- package/dist/components/scatter-chart/ScatterChart.js +1 -1
- package/dist/components/scroll-area/ScrollArea.js +1 -1
- package/dist/components/scroll-zone/ScrollZone.js +1 -1
- package/dist/components/segmented-button/SegmentedButton.js +1 -1
- package/dist/components/select/Select.d.ts +12 -0
- package/dist/components/select/Select.js +1 -1
- package/dist/components/select/index.d.ts +1 -1
- package/dist/components/shortcut/Shortcut.js +1 -1
- package/dist/components/sidebar/Sidebar.js +1 -1
- package/dist/components/sidebar/SidebarTrigger.js +1 -1
- package/dist/components/skeleton/Skeleton.js +1 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/sources/Sources.js +1 -1
- package/dist/components/sparkline/Sparkline.d.ts +7 -0
- package/dist/components/sparkline/Sparkline.js +1 -1
- package/dist/components/spoiler/Spoiler.js +1 -1
- package/dist/components/statistic/Statistic.js +1 -1
- package/dist/components/streaming-text/StreamingText.d.ts +10 -6
- package/dist/components/streaming-text/StreamingText.js +1 -1
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/switch/index.d.ts +1 -1
- package/dist/components/table/Table.js +1 -1
- package/dist/components/table/index.d.ts +1 -1
- package/dist/components/tabs/Tabs.js +1 -1
- package/dist/components/text-field/TextField.js +1 -1
- package/dist/components/text-field/index.d.ts +1 -1
- package/dist/components/text-link/TextLink.js +1 -1
- package/dist/components/time-picker/TimePicker.js +1 -1
- package/dist/components/timeline-chart/TimelineChart.js +1 -1
- package/dist/components/toast/Toast.d.ts +38 -5
- package/dist/components/toast/Toast.js +1 -1
- package/dist/components/toast/index.d.ts +2 -2
- package/dist/components/toast/index.js +1 -1
- package/dist/components/toggle/Toggle.js +1 -1
- package/dist/components/toggle-group/ToggleGroup.js +1 -1
- package/dist/components/tool-call/ToolCall.js +1 -1
- package/dist/components/toolbar/Toolbar.js +1 -1
- package/dist/components/tooltip/Tooltip.js +1 -1
- package/dist/components/tour/Tour.js +1 -1
- package/dist/components/tour/index.d.ts +1 -1
- package/dist/components/transfer/Transfer.d.ts +7 -0
- package/dist/components/transfer/Transfer.js +1 -1
- package/dist/components/tree-select/TreeSelect.js +1 -1
- package/dist/components/tree-view/TreeView.js +1 -1
- package/dist/components/window-pane/WindowPane.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/internal/animate.d.ts +34 -2
- package/dist/internal/animate.js +1 -1
- package/dist/internal/cache.d.ts +7 -1
- package/dist/internal/cache.js +1 -1
- package/dist/internal/calendar.d.ts +40 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +86 -8
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +13 -0
- package/dist/internal/chart.js +1 -1
- package/dist/internal/checkbox-group.d.ts +29 -0
- package/dist/internal/checkbox-group.js +1 -0
- package/dist/internal/data-table.d.ts +7 -1
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/date.d.ts +10 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +14 -2
- package/dist/internal/idle.d.ts +10 -0
- package/dist/internal/idle.js +1 -0
- package/dist/internal/link.d.ts +4 -3
- package/dist/internal/media.js +1 -1
- package/dist/internal/observe.d.ts +4 -0
- package/dist/internal/observe.js +1 -1
- package/dist/internal/page-layout.d.ts +30 -2
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +17 -0
- package/dist/internal/progress.js +1 -1
- package/dist/internal/refs.d.ts +18 -0
- package/dist/internal/refs.js +1 -0
- package/dist/internal/run.d.ts +34 -19
- package/dist/internal/run.js +1 -1
- package/dist/internal/sizer.d.ts +9 -4
- package/dist/internal/sizer.js +1 -1
- package/dist/internal/styles.d.ts +27 -1
- package/dist/internal/styles.js +1 -1
- package/dist/internal/tile.d.ts +34 -0
- package/dist/internal/tile.js +1 -0
- package/dist/internal/wheel.d.ts +24 -1
- package/dist/internal/wheel.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +369 -62
- package/dist/types.d.ts +4 -2
- package/package.json +2 -2
package/dist/internal/animate.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{useLayoutEffectOnClient as t}from"./layout-effect.js";import{observeVisibility as a}from"./observe.js";import{cx as
|
|
1
|
+
"use client";import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{useLayoutEffectOnClient as t}from"./layout-effect.js";import{observeVisibility as a}from"./observe.js";import{cx as i}from"./styles.js";export const animationClasses={fade:"neba-anim-fade",grow:"neba-anim-scale",slide:"neba-anim-slide",zoom:"neba-anim-scale",rotate:"neba-anim-rotate",blink:"neba-anim-blink",reveal:"neba-anim-reveal"};export const animBaseClass="neba-anim";export const childAnimations=":scope > .neba-anim";export const defaultDurations={fade:320,grow:340,slide:380,zoom:340,rotate:460,blink:900,reveal:620};export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function isInfinite(e){return"infinite"===e}export function animationSlots(e){const n={"--n-anim-duration":`${e.duration}ms`,"--n-anim-delay":`${e.delay}ms`,"--n-anim-repeat":(i=e.repeat,"infinite"===i?"infinite":String(i)),"--n-anim-direction":(t=e.mode??"in",a=e.alternate,"out"===t?a?"alternate-reverse":"reverse":a?"alternate":"normal")};var t,a,i;return e.easing&&(n["--n-anim-ease"]=e.easing),void 0!==e.opacity&&(n["--n-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(n["--n-anim-scale"]=String(e.scale)),void 0!==e.x&&(n["--n-anim-x"]=e.x),void 0!==e.y&&(n["--n-anim-y"]=e.y),void 0!==e.angle&&(n["--n-anim-angle"]=e.angle),void 0!==e.angleTo&&(n["--n-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(n["--n-anim-clip"]=e.clip),"view"===e.timeline&&(n["--n-anim-timeline"]="view()",n["--n-anim-range"]=e.range??"entry 0% cover 45%"),n}export function slideOffsets(e,n){const t=lengthValue(n),a="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:a};case"bottom":return{x:"0px",y:t};case"left":return{x:a,y:"0px"};default:return{x:t,y:"0px"}}}export function staggers({stagger:e,durationStep:n}){return 0!==e||0!==n}export function staggerChildren(t,a,r,{stagger:o,durationStep:s,reverse:l}){const c=n.Children.toArray(t);return c.map((t,u)=>{const m=l?c.length-1-u:u,d=animationSlots({...r,delay:r.delay+m*o,duration:Math.max(0,r.duration+m*s)});if(!n.isValidElement(t))return e("span",{className:a,style:d,children:t},u);const f=t.props;return n.cloneElement(t,{className:i(a,f.className),style:{...d,...f.style}})})}export const MIN_BLINK_DURATION=334;export function transitionProps(e){const n=transitionParts(e);return n?{className:`neba-anim ${animationClasses[n.effect]}`,style:{...animationSlots(n.slots),"--n-anim-state":"running"}}:{className:"",style:{}}}export function transitionParts(e){if(!e)return null;const n="string"==typeof e?{type:e}:e,{type:t}=n,a=n.duration??defaultDurations[t],i={duration:"blink"===t?Math.max(a,334):a,delay:n.delay??0,easing:n.easing,repeat:n.repeat??("blink"===t?"infinite":1),alternate:n.alternate,timeline:n.timeline,range:n.range};if("grow"!==t&&"zoom"!==t||(i.scale=n.scale??("zoom"===t?.4:.8)),"slide"===t){const{x:e,y:t}=slideOffsets(n.from??"bottom",n.distance??"100%");i.x=e,i.y=t}return"rotate"===t&&(i.angle=`${n.angle??-180}deg`),"reveal"===t&&(i.clip=revealClip(n.side??"left")),{effect:t,slots:i}}export{usePrefersReducedMotion}from"./media.js";export function visibilityWatch(e,n){const t=document.documentElement.clientWidth||window.innerWidth,a=document.documentElement.clientHeight||window.innerHeight,i=Math.min(1,t/Math.max(1,e.offsetWidth))*Math.min(1,a/Math.max(1,e.offsetHeight));return i<1?Math.floor(n*i*100)/100:n}export function useAnimationRun({trigger:e,play:i,once:r,threshold:o,paused:s,infinite:l,caller:c,parts:u}){const m=n.useRef(null),[d,f]=n.useState("mount"===e),[p,g]=n.useState(0),[y,h]=n.useState(!1),x=n.useCallback(()=>{f(!0),g(e=>e+1)},[]),v=!d||s||l&&y?"paused":"running",b=n.useRef(!1);t(()=>{const e=m.current;if(!e||0===p||!b.current)return;const n=[e,...u?e.querySelectorAll(u):[]];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[p,u]),t(()=>{"running"===v&&(b.current=!0)},[v]),n.useEffect(()=>{if("visible"!==e)return;const n=m.current;if(!n)return;const t=visibilityWatch(n,o);let i=null;if(i=a(n,t,e=>{e?(x(),r&&(i?.(),i=null)):r||f(!1)}),i)return()=>i?.();f(!0)},[e,r,o,x]),n.useEffect(()=>{const e=m.current;if(l&&e)return a(e,0,e=>h(!e))??void 0},[l]),n.useEffect(()=>{"manual"===e&&(i?x():f(!1))},[e,i,x]);const w=e=>e.relatedTarget instanceof Node&&e.currentTarget.contains(e.relatedTarget),S="hover"===e?{onPointerEnter:e=>{c?.onPointerEnter?.(e),x()},onFocus:e=>{c?.onFocus?.(e),w(e)||x()},onPointerLeave:e=>{c?.onPointerLeave?.(e),l&&f(!1)},onBlur:e=>{c?.onBlur?.(e),l&&!w(e)&&f(!1)}}:{};return{ref:n.useCallback(e=>{m.current=e},[]),state:v,started:d,run:p,handlers:S,offscreen:l&&y}}export function useAnimateElement(e){const{effect:n,trigger:t,play:a,once:i,threshold:r,paused:o,infinite:s,caller:l,children:c,stagger:u=0,durationStep:m=0,reverse:d=!1,effectClass:f,name:p,...g}=e,y=n?animationClasses[n]:f,h=y?`neba-anim ${y}`:"",x=""!==h&&staggers({stagger:u,durationStep:m,reverse:d}),v="visible"===t&&!x&&"view"!==g.timeline&&"in"===(g.mode??"in")&&("slide"===n||"grow"===n||"zoom"===n||"rotate"===n),b=useAnimationRun({trigger:t,play:a,once:i,threshold:r,paused:o,infinite:s,caller:l,parts:x?childAnimations:void 0}),w="view"===g.timeline?"running":b.state;return{ref:b.ref,className:x?"":h,style:x?{"--n-anim-state":w}:{...animationSlots(g),"--n-anim-state":w},props:{...b.handlers,"data-neba-animation":p??n??void 0,"data-state":w,"data-waiting":v&&!b.started&&0===b.run?0===(g.opacity??0)?"":"shown":void 0},children:x?staggerChildren(c,h,g,{stagger:u,durationStep:m,reverse:d}):c}}
|
package/dist/internal/cache.d.ts
CHANGED
|
@@ -19,6 +19,12 @@
|
|
|
19
19
|
* One rule comes with the shape: a store must not hold `undefined` as a value,
|
|
20
20
|
* or every read of that key misses and builds again. All five hold an object, a
|
|
21
21
|
* number or `null`.
|
|
22
|
+
*
|
|
23
|
+
* A store keyed on something far more numerous names a ceiling of its own.
|
|
24
|
+
* Highlight's folded characters are the one: a text in Hangul or Han has
|
|
25
|
+
* hundreds of different characters in ordinary use, and at the default a store
|
|
26
|
+
* of them emptied itself every few dozen characters and cost more than it
|
|
27
|
+
* saved.
|
|
22
28
|
*/
|
|
23
29
|
/** Reads `key` out of `store`, filling it in with `build` on a miss. */
|
|
24
|
-
export declare function memoise<K, V>(store: Map<K, V>, key: K, build: () => V): V;
|
|
30
|
+
export declare function memoise<K, V>(store: Map<K, V>, key: K, build: () => V, limit?: number): V;
|
package/dist/internal/cache.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export function memoise(e,t,n){const
|
|
1
|
+
export function memoise(e,t,n,o=64){const r=e.get(t);if(void 0!==r)return r;e.size>=o&&e.clear();const i=n();return e.set(t,i),i}
|
|
@@ -36,6 +36,38 @@ export type PickerLabels = PickerMessages;
|
|
|
36
36
|
* say so.
|
|
37
37
|
*/
|
|
38
38
|
export declare function usePickerLabels(overrides: Partial<PickerLabels> | undefined, locale: string | undefined): PickerLabels;
|
|
39
|
+
/**
|
|
40
|
+
* A caller's `shouldDisableDate`, as a new function on every render of the
|
|
41
|
+
* component the caller rendered.
|
|
42
|
+
*
|
|
43
|
+
* The day grid works out which days can be chosen once per month and asks
|
|
44
|
+
* again only when this changes identity, which is what keeps a moving range
|
|
45
|
+
* band from calling it sixty times per cell crossed. Handed the caller's own
|
|
46
|
+
* function, that memo would also stop asking when the caller's tree renders
|
|
47
|
+
* again with the same function reading data that has since changed — a
|
|
48
|
+
* `useCallback` with a dependency missing, or a module-level function over a
|
|
49
|
+
* set the page mutates — and a day that used to grey out on that render would
|
|
50
|
+
* stay choosable. A wrapper made here is new whenever the Calendar or picker
|
|
51
|
+
* renders, so the grid asks exactly as often as it did before it kept the
|
|
52
|
+
* answers, while a band moving inside the popup, which renders below this,
|
|
53
|
+
* leaves it alone.
|
|
54
|
+
*/
|
|
55
|
+
export declare function askOnEveryRender(check: ((date: Date) => boolean) | undefined): ((date: Date) => boolean) | undefined;
|
|
56
|
+
/**
|
|
57
|
+
* Every string a picker's trigger could show, for the `WidthSizer` that holds
|
|
58
|
+
* it at the widest of them.
|
|
59
|
+
*
|
|
60
|
+
* With no `locale`, the server and the hydrating render write `en-US` and every
|
|
61
|
+
* render after that writes the runtime's language — see `useIntlLocale`. Sized
|
|
62
|
+
* by the second set alone, a trigger that is not `fullWidth` took the width of
|
|
63
|
+
* the first in the server's HTML and gave it up the moment the page hydrated,
|
|
64
|
+
* and everything after it in a row of controls moved sideways. So a picker that
|
|
65
|
+
* came through hydration keeps the `en-US` samples beside the runtime's. It can
|
|
66
|
+
* still grow then, where the reader's language writes a longer date, but it
|
|
67
|
+
* never shrinks. A picker first mounted in the browser never had an `en-US`
|
|
68
|
+
* width to keep, and a named locale is the same on both sides.
|
|
69
|
+
*/
|
|
70
|
+
export declare function usePickerSamples(locale: string | undefined, options: Intl.DateTimeFormatOptions): string[];
|
|
39
71
|
export interface CalendarProps {
|
|
40
72
|
size: NebaSize;
|
|
41
73
|
color: NebaColor;
|
|
@@ -83,6 +115,13 @@ export interface CalendarProps {
|
|
|
83
115
|
renderDay?: (date: Date) => React.ReactNode;
|
|
84
116
|
/** Takes the focus on mount — the popup has just opened. */
|
|
85
117
|
autoFocus?: boolean;
|
|
118
|
+
/**
|
|
119
|
+
* `month` is the month a server drew, and moves on to the reader's own in
|
|
120
|
+
* the render after hydration ends. An inline Calendar with no month of its
|
|
121
|
+
* own does that; the tab stop waits for the month it moves to rather than
|
|
122
|
+
* settling on the 1st of the one about to leave the screen.
|
|
123
|
+
*/
|
|
124
|
+
monthFromClock?: boolean;
|
|
86
125
|
/**
|
|
87
126
|
* More than one cell can be selected at once — a `multiple` calendar or a
|
|
88
127
|
* range — which a screen reader is told on the grid a pick is made in.
|
|
@@ -114,7 +153,7 @@ export interface CalendarProps {
|
|
|
114
153
|
* grid instead of walking forty-two cells — the pattern the ARIA date-picker
|
|
115
154
|
* practice describes, and the reason none of the cells is a `disabled` button.
|
|
116
155
|
*/
|
|
117
|
-
export declare function Calendar({ size, color, locale: callerLocale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, granularity, renderDay, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, multiselectable, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
|
|
156
|
+
export declare function Calendar({ size, color, locale: callerLocale, weekStartsOn, month, onMonthChange, selected, rangeStart, rangeEnd, onSelect, granularity, renderDay, onPreviewChange, minDate, maxDate, shouldDisableDate, showOutsideDays, autoFocus, monthFromClock, multiselectable, showPreviousButton, showNextButton, labels, className }: CalendarProps): React.JSX.Element;
|
|
118
157
|
export type { TimeUnit };
|
|
119
158
|
export interface TimeGridProps {
|
|
120
159
|
size: NebaSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{useLayoutEffectOnClient as o}from"./layout-effect.js";import{Button as l}from"../components/button/Button.js";import{ChevronIcon as a}from"./icons.js";import{controlHeightClasses as s,controlTextClasses as i,cx as c,gapClasses as d,metaTextClasses as u,pressTransitionClasses as m,srOnlyClasses as h,transitionClasses as f}from"./styles.js";import{addDays as g,addMonths as b,addYears as p,calendarWeeks as y,compareDay as v,isDayOutside as x,isMonthBeforeYear as w,isSameDay as D,isSameMonth as N,isUnitOutside as S,isValidDate as M,makeDate as C,meridiemLabels as k,monthLabels as z,startOfDay as P,startOfMonth as A,today as j,weekdayLabels as Y,withTime as B,YEAR_PAGE_SIZE as E,yearPageStart as F}from"./date.js";import{dateFormatter as T}from"./format.js";import{pickerMessages as H,useMessages as R}from"./i18n.js";import{useHydrated as I,useIntlLocale as K}from"./media.js";export function usePickerLabels(e,t){const n=R(H,t);return r.useMemo(()=>e?{...n,...e}:n,[n,e])}const G={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},O={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},U={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},q={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},$=["neba-calendar-cell relative flex select-none items-center justify-center tabular-nums","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,m,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:n,label:r,selected:o,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:i=!1,disabled:d=!1,focused:u=!1,size:m,className:h,onClick:f,onPointerEnter:g,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":o,"aria-current":s?"date":void 0,"aria-disabled":d||void 0,tabIndex:u?0:-1,"data-focus-target":u?"true":void 0,className:c($,"start"===a?U[m]:"end"===a?q[m]:"middle"===a?"rounded-none":O[m],d?"cursor-not-allowed text-(--neba-disabled-fg)":o?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-on-tint) hover:bg-(--n-soft) active:bg-(--n-soft-press)":i?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{d||f()},onPointerEnter:g,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}function Header({size:r,color:o,view:u,month:m,locale:f,labels:g,showPreviousButton:b,showNextButton:p,captionId:y,onStep:v,onViewChange:x}){const D=z(f,"long")[m.getMonth()],N=String(m.getFullYear()),S=w(f),M=F(m.getFullYear()),C=`${M}–${M+E-1}`,k="day"===u?[g.previousMonth,g.nextMonth]:"month"===u?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],P=(t,n)=>n?e(l,{variant:"text",size:r,color:o,density:"compact","aria-label":k[-1===t?0:1],onClick:()=>v(t),startIcon:e("span",{className:c("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(a,{})})}):e("span",{"aria-hidden":"true",className:c(s[r],"w-(--n-cell)")}),A=t=>e("span",{className:c("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(a,{})}),j=e(l,{variant:"text",size:r,color:o,density:"compact","aria-describedby":`${y}-month`,"aria-expanded":"month"===u,onClick:()=>x("month"===u?"day":"month"),endIcon:A("month"===u),children:D},"month"),Y=e(l,{variant:"text",size:r,color:o,density:"compact",className:"tabular-nums","aria-describedby":`${y}-year`,"aria-expanded":"year"===u,onClick:()=>x("year"===u?"day":"year"),endIcon:A("year"===u),children:N},"year");return t("div",{className:"flex items-center justify-between gap-1",children:[e("span",{id:y,className:h,"aria-live":"polite",children:"day"===u?T(f,{year:"numeric",month:"long"}).format(m):"month"===u?N:C}),e("span",{id:`${y}-month`,hidden:!0,children:g.chooseMonth}),e("span",{id:`${y}-year`,hidden:!0,children:g.chooseYear}),P(-1,b),e("div",{className:c("flex min-w-0 flex-1 items-center justify-center",d[r]),children:"year"===u?e("span",{className:c("flex items-center font-medium tabular-nums text-(--neba-fg)",s[r],i[r]),children:C}):"month"===u?Y:t(n,S?{children:[j,Y]}:{children:[Y,j]})}),P(1,p)]})}const L={day:0,month:1,year:2};export function Calendar({size:n,color:l,locale:a,weekStartsOn:s,month:i,onMonthChange:u,selected:m,rangeStart:h=null,rangeEnd:f=null,onSelect:g,granularity:y="day",renderDay:v,onPreviewChange:w,minDate:S,maxDate:k,shouldDisableDate:z,showOutsideDays:Y=!0,autoFocus:B=!1,multiselectable:F=!1,showPreviousButton:T=!0,showNextButton:H=!0,labels:R,className:O}){const U=K(a),q=r.useId(),[$,_]=r.useState(y),V=L[$]<L[y]?y:$,J=r.useMemo(()=>m.filter(M),[m]),Q=I(),[W,X]=r.useState(()=>{const e=J.find(e=>N(e,i));return e?P(e):Q&&N(j(),i)?j():A(i)}),Z=r.useRef(!Q);r.useEffect(()=>{Q&&Z.current&&(Z.current=!1,X(e=>D(e,A(i))&&N(j(),i)&&!J.some(e=>N(e,i))?j():e))},[Q]);const ee=r.useRef(B),te=r.useRef(null);r.useEffect(()=>{X(e=>N(e,i)?e:A(i))},[i]),o(()=>{ee.current&&(ee.current=!1,te.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const ne=r.useCallback(e=>x(e,S,k)||(z?.(e)??!1),[S,k,z]),re=e=>{ee.current=!0,_(e)},oe=e=>{ee.current=!0,u(e)};return t("div",{ref:te,className:c("flex flex-col",d[n],O),style:{"--n-cell":G[n]},onPointerLeave:()=>w?.(null),children:[e(Header,{size:n,color:l,view:V,month:i,locale:U,labels:R,showPreviousButton:T,showNextButton:H,captionId:q,onStep:e=>{u("day"===V?b(i,e):p(i,"month"===V?e:e*E))},onViewChange:re}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===V?e(DayGrid,{labelledBy:q,multiselectable:F&&"day"===y,size:n,locale:U,weekStartsOn:s,month:i,chosen:J,rangeStart:h,rangeEnd:f,focusedDate:W,renderDay:v,showOutsideDays:Y,isDisabled:ne,onSelect:e=>{X(e),g(e)},onPreviewChange:w,onMoveFocus:e=>{ee.current=!0,X(e),N(e,i)||u(A(e))}}):"month"===V?e(MonthGrid,{labelledBy:q,multiselectable:F&&"month"===y,size:n,locale:U,month:i,chosen:J,minDate:S,maxDate:k,shouldDisable:"month"===y?z:void 0,onMoveCursor:oe,onPick:e=>{const t=C(i.getFullYear(),e,1);u(t),"month"===y?g(t):(X(e=>N(e,t)?e:t),re("day"))}}):e(YearGrid,{labelledBy:q,multiselectable:F&&"year"===y,size:n,month:i,chosen:J,minDate:S,maxDate:k,shouldDisable:"year"===y?z:void 0,onMoveCursor:oe,onPick:e=>{if("year"===y){const t=C(e,0,1);return u(t),void g(t)}u(C(e,i.getMonth(),1)),re("month")}})})]})}function _(e){return"rtl"===getComputedStyle(e).direction}function DayGrid({labelledBy:n,multiselectable:r,size:o,locale:l,weekStartsOn:a,month:s,chosen:d,rangeStart:m,rangeEnd:h,focusedDate:f,renderDay:p,showOutsideDays:x,isDisabled:w,onSelect:S,onPreviewChange:C,onMoveFocus:k}){const z=y(s,a),P=Y(l,a,"short"),A=Y(l,a,"long"),B=T(l,{dateStyle:"full"}),E=(H=h,M(F=m)&&M(H)?v(F,H)<=0?[F,H]:[H,F]:null);var F,H;const R=I()?j():null;return t("div",{role:"grid","aria-labelledby":n,"aria-multiselectable":r||void 0,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:P.map((t,n)=>e("span",{role:"columnheader","aria-label":A[n],className:c("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",u[o]),children:t},n))}),z.map((n,r)=>e("div",{role:"row",className:"grid grid-cols-7",children:n.map(n=>{const r=!N(n,s);if(r&&!x)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},n.getTime());const l=d.some(e=>D(e,n)),u=null!==E&&v(n,E[0])>=0&&v(n,E[1])<=0,m=null!==E&&u&&D(n,E[0]),h=null!==E&&u&&D(n,E[1]);return t(Cell,{size:o,label:B.format(n),selected:l,inRange:u&&!l,rangeEdge:u?m&&h?"both":m?"start":h?"end":"middle":null,current:null!==R&&D(n,R),muted:r,disabled:w(n),focused:D(n,f),className:c("size-(--n-cell)",i[o]),onClick:()=>S(n),onPointerEnter:()=>C?.(n),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-a+7)%7,r=_(e.currentTarget)?-1:1,o={ArrowLeft:()=>g(t,-r),ArrowRight:()=>g(t,r),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>b(t,e.shiftKey?-12:-1),PageDown:()=>b(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),k(o()))})(e,n),children:[n.getDate(),p?p(n):null]},n.getTime())})},r))]})}function MonthGrid({labelledBy:t,multiselectable:n,size:r,locale:o,month:l,chosen:a,minDate:s,maxDate:d,shouldDisable:u,onMoveCursor:m,onPick:h}){const f=z(o,"short"),g=T(o,{year:"numeric",month:"long"}),p=l.getFullYear(),y=I()?new Date:null,v=e=>{const t=_(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),m(b(A(l),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(n=>{const o=3*t+n,m=C(p,o,1);return e(Cell,{size:r,label:g.format(m),selected:a.some(e=>e.getFullYear()===p&&e.getMonth()===o),current:null!==y&&y.getFullYear()===p&&y.getMonth()===o,disabled:S(m,"month",s,d)||(u?.(m)??!1),focused:o===l.getMonth(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>h(o),onKeyDown:v,children:f[o]},o)})},t))})}function YearGrid({labelledBy:t,multiselectable:n,size:r,month:o,chosen:l,minDate:a,maxDate:s,shouldDisable:d,onMoveCursor:u,onPick:m}){const h=F(o.getFullYear()),f=I()?(new Date).getFullYear():null,g=e=>{const t=_(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==n&&(e.preventDefault(),u(p(A(o),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(t=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(n=>{const u=h+4*t+n,b=C(u,0,1);return e(Cell,{size:r,label:String(u),selected:l.some(e=>e.getFullYear()===u),current:u===f,disabled:S(b,"year",a,s)||(d?.(b)??!1),focused:u===o.getFullYear(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>m(u),onKeyDown:g,children:u},u)})},t))})}function V(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.top-r.top-t.clientTop+t.scrollTop,l=o+n.height;o<t.scrollTop?t.scrollTop=o:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function TimeGrid({size:n,density:o,locale:l,value:a,referenceDate:d,onChange:u,hour12:m,showSeconds:f,hourStep:g,minuteStep:b,secondStep:p,shouldDisableTime:y,autoFocus:v=!1,labels:x,className:w}){const D=K(l),N=a??d,S=r.useRef(null),[M,C]=r.useMemo(()=>k(D),[D]);r.useEffect(()=>{const e=S.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(V),v){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const z=r.useMemo(()=>{const e=Math.ceil((m?12:24)/g),t=Array.from({length:e},(e,t)=>t*g);return m?t.map(e=>0===e?12:e):t},[m,g]),P=r.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),A=r.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),j=e=>String(e).padStart(2,"0"),Y=m?N.getHours()%12||12:N.getHours(),E=e=>{const t=Array.from(e.currentTarget.querySelectorAll('[role="option"]')),n=t.indexOf(e.target);if(n<0)return;const r="ArrowDown"===e.key?n+1:"ArrowUp"===e.key?n-1:"Home"===e.key?0:"End"===e.key?t.length-1:null;if(null===r)return;e.preventDefault();const o=t[Math.min(t.length-1,Math.max(0,r))];o.focus({preventScroll:!0}),V(o)},F=(t,r,o,l,d)=>{const h=Math.max(0,null===a?0:o.findIndex(l));return e("div",{role:"listbox","aria-label":r,onKeyDown:E,className:c("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:o.map((r,o)=>{const f=((e,t)=>B(N,"hour"===e?{hours:m?t%12+(N.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:N.getHours()%12+12*t}))(t,r),g=null!==a&&l(r),b=y?.(f,t)??!1;return e("button",{type:"button",role:"option","aria-selected":g,"aria-disabled":b||void 0,"data-chosen":g?"true":void 0,tabIndex:o===h?0:-1,className:c($,O[n],s[n],i[n],"w-full shrink-0",b?"cursor-not-allowed text-(--neba-disabled-fg)":g?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{b||u(f)},children:d(r)},r)})},t)};return t("div",{ref:S,className:c("flex","compact"===o?"gap-0.5":"gap-1",w),style:{"--n-cell":G[n]},children:[F("hour",x.hour,z,e=>e===Y,e=>m?String(e):j(e)),F("minute",x.minute,P,e=>e===N.getMinutes(),j),f?F("second",x.second,A,e=>e===N.getSeconds(),j):null,m?F("meridiem",x.meridiem,[0,1],e=>(N.getHours()>=12?1:0)===e,e=>0===e?M:C):null,e("span",{className:h,"aria-live":"polite",children:null===a?"":T(D,{hour:"numeric",minute:"2-digit",...f?{second:"2-digit"}:{}}).format(a)})]})}
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as r from"react";import{useLayoutEffectOnClient as o}from"./layout-effect.js";import{Button as l}from"../components/button/Button.js";import{ChevronIcon as a}from"./icons.js";import{controlHeightClasses as s,controlTextClasses as i,cx as c,gapClasses as u,metaTextClasses as d,pressTransitionClasses as m,srOnlyClasses as h,transitionClasses as f}from"./styles.js";import{addDays as g,addMonths as b,addYears as p,calendarWeeks as v,compareDay as y,displaySamples as x,isDayOutside as w,isMonthBeforeYear as D,isSameDay as S,isSameMonth as N,isUnitOutside as k,isValidDate as M,makeDate as C,meridiemLabels as z,monthLabels as P,startOfDay as A,startOfMonth as E,today as j,weekdayLabels as R,withTime as Y,YEAR_PAGE_SIZE as F,yearPageStart as B}from"./date.js";import{dateFormatter as T}from"./format.js";import{pickerMessages as H,useMessages as I}from"./i18n.js";import{HYDRATION_LOCALE as K,useHydrated as O,useIntlLocale as $}from"./media.js";export function usePickerLabels(e,t){const n=I(H,t);return r.useMemo(()=>e?{...n,...e}:n,[n,e])}export function askOnEveryRender(e){return e?t=>e(t):void 0}export function usePickerSamples(e,t){const n=$(e),o=O(),[l]=r.useState(()=>!o),a=x(n,t),s=l&&o&&void 0===e?x(K,t):null;return r.useMemo(()=>null===s?a:[...new Set([...s,...a])],[s,a])}const G={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"},U={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-xs)",md:"rounded-(--neba-radius-sm)",lg:"rounded-(--neba-radius-md)",xl:"rounded-(--neba-radius-lg)"},q={xs:"rounded-s-(--neba-radius-xs)",sm:"rounded-s-(--neba-radius-xs)",md:"rounded-s-(--neba-radius-sm)",lg:"rounded-s-(--neba-radius-md)",xl:"rounded-s-(--neba-radius-lg)"},L={xs:"rounded-e-(--neba-radius-xs)",sm:"rounded-e-(--neba-radius-xs)",md:"rounded-e-(--neba-radius-sm)",lg:"rounded-e-(--neba-radius-md)",xl:"rounded-e-(--neba-radius-lg)"},V=`neba-calendar-cell relative flex select-none items-center justify-center tabular-nums [-webkit-tap-highlight-color:transparent] [touch-action:manipulation] ${f} ${m} focus-visible:z-10 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:[outline-offset:-2px]`;function Cell({children:n,label:r,selected:o,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:i=!1,disabled:u=!1,focused:d=!1,size:m,className:h,onClick:f,onPointerEnter:g,onKeyDown:b}){return t("button",{type:"button",role:"gridcell","aria-label":r,"aria-selected":o,"aria-current":s?"date":void 0,"aria-disabled":u||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:c(V,"start"===a?q[m]:"end"===a?L[m]:"middle"===a?"rounded-none":U[m],u?"cursor-not-allowed text-(--neba-disabled-fg)":o?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":l?"cursor-pointer bg-(--n-soft) text-(--neba-fg) hover:bg-(--n-soft-hover) active:bg-(--n-soft-press)":s?"cursor-pointer font-semibold text-(--n-on-tint) hover:bg-(--n-soft) active:bg-(--n-soft-press)":i?"cursor-pointer text-(--neba-muted-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)",h),onClick:()=>{u||f()},onPointerEnter:g,onKeyDown:b,children:[n,s?e("span",{"aria-hidden":"true",className:"absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current"}):null]})}const _=/*@__PURE__*/r.memo(function Header({size:r,color:o,view:d,month:m,locale:f,labels:g,showPreviousButton:b,showNextButton:p,captionId:v,actions:y}){const x=P(f,"long")[m.getMonth()],w=String(m.getFullYear()),S=D(f),N=B(m.getFullYear()),k=`${N}–${N+F-1}`,M="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],C=(t,n)=>n?e(l,{variant:"text",size:r,color:o,density:"compact","aria-label":M[-1===t?0:1],onClick:()=>y.current.step(t),startIcon:e("span",{className:c("flex items-center",-1===t?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(a,{})})}):e("span",{"aria-hidden":"true",className:c(s[r],"w-(--n-cell)")}),z=t=>e("span",{className:c("flex items-center text-(--neba-muted-fg)","[transition:rotate_var(--neba-duration)_var(--neba-ease)]",t&&"rotate-180"),children:e(a,{})}),A=e(l,{variant:"text",size:r,color:o,density:"compact","aria-describedby":`${v}-month`,"aria-expanded":"month"===d,onClick:()=>y.current.changeView("month"===d?"day":"month"),endIcon:z("month"===d),children:x},"month"),E=e(l,{variant:"text",size:r,color:o,density:"compact",className:"tabular-nums","aria-describedby":`${v}-year`,"aria-expanded":"year"===d,onClick:()=>y.current.changeView("year"===d?"day":"year"),endIcon:z("year"===d),children:w},"year");return t("div",{className:"flex items-center justify-between gap-1",children:[e("span",{id:v,className:h,"aria-live":"polite",children:"day"===d?T(f,{year:"numeric",month:"long"}).format(m):"month"===d?w:k}),e("span",{id:`${v}-month`,hidden:!0,children:g.chooseMonth}),e("span",{id:`${v}-year`,hidden:!0,children:g.chooseYear}),C(-1,b),e("div",{className:c("flex min-w-0 flex-1 items-center justify-center",u[r]),children:"year"===d?e("span",{className:c("flex items-center font-medium tabular-nums text-(--neba-fg)",s[r],i[r]),children:k}):"month"===d?E:t(n,S?{children:[A,E]}:{children:[E,A]})}),C(1,p)]})}),J={day:0,month:1,year:2};export function Calendar({size:n,color:l,locale:a,weekStartsOn:s,month:i,onMonthChange:d,selected:m,rangeStart:h=null,rangeEnd:f=null,onSelect:g,granularity:v="day",renderDay:y,onPreviewChange:x,minDate:D,maxDate:k,shouldDisableDate:z,showOutsideDays:P=!0,autoFocus:R=!1,monthFromClock:Y=!1,multiselectable:B=!1,showPreviousButton:T=!0,showNextButton:H=!0,labels:I,className:K}){const U=$(a),q=r.useId(),[L,V]=r.useState(v),Q=J[L]<J[v]?v:L,W=r.useMemo(()=>m.filter(M),[m]),X=O(),[Z,ee]=r.useState(()=>{const e=W.find(e=>N(e,i));return e?A(e):X&&N(j(),i)?j():E(i)}),te=r.useRef(!X),ne=r.useRef(!1);r.useEffect(()=>{X&&te.current&&(te.current=!1,ne.current=Y&&!N(j(),i),ee(e=>S(e,E(i))&&N(j(),i)&&!W.some(e=>N(e,i))?j():e))},[X]);const re=r.useRef(R),oe=r.useRef(null);r.useEffect(()=>{const e=ne.current;ne.current=!1,ee(t=>N(t,i)?t:e&&N(j(),i)?j():E(i))},[i]),o(()=>{re.current&&(re.current=!1,oe.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const le=r.useCallback(e=>w(e,D,k)||(z?.(e)??!1),[D,k,z]),ae=e=>{d("day"===Q?b(i,e):p(i,"month"===Q?e:e*F))},se=e=>{re.current=!0,V(e)},ie=e=>{re.current=!0,d(e)},ce=r.useRef({step:ae,changeView:se});return o(()=>{ce.current={step:ae,changeView:se}}),t("div",{ref:oe,className:c("flex flex-col",u[n],K),style:{"--n-cell":G[n]},onPointerLeave:()=>x?.(null),children:[e(_,{size:n,color:l,view:Q,month:i,locale:U,labels:I,showPreviousButton:T,showNextButton:H,captionId:q,actions:ce}),e("div",{className:"h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*7)]",children:"day"===Q?e(DayGrid,{labelledBy:q,multiselectable:B&&"day"===v,size:n,locale:U,weekStartsOn:s,month:i,chosen:W,rangeStart:h,rangeEnd:f,focusedDate:Z,renderDay:y,showOutsideDays:P,isDisabled:le,onSelect:e=>{ee(e),g(e)},onPreviewChange:x,onMoveFocus:e=>{re.current=!0,ee(e),N(e,i)||d(E(e))}}):"month"===Q?e(MonthGrid,{labelledBy:q,multiselectable:B&&"month"===v,size:n,locale:U,month:i,chosen:W,minDate:D,maxDate:k,shouldDisable:"month"===v?z:void 0,onMoveCursor:ie,onPick:e=>{const t=C(i.getFullYear(),e,1);d(t),"month"===v?g(t):(ee(e=>N(e,t)?e:t),se("day"))}}):e(YearGrid,{labelledBy:q,multiselectable:B&&"year"===v,size:n,month:i,chosen:W,minDate:D,maxDate:k,shouldDisable:"year"===v?z:void 0,onMoveCursor:ie,onPick:e=>{if("year"===v){const t=C(e,0,1);return d(t),void g(t)}d(C(e,i.getMonth(),1)),se("month")}})})]})}function Q(e){return"rtl"===getComputedStyle(e).direction}const W=/*@__PURE__*/r.memo(function DayCell({date:e,extra:n,actions:r,label:o,selected:l,inRange:a,rangeEdge:s,current:u,muted:d,disabled:m,focused:h,size:f}){return t(Cell,{label:o,selected:l,inRange:a,rangeEdge:s,current:u,muted:d,disabled:m,focused:h,size:f,className:c("size-(--n-cell)",i[f]),onClick:()=>r.current.select(e),onPointerEnter:()=>r.current.preview(e),onKeyDown:t=>r.current.keyDown(t,e),children:[e.getDate(),n]})});function DayGrid({labelledBy:n,multiselectable:l,size:a,locale:s,weekStartsOn:i,month:u,chosen:m,rangeStart:h,rangeEnd:f,focusedDate:p,renderDay:x,showOutsideDays:w,isDisabled:D,onSelect:k,onPreviewChange:C,onMoveFocus:z}){const P=R(s,i,"short"),A=R(s,i,"long"),E=(F=f,M(Y=h)&&M(F)?y(Y,F)<=0?[Y,F]:[F,Y]:null);var Y,F;const B=O()?j():null,H=u.getTime(),I=r.useMemo(()=>{const e=T(s,{dateStyle:"full"}),t=new Date(H);return v(t,i).map(n=>n.map(n=>{const r=!N(n,t),o=r&&!w;return{date:n,outside:r,hole:o,label:o?"":e.format(n),disabled:!o&&D(n)}}))},[H,i,s,w,D]),K=(e,t)=>{const n=(t.getDay()-i+7)%7,r=Q(e.currentTarget)?-1:1,o={ArrowLeft:()=>g(t,-r),ArrowRight:()=>g(t,r),ArrowUp:()=>g(t,-7),ArrowDown:()=>g(t,7),Home:()=>g(t,-n),End:()=>g(t,6-n),PageUp:()=>b(t,e.shiftKey?-12:-1),PageDown:()=>b(t,e.shiftKey?12:1)}[e.key];o&&(e.preventDefault(),z(o()))},$=r.useRef({select:k,preview:e=>C?.(e),keyDown:K});return o(()=>{$.current={select:k,preview:e=>C?.(e),keyDown:K}}),t("div",{role:"grid","aria-labelledby":n,"aria-multiselectable":l||void 0,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:P.map((t,n)=>e("span",{role:"columnheader","aria-label":A[n],className:c("flex h-(--n-cell) items-center justify-center font-medium text-(--neba-muted-fg) select-none",d[a]),children:t},n))}),I.map((t,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,outside:n,hole:r,label:o,disabled:l})=>{if(r)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--n-cell)"},t.getTime());const s=m.some(e=>S(e,t)),i=null!==E&&y(t,E[0])>=0&&y(t,E[1])<=0,c=null!==E&&i&&S(t,E[0]),u=null!==E&&i&&S(t,E[1]);return e(W,{date:t,size:a,label:o,selected:s,inRange:i&&!s,rangeEdge:i?c&&u?"both":c?"start":u?"end":"middle":null,current:null!==B&&S(t,B),muted:n,disabled:l,focused:S(t,p),extra:x?x(t):null,actions:$},t.getTime())})},n))]})}function MonthGrid({labelledBy:t,multiselectable:n,size:r,locale:o,month:l,chosen:a,minDate:s,maxDate:u,shouldDisable:d,onMoveCursor:m,onPick:h}){const f=P(o,"short"),g=T(o,{year:"numeric",month:"long"}),p=l.getFullYear(),v=O()?new Date:null,y=e=>{const t=Q(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),m(b(E(l),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(n=>{const o=3*t+n,m=C(p,o,1);return e(Cell,{size:r,label:g.format(m),selected:a.some(e=>e.getFullYear()===p&&e.getMonth()===o),current:null!==v&&v.getFullYear()===p&&v.getMonth()===o,disabled:k(m,"month",s,u)||(d?.(m)??!1),focused:o===l.getMonth(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>h(o),onKeyDown:y,children:f[o]},o)})},t))})}function YearGrid({labelledBy:t,multiselectable:n,size:r,month:o,chosen:l,minDate:a,maxDate:s,shouldDisable:u,onMoveCursor:d,onPick:m}){const h=B(o.getFullYear()),f=O()?(new Date).getFullYear():null,g=e=>{const t=Q(e.currentTarget)?-1:1,n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==n&&(e.preventDefault(),d(p(E(o),n)))};return e("div",{role:"grid","aria-labelledby":t,"aria-multiselectable":n||void 0,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(t=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(n=>{const d=h+4*t+n,b=C(d,0,1);return e(Cell,{size:r,label:String(d),selected:l.some(e=>e.getFullYear()===d),current:d===f,disabled:k(b,"year",a,s)||(u?.(b)??!1),focused:d===o.getFullYear(),className:c("h-(--n-cell) w-full",i[r]),onClick:()=>m(d),onKeyDown:g,children:d},d)})},t))})}function X(e){const t=e.parentElement;if(!t)return;const n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.top-r.top-t.clientTop+t.scrollTop,l=o+n.height;o<t.scrollTop?t.scrollTop=o:l>t.scrollTop+t.clientHeight&&(t.scrollTop=l-t.clientHeight)}export function TimeGrid({size:n,density:o,locale:l,value:a,referenceDate:u,onChange:d,hour12:m,showSeconds:f,hourStep:g,minuteStep:b,secondStep:p,shouldDisableTime:v,autoFocus:y=!1,labels:x,className:w}){const D=$(l),S=a??u,N=r.useRef(null),[k,M]=r.useMemo(()=>z(D),[D]);r.useEffect(()=>{const e=N.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(X),y){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[y]);const C=r.useMemo(()=>{const e=Math.ceil((m?12:24)/g),t=Array.from({length:e},(e,t)=>t*g);return m?t.map(e=>0===e?12:e):t},[m,g]),P=r.useMemo(()=>Array.from({length:Math.ceil(60/b)},(e,t)=>t*b),[b]),A=r.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,t)=>t*p),[p]),E=e=>String(e).padStart(2,"0"),j=m?S.getHours()%12||12:S.getHours(),R=e=>{const t=Array.from(e.currentTarget.querySelectorAll('[role="option"]')),n=t.indexOf(e.target);if(n<0)return;const r="ArrowDown"===e.key?n+1:"ArrowUp"===e.key?n-1:"Home"===e.key?0:"End"===e.key?t.length-1:null;if(null===r)return;e.preventDefault();const o=t[Math.min(t.length-1,Math.max(0,r))];o.focus({preventScroll:!0}),X(o)},F=(t,r,o,l,u)=>{const h=Math.max(0,null===a?0:o.findIndex(l));return e("div",{role:"listbox","aria-label":r,onKeyDown:R,className:c("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--n-cell)*7)] w-[calc(var(--n-cell)*2)]","scroll-py-0.5 [scrollbar-width:thin]"),children:o.map((r,o)=>{const f=((e,t)=>Y(S,"hour"===e?{hours:m?t%12+(S.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:S.getHours()%12+12*t}))(t,r),g=null!==a&&l(r),b=v?.(f,t)??!1;return e("button",{type:"button",role:"option","aria-selected":g,"aria-disabled":b||void 0,"data-chosen":g?"true":void 0,tabIndex:o===h?0:-1,className:c(V,U[n],s[n],i[n],"w-full shrink-0",b?"cursor-not-allowed text-(--neba-disabled-fg)":g?"cursor-pointer bg-(--n-fill) font-semibold text-(--n-on-solid) hover:bg-(--n-fill-hover) active:bg-(--n-fill-active)":"cursor-pointer text-(--neba-fg) hover:bg-(--n-soft) active:bg-(--n-soft-press)"),onClick:()=>{b||d(f)},children:u(r)},r)})},t)};return t("div",{ref:N,className:c("flex","compact"===o?"gap-0.5":"gap-1",w),style:{"--n-cell":G[n]},children:[F("hour",x.hour,C,e=>e===j,e=>m?String(e):E(e)),F("minute",x.minute,P,e=>e===S.getMinutes(),E),f?F("second",x.second,A,e=>e===S.getSeconds(),E):null,m?F("meridiem",x.meridiem,[0,1],e=>(S.getHours()>=12?1:0)===e,e=>0===e?k:M):null,e("span",{className:h,"aria-live":"polite",children:null===a?"":T(D,{hour:"numeric",minute:"2-digit",...f?{second:"2-digit"}:{}}).format(a)})]})}
|
|
@@ -15,8 +15,28 @@ import type { NebaChartAxis, NebaChartBrush, NebaChartCategory, NebaChartLegend,
|
|
|
15
15
|
* it on a server-rendered page is a box of the right height with nothing in it,
|
|
16
16
|
* which is why the height is a prop and not something measured too: a reserve
|
|
17
17
|
* that is dropped when the content arrives is the same jump twice.
|
|
18
|
+
*
|
|
19
|
+
* `enabled: false` measures nothing and watches nothing, for a chart that was
|
|
20
|
+
* handed its width as a number: a Sparkline given `width={120}` was observed
|
|
21
|
+
* all the same, and drew itself again each time its box was resized for a
|
|
22
|
+
* width it never read.
|
|
23
|
+
*
|
|
24
|
+
* `initial` is a chart's `initialWidth`: the width it is drawn at on the
|
|
25
|
+
* server and while it hydrates, so the server's HTML holds the drawing rather
|
|
26
|
+
* than an empty box. It is a guess the caller makes, and the measurement
|
|
27
|
+
* replaces it.
|
|
18
28
|
*/
|
|
19
|
-
declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null
|
|
29
|
+
declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null>, { enabled, initial }?: {
|
|
30
|
+
enabled?: boolean;
|
|
31
|
+
initial?: number;
|
|
32
|
+
}): number;
|
|
33
|
+
/**
|
|
34
|
+
* The `initialWidth` a chart can draw at before it is measured: a positive
|
|
35
|
+
* number, and only for a chart whose height is known without measuring too.
|
|
36
|
+
* A height given as a CSS length is read off the box as well, so on the server
|
|
37
|
+
* there is no height to draw into and the guess would be a drawing with none.
|
|
38
|
+
*/
|
|
39
|
+
declare function initialWidthFor(initialWidth: number | undefined, height: number | string | undefined): number | undefined;
|
|
20
40
|
/**
|
|
21
41
|
* The host's height, for a chart whose `height` is a CSS length rather than a
|
|
22
42
|
* number. A drawing is laid out in pixels, so `height="16rem"` has to be read
|
|
@@ -74,6 +94,21 @@ declare function chartHeight(height: number | string | undefined, size: NebaSize
|
|
|
74
94
|
* each showed both answers at once.
|
|
75
95
|
*/
|
|
76
96
|
export declare const markTransitionClasses = "[transition:opacity_var(--neba-duration)_var(--neba-ease),r_var(--neba-duration)_var(--neba-ease),scale_var(--neba-duration)_var(--neba-ease)]";
|
|
97
|
+
/**
|
|
98
|
+
* The same transition, and the box a mark grows about, given to every `<path>`
|
|
99
|
+
* inside the element that carries it — for a chart with thousands of marks,
|
|
100
|
+
* where saying it on each one was most of the markup.
|
|
101
|
+
*
|
|
102
|
+
* Every scatter mark carried `markTransitionClasses`, a `style` with three
|
|
103
|
+
* properties and its stroke: about 390 bytes a mark, 390 kB of server HTML for
|
|
104
|
+
* a thousand points, and a style resolved per element in the browser. Said once
|
|
105
|
+
* on the group, a mark is its `d` and whatever is its own.
|
|
106
|
+
*
|
|
107
|
+
* The origin is `--n-origin` against the mark's own bounding box, which is the
|
|
108
|
+
* same fraction for every mark of one shape — see `markOrigin` — so it is set
|
|
109
|
+
* per series rather than per mark; the middle of the box when unset.
|
|
110
|
+
*/
|
|
111
|
+
export declare const markGroupClasses: string;
|
|
77
112
|
export interface ChartBaseProps extends Omit<BoxProps, 'children' | 'title'> {
|
|
78
113
|
/**
|
|
79
114
|
* How tall the drawing is. A number is pixels; a string is any CSS length.
|
|
@@ -83,6 +118,21 @@ export interface ChartBaseProps extends Omit<BoxProps, 'children' | 'title'> {
|
|
|
83
118
|
* the chart is a card the chart fits in.
|
|
84
119
|
*/
|
|
85
120
|
height?: number | string;
|
|
121
|
+
/**
|
|
122
|
+
* The width, in pixels, to draw at before the chart has measured its box:
|
|
123
|
+
* on the server and while the page hydrates.
|
|
124
|
+
*
|
|
125
|
+
* A chart is laid out in pixels and a server has no box to measure, so a
|
|
126
|
+
* server-rendered chart is an empty box of the right height until the page
|
|
127
|
+
* runs — and the drawing is not in the HTML a crawler reads or the first
|
|
128
|
+
* paint shows. Given this, the server draws it at that width, and the
|
|
129
|
+
* measured width replaces it once the page has hydrated. Pass the width the
|
|
130
|
+
* chart is most often shown at; the closer it is, the less the drawing
|
|
131
|
+
* moves when it is replaced.
|
|
132
|
+
*
|
|
133
|
+
* Ignored when `height` is a CSS length, which has to be measured too.
|
|
134
|
+
*/
|
|
135
|
+
initialWidth?: number;
|
|
86
136
|
/**
|
|
87
137
|
* How the numbers are written, everywhere they appear — the axis, the
|
|
88
138
|
* tooltip, the labels on the marks. `Intl.NumberFormat` options, the same
|
|
@@ -227,6 +277,11 @@ interface LegendProps {
|
|
|
227
277
|
visibility: Visibility;
|
|
228
278
|
size: NebaSize;
|
|
229
279
|
values?: readonly (string | undefined)[];
|
|
280
|
+
/**
|
|
281
|
+
* Per series, the widest numbers `values` can hold. Given, every row keeps
|
|
282
|
+
* room for its number whether or not one is showing — see `legendReserve`.
|
|
283
|
+
*/
|
|
284
|
+
reserve?: readonly (readonly string[])[];
|
|
230
285
|
swatch?: (index: number, color: string) => React.ReactNode;
|
|
231
286
|
}
|
|
232
287
|
/**
|
|
@@ -260,7 +315,7 @@ interface LegendProps {
|
|
|
260
315
|
* out of it. It listens only while something is being read.
|
|
261
316
|
*/
|
|
262
317
|
declare function useReleaseOutside(ref: React.RefObject<HTMLElement | null>, active: boolean, release: () => void): void;
|
|
263
|
-
declare function ChartLegendBar({ series, colors, options, visibility, size, values, swatch }: LegendProps): React.JSX.Element;
|
|
318
|
+
declare function ChartLegendBar({ series, colors, options, visibility, size, values, reserve, swatch }: LegendProps): React.JSX.Element;
|
|
264
319
|
interface ScaleLegendProps {
|
|
265
320
|
/** The steps, palest first, as the `var()`s that resolve them. */
|
|
266
321
|
steps: readonly string[];
|
|
@@ -406,6 +461,10 @@ export declare const chartTableClasses = "absolute size-px overflow-hidden white
|
|
|
406
461
|
* take a screen reader's place in it away — and only rows that are new to it
|
|
407
462
|
* are deferred. A change in the row count, or the table unmounting, cancels the
|
|
408
463
|
* slice that was waiting.
|
|
464
|
+
*
|
|
465
|
+
* `run` is how many rows one slice adds, which is also how many rows a table
|
|
466
|
+
* draws in each of its `tableRuns`: a slice then adds one run, and the runs
|
|
467
|
+
* already written are left alone.
|
|
409
468
|
*/
|
|
410
469
|
declare function useDeferredRows({ rows, points, columns }: {
|
|
411
470
|
/** How many rows the body has. */
|
|
@@ -414,7 +473,18 @@ declare function useDeferredRows({ rows, points, columns }: {
|
|
|
414
473
|
points: number;
|
|
415
474
|
/** How many cells each row has, which sizes a slice. */
|
|
416
475
|
columns: number;
|
|
417
|
-
}):
|
|
476
|
+
}): {
|
|
477
|
+
shown: number;
|
|
478
|
+
run: number;
|
|
479
|
+
};
|
|
480
|
+
/**
|
|
481
|
+
* A table's body rows, as runs of `run` rows each.
|
|
482
|
+
*
|
|
483
|
+
* The runs start at fixed multiples of `run` rather than wherever the last
|
|
484
|
+
* slice stopped, so a run keeps its key and its rows from one slice to the
|
|
485
|
+
* next. The DOM is exactly the flat list of rows it replaces.
|
|
486
|
+
*/
|
|
487
|
+
declare function tableRuns(shown: number, run: number, draw: (from: number, to: number) => React.ReactNode): React.ReactNode[];
|
|
418
488
|
interface DataTableProps {
|
|
419
489
|
id: string;
|
|
420
490
|
caption?: string;
|
|
@@ -575,6 +645,18 @@ export interface CartesianLayout {
|
|
|
575
645
|
/** And a given series' own, which differs once there are two scales. */
|
|
576
646
|
zeroPxOf: (series?: number) => number;
|
|
577
647
|
categories: readonly NebaChartCategory[];
|
|
648
|
+
size: NebaSize;
|
|
649
|
+
}
|
|
650
|
+
/**
|
|
651
|
+
* The layout, plus how a number is written and everything the pointer decides.
|
|
652
|
+
*
|
|
653
|
+
* The two formatters are not part of the layout, because the marks are built
|
|
654
|
+
* from the layout and nothing a mark is placed by depends on them. A chart
|
|
655
|
+
* hydrated with no `locale` changes its formatter straight after the
|
|
656
|
+
* hydration, to write in the reader's language, and with the formatters in
|
|
657
|
+
* the layout that one render laid out and drew every mark on the plot again.
|
|
658
|
+
*/
|
|
659
|
+
export interface CartesianContext extends CartesianLayout {
|
|
578
660
|
format: (value: number) => string;
|
|
579
661
|
/**
|
|
580
662
|
* How a given series' numbers are written: through `secondaryAxis.tickFormat`
|
|
@@ -583,10 +665,6 @@ export interface CartesianLayout {
|
|
|
583
665
|
* printed in the first axis' currency.
|
|
584
666
|
*/
|
|
585
667
|
formatFor: (series: number) => (value: number) => string;
|
|
586
|
-
size: NebaSize;
|
|
587
|
-
}
|
|
588
|
-
/** The layout, plus everything the pointer decides. */
|
|
589
|
-
export interface CartesianContext extends CartesianLayout {
|
|
590
668
|
/** The series the legend is being hovered over, if any. */
|
|
591
669
|
hovered: number | null;
|
|
592
670
|
/** The category under the pointer, if any. */
|
|
@@ -706,5 +784,5 @@ interface CartesianProps extends CartesianChartProps {
|
|
|
706
784
|
* component never has to know which way round the axes are.
|
|
707
785
|
*/
|
|
708
786
|
export declare function CartesianChart(rawProps: CartesianProps): React.JSX.Element;
|
|
709
|
-
export { ChartDataTable, ChartExport, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSummary, ChartSurface, ChartTooltipPanel, summarise, chartHeight, useDeferredRows, useMeasuredHeight, useMeasuredWidth, useReleaseOutside, useVisibility };
|
|
787
|
+
export { ChartDataTable, ChartExport, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSummary, ChartSurface, ChartTooltipPanel, summarise, chartHeight, initialWidthFor, tableRuns, useDeferredRows, useMeasuredHeight, useMeasuredWidth, useReleaseOutside, useVisibility };
|
|
710
788
|
export type { Visibility };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import{useStyleDefaults as a}from"./defaults.js";import*as l from"react";import{useLayoutEffectOnClient as r}from"./layout-effect.js";import{Box as i}from"../components/box/Box.js";import{alignedScale as o,bandScale as s,categoryAt as c,categoryCount as u,categoryExtent as d,chartFontSizes as h,compactNumber as m,extentOf as f,fitsLast as x,formatCategory as g,markerRadii as p,plotHeights as v,resolveColor as b,seriesColor as y,showsTick as k,textWidth as M,tickStride as w,toFullShares as C,toValues as S,truncate as N,turnedAxis as z,valueScale as P,warnPaletteOverflow as A}from"./chart.js";import{numberFormatter as T}from"./format.js";import{useHydrated as B,useIntlLocale as j}from"./media.js";import{observeResize as $}from"./observe.js";import{chartMessages as I,emptyMessages as E,fillMessage as R,useMessages as W}from"./i18n.js";import{cx as _,hasContent as F,metaTextClasses as L,srOnlyClasses as D,transitionClasses as H}from"./styles.js";const O=[];function V(e){const[t,n]=l.useState(0);return r(()=>{const t=e.current;if(!t)return;const a=()=>n(t.clientWidth);return a(),$(t,a)},[e]),t}function Z(e,t){const[n,a]=l.useState(0);return r(()=>{const n=e.current;if(!t||!n)return;const l=()=>a(n.clientHeight);return l(),$(n,l)},[e,t]),n}function q(e,t,n){return"number"==typeof e?e:void 0===e?v[t]:n}export const markTransitionClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease),r_var(--neba-duration)_var(--neba-ease),scale_var(--neba-duration)_var(--neba-ease)]";function X(e){const[t,n]=l.useState(()=>new Map),[a,r]=l.useState(null),i=l.useMemo(()=>function(e){const t=new Map;return e.map((e,n)=>{if(void 0===e.name)return`index:${n}`;const a=t.get(e.name)??0;return t.set(e.name,a+1),`name:${a}:${e.name}`})}(e),[e]),o=l.useMemo(()=>e.map((e,n)=>t.get(i[n])??!e.hidden),[e,i,t]),s=l.useRef({series:e,keys:i});l.useEffect(()=>{s.current={series:e,keys:i}});return{visible:o,hovered:a,toggle:l.useCallback(e=>{const{series:t,keys:a}=s.current,l=a[e];void 0!==l&&n(n=>{const a=new Map(n);return a.set(l,!(n.get(l)??!t[e]?.hidden)),a})},[]),setHovered:r}}const Y={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},J={start:"justify-start",center:"justify-center",end:"justify-end"};function K(e,t,n){const a=l.useRef(n);l.useEffect(()=>{a.current=n}),l.useEffect(()=>{if(!t)return;const n=t=>{const n=e.current;n&&t.target instanceof Node&&!n.contains(t.target)&&a.current()};return document.addEventListener("pointerdown",n,!0),()=>document.removeEventListener("pointerdown",n,!0)},[e,t])}function ChartLegendBar({series:a,colors:l,options:r,visibility:i,size:o,values:s,swatch:c}){const u=!1!==r.interactive,d="left"===r.side||"right"===r.side;return e("ul",{className:_("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",d?"min-w-0 flex-col items-start":"",J[r.align??"center"],L[o]),children:a.map((a,r)=>{const o=i.visible[r],d=null!==i.hovered&&i.hovered!==r,h=a.name??`${r+1}`,m=l[r],f=n(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(r,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${H}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),s?.[r]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:s[r]}):null]});return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":o,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:_("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",o?d?"opacity-55":"":"opacity-40"),children:f}):e("span",{className:_("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",o?"":"opacity-40"),children:f})},a.name??r)})})}function ChartScaleLegend({steps:a,from:l,to:r,middle:i,align:o,vertical:s,size:c}){return e("div",{className:_("flex",s?"":J[o]),children:n("div",{className:_("grid grid-cols-[auto_auto_auto] items-center gap-x-2",L[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:l}),e("span",{"aria-hidden":"true",className:_("flex h-2.5 overflow-hidden rounded-[0.1875rem]",s?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:r}),i?n(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:t,items:a,x:l,y:r,flip:i,size:o}){return n("div",{"data-neba-tooltip":"",className:_("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",L[o]),style:i?{right:`calc(100% - ${l}px + 10px)`,top:r}:{left:l+10,top:r},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:t}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:a.map(t=>n("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--neba-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function ChartSummary({id:e,template:t,count:a,min:l,max:r,second:i,locale:o}){const s=T(o,{});return n("span",{id:e,hidden:!0,children:[R(t,{count:s.format(a),min:l,max:r}),i&&i.count>0?` ${R(i.template,{count:s.format(i.count),min:i.min,max:i.max})}`:null]})}function U(e,t){let n=0,a=1/0,l=-1/0;for(const t of e)for(const e of t)null===e.value||Number.isNaN(e.value)||(n+=1,a=Math.min(a,e.value),l=Math.max(l,e.value));return 0===n?{count:n,min:"",max:""}:{count:n,min:t(a),max:t(l)}}function ChartStatus({heading:a,items:r}){return e("span",{role:"status","aria-live":"polite",className:D,children:0===r.length?null:n(t,{children:[F(a)?n(t,{children:[a,", "]}):null,r.map((e,t)=>n(l.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}export const deferredTablePoints=500;export const chartTableClasses=`${D} table-fixed [contain:content]`;function G({rows:e,points:t,columns:n}){const a=t>500,[r,i]=l.useState(()=>a?0:e),o=a?Math.min(r,e):e;o!==r&&i(o);const s=Math.max(1,Math.floor(1e3/Math.max(1,n)));return l.useEffect(()=>{if(!(r>=e))return function(e){if("function"==typeof requestIdleCallback&&"function"==typeof cancelIdleCallback){const t=requestIdleCallback(e,{timeout:500});return()=>cancelIdleCallback(t)}const t=setTimeout(e,16);return()=>clearTimeout(t)}(()=>i(Math.min(e,r+s)))},[r,e,s]),o}const Q=/*@__PURE__*/l.memo(function ChartDataTable({id:t,caption:a,corner:l,categories:r,series:i,values:o,format:s,formatFor:c,locale:u}){const d=G({rows:r.length,points:o.reduce((e,t)=>e+t.length,0),columns:i.length+1});return n("table",{id:t,className:chartTableClasses,"aria-busy":d<r.length||void 0,children:[a?e("caption",{children:a}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:l??""}),i.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:r.slice(0,d).map((t,a)=>n("tr",{children:[e("th",{scope:"row",children:g(t,u)}),i.map((t,n)=>{const l=o[n]?.[a];return e("td",void 0!==l?.label?{children:l.label}:{children:null==l?.value?"":(c?.(n)??s)(l.value)},t.name??n)})]},a))})]})}),ee=l.lazy(()=>import("./chart-brush.js").then(e=>({default:e.ChartBrush})));function ChartExport({rows:t,fileName:n,onExport:a,label:l}){return e("button",{type:"button","aria-label":l,title:l,onClick:async()=>{const{toCsv:e,downloadText:l}=await(import("./csv.js")),r=e(t());a?a(r):l(r,n,"text/csv;charset=utf-8")},className:_("absolute end-0 top-0 z-10 inline-flex size-6 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",H),children:e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",className:"size-3.5",children:e("path",{d:"M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"})})})}function ChartSurface({legend:t,legendSide:a,children:l,table:r,className:o,...s}){return n(i,{...s,className:_("relative flex gap-3",Y[a],o??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:l}),t,r]})}function ChartReferences({references:t,plot:a,horizontal:l,valuePx:r,categoryPx:i,categoryScale:o,categoryValuePx:s,categoryBounds:c,categoryOffset:u,fontSize:d}){const[h,m]=c;return e("g",{children:t.map((t,c)=>{const f="value"===(t.axis??"value"),x=e=>f?e:Math.min(m,Math.max(h,e));if(!f&&Math.max(t.value,t.to??t.value)<h)return null;if(!f&&Math.min(t.value,t.to??t.value)>m)return null;const g=e=>f?r(e):o?s(e):(l?a.top:a.left)+i(e-u),p=f?!l:l,v=g(x(t.value)),y=void 0===t.to?null:g(x(t.to)),k=(void 0===t.to?[t.value]:[t.value,t.to]).filter(e=>f||e>=h&&e<=m).map(g),M=null===y?v:Math.min(v,y),w=null===y?v:Math.max(v,y),C=t.color?b(t.color):"var(--neba-muted-fg)",S=t.solid?void 0:"4 4",N=t.label?e("text",{x:p?a.left+a.width-4:M+4,y:p?M-5:a.top+d,textAnchor:p?"end":"start",fontSize:d,fontWeight:500,fill:C,children:t.label}):null;return n("g",{children:[null===y?null:e("rect",{x:p?a.left:M,y:p?M:a.top,width:p?a.width:Math.max(0,w-M),height:p?Math.max(0,w-M):a.height,fill:`color-mix(in oklab, ${C} 12%, transparent)`}),k.map((t,n)=>e("line",{x1:p?a.left:t,x2:p?a.left+a.width:t,y1:p?t:a.top,y2:p?t:a.top+a.height,stroke:C,strokeWidth:1,strokeDasharray:S},n)),N]},c)})})}export function CartesianChart(r){const{series:i,categories:x,xAxis:v,yAxis:b,secondaryAxis:k,brush:w,references:$,horizontal:R=!1,stacked:F=!1,stackedFull:H=!1,includeZero:Y=!0,bandRatio:J=1,inset:G=!1,headroom:ne=0,markInset:ae=0,xScale:le="band",marks:re,markRadius:ie=24,table:oe,exportRows:se,summary:ce,swatch:ue,scale:de,markTooltip:he,height:me,format:fe,locale:xe,label:ge,legend:pe,tooltip:ve,empty:be,exportable:ye=!1,exportFileName:ke="chart.csv",onExport:Me,size:we="md",variant:Ce="text",padded:Se=!1,className:Ne,children:ze,...Pe}=a(r,["size","variant","locale"]),Ae=l.useRef(null),Te=V(Ae),Be=W(E,xe),je=W(I,xe),$e=j(xe),Ie=B(),Ee=l.useId(),Re=l.useId(),We=X(i);l.useEffect(()=>{A(i.length)},[i.length]);const _e=u(i),Fe=!0===w?{}:!1===w||void 0===w?null:w,[Le,De]=l.useState(null),He=Fe?Fe.range??Le??Fe.defaultRange??[0,Math.max(0,_e-1)]:[0,Math.max(0,_e-1)],Oe=Math.min(Math.max(0,Math.round(He[0])),Math.max(0,_e-1)),Ve=Math.min(Math.max(Oe,Math.round(He[1])),Math.max(0,_e-1)),Ze=null!==Fe&&(Oe>0||Ve<_e-1),qe=l.useMemo(()=>Ze?i.map(e=>({...e,data:e.data.slice(Oe,Ve+1)})):i,[i,Ze,Oe,Ve]),Xe=l.useMemo(()=>Ze&&x?x.slice(Oe,Ve+1):x,[x,Ze,Oe,Ve]),[Ye,Je]=l.useState(null),[Ke,Ue]=l.useState(null),[Ge,Qe]=l.useState(null),et=fe?JSON.stringify(fe):"",tt=l.useCallback(e=>fe?T($e,fe).format(e):m(e,$e),[et,$e]),nt=l.useMemo(()=>S(qe),[qe]),at=We.visible,lt=l.useMemo(()=>H?C(nt,at,tt):nt,[nt,H,at,tt]),rt=l.useMemo(()=>qe.map((e,t)=>y(e,t)),[qe]),it=u(qe),ot=l.useMemo(()=>Array.from({length:it},(e,t)=>c(t,Xe,lt)),[it,Xe,lt]),st=Ze||H,ct=l.useMemo(()=>st?S(i):null,[st,i]),ut=ct??lt,dt=l.useMemo(()=>Ze&&ct?Array.from({length:_e},(e,t)=>c(t,x,ct)):null,[Ze,_e,x,ct])??ot,ht=Math.max(0,We.visible.indexOf(!0)),mt=null!==Fe,ft=l.useMemo(()=>mt?(ut[ht]??[]).map(e=>e.value):[],[mt,ut,ht]),xt=Boolean(k)&&!F&&!H,gt=i.map(e=>"secondary"===e.axis?"1":"0").join(""),pt=l.useCallback(e=>xt&&"1"===gt[e],[xt,gt]),vt=l.useMemo(()=>{const e=f(lt.filter((e,t)=>at[t]&&!pt(t)),F),t=($??[]).filter(e=>"value"===(e.axis??"value"));if(0===t.length)return e;const n=t.flatMap(e=>void 0===e.to?[e.value]:[e.value,e.to]);return{min:Math.min(e?.min??1/0,...n),max:Math.max(e?.max??-1/0,...n)}},[lt,at,pt,F,$]),bt=l.useMemo(()=>xt?f(lt.filter((e,t)=>at[t]&&pt(t)),!1):null,[xt,lt,at,pt]),yt=k?.tickFormat,kt=l.useMemo(()=>ce??U(lt.filter((e,t)=>at[t]&&!pt(t)),tt),[ce,lt,at,pt,tt]),Mt=l.useMemo(()=>void 0===ce&&xt?U(lt.filter((e,t)=>at[t]&&pt(t)),yt?e=>String(yt(e,0)):tt):null,[ce,xt,lt,at,pt,yt,tt]),wt=Z(Ae,"string"==typeof me),Ct=q(me,we,wt),St=h[we],Nt=b,zt=v,Pt=Nt?.min,At=Nt?.max,Tt=Nt?.tickCount,Bt=l.useMemo(()=>de??P(vt,{min:Pt,max:At,tickCount:Tt,includeZero:Y}),[de,vt,Pt,At,Tt,Y]),jt=k?.min,$t=k?.max,It=k?.tickCount,Et=Bt.ticks.length-1,Rt=l.useMemo(()=>null===bt?null:void 0===It?o(bt,Et,{min:jt,max:$t,includeZero:Y}):P(bt,{min:jt,max:$t,tickCount:It,includeZero:Y}),[bt,Et,jt,$t,It,Y]),Wt=l.useMemo(()=>"value"===le?d(lt.filter((e,t)=>at[t]),Xe):null,[le,lt,at,Xe]),_t=zt?.min,Ft=zt?.max,Lt=zt?.tickCount,Dt=l.useMemo(()=>"value"===le?P(Wt,{min:_t,max:Ft,tickCount:Lt,includeZero:!1}):null,[le,Wt,_t,Ft,Lt]),Ht=Nt?.tickFormat,Ot=l.useMemo(()=>Bt.ticks.map((e,t)=>Ht?String(Ht(e,t)):tt(e)),[Bt,Ht,tt]),Vt=zt?.tickFormat,Zt=l.useMemo(()=>Dt?Dt.ticks.map((e,t)=>Vt?String(Vt(e,t)):m(e,$e)):ot.map((e,t)=>Vt?String(Vt(e,t)):g(e,$e)),[Dt,ot,Vt,$e]),qt=Ot.reduce((e,t)=>Math.max(e,M(t,St)),0),Xt=l.useMemo(()=>(Rt?.ticks??[]).map((e,t)=>yt?String(yt(e,t)):tt(e)),[Rt,yt,tt]),Yt=Xt.reduce((e,t)=>Math.max(e,M(t,St)),0),Jt=St+6,Kt=Rt&&!k?.hidden?k?.thickness??(R?St+12:Yt+10):0,Ut=R?zt:Nt,Gt=Boolean(Ut?.label)&&!Ut?.hidden,Qt=Boolean(Rt&&k?.label&&!k.hidden),en=R||zt?.hidden?0:zt?.tickAngle,tn=l.useMemo(()=>z(en,St),[en,St]),nn=0!==tn.angle,an=Nt?.hidden?0:qt+10,ln=(Te-(R?0:an)-16)/Math.max(1,it),rn=Math.min(140,.4*Ct),on=!Dt&&(R||nn||ln-6>=2.4*St),sn=R?150:nn?tn.cut(rn):ln-6,cn=l.useMemo(()=>on?Zt.map(e=>N(e,sn,St)):Zt,[Zt,on,sn,St]),un=l.useMemo(()=>cn.reduce((e,t)=>Math.max(e,M(t,St)),0),[cn,St]),dn=R?zt?.hidden?0:un+10:an,hn=tn.depth(un),mn=Fe?(Fe.height??32)+10:0,fn=R?Nt?.hidden?0:St+12+(Nt?.label?Jt:0):zt?.hidden?0:hn+12+(zt?.label?Jt:0),xn=(R?zt:Nt)?.thickness??dn,gn=((R?Nt:zt)?.thickness??fn)+mn,pn=(R||Dt?12:nn?tn.angle>0?tn.overhang(un)+8:8:Math.max(8,cn.length?tn.overhang(un):8))+ae+(R?0:Kt),vn=p[we]+4+ne+ae+(Gt||Qt?Jt+2:0)+(ye?20:0)+(R?Kt:0),bn=Ct,yn=xn+ae,kn=Math.max(0,Te-xn-ae-pn),Mn=Math.max(0,bn-vn-gn-ae),wn=l.useMemo(()=>({left:yn,top:vn,width:kn,height:Mn}),[yn,vn,kn,Mn]),Cn=R?wn.height:wn.width,Sn=G?Math.max(1,it-1):it,Nn=l.useMemo(()=>s(Sn,Cn,J),[Sn,Cn,J]),zn=l.useCallback(e=>G?it<=1?Cn/2:Cn*e/(it-1):Nn.centre(e),[G,it,Cn,Nn]),Pn=l.useCallback((e,t)=>{return n=void 0!==t&&pt(t)&&Rt?Rt:Bt,R?wn.left+n.fraction(e)*wn.width:wn.top+(1-n.fraction(e))*wn.height;var n},[R,wn.left,wn.top,wn.width,wn.height,Bt,Rt,pt]),An=l.useCallback((e,t,n)=>R?{x:Pn(t,n),y:wn.top+zn(e)}:{x:wn.left+zn(e),y:Pn(t,n)},[R,Pn,zn,wn.left,wn.top]),Tn=l.useCallback(e=>R?wn.top+(1-(Dt?.fraction(e)??0))*wn.height:wn.left+(Dt?.fraction(e)??0)*wn.width,[R,wn.left,wn.top,wn.width,wn.height,Dt]),Bn=l.useCallback(e=>{const t=void 0!==e&&pt(e)&&Rt?Rt:Bt;return Pn(Math.min(Math.max(0,t.min),t.max),e)},[Pn,Bt,Rt,pt]),jn=Bn(),$n=k?.tickFormat,In=l.useCallback(e=>pt(e)&&$n?e=>String($n(e,0)):tt,[pt,$n,tt]),En=l.useMemo(()=>({plot:wn,values:lt,visible:at,colors:rt,scale:Bt,secondScale:Rt,onSecond:pt,band:Nn,horizontal:R,valuePx:Pn,categoryPx:zn,point:An,categoryScale:Dt,categoryValuePx:Tn,zeroPx:jn,zeroPxOf:Bn,categories:ot,format:tt,formatFor:In,size:we}),[wn,lt,at,rt,Bt,Rt,pt,Nn,R,Pn,zn,An,Dt,Tn,jn,Bn,ot,tt,In,we]),Rn=l.useMemo(()=>re?re(En):O,[re,En]),Wn=($??[]).filter(e=>Boolean(e.label)),_n=e=>{const t=t=>"value"===(e.axis??"value")?tt(t):g(Dt?t:dt[t]??t,$e);return void 0===e.to?t(e.value):`${t(e.value)}–${t(e.to)}`},Fn=!1===ve?{mode:"none"}:!0===ve||void 0===ve?{}:ve,Ln=Fn.mode??(re?"item":"index"),Dn=null===Ke?null:Rn[Ke]??null,Hn=re?Dn?Dn.index:null:Ye,On=re?Rn.length:it,Vn=()=>{Je(null),Ue(null),Qe(null)};K(Ae,null!==Hn,Vn);const Zn=e=>{if("none"!==Ln){if(re){const t=((e,t)=>{const n=Ae.current;if(!n||0===Rn.length)return null;const a=n.getBoundingClientRect(),l=e-a.left,r=t-a.top;let i=null,o=1/0,s=1/0;return Rn.forEach((e,t)=>{const n=e.x-l,a=e.y-r,c=Math.sqrt(n*n+a*a);let u;if(void 0===e.rx)u=Math.max(0,c-e.r);else{const t=Math.max(0,Math.abs(n)-e.rx),l=Math.max(0,Math.abs(a)-(e.ry??e.rx));u=Math.sqrt(t*t+l*l)}u<=ie&&(u<o||u===o&&c<s)&&(o=u,s=c,i=t)}),i})(e.clientX,e.clientY);t!==Ke&&Ue(t)}else{const t=((e,t)=>{const n=Ae.current;if(!n||0===it)return null;const a=n.getBoundingClientRect(),l=R?t-a.top-wn.top:e-a.left-wn.left;if(l<-Nn.step||l>Cn+Nn.step)return null;const r=G?it<=1?0:Math.round(l/Cn*(it-1)):Math.floor(l/Nn.step);return Math.min(it-1,Math.max(0,r))})(e.clientX,e.clientY);t!==Ye&&Je(t)}"item"!==Ln||re||Qe(((e,t)=>{const n=Ae.current;if(!n)return null;const a=n.getBoundingClientRect();return R?e-a.left:t-a.top})(e.clientX,e.clientY))}},qn=e=>{const t=null===e?null:Math.min(On-1,Math.max(0,e));re?Ue(t):Je(t)},Xn=e=>{Qe(null);qn(((re?Ke:Ye)??(e>0?-1:On))+e)},Yn=null===Hn?[]:qe.flatMap((e,t)=>{if(!We.visible[t]||Dn&&Dn.series!==t)return[];const n=lt[t]?.[Hn];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??rt[t],value:n.value,formatted:In(t)(n.value),label:n.label}]:[]}),Jn=Dn&&he?he(Dn):null,Kn=new Map;let Un=0,Gn=0;for(const e of Yn){const t=e.value??0,n=F?t<0?Gn:Un:t,a=F?n+t:t;F&&t<0?Gn=a:F&&(Un=a),Kn.set(e.seriesIndex,[Pn(n,e.seriesIndex),Pn(a,e.seriesIndex)])}const Qn=(e,t)=>{const[n,a]=Kn.get(e.seriesIndex)??[t,t];return Math.max(0,Math.min(n,a)-t,t-Math.max(n,a))},ea=Jn?Jn.items:"item"===Ln&&Yn.length>1&&null!==Ge?[Yn.reduce((e,t)=>Qn(t,Ge)<Qn(e,Ge)?t:e)]:Yn,ta=Dn?lt[Dn.series]?.[Dn.index]?.x??Xe?.[Dn.index]??Dn.index:void 0,na=e=>"number"==typeof e&&Dt?T($e,{}).format(e):g(e,$e),aa=Dn?Dn.x:R?Kn.get(ea[0]?.seriesIndex??-1)?.[1]??Pn(ea[0]?.value??0,ea[0]?.seriesIndex):wn.left+zn(Hn??0),la=Dn?Dn.y:R?wn.top+zn(Hn??0):wn.top,ra=Dn?(Dn.x-wn.left)/Math.max(1,wn.width)>.6:(R?(aa-wn.left)/Math.max(1,wn.width):zn(Hn??0)/Math.max(1,Cn))>.6,ia=!1===pe?{interactive:!1}:!0===pe||void 0===pe?{}:pe,oa=!0===pe||!1!==pe&&qe.length>1,sa=ia.side??"bottom",ca={...En,hovered:We.hovered,activeIndex:Hn,marks:Rn,activeMark:Dn},ua=0===it||null===vt||"value"===le&&null===Wt,da=Ze&&ua&&ut.some((e,t)=>We.visible[t]&&e.some(e=>null!==e.value)),ha=ua&&!da;return n(ChartSurface,{...Pe,size:we,variant:Ce,padded:Se,className:Ne,legendSide:sa,legend:oa?e(ChartLegendBar,{series:qe,colors:rt,options:ia,visibility:We,size:we,swatch:ue,values:ia.showValue&&null!==Hn?qe.map((e,t)=>{const n=lt[t]?.[Hn]?.value;return null==n?void 0:In(t)(n)}):void 0}):null,table:ha?null:n(t,{children:[oe?.(Ee,tt)??e(Q,{id:Ee,caption:ge,corner:zt?.label,categories:dt,series:i,values:ut,format:tt,formatFor:xt?In:void 0,locale:$e}),Wn.length>0?e("ul",{className:D,children:Wn.map((e,t)=>n("li",{children:[e.label,": ",_n(e)]},t))}):null]}),children:[ye&&!ha?e(ChartExport,{rows:se??(()=>[["string"==typeof zt?.label?zt.label:"",...qe.map((e,t)=>e.name??`${t+1}`)],...dt.map((e,t)=>[e,...ut.map(e=>e[t]?.value??null)])]),fileName:ke,onExport:Me,label:je.exportCsv}):null,n("div",{ref:Ae,role:"img",tabIndex:ua?void 0:0,"aria-label":ge??je.label,"aria-describedby":ua?void 0:Re,onPointerMove:Zn,onPointerDown:e=>{"touch"===e.pointerType&&Zn(e)},onPointerLeave:e=>{"touch"!==e.pointerType&&Vn()},onKeyDown:"none"===Ln?void 0:e=>{const t=R?"ArrowDown":"ArrowRight",n=R?"ArrowUp":"ArrowLeft";if(e.key===t)Xn(1);else if(e.key===n)Xn(-1);else if("Home"===e.key)qn(0);else if("End"===e.key)qn(On-1);else{if("Escape"!==e.key)return;Vn()}e.preventDefault()},onBlur:Vn,className:_("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof me?me:Ct},children:[ua?e("div",{className:_("flex h-full items-center justify-center text-(--neba-muted-fg)",L[we]),style:da?{paddingBottom:mn}:void 0,children:be??Be.title}):Te>0?n("svg",{width:Te,height:bn||"100%",viewBox:`0 0 ${Te} ${bn}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(te,{plot:wn,scale:Bt,band:Nn,horizontal:R,inset:G,categoryPx:zn,valuePx:Pn,tickTexts:Ot,widestTick:qt,categoryTexts:cn,widestCategory:un,categoryScale:Dt,categoryValuePx:Tn,valueAxis:Nt,categoryAxis:zt,secondScale:Rt,secondTickTexts:Xt,secondaryAxis:k,fontSize:St,turn:tn,labelDepth:hn,zeroPx:jn}),$&&$.length>0?e(ChartReferences,{references:$,plot:wn,horizontal:R,valuePx:Pn,categoryPx:zn,categoryScale:Dt,categoryValuePx:Tn,categoryBounds:Dt?[Dt.min,Dt.max]:G?[Oe,Oe+it-1]:[Oe-.5,Oe+it-.5],categoryOffset:Oe,fontSize:St}):null,null===Hn||re||"index"!==Ln||!1===Fn.crosshair?null:(()=>{const t=zn(Hn);return e("line",R?{x1:wn.left,x2:wn.left+wn.width,y1:wn.top+t,y2:wn.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:wn.left+t,x2:wn.left+t,y1:wn.top,y2:wn.top+wn.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),ze(ca)]}):null,null!==Hn&&ea.length>0&&"none"!==Ln?Fn.render?e("div",{className:"pointer-events-none absolute z-10",style:ra?{right:`calc(100% - ${aa}px + 10px)`,top:la}:{left:aa+10,top:la},children:Fn.render({index:Hn,category:ta??ot[Hn],items:ea})}):e(ChartTooltipPanel,{heading:Jn?Jn.heading:na(ta??ot[Hn]),items:ea,x:aa,y:la,flip:ra,size:we}):null]}),Fe&&!ha&&Ie?e(l.Suspense,{fallback:null,children:e(ee,{outline:ft,count:_e,range:[Oe,Ve],onRange:e=>{De(e),Fe.onRangeChange?.(e)},color:rt[Math.max(0,We.visible.indexOf(!0))]??rt[0],height:Fe.height??32,words:{start:je.start,end:je.end},label:ge??je.label,categories:dt,locale:$e,width:Te})}):null,ua?null:e(ChartSummary,{id:Re,template:je.summary,locale:$e,...kt,second:Mt?{template:je.summarySecondary,...Mt}:null}),"none"===Ln?null:e(ChartStatus,{heading:null===Hn?void 0:Jn?.heading??na(ta??ot[Hn]),items:ea})]})}const te=/*@__PURE__*/l.memo(function ChartAxes({plot:a,scale:l,horizontal:r,categoryPx:i,valuePx:o,tickTexts:s,widestTick:c,categoryTexts:u,widestCategory:d,categoryScale:h,categoryValuePx:m,valueAxis:f,categoryAxis:g,secondScale:p,secondTickTexts:v,secondaryAxis:b,fontSize:y,turn:C,labelDepth:S,zeroPx:N}){const z=!1!==f?.grid&&!f?.hidden,P=r?g:f,A=r?f:g,T=!g?.hidden&&(g?.grid??null!==h),B=e=>h?m(h.ticks[e]):(r?a.top:a.left)+i(e),j=0!==C.angle,$=C.room(d),I=w(u.length,r?a.height:a.width,r?1.8*y:$),E=w(l.ticks.length,r?a.width:a.height,r?Math.max(c,1)+16:2*y),R=u.length>1?Math.abs(B(1)-B(0)):a.width,W=l.ticks.length>1?Math.abs(o(l.ticks[1])-o(l.ticks[0])):a.height,_=x(u.length,I,R,r?1.8*y:j?$:M(u[u.length-1]??"",y)),F=a.top+a.height+C.offset,L=x(l.ticks.length,E,W,r?M(s[s.length-1]??"",y):1.6*y);return n("g",{children:[l.ticks.map((t,i)=>{const c=o(t),u=Math.abs(t)<1e-9;return n("g",{children:[z?e("line",r?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,f?.hidden||!k(i,l.ticks.length,E,L)?null:e("text",r?{x:c,y:a.top+a.height+y+6,textAnchor:0===i?"start":i===l.ticks.length-1?"end":"middle",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]})]},t)}),g?.hidden?null:n(t,{children:[e("line",r?{x1:N,x2:N,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:N,y2:N,stroke:"var(--neba-chart-axis)",strokeWidth:1}),u.map((t,l)=>{const i=k(l,u.length,I,_);if(!i&&(r||!T))return null;const o=B(l);return r?e("text",{x:a.left-8,y:o,textAnchor:"end",dominantBaseline:"central",fontSize:y,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t},l):n("g",{children:[T?e("line",{x1:o,x2:o,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,i?e("text",{x:o,y:F,textAnchor:j?C.anchor:h?0===l?"start":l===u.length-1?"end":"middle":"middle",transform:j?`rotate(${C.angle} ${o} ${F})`:void 0,dominantBaseline:j?"central":void 0,fontSize:y,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:t}):null]},l)})]}),p&&!b?.hidden?p.ticks.map((t,n)=>{const l=r?a.left+p.fraction(t)*a.width:a.top+(1-p.fraction(t))*a.height;return k(n,p.ticks.length,E,L)?e("text",r?{x:l,y:a.top-8,textAnchor:0===n?"start":n===p.ticks.length-1?"end":"middle",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]}:{x:a.left+a.width+8,y:l,textAnchor:"start",dominantBaseline:"central",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]},t):null}):null,p&&b?.label&&!b.hidden?e("text",{x:a.left+a.width,y:y+2,textAnchor:"end",fontSize:y,fill:"var(--neba-muted-fg)",fontWeight:500,children:b.label}):null,P?.label&&!P.hidden?e("text",{x:a.left,y:y+2,textAnchor:"start",fontSize:y,fill:"var(--neba-muted-fg)",fontWeight:500,children:P.label}):null,A?.label&&!A.hidden?e("text",{x:a.left+a.width,y:a.top+a.height+S+y+12,textAnchor:"end",fontSize:y,fill:"var(--neba-muted-fg)",fontWeight:500,children:A.label}):null]})});export{Q as ChartDataTable,ChartExport,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSummary,ChartSurface,ChartTooltipPanel,U as summarise,q as chartHeight,G as useDeferredRows,Z as useMeasuredHeight,V as useMeasuredWidth,K as useReleaseOutside,X as useVisibility};
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useStyleDefaults as a}from"./defaults.js";import*as l from"react";import{useLayoutEffectOnClient as r}from"./layout-effect.js";import{Box as i}from"../components/box/Box.js";import{alignedScale as o,bandScale as s,categoryAt as c,categoryCount as u,categoryExtent as d,chartFontSizes as h,compactNumber as m,extentOf as f,fitsLast as x,formatCategory as p,markerRadii as g,plotHeights as v,resolveColor as b,seriesColor as y,showsTick as k,textWidth as M,tickStride as w,toFullShares as C,toValues as N,truncate as S,turnedAxis as z,valueScale as P,warnPaletteOverflow as A}from"./chart.js";import{numberFormatter as j}from"./format.js";import{useHydrated as B,useIntlLocale as T}from"./media.js";import{observeResize as _}from"./observe.js";import{WidthSizer as $,widestSamples as E}from"./sizer.js";import{chartMessages as I,emptyMessages as R,fillMessage as W,useMessages as F}from"./i18n.js";import{whenIdle as L}from"./idle.js";import{cx as D,hasContent as H,metaTextClasses as V,srOnlyClasses as O,transitionClasses as Z}from"./styles.js";const X=[];function Y(e,t,n,a){const i=B(),[o]=l.useState(i),[s,c]=l.useState(()=>i?0:a??0);return r(()=>{const a=e.current;if(!n||!a)return;const r=()=>{const e=t(a);l.startTransition(()=>c(e))};return o?c(t(a)):r(),_(a,r)},[e,t,n,o]),s}const q=e=>e.clientWidth,G=e=>e.clientHeight;function J(e,{enabled:t=!0,initial:n}={}){return Y(e,q,t,n)}function K(e,t){return"string"==typeof t||void 0===e||!Number.isFinite(e)||e<=0?void 0:e}function U(e,t){return Y(e,G,t)}function Q(e,t,n){return"number"==typeof e?e:void 0===e?v[t]:n}export const markTransitionClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease),r_var(--neba-duration)_var(--neba-ease),scale_var(--neba-duration)_var(--neba-ease)]";export const markGroupClasses="[&_path]:[transition:opacity_var(--neba-duration)_var(--neba-ease),r_var(--neba-duration)_var(--neba-ease),scale_var(--neba-duration)_var(--neba-ease)] [&_path]:[transform-box:fill-box] [&_path]:[transform-origin:var(--n-origin,50%_50%)]";function ee(e){const[t,n]=l.useState(()=>new Map),[a,r]=l.useState(null),i=l.useMemo(()=>function(e){const t=new Map;return e.map((e,n)=>{if(void 0===e.name)return`index:${n}`;const a=t.get(e.name)??0;return t.set(e.name,a+1),`name:${a}:${e.name}`})}(e),[e]),o=l.useMemo(()=>e.map((e,n)=>t.get(i[n])??!e.hidden),[e,i,t]),s=l.useRef({series:e,keys:i});l.useEffect(()=>{s.current={series:e,keys:i}});return{visible:o,hovered:a,toggle:l.useCallback(e=>{const{series:t,keys:a}=s.current,l=a[e];void 0!==l&&n(n=>{const a=new Map(n);return a.set(l,!(n.get(l)??!t[e]?.hidden)),a})},[]),setHovered:r}}const te={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},ne={start:"justify-start",center:"justify-center",end:"justify-end"};function ae(e,t,n){const a=l.useRef(n);l.useEffect(()=>{a.current=n}),l.useEffect(()=>{if(!t)return;const n=t=>{const n=e.current;n&&t.target instanceof Node&&!n.contains(t.target)&&a.current()};return document.addEventListener("pointerdown",n,!0),()=>document.removeEventListener("pointerdown",n,!0)},[e,t])}function ChartLegendBar({series:a,colors:l,options:r,visibility:i,size:o,values:s,reserve:c,swatch:u}){const d=!1!==r.interactive,h="left"===r.side||"right"===r.side;return e("ul",{className:D("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",h?"min-w-0 flex-col items-start":"",ne[r.align??"center"],V[o]),children:a.map((a,r)=>{const o=i.visible[r],h=null!==i.hovered&&i.hovered!==r,m=a.name??`${r+1}`,f=l[r],x=t(n,{children:[e("span",u?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:u(r,f)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${Z}`,style:{backgroundColor:f}}),e("span",{className:"min-w-0 truncate",children:m}),c?t("span",{className:"flex shrink-0 flex-col tabular-nums text-(--neba-muted-fg)",children:[e("span",{className:s?.[r]?void 0:"invisible",children:s?.[r]??""}),e($,{samples:c[r]??[]})]}):s?.[r]?e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:s[r]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":o,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(r),onBlur:()=>i.setHovered(null),className:D("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--neba-radius-xs)","px-1 py-0.5 text-(--neba-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","hover:bg-(--n-soft)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",o?h?"opacity-55":"":"opacity-40"),children:x}):e("span",{className:D("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--neba-fg)",o?"":"opacity-40"),children:x})},a.name??r)})})}function ChartScaleLegend({steps:a,from:l,to:r,middle:i,align:o,vertical:s,size:c}){return e("div",{className:D("flex",s?"":ne[o]),children:t("div",{className:D("grid grid-cols-[auto_auto_auto] items-center gap-x-2",V[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:l}),e("span",{"aria-hidden":"true",className:D("flex h-2.5 overflow-hidden rounded-[0.1875rem]",s?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--neba-muted-fg)",children:r}),i?t(n,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--neba-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:n,items:a,x:l,y:r,flip:i,size:o}){return t("div",{"data-neba-tooltip":"",className:D("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--neba-radius-sm) border p-2","[background-image:var(--neba-grain),var(--neba-sheen)]","[background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]","bg-(--neba-panel-press) [border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-2),var(--neba-plate-glass)]",V[o]),style:i?{right:`calc(100% - ${l}px + 10px)`,top:r}:{left:l+10,top:r},children:[e("div",{className:"mb-1 font-medium text-(--neba-fg)",children:n}),e("ul",{className:"flex list-none flex-col gap-0.5 p-0",children:a.map(n=>t("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:n.color}}),n.name?e("span",{className:"min-w-0 flex-1 truncate text-(--neba-muted-fg)",children:n.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--neba-fg)",children:n.label??n.formatted})]},n.seriesIndex))})]})}function ChartSummary({id:e,template:n,count:a,min:l,max:r,second:i,locale:o}){const s=j(o,{});return t("span",{id:e,hidden:!0,children:[W(n,{count:s.format(a),min:l,max:r}),i&&i.count>0?` ${W(i.template,{count:s.format(i.count),min:i.min,max:i.max})}`:null]})}function le(e,t){let n=0,a=1/0,l=-1/0;for(const t of e)for(const e of t)null===e.value||Number.isNaN(e.value)||(n+=1,a=Math.min(a,e.value),l=Math.max(l,e.value));return 0===n?{count:n,min:"",max:""}:{count:n,min:t(a),max:t(l)}}function ChartStatus({heading:a,items:r}){return e("span",{role:"status","aria-live":"polite",className:O,children:0===r.length?null:t(n,{children:[H(a)?t(n,{children:[a,", "]}):null,r.map((e,n)=>t(l.Fragment,{children:[n>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}export const deferredTablePoints=500;export const chartTableClasses=`${O} table-fixed [contain:content]`;function re({rows:e,points:t,columns:n}){const a=t>500,[r,i]=l.useState(()=>a?0:e),o=a?Math.min(r,e):e;o!==r&&i(o);const s=Math.max(1,Math.floor(1e3/Math.max(1,n)));return l.useEffect(()=>{if(!(r>=e))return L(()=>i(Math.min(e,r+s)),500)},[r,e,s]),{shown:o,run:s}}const ie=/*@__PURE__*/l.memo(function TableRun({from:t,to:a,draw:l}){return e(n,{children:l(t,a)})});function oe(t,n,a){const l=[];for(let r=0;r<t;r+=n)l.push(e(ie,{from:r,to:Math.min(t,r+n),draw:a},r));return l}const se=/*@__PURE__*/l.memo(function ChartDataTable({id:n,caption:a,corner:r,categories:i,series:o,values:s,format:c,formatFor:u,locale:d}){const{shown:h,run:m}=re({rows:i.length,points:s.reduce((e,t)=>e+t.length,0),columns:o.length+1}),f=l.useCallback((n,a)=>i.slice(n,a).map((a,l)=>{const r=n+l;return t("tr",{children:[e("th",{scope:"row",children:p(a,d)}),o.map((t,n)=>{const a=s[n]?.[r];return e("td",void 0!==a?.label?{children:a.label}:{children:null==a?.value?"":(u?.(n)??c)(a.value)},t.name??n)})]},r)}),[i,o,s,c,u,d]);return t("table",{id:n,className:chartTableClasses,"aria-busy":h<i.length||void 0,children:[a?e("caption",{children:a}):null,e("thead",{children:t("tr",{children:[e("th",{scope:"col",children:r??""}),o.map((t,n)=>e("th",{scope:"col",children:t.name??n+1},t.name??n))]})}),e("tbody",{children:oe(h,m,f)})]})}),ce=l.lazy(()=>import("./chart-brush.js").then(e=>({default:e.ChartBrush})));function ChartExport({rows:t,fileName:n,onExport:a,label:l}){return e("button",{type:"button","aria-label":l,title:l,onClick:async()=>{const{toCsv:e,downloadText:l}=await(import("./csv.js")),r=e(t());a?a(r):l(r,n,"text/csv;charset=utf-8")},className:D("absolute end-0 top-0 z-10 inline-flex size-6 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1",Z),children:e("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",className:"size-3.5",children:e("path",{d:"M12 3v12m0 0 4-4m-4 4-4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"})})})}function ChartSurface({legend:n,legendSide:a,children:l,table:r,className:o,...s}){return t(i,{...s,className:D("relative flex gap-3",te[a],o??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:l}),n,r]})}function ChartReferences({references:n,plot:a,horizontal:l,valuePx:r,categoryPx:i,categoryScale:o,categoryValuePx:s,categoryBounds:c,categoryOffset:u,fontSize:d}){const[h,m]=c;return e("g",{children:n.map((n,c)=>{const f="value"===(n.axis??"value"),x=e=>f?e:Math.min(m,Math.max(h,e));if(!f&&Math.max(n.value,n.to??n.value)<h)return null;if(!f&&Math.min(n.value,n.to??n.value)>m)return null;const p=e=>f?r(e):o?s(e):(l?a.top:a.left)+i(e-u),g=f?!l:l,v=p(x(n.value)),y=void 0===n.to?null:p(x(n.to)),k=(void 0===n.to?[n.value]:[n.value,n.to]).filter(e=>f||e>=h&&e<=m).map(p),M=null===y?v:Math.min(v,y),w=null===y?v:Math.max(v,y),C=n.color?b(n.color):"var(--neba-muted-fg)",N=n.solid?void 0:"4 4",S=n.label?e("text",{x:g?a.left+a.width-4:M+4,y:g?M-5:a.top+d,textAnchor:g?"end":"start",fontSize:d,fontWeight:500,fill:C,children:n.label}):null;return t("g",{children:[null===y?null:e("rect",{x:g?a.left:M,y:g?M:a.top,width:g?a.width:Math.max(0,w-M),height:g?Math.max(0,w-M):a.height,fill:`color-mix(in oklab, ${C} 12%, transparent)`}),k.map((t,n)=>e("line",{x1:g?a.left:t,x2:g?a.left+a.width:t,y1:g?t:a.top,y2:g?t:a.top+a.height,stroke:C,strokeWidth:1,strokeDasharray:N},n)),S]},c)})})}export function CartesianChart(r){const{series:i,categories:x,xAxis:v,yAxis:b,secondaryAxis:k,brush:w,references:_,horizontal:$=!1,stacked:W=!1,stackedFull:L=!1,includeZero:H=!0,bandRatio:Z=1,inset:Y=!1,headroom:q=0,markInset:G=0,xScale:te="band",marks:ne,markRadius:re=24,table:ie,exportRows:oe,summary:de,swatch:he,scale:me,markTooltip:fe,height:xe,initialWidth:pe,format:ge,locale:ve,label:be,legend:ye,tooltip:ke,empty:Me,exportable:we=!1,exportFileName:Ce="chart.csv",onExport:Ne,size:Se="md",variant:ze="text",padded:Pe=!1,className:Ae,children:je,...Be}=a(r,["size","variant","locale"]),Te=l.useRef(null),_e=J(Te,{initial:K(pe,xe)}),$e=F(R,ve),Ee=F(I,ve),Ie=T(ve),Re=B(),We=l.useId(),Fe=l.useId(),Le=ee(i);l.useEffect(()=>{A(i.length)},[i.length]);const De=u(i),He=!0===w?{}:!1===w||void 0===w?null:w,[Ve,Oe]=l.useState(null),Ze=He?He.range??Ve??He.defaultRange??[0,Math.max(0,De-1)]:[0,Math.max(0,De-1)],Xe=Math.min(Math.max(0,Math.round(Ze[0])),Math.max(0,De-1)),Ye=Math.min(Math.max(Xe,Math.round(Ze[1])),Math.max(0,De-1)),qe=null!==He&&(Xe>0||Ye<De-1),Ge=l.useMemo(()=>qe?i.map(e=>({...e,data:e.data.slice(Xe,Ye+1)})):i,[i,qe,Xe,Ye]),Je=l.useMemo(()=>qe&&x?x.slice(Xe,Ye+1):x,[x,qe,Xe,Ye]),[Ke,Ue]=l.useState(null),[Qe,et]=l.useState(null),[tt,nt]=l.useState(null),at=ge?JSON.stringify(ge):"",lt=l.useCallback(e=>ge?j(Ie,ge).format(e):m(e,Ie),[at,Ie]),rt=l.useMemo(()=>N(Ge),[Ge]),it=Le.visible,ot=l.useMemo(()=>L?C(rt,it,lt):rt,[rt,L,it,lt]),st=l.useMemo(()=>Ge.map((e,t)=>y(e,t)),[Ge]),ct=u(Ge),ut=l.useMemo(()=>Array.from({length:ct},(e,t)=>c(t,Je,ot)),[ct,Je,ot]),dt=qe||L,ht=l.useMemo(()=>dt?N(i):null,[dt,i]),mt=ht??ot,ft=l.useMemo(()=>qe&&ht?Array.from({length:De},(e,t)=>c(t,x,ht)):null,[qe,De,x,ht])??ut,xt=Math.max(0,Le.visible.indexOf(!0)),pt=null!==He,gt=l.useMemo(()=>pt?(mt[xt]??[]).map(e=>e.value):[],[pt,mt,xt]),vt=Boolean(k)&&!W&&!L,bt=i.map(e=>"secondary"===e.axis?"1":"0").join(""),yt=l.useCallback(e=>vt&&"1"===bt[e],[vt,bt]),kt=l.useMemo(()=>{const e=f(ot.filter((e,t)=>it[t]&&!yt(t)),W),t=(_??[]).filter(e=>"value"===(e.axis??"value"));if(0===t.length)return e;const n=t.flatMap(e=>void 0===e.to?[e.value]:[e.value,e.to]);return{min:Math.min(e?.min??1/0,...n),max:Math.max(e?.max??-1/0,...n)}},[ot,it,yt,W,_]),Mt=l.useMemo(()=>vt?f(ot.filter((e,t)=>it[t]&&yt(t)),!1):null,[vt,ot,it,yt]),wt=k?.tickFormat,Ct=l.useMemo(()=>de??le(ot.filter((e,t)=>it[t]&&!yt(t)),lt),[de,ot,it,yt,lt]),Nt=l.useMemo(()=>void 0===de&&vt?le(ot.filter((e,t)=>it[t]&&yt(t)),wt?e=>String(wt(e,0)):lt):null,[de,vt,ot,it,yt,wt,lt]),St=U(Te,"string"==typeof xe),zt=Q(xe,Se,St),Pt=h[Se],At=b,jt=v,Bt=At?.min,Tt=At?.max,_t=At?.tickCount,$t=l.useMemo(()=>me??P(kt,{min:Bt,max:Tt,tickCount:_t,includeZero:H}),[me,kt,Bt,Tt,_t,H]),Et=k?.min,It=k?.max,Rt=k?.tickCount,Wt=$t.ticks.length-1,Ft=l.useMemo(()=>null===Mt?null:void 0===Rt?o(Mt,Wt,{min:Et,max:It,includeZero:H}):P(Mt,{min:Et,max:It,tickCount:Rt,includeZero:H}),[Mt,Wt,Et,It,Rt,H]),Lt=l.useMemo(()=>"value"===te?d(ot.filter((e,t)=>it[t]),Je):null,[te,ot,it,Je]),Dt=jt?.min,Ht=jt?.max,Vt=jt?.tickCount,Ot=l.useMemo(()=>"value"===te?P(Lt,{min:Dt,max:Ht,tickCount:Vt,includeZero:!1}):null,[te,Lt,Dt,Ht,Vt]),Zt=At?.tickFormat,Xt=l.useMemo(()=>$t.ticks.map((e,t)=>Zt?String(Zt(e,t)):lt(e)),[$t,Zt,lt]),Yt=jt?.tickFormat,qt=l.useMemo(()=>Ot?Ot.ticks.map((e,t)=>Yt?String(Yt(e,t)):m(e,Ie)):ut.map((e,t)=>Yt?String(Yt(e,t)):p(e,Ie)),[Ot,ut,Yt,Ie]),Gt=Xt.reduce((e,t)=>Math.max(e,M(t,Pt)),0),Jt=l.useMemo(()=>(Ft?.ticks??[]).map((e,t)=>wt?String(wt(e,t)):lt(e)),[Ft,wt,lt]),Kt=Jt.reduce((e,t)=>Math.max(e,M(t,Pt)),0),Ut=Pt+6,Qt=Ft&&!k?.hidden?k?.thickness??($?Pt+12:Kt+10):0,en=$?jt:At,tn=Boolean(en?.label)&&!en?.hidden,nn=Boolean(Ft&&k?.label&&!k.hidden),an=$||jt?.hidden?0:jt?.tickAngle,ln=l.useMemo(()=>z(an,Pt),[an,Pt]),rn=0!==ln.angle,on=At?.hidden?0:Gt+10,sn=(_e-($?0:on)-16)/Math.max(1,ct),cn=Math.min(140,.4*zt),un=!Ot&&($||rn||sn-6>=2.4*Pt),dn=$?150:rn?ln.cut(cn):sn-6,hn=l.useMemo(()=>un?qt.map(e=>S(e,dn,Pt)):qt,[qt,un,dn,Pt]),mn=l.useMemo(()=>hn.reduce((e,t)=>Math.max(e,M(t,Pt)),0),[hn,Pt]),fn=$?jt?.hidden?0:mn+10:on,xn=ln.depth(mn),pn=He?(He.height??32)+10:0,gn=$?At?.hidden?0:Pt+12+(At?.label?Ut:0):jt?.hidden?0:xn+12+(jt?.label?Ut:0),vn=($?jt:At)?.thickness??fn,bn=(($?At:jt)?.thickness??gn)+pn,yn=($||Ot?12:rn?ln.angle>0?ln.overhang(mn)+8:8:Math.max(8,hn.length?ln.overhang(mn):8))+G+($?0:Qt),kn=g[Se]+4+q+G+(tn||nn?Ut+2:0)+(we?20:0)+($?Qt:0),Mn=zt,wn=vn+G,Cn=Math.max(0,_e-vn-G-yn),Nn=Math.max(0,Mn-kn-bn-G),Sn=l.useMemo(()=>({left:wn,top:kn,width:Cn,height:Nn}),[wn,kn,Cn,Nn]),zn=$?Sn.height:Sn.width,Pn=Y?Math.max(1,ct-1):ct,An=l.useMemo(()=>s(Pn,zn,Z),[Pn,zn,Z]),jn=l.useCallback(e=>Y?ct<=1?zn/2:zn*e/(ct-1):An.centre(e),[Y,ct,zn,An]),Bn=l.useCallback((e,t)=>{return n=void 0!==t&&yt(t)&&Ft?Ft:$t,$?Sn.left+n.fraction(e)*Sn.width:Sn.top+(1-n.fraction(e))*Sn.height;var n},[$,Sn.left,Sn.top,Sn.width,Sn.height,$t,Ft,yt]),Tn=l.useCallback((e,t,n)=>$?{x:Bn(t,n),y:Sn.top+jn(e)}:{x:Sn.left+jn(e),y:Bn(t,n)},[$,Bn,jn,Sn.left,Sn.top]),_n=l.useCallback(e=>$?Sn.top+(1-(Ot?.fraction(e)??0))*Sn.height:Sn.left+(Ot?.fraction(e)??0)*Sn.width,[$,Sn.left,Sn.top,Sn.width,Sn.height,Ot]),$n=l.useCallback(e=>{const t=void 0!==e&&yt(e)&&Ft?Ft:$t;return Bn(Math.min(Math.max(0,t.min),t.max),e)},[Bn,$t,Ft,yt]),En=$n(),In=k?.tickFormat,Rn=l.useCallback(e=>yt(e)&&In?e=>String(In(e,0)):lt,[yt,In,lt]),Wn="object"==typeof ye&&Boolean(ye.showValue),Fn=l.useMemo(()=>Wn?ot.map((e,t)=>function(e,t){const n=new Set;for(const a of e)null===a.value||Number.isNaN(a.value)||n.add(t(a.value).replace(/[0-9]/g,"0"));return E([...n])}(e,Rn(t))):void 0,[Wn,ot,Rn]),Ln=l.useMemo(()=>({plot:Sn,values:ot,visible:it,colors:st,scale:$t,secondScale:Ft,onSecond:yt,band:An,horizontal:$,valuePx:Bn,categoryPx:jn,point:Tn,categoryScale:Ot,categoryValuePx:_n,zeroPx:En,zeroPxOf:$n,categories:ut,size:Se}),[Sn,ot,it,st,$t,Ft,yt,An,$,Bn,jn,Tn,Ot,_n,En,$n,ut,Se]),Dn=_e>0,Hn=l.useMemo(()=>ne&&Dn?ne(Ln):X,[ne,Dn,Ln]),Vn=(_??[]).filter(e=>Boolean(e.label)),On=e=>{const t=t=>"value"===(e.axis??"value")?lt(t):p(Ot?t:ft[t]??t,Ie);return void 0===e.to?t(e.value):`${t(e.value)}–${t(e.to)}`},Zn=!1===ke?{mode:"none"}:!0===ke||void 0===ke?{}:ke,Xn=Zn.mode??(ne?"item":"index"),Yn=e=>{const t=new Map;let n=0,a=0;for(const l of e){const e=l.value??0,r=W?e<0?a:n:e,i=W?r+e:e;W&&e<0?a=i:W&&(n=i),t.set(l.seriesIndex,[Bn(r,l.seriesIndex),Bn(i,l.seriesIndex)])}return t},qn=null===Qe?null:Hn[Qe]??null,Gn=ne?qn?qn.index:null:Ke,Jn=ne?Hn.length:ct,Kn=()=>{Ue(null),et(null),nt(null)};ae(Te,null!==Gn,Kn);const Un=e=>{if("none"===Xn)return;if(ne){const t=((e,t)=>{const n=Te.current;if(!n||0===Hn.length)return null;const a=n.getBoundingClientRect(),l=e-a.left,r=t-a.top;let i=null,o=1/0,s=1/0;return Hn.forEach((e,t)=>{const n=e.x-l,a=e.y-r,c=Math.sqrt(n*n+a*a);let u;if(void 0===e.rx)u=Math.max(0,c-e.r);else{const t=Math.max(0,Math.abs(n)-e.rx),l=Math.max(0,Math.abs(a)-(e.ry??e.rx));u=Math.sqrt(t*t+l*l)}u<=re&&(u<o||u===o&&c<s)&&(o=u,s=c,i=t)}),i})(e.clientX,e.clientY);return void(t!==Qe&&et(t))}const t=((e,t)=>{const n=Te.current;if(!n||0===ct)return null;const a=n.getBoundingClientRect(),l=$?t-a.top-Sn.top:e-a.left-Sn.left;if(l<-An.step||l>zn+An.step)return null;const r=Y?ct<=1?0:Math.round(l/zn*(ct-1)):Math.floor(l/An.step);return Math.min(ct-1,Math.max(0,r))})(e.clientX,e.clientY);if(t!==Ke&&Ue(t),"item"===Xn){const n=((e,t)=>{const n=Te.current;if(!n)return null;const a=n.getBoundingClientRect();return $?e-a.left:t-a.top})(e.clientX,e.clientY),a=null===t||null===n?null:((e,t)=>{const n=Ge.flatMap((t,n)=>{const a=ot[n]?.[e]?.value;return Le.visible[n]&&null!=a?[{seriesIndex:n,value:a}]:[]}),a=Yn(n);let l=null,r=1/0;for(const{seriesIndex:e}of n){const[n,i]=a.get(e)??[t,t],o=Math.max(0,Math.min(n,i)-t,t-Math.max(n,i));o<r&&(r=o,l=e)}return l})(t,n);a!==tt&&nt(a)}},Qn=e=>{const t=null===e?null:Math.min(Jn-1,Math.max(0,e));ne?et(t):Ue(t)},ea=e=>{nt(null);Qn(((ne?Qe:Ke)??(e>0?-1:Jn))+e)},ta=null===Gn?[]:Ge.flatMap((e,t)=>{if(!Le.visible[t]||qn&&qn.series!==t)return[];const n=ot[t]?.[Gn];return n&&null!==n.value?[{seriesIndex:t,name:e.name,color:n.color??st[t],value:n.value,formatted:Rn(t)(n.value),label:n.label}]:[]}),na=qn&&fe?fe(qn):null,aa=Yn(ta),la="item"===Xn&&ta.length>1&&null!==tt?ta.find(e=>e.seriesIndex===tt):void 0,ra=na?na.items:la?[la]:ta,ia=qn?ot[qn.series]?.[qn.index]?.x??Je?.[qn.index]??qn.index:void 0,oa=e=>"number"==typeof e&&Ot?j(Ie,{}).format(e):p(e,Ie),sa=qn?qn.x:$?aa.get(ra[0]?.seriesIndex??-1)?.[1]??Bn(ra[0]?.value??0,ra[0]?.seriesIndex):Sn.left+jn(Gn??0),ca=qn?qn.y:$?Sn.top+jn(Gn??0):Sn.top,ua=qn?(qn.x-Sn.left)/Math.max(1,Sn.width)>.6:($?(sa-Sn.left)/Math.max(1,Sn.width):jn(Gn??0)/Math.max(1,zn))>.6,da=!1===ye?{interactive:!1}:!0===ye||void 0===ye?{}:ye,ha=!0===ye||!1!==ye&&Ge.length>1,ma=da.side??"bottom",fa={...Ln,format:lt,formatFor:Rn,hovered:Le.hovered,activeIndex:Gn,marks:Hn,activeMark:qn},xa=0===ct||null===kt||"value"===te&&null===Lt,pa=qe&&xa&&mt.some((e,t)=>Le.visible[t]&&e.some(e=>null!==e.value)),ga=xa&&!pa;return t(ChartSurface,{...Be,size:Se,variant:ze,padded:Pe,className:Ae,legendSide:ma,legend:ha?e(ChartLegendBar,{series:Ge,colors:st,options:da,visibility:Le,size:Se,swatch:he,reserve:Fn,values:da.showValue&&null!==Gn?Ge.map((e,t)=>{const n=ot[t]?.[Gn]?.value;return null==n?void 0:Rn(t)(n)}):void 0}):null,table:ga?null:t(n,{children:[ie?.(We,lt)??e(se,{id:We,caption:be,corner:jt?.label,categories:ft,series:i,values:mt,format:lt,formatFor:vt?Rn:void 0,locale:Ie}),Vn.length>0?e("ul",{className:O,children:Vn.map((e,n)=>t("li",{children:[e.label,": ",On(e)]},n))}):null]}),children:[we&&!ga?e(ChartExport,{rows:oe??(()=>[["string"==typeof jt?.label?jt.label:"",...Ge.map((e,t)=>e.name??`${t+1}`)],...ft.map((e,t)=>[e,...mt.map(e=>e[t]?.value??null)])]),fileName:Ce,onExport:Ne,label:Ee.exportCsv}):null,t("div",{ref:Te,role:"img",tabIndex:xa?void 0:0,"aria-label":be??Ee.label,"aria-describedby":xa?void 0:Fe,onPointerMove:Un,onPointerDown:e=>{"touch"===e.pointerType&&Un(e)},onPointerLeave:e=>{"touch"!==e.pointerType&&Kn()},onKeyDown:"none"===Xn?void 0:e=>{const t=$?"ArrowDown":"ArrowRight",n=$?"ArrowUp":"ArrowLeft";if(e.key===t)ea(1);else if(e.key===n)ea(-1);else if("Home"===e.key)Qn(0);else if("End"===e.key)Qn(Jn-1);else{if("Escape"!==e.key)return;Kn()}e.preventDefault()},onBlur:Kn,className:D("relative w-full","rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof xe?xe:zt},children:[xa?e("div",{className:D("flex h-full items-center justify-center text-(--neba-muted-fg)",V[Se]),style:pa?{paddingBottom:pn}:void 0,children:Me??$e.title}):_e>0?t("svg",{width:_e,height:Mn||"100%",viewBox:`0 0 ${_e} ${Mn}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ue,{plot:Sn,scale:$t,band:An,horizontal:$,inset:Y,categoryPx:jn,valuePx:Bn,tickTexts:Xt,widestTick:Gt,categoryTexts:hn,widestCategory:mn,categoryScale:Ot,categoryValuePx:_n,valueAxis:At,categoryAxis:jt,secondScale:Ft,secondTickTexts:Jt,secondaryAxis:k,fontSize:Pt,turn:ln,labelDepth:xn,zeroPx:En}),_&&_.length>0?e(ChartReferences,{references:_,plot:Sn,horizontal:$,valuePx:Bn,categoryPx:jn,categoryScale:Ot,categoryValuePx:_n,categoryBounds:Ot?[Ot.min,Ot.max]:Y?[Xe,Xe+ct-1]:[Xe-.5,Xe+ct-.5],categoryOffset:Xe,fontSize:Pt}):null,null===Gn||ne||"index"!==Xn||!1===Zn.crosshair?null:(()=>{const t=jn(Gn);return e("line",$?{x1:Sn.left,x2:Sn.left+Sn.width,y1:Sn.top+t,y2:Sn.top+t,stroke:"var(--neba-chart-baseline)",strokeWidth:1}:{x1:Sn.left+t,x2:Sn.left+t,y1:Sn.top,y2:Sn.top+Sn.height,stroke:"var(--neba-chart-baseline)",strokeWidth:1})})(),je(fa)]}):null,null!==Gn&&ra.length>0&&"none"!==Xn?Zn.render?e("div",{className:"pointer-events-none absolute z-10",style:ua?{right:`calc(100% - ${sa}px + 10px)`,top:ca}:{left:sa+10,top:ca},children:Zn.render({index:Gn,category:ia??ut[Gn],items:ra})}):e(ChartTooltipPanel,{heading:na?na.heading:oa(ia??ut[Gn]),items:ra,x:sa,y:ca,flip:ua,size:Se}):null]}),He&&!ga&&Re?e(l.Suspense,{fallback:null,children:e(ce,{outline:gt,count:De,range:[Xe,Ye],onRange:e=>{Oe(e),He.onRangeChange?.(e)},color:st[Math.max(0,Le.visible.indexOf(!0))]??st[0],height:He.height??32,words:{start:Ee.start,end:Ee.end},label:be??Ee.label,categories:ft,locale:Ie,width:_e})}):null,xa?null:e(ChartSummary,{id:Fe,template:Ee.summary,locale:Ie,...Ct,second:Nt?{template:Ee.summarySecondary,...Nt}:null}),"none"===Xn?null:e(ChartStatus,{heading:null===Gn?void 0:na?.heading??oa(ia??ut[Gn]),items:ra})]})}const ue=/*@__PURE__*/l.memo(function ChartAxes({plot:a,scale:l,horizontal:r,categoryPx:i,valuePx:o,tickTexts:s,widestTick:c,categoryTexts:u,widestCategory:d,categoryScale:h,categoryValuePx:m,valueAxis:f,categoryAxis:p,secondScale:g,secondTickTexts:v,secondaryAxis:b,fontSize:y,turn:C,labelDepth:N,zeroPx:S}){const z=!1!==f?.grid&&!f?.hidden,P=r?p:f,A=r?f:p,j=!p?.hidden&&(p?.grid??null!==h),B=e=>h?m(h.ticks[e]):(r?a.top:a.left)+i(e),T=0!==C.angle,_=C.room(d),$=w(u.length,r?a.height:a.width,r?1.8*y:_),E=w(l.ticks.length,r?a.width:a.height,r?Math.max(c,1)+16:2*y),I=u.length>1?Math.abs(B(1)-B(0)):a.width,R=l.ticks.length>1?Math.abs(o(l.ticks[1])-o(l.ticks[0])):a.height,W=x(u.length,$,I,r?1.8*y:T?_:M(u[u.length-1]??"",y)),F=a.top+a.height+C.offset,L=x(l.ticks.length,E,R,r?M(s[s.length-1]??"",y):1.6*y);return t("g",{children:[l.ticks.map((n,i)=>{const c=o(n),u=Math.abs(n)<1e-9;return t("g",{children:[z?e("line",r?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:u?"var(--neba-chart-baseline)":"var(--neba-chart-grid)",strokeWidth:1}):null,f?.hidden||!k(i,l.ticks.length,E,L)?null:e("text",r?{x:c,y:a.top+a.height+y+6,textAnchor:0===i?"start":i===l.ticks.length-1?"end":"middle",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:s[i]})]},n)}),p?.hidden?null:t(n,{children:[e("line",r?{x1:S,x2:S,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:S,y2:S,stroke:"var(--neba-chart-axis)",strokeWidth:1}),u.map((n,l)=>{const i=k(l,u.length,$,W);if(!i&&(r||!j))return null;const o=B(l);return r?e("text",{x:a.left-8,y:o,textAnchor:"end",dominantBaseline:"central",fontSize:y,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:n},l):t("g",{children:[j?e("line",{x1:o,x2:o,y1:a.top,y2:a.top+a.height,stroke:"var(--neba-chart-grid)",strokeWidth:1}):null,i?e("text",{x:o,y:F,textAnchor:T?C.anchor:h?0===l?"start":l===u.length-1?"end":"middle":"middle",transform:T?`rotate(${C.angle} ${o} ${F})`:void 0,dominantBaseline:T?"central":void 0,fontSize:y,fill:"var(--neba-muted-fg)",className:h?"tabular-nums":void 0,children:n}):null]},l)})]}),g&&!b?.hidden?g.ticks.map((t,n)=>{const l=r?a.left+g.fraction(t)*a.width:a.top+(1-g.fraction(t))*a.height;return k(n,g.ticks.length,E,L)?e("text",r?{x:l,y:a.top-8,textAnchor:0===n?"start":n===g.ticks.length-1?"end":"middle",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]}:{x:a.left+a.width+8,y:l,textAnchor:"start",dominantBaseline:"central",fontSize:y,fill:"var(--neba-muted-fg)",className:"tabular-nums",children:v[n]},t):null}):null,g&&b?.label&&!b.hidden?e("text",{x:a.left+a.width,y:y+2,textAnchor:"end",fontSize:y,fill:"var(--neba-muted-fg)",fontWeight:500,children:b.label}):null,P?.label&&!P.hidden?e("text",{x:a.left,y:y+2,textAnchor:"start",fontSize:y,fill:"var(--neba-muted-fg)",fontWeight:500,children:P.label}):null,A?.label&&!A.hidden?e("text",{x:a.left+a.width,y:a.top+a.height+N+y+12,textAnchor:"end",fontSize:y,fill:"var(--neba-muted-fg)",fontWeight:500,children:A.label}):null]})});export{se as ChartDataTable,ChartExport,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSummary,ChartSurface,ChartTooltipPanel,le as summarise,Q as chartHeight,K as initialWidthFor,oe as tableRuns,re as useDeferredRows,U as useMeasuredHeight,J as useMeasuredWidth,ae as useReleaseOutside,ee as useVisibility};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as l,jsxs as e}from"react/jsx-runtime";import*as
|
|
1
|
+
import{jsx as l,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{areaPath as o,chartFontSizes as n,labelInk as a,labelledPoints as s,linePath as i,lineWidths as u,markerRadii as c,markGap as f}from"./chart.js";import{markTransitionClasses as p}from"./chart-frame.js";const d=l=>l.filter(Boolean);export function LineSeries({context:r,curve:n,filled:a,stacked:m,markers:b,valueLabels:$,connectNulls:g,gradient:y,idPrefix:j}){const{values:z,visible:L,colors:C,hovered:F,activeIndex:N,plot:W,point:M,zeroPxOf:O,size:S,formatFor:w}=r,E=u[S],G=c[S],P=t.useMemo(()=>{const l=L.indexOf(!0),e=[],r=[],t=[];return z.forEach((l,o)=>{const n=l.map((l,e)=>(l.value??0)<0?t[e]??0:r[e]??0);e.push(n),m&&L[o]&&l.forEach((l,e)=>{const o=l.value??0;o<0?t[e]=(t[e]??0)+o:r[e]=(r[e]??0)+o})}),z.map((r,t)=>{if(!L[t])return null;const u=r.map((l,r)=>{if(null===l.value)return null;const o=m?e[t][r]+l.value:l.value;return M(r,o,t)}),c=g?d(u):u,f=O(t),p=r.map((l,r)=>null===l.value?null:m?M(r,e[t][r],t):{x:M(r,l.value,t).x,y:f}),h=g?d(p):p,x=a&&m;return{tops:u,area:a?o(c,h,n):null,gap:x&&t!==l?i(h,n):null,line:x?null:i(c,n),labelled:s(r,$)}})},[z,L,m,a,g,n,M,O,$]);return e("g",{children:[e("defs",{children:[y?C.map((r,t)=>e("linearGradient",{id:`${j}-stroke-${t}`,gradientUnits:"userSpaceOnUse",x1:W.left,y1:0,x2:W.left+W.width,y2:0,children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 45%, transparent)`}),l("stop",{offset:"100%",stopColor:r})]},`stroke-${t}`)):null,a&&!m?C.map((r,t)=>e("linearGradient",{id:`${j}-fill-${t}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 28%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${r} 2%, transparent)`})]},`fill-${t}`)):null]}),z.map((r,t)=>{const o=P[t];if(!o)return null;const{tops:n,labelled:a}=o,s=C[t],i=null!==F&&F!==t,u="all"===b||"auto"===b&&r.length<=14;return e("g",{opacity:i?.28:1,className:p,children:[null===o.area?null:l("path",{d:o.area,fill:m?`color-mix(in oklab, ${s} 70%, transparent)`:`url(#${j}-fill-${t})`,stroke:"none"}),null===o.gap?null:l("path",{d:o.gap,fill:"none",stroke:"var(--neba-chart-gap)",strokeWidth:f}),null===o.line?null:l("path",{d:o.line,fill:"none",stroke:y?`url(#${j}-stroke-${t})`:s,strokeWidth:E,strokeLinecap:"round",strokeLinejoin:"round"}),u?h(n.length).map(([e,t])=>l(v,{tops:n,values:r,from:e,to:t,color:s,radius:G,active:null!==N&&N>=e&&N<t?N:null},e)):null===N?null:x(n,r,N,s,G,N),"none"===$?null:l(k,{tops:n,values:r,labelled:a,color:s,plot:W,radius:G,size:S,series:t,formatFor:w})]},t)})]})}const m=64;function h(l){const e=[];for(let r=0;r<l;r+=m)e.push([r,Math.min(l,r+m)]);return e}function x(e,r,t,o,n,a){const s=e[t];return s?l("circle",{cx:s.x,cy:s.y,r:t===a?n+1:n,fill:r[t].color??o,stroke:"var(--neba-chart-gap)",strokeWidth:f,className:p},t):null}const v=/*@__PURE__*/t.memo(function MarkerRun({tops:e,values:t,from:o,to:n,color:a,radius:s,active:i}){const u=[];for(let l=o;l<n;l++)u.push(x(e,t,l,a,s,i));return l(r,{children:u})}),k=/*@__PURE__*/t.memo(function ValueLabels({tops:e,values:t,labelled:o,color:s,plot:i,radius:u,size:c,series:f,formatFor:p}){const d=p(f);return l(r,{children:e.map((e,r)=>{const f=t[r].value;return e&&null!==f&&o(r)?l("text",{x:e.x,y:e.y-u-5,textAnchor:e.x>i.left+i.width-24?"end":e.x<i.left+24?"start":"middle",fontSize:n[c],fontWeight:500,fill:a(t[r].color??s),className:"tabular-nums",children:t[r].label??d(f)},`label-${r}`):null})})});
|
package/dist/internal/chart.d.ts
CHANGED
|
@@ -519,6 +519,19 @@ export declare const markShapes: readonly MarkShape[];
|
|
|
519
519
|
* the hover treatment are then unarguably the same on all five.
|
|
520
520
|
*/
|
|
521
521
|
export declare function markPath(shape: MarkShape, cx: number, cy: number, r: number): string;
|
|
522
|
+
/**
|
|
523
|
+
* Where `markPath`'s `cx`/`cy` falls inside the shape's own bounding box, as a
|
|
524
|
+
* `transform-origin` against `transform-box: fill-box`.
|
|
525
|
+
*
|
|
526
|
+
* A fraction of the box is the same for every mark of one shape, whatever its
|
|
527
|
+
* size and wherever it sits, so a whole plot of them can be grown about their
|
|
528
|
+
* own points by one rule rather than by an origin written on each mark. Four of
|
|
529
|
+
* the shapes are symmetric about their point and are the middle of their box,
|
|
530
|
+
* which is what `undefined` stands for. The triangle is the exception, since it
|
|
531
|
+
* sits on its circumcircle: its apex is `size` above the point and its base
|
|
532
|
+
* `size / 2` below it, so the point is two thirds of the way down.
|
|
533
|
+
*/
|
|
534
|
+
export declare function markOrigin(shape: MarkShape): string | undefined;
|
|
522
535
|
/**
|
|
523
536
|
* The centre line of that slice, as an *open* path.
|
|
524
537
|
*
|