@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/charts/ChartPrimitives.d.ts

@@ -1,305 +1,50 @@
-/**
- * Outer container. Receives the measurement ref.
- *
- * `min-width: 0` is load-bearing rather than cosmetic — without it a chart in a
- * flex row feeds its min-content width back into the ResizeObserver and the
- * measurement can oscillate.
- *
- * `$legendRight` rotates the layout: plot box and legend become a row with
- * `align-items: center`, which is the whole of "the legend is vertically
- * centred on the pie" — the pie is inscribed centred in its box, so centring
- * the legend against the box centres it against the pie. It also holds in the
- * other direction: a legend taller than the box centres the *pie* against the
- * legend instead of pinning it to the top.
- */
-export declare const ChartRoot: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $fillWidth?: boolean;
-    $fillHeight?: boolean;
-    $legendRight?: boolean;
-}>;
-/**
- * Holds the plot, anchors the tooltip, and is the element that gets measured.
- *
- * Reserving the box from `aspect-ratio` or an explicit height means a
- * `fillWidth` chart is the right size on its very first paint, instead of
- * rendering at zero height and jumping once the observer reports.
- *
- * **`$fillHeight` is what makes "fill the container" tractable.** The chart root
- * is a flex column of this box plus the legend, and the legend wraps, so its
- * height is not known until after layout. Claiming the remaining track with
- * `flex: 1` lets the browser do that subtraction during its own layout pass —
- * measuring the root and subtracting a measured legend would instead be a
- * second, dependent pass, and one that can oscillate under a ResizeObserver.
- * `min-height: 0` is required with it: a flex item's automatic minimum size is
- * its content, which would let the SVG hold the box open above its track.
- */
-export declare const ChartPlotBox: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $reservedHeight?: number;
-    $reservedAspectRatio?: number;
-    $fillHeight?: boolean;
-    $legendRight?: boolean;
-    $squareFromHeight?: boolean;
-}>;
-/**
- * `overflow: visible` lets a value label above a full-height bar paint outside
- * the plot rather than being clipped by the root SVG.
- */
-export declare const ChartSvg: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGSVGElement> & Record<never, unknown>>;
-export declare const ChartBarPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-export declare const ChartLinePath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-export declare const ChartPointCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & Record<never, unknown>>;
-export declare const ChartArcPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-/**
- * Hit target, rendered above the marks. Used for both layers — one per category
- * beneath, one per mark above.
- *
- * Hit testing the full column rather than the bars themselves means a two-pixel
- * bar is as easy to hover as a two-hundred-pixel one, and crossing between
- * segments inside a category changes nothing the tooltip reads — so it holds
- * still instead of chasing each segment.
- *
- * The pointer cursor is conditional because the promise is: it appears only
- * where a click actually reports something, and a chart with no `onSelect`
- * keeps the default cursor rather than advertising an interaction it does not
- * have. No focus treatment either — the plot is `role="img"` and its marks are
- * not in the accessibility tree, so there is nothing here to focus yet.
- */
-export declare const ChartHitTarget: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
-/**
- * The radial equivalent, reusing the arc's own `d`.
- *
- * A pie has no category axis to band, so its targets are the arc shapes
- * themselves — drawn again, transparent, above the marks. That keeps hit
- * testing identical across all three charts instead of the pie hit-testing its
- * visible arcs directly.
- */
-export declare const ChartHitTargetPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-/**
- * Solid hairline rather than a dashed rule, and drawn at every tick including
- * zero — the line under the bars is what makes them read as resting on a
- * baseline.
- */
-export declare const ChartGridLine: import("react").ComponentType<Pick<import("react").SVGLineElementAttributes<SVGLineElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}, "as" | keyof import("react").SVGLineElementAttributes<SVGLineElement>> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGLineElementAttributes<SVGLineElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").SVGLineElementAttributes<SVGLineElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}>, {}>;
-/**
- * Vertical rule marking the hovered category on a line chart.
- *
- * `data-selected` steps it up the same neutral ramp rather than introducing a
- * hue: a selection is the *same* mark held rather than previewed, and a colour
- * change would read as a different kind of thing. The state is an attribute
- * rather than a `$` prop for the reason at the top of this file.
- */
-export declare const ChartCursorLine: import("react").ComponentType<Pick<import("react").SVGLineElementAttributes<SVGLineElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}, "as" | keyof import("react").SVGLineElementAttributes<SVGLineElement>> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGLineElementAttributes<SVGLineElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").SVGLineElementAttributes<SVGLineElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}>, {}>;
-/**
- * Full-height tint over the hovered category's band on a bar chart — the bar
- * counterpart to {@link ChartCursorLine}. A rule reads oddly threaded through
- * wide filled marks; a quiet band behind them marks the same position without
- * touching them.
- *
- * 4% of the foreground, so it survives both themes. Deliberately fainter than
- * the line chart's rule: a band is a large area where a rule is a hairline, and
- * the same value that reads as quiet on one shouts on the other.
- */
-export declare const ChartCursorBand: import("react").ComponentType<Pick<import("react").SVGProps<SVGRectElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}, "as" | keyof import("react").SVGProps<SVGRectElement>> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGProps<SVGRectElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").SVGProps<SVGRectElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}>, {}>;
-export declare const ChartAxisLabelBox: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGForeignObjectElement> & Record<never, unknown>>;
-/**
- * Positioned from coordinates already clamped to the chart box.
- *
- * `left`/`top` are transitioned so the tooltip slides between categories rather
- * than teleporting, and it stays mounted while hidden so the fade can actually
- * run — unmounting on hide is why a fade-out never appears.
- */
-export declare const ChartTooltipPositioner: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $x: number;
-    $y: number;
-    $isVisible: boolean;
-} & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}, "as" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "$x" | "$y" | "$isVisible"> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $x: number;
-    $y: number;
-    $isVisible: boolean;
-} & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $x: number;
-    $y: number;
-    $isVisible: boolean;
-} & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}>, {}>;
-/**
- * Two-column tooltip body: label column, one gutter, value column.
- *
- * A grid rather than per-row `space-between`, so every row shares the same
- * column boundary: the value column is sized by the widest value and every
- * value is guaranteed its full width, while the labels take the remainder and
- * all ellipsize against the same edge. Per-row flex made the label→value gap
- * drift with each label's length, which read as misalignment down the list.
- */
-export declare const ChartTooltipGrid: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-/** Swatch + label. `min-width: 0` is what lets the label actually ellipsize. */
-export declare const ChartTooltipLabelCell: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-/** Right-aligned and never wrapped — the value always shows in full. */
-export declare const ChartTooltipValueCell: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-/**
- * Content well inside a donut hole.
- *
- * Rendered as HTML positioned over the SVG rather than as `<text>`, so the
- * caller can compose it from the same `Text` and layout primitives as the rest
- * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
- * behind it.
- */
-export declare const ChartCenterBox: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $centerX: number;
-    $centerY: number;
-    $diameter: number;
-}>;
-/**
- * Sits slightly above centre, over where the bars would be, so the axes stay
- * legible underneath.
- */
-export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}, "as" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}>, {}>;
-/**
- * Aligns the legend under the plot rather than the value-axis gutter.
- */
-export declare const ChartLegendRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $inset: number;
-    $vertical?: boolean;
-    /** Plot box height in px — the side legend's fit extent. */
-    $extent?: number;
-}>;
-/**
- * Zero-size clip around the measure layer.
- *
- * `visibility: hidden` suppresses paint but not *overflow*: the measure layer's
- * max-content box still joins the scrollable overflow region of every ancestor
- * up to the nearest scroll container, and the row above cannot clip it. A
- * legend wide enough to collapse therefore handed the page a horizontal
- * scrollbar into empty space — the wider the collapsed entries, the further it
- * scrolled.
- *
- * `overflow: hidden` on a 0×0 box ends the propagation there while leaving
- * descendant layout geometry untouched, so the sizes the fit computation reads
- * are exactly the ones it read before.
- */
-export declare const ChartLegendMeasureClip: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-/**
- * Invisible copy of every legend entry plus a worst-case trigger, laid out
- * unconstrained along the legend's own axis so the fit computation can read
- * real sizes.
- *
- * Absolute and hidden: it must not affect the row's layout, and measuring live
- * entries instead would conflate "what fits" with "what is currently shown".
- */
-export declare const ChartLegendMeasure: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $vertical?: boolean;
-}>;
-/**
- * Column of legend entries collapsed behind the "+N more" trigger, rendered as
- * the body of an interactive tooltip.
- *
- * Scrolls past {@link CHART_LEGEND_OVERFLOW_MAX_HEIGHT} so a fifty-series chart
- * gets a bounded popover rather than one taller than the plot.
- */
-export declare const ChartLegendOverflowList: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-/**
- * One legend entry, when the legend is interactive.
- *
- * A real `<button>` rather than a styled div so it sits in the tab order:
- * focusing an entry previews its series exactly as hovering does, which is the
- * one keyboard affordance the charts keep — the plot itself is `role="img"` and
- * its marks are not in the accessibility tree. Activating it does nothing;
- * isolation follows the pointer or the focus and releases with it.
- *
- * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
- * with the series it names.
- *
- * The trailing padding is the inter-entry spacing — deliberately padding on
- * the entry rather than a gap on the container, so the hover surfaces of
- * adjacent entries touch and a sweep hands the isolation directly from one
- * series to the next. Trailing only, so the first entry stays flush with the
- * plot's left edge (or the column's top).
- */
-export declare const ChartLegendItemButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    $vertical?: boolean;
-}>;
-/** The same row, when the legend is inert — no button semantics to announce.
- * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
-export declare const ChartLegendItemStatic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    $vertical?: boolean;
-}>;
+import { ChartMarkState } from "./types.js";
+/** @internal A series line. */
+export declare const CHART_LINE_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A dashed line (forecast, target, previous period): a `space[4]` dash and gap. */
+export declare const CHART_LINE_DASHED_CSS: import("@linaria/core").LinariaClassName;
+/** @internal An area fill under a line (AreaChart). `fill-opacity`, so mark states still apply. */
+export declare const CHART_AREA_CSS: import("@linaria/core").LinariaClassName;
+/** @internal Overlapping areas (AreaChart): the 1.x 12% fill, so lines behind stay readable. */
+export declare const CHART_AREA_OVERLAP_CSS: import("@linaria/core").LinariaClassName;
+/** @internal Stacked area bands (AreaChart): a firmer fill, since bands never overlap. */
+export declare const CHART_AREA_STACKED_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A bar (BarChart, Sparkline bars). */
+export declare const CHART_BAR_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A pie arc. */
+export declare const CHART_ARC_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A point dot, haloed by the canvas so it reads over the line. */
+export declare const CHART_POINT_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A filled heatmap cell: its ramp step arrives as `--gx-chart-mark-color`. */
+export declare const HEATMAP_CELL_CSS: import("@linaria/core").LinariaClassName;
+/** @internal An empty heatmap cell (no reading): a hairline outline, distinct from the lowest step. */
+export declare const HEATMAP_EMPTY_CELL_CSS: import("@linaria/core").LinariaClassName;
+/** @internal The engaged heatmap cell: an outline, so the rest keep their color for comparison. */
+export declare const HEATMAP_ACTIVE_CELL_CSS: import("@linaria/core").LinariaClassName;
+/** @internal Emphasis of a mark. No transition: emphasis is feedback and snaps. */
+export declare const CHART_MARK_STATE_TO_CSS_MAP: Record<ChartMarkState, string>;
+/** @internal A value grid hairline, drawn at every tick including zero. */
+export declare const CHART_GRID_LINE_CSS: import("@linaria/core").LinariaClassName;
+/** @internal The rule at the engaged category (LineChart, AreaChart): one crisp pixel column. */
+export declare const CHART_CURSOR_LINE_CSS: import("@linaria/core").LinariaClassName;
+/** @internal The rule held at a selected category: one step firmer on the same neutral ramp. */
+export declare const CHART_CURSOR_LINE_SELECTED_CSS: import("@linaria/core").LinariaClassName;
+/** @internal The band behind the engaged category (BarChart). */
+export declare const CHART_CURSOR_BAND_CSS: import("@linaria/core").LinariaClassName;
+/** @internal The band held at a selected category. */
+export declare const CHART_CURSOR_BAND_SELECTED_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A transparent hit target above the marks. */
+export declare const CHART_HIT_TARGET_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A hit target that reports a click (`onSelect` set). */
+export declare const CHART_HIT_TARGET_CLICKABLE_CSS: import("@linaria/core").LinariaClassName;
+/** @internal A `foreignObject` holding an axis label (`Text`). */
+export declare const CHART_AXIS_LABEL_BOX_CSS: import("@linaria/core").LinariaClassName;
+/**
+ * @internal A target's `mouseleave`: calls `onLeave` only when the pointer left the target layers,
+ * not when it crossed into a neighbouring target, so the engaged category never flickers through
+ * "nothing" between bands.
+ */
+export declare function leaveUnlessTarget(event: {
+    relatedTarget: EventTarget | null;
+    currentTarget: Element;
+}, onLeave: () => void): void;