@peripheries/charts 0.0.0-stage → 0.1.1

package/package.json

@@ -1,6 +1,27 @@
 {
   "name": "@peripheries/charts",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "The shared charts lineage, built on @stack/core",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/peripheries-components/stack-components.git"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./index.css": "./index.css"
+  },
+  "peerDependencies": {
+    "react": "^19.2.4"
+  },
+  "dependencies": {
+    "@types/d3-scale": "4.0.9"
+  }
+}

package/types/charts/AreaChart/AreaChart.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement } from 'react';
+import { type AxisConfig, type ChartCellProps, type ChartMargins, type ChartRow, type CurveType, type ReferenceLineSpec, type Series } from '../_shared/types';
+export interface AreaChartProps extends ChartCellProps {
+    series?: readonly Series[] | string;
+    data?: readonly ChartRow[];
+    x?: string;
+    y?: string | readonly string[];
+    xAxis?: AxisConfig;
+    yAxis?: AxisConfig;
+    height?: number;
+    colors?: readonly string[];
+    stacked?: boolean;
+    fillOpacity?: number;
+    curve?: CurveType;
+    legend?: boolean;
+    tooltip?: boolean;
+    margins?: Partial<ChartMargins>;
+    title?: string;
+    description?: string;
+    referenceLines?: readonly ReferenceLineSpec[];
+}
+export declare function AreaChart({ stacked, className, ...rest }: AreaChartProps): ReactElement;

package/types/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from 'react';
+import { type AxisConfig, type ChartCellProps, type ChartMargins, type ChartRow, type Series } from '../_shared/types';
+export interface BarChartProps extends ChartCellProps {
+    series?: readonly Series[] | string;
+    data?: readonly ChartRow[];
+    x?: string;
+    y?: string | readonly string[];
+    label?: string;
+    value?: string | readonly string[];
+    xAxis?: AxisConfig;
+    yAxis?: AxisConfig;
+    height?: number;
+    colors?: readonly string[];
+    mode?: 'grouped' | 'stacked';
+    legend?: boolean;
+    tooltip?: boolean;
+    margins?: Partial<ChartMargins>;
+    title?: string;
+    description?: string;
+}
+export declare function BarChart({ series, data, x, y, label, value, xAxis, yAxis, height, colors, mode, legend, tooltip, margins: marginOverride, title, description, size, baseProps, isLoading, error, className, style, }: BarChartProps): ReactElement;

package/types/charts/BarLineChart/BarLineChart.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement } from 'react';
+import { type AxisConfig, type ChartCellProps, type ChartMargins, type ChartRow, type CurveType, type Series } from '../_shared/types';
+export interface BarLineChartProps extends ChartCellProps {
+    barSeries?: readonly Series[];
+    lineSeries?: readonly Series[];
+    data?: readonly ChartRow[];
+    x?: string;
+    bar?: string | readonly string[];
+    line?: string | readonly string[];
+    xAxis?: AxisConfig;
+    yLeft?: AxisConfig;
+    yRight?: AxisConfig;
+    height?: number;
+    colors?: readonly string[];
+    curve?: CurveType;
+    legend?: boolean;
+    tooltip?: boolean;
+    margins?: Partial<ChartMargins>;
+    title?: string;
+    description?: string;
+}
+export declare function BarLineChart({ barSeries, lineSeries, data, x, bar, line, xAxis, yLeft, yRight, height, colors, curve, legend, tooltip, margins: marginOverride, title, description, size, baseProps, isLoading, error, className, style, }: BarLineChartProps): ReactElement;

package/types/charts/DonutChart/DonutChart.d.ts

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+import { type PieChartProps } from '../PieChart/PieChart';
+export interface DonutChartProps extends Omit<PieChartProps, 'innerRadius'> {
+    innerRadius?: number;
+}
+export declare function DonutChart({ innerRadius, className, ...rest }: DonutChartProps): ReactElement;

