UNPKG

claritykit-svelte

Version:

A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility

244 lines 8.19 kB
export type ChartDataPoint = { x: any; y: any; [key: string]: any; }; export type ChartSeries = { name: string; data: ChartDataPoint[]; color?: string; visible?: boolean; }; export type ScaleType = 'linear' | 'time' | 'band' | 'log'; export type CurveType = 'linear' | 'step' | 'smooth' | 'monotone'; export type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | 'none'; export type Orientation = 'horizontal' | 'vertical'; export interface Margin { top: number; right: number; bottom: number; left: number; } export interface BaseChartProps { /** Width of the chart in pixels */ width?: number; /** Height of the chart in pixels */ height?: number; /** Margins around the chart */ margin?: Partial<Margin> | number; /** Chart data */ data: any[]; /** Accessor function for x values */ xAccessor?: (d: any) => any; /** Accessor function for y values */ yAccessor?: (d: any) => any; /** Accessor function for colors */ colorAccessor?: (d: any, i: number) => string; /** Type of x-axis scale */ xScaleType?: ScaleType; /** Type of y-axis scale */ yScaleType?: ScaleType; /** Type of curve for line/area charts */ curveType?: CurveType; /** Whether to animate transitions */ animate?: boolean; /** Duration of animations in milliseconds */ duration?: number; /** Whether to show grid lines */ showGrid?: boolean; /** Whether to show the x-axis */ showXAxis?: boolean; /** Whether to show the y-axis */ showYAxis?: boolean; /** Whether to show tooltips */ showTooltip?: boolean; /** Format function for tooltip values */ tooltipFormat?: (d: any) => string; /** Format function for x-axis ticks */ xAxisFormat?: (d: any) => string; /** Format function for y-axis ticks */ yAxisFormat?: (d: any) => string; /** Label for the x-axis */ xLabel?: string; /** Label for the y-axis */ yLabel?: string; /** ARIA label for the chart */ ariaLabel?: string; /** ARIA description for the chart */ ariaDescription?: string; /** Class name for the chart container */ className?: string; /** Style object for the chart container */ style?: Record<string, string | number>; } export interface LineChartProps extends Omit<BaseChartProps, 'data'> { /** Array of data points */ data: ChartDataPoint[] | ChartSeries[]; /** Names of the series (if data is an array of points) */ series?: string[]; /** Colors for the lines */ colors?: string[]; /** Width of the lines in pixels */ strokeWidth?: number; /** Whether to show data points */ showPoints?: boolean; /** Radius of the data points in pixels */ pointRadius?: number; /** Stroke width of the data points */ pointStrokeWidth?: number; /** Whether to show area under the line */ showArea?: boolean; /** Opacity of the area fill (0-1) */ areaOpacity?: number; /** Whether to show the legend */ showLegend?: boolean; /** Position of the legend */ legendPosition?: LegendPosition; /** Orientation of the legend */ legendOrientation?: Orientation; /** Whether the chart is interactive */ interactive?: boolean; /** Whether to highlight series on hover */ highlightOnHover?: boolean; /** Stroke width when highlighting a line */ highlightStrokeWidth?: number; /** Point radius when highlighting a point */ highlightPointRadius?: number; /** Callback when a data point is clicked */ onPointClick?: (point: ChartDataPoint, event: MouseEvent) => void; /** Callback when a series is toggled in the legend */ onSeriesToggle?: (seriesName: string, isVisible: boolean) => void; /** Callback when the chart is rendered */ onRender?: () => void; } export interface BarChartProps extends Omit<BaseChartProps, 'data'> { /** Array of data points or series */ data: ChartDataPoint[] | ChartSeries[]; /** Whether the bars are horizontal */ horizontal?: boolean; /** Whether the bars are stacked */ stacked?: boolean; /** Padding between bars (0-1) */ barPadding?: number; /** Border radius of the bars in pixels */ barRadius?: number | [number, number, number, number]; /** Colors for the bars */ colors?: string[]; /** Whether to show the legend */ showLegend?: boolean; /** Position of the legend */ legendPosition?: LegendPosition; /** Whether the chart is interactive */ interactive?: boolean; /** Callback when a bar is clicked */ onBarClick?: (data: any, event: MouseEvent) => void; } export interface PieChartProps extends Omit<BaseChartProps, 'data'> { /** Array of data points */ data: Array<{ label: string; value: number; color?: string; }>; /** Inner radius for donut chart (0-1) */ innerRadius?: number; /** Padding between segments in radians */ padAngle?: number; /** Colors for the segments */ colors?: string[]; /** Whether to show labels */ showLabels?: boolean; /** Label format function */ labelFormat?: (d: any) => string; /** Whether to show the legend */ showLegend?: boolean; /** Position of the legend */ legendPosition?: LegendPosition; /** Whether the chart is interactive */ interactive?: boolean; /** Callback when a segment is clicked */ onSegmentClick?: (data: any, event: MouseEvent) => void; } export interface AreaChartProps extends LineChartProps { /** Whether to stack areas */ stacked?: boolean; /** Type of stacking */ stackOffset?: 'none' | 'wiggle' | 'expand' | 'diverging'; /** Opacity of the area fill (0-1) */ areaOpacity?: number; /** Whether to show the area stroke */ showAreaStroke?: boolean; /** Width of the area stroke */ areaStrokeWidth?: number; } export interface ScatterPlotProps extends Omit<BaseChartProps, 'data'> { /** Array of data points */ data: ChartDataPoint[]; /** Radius of the points */ pointRadius?: number | ((d: any) => number); /** Colors for the points */ colors?: string[] | ((d: any) => string); /** Whether to show a trend line */ showTrendLine?: boolean; /** Whether to show the legend */ showLegend?: boolean; /** Callback when a point is clicked */ onPointClick?: (point: ChartDataPoint, event: MouseEvent) => void; } export interface ChartMouseEvent { /** The mouse event */ event: MouseEvent; /** The data point */ data: any; /** The series (if applicable) */ series?: any; /** The index of the data point */ index: number; } export interface ChartTooltipProps { /** The data point */ data: any; /** The series (if applicable) */ series?: any; /** The index of the data point */ index: number; /** The x position of the tooltip */ x: number; /** The y position of the tooltip */ y: number; /** The color of the series */ color: string; } export interface AxisProps { /** The scale function */ scale: any; /** The orientation of the axis */ orientation: 'top' | 'right' | 'bottom' | 'left'; /** The number of ticks */ tickCount?: number; /** The format function for tick labels */ tickFormat?: (d: any) => string; /** The length of the tick lines */ tickSize?: number; /** The padding between the tick and the label */ tickPadding?: number; /** The rotation of the tick labels in degrees */ tickRotation?: number; /** Whether to hide the axis line */ hideAxisLine?: boolean; /** Whether to hide the ticks */ hideTicks?: boolean; /** Whether to hide the tick labels */ hideTickLabels?: boolean; /** The label for the axis */ label?: string; /** The offset of the label from the axis */ labelOffset?: number; /** The padding of the label */ labelPadding?: number; /** The class name for the axis */ className?: string; /** The style for the axis */ style?: Record<string, string | number>; } //# sourceMappingURL=types.d.ts.map