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
TypeScript
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