package/types/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement } from 'react';
+import { type ChartRange } from '../_shared/brush-range';
+import { type AxisConfig, type ChartCellProps, type ChartMargins, type ChartRow, type CurveType, type ReferenceLineSpec, type Series } from '../_shared/types';
+export type { ChartRange } from '../_shared/brush-range';
+export interface LineChartProps extends ChartCellProps {
+    series?: readonly Series[] | string;
+    data?: readonly ChartRow[];
+    x?: string;
+    y?: string | readonly string[];
+    xAxis?: AxisConfig;
+    yAxis?: AxisConfig;
+    height?: number;
+    colors?: readonly string[];
+    markers?: boolean;
+    fill?: boolean;
+    fillOpacity?: number;
+    curve?: CurveType;
+    legend?: boolean;
+    tooltip?: boolean;
+    margins?: Partial<ChartMargins>;
+    title?: string;
+    description?: string;
+    referenceLines?: readonly ReferenceLineSpec[];
+    selectedRange?: ChartRange | null;
+    onSelectRange?: (range: ChartRange | null) => void;
+}
+export declare function LineChart({ series, data, x, y, xAxis, yAxis, height, colors, markers, fill, fillOpacity, curve, legend, tooltip, margins: marginOverride, title, description, referenceLines, selectedRange, onSelectRange, size, baseProps, isLoading, error, className, style, }: LineChartProps): ReactElement;

package/types/charts/MetricChart/MetricChart.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from 'react';
+import type { AxisFormat, ChartCellProps, ChartRow, DataPoint } from '../_shared/types';
+export interface MetricChartProps extends ChartCellProps {
+    label: string;
+    value?: number | string;
+    format?: AxisFormat;
+    delta?: number | string;
+    deltaFormat?: AxisFormat;
+    deltaTone?: 'success' | 'danger' | 'neutral';
+    caption?: string;
+    trend?: readonly DataPoint[];
+    data?: readonly ChartRow[];
+    x?: string;
+    y?: string;
+    trendColor?: string;
+    trendHeight?: number;
+    trendTooltip?: boolean;
+    title?: string;
+    description?: string;
+}
+export declare function MetricChart({ label, value, format, delta, deltaFormat, deltaTone, caption, trend, data, x, y, trendColor, trendHeight, trendTooltip, title, description, size, baseProps, isLoading, error, className, style, }: MetricChartProps): ReactElement;

package/types/charts/PieChart/PieChart.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+import { type Slice } from '../_shared/encodings';
+import type { AxisFormat, ChartCellProps, ChartRow } from '../_shared/types';
+export type PieDatum = Slice;
+export interface PieChartProps extends ChartCellProps {
+    slices?: readonly PieDatum[];
+    data?: readonly ChartRow[];
+    label?: string;
+    value?: string;
+    height?: number;
+    colors?: readonly string[];
+    innerRadius?: number;
+    outerRadius?: number;
+    padAngle?: number;
+    sliceStroke?: string;
+    sliceStrokeWidth?: number;
+    legend?: boolean;
+    tooltip?: boolean;
+    format?: AxisFormat;
+    valueFormatter?: (value: number) => string;
+    centerLabel?: string;
+    centerSublabel?: string;
+    title?: string;
+    description?: string;
+}
+export declare function PieChart({ slices: slicesProp, data, label, value, height, colors, innerRadius, outerRadius, padAngle, sliceStroke, sliceStrokeWidth, legend, tooltip, format, valueFormatter, centerLabel, centerSublabel, title, description, size, baseProps, isLoading, error, className, style, }: PieChartProps): ReactElement;

package/types/charts/ScatterChart/ScatterChart.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement } from 'react';
+import { type AxisConfig, type ChartCellProps, type ChartMargins, type ChartRow, type Series } from '../_shared/types';
+export interface ScatterChartProps extends ChartCellProps {
+    series?: readonly Series[] | string;
+    data?: readonly ChartRow[];
+    x?: string;
+    y?: string | readonly string[];
+    label?: string;
+    xAxis?: AxisConfig;
+    yAxis?: AxisConfig;
+    height?: number;
+    colors?: readonly string[];
+    pointRadius?: number;
+    sizeKey?: string;
+    sizeRange?: readonly [number, number];
+    legend?: boolean;
+    tooltip?: boolean;
+    margins?: Partial<ChartMargins>;
+    title?: string;
+    description?: string;
+}
+export declare function ScatterChart({ series, data, x, y, label, xAxis, yAxis, height, colors, pointRadius, sizeKey, sizeRange, legend, tooltip, margins: marginOverride, title, description, size, baseProps, isLoading, error, className, style, }: ScatterChartProps): ReactElement;

