react-premium-charts 0.1.6

package/dist/index.d.ts

@@ -0,0 +1,478 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { ScaleBand, ScaleContinuousNumeric } from 'd3-scale';
+
+type ThemeMode = "light" | "dark";
+/** Predefined color palettes for chart series (--msc-s1 through --msc-s5) */
+type ChartPalette = "default" | "sage" | "periwinkle" | "indigo" | "ocean" | "forest";
+declare function ThemeProvider({ mode, palette, isGradientEnabled, children }: {
+    mode?: ThemeMode;
+    palette?: ChartPalette;
+    isGradientEnabled?: boolean;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): {
+    mode: ThemeMode;
+    palette: ChartPalette;
+    isGradientEnabled: boolean;
+};
+
+type ChartMargin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type ChartSize = {
+    width: number;
+    height: number;
+};
+type ChartContextValue = {
+    size: ChartSize;
+    margin: ChartMargin;
+    innerWidth: number;
+    innerHeight: number;
+    svgRef: React.RefObject<SVGSVGElement>;
+    pointer: {
+        x: number;
+        y: number;
+    } | null;
+    setPointer: (p: {
+        x: number;
+        y: number;
+    } | null) => void;
+    registerClearTooltip: (fn: () => void) => () => void;
+    clearAllTooltips: () => void;
+};
+declare function useChart(): ChartContextValue;
+declare function Chart({ width, height, margin, defs, children, className, style }: {
+    width: number;
+    height: number;
+    margin?: ChartMargin;
+    defs?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): react_jsx_runtime.JSX.Element;
+
+type Tick = {
+    value: string;
+    x: number;
+    y: number;
+};
+declare function AxisBottom({ ticks, y }: {
+    ticks: Tick[];
+    y?: number;
+}): react_jsx_runtime.JSX.Element;
+declare function AxisLeft({ ticks }: {
+    ticks: Tick[];
+}): react_jsx_runtime.JSX.Element;
+declare function AxisRight({ ticks, x }: {
+    ticks: Tick[];
+    x: number;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Grid({ xTicks, yTicks }: {
+    xTicks: number[];
+    yTicks: number[];
+}): react_jsx_runtime.JSX.Element;
+
+declare function ThresholdLine({ value, yScale, stroke, strokeWidth, strokeDasharray, label }: {
+    value: number;
+    yScale: (v: number) => number;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+    label?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function LinearGradient({ id, x1, y1, x2, y2, stops }: {
+    id: string;
+    x1?: string | number;
+    y1?: string | number;
+    x2?: string | number;
+    y2?: string | number;
+    stops: Array<{
+        offset: string | number;
+        color: string;
+        opacity?: number;
+    }>;
+}): react_jsx_runtime.JSX.Element;
+
+declare function RadialGradient({ id, cx, cy, r, fx, fy, stops }: {
+    id: string;
+    cx?: string | number;
+    cy?: string | number;
+    r?: string | number;
+    fx?: string | number;
+    fy?: string | number;
+    stops: Array<{
+        offset: string | number;
+        color: string;
+        opacity?: number;
+    }>;
+}): react_jsx_runtime.JSX.Element;
+
+declare function ChartTitle({ title, x, y }: {
+    title: string;
+    x?: number;
+    y?: number;
+}): react_jsx_runtime.JSX.Element;
+
+type LegendItem = {
+    label: string;
+    value?: string;
+    color: string;
+};
+declare function Legend({ items, direction }: {
+    items: LegendItem[];
+    direction?: "row" | "column";
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Computes tooltip position to stay within container bounds.
+ * Prefers top-right of anchor; flips horizontally/vertically as needed.
+ */
+declare function computeTooltipPosition(anchorX: number, anchorY: number, containerWidth: number, containerHeight: number, tooltipWidth?: number, tooltipHeight?: number): {
+    x: number;
+    y: number;
+};
+declare function TooltipPortal({ x, y, anchorX, anchorY, containerWidth, containerHeight, svgRef, margin, children }: {
+    x?: number;
+    y?: number;
+    anchorX?: number;
+    anchorY?: number;
+    containerWidth?: number;
+    containerHeight?: number;
+    svgRef?: React.RefObject<SVGSVGElement | null>;
+    margin?: {
+        left: number;
+        top: number;
+    };
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function DefaultTooltip({ title, rows }: {
+    title: string;
+    rows: Array<{
+        label: string;
+        value: string;
+        color: string;
+    }>;
+}): react_jsx_runtime.JSX.Element;
+
+type Datum = Record<string, unknown>;
+type Accessor<T extends Datum, V> = (d: T, i: number) => V;
+
+type TooltipContent = {
+    title: string;
+    rows: Array<{
+        label: string;
+        value: string;
+        color: string;
+    }>;
+};
+declare function BarSeries<T extends Datum>({ data, x, y, xScale, yScale, fill, radius, animate, duration, hoverDimOpacity, tooltip }: {
+    data: T[];
+    x: Accessor<T, string>;
+    y: Accessor<T, number>;
+    xScale: ScaleBand<string>;
+    yScale: ScaleContinuousNumeric<number, number>;
+    fill?: string;
+    radius?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function LineSeries<T extends Datum>({ data, x, y, xScale, yScale, stroke, strokeWidth, curve, showMarkers, animate, duration, hoverDimOpacity, tooltip }: {
+    data: T[];
+    x: Accessor<T, number>;
+    y: Accessor<T, number>;
+    xScale: ScaleContinuousNumeric<number, number>;
+    yScale: ScaleContinuousNumeric<number, number>;
+    stroke?: string;
+    strokeWidth?: number;
+    curve?: "monotone" | "linear";
+    showMarkers?: boolean;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function AreaSeries<T extends Datum>({ data, x, y, y0, xScale, yScale, fill, fillOpacity, curve, animate, duration }: {
+    data: T[];
+    x: Accessor<T, number>;
+    y: Accessor<T, number>;
+    y0?: number;
+    xScale: ScaleContinuousNumeric<number, number>;
+    yScale: ScaleContinuousNumeric<number, number>;
+    fill?: string;
+    fillOpacity?: number;
+    curve?: "monotone" | "linear";
+    animate?: boolean;
+    duration?: number;
+}): react_jsx_runtime.JSX.Element;
+
+declare function HorizontalBarSeries<T extends Datum>({ data, y, x, yScale, xScale, fill, radius, animate, duration, hoverDimOpacity, tooltip }: {
+    data: T[];
+    y: Accessor<T, string>;
+    x: Accessor<T, number>;
+    yScale: ScaleBand<string>;
+    xScale: ScaleContinuousNumeric<number, number>;
+    fill?: string;
+    radius?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+type GroupedBarConfig<T extends Datum> = {
+    y: Accessor<T, number>;
+    fill: string;
+    tooltip?: (d: T, i: number) => TooltipContent;
+};
+declare function GroupedBarSeries<T extends Datum>({ data, x, xScale, yScale, groups, radius, animate, duration, hoverDimOpacity }: {
+    data: T[];
+    x: Accessor<T, string>;
+    xScale: ScaleBand<string>;
+    yScale: ScaleContinuousNumeric<number, number>;
+    groups: GroupedBarConfig<T>[];
+    radius?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+}): react_jsx_runtime.JSX.Element;
+
+type StackedSegment = {
+    value: number;
+    fill: string;
+    label?: string;
+    tooltip?: TooltipContent;
+};
+declare function StackedBarSeries({ segments, orientation, radius, animate, duration, hoverDimOpacity, showValues, valueFormat }: {
+    segments: StackedSegment[];
+    orientation?: "horizontal" | "vertical";
+    radius?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    showValues?: boolean;
+    valueFormat?: (value: number) => string;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function PieSeries<T extends Datum>({ data, value, colors, innerRadius, outerRadius, padAngle, cornerRadius, animate, duration, hoverDimOpacity, tooltip }: {
+    data: T[];
+    value: Accessor<T, number>;
+    colors?: string[];
+    innerRadius?: number;
+    outerRadius?: number;
+    padAngle?: number;
+    cornerRadius?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function PolarAreaSeries<T extends Datum>({ data, value, colors, innerRadius, padAngle, cornerRadius, animate, duration, hoverDimOpacity, tooltip }: {
+    data: T[];
+    value: Accessor<T, number>;
+    colors?: string[];
+    innerRadius?: number;
+    padAngle?: number;
+    cornerRadius?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function PieChart<T extends Datum>({ data, value, label, colors, width, height, margin, showLegend, showValues, valueFormat, innerRadius, padAngle, cornerRadius, animate, defs, tooltip }: {
+    data: T[];
+    value: Accessor<T, number>;
+    label?: Accessor<T, string>;
+    colors?: string[];
+    width?: number;
+    height?: number;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    showLegend?: boolean;
+    showValues?: boolean;
+    valueFormat?: (value: number) => string;
+    innerRadius?: number;
+    padAngle?: number;
+    cornerRadius?: number;
+    animate?: boolean;
+    defs?: React.ReactNode;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function ComboChart<T extends Datum>({ data, x, bar, line, barLabel, lineLabel, barFill, lineStroke, width, height, margin, showMarkers, animate, defs, barTooltip, lineTooltip }: {
+    data: T[];
+    x: Accessor<T, string>;
+    bar: Accessor<T, number>;
+    line: Accessor<T, number>;
+    barLabel?: string;
+    lineLabel?: string;
+    barFill?: string;
+    lineStroke?: string;
+    width?: number;
+    height?: number;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    showMarkers?: boolean;
+    animate?: boolean;
+    defs?: React.ReactNode;
+    barTooltip?: (d: T, i: number) => TooltipContent;
+    lineTooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function RadarChart<T extends Datum>({ data, value, label, colors, width, height, margin, levels, animate, duration, fillOpacity, strokeWidth, fill, stroke, defs, tooltip }: {
+    data: T[];
+    value: Accessor<T, number>;
+    label: Accessor<T, string>;
+    colors?: string[];
+    width?: number;
+    height?: number;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    levels?: number;
+    animate?: boolean;
+    duration?: number;
+    fillOpacity?: number;
+    strokeWidth?: number;
+    fill?: string;
+    stroke?: string;
+    defs?: React.ReactNode;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function PolarAreaChart<T extends Datum>({ data, value, label, colors, width, height, margin, showLegend, showValues, valueFormat, animate, defs, tooltip }: {
+    data: T[];
+    value: Accessor<T, number>;
+    label?: Accessor<T, string>;
+    colors?: string[];
+    width?: number;
+    height?: number;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    showLegend?: boolean;
+    showValues?: boolean;
+    valueFormat?: (value: number) => string;
+    animate?: boolean;
+    defs?: React.ReactNode;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function MultiaxisLineChart<T extends Datum>({ data, x, leftLine, rightLine, leftLabel, rightLabel, leftStroke, rightStroke, width, height, margin, showMarkers, defs, leftTooltip, rightTooltip }: {
+    data: T[];
+    x: Accessor<T, string | number>;
+    leftLine: Accessor<T, number>;
+    rightLine: Accessor<T, number>;
+    leftLabel?: string;
+    rightLabel?: string;
+    leftStroke?: string;
+    rightStroke?: string;
+    width?: number;
+    height?: number;
+    margin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    showMarkers?: boolean;
+    defs?: React.ReactNode;
+    leftTooltip?: (d: T, i: number) => TooltipContent;
+    rightTooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function ScatterSeries<T extends Datum>({ data, x, y, xScale, yScale, fill, stroke, strokeWidth, radius, animate, duration, hoverDimOpacity, tooltip }: {
+    data: T[];
+    x: Accessor<T, number>;
+    y: Accessor<T, number>;
+    xScale: ScaleContinuousNumeric<number, number>;
+    yScale: ScaleContinuousNumeric<number, number>;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    radius?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+declare function BubbleSeries<T extends Datum>({ data, x, y, size, xScale, yScale, fill, stroke, strokeWidth, fillOpacity, animate, duration, hoverDimOpacity, tooltip }: {
+    data: T[];
+    x: Accessor<T, number>;
+    y: Accessor<T, number>;
+    size: Accessor<T, number>;
+    xScale: ScaleContinuousNumeric<number, number>;
+    yScale: ScaleContinuousNumeric<number, number>;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    fillOpacity?: number;
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (d: T, i: number) => TooltipContent;
+}): react_jsx_runtime.JSX.Element;
+
+type HeatmapCell = {
+    value: number;
+    label?: string;
+};
+type HeatmapGradientStop = {
+    offset: number;
+    color: string;
+};
+declare function HeatmapSeries({ rows, columns, data, colorScale, gradientStops, animate, duration, hoverDimOpacity, tooltip }: {
+    rows: string[];
+    columns: string[];
+    data: HeatmapCell[][];
+    colorScale?: string[];
+    gradientStops?: HeatmapGradientStop[];
+    animate?: boolean;
+    duration?: number;
+    hoverDimOpacity?: number;
+    tooltip?: (row: string, col: string, cell: HeatmapCell) => {
+        title: string;
+        rows: Array<{
+            label: string;
+            value: string;
+            color: string;
+        }>;
+    };
+}): react_jsx_runtime.JSX.Element;
+
+type NearestPoint<T extends Datum> = {
+    index: number;
+    datum: T;
+    x: number;
+    y: number;
+    distance: number;
+};
+declare function useNearestPoint<T extends Datum>(data: T[], xAccessor: Accessor<T, number>, xScale: (x: number) => number, yAccessor: Accessor<T, number>, yScale: (y: number) => number): (pointerX: number) => NearestPoint<T> | null;
+
+export { type Accessor, AreaSeries, AxisBottom, AxisLeft, AxisRight, BarSeries, BubbleSeries, Chart, type ChartMargin, type ChartPalette, type ChartSize, ChartTitle, ComboChart, type Datum, DefaultTooltip, Grid, type GroupedBarConfig, GroupedBarSeries, type HeatmapCell, type HeatmapGradientStop, HeatmapSeries, HorizontalBarSeries, Legend, type LegendItem, LineSeries, LinearGradient, MultiaxisLineChart, PieChart, PieSeries, PolarAreaChart, PolarAreaSeries, RadarChart, RadialGradient, ScatterSeries, StackedBarSeries, type StackedSegment, type ThemeMode, ThemeProvider, ThresholdLine, type TooltipContent, TooltipPortal, computeTooltipPosition, useChart, useNearestPoint, useTheme };