@classic-homes/charts-core 0.1.1

package/dist/types/index.d.ts

@@ -0,0 +1,488 @@
+/**
+ * Data structure types for all chart components
+ */
+interface LineChartData {
+    /** X-axis category labels */
+    categories: string[];
+    /** Data series */
+    series: LineSeriesData[];
+}
+interface LineSeriesData {
+    /** Series name (shown in legend) */
+    name: string;
+    /** Data values corresponding to categories */
+    data: number[];
+    /** Override theme color for this series */
+    color?: string;
+}
+interface BarChartData {
+    /** Category labels */
+    categories: string[];
+    /** Data series */
+    series: BarSeriesData[];
+}
+interface BarSeriesData {
+    /** Series name (shown in legend) */
+    name: string;
+    /** Data values corresponding to categories */
+    data: number[];
+    /** Override theme color for this series */
+    color?: string;
+}
+interface PieSliceData {
+    /** Slice name (shown in legend/tooltip) */
+    name: string;
+    /** Slice value */
+    value: number;
+    /** Override theme color for this slice */
+    color?: string;
+}
+interface AreaChartData {
+    /** X-axis category labels */
+    categories: string[];
+    /** Data series */
+    series: AreaSeriesData[];
+}
+interface AreaSeriesData {
+    /** Series name (shown in legend) */
+    name: string;
+    /** Data values corresponding to categories */
+    data: number[];
+    /** Override theme color for this series */
+    color?: string;
+}
+interface ScatterChartData {
+    /** Data series */
+    series: ScatterSeriesData[];
+}
+interface ScatterSeriesData {
+    /** Series name (shown in legend) */
+    name: string;
+    /** Data points as [x, y] coordinate pairs */
+    data: [number, number][];
+    /** Override theme color for this series */
+    color?: string;
+}
+interface RadarChartData {
+    /** Data series */
+    series: RadarSeriesData[];
+}
+interface RadarSeriesData {
+    /** Series name (shown in legend) */
+    name: string;
+    /** Values for each indicator in order */
+    data: number[];
+    /** Override theme color for this series */
+    color?: string;
+}
+interface RadarIndicator {
+    /** Indicator name */
+    name: string;
+    /** Maximum value for this indicator */
+    max: number;
+    /** Minimum value for this indicator (defaults to 0) */
+    min?: number;
+}
+interface FunnelSliceData {
+    /** Stage name */
+    name: string;
+    /** Stage value */
+    value: number;
+    /** Override theme color for this slice */
+    color?: string;
+}
+interface HeatmapData {
+    /** Data points as [xIndex, yIndex, value] */
+    data: [number, number, number][];
+    /** Minimum value for color scale */
+    min?: number;
+    /** Maximum value for color scale */
+    max?: number;
+}
+interface TreemapNode {
+    /** Node name */
+    name: string;
+    /** Node value (leaf nodes) */
+    value?: number;
+    /** Child nodes */
+    children?: TreemapNode[];
+    /** Override theme color for this node */
+    color?: string;
+}
+interface TreemapLevel {
+    /** Level index (0 = root) */
+    depth?: number;
+    /** Item style for this level */
+    itemStyle?: {
+        borderColor?: string;
+        borderWidth?: number;
+        gapWidth?: number;
+    };
+    /** Label style for this level */
+    label?: {
+        show?: boolean;
+        position?: 'inside' | 'outside';
+    };
+}
+interface CandlestickData {
+    /** Date/time labels for x-axis */
+    dates: string[];
+    /** OHLC data */
+    data: CandlestickItem[];
+    /** Volume data (optional) */
+    volume?: number[];
+}
+interface CandlestickItem {
+    /** Opening price */
+    open: number;
+    /** Closing price */
+    close: number;
+    /** Highest price */
+    high: number;
+    /** Lowest price */
+    low: number;
+}
+interface SankeyData {
+    /** Nodes in the diagram */
+    nodes: SankeyNode[];
+    /** Links between nodes */
+    links: SankeyLink[];
+}
+interface SankeyNode {
+    /** Unique node name/id */
+    name: string;
+    /** Override theme color for this node */
+    color?: string;
+}
+interface SankeyLink {
+    /** Source node name */
+    source: string;
+    /** Target node name */
+    target: string;
+    /** Flow value */
+    value: number;
+}
+
+/**
+ * Event parameter types for chart interactions
+ */
+/**
+ * Base event parameters shared across all events
+ */
+interface BaseEventParams {
+    /** Event type */
+    type: string;
+    /** Component type that triggered the event */
+    componentType: string;
+    /** Series index */
+    seriesIndex?: number;
+    /** Series name */
+    seriesName?: string;
+    /** Data index within the series */
+    dataIndex?: number;
+    /** Original event object */
+    event?: MouseEvent;
+}
+/**
+ * Event params for data point interactions (line, bar, area, scatter)
+ */
+interface DataPointEventParams extends BaseEventParams {
+    /** Category/x-axis value */
+    name: string;
+    /** Data value */
+    value: number | number[];
+    /** Series name */
+    seriesName: string;
+    /** Data index */
+    dataIndex: number;
+    /** Color of the data point */
+    color?: string;
+}
+/**
+ * Event params for slice interactions (pie, donut, funnel)
+ */
+interface SliceEventParams extends BaseEventParams {
+    /** Slice name */
+    name: string;
+    /** Slice value */
+    value: number;
+    /** Percentage of total */
+    percent?: number;
+    /** Color of the slice */
+    color?: string;
+}
+/**
+ * Event params for heatmap cell interactions
+ */
+interface HeatmapEventParams extends BaseEventParams {
+    /** X-axis index */
+    xIndex: number;
+    /** Y-axis index */
+    yIndex: number;
+    /** X-axis label */
+    xLabel: string;
+    /** Y-axis label */
+    yLabel: string;
+    /** Cell value */
+    value: number;
+}
+/**
+ * Event params for treemap node interactions
+ */
+interface TreemapEventParams extends BaseEventParams {
+    /** Node name */
+    name: string;
+    /** Node value */
+    value: number;
+    /** Full path from root to this node */
+    path: string[];
+    /** Node depth level */
+    depth: number;
+}
+/**
+ * Event params for candlestick interactions
+ */
+interface CandlestickEventParams extends BaseEventParams {
+    /** Date/time label */
+    date: string;
+    /** Opening price */
+    open: number;
+    /** Closing price */
+    close: number;
+    /** Highest price */
+    high: number;
+    /** Lowest price */
+    low: number;
+    /** Volume (if available) */
+    volume?: number;
+}
+/**
+ * Event params for sankey diagram interactions
+ */
+interface SankeyEventParams extends BaseEventParams {
+    /** Interaction type */
+    dataType: 'node' | 'edge';
+    /** For nodes: node name. For edges: source-target string */
+    name: string;
+    /** For edges: flow value */
+    value?: number;
+    /** For edges: source node name */
+    source?: string;
+    /** For edges: target node name */
+    target?: string;
+}
+
+/**
+ * Base chart props shared across all chart components
+ */
+interface BaseChartProps {
+    /** Chart title - required for accessibility (used as aria-label) */
+    title: string;
+    /** Optional description for screen readers */
+    description?: string;
+    /** Chart height in pixels or CSS value */
+    height?: number | string;
+    /** Minimum height constraint */
+    minHeight?: number;
+    /** Maximum height constraint */
+    maxHeight?: number;
+    /** Show loading skeleton */
+    loading?: boolean;
+    /** Error message to display */
+    error?: string | null;
+    /** Message shown when data is empty */
+    emptyMessage?: string;
+    /** Theme preference */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Enable/disable animations (respects prefers-reduced-motion) */
+    animation?: boolean;
+    /** Show chart legend */
+    showLegend?: boolean;
+    /** Show tooltip on hover */
+    showTooltip?: boolean;
+    /** Show grid lines (where applicable) */
+    showGrid?: boolean;
+    /** Custom CSS class */
+    class?: string;
+}
+/**
+ * Line chart specific props
+ */
+interface LineChartProps extends BaseChartProps {
+    /** Chart data */
+    data: LineChartData;
+    /** Use smooth curved lines */
+    smooth?: boolean;
+    /** Fill area under the line */
+    areaFilled?: boolean;
+    /** Show data points on the line */
+    showDataPoints?: boolean;
+    /** Stack multiple series */
+    stacked?: boolean;
+    /** Click event handler */
+    onClick?: (params: DataPointEventParams) => void;
+    /** Hover event handler */
+    onHover?: (params: DataPointEventParams) => void;
+}
+/**
+ * Bar chart specific props
+ */
+interface BarChartProps extends BaseChartProps {
+    /** Chart data */
+    data: BarChartData;
+    /** Bar orientation */
+    orientation?: 'vertical' | 'horizontal';
+    /** Stack multiple series */
+    stacked?: boolean;
+    /** Show value labels on bars */
+    showValues?: boolean;
+    /** Click event handler */
+    onClick?: (params: DataPointEventParams) => void;
+}
+/**
+ * Pie chart specific props
+ */
+interface PieChartProps extends BaseChartProps {
+    /** Chart data */
+    data: PieSliceData[];
+    /** Show slice labels */
+    showLabels?: boolean;
+    /** Label position */
+    labelPosition?: 'inside' | 'outside';
+    /** Inner radius (0 for pie, percentage string for donut) */
+    innerRadius?: number | string;
+    /** Click event handler */
+    onClick?: (params: SliceEventParams) => void;
+}
+/**
+ * Donut chart props (extends pie with default inner radius)
+ */
+interface DonutChartProps extends Omit<PieChartProps, 'innerRadius'> {
+    /** Inner radius (defaults to '50%') */
+    innerRadius?: number | string;
+    /** Center label text */
+    centerLabel?: string;
+    /** Center value text */
+    centerValue?: string | number;
+}
+/**
+ * Area chart specific props
+ */
+interface AreaChartProps extends BaseChartProps {
+    /** Chart data */
+    data: AreaChartData;
+    /** Use smooth curved lines */
+    smooth?: boolean;
+    /** Stack multiple series */
+    stacked?: boolean;
+    /** Use gradient fill */
+    gradient?: boolean;
+    /** Click event handler */
+    onClick?: (params: DataPointEventParams) => void;
+}
+/**
+ * Scatter chart specific props
+ */
+interface ScatterChartProps extends BaseChartProps {
+    /** Chart data */
+    data: ScatterChartData;
+    /** Show trend/regression line */
+    showTrendLine?: boolean;
+    /** Symbol size (fixed or function) */
+    symbolSize?: number | ((value: number[]) => number);
+    /** Click event handler */
+    onClick?: (params: DataPointEventParams) => void;
+}
+/**
+ * Radar chart specific props
+ */
+interface RadarChartProps extends BaseChartProps {
+    /** Chart data */
+    data: RadarChartData;
+    /** Radar indicators/dimensions */
+    indicators: RadarIndicator[];
+    /** Radar shape */
+    shape?: 'polygon' | 'circle';
+}
+/**
+ * Funnel chart specific props
+ */
+interface FunnelChartProps extends BaseChartProps {
+    /** Chart data */
+    data: FunnelSliceData[];
+    /** Sort order */
+    sort?: 'ascending' | 'descending' | 'none';
+    /** Funnel orientation */
+    orientation?: 'vertical' | 'horizontal';
+    /** Show value labels */
+    showLabels?: boolean;
+    /** Click event handler */
+    onClick?: (params: SliceEventParams) => void;
+}
+/**
+ * Gauge chart specific props
+ */
+interface GaugeChartProps extends BaseChartProps {
+    /** Current value */
+    value: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Number of split sections */
+    splitNumber?: number;
+    /** Show progress arc */
+    showProgress?: boolean;
+    /** Value format function */
+    formatValue?: (value: number) => string;
+}
+/**
+ * Heatmap chart specific props
+ */
+interface HeatmapChartProps extends BaseChartProps {
+    /** Chart data */
+    data: HeatmapData;
+    /** X-axis labels */
+    xAxis: string[];
+    /** Y-axis labels */
+    yAxis: string[];
+    /** Show values in cells */
+    showValues?: boolean;
+    /** Click event handler */
+    onClick?: (params: HeatmapEventParams) => void;
+}
+/**
+ * Treemap chart specific props
+ */
+interface TreemapChartProps extends BaseChartProps {
+    /** Hierarchical data */
+    data: TreemapNode[];
+    /** Level configurations */
+    levels?: TreemapLevel[];
+    /** Click event handler */
+    onClick?: (params: TreemapEventParams) => void;
+}
+/**
+ * Candlestick chart specific props
+ */
+interface CandlestickChartProps extends BaseChartProps {
+    /** Chart data */
+    data: CandlestickData;
+    /** Show volume bars */
+    showVolume?: boolean;
+    /** Click event handler */
+    onClick?: (params: CandlestickEventParams) => void;
+}
+/**
+ * Sankey chart specific props
+ */
+interface SankeyChartProps extends BaseChartProps {
+    /** Chart data with nodes and links */
+    data: SankeyData;
+    /** Flow orientation */
+    orient?: 'horizontal' | 'vertical';
+    /** Click event handler */
+    onClick?: (params: SankeyEventParams) => void;
+}
+
+export type { AreaChartData, AreaChartProps, AreaSeriesData, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, BaseEventParams, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LineChartData, LineChartProps, LineSeriesData, PieChartProps, PieSliceData, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartData, ScatterChartProps, ScatterSeriesData, SliceEventParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode };

package/dist/types/index.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@classic-homes/charts-core",
+  "version": "0.1.1",
+  "description": "Core utilities and theme for Classic Theme charts",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.cjs"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js",
+      "require": "./dist/types/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@classic-homes/theme-tokens": "*"
+  },
+  "peerDependencies": {
+    "echarts": "^5.5.0"
+  },
+  "devDependencies": {
+    "echarts": "^5.5.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}