package/types/charts/Sparkline/Sparkline.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement } from 'react';
+import type { AxisFormat, ChartCellProps, ChartRow, DataPoint } from '../_shared/types';
+export interface SparklineProps extends ChartCellProps {
+    data?: readonly DataPoint[] | readonly ChartRow[];
+    x?: string;
+    y?: string;
+    height?: number;
+    color?: string;
+    fill?: boolean;
+    strokeWidth?: number;
+    tooltip?: boolean;
+    format?: AxisFormat;
+    xFormat?: AxisFormat;
+    title?: string;
+    description?: string;
+}
+export declare function Sparkline({ data, x, y, height, color, fill, strokeWidth, tooltip, format, xFormat, title, description, size, baseProps, isLoading, error, className, style, }: SparklineProps): ReactElement;

package/types/charts/WaterfallChart/WaterfallChart.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from 'react';
+import { type Step } from '../_shared/encodings';
+import { type AxisConfig, type ChartCellProps, type ChartMargins, type ChartRow } from '../_shared/types';
+export type WaterfallBarDatum = Step;
+export interface WaterfallChartProps extends ChartCellProps {
+    bars?: readonly WaterfallBarDatum[];
+    data?: readonly ChartRow[];
+    label?: string;
+    value?: string;
+    total?: string;
+    xAxis?: AxisConfig;
+    yAxis?: AxisConfig;
+    height?: number;
+    valueFormatter?: (v: number) => string;
+    valueLabels?: boolean;
+    margins?: Partial<ChartMargins>;
+    title?: string;
+    description?: string;
+}
+export declare function valueDomain(bars: readonly Pick<Step, 'base' | 'value'>[], plotHeight?: number): [number, number];
+export declare function WaterfallChart({ bars, data, label, value, total, xAxis, yAxis, height, valueFormatter, valueLabels, margins: marginOverride, title, description, size, baseProps, isLoading, error, className, style, }: WaterfallChartProps): ReactElement;

package/types/charts/_shared/ChartFrame.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import { type ChartLocale } from './axis-utils';
+import type { AxisFormat, AxisType, Series } from './types';
+export type ChartState = 'ready' | 'loading' | 'error' | 'empty';
+export declare function chartState({ hasData, isLoading, error }: {
+    hasData: boolean;
+    isLoading?: boolean;
+    error?: unknown;
+}): ChartState;
+export interface ChartTable {
+    columns: readonly string[];
+    rows: ReadonlyArray<ReadonlyArray<string>>;
+}
+export interface ChartFrameProps {
+    chartClass: string;
+    className?: string;
+    style?: CSSProperties;
+    title?: string;
+    description?: string;
+    width: number;
+    height: number;
+    measureRef?: Ref<HTMLDivElement>;
+    state: ChartState;
+    table?: ChartTable | null;
+    legend?: ReactNode;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+}
+export declare function ChartFrame({ chartClass, className, style, title, description, width, height, measureRef, state, table, legend, tooltip, children, }: ChartFrameProps): ReactElement;
+export declare function ChartDataTable({ table }: {
+    table: ChartTable;
+}): ReactElement;
+export interface SeriesTableOptions {
+    xLabel: string;
+    xType?: AxisType;
+    xFormat?: AxisFormat;
+    xFormatter?: (v: number | Date | string) => string;
+    yFormat?: AxisFormat;
+    yFormatter?: (v: number | Date | string) => string;
+    loc?: ChartLocale;
+}
+export declare function seriesTable(series: readonly Series[], opts: SeriesTableOptions): ChartTable;

package/types/charts/_shared/axis-utils.d.ts

@@ -0,0 +1,21 @@
+import { type AxisConfig, type AxisFormat, type ChartMargins } from './types';
+export interface ChartLocale {
+    locale: string;
+    currency: string;
+}
+export declare const DEFAULT_LOCALE: ChartLocale;
+export declare function chartLocale(baseProps?: unknown): ChartLocale;
+export declare function formatValue(value: number | Date | string, format?: AxisFormat, loc?: ChartLocale): string;
+export declare function timeTickFormatter(ticks: readonly Date[], loc?: ChartLocale): (v: number | Date | string) => string;
+export declare function axisFormatter(config: AxisConfig | undefined, loc?: ChartLocale, fallback?: AxisFormat): (v: number | Date | string) => string;
+export declare function targetTickCount(range: number, pixelsPerTick?: number): number;
+export declare function estimateLabelWidth(text: string): number;
+export declare function computeYAxisMargin(sampleValues: readonly (number | Date | string)[], format?: AxisFormat, formatter?: (v: number | Date | string) => string, min?: number, loc?: ChartLocale): number;
+export declare const NARROW_MARGINS: ChartMargins;
+export declare function chartMargins({ narrow, yTicks, yAxis, loc, override, }: {
+    narrow: boolean;
+    yTicks: readonly (number | Date | string)[];
+    yAxis?: AxisConfig;
+    loc?: ChartLocale;
+    override?: Partial<ChartMargins>;
+}): ChartMargins;

