panelui-native 0.60.0 → 0.62.0

package/lib/typescript/src/components/live-line-chart/index.d.ts

@@ -0,0 +1,293 @@
+/**
+ * LiveLineChart — a reading that keeps arriving, against a window that keeps
+ * moving.
+ *
+ * ```tsx
+ * <LiveLineChart data={points} window={30}>
+ *   <LiveLineChart.Grid />
+ *   <LiveLineChart.Area />
+ *   <LiveLineChart.Line />
+ *   <LiveLineChart.Tip />
+ *   <LiveLineChart.XAxis />
+ * </LiveLineChart>
+ * ```
+ *
+ * ## What it is, against the line chart beside it
+ *
+ * `LineChart` places a point by its position in the list, which is right for a
+ * series of twelve months whatever the gaps between the dates behind them. Here
+ * a point is placed at the time it carries, against a domain that runs from
+ * `window` seconds ago to now — so the gaps are the subject, and a reading that
+ * arrived late sits where it arrived rather than one slot along.
+ *
+ * ## The clock, and what it costs
+ *
+ * This is the only thing in the library that animates without an interaction or
+ * a change of data. The window is tied to the wall clock, so the line drifts
+ * left whether or not anything is arriving, and a feed that stalls shows as a
+ * flat run reaching back from the tip rather than as a chart that has frozen.
+ * Those two look identical if the window only moves when a point lands, and
+ * they mean opposite things.
+ *
+ * The cost is a frame callback for as long as the chart is mounted. It is
+ * stopped by `paused`, by `status="loading"` and on unmount, and it is never
+ * started when the platform asks for reduced motion — in that case the window
+ * advances as each point arrives instead, which is the same picture sampled
+ * less often.
+ *
+ * ## Colour follows the recent direction
+ *
+ * With `momentumColors` set, the line, the fill and the tip take their colour
+ * from where the reading has been going rather than from a fixed hue. It is the
+ * one thing on the chart readable without looking at the axis, which is what a
+ * number being watched out of the corner of an eye needs.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type ChartCurve } from '../../utils/chart.js';
+/** Which layer a part belongs to. Read off the component itself. */
+type Layer = 'svg' | 'overlay' | 'header';
+/** Whether the chart is showing data or waiting for it. */
+export type LiveLineChartStatus = 'loading' | 'ready';
+/** Where the reading has been going, over the last few points. */
+export type LiveLineMomentum = 'up' | 'down' | 'flat';
+/** A colour per direction, for a chart that is read by its colour. */
+export interface LiveLineMomentumColors {
+    up?: string;
+    down?: string;
+    flat?: string;
+}
+/** One reading. `time` is a timestamp in milliseconds, as `Date.now()` gives. */
+export interface LiveLinePoint {
+    time: number;
+    value: number;
+}
+/** The reading under the crosshair, for something rendered inside the chart. */
+export declare function useLiveLineChart(): {
+    activePoint: LiveLinePoint | null;
+    latest: LiveLinePoint | null;
+    momentum: LiveLineMomentum;
+    color: string;
+};
+export interface LiveLineChartProps extends ViewProps {
+    className?: string;
+    /** The readings so far, oldest first. Append to it as they arrive. */
+    data: LiveLinePoint[];
+    /** How much time the plot spans, in seconds. */
+    window?: number;
+    /** Freeze the window where it is. The readings still arrive; the clock stops. */
+    paused?: boolean;
+    /** Fix the y-axis instead of deriving it from what is visible. */
+    yDomain?: [number, number];
+    /** Milliseconds for the y-axis to settle after the range changes. */
+    domainDuration?: number;
+    /** `monotone` never overshoots between readings; `linear` joins them straight. */
+    curve?: ChartCurve;
+    /**
+     * The most readings kept. Older ones are dropped, since they are off the
+     * window and cannot come back — an unbounded feed otherwise grows an array
+     * for as long as the screen is open.
+     */
+    maxPoints?: number;
+    /** Width ÷ height of the plot. */
+    aspectRatio?: number;
+    /** `loading` draws a flat placeholder and holds the clock. */
+    status?: LiveLineChartStatus;
+    /** Colour per direction. Left out, the chart draws in one hue throughout. */
+    momentumColors?: LiveLineMomentumColors;
+    /** Overrides the `--color-chart-1` token. Ignored when `momentumColors` is set. */
+    color?: string;
+    /** The reading under the crosshair as it moves, and `null` when the finger lifts. */
+    onActivePointChange?: (point: LiveLinePoint | null) => void;
+    children?: ReactNode;
+}
+export interface LiveLineChartHandle {
+    /** Jump the window to the current moment — after a pause, or a background. */
+    sync: () => void;
+}
+export interface LiveLineChartGridProps {
+    /** How many bands the plot is divided into. */
+    rows?: number;
+    color?: string;
+    dashArray?: string;
+}
+/** The horizontal rules the readings are judged against. */
+declare function LiveLineChartGrid({ rows, color, dashArray }: LiveLineChartGridProps): import("react").JSX.Element;
+declare namespace LiveLineChartGrid {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LiveLineChartLineProps {
+    strokeWidth?: number;
+    /** Overrides the chart's colour, momentum included. */
+    color?: string;
+}
+/** The line itself, rebuilt on the UI thread every frame the window moves. */
+declare function LiveLineChartLine({ strokeWidth, color }: LiveLineChartLineProps): import("react").JSX.Element | null;
+declare namespace LiveLineChartLine {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LiveLineChartAreaProps {
+    /** Opacity at the top of the fill, fading to nothing at the baseline. */
+    opacity?: number;
+    /** Overrides the chart's colour, momentum included. */
+    color?: string;
+}
+/**
+ * The fill under the line.
+ *
+ * Its own part rather than a flag on the line, so a chart that wants the shape
+ * without the weight of a filled band simply does not have one.
+ */
+declare function LiveLineChartArea({ opacity, color }: LiveLineChartAreaProps): import("react").JSX.Element | null;
+declare namespace LiveLineChartArea {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LiveLineChartTipProps {
+    /**
+     * Show the current reading in a badge beside the dot.
+     *
+     * Off by default. The badge is a floating card, which is the shape a reader
+     * has learnt means "you touched something" — sitting there unasked it reads
+     * as a tooltip nobody opened. Turn it on where the chart has no header to put
+     * the reading in, and it becomes the only place the number is written.
+     */
+    badge?: boolean;
+    /** Ring the dot with a repeating pulse. */
+    pulse?: boolean;
+    /** Format the badge. Defaults to a compact number. */
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+/**
+ * The dot at the leading end, and what it currently reads.
+ *
+ * It rides the newest reading rather than the right-hand edge, so a feed that
+ * stops is a dot drifting left with the rest of the line. Pinning it to the
+ * edge would hold it still and steady, which is the picture of a feed that is
+ * working.
+ *
+ * A view rather than an SVG node: it carries text and a pulse, and SVG text
+ * ignores the platform's text scaling and the theme's font.
+ */
+declare function LiveLineChartTip({ badge, pulse, formatValue, className, }: LiveLineChartTipProps): import("react").JSX.Element | null;
+declare namespace LiveLineChartTip {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LiveLineChartXAxisProps {
+    /** How many labels along the bottom. */
+    ticks?: number;
+    /** Rewrites a label. Given how many seconds back the tick is. */
+    formatTick?: (secondsAgo: number) => string;
+    className?: string;
+}
+/**
+ * How far back the plot reaches, labelled along the bottom.
+ *
+ * The labels are offsets from now — `-30s`, `-15s`, `now` — rather than clock
+ * times, and they never change. A moving window labelled with wall-clock times
+ * would rewrite every one of them on every frame, which is a row of digits
+ * churning under a chart that is trying to be read.
+ */
+declare function LiveLineChartXAxis({ ticks, formatTick, className }: LiveLineChartXAxisProps): import("react").JSX.Element | null;
+declare namespace LiveLineChartXAxis {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LiveLineChartYAxisProps {
+    /** How many labels up the side. */
+    ticks?: number;
+    /** Format a value. Defaults to a compact number. */
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+/**
+ * The scale up the left-hand side.
+ *
+ * Declaring one widens the left gutter, which the root reads off the children
+ * before anything is laid out — an axis given no room is drawn over the line,
+ * which loses both the numbers and the shape they were there to explain.
+ *
+ * The labels follow the domain the tween is heading for rather than the tween
+ * itself. A number re-rendered on every frame of a settle is thirty renders
+ * landing on the string it started on.
+ */
+declare function LiveLineChartYAxis({ ticks, formatValue, className }: LiveLineChartYAxisProps): import("react").JSX.Element | null;
+declare namespace LiveLineChartYAxis {
+    var displayName: string;
+    var layer: Layer;
+    var axis: "y";
+}
+export interface LiveLineChartTooltipProps {
+    /** Format the value. Defaults to a compact number. */
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+/**
+ * Drag back through the window to read a reading that has already gone past.
+ *
+ * The crosshair is pinned to the *moment* it was put on rather than to the
+ * place on screen, so it travels left with the reading it named instead of
+ * sitting still while the line slides out from under it.
+ */
+declare function LiveLineChartTooltip({ formatValue, className }: LiveLineChartTooltipProps): import("react").JSX.Element | null;
+declare namespace LiveLineChartTooltip {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LiveLineChartSkeletonProps {
+    color?: string;
+}
+/**
+ * The waiting state: a flat line down the middle of the plot.
+ *
+ * The shape the real line grows out of once readings arrive, rather than a
+ * placeholder series — an invented run of readings is indistinguishable from a
+ * real one until it changes under the reader.
+ */
+declare function LiveLineChartSkeleton({ color }: LiveLineChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace LiveLineChartSkeleton {
+    var displayName: string;
+    var layer: Layer;
+}
+export interface LiveLineChartHeaderProps extends ViewProps {
+    className?: string;
+    /** Small line above the value — what is being watched. */
+    title?: string;
+    /** The readout. Left out, it shows the current reading. */
+    value?: string;
+    /** One muted line under the value. */
+    caption?: string;
+    /** Format the derived value. Defaults to a compact number. */
+    formatValue?: (value: number) => string;
+    /** Trailing slot — a pause control, a badge, a unit. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the plot: what is being watched and what it currently reads.
+ *
+ * The value falls back to the reading under the crosshair, then to the latest
+ * one, so a drag back through the window reads out here without the caller
+ * wiring anything up.
+ */
+declare function LiveLineChartHeader({ className, title, value, caption, formatValue, children, ...props }: LiveLineChartHeaderProps): import("react").JSX.Element;
+declare namespace LiveLineChartHeader {
+    var displayName: string;
+    var layer: Layer;
+}
+export declare const LiveLineChart: import("react").ForwardRefExoticComponent<LiveLineChartProps & import("react").RefAttributes<LiveLineChartHandle>> & {
+    Header: typeof LiveLineChartHeader;
+    Grid: typeof LiveLineChartGrid;
+    Area: typeof LiveLineChartArea;
+    Line: typeof LiveLineChartLine;
+    Tip: typeof LiveLineChartTip;
+    XAxis: typeof LiveLineChartXAxis;
+    YAxis: typeof LiveLineChartYAxis;
+    Tooltip: typeof LiveLineChartTooltip;
+    Skeleton: typeof LiveLineChartSkeleton;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/live-line-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/live-line-chart/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/polar-area-chart/index.d.ts

@@ -0,0 +1,259 @@
+/**
+ * PolarAreaChart — several parts, compared on one measure.
+ *
+ * ```tsx
+ * <PolarAreaChart data={scores}>
+ *   <PolarAreaChart.Header title="Scores" />
+ *   <PolarAreaChart.Grid />
+ *   <PolarAreaChart.Wedges />
+ *   <PolarAreaChart.Labels />
+ *   <PolarAreaChart.Legend />
+ * </PolarAreaChart>
+ * ```
+ *
+ * ## What it is, against the pie beside it
+ *
+ * A pie divides one total: the angles are the quantity and they must come to a
+ * full turn, so a slice only means anything next to the others. Here every
+ * wedge takes the same angle and the *radius* is the quantity, which means the
+ * values do not have to add up to anything. Six unrelated readings on one scale
+ * are a polar area chart; six parts of one budget are a pie.
+ *
+ * What it buys over a bar chart is the shape. Bars are easier to read one at a
+ * time, and a reader who has to rank the middle three should be given bars. A
+ * dial is for the silhouette — which direction the weight sits in, whether one
+ * reading runs away from the rest — read at a glance and without a legend walk.
+ *
+ * ## Radius, and what it overstates
+ *
+ * `scale` decides what the radius means, and the two answers are not the same
+ * chart:
+ *
+ * - `radius` (the default) puts the value straight on the radius, so a reading
+ *   can be counted off the rings. The cost is that a wedge worth twice another
+ *   covers four times the area, and area is what the eye adds up first.
+ * - `area` puts it on the square root instead, so the ink is proportional to
+ *   the value and nothing is overstated. The cost is the rings: they still mark
+ *   equal steps, but they are no longer equally spaced.
+ *
+ * The grid is drawn through the same conversion either way, so a ring is always
+ * where its value falls rather than where an even split would put it.
+ *
+ * Touch, not hover: a wedge is selected by pressing it, and pressing the same
+ * one again clears the selection.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+/** Whether the chart is showing data or waiting for it. */
+export type PolarAreaChartStatus = 'loading' | 'ready';
+/** What a wedge's radius stands for. */
+export type PolarAreaScale = 'radius' | 'area';
+/** One wedge. Its angle is fixed, so only the value decides how far it reaches. */
+export interface PolarAreaDatum {
+    /** Name for the legend, the readout and the accessibility label. */
+    label: string;
+    /** How far the wedge reaches, against `maxValue`. Negatives are treated as zero. */
+    value: number;
+    /** Explicit colour, overriding the `--color-chart-*` token. */
+    color?: string;
+}
+/** The selected wedge and its reading, for something rendered inside the chart. */
+export declare function usePolarAreaChart(): {
+    activeIndex: number;
+    activeWedge: PolarAreaDatum | null;
+    /** The selected wedge's value against the maximum, 0 to 1. */
+    activeFraction: number;
+};
+export interface PolarAreaChartProps extends ViewProps {
+    className?: string;
+    /** One entry per wedge, drawn in the order they are listed. */
+    data: PolarAreaDatum[];
+    /** Diameter in points. Left out, the chart fills its column as a square. */
+    size?: number;
+    /**
+     * The value the outermost ring stands for. Defaults to the largest value
+     * rounded up to a round number.
+     *
+     * Fix it to compare two dials against each other — the same reading has to be
+     * the same distance out on both, and a maximum derived per chart makes the
+     * largest wedge of each one reach the edge whatever it is worth.
+     */
+    maxValue?: number;
+    /** Whether the radius or the area carries the value. */
+    scale?: PolarAreaScale;
+    /** Where the first wedge starts, in degrees clockwise from twelve o'clock. */
+    startAngle?: number;
+    /** Gap between wedges, in degrees. */
+    padAngle?: number;
+    /** `loading` draws the dial undivided, with nothing split up yet. */
+    status?: PolarAreaChartStatus;
+    /** Milliseconds for the wedges to grow out of the centre. */
+    animationDuration?: number;
+    /** The selected wedge, to drive the selection from outside. */
+    activeIndex?: number;
+    onActiveIndexChange?: (index: number) => void;
+    children?: ReactNode;
+}
+export interface PolarAreaChartHandle {
+    /** Play the growth again. */
+    replay: () => void;
+}
+export interface PolarAreaChartWedgesProps {
+    /** Rounds the four turns of each wedge, in points. */
+    cornerRadius?: number;
+    /** Opacity of the wedges that are not selected, once one is. */
+    dimOpacity?: number;
+}
+/**
+ * Every wedge, drawn in the order the data lists them.
+ *
+ * One part rather than one per datum: the wedges share a dial, a maximum and a
+ * scale by definition, and a chart where one of them could be given a different
+ * maximum would be a chart drawing a lie.
+ */
+declare function PolarAreaChartWedges({ cornerRadius, dimOpacity, }: PolarAreaChartWedgesProps): import("react").JSX.Element | null;
+declare namespace PolarAreaChartWedges {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface PolarAreaChartGridProps {
+    /** How many rings, including the outermost. */
+    rings?: number;
+    /** Overrides the themed hairline colour. */
+    color?: string;
+    /** Draw a line from the centre out along each wedge's edge. */
+    spokes?: boolean;
+}
+/**
+ * The scale, drawn as rings.
+ *
+ * Each ring stands for an even step of the value and is placed where that value
+ * falls, which under `scale="area"` is not an even step of the radius. Spacing
+ * them evenly instead would be quicker and would put every ring in the wrong
+ * place on half the charts.
+ */
+declare function PolarAreaChartGrid({ rings, color, spokes }: PolarAreaChartGridProps): import("react").JSX.Element | null;
+declare namespace PolarAreaChartGrid {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface PolarAreaChartLabelsProps {
+    /** Format the value. Defaults to a compact number. */
+    formatValue?: (value: number, datum: PolarAreaDatum) => string;
+    /** Wedges reaching less far than this, in points, are left unlabelled. */
+    minRadius?: number;
+    className?: string;
+}
+/**
+ * The reading on each wedge that has room for it.
+ *
+ * A wedge shorter than `minRadius` is left blank — the label would sit outside
+ * the wedge it belongs to, next to a neighbour it does not describe. Those are
+ * read through `Tooltip` and the legend instead.
+ *
+ * Each label takes its colour from the wedge under it. A wedge is a theme
+ * colour and a theme is free to set that anywhere on the scale, so a fixed
+ * white label disappears on the pale ones.
+ */
+declare function PolarAreaChartLabels({ formatValue, minRadius, className, }: PolarAreaChartLabelsProps): import("react").JSX.Element | null;
+declare namespace PolarAreaChartLabels {
+    var displayName: string;
+    var slot: "overlay";
+}
+export interface PolarAreaChartTooltipProps {
+    /** Format the value. Defaults to a compact number. */
+    formatValue?: (value: number, datum: PolarAreaDatum) => string;
+    className?: string;
+}
+/**
+ * The readout for the selected wedge, floating over the dial.
+ *
+ * This is how the short wedges are named. They are the ones with no room for a
+ * label, so without it the chart answers questions about its largest readings
+ * only — which is the half the reader could already see.
+ */
+declare function PolarAreaChartTooltip({ formatValue, className }: PolarAreaChartTooltipProps): import("react").JSX.Element | null;
+declare namespace PolarAreaChartTooltip {
+    var displayName: string;
+    var slot: "overlay";
+}
+export interface PolarAreaChartLegendProps extends ViewProps {
+    className?: string;
+    /** Show each wedge's reading beside its name. */
+    showValue?: boolean;
+    /** Format the value. Defaults to a compact number. */
+    formatValue?: (value: number, datum: PolarAreaDatum) => string;
+}
+/**
+ * A swatch, a name and a reading per wedge, under the dial and across the width
+ * of it. Pressable in the same way the wedges are, and the easier target of the
+ * two for anything short.
+ *
+ * The reading rather than a share, unlike the pie next door: these values need
+ * not add up to anything, so a percentage of their sum would be a number about
+ * nothing.
+ */
+declare function PolarAreaChartLegend({ className, showValue, formatValue, ...props }: PolarAreaChartLegendProps): import("react").JSX.Element | null;
+declare namespace PolarAreaChartLegend {
+    var displayName: string;
+    var slot: "footer";
+}
+export interface PolarAreaChartSkeletonProps {
+    color?: string;
+}
+/**
+ * The loading state: the dial as one plain disc, with nothing divided up yet.
+ *
+ * Deliberately undivided. Placeholder wedges would be a made-up set of
+ * readings, and a reader has no way to tell an invented one from a real one
+ * until it changes under them.
+ */
+declare function PolarAreaChartSkeleton({ color }: PolarAreaChartSkeletonProps): import("react").JSX.Element | null;
+declare namespace PolarAreaChartSkeleton {
+    var displayName: string;
+    var slot: "svg";
+}
+export interface PolarAreaChartHeaderProps extends ViewProps {
+    className?: string;
+    /** Small line above the value — what the chart is of. */
+    title?: string;
+    /** The readout. The largest thing on the card, and the first thing read. */
+    value?: string;
+    /** One muted line under the value — a period, a comparison, a caveat. */
+    caption?: string;
+    /** Prettier names for the wedges, keyed by their `label`. */
+    labels?: Record<string, string>;
+    /**
+     * Draw a swatch and a name per wedge along the trailing edge.
+     *
+     * For two or three short names. Past that use `PolarAreaChart.Legend`, which
+     * runs under the dial across the full width.
+     */
+    legend?: boolean;
+    /** Trailing slot — a control, a badge, a range picker. Wins over `legend`. */
+    children?: ReactNode;
+}
+/**
+ * The strip above the dial: what the chart is of, what it reads, and what the
+ * colours mean.
+ *
+ * The value is not derived here even though there are values to derive one
+ * from, because the formatting is not the chart's to guess: 18420 is a count, a
+ * currency or a duration depending on what was measured.
+ */
+declare function PolarAreaChartHeader({ className, title, value, caption, labels, legend, children, ...props }: PolarAreaChartHeaderProps): import("react").JSX.Element;
+declare namespace PolarAreaChartHeader {
+    var displayName: string;
+    var slot: "header";
+}
+export declare const PolarAreaChart: import("react").ForwardRefExoticComponent<PolarAreaChartProps & import("react").RefAttributes<PolarAreaChartHandle>> & {
+    Header: typeof PolarAreaChartHeader;
+    Grid: typeof PolarAreaChartGrid;
+    Wedges: typeof PolarAreaChartWedges;
+    Labels: typeof PolarAreaChartLabels;
+    Tooltip: typeof PolarAreaChartTooltip;
+    Legend: typeof PolarAreaChartLegend;
+    Skeleton: typeof PolarAreaChartSkeleton;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/polar-area-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/polar-area-chart/index.tsx"],"names":[],"mappings":"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"}