plass-ui 1.6.0 → 1.8.0

package/dist/internal/chart-frame.d.ts

@@ -18,9 +18,9 @@
 import * as React from 'react';
 import { type PlBoxProps } from '../components/box/PlBox.js';
 import { type BandScale, type ChartValue, type PlotBox, type ValueScale } from './chart.js';
-import type { PlassChartAxis, PlassChartCategory, PlassChartLegend, PlassChartSeries, PlassChartTooltip, PlassSize } from '../types.js';
+import type { PlassChartAxis, PlassChartCategory, PlassChartLegend, PlassChartReference, PlassChartSeries, PlassChartTooltip, PlassSize } from '../types.js';
 /**
- * How wide the chart actually is, in pixels.
+ * How big the chart actually is, in pixels.
  *
  * An SVG cannot lay a chart out from a percentage: every tick position, every
  * bar width and the decision about how many category labels fit are arithmetic
@@ -32,8 +32,32 @@ import type { PlassChartAxis, PlassChartCategory, PlassChartLegend, PlassChartSe
  * it on a server-rendered page is a box of the right height with nothing in it,
  * which is why the height is a prop and not something measured too: a reserve
  * that is dropped when the content arrives is the same jump twice.
+ *
+ * The height is measured as well, for the one case where the prop does not
+ * say it in pixels. A `height` given as a CSS length is laid out by the
+ * stylesheet, so the box is already that tall in the server's HTML, and the
+ * drawing is laid out at whatever the box comes to. `height` is `null` until
+ * the box has been measured.
+ *
+ * `initialWidth` is the caller's width for the time before there is one. The
+ * server's render and the render that hydrates its HTML both lay the chart out
+ * at it, so the two agree, and the layout effect after hydration replaces it
+ * with the measurement. `guessed` says the width is still the caller's: a chart
+ * cuts its drawing at the edge of its box while it is, because a guess wider
+ * than the box would otherwise spill across the page until the script runs.
+ */
+declare function useMeasuredSize(ref: React.RefObject<HTMLElement | null>, initialWidth?: number): {
+    width: number;
+    height: number | null;
+    guessed: boolean;
+};
+/**
+ * The height a chart is drawn at when it is known before the box is measured:
+ * the number it was given, or the `size` ladder's when it was given none.
+ * `null` for a CSS length, which the box is laid out at and the drawing then
+ * measures.
  */
-declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null>): number;
+declare function givenHeight(height: number | string | undefined, ladder: number): number | null;
 /**
  * What every chart takes, and the reason it is one interface: a dashboard is
  * built by copying a tile and changing the component in it, and that only works
@@ -76,6 +100,10 @@ declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null>): num
  * Only the pie and the heatmap ever moved on any of this. The line, the area,
  * the bar, the scatter and the timeline snapped, and a dashboard holding two of
  * each showed both answers at once.
+ *
+ * The declaration is one string literal, however long, because Tailwind finds
+ * a class by reading the source text. Pieced together from three strings, it
+ * was a class the stylesheet never had, and every mark snapped.
  */
 export declare const markTransitionClasses: string;
 export interface ChartBaseProps extends Omit<PlBoxProps, 'children' | 'title'> {
@@ -83,10 +111,31 @@ export interface ChartBaseProps extends Omit<PlBoxProps, 'children' | 'title'> {
      * How tall the drawing is. A number is pixels; a string is any CSS length.
      * Defaults to the `size` ladder.
      *
+     * A string sets the box's height and the drawing is laid out at the height
+     * the box is measured at, so on a server, and until the script has run, the
+     * box is that tall with nothing drawn in it. A percentage needs a parent
+     * whose height is known, as it does anywhere in CSS.
+     *
      * The axis labels are drawn *inside* this, not under it, so a card sized to
      * the chart is a card the chart fits in.
      */
     height?: number | string;
+    /**
+     * The width to draw at until the box has been measured, in pixels.
+     *
+     * A chart is laid out from the width its box is measured at, and a server
+     * has no box to measure: without this, the HTML it sends holds an empty box
+     * of the right height and the plot arrives with the script. Given the width
+     * the chart usually has, the server and the render that hydrates its HTML
+     * draw the whole chart at it, and the measured width takes over before the
+     * hydrated page is painted. Until then a drawing wider than its box is cut
+     * at the box's edge. A `height` given as a CSS length is not known until the
+     * box is measured either, so with one the server draws the box alone.
+     *
+     * A page rendered only in the browser measures the box before its first
+     * paint, so it never shows this width.
+     */
+    initialWidth?: number;
     /**
      * How the numbers are written, everywhere they appear — the axis, the
      * tooltip, the labels on the marks. `Intl.NumberFormat` options, the same
@@ -101,6 +150,12 @@ export interface ChartBaseProps extends Omit<PlBoxProps, 'children' | 'title'> {
     /**
      * The chart's accessible name — what it is a chart *of*. Read out in place of
      * the drawing, and used as the caption of the table underneath it.
+     *
+     * It is not text anybody sees, so an `aria-label` names the drawing in its
+     * place, as one names a control in its visible label's, and an
+     * `aria-labelledby` outranks both. The table is named by whichever of the
+     * three names the drawing: a reference points it at the same element, and
+     * words are its caption.
      */
     label?: string;
     /**
@@ -133,21 +188,53 @@ export interface CartesianChartProps extends ChartBaseProps {
     xAxis?: PlassChartAxis;
     /** The value axis. */
     yAxis?: PlassChartAxis;
+    /**
+     * Lines drawn across the plot at a value — a target, an average, a limit.
+     *
+     * Not data, and drawn as if they know it: dashed, in the muted ink, under the
+     * marks. They sit on the **value** axis, so one runs across a vertical chart
+     * and down a horizontal one. Each is written into the description a screen
+     * reader is given with the chart.
+     */
+    reference?: PlassChartReference | readonly PlassChartReference[];
 }
 interface Visibility {
+    /** The key each series' legend entry is rendered under, from `entryKeys`. */
+    keys: readonly string[];
     visible: boolean[];
     hovered: number | null;
     toggle: (index: number) => void;
     setHovered: (index: number | null) => void;
 }
+/**
+ * The keys the legend entries of `series` are rendered under, one per series
+ * and in its order: its `id` and how many series before it have that id, or
+ * else its name and how many series before it have that name, or its place in
+ * the array when it has neither.
+ *
+ * No two entries share a key. Every name is followed by its count and a place
+ * never is: two series called "Revenue" are `Revenue#0` and `Revenue#1`, and a
+ * series called "1" is `1#0` where an unnamed one at index 1 is `1`. The count
+ * is whatever follows the last `#`, so a name holding a `#` of its own cannot
+ * meet another name's key either. An id is followed by its count and then by
+ * `@id`, so a series with the id "eu" is `eu#0@id`, which ends in a letter
+ * where the key of a name or of a place always ends in a digit.
+ *
+ * A timeline keys its rows with it as well. They have no legend, but a mark on
+ * one is held by its row's key, as a mark on a series is held by its entry's.
+ */
+declare function entryKeys(series: readonly Pick<PlassChartSeries, 'id' | 'name'>[]): string[];
 /**
  * Which series are drawn, and which one the pointer is resting on in the legend.
  *
- * Keyed by index into the array as it was passed, which is what keeps a hidden
- * series from renumbering the ones after it. The colours come off the same
- * index, so hiding Europe leaves Asia exactly the colour it was.
+ * Answered by index into the array as it was passed, which is what keeps a
+ * hidden series from renumbering the ones after it. The colours come off the
+ * same index, so hiding Europe leaves Asia exactly the colour it was.
+ *
+ * `listed` is whether the legend is drawn with entries that answer the pointer
+ * and the focus, which is where the hovered one comes from.
  */
-declare function useVisibility(series: readonly PlassChartSeries[]): Visibility;
+declare function useVisibility(series: readonly PlassChartSeries[], listed: boolean): Visibility;
 interface LegendProps {
     series: readonly PlassChartSeries[];
     colors: readonly string[];
@@ -156,6 +243,8 @@ interface LegendProps {
     size: PlassSize;
     values?: readonly (string | undefined)[];
     swatch?: (index: number, color: string) => React.ReactNode;
+    /** Which entries are drawn on the plot as a dashed line, by index. */
+    dashed?: readonly boolean[];
 }
 /**
  * The dependable identity channel.
@@ -165,15 +254,20 @@ interface LegendProps {
  * light hue is illegible as text and because colour is what the swatch beside
  * it is for.
  *
- * A hidden series stays in the legend and goes grey rather than disappearing:
- * a list that shortens when you click it is a list you cannot click twice.
+ * A hidden series stays in the legend and fades rather than disappearing: a
+ * list that shortens when you click it is a list you cannot click twice. It
+ * fades as one thing — swatch, name and value together, at one opacity — which
+ * is what a control that has been switched off looks like everywhere else in
+ * the library. Recolouring the name to the muted ink instead was the one place
+ * a hidden entry was told apart by a *hue*, and it read as a second kind of
+ * text rather than as the same entry, off.
  *
  * `swatch` is for the chart whose marks carry a second identity channel. A
  * scatter past the third series tells its series apart by shape as well as by
  * hue, and a legend that answered with eight identical squares would be back to
  * colour alone — which is the thing the shapes were added to fix.
  */
-declare function ChartLegendBar({ series, colors, options, visibility, size, values, swatch }: LegendProps): React.JSX.Element;
+declare function ChartLegendBar({ series, colors, options, visibility, size, values, swatch, dashed }: LegendProps): React.JSX.Element;
 interface ScaleLegendProps {
     /** The steps, palest first, as the `var()`s that resolve them. */
     steps: readonly string[];
@@ -209,6 +303,13 @@ export interface ChartTooltipItem {
     value: number | null;
     formatted: string;
     label?: React.ReactNode;
+    /**
+     * A second figure, written after the reading in brackets: a bubble's size,
+     * as in `22 (5)`. Kept apart from `formatted` and `label` so that what a
+     * caller's own `tooltip.render` is handed is still the value and the point's
+     * own words.
+     */
+    aside?: string;
 }
 interface TooltipProps {
     heading: React.ReactNode;
@@ -251,9 +352,26 @@ declare function ChartStatus({ heading, items }: {
     heading?: React.ReactNode;
     items: readonly ChartTooltipItem[];
 }): React.JSX.Element;
-interface DataTableProps {
-    id: string;
+/** What the table under a chart is called. See `chartTableName`. */
+interface ChartTableName {
+    /** The words it is captioned with: an `aria-label`, else `label`. */
     caption?: string;
+    /** A caller's `aria-labelledby`, which names it in place of a caption. */
+    labelledBy?: string;
+}
+/**
+ * What the table under a chart is called, by the precedence its picture is
+ * called by: a caller's `aria-labelledby`, then an `aria-label` in `label`'s
+ * place, then `label`.
+ *
+ * A reference names the table by the same element it names the picture by,
+ * and leaves it no caption, whose words would be read inside the table as a
+ * name nobody gave it. Words are its caption, as `label` always was. With
+ * none of the three the table has no name, as before.
+ */
+declare function chartTableName({ label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }: Pick<ChartBaseProps, 'label' | 'aria-label' | 'aria-labelledby'>): ChartTableName;
+interface DataTableProps extends ChartTableName {
+    id: string;
     corner?: React.ReactNode;
     categories: readonly PlassChartCategory[];
     series: readonly PlassChartSeries[];
@@ -261,7 +379,24 @@ interface DataTableProps {
     format: (value: number) => string;
     locale?: string;
 }
-declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, corner, categories, series, values, format, locale }: DataTableProps) => React.JSX.Element>;
+/**
+ * The chart, as a table, for the readers a drawing does not reach.
+ *
+ * Not an option and not a toggle. A tooltip that is the only way to a number
+ * gates that number behind a pointer, and an SVG with an `aria-label` on it
+ * says "revenue by month" and then says nothing else at all. This is the same
+ * data in the one form every assistive technology already reads, so the picture
+ * is free to be a picture.
+ *
+ * It is clipped rather than `display: none`, for the reason `srOnlyClasses`
+ * gives: the second one takes it off the accessibility tree along with the
+ * screen, which would leave the chart exactly as mute as before.
+ *
+ * Memoised, because it is a row for every category and none of it changes when
+ * the pointer or a key moves the active column, which re-renders the chart
+ * around it every time.
+ */
+declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, labelledBy, corner, categories, series, values, format, locale }: DataTableProps) => React.JSX.Element>;
 interface SurfaceProps extends Omit<PlBoxProps, 'children'> {
     legend: React.ReactNode;
     legendSide: NonNullable<PlassChartLegend['side']>;
@@ -284,6 +419,13 @@ export interface ChartMark {
     series: number;
     /** Its own place within that series. */
     index: number;
+    /**
+     * What its series is known by, from `entryKeys`, when the chart's series are
+     * not the frame's: a timeline's rows, which the frame is handed as its
+     * categories. Without it, the mark's series is known by its legend entry's
+     * key.
+     */
+    key?: string;
     /** Its centre, in pixels from the chart's top-left. */
     x: number;
     y: number;
@@ -345,6 +487,11 @@ export interface CartesianLayout {
     categoryValuePx: (value: number) => number;
     /** Where the baseline is along the value axis. */
     zeroPx: number;
+    /**
+     * How tall the drawing is, in pixels: the `height` asked for, or the height
+     * the box was measured at when that was a CSS length.
+     */
+    height: number;
     categories: readonly PlassChartCategory[];
     format: (value: number) => string;
     size: PlassSize;
@@ -360,6 +507,15 @@ export interface CartesianContext extends CartesianLayout {
     /** The one the pointer is on, or the one the arrow keys walked to. */
     activeMark: ChartMark | null;
 }
+/**
+ * One line of the summary a screen reader is handed: a series and its end, or
+ * a timeline's row and the stretch of time it covers.
+ */
+interface ChartSummaryEntry {
+    name: string;
+    /** What the series ended on, or `null` for a series that is all gaps. */
+    said: React.ReactNode | null;
+}
 interface CartesianProps extends CartesianChartProps {
     /**
      * Makes the category axis a second value axis instead of a row of columns.
@@ -380,10 +536,37 @@ interface CartesianProps extends CartesianChartProps {
      * @default 24
      */
     markRadius?: number;
-    /** The table under the chart, for a chart whose data is not a grid. */
-    table?: (id: string) => React.ReactNode;
+    /**
+     * The table under the chart, for a chart whose data is not a grid. Handed
+     * the id it is referred to by and what it is called.
+     */
+    table?: (id: string, name: ChartTableName) => React.ReactNode;
+    /**
+     * What a screen reader is handed in place of the drawing, for a chart whose
+     * series are not what it is about. A timeline hands the frame one stand-in
+     * series for its rows, and "each series and where it ended" would read that
+     * series out as a number nobody wrote. The reference lines still follow it.
+     */
+    summary?: readonly ChartSummaryEntry[];
+    /**
+     * How a value on the value axis is written wherever the frame writes one
+     * itself, in place of `format`: a reference line in the description, for
+     * one. A timeline's value axis is a calendar, and an instant written as a
+     * number is a count of milliseconds nobody reads.
+     */
+    writeValue?: (value: number) => string;
     /** The legend's swatch, for a chart whose marks are not all the same shape. */
     swatch?: (index: number, color: string) => React.ReactNode;
+    /**
+     * The marks are a stroke along the categories — a line, or the edge of an
+     * area that is not stacked — so a `dashed` series is drawn dashed, and its
+     * legend entry is a dashed rule rather than a square.
+     *
+     * Said by the chart rather than read off the series, because `dashed` does
+     * nothing on a bar or a stacked band, and a legend that promised a dashed line
+     * the plot never drew would be the one part of the chart that lied.
+     */
+    stroked?: boolean;
     /**
      * The value axis' scale, already worked out.
      *
@@ -400,10 +583,21 @@ interface CartesianProps extends CartesianChartProps {
      * for anything whose marks sit in a grid the frame already understands. A
      * Gantt's rows are the frame's *categories* and its marks are spans within
      * them, so there is no cell for the frame to look the answer up in.
+     *
+     * `index` and `category` are what a caller's own `tooltip.render` is handed,
+     * when the mark's own place is not them. A span sits in its row, which is the
+     * category, and the mark's `index` is the span's place along that row.
+     * `renderItems` is handed in place of `items` when the card's rows are not
+     * what a caller should be handed: the card names a span's row beside the
+     * swatch, and a caller who is already handed the row as `category` wants the
+     * span's own name there instead.
      */
     markTooltip?: (mark: ChartMark) => {
         heading: React.ReactNode;
         items: readonly ChartTooltipItem[];
+        index?: number;
+        category?: PlassChartCategory;
+        renderItems?: readonly ChartTooltipItem[];
     } | null;
     /** Bars, and only bars, run the other way. */
     horizontal?: boolean;
@@ -429,8 +623,11 @@ interface CartesianProps extends CartesianChartProps {
      * A line's marker gets away with it because a line is inset from both ends
      * anyway; a scatter places a mark wherever the number says, including exactly
      * on the corner.
+     *
+     * A function is handed the height the chart is drawn at, for a reserve that
+     * is a share of it.
      */
-    markInset?: number;
+    markInset?: number | ((height: number) => number);
     /** Draws the marks. */
     children: (context: CartesianContext) => React.ReactNode;
 }
@@ -442,6 +639,6 @@ interface CartesianProps extends CartesianChartProps {
  * function's business, and they are handed pixels rather than values so a
  * component never has to know which way round the axes are.
  */
-export declare function CartesianChart({ series, categories, xAxis, yAxis, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, table, swatch, scale: givenScale, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, children, ...box }: CartesianProps): React.JSX.Element;
-export { ChartDataTable, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSurface, ChartTooltipPanel, useMeasuredWidth, useVisibility };
-export type { Visibility };
+export declare function CartesianChart({ series, categories, xAxis, yAxis, reference, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset: markInsetProp, xScale, marks, markRadius, table, summary: givenSummary, writeValue, swatch, stroked, scale: givenScale, markTooltip, height, initialWidth, format, locale: localeProp, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, legend, tooltip, empty, size: sizeProp, variant, padded, className, children, ...box }: CartesianProps): React.JSX.Element;
+export { ChartDataTable, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSurface, ChartTooltipPanel, chartTableName, entryKeys, givenHeight, useMeasuredSize, useVisibility };
+export type { ChartSummaryEntry, ChartTableName, Visibility };

package/dist/internal/chart-frame.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as s,categoryAt as i,categoryCount as r,categoriesAreDates as o,categoryExtent as c,chartFontSizes as d,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,markerRadii as g,plotHeights as v,seriesColor as b,showsTick as y,textWidth as k,tickStride as w,toValues as M,timeScale as C,valueScale as N,writeChartValue as S}from"./chart.js";import{useDefaults as z}from"./defaults.js";import{usePlElementSize as P}from"../hooks/usePlElementSize.js";import{useLabels as A}from"./labels.js";import{cx as j,glassClasses as B,hasContent as W,metaTextClasses as _,srOnlyClasses as T,transitionClasses as $}from"./styles.js";const I=[];function useMeasuredWidth(e){return P(e)?.width??0}export const markTransitionClasses=["[transition:opacity_var(--plass-duration)_var(--plass-ease),","r_var(--plass-duration)_var(--plass-ease),","scale_var(--plass-duration)_var(--plass-ease)]"].join("");function useVisibility(e){const[t,l]=a.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[n,s]=a.useState(null),i=a.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]);return{visible:e.map((e,l)=>!t.has(l)),hovered:n,toggle:i,setHovered:s}}const L={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},F={start:"justify-start",center:"justify-center",end:"justify-end"};function ChartLegendBar({series:a,colors:n,options:s,visibility:i,size:r,values:o,swatch:c}){const d=!1!==s.interactive,u="left"===s.side||"right"===s.side;return e("ul",{className:j("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",u?"min-w-0 flex-col items-start":"",F[s.align??"center"],_[r]),children:a.map((a,s)=>{const r=i.visible[s],u=null!==i.hovered&&i.hovered!==s,h=a.name??`${s+1}`,m=r?n[s]:`color-mix(in oklab, ${n[s]} 40%, transparent)`,p=l(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(s,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${$}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),o?.[s]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:o[s]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":r,onClick:()=>i.toggle(s),onPointerEnter:()=>i.setHovered(s),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(s),onBlur:()=>i.setHovered(null),className:j("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",r?"":"text-(--plass-muted-fg) line-through",u?"opacity-55":""),children:p}):e("span",{className:j("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",r?"":"text-(--plass-muted-fg) line-through"),children:p})},a.name??s)})})}function ChartScaleLegend({steps:a,from:n,to:s,middle:i,align:r,vertical:o,size:c}){return e("div",{className:j("flex",o?"":F[r]),children:l("div",{className:j("grid grid-cols-[auto_auto_auto] items-center gap-x-2",_[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:j("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"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-(--plass-muted-fg)",children:s}),i?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:t,items:a,x:n,y:s,flip:i,size:r}){return l("div",{"data-plass-tooltip":"",className:j("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",B,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",_[r]),style:i?{right:`calc(100% - ${n}px + 10px)`,top:s}:{left:n+10,top:s},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:a.map(t=>l("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-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:s}){return e("span",{role:"status","aria-live":"polite",className:T,children:0===s.length?null:l(t,{children:[W(n)?l(t,{children:[n,", "]}):null,s.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}const R=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,corner:n,categories:s,series:i,values:r,format:o,locale:c}){return l("table",{id:t,className:T,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:n??""}),i.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},t.name??l))]})}),e("tbody",{children:s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),i.map((t,l)=>{const n=r[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":o(n.value)},t.name??l)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:s,table:i,className:r,...o}){return l(n,{...o,className:j("relative flex gap-3",L[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:s}),t,i]})}export function CartesianChart({series:n,categories:p,xAxis:y,yAxis:w,horizontal:P=!1,stacked:B=!1,includeZero:W=!0,bandRatio:$=1,inset:L=!1,headroom:F=0,markInset:V=0,xScale:E="band",marks:H,markRadius:D=24,table:X,swatch:Y,scale:Z,markTooltip:K,height:U,format:q,locale:G,label:J,legend:O,tooltip:Q,empty:ee,size:te,variant:le="ghost",padded:ae=!1,className:ne,children:se,...ie}){const re=z(),oe=te??re.size??"md",ce=G??re.locale,de=a.useRef(null),ue=useMeasuredWidth(de),he=A(),me=a.useId(),pe=a.useId(),fe=useVisibility(n),[xe,ge]=a.useState(null),[ve,be]=a.useState(null),[ye,ke]=a.useState(null),we=a.useCallback(e=>S(e,q,ce),[q,ce]),Me=a.useMemo(()=>M(n),[n]),Ce=a.useMemo(()=>n.map((e,t)=>b(e,t)),[n]),Ne=a.useMemo(()=>n.map(e=>!0===e.dashed),[n]),Se=r(n),ze=a.useMemo(()=>Array.from({length:Se},(e,t)=>i(t,p,Me)),[Se,p,Me]),Pe=Me.filter((e,t)=>fe.visible[t]),Ae=h(Pe,B),je=a.useMemo(()=>n.flatMap((e,t)=>{if(!fe.visible[t])return[];const l=[...Me[t]??[]].reverse().find(e=>null!==e.value),a=e.name??`${t+1}`;return void 0===l?[{name:a,said:null}]:[{name:a,said:l.label??we(l.value)}]}),[n,Me,fe.visible,we]),Be="number"==typeof U?U:void 0===U?v[oe]:null,We=d[oe],_e=w,Te=y,$e=Z??N(Ae,{min:_e?.min,max:_e?.max,tickCount:_e?.tickCount,includeZero:W}),Ie="value"===E?c(Pe,p):null,Le="value"===E&&o(Me,p),Fe="value"!==E?null:Le?C(Ie,{min:Te?.min,max:Te?.max,tickCount:Te?.tickCount}):N(Ie,{min:Te?.min,max:Te?.max,tickCount:Te?.tickCount,includeZero:!1}),Re=Fe&&"unit"in Fe?x(Fe.ticks,Fe.unit,ce):null,Ve=$e.ticks.map((e,t)=>_e?.tickFormat?String(_e.tickFormat(e,t)):we(e)),Ee=Te?.tickFormat,He=a.useMemo(()=>ze.map((e,t)=>Ee?String(Ee(e,t)):f(e,ce)),[ze,Ee,ce]),De=Fe?Fe.ticks.map((e,t)=>Ee?String(Ee(Le?new Date(e):e,t)):Re?.[t]??u(e,ce)):He,Xe=Ve.reduce((e,t)=>Math.max(e,k(t,We)),0),Ye=We+6,Ze=_e?.hidden?0:Xe+10+(_e?.label?Ye:0),Ke=(ue-(P?0:Ze)-16)/Math.max(1,Se),Ue=null!==Fe,qe=a.useMemo(()=>m(De,{horizontal:P,slot:Ke,fontSize:We,ticks:Ue}),[De,P,Ke,We,Ue]),Ge=a.useMemo(()=>qe.reduce((e,t)=>Math.max(e,k(t,We)),0),[qe,We]),Je=P?Te?.hidden?0:Ge+10+(Te?.label?Ye:0):Ze,Oe=P?_e?.hidden?0:We+12+(_e?.label?Ye:0):Te?.hidden?0:We+12+(Te?.label?Ye:0),Qe=(P?Te:_e)?.thickness??Je,et=(P?_e:Te)?.thickness??Oe,tt=(P||Fe?12:Math.max(8,qe.length?Ge/2:8))+V,lt=g[oe]+4+F+V,at=Be??0,nt={left:Qe+V,top:lt,width:Math.max(0,ue-Qe-V-tt),height:Math.max(0,at-lt-et-V)},st=P?nt.height:nt.width,it=s(L?Math.max(1,Se-1):Se,st,$),rt=a.useCallback(e=>L?Se<=1?st/2:st*e/(Se-1):it.centre(e),[L,Se,st,it]),ot=a.useCallback(e=>P?nt.left+$e.fraction(e)*nt.width:nt.top+(1-$e.fraction(e))*nt.height,[P,nt.left,nt.top,nt.width,nt.height,$e]),ct=a.useCallback((e,t)=>P?{x:ot(t),y:nt.top+rt(e)}:{x:nt.left+rt(e),y:ot(t)},[P,ot,rt,nt.left,nt.top]),dt=a.useCallback(e=>P?nt.top+(1-(Fe?.fraction(e)??0))*nt.height:nt.left+(Fe?.fraction(e)??0)*nt.width,[P,nt.left,nt.top,nt.width,nt.height,Fe]),ut=ot(Math.min(Math.max(0,$e.min),$e.max)),ht={plot:nt,values:Me,visible:fe.visible,colors:Ce,dashed:Ne,scale:$e,band:it,horizontal:P,valuePx:ot,categoryPx:rt,point:ct,categoryScale:Fe,categoryValuePx:dt,zeroPx:ut,categories:ze,format:we,size:oe},mt=H?H(ht):I,pt=!1===Q?{mode:"none"}:!0===Q||void 0===Q?{}:Q,ft=pt.mode??(H?"item":"index"),xt=null===ve?null:mt[ve]??null,gt=H?xt?xt.index:null:xe,vt=H?mt.length:Se,clearActive=()=>{ge(null),be(null),ke(null)},goTo=e=>{const t=null===e?null:Math.min(vt-1,Math.max(0,e));H?be(t):ge(t)},step=e=>{ke(null),goTo(((H?ve:xe)??(e>0?-1:vt))+e)},bt=null===gt?[]:n.flatMap((e,t)=>{if(!fe.visible[t]||xt&&xt.series!==t)return[];const l=Me[t]?.[gt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Ce[t],value:l.value,formatted:we(l.value),label:l.label}]:[]}),yt=xt&&K?K(xt):null,kt=yt?yt.items:"item"===ft&&bt.length>1&&null!==ye?[bt.reduce((e,t)=>Math.abs(ot(t.value??0)-ye)<Math.abs(ot(e.value??0)-ye)?t:e)]:bt,wt=xt?Me[xt.series]?.[xt.index]?.x??p?.[xt.index]??xt.index:void 0,Mt=xt?xt.x:P?ot(kt[0]?.value??0):nt.left+rt(gt??0),Ct=xt?xt.y:P?nt.top+rt(gt??0):nt.top,Nt=xt?(xt.x-nt.left)/Math.max(1,nt.width)>.6:(P?$e.fraction(kt[0]?.value??0):rt(gt??0)/Math.max(1,st))>.6,St=!1===O?{interactive:!1}:!0===O||void 0===O?{}:O,zt=!0===O||!1!==O&&n.length>1,Pt=St.side??"bottom",At={...ht,hovered:fe.hovered,activeIndex:gt,marks:mt,activeMark:xt},jt=0===Se||null===Ae||"value"===E&&null===Ie;return l(ChartSurface,{...ie,size:oe,variant:le,padded:ae,className:ne,legendSide:Pt,legend:zt?e(ChartLegendBar,{series:n,colors:Ce,options:St,visibility:fe,size:oe,swatch:Y,values:St.showValue&&null!==gt?n.map((e,t)=>{const l=Me[t]?.[gt]?.value;return null==l?void 0:we(l)}):void 0}):null,table:jt?null:X?.(me)??e(R,{id:me,caption:J,corner:Te?.label,categories:ze,series:n,values:Me,format:we,locale:ce}),children:[l("div",{ref:de,role:"img",tabIndex:jt?void 0:0,"aria-label":J??he.chart,"aria-describedby":jt?void 0:pe,onPointerMove:e=>{"none"!==ft&&(H?be(((e,t)=>{const l=de.current;if(!l||0===mt.length)return null;const a=l.getBoundingClientRect(),n=e-a.left,s=t-a.top;let i=null,r=1/0,o=1/0;return mt.forEach((e,t)=>{const l=Math.hypot(e.x-n,e.y-s),a=void 0===e.rx?Math.max(0,l-e.r):Math.hypot(Math.max(0,Math.abs(e.x-n)-e.rx),Math.max(0,Math.abs(e.y-s)-(e.ry??e.rx)));a<=D&&(a<r||a===r&&l<o)&&(r=a,o=l,i=t)}),i})(e.clientX,e.clientY)):ge(((e,t)=>{const l=de.current;if(!l||0===Se)return null;const a=l.getBoundingClientRect(),n=P?t-a.top-nt.top:e-a.left-nt.left;if(n<-it.step||n>st+it.step)return null;const s=L?Se<=1?0:Math.round(n/st*(Se-1)):Math.floor(n/it.step);return Math.min(Se-1,Math.max(0,s))})(e.clientX,e.clientY)),"item"!==ft||H||ke(((e,t)=>{const l=de.current;if(!l)return null;const a=l.getBoundingClientRect();return P?e-a.left:t-a.top})(e.clientX,e.clientY)))},onPointerLeave:clearActive,onKeyDown:"none"===ft?void 0:e=>{const t=P?"ArrowDown":"ArrowRight",l=P?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(vt-1);else{if("Escape"!==e.key)return;clearActive()}e.preventDefault()},onBlur:clearActive,className:j("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:Be??U},children:[jt?e("div",{className:j("flex h-full items-center justify-center text-(--plass-muted-fg)",_[oe]),children:ee??he.empty}):ue>0?l("svg",{width:ue,height:at||"100%",viewBox:`0 0 ${ue} ${at}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:nt,scale:$e,band:it,horizontal:P,inset:L,categoryPx:rt,valuePx:ot,tickTexts:Ve,categoryTexts:qe,categoryScale:Fe,categoryValuePx:dt,valueAxis:_e,categoryAxis:Te,fontSize:We,zeroPx:ut}),null===gt||H||"index"!==ft||!1===pt.crosshair?null:(()=>{const t=rt(gt);return e("line",P?{x1:nt.left,x2:nt.left+nt.width,y1:nt.top+t,y2:nt.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:nt.left+t,x2:nt.left+t,y1:nt.top,y2:nt.top+nt.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),se(At)]}):null,null!==gt&&kt.length>0&&"none"!==ft?pt.render?e("div",{className:"pointer-events-none absolute z-10",style:Nt?{right:`calc(100% - ${Mt}px + 10px)`,top:Ct}:{left:Mt+10,top:Ct},children:pt.render({index:gt,category:wt??ze[gt],items:kt})}):e(ChartTooltipPanel,{heading:yt?yt.heading:f(wt??ze[gt],ce),items:kt,x:Mt,y:Ct,flip:Nt,size:oe}):null]}),jt?null:e("span",{id:pe,className:T,children:je.map((e,n)=>l(a.Fragment,{children:[n>0?", ":null,null===e.said?e.name:l(t,{children:[e.name," ",e.said]})]},n))}),"none"===ft?null:e(ChartStatus,{heading:null===gt?void 0:yt?.heading??f(wt??ze[gt],ce),items:kt})]})}function ChartAxes({plot:a,scale:n,horizontal:s,categoryPx:i,valuePx:r,tickTexts:o,categoryTexts:c,categoryScale:d,categoryValuePx:u,valueAxis:h,categoryAxis:m,fontSize:f,zeroPx:x}){const g=!1!==h?.grid&&!h?.hidden,v=!m?.hidden&&(m?.grid??null!==d),categoryAlong=e=>d?u(d.ticks[e]):(s?a.top:a.left)+i(e),b=w(c.length,s?a.height:a.width,s?1.8*f:Math.max(...c.map(e=>k(e,f)),1)+12),M=w(n.ticks.length,s?a.width:a.height,s?Math.max(...o.map(e=>k(e,f)),1)+16:2*f),C=c.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,N=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,S=p(c.length,b,C,s?1.8*f:k(c[c.length-1]??"",f)),z=p(n.ticks.length,M,N,s?k(o[o.length-1]??"",f):1.6*f);return l("g",{children:[n.ticks.map((t,i)=>{const c=r(t),d=Math.abs(t)<1e-9;return l("g",{children:[g?e("line",s?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!y(i,n.ticks.length,M,z)?null:e("text",s?{x:c,y:a.top+a.height+f+6,textAnchor:0===i?"start":i===n.ticks.length-1?"end":"middle",fontSize:f,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:f,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[i]})]},t)}),m?.hidden?null:l(t,{children:[e("line",s?{x1:x,x2:x,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:x,y2:x,stroke:"var(--plass-chart-axis)",strokeWidth:1}),c.map((t,n)=>{const i=categoryAlong(n),r=y(n,c.length,b,S);return r||!s&&v?s?e("text",{x:a.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fontSize:f,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t},n):l("g",{children:[v?e("line",{x1:i,x2:i,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",{x:i,y:a.top+a.height+f+6,textAnchor:d?0===n?"start":n===c.length-1?"end":"middle":"middle",fontSize:f,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t}):null]},n):null})]}),h?.label?e("text",{x:s?a.left+a.width:a.left,y:s?a.top+a.height+2*f+12:a.top-8,textAnchor:s?"end":"start",fontSize:f,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!s?e("text",{x:a.left+a.width,y:a.top+a.height+2*f+12,textAnchor:"end",fontSize:f,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{R as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,useMeasuredWidth,useVisibility};
+"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as i,categoryAt as s,categoryCount as r,categoriesAreDates as o,categoryExtent as d,chartFontSizes as c,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,lineDash as g,lineWidths as v,logScale as y,markerRadii as b,plotHeights as k,resolveColor as w,seriesColor as M,autoTickAngle as N,showsTick as z,textWidth as C,tickAngleOf as S,tickStride as A,tiltedDepth as $,tiltedPitch as P,tiltedRoom as j,tiltedStep as B,toValues as T,truncate as W,timeScale as _,valueScale as I,writeChartValue as D}from"./chart.js";import{useDefaults as E,useLocale as F}from"./defaults.js";import{usePlElementSize as K}from"../hooks/usePlElementSize.js";import{useLabels as H}from"./labels.js";import{layoutBox as L}from"./layout-box.js";import{textOf as R}from"./text.js";import{cx as V,glassClasses as Z,hasContent as O,metaTextClasses as U,srOnlyClasses as X,transitionClasses as Y}from"./styles.js";const q=[];function useMeasuredSize(e,t){const l=K(e);if(null!==l)return{width:l.width,height:l.height,guessed:!1};const a=void 0!==t&&Number.isFinite(t)&&t>0?t:0;return{width:a,height:null,guessed:a>0}}function givenHeight(e,t){return"number"==typeof e?e:void 0===e?t:null}export const markTransitionClasses=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease),r_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");function entryKeys(e){const t=new Map,l=new Map;return e.map((e,a)=>{const n=e.id??null;if(null!==n){const e=l.get(n)??0;return l.set(n,e+1),`${n}#${e}@id`}const i=e.name??null;if(null===i)return String(a);const s=t.get(i)??0;return t.set(i,s+1),`${i}#${s}`})}function useVisibility(e,t){const l=entryKeys(e),[n,i]=a.useState(()=>{const t=new Set;return e.forEach((e,a)=>{e.hidden&&t.add(l[a])}),t});[...n].some(e=>!l.includes(e))&&i(new Set([...n].filter(e=>l.includes(e))));const[s,r]=a.useState(null),o=null!==s&&t?l.indexOf(s):-1;return null!==s&&-1===o&&r(null),{keys:l,visible:l.map(e=>!n.has(e)),hovered:-1===o?null:o,toggle:e=>{const t=l[e];void 0!==t&&i(e=>{const l=new Set(e);return l.has(t)?l.delete(t):l.add(t),l})},setHovered:e=>r(null===e?null:l[e]??null)}}const G={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},J={start:"justify-start",center:"justify-center",end:"justify-end"};function DashedRule({ink:t,size:l}){const a=v[l],n=16+a;return e("svg",{"aria-hidden":"true",width:n,height:10,viewBox:`0 0 ${n} 10`,className:"block shrink-0",children:e("line",{x1:a/2,x2:n-a/2,y1:5,y2:5,stroke:t,strokeWidth:a,strokeDasharray:g,strokeLinecap:"round"})})}function ChartLegendBar({series:n,colors:i,options:s,visibility:r,size:o,values:d,swatch:c,dashed:u}){const h=!1!==s.interactive,m="left"===s.side||"right"===s.side,p=H(),[f,x]=a.useState(!1),g=s.maxEntries,v=void 0!==g&&g>0&&n.length>g&&!f,y=v?n.slice(0,g):n,b=n.length-y.length,k=entryKeys(n);return l("ul",{className:V("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",m?"min-w-0 flex-col items-start":"",J[s.align??"center"],U[o]),children:[y.map((a,n)=>{const s=r.visible[n],m=null!==r.hovered&&r.hovered!==n,p=a.name??`${n+1}`,f=i[n],x=s?m?"opacity-55":"":"opacity-40",g=l(t,{children:[c?e("span",{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(n,f)}):u?.[n]?e(DashedRule,{ink:f,size:o}):e("span",{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${Y}`,style:{backgroundColor:f}}),e("span",{className:"min-w-0 truncate",children:p}),d?.[n]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:d[n]}):null]});return e("li",{className:"min-w-0",children:h?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(n),onPointerEnter:()=>r.setHovered(n),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(n),onBlur:()=>r.setHovered(null),className:V("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",s?"":"line-through",x),children:g}):e("span",{className:V("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",s?"":"line-through",x),children:g})},k[n])}),v||f?e("li",{className:"min-w-0",children:e("button",{type:"button","aria-expanded":f,onClick:()=>x(e=>!e),className:V("flex cursor-pointer items-center rounded-(--plass-radius-xs)","px-1 py-0.5 font-medium text-(--plass-muted-fg)","[transition-property:background-color,color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),children:f?p.chartFewer:p.chartMore(b)})}):null]})}function ChartScaleLegend({steps:a,from:n,to:i,middle:s,align:r,vertical:o,size:d}){return e("div",{className:V("flex",o?"":J[r]),children:l("div",{className:V("grid grid-cols-[auto_auto_auto] items-center gap-x-2",U[d]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:V("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"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-(--plass-muted-fg)",children:i}),s?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:s}),e("span",{})]}):null]})})}function itemText(e){const a=e.label??e.formatted;return void 0===e.aside?a:l(t,{children:[a," (",e.aside,")"]})}function ChartTooltipPanel({heading:t,items:a,x:n,y:i,flip:s,size:r}){return l("div",{"data-plass-tooltip":"",className:V("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",Z,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",U[r]),style:s?{right:`calc(100% - ${n}px + 10px)`,top:i}:{left:n+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:a.map(t=>l("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-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:itemText(t)})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:i}){return e("span",{role:"status","aria-live":"polite",className:X,children:0===i.length?null:l(t,{children:[O(n)?l(t,{children:[n,", "]}):null,i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,itemText(e)]},e.seriesIndex))]})})}function chartTableName({label:e,"aria-label":t,"aria-labelledby":l}){return l?{labelledBy:l}:{caption:t??e}}const Q=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,labelledBy:n,corner:i,categories:s,series:r,values:o,format:d,locale:c}){const u=entryKeys(r);return l("table",{id:t,className:X,"aria-labelledby":n,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:i??""}),r.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},u[l]))]})}),e("tbody",{children:s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),u.map((t,l)=>{const n=o[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":d(n.value)},t)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:i,table:s,className:r,...o}){return l(n,{...o,className:V("relative flex gap-3",G[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,s]})}function markKey(e,t){return`${e.key??t[e.series]??e.series}:${e.index}`}export function CartesianChart({series:n,categories:p,xAxis:g,yAxis:v,reference:w,horizontal:z=!1,stacked:A=!1,includeZero:P=!0,bandRatio:K=1,inset:Z=!1,headroom:O=0,markInset:Y=0,xScale:G="band",marks:J,markRadius:ee=24,table:te,summary:le,writeValue:ae,swatch:ne,stroked:ie=!1,scale:se,markTooltip:re,height:oe,initialWidth:de,format:ce,locale:ue,label:he,"aria-label":me,"aria-labelledby":pe,"aria-describedby":fe,legend:xe,tooltip:ge,empty:ve,size:ye,variant:be="ghost",padded:ke=!1,className:we,children:Me,...Ne}){const ze=E(),Ce=ye??ze.size??"md",Se=F(ue),Ae=a.useRef(null),{width:$e,height:Pe,guessed:je}=useMeasuredSize(Ae,de),Be=a.useRef({key:"",across:1,down:1}),Te=H(),We=a.useId(),_e=a.useId(),Ie=a.useId(),De=!1===xe?{interactive:!1}:!0===xe||void 0===xe?{}:xe,Ee=!0===xe||!1!==xe&&n.length>1,Fe=De.side??"bottom",Ke=useVisibility(n,Ee&&!1!==De.interactive),[He,Le]=a.useState(null),[Re,Ve]=a.useState(null),[Ze,Oe]=a.useState(null),Ue=a.useCallback(e=>ae?ae(e):D(e,ce,Se),[ae,ce,Se]),Xe=a.useMemo(()=>T(n),[n]),Ye=a.useMemo(()=>n.map((e,t)=>M(e,t)),[n]),qe=a.useMemo(()=>n.map(e=>!0===e.dashed),[n]),Ge=r(n),Je=a.useMemo(()=>Array.from({length:Ge},(e,t)=>s(t,p,Xe)),[Ge,p,Xe]),Qe=Xe.filter((e,t)=>Ke.visible[t]),et=h(Qe,A),tt=a.useMemo(()=>le??n.flatMap((e,t)=>{if(!Ke.visible[t])return[];const l=[...Xe[t]??[]].reverse().find(e=>null!==e.value),a=e.name??`${t+1}`;return void 0===l?[{name:a,said:null}]:[{name:a,said:l.label??Ue(l.value)}]}),[le,n,Xe,Ke.visible,Ue]),lt=givenHeight(oe,k[Ce]),at=c[Ce],nt=v,it=g,st=a.useMemo(()=>void 0===w?[]:Array.isArray(w)?w:[w],[w]),rt=se??("log"===nt?.scale?y(et,{min:nt.min,max:nt.max,tickCount:nt.tickCount}):I(et,{min:nt?.min,max:nt?.max,tickCount:nt?.tickCount,includeZero:P})),ot="value"===G?d(Qe,p):null,dt="value"===G&&o(Xe,p),ct="value"!==G?null:dt?_(ot,{min:it?.min,max:it?.max,tickCount:it?.tickCount}):"log"===it?.scale?y(ot,{min:it.min,max:it.max,tickCount:it.tickCount}):I(ot,{min:it?.min,max:it?.max,tickCount:it?.tickCount,includeZero:!1}),ut=ct&&"unit"in ct?x(ct.ticks,ct.unit,Se):null,ht=rt.ticks.map((e,t)=>nt?.tickFormat?R(nt.tickFormat(e,t)):Ue(e)),mt=it?.tickFormat,pt=a.useMemo(()=>Je.map((e,t)=>mt?R(mt(e,t)):f(e,Se)),[Je,mt,Se]),ft=ct?ct.ticks.map((e,t)=>mt?R(mt(dt?new Date(e):e,t)):ut?.[t]??u(e,Se)):pt,xt=ht.reduce((e,t)=>Math.max(e,C(t,at)),0),gt=at+6,vt=nt?.hidden?0:xt+10+(nt?.label?gt:0),yt=($e-(z?0:vt)-16)/Math.max(1,Ge),bt=lt??Pe??0,kt="function"==typeof Y?Y(bt):Y,wt=null!==ct,Mt=it?.tickAngle,Nt=z?0:"auto"===Mt?wt?0:N(ft,{slot:yt,fontSize:at}):S(Mt),zt=0!==Nt&&!it?.hidden,Ct=Math.max(3*at,.4*bt),St=a.useMemo(()=>zt?ft.map(e=>W(e,j(Ct,Nt,at),at)):m(ft,{horizontal:z,slot:yt,fontSize:at,ticks:wt}),[ft,zt,Ct,Nt,z,yt,at,wt]),At=a.useMemo(()=>St.reduce((e,t)=>Math.max(e,C(t,at)),0),[St,at]),$t=zt?B(At,Nt,at)+4:0,Pt=z?it?.hidden?0:At+10+(it?.label?gt:0):vt,jt=z?nt?.hidden?0:at+12+(nt?.label?gt:0):it?.hidden?0:(zt?$(At,Nt,at)+14:at+12)+(it?.label?gt:0),Bt=Math.max((z?it:nt)?.thickness??Pt,zt&&Nt<0?$t:0),Tt=(z?nt:it)?.thickness??jt,Wt=(z?12:zt?Nt>0?$t:12:ct?12:Math.max(8,St.length?At/2:8))+kt,_t=b[Ce]+4+O+kt,It={left:Bt+kt,top:_t,width:Math.max(0,$e-Bt-kt-Wt),height:Math.max(0,bt-_t-Tt-kt)},Dt=z?It.height:It.width,Et=i(Z?Math.max(1,Ge-1):Ge,Dt,K),Ft=a.useCallback(e=>Z?Ge<=1?Dt/2:Dt*e/(Ge-1):Et.centre(e),[Z,Ge,Dt,Et]),Kt=a.useCallback(e=>z?It.left+rt.fraction(e)*It.width:It.top+(1-rt.fraction(e))*It.height,[z,It.left,It.top,It.width,It.height,rt]),Ht=a.useCallback((e,t)=>z?{x:Kt(t),y:It.top+Ft(e)}:{x:It.left+Ft(e),y:Kt(t)},[z,Kt,Ft,It.left,It.top]),Lt=a.useCallback(e=>z?It.top+(1-(ct?.fraction(e)??0))*It.height:It.left+(ct?.fraction(e)??0)*It.width,[z,It.left,It.top,It.width,It.height,ct]),Rt=Kt(Math.min(Math.max(0,rt.min),rt.max)),Vt={plot:It,values:Xe,visible:Ke.visible,colors:Ye,dashed:qe,scale:rt,band:Et,horizontal:z,valuePx:Kt,categoryPx:Ft,point:Ht,categoryScale:ct,categoryValuePx:Lt,zeroPx:Rt,height:bt,categories:Je,format:Ue,size:Ce},Zt=!1===ge?{mode:"none"}:!0===ge||void 0===ge?{}:ge,Ot=Zt.mode??(J?"item":"index"),Ut=J??("nearest"===Ot?e=>function gridMarks(e,t){const l=[],a=b[e.size],n=[];return e.values.forEach((i,s)=>{const r=i.map((e,t)=>n[t]??0);t&&e.visible[s]&&i.forEach((e,t)=>{n[t]=(n[t]??0)+(e.value??0)}),e.visible[s]&&i.forEach((n,i)=>{if(null===n.value)return;const o=e.point(i,t?r[i]+n.value:n.value);l.push({series:s,index:i,x:o.x,y:o.y,r:a})})}),l}(e,A):void 0),Xt=Ut?Ut(Vt):q,Yt=null===Re?-1:Xt.findIndex(e=>markKey(e,Ke.keys)===Re),qt=-1===Yt?null:Xt[Yt],Gt=Ut?qt?qt.index:null:He,Jt=Ut?Xt.length:Ge,clearActive=()=>{Le(null),Ve(null),Oe(null)};(null!==He&&He>=Ge||null!==Re&&!qt)&&clearActive();const goTo=e=>{const t=null===e?null:Math.min(Jt-1,Math.max(0,e));if(Oe(null),Ut){const e=null===t?void 0:Xt[t];Ve(e?markKey(e,Ke.keys):null)}else Le(t)},step=e=>{goTo(((Ut?-1===Yt?null:Yt:He)??(e>0?-1:Jt))+e)},Qt=null===Gt?[]:n.flatMap((e,t)=>{if(!Ke.visible[t]||qt&&qt.series!==t)return[];const l=Xe[t]?.[Gt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Ye[t],value:l.value,formatted:Ue(l.value),label:l.label}]:[]}),el=qt&&re?re(qt):null,tl=el?el.items:"item"===Ot&&Qt.length>1&&null!==Ze?[Qt.reduce((e,t)=>Math.abs(Kt(t.value??0)-Ze)<Math.abs(Kt(e.value??0)-Ze)?t:e)]:Qt,ll=qt?Xe[qt.series]?.[qt.index]?.x??p?.[qt.index]??qt.index:void 0,al=qt?qt.x:z?Kt(tl[0]?.value??0):It.left+Ft(Gt??0),nl=qt?qt.y:z?It.top+Ft(Gt??0):It.top,il=qt?(qt.x-It.left)/Math.max(1,It.width)>.6:(z?rt.fraction(tl[0]?.value??0):Ft(Gt??0)/Math.max(1,Dt))>.6,sl={...Vt,hovered:Ke.hovered,activeIndex:Gt,marks:Xt,activeMark:qt},rl=0===Ge||null===et||"value"===G&&null===ot,ol=chartTableName({label:he,"aria-label":me,"aria-labelledby":pe});return l(ChartSurface,{...Ne,size:Ce,variant:be,padded:ke,className:we,legendSide:Fe,legend:Ee?e(ChartLegendBar,{series:n,colors:Ye,options:De,visibility:Ke,size:Ce,swatch:ne,dashed:ie?qe:void 0,values:De.showValue&&null!==Gt?n.map((e,t)=>{const l=Xe[t]?.[Gt]?.value;return null==l?void 0:Ue(l)}):void 0}):null,table:rl?null:te?.(We,ol)??e(Q,{id:We,...ol,corner:it?.label,categories:Je,series:n,values:Xe,format:Ue,locale:Se}),children:[l("div",{ref:Ae,role:"img",tabIndex:rl?void 0:0,"aria-labelledby":pe,"aria-label":me??he??Te.chart,"aria-describedby":V(fe,rl?Ie:_e),onPointerMove:e=>{if("none"===Ot)return;const t=((e,t)=>{const l=Ae.current;if(!l)return null;const a=l.getBoundingClientRect(),n=`${a.width} ${a.height} ${$e} ${Pe}`;let i=Be.current;return i.key!==n&&(i={key:n,across:L(l,!0).perPixel,down:L(l,!1).perPixel},Be.current=i),{x:(e-a.left)*i.across,y:(t-a.top)*i.down}})(e.clientX,e.clientY);if(Ut){const e=t?((e,t)=>{if(0===Xt.length)return null;let l=null,a=1/0,n=1/0;return Xt.forEach((i,s)=>{const r=Math.hypot(i.x-e,i.y-t),o=void 0===i.rx?Math.max(0,r-i.r):Math.hypot(Math.max(0,Math.abs(i.x-e)-i.rx),Math.max(0,Math.abs(i.y-t)-(i.ry??i.rx)));o<=ee&&(o<a||o===a&&r<n)&&(a=o,n=r,l=s)}),l})(t.x,t.y):null;Ve(null===e?null:markKey(Xt[e],Ke.keys))}else Le(t?((e,t)=>{if(0===Ge)return null;const l=z?t-It.top:e-It.left;if(l<-Et.step||l>Dt+Et.step)return null;const a=Z?Ge<=1?0:Math.round(l/Dt*(Ge-1)):Math.floor(l/Et.step);return Math.min(Ge-1,Math.max(0,a))})(t.x,t.y):null);var l,a;"item"!==Ot||Ut||Oe(t?(l=t.x,a=t.y,z?l:a):null)},onPointerLeave:clearActive,onKeyDown:"none"===Ot?void 0:e=>{const t=z?"ArrowDown":"ArrowRight",l=z?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(Jt-1);else{if("Escape"!==e.key||null===He&&null===Re)return;clearActive(),e.stopPropagation()}e.preventDefault()},onBlur:clearActive,className:V("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",je&&"overflow-hidden"),style:{height:lt??oe},children:[rl?e("div",{id:Ie,className:V("flex h-full items-center justify-center text-(--plass-muted-fg)",U[Ce]),children:ve??Te.empty}):$e>0&&(null!==lt||bt>0)?l("svg",{width:$e,height:bt||"100%",viewBox:`0 0 ${$e} ${bt}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:It,scale:rt,band:Et,horizontal:z,inset:Z,categoryPx:Ft,valuePx:Kt,tickTexts:ht,categoryTexts:St,categoryScale:ct,categoryValuePx:Lt,valueAxis:nt,categoryAxis:it,references:st,fontSize:at,zeroPx:Rt,tickAngle:zt?Nt:0,tickBand:zt?8+$(At,Nt,at):at+6}),null===Gt||Ut||"index"!==Ot||!1===Zt.crosshair?null:(()=>{const t=Ft(Gt);return e("line",z?{x1:It.left,x2:It.left+It.width,y1:It.top+t,y2:It.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:It.left+t,x2:It.left+t,y1:It.top,y2:It.top+It.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),Me(sl)]}):null,null!==Gt&&tl.length>0&&"none"!==Ot?Zt.render?e("div",{className:"pointer-events-none absolute z-10",style:il?{right:`calc(100% - ${al}px + 10px)`,top:nl}:{left:al+10,top:nl},children:Zt.render({index:el?.index??Gt,category:el?.category??ll??Je[Gt],items:el?.renderItems??tl})}):e(ChartTooltipPanel,{heading:el?el.heading:f(ll??Je[Gt],Se),items:tl,x:al,y:nl,flip:il,size:Ce}):null]}),rl?null:l("span",{id:_e,className:X,children:[tt.map((e,n)=>l(a.Fragment,{children:[n>0?", ":null,null===e.said?e.name:l(t,{children:[e.name," ",e.said]})]},n)),st.map((e,t)=>l(a.Fragment,{children:[", ",e.label?`${e.label} ${Ue(e.value)}`:Ue(e.value)]},`reference-${t}`))]}),"none"===Ot?null:e(ChartStatus,{heading:null===Gt?void 0:el?.heading??f(ll??Je[Gt],Se),items:tl})]})}function ChartAxes({plot:a,scale:n,horizontal:i,categoryPx:s,valuePx:r,tickTexts:o,categoryTexts:d,categoryScale:c,categoryValuePx:u,valueAxis:h,categoryAxis:m,references:f,fontSize:x,zeroPx:v,tickAngle:y,tickBand:b}){const k=!1!==h?.grid&&!h?.hidden,M=!m?.hidden&&(m?.grid??null!==c),categoryAlong=e=>c?u(c.ticks[e]):(i?a.top:a.left)+s(e),N=Math.max(...d.map(e=>C(e,x)),1),S=y?P(y,x):N+12,$=A(d.length,i?a.height:a.width,i?1.8*x:S),j=A(n.ticks.length,i?a.width:a.height,i?Math.max(...o.map(e=>C(e,x)),1)+16:2*x),B=d.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,T=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,W=d[d.length-1]??"",_=0!==y||p(d.length,$,B,i?1.8*x:C(W,x)),I=p(n.ticks.length,j,T,i?C(o[o.length-1]??"",x):1.6*x);return l("g",{children:[n.ticks.map((t,s)=>{const d=r(t),c=Math.abs(t)<1e-9;return l("g",{children:[k?e("line",i?{x1:d,x2:d,y1:a.top,y2:a.top+a.height,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:d,y2:d,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!z(s,n.ticks.length,j,I)?null:e("text",i?{x:d,y:a.top+a.height+x+6,textAnchor:0===s?"start":s===n.ticks.length-1?"end":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]}:{x:a.left-8,y:d,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]})]},t)}),m?.hidden?null:l(t,{children:[e("line",i?{x1:v,x2:v,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:v,y2:v,stroke:"var(--plass-chart-axis)",strokeWidth:1}),d.map((t,n)=>{const s=categoryAlong(n),r=z(n,d.length,$,_);if(!r&&(i||!M))return null;const o=s,u=a.top+a.height+8+x/2;return i?e("text",{x:a.left-8,y:s,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t},n):l("g",{children:[M?e("line",{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",y?{x:o,y:u,transform:`rotate(${y} ${o} ${u})`,textAnchor:y<0?"end":"start",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}:{x:s,y:a.top+a.height+x+6,textAnchor:c?0===n?"start":n===d.length-1?"end":"middle":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}):null]},n)})]}),f.map((t,n)=>{const s=r(t.value),o=t.color?w(t.color):"var(--plass-muted-fg)",d=!1===t.dashed?void 0:g;return l("g",{children:[e("line",i?{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:o,strokeWidth:1,strokeDasharray:d}:{x1:a.left,x2:a.left+a.width,y1:s,y2:s,stroke:o,strokeWidth:1,strokeDasharray:d}),t.label?e("text",{x:i?s:a.left+a.width,y:i?a.top+x:s-4,textAnchor:i?"middle":"end",fontSize:x,fontWeight:500,fill:o,children:t.label}):null]},n)}),h?.label?e("text",{x:i?a.left+a.width:a.left,y:i?a.top+a.height+b+x+6:a.top-8,textAnchor:i?"end":"start",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!i?e("text",{x:a.left+a.width,y:a.top+a.height+b+x+6,textAnchor:"end",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{Q as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,chartTableName,entryKeys,givenHeight,useMeasuredSize,useVisibility};

package/dist/internal/chart-line.d.ts

@@ -14,7 +14,7 @@
  */
 import * as React from 'react';
 import type { CartesianContext } from './chart-frame.js';
-import type { PlassChartCurve, PlassChartValueLabels } from '../types.js';
+import type { PlassChartCurve, PlassChartLabelColor, PlassChartNulls, PlassChartValueLabels } from '../types.js';
 /** Whether a point gets a dot on it. */
 export type ChartMarkers = 'none' | 'auto' | 'all';
 export interface LineSeriesProps {
@@ -26,12 +26,17 @@ export interface LineSeriesProps {
     stacked: boolean;
     markers: ChartMarkers;
     valueLabels: PlassChartValueLabels;
+    /** What colour those labels are written in. */
+    valueLabelColor: PlassChartLabelColor;
     /**
-     * Bridges a gap instead of breaking at it. Off by default, and it should
-     * stay off unless the caller knows the gap is an artefact of collection
-     * rather than a month where nothing happened.
+     * What a gap does to the line.
+     *
+     * Only `connect` reaches this far. `gap` is what the path builder does when
+     * it is handed the `null`s, and `zero` was settled before the frame was ever
+     * given the data — see `zeroNulls`, which is why a zeroed gap moves the axis
+     * and fills the table row as well as the line.
      */
-    connectNulls: boolean;
+    nulls: PlassChartNulls;
     /**
      * Fades the line from a paler step of its own hue at the old end to the full
      * colour at the new one. One hue throughout — a stroke that changes hue along
@@ -41,4 +46,4 @@ export interface LineSeriesProps {
     /** Unique per chart instance, so two charts' gradient defs cannot collide. */
     idPrefix: string;
 }
-export declare function LineSeries({ context, curve, filled, stacked, markers, valueLabels, connectNulls, gradient, idPrefix }: LineSeriesProps): React.JSX.Element;
+export declare function LineSeries({ context, curve, filled, stacked, markers, valueLabels, valueLabelColor, nulls, gradient, idPrefix }: LineSeriesProps): React.JSX.Element;

package/dist/internal/chart-line.js

@@ -1 +1 @@
-import{jsx as l,jsxs as e}from"react/jsx-runtime";import{areaPath as r,chartFontSizes as t,dimmedByHover as o,labelledPoints as a,linePath as n,lineDash as s,lineWidths as i,markerRadii as c,markGap as u}from"./chart.js";import{markTransitionClasses as f}from"./chart-frame.js";export function LineSeries({context:p,curve:d,filled:m,stacked:x,markers:h,valueLabels:k,connectNulls:v,gradient:$,idPrefix:y}){const{values:b,visible:g,colors:j,dashed:C,hovered:L,activeIndex:N,plot:W,point:z,zeroPx:B,size:E,format:G}=p,P=i[E],S=c[E],w=g.indexOf(!0),A=[],D=[];return b.forEach((l,e)=>{const r=l.map((l,e)=>D[e]??0);A.push(r),x&&g[e]&&l.forEach((l,e)=>{D[e]=(D[e]??0)+(l.value??0)})}),e("g",{children:[e("defs",{children:[$?j.map((r,t)=>e("linearGradient",{id:`${y}-stroke-${t}`,x1:"0",y1:"0",x2:"1",y2:"0",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 45%, transparent)`}),l("stop",{offset:"100%",stopColor:r})]},`stroke-${t}`)):null,m&&!x?j.map((r,t)=>e("linearGradient",{id:`${y}-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]}),b.map((i,c)=>{if(!g[c])return null;const p=j[c],b=o(L,c,g),D=i.map((l,e)=>{if(null===l.value)return null;const r=x?A[c][e]+l.value:l.value;return z(e,r)}),I=v?D.filter(Boolean):D,O=i.map((l,e)=>null===l.value?null:x?z(e,A[c][e]):{x:z(e,l.value).x,y:B}),q=m&&x,F=a(i,k);return e("g",{opacity:b?.28:1,className:f,children:[m?l("path",{d:r(I,v?O.filter(Boolean):O,d),fill:x?`color-mix(in oklab, ${p} 70%, transparent)`:`url(#${y}-fill-${c})`,stroke:"none"}):null,q&&c!==w?l("path",{d:n(v?O.filter(Boolean):O,d),fill:"none",stroke:"var(--plass-chart-gap)",strokeWidth:u}):null,q?null:l("path",{d:n(I,d),fill:"none",stroke:$?`url(#${y}-stroke-${c})`:p,strokeWidth:P,strokeDasharray:C[c]?s:void 0,strokeLinecap:"round",strokeLinejoin:"round"}),D.map((e,r)=>e&&("all"===h||"auto"===h&&i.length<=14||r===N)?l("circle",{cx:e.x,cy:e.y,r:r===N?S+1:S,fill:i[r].color??p,stroke:"var(--plass-chart-gap)",strokeWidth:u,className:f},r):null),"none"===k?null:D.map((e,r)=>{const o=i[r].value;return e&&null!==o&&F(r)?l("text",{x:e.x,y:e.y-S-5,textAnchor:e.x>W.left+W.width-24?"end":e.x<W.left+24?"start":"middle",fontSize:t[E],fontWeight:500,fill:"var(--plass-fg)",className:"tabular-nums",children:i[r].label??G(o)},`label-${r}`):null})]},c)})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{areaPath as l,chartFontSizes as a,dimmedByHover as o,labelledPoints as n,linePath as s,lineDash as i,lineWidths as c,markerRadii as u,markGap as m}from"./chart.js";import{markTransitionClasses as p}from"./chart-frame.js";import{usePrefersReducedMotion as d}from"./media.js";export function LineSeries({context:f,curve:h,filled:x,stacked:k,markers:y,valueLabels:g,valueLabelColor:v,nulls:$,gradient:b,idPrefix:S}){const{values:j,visible:w,colors:N,dashed:C,hovered:L,activeIndex:W,plot:z,point:B,zeroPx:E,size:G,format:M}=f,O=c[G],P=u[G],T=w.indexOf(!0),U=[],A=[];j.forEach((e,t)=>{const r=e.map((e,t)=>A[t]??0);U.push(r),k&&w[t]&&e.forEach((e,t)=>{A[t]=(A[t]??0)+(e.value??0)})});const D=d(),I=j.map((e,t)=>o(L,t,w)),[q,F]=r.useState(()=>new Set),[H,J]=r.useState(I);(I.length!==H.length||I.some((e,t)=>e!==H[t]))&&(J(I),F(e=>new Set(I.flatMap((t,r)=>t||D||!w[r]||!0!==H[r]&&!e.has(r)?[]:[r]))));const K=j.map((e,t)=>{if(!w[t])return null;const r=e.map((e,r)=>{if(null===e.value)return null;const l=k?U[t][r]+e.value:e.value;return B(r,l)}),l=r.flatMap((t,r)=>t&&("all"===y||"auto"===y&&e.length<=14||r===W)?[{...t,category:r,r:r===W?P+1:P}]:[]);return{color:N[t],dimmed:I[t],tops:r,marks:l,cut:(I[t]||q.has(t))&&l.length>0}});return t("g",{children:[t("defs",{children:[b?N.map((r,l)=>t("linearGradient",{id:`${S}-stroke-${l}`,x1:"0",y1:"0",x2:"1",y2:"0",children:[e("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 45%, transparent)`}),e("stop",{offset:"100%",stopColor:r})]},`stroke-${l}`)):null,x&&!k?N.map((r,l)=>t("linearGradient",{id:`${S}-fill-${l}`,x1:"0",y1:"0",x2:"0",y2:"1",children:[e("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${r} 28%, transparent)`}),e("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${r} 2%, transparent)`})]},`fill-${l}`)):null,K.map((r,l)=>r?.cut?t("mask",{id:`${S}-cut-${l}`,maskUnits:"userSpaceOnUse",x:"-50%",y:"-50%",width:"200%",height:"200%",children:[e("rect",{x:"-50%",y:"-50%",width:"200%",height:"200%",fill:"white"}),r.marks.map(t=>e("circle",{cx:t.x,cy:t.y,r:t.r+m/2,fill:"black",className:p},t.category))]},`cut-${l}`):null)]}),j.map((r,a)=>{const o=K[a];if(!o)return null;const{color:n,tops:c}=o,u="connect"===$,d=u?c.filter(Boolean):c,f=r.map((e,t)=>null===e.value?null:k?B(t,U[a][t]):{x:B(t,e.value).x,y:E}),y=x&&k;return t("g",{opacity:o.dimmed?.28:1,mask:o.cut?`url(#${S}-cut-${a})`:void 0,className:p,onTransitionEnd:q.has(a)?e=>{e.target===e.currentTarget&&"opacity"===e.propertyName&&F(e=>new Set([...e].filter(e=>e!==a)))}:void 0,children:[x?e("path",{d:l(d,u?f.filter(Boolean):f,h),fill:k?`color-mix(in oklab, ${n} 70%, transparent)`:`url(#${S}-fill-${a})`,stroke:"none"}):null,y&&a!==T?e("path",{d:s(u?f.filter(Boolean):f,h),fill:"none",stroke:"var(--plass-chart-gap)",strokeWidth:m}):null,y?null:e("path",{d:s(d,h),fill:"none",stroke:b?`url(#${S}-stroke-${a})`:n,strokeWidth:O,strokeDasharray:C[a]?i:void 0,strokeLinecap:"round",strokeLinejoin:"round"})]},a)}),K.map((t,r)=>t&&t.marks.length>0?e("g",{opacity:t.dimmed?.28:1,className:p,children:t.marks.map(l=>e("circle",{cx:l.x,cy:l.y,r:l.r,fill:j[r][l.category].color??t.color,stroke:"var(--plass-chart-gap)",strokeWidth:m,className:p},l.category))},r):null),"none"===g?null:K.map((t,r)=>{if(!t)return null;const l=j[r],o=n(l,g);return e("g",{opacity:t.dimmed?.28:1,className:p,children:t.tops.map((r,n)=>{const s=l[n].value;return r&&null!==s&&o(n)?e("text",{x:r.x,y:r.y-P-5,textAnchor:r.x>z.left+z.width-24?"end":r.x<z.left+24?"start":"middle",fontSize:a[G],fontWeight:600,fill:"ink"===v?"var(--plass-fg)":l[n].color??t.color,className:"tabular-nums",children:l[n].label??M(s)},n):null})},r)})]})}