@dschz/solid-uplot/dist/index/index.d.ts

SolidJS wrapper for uPlot — ultra-fast, tiny time-series & charting library

import { V as VoidStruct, S as SolidUplotPluginBus, U as UplotPluginFactory } from '../createPluginBus-DdrjQANs.js';
export { a as UplotPluginFactoryContext, c as createPluginBus } from '../createPluginBus-DdrjQANs.js';
import { Ref } from '@solid-primitives/refs';
import { ParentProps, JSX } from 'solid-js';
import uPlot$1 from 'uplot';
import { C as CursorData, S as SeriesDatum } from '../getSeriesData-04wGQord.js';
import 'solid-js/store';

type OnCursorMoveParams = {
    /** The uPlot instance */
    readonly u: uPlot;
    /** The cursor data */
    readonly cursor: CursorData;
    /** Array of series data extracted from the chart configuration */
    readonly seriesData: SeriesDatum[];
};

/** Placement options for children components relative to the chart */
type ChildrenPlacement = "top" | "bottom";
/**
 * A SolidJS-compatible uPlot plugin that can be either a standard uPlot plugin
 * or a factory function that creates a plugin with access to the plugin bus
 *
 * @template T - The type of the plugin bus data structure
 */
type SolidUplotPlugin<T extends VoidStruct = VoidStruct> = uPlot$1.Plugin | UplotPluginFactory<T>;
/**
 * Configuration options for the SolidUplot component, extending uPlot.Options
 * with SolidJS-specific enhancements
 *
 * @template T - The type of the plugin bus data structure
 */
type SolidUplotOptions<T extends VoidStruct = VoidStruct> = Omit<uPlot$1.Options, "plugins" | "width" | "height"> & {
    /** Chart width in pixels */
    readonly width?: number;
    /** Chart height in pixels */
    readonly height?: number;
    /** Plugin communication bus for coordinating between plugins */
    readonly pluginBus?: SolidUplotPluginBus<T>;
    /** Array of plugins to apply to the chart */
    readonly plugins?: SolidUplotPlugin<T>[];
};
/**
 * Metadata provided to the onCreate callback when the chart is initialized
 */
type OnCreateMeta = {
    /** Array of series data extracted from the chart configuration */
    readonly seriesData: SeriesDatum[];
};
/**
 * Events that can be passed to the SolidUplot component
 */
type SolidUplotEvents = {
    /** Callback fired when the uPlot instance is created */
    readonly onCreate?: (u: uPlot$1, meta: OnCreateMeta) => void;
    /** Callback fired when the cursor moves */
    readonly onCursorMove?: (params: OnCursorMoveParams) => void;
};
/**
 * Props for the SolidUplot component
 *
 * @template T - The type of the plugin bus data structure
 */
type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> & SolidUplotEvents & {
    /** Class name for the chart container */
    readonly class?: string;
    /** CSS styles for the chart container (position is managed internally) */
    readonly style?: Omit<JSX.CSSProperties, "position">;
    /** Ref callback to access the chart container element */
    readonly ref?: Ref<HTMLDivElement>;
    /**
     * Enable automatic resizing to fit container.
     *
     * When true:
     * - Chart uses width/height props for initial render
     * - Then automatically adapts to container size changes
     * - If no width/height provided, uses sensible defaults (600x300)
     *
     * @default false
     */
    readonly autoResize?: boolean;
    /**
     * Whether to reset scales when chart data is updated
     * @default true
     */
    readonly resetScales?: boolean;
    /**
     * Where to place children components relative to the chart
     * @default "top"
     */
    readonly childrenPlacement?: ChildrenPlacement;
};
/**
 * A SolidJS wrapper component for uPlot charts with enhanced features
 *
 * This component provides:
 * - Reactive data updates
 * - Plugin system with communication bus
 * - Automatic resizing capabilities
 * - Flexible children placement
 * - TypeScript support with generics
 *
 * @template T - The type of the plugin bus data structure for type-safe plugin communication
 *
 * @param props - Component props extending uPlot options with SolidJS enhancements
 * @returns JSX element containing the chart and any children components
 *
 * @example
 * ```tsx
 * <SolidUplot
 *   data={chartData}
 *   height={400}
 *   autoResize
 *   series={[
 *     {},
 *     { label: "Series 1", stroke: "red" }
 *   ]}
 *   onCreate={(chart) => console.log("Chart created:", chart)}
 * />
 * ```
 */
declare const SolidUplot: <T extends VoidStruct = VoidStruct>(props: ParentProps<SolidUplotProps<T>>) => JSX.Element;

export { SolidUplot, SolidUplotPluginBus, UplotPluginFactory };