package/types/charts/_shared/brush-range.d.ts

@@ -0,0 +1,22 @@
+import type { AxisType } from './types';
+export type ChartRange = readonly [number | string | Date, number | string | Date];
+export declare function asChartRange(value: unknown): ChartRange | null;
+type OrdinalScale = {
+    (v: string): number | undefined;
+    domain: () => string[];
+    step?: () => number;
+};
+export declare function invertPointScale(scale: OrdinalScale, selection: readonly [number, number]): [string, string] | null;
+export declare function projectPointRange(scale: {
+    (v: string): number | undefined;
+    step?: () => number;
+}, from: string, to: string): {
+    x: number;
+    width: number;
+} | null;
+export declare function projectRange(range: ChartRange | null | undefined, xScale: unknown, xType: AxisType): {
+    x: number;
+    width: number;
+} | null;
+export declare function rangeFromPixels(selection: readonly [number, number], xScale: unknown, xType: AxisType): ChartRange | null;
+export {};

package/types/charts/_shared/encodings.d.ts

@@ -0,0 +1,41 @@
+import type { AxisType, DataPoint, Series, XYEncodings } from './types';
+export declare function toNumber(value: unknown): number | null;
+export declare function toX(value: unknown): DataPoint['x'] | null;
+export declare function cleanSeries(series: readonly unknown[]): Series[];
+export declare function toSeries(enc: XYEncodings): Series[];
+export declare function toPoints(data: unknown, keys?: {
+    x?: string;
+    y?: string;
+}): DataPoint[];
+export interface Slice {
+    id: string;
+    label?: string;
+    value: number;
+    color?: string;
+}
+export declare function toSlices(data: unknown, keys?: {
+    label?: string;
+    value?: string;
+    color?: string;
+}): Slice[];
+export declare function cleanSlices(slices: readonly unknown[]): Slice[];
+export interface Step {
+    label: string;
+    base: number;
+    value: number;
+    display: number;
+    color?: string;
+    total?: boolean;
+}
+export declare function cleanSteps(bars: readonly unknown[]): Step[];
+export declare function toSteps(data: unknown, keys?: {
+    label?: string;
+    value?: string;
+    total?: string;
+}): Step[];
+export declare function inferXType(series: readonly Series[]): AxisType;
+export declare const hasPoints: (series: readonly Series[]) => boolean;
+export declare function xValues(series: readonly Series[]): Array<{
+    key: string;
+    x: DataPoint['x'];
+}>;

package/types/charts/_shared/palette.d.ts

@@ -0,0 +1,12 @@
+import { type Tone } from '@stack/core';
+export declare const CHART_SERIES_COUNT = 8;
+export declare function seriesToken(index: number): string;
+export declare function toneColor(tone: Tone): string;
+export declare function resolveColor(declared: string | undefined | null): string | undefined;
+export declare function resolveSeriesColor(declared: string | undefined | null, index: number): string;
+export declare function chartColors(seriesCount: number, override?: readonly (string | undefined)[]): string[];
+export declare function useChartColors(seriesCount: number, override?: readonly (string | undefined)[]): string[];
+export declare function seriesColors(series: readonly {
+    color?: string;
+}[], override?: readonly (string | undefined)[]): string[];
+export declare function markerPath(index: number, size?: number): string;

package/types/charts/_shared/reference-lines.d.ts

