altitude-design 0.2.0 → 0.3.0

package/dist/types-cjs/chart-brush.d.cts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { type ChartDatum } from './chart.cjs';
+export interface ChartBrushProps {
+    /** The series the overview draws. Default: the chart's first shown series. */
+    series?: string;
+    /** The overview's name. Default "Overview, <its whole range>". */
+    'aria-label'?: string;
+    className?: string;
+}
+/** What the frame hands the brush: every record, where the window is in them, and how to say an x. */
+interface BrushWiring {
+    full: ChartDatum[];
+    xKey: string;
+    seriesKey: string;
+    color: string;
+    value: [number, number];
+    onChange: (v: [number, number]) => void;
+    dated: boolean;
+    formatX: (v: unknown) => string;
+    locale?: string;
+}
+/**
+ * Pick a time window on an overview (#74): put it inside a LineChart, AreaChart or BarChart over time. The overview is an
+ * opening, the whole series drawn as a flat line in a trench, because it's a track you slide along; the window is a raised lens
+ * over it (level 1, accent rim, clear face) whose two grips are a range Slider's thumbs. Outside the window the overview
+ * recedes. Drag the lens to pan, a grip to resize, or press outside it to centre the window there.
+ */
+export declare function ChartBrush({ __brush, ...props }: ChartBrushProps & {
+    __brush?: BrushWiring;
+}): React.JSX.Element | null;
+export declare namespace ChartBrush {
+    var chartHtml: boolean;
+    var chartBrush: boolean;
+}
+export {};

package/dist/types-cjs/chart-themes.d.cts

@@ -0,0 +1,229 @@
+import * as React from 'react';
+/** Token values by name, without `--` (as in tokens.json), e.g. `{ 'data-1': '#3d5bd9', ink: '#141a29' }`. */
+export type ChartTokens = Record<string, string>;
+/** An element to read the active scheme's computed tokens from, or the tokens themselves. */
+export type ChartTokenSource = Element | ChartTokens;
+export interface ChartThemeOptions {
+    /** Zero every animation. Read from the element (`prefers-reduced-motion`, or `AltitudeProvider motion`) when omitted. */
+    reducedMotion?: boolean;
+    /** Turn on pattern fills (ECharts decals) so no series relies on colour alone. On under forced colours regardless. */
+    patterns?: boolean;
+    /** Forced colours are active. Read from the element's window when omitted. */
+    forcedColors?: boolean;
+}
+/** The tokens a chart theme needs, read from an element's computed style (so its scheme and accent apply). */
+export declare function readChartTokens(source: ChartTokenSource): ChartTokens;
+/** data-1 … data-6, then data-other: series colours in config order, for a library that takes a list. */
+export declare function dataColors(source: ChartTokenSource): string[];
+/**
+ * An ECharts theme: `echarts.init(el, echartsTheme(el))`, or `echarts.registerTheme('altitude', echartsTheme(el))`.
+ * Series in data-1 … data-6 then data-other, text in ink, axes in line-control, split lines in line, the readout on
+ * surface-floating at elev-3, aria on (import ECharts' AriaComponent), decals under forced colours or with `patterns`,
+ * and dur-travel-3 animation on ease-glide's curve, zero under reduced motion.
+ */
+export declare function echartsTheme(source: ChartTokenSource, options?: ChartThemeOptions): {
+    color: string[];
+    backgroundColor: string;
+    textStyle: {
+        color: string;
+        fontFamily: string;
+    };
+    title: {
+        textStyle: {
+            color: string;
+        };
+        subtextStyle: {
+            color: string;
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+        inactiveColor: string;
+    };
+    categoryAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+        };
+    };
+    logAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+        };
+    };
+    timeAxis: {
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            color: string;
+        };
+        splitLine: {
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+        };
+    };
+    tooltip: {
+        backgroundColor: string;
+        borderColor: string;
+        borderWidth: number;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+        };
+        extraCssText: string;
+        axisPointer: {
+            lineStyle: {
+                color: string;
+                width: number;
+            };
+            crossStyle: {
+                color: string;
+                width: number;
+            };
+        };
+    };
+    visualMap: {
+        inRange: {
+            color: string[];
+        };
+        textStyle: {
+            color: string;
+            fontFamily: string;
+        };
+    };
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    animation: boolean;
+    animationDuration: number;
+    animationDurationUpdate: number;
+    animationEasing: string;
+    animationEasingUpdate: string;
+};
+/**
+ * Chart.js defaults: `Chart.defaults.set(chartjsDefaults(el))`. Text in ink-muted, grid in line, axis borders in
+ * line-control, the readout on surface-floating, dur-travel-3 animation (none under reduced motion). Chart.js has no
+ * palette default: give each dataset a colour from `dataColors(el)`.
+ */
+export declare function chartjsDefaults(source: ChartTokenSource, options?: ChartThemeOptions): {
+    color: string;
+    borderColor: string;
+    backgroundColor: string;
+    font: {
+        family: string;
+    };
+    animation: false | {
+        duration: number;
+        easing: "easeInOutCubic";
+    };
+    scale: {
+        grid: {
+            color: string;
+        };
+        border: {
+            color: string;
+        };
+        ticks: {
+            color: string;
+        };
+    };
+    plugins: {
+        legend: {
+            labels: {
+                color: string;
+            };
+        };
+        tooltip: {
+            backgroundColor: string;
+            borderColor: string;
+            borderWidth: number;
+            titleColor: string;
+            bodyColor: string;
+            footerColor: string;
+        };
+    };
+};
+/**
+ * Re-reads a chart theme whenever the scheme around `ref` changes: an AltitudeProvider's `scheme`, `accent` or
+ * `motion`, a `data-theme` on the page, or the reduced-motion and forced-colours settings. Null until mounted.
+ *
+ *   const ref = React.useRef<HTMLDivElement>(null);
+ *   const theme = useChartTheme(echartsTheme, ref);
+ *   React.useEffect(() => { if (!theme) return; const c = echarts.init(ref.current!, theme); …; return () => c.dispose(); }, [theme]);
+ */
+export declare function useChartTheme<T>(build: (source: Element, options?: ChartThemeOptions) => T, ref: React.RefObject<Element | null>, options?: ChartThemeOptions): T | null;