@@ -0,0 +1,19 @@
+import type { AxisType, ReferenceLineSpec } from './types';
+export interface ProjectedReferenceLine {
+    key: string;
+    x?: number;
+    y?: number;
+    stroke?: string;
+    strokeDasharray?: string;
+    label?: string;
+    labelPosition?: ReferenceLineSpec['labelPosition'];
+    labelColor?: string;
+    labelFontSize?: number;
+}
+interface ProjectArgs {
+    xType: AxisType;
+    xScale: unknown;
+    yScale: (v: number) => number;
+}
+export declare function projectReferenceLines(specs: readonly ReferenceLineSpec[] | undefined, { xType, xScale, yScale }: ProjectArgs): ProjectedReferenceLine[];
+export {};

package/types/charts/_shared/scales.d.ts

@@ -0,0 +1,14 @@
+import { type ScaleBand, type ScaleLinear, type ScalePoint, type ScaleTime } from 'd3-scale';
+import type { AxisType, DataPoint, Series } from './types';
+export declare function buildYScale(series: readonly Series[], range: [number, number], options?: {
+    includeZero?: boolean;
+    stacked?: boolean;
+}): ScaleLinear<number, number>;
+export declare function buildXLinearScale(series: readonly Series[], range: [number, number]): ScaleLinear<number, number>;
+export declare function buildXTimeScale(series: readonly Series[], range: [number, number]): ScaleTime<number, number>;
+export declare function buildXBandScale(series: readonly Series[], range: [number, number], padding?: number): ScaleBand<string>;
+export declare function buildXPointScale(series: readonly Series[], range: [number, number]): ScalePoint<string>;
+export declare function orderedXKeys(series: readonly Series[]): string[];
+export declare function pointXKey(p: Pick<DataPoint, 'x'>): string;
+export declare function coerceX(x: DataPoint['x'], type: AxisType): number | string;
+export declare function xPosition(scale: unknown, type: AxisType, p: Pick<DataPoint, 'x'>): number;

package/types/charts/_shared/types.d.ts

@@ -0,0 +1,66 @@
+import type { CSSProperties } from 'react';
+export interface DataPoint {
+    x: number | string | Date;
+    y: number;
+    [extra: string]: unknown;
+}
+export interface Series<T extends DataPoint = DataPoint> {
+    id: string;
+    label?: string;
+    color?: string;
+    strokeDasharray?: string;
+    data: T[];
+}
+export type ChartRow = Readonly<Record<string, unknown>>;
+export interface XYEncodings {
+    data?: readonly ChartRow[];
+    x?: string;
+    y?: string | readonly string[];
+    series?: readonly Series[] | string;
+}
+export interface CategoryEncodings {
+    data?: readonly ChartRow[];
+    label?: string;
+    value?: string | readonly string[];
+}
+export interface ChartSize {
+    width: number;
+    height: number;
+}
+export interface ChartCellProps {
+    size?: ChartSize;
+    baseProps?: unknown;
+    isLoading?: boolean;
+    error?: Error | string | null;
+    className?: string;
+    style?: CSSProperties;
+}
+export type AxisType = 'time' | 'linear' | 'band';
+export type AxisFormat = 'date' | 'date-short' | 'currency' | 'percent' | 'number' | 'compact';
+export interface AxisConfig {
+    type?: AxisType;
+    format?: AxisFormat;
+    label?: string;
+    formatter?: (value: number | Date | string) => string;
+    ticks?: number;
+    axisLine?: boolean;
+    tickLine?: boolean;
+}
+export interface ReferenceLineSpec {
+    x?: number | string | Date;
+    y?: number;
+    color?: string;
+    strokeDasharray?: string;
+    label?: string;
+    labelPosition?: 'top' | 'insideTopLeft' | 'insideTopRight' | 'insideBottomLeft' | 'insideBottomRight';
+    labelColor?: string;
+    labelFontSize?: number;
+}
+export type CurveType = 'linear' | 'monotone';
+export interface ChartMargins {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export declare const DEFAULT_MARGINS: ChartMargins;

package/types/charts/_shared/use-dimensions.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from 'react';
+import type { ChartSize } from './types';
+export interface ChartDimensions {
+    width: number;
+    height: number;
+}
+export declare const NARROW_WIDTH = 480;
+export declare const isNarrow: (width: number) => boolean;
+export declare function useDimensions(height: number, size?: ChartSize): {
+    ref: RefObject<HTMLDivElement | null>;
+    dims: ChartDimensions;
+};

package/types/charts/_shared/use-focus.d.ts

@@ -0,0 +1,23 @@
+import { type FocusEvent, type KeyboardEvent } from 'react';
+export interface FocusIndex {
+    row: number;
+    col: number;
+}
+export interface UseChartFocusArgs {
+    lengths: readonly number[];
+    onFocusTarget: (row: number, col: number, el: Element) => void;
+    onBlurTarget: () => void;
+}
+export interface ChartTargetProps {
+    tabIndex: 0 | -1;
+    ref: (el: SVGElement | null) => void;
+    onFocus: (e: FocusEvent<SVGElement>) => void;
+    onBlur: () => void;
+    onKeyDown: (e: KeyboardEvent<SVGElement>) => void;
+    'data-focused'?: 'true';
+}
+export declare function nextFocus(lengths: readonly number[], at: FocusIndex, key: string): FocusIndex | null;
+export declare function useChartFocus({ lengths, onFocusTarget, onBlurTarget }: UseChartFocusArgs): {
+    focused: FocusIndex | null;
+    targetProps: (row: number, col: number) => ChartTargetProps;
+};

package/types/charts/_shared/use-hover.d.ts

@@ -0,0 +1,23 @@
+import { type PointerEvent } from 'react';
+export interface HoverState<P> {
+    x: number;
+    y: number;
+    payload: P;
+}
+export interface UseChartHoverArgs<P> {
+    viewBoxWidth: number;
+    viewBoxHeight: number;
+    findNearest: (svgX: number, svgY: number) => {
+        payload: P;
+        anchorX: number;
+        anchorY: number;
+    } | null;
+}
+export interface UseChartHoverResult<P> {
+    hover: HoverState<P> | null;
+    onPointerMove: (e: PointerEvent<SVGElement>) => void;
+    onPointerLeave: () => void;
+    showAt: (payload: P, anchorX: number, anchorY: number, from?: Element | null) => void;
+    hide: () => void;
+}
+export declare function useChartHover<P>({ viewBoxWidth, viewBoxHeight, findNearest }: UseChartHoverArgs<P>): UseChartHoverResult<P>;

package/types/charts/primitives/Axis/Axis.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react';
+import { type ChartLocale } from '../../_shared/axis-utils';
+import type { AxisConfig, ChartMargins } from '../../_shared/types';
+type Scale = {
+    (v: never): number;
+    ticks?: (count?: number) => unknown[];
+    domain: () => unknown[];
+    bandwidth?: () => number;
+};
+export interface AxisProps {
+    orientation: 'bottom' | 'left' | 'right';
+    scale: Scale;
+    margins: ChartMargins;
+    width: number;
+    height: number;
+    config?: AxisConfig;
+    gridlines?: boolean;
+    locale?: ChartLocale;
+    narrow?: boolean;
+}
+export declare function Axis({ orientation, scale, margins, width, height, config, gridlines, locale, narrow }: AxisProps): ReactElement;
+export {};

package/types/charts/primitives/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface ChartTooltipRow {
+    id: string;
+    label: ReactNode;
+    value: ReactNode;
+    color?: string;
+}
+export interface ChartTooltipProps {
+    x: number;
+    y: number;
+    visible: boolean;
+    containerWidth?: number;
+    heading?: ReactNode;
+    rows?: readonly ChartTooltipRow[];
+    children?: ReactNode;
+}
+export declare function ChartTooltip({ x, y, visible, containerWidth, heading, rows, children }: ChartTooltipProps): ReactElement | null;

package/types/charts/primitives/Legend/Legend.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from 'react';
+export interface LegendItem {
+    id: string;
+    label: string;
+    color: string;
+    kind?: 'square' | 'line' | 'marker';
+    dash?: string;
+    marker?: string;
+}
+export interface LegendProps {
+    items: readonly LegendItem[];
+}
+export declare function Legend({ items }: LegendProps): ReactElement | null;

package/types/charts/primitives/PlotArea/PlotArea.d.ts

@@ -0,0 +1,14 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { ChartMargins } from '../../_shared/types';
+export interface PlotAreaProps {
+    width: number;
+    height: number;
+    margins: ChartMargins;
+    background?: ReactNode;
+    children?: ReactNode;
+    overlay?: ReactNode;
+    title?: string;
+    description?: string;
+    interactive?: boolean;
+}
+export declare function PlotArea({ width, height, margins, background, children, overlay, title, description, interactive }: PlotAreaProps): ReactElement;