@classic-homes/charts-react 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +2188 -0
  2. package/dist/index.d.cts +174 -0
  3. package/dist/index.d.ts +174 -0
  4. package/dist/index.js +2167 -0
  5. package/package.json +48 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,174 @@
1
+ import * as React from 'react';
2
+ import { RefObject } from 'react';
3
+ import { LineChartProps, BarChartProps, PieChartProps, AreaChartProps, ScatterChartProps, DonutChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps } from '@classic-homes/charts-core';
4
+ export { AreaChartData, AreaChartProps, AreaSeriesData, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, 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 } from '@classic-homes/charts-core';
5
+ import * as echarts from 'echarts/core';
6
+ import { EChartsOption } from 'echarts';
7
+ import { ClassValue } from 'clsx';
8
+
9
+ interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
10
+ /** Chart title for accessibility */
11
+ title: string;
12
+ /** Optional description for screen readers */
13
+ description?: string;
14
+ /** Chart height */
15
+ height?: number | string;
16
+ /** Show loading state */
17
+ loading?: boolean;
18
+ /** Error message */
19
+ error?: string | null;
20
+ /** Show empty state */
21
+ empty?: boolean;
22
+ /** Empty state message */
23
+ emptyMessage?: string;
24
+ /** Retry callback for error state */
25
+ onRetry?: () => void;
26
+ /** Additional wrapper styles */
27
+ wrapperClassName?: string;
28
+ }
29
+ /**
30
+ * Container component for all charts
31
+ * Handles loading, error, and empty states
32
+ */
33
+ declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
34
+
35
+ interface ChartSkeletonProps {
36
+ height?: number | string;
37
+ className?: string;
38
+ }
39
+ /**
40
+ * Loading skeleton for charts
41
+ */
42
+ declare const ChartSkeleton: React.ForwardRefExoticComponent<ChartSkeletonProps & React.RefAttributes<HTMLDivElement>>;
43
+
44
+ interface ChartErrorProps {
45
+ message: string;
46
+ height?: number | string;
47
+ onRetry?: () => void;
48
+ className?: string;
49
+ }
50
+ /**
51
+ * Error state for charts
52
+ */
53
+ declare const ChartError: React.ForwardRefExoticComponent<ChartErrorProps & React.RefAttributes<HTMLDivElement>>;
54
+
55
+ interface ChartEmptyProps {
56
+ message?: string;
57
+ height?: number | string;
58
+ className?: string;
59
+ }
60
+ /**
61
+ * Empty state for charts with no data
62
+ */
63
+ declare const ChartEmpty: React.ForwardRefExoticComponent<ChartEmptyProps & React.RefAttributes<HTMLDivElement>>;
64
+
65
+ /**
66
+ * Line chart component for displaying trends over time
67
+ */
68
+ declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
69
+
70
+ /**
71
+ * Bar chart component for displaying categorical data
72
+ */
73
+ declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
74
+
75
+ /**
76
+ * Pie chart component for displaying proportional data
77
+ */
78
+ declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
79
+
80
+ /**
81
+ * Area chart component for displaying filled trends
82
+ */
83
+ declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
84
+
85
+ /**
86
+ * Scatter chart component for displaying X/Y relationships
87
+ */
88
+ declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<HTMLDivElement>>;
89
+
90
+ /**
91
+ * Donut chart component (pie chart with inner radius)
92
+ */
93
+ declare const DonutChart: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
94
+
95
+ /**
96
+ * Radar chart for multi-dimensional comparison
97
+ */
98
+ declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<HTMLDivElement>>;
99
+
100
+ /**
101
+ * Funnel chart for conversion/process flows
102
+ */
103
+ declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
104
+
105
+ /**
106
+ * Gauge chart for single value metrics
107
+ */
108
+ declare const GaugeChart: React.ForwardRefExoticComponent<GaugeChartProps & React.RefAttributes<HTMLDivElement>>;
109
+
110
+ /**
111
+ * Heatmap chart for matrix data visualization
112
+ */
113
+ declare const HeatmapChart: React.ForwardRefExoticComponent<HeatmapChartProps & React.RefAttributes<HTMLDivElement>>;
114
+
115
+ /**
116
+ * Treemap chart for hierarchical data
117
+ */
118
+ declare const TreemapChart: React.ForwardRefExoticComponent<TreemapChartProps & React.RefAttributes<HTMLDivElement>>;
119
+
120
+ /**
121
+ * Candlestick chart for financial OHLC data
122
+ */
123
+ declare const CandlestickChart: React.ForwardRefExoticComponent<CandlestickChartProps & React.RefAttributes<HTMLDivElement>>;
124
+
125
+ /**
126
+ * Sankey chart for flow relationships
127
+ */
128
+ declare const SankeyChart: React.ForwardRefExoticComponent<SankeyChartProps & React.RefAttributes<HTMLDivElement>>;
129
+
130
+ interface UseChartOptions {
131
+ /** ECharts options */
132
+ option: EChartsOption;
133
+ /** Theme preference */
134
+ theme?: 'light' | 'dark' | 'auto';
135
+ /** Override animation setting */
136
+ animation?: boolean;
137
+ /** Callback when chart is ready */
138
+ onReady?: (chart: echarts.ECharts) => void;
139
+ }
140
+ interface UseChartReturn {
141
+ /** Chart instance ref */
142
+ chartRef: RefObject<echarts.ECharts | null>;
143
+ /** Container ref to attach to DOM element */
144
+ containerRef: RefObject<HTMLDivElement>;
145
+ /** Current theme name */
146
+ currentTheme: string;
147
+ }
148
+ /**
149
+ * Hook to manage ECharts instance lifecycle
150
+ */
151
+ declare function useChart({ option, theme, animation, onReady, }: UseChartOptions): UseChartReturn;
152
+
153
+ /**
154
+ * Register Classic Theme ECharts themes
155
+ */
156
+ declare function registerClassicThemes(): void;
157
+ /**
158
+ * Hook to manage chart theme based on system/document dark mode
159
+ */
160
+ declare function useChartTheme(preference?: 'light' | 'dark' | 'auto'): string;
161
+
162
+ /**
163
+ * Hook to handle chart resizing with ResizeObserver
164
+ */
165
+ declare function useChartResize(chartRef: RefObject<echarts.ECharts | null>, containerRef: RefObject<HTMLElement | null>): void;
166
+
167
+ /**
168
+ * Hook to detect user's reduced motion preference
169
+ */
170
+ declare function useReducedMotion(): boolean;
171
+
172
+ declare function cn(...inputs: ClassValue[]): string;
173
+
174
+ export { AreaChart, BarChart, CandlestickChart, ChartContainer, type ChartContainerProps, ChartEmpty, type ChartEmptyProps, ChartError, type ChartErrorProps, ChartSkeleton, type ChartSkeletonProps, DonutChart, FunnelChart, GaugeChart, HeatmapChart, LineChart, PieChart, RadarChart, SankeyChart, ScatterChart, TreemapChart, type UseChartOptions, type UseChartReturn, cn, registerClassicThemes, useChart, useChartResize, useChartTheme, useReducedMotion };
package/dist/index.d.ts ADDED
@@ -0,0 +1,174 @@
1
+ import * as React from 'react';
2
+ import { RefObject } from 'react';
3
+ import { LineChartProps, BarChartProps, PieChartProps, AreaChartProps, ScatterChartProps, DonutChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps } from '@classic-homes/charts-core';
4
+ export { AreaChartData, AreaChartProps, AreaSeriesData, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, 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 } from '@classic-homes/charts-core';
5
+ import * as echarts from 'echarts/core';
6
+ import { EChartsOption } from 'echarts';
7
+ import { ClassValue } from 'clsx';
8
+
9
+ interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
10
+ /** Chart title for accessibility */
11
+ title: string;
12
+ /** Optional description for screen readers */
13
+ description?: string;
14
+ /** Chart height */
15
+ height?: number | string;
16
+ /** Show loading state */
17
+ loading?: boolean;
18
+ /** Error message */
19
+ error?: string | null;
20
+ /** Show empty state */
21
+ empty?: boolean;
22
+ /** Empty state message */
23
+ emptyMessage?: string;
24
+ /** Retry callback for error state */
25
+ onRetry?: () => void;
26
+ /** Additional wrapper styles */
27
+ wrapperClassName?: string;
28
+ }
29
+ /**
30
+ * Container component for all charts
31
+ * Handles loading, error, and empty states
32
+ */
33
+ declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
34
+
35
+ interface ChartSkeletonProps {
36
+ height?: number | string;
37
+ className?: string;
38
+ }
39
+ /**
40
+ * Loading skeleton for charts
41
+ */
42
+ declare const ChartSkeleton: React.ForwardRefExoticComponent<ChartSkeletonProps & React.RefAttributes<HTMLDivElement>>;
43
+
44
+ interface ChartErrorProps {
45
+ message: string;
46
+ height?: number | string;
47
+ onRetry?: () => void;
48
+ className?: string;
49
+ }
50
+ /**
51
+ * Error state for charts
52
+ */
53
+ declare const ChartError: React.ForwardRefExoticComponent<ChartErrorProps & React.RefAttributes<HTMLDivElement>>;
54
+
55
+ interface ChartEmptyProps {
56
+ message?: string;
57
+ height?: number | string;
58
+ className?: string;
59
+ }
60
+ /**
61
+ * Empty state for charts with no data
62
+ */
63
+ declare const ChartEmpty: React.ForwardRefExoticComponent<ChartEmptyProps & React.RefAttributes<HTMLDivElement>>;
64
+
65
+ /**
66
+ * Line chart component for displaying trends over time
67
+ */
68
+ declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
69
+
70
+ /**
71
+ * Bar chart component for displaying categorical data
72
+ */
73
+ declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
74
+
75
+ /**
76
+ * Pie chart component for displaying proportional data
77
+ */
78
+ declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
79
+
80
+ /**
81
+ * Area chart component for displaying filled trends
82
+ */
83
+ declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
84
+
85
+ /**
86
+ * Scatter chart component for displaying X/Y relationships
87
+ */
88
+ declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<HTMLDivElement>>;
89
+
90
+ /**
91
+ * Donut chart component (pie chart with inner radius)
92
+ */
93
+ declare const DonutChart: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
94
+
95
+ /**
96
+ * Radar chart for multi-dimensional comparison
97
+ */
98
+ declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<HTMLDivElement>>;
99
+
100
+ /**
101
+ * Funnel chart for conversion/process flows
102
+ */
103
+ declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
104
+
105
+ /**
106
+ * Gauge chart for single value metrics
107
+ */
108
+ declare const GaugeChart: React.ForwardRefExoticComponent<GaugeChartProps & React.RefAttributes<HTMLDivElement>>;
109
+
110
+ /**
111
+ * Heatmap chart for matrix data visualization
112
+ */
113
+ declare const HeatmapChart: React.ForwardRefExoticComponent<HeatmapChartProps & React.RefAttributes<HTMLDivElement>>;
114
+
115
+ /**
116
+ * Treemap chart for hierarchical data
117
+ */
118
+ declare const TreemapChart: React.ForwardRefExoticComponent<TreemapChartProps & React.RefAttributes<HTMLDivElement>>;
119
+
120
+ /**
121
+ * Candlestick chart for financial OHLC data
122
+ */
123
+ declare const CandlestickChart: React.ForwardRefExoticComponent<CandlestickChartProps & React.RefAttributes<HTMLDivElement>>;
124
+
125
+ /**
126
+ * Sankey chart for flow relationships
127
+ */
128
+ declare const SankeyChart: React.ForwardRefExoticComponent<SankeyChartProps & React.RefAttributes<HTMLDivElement>>;
129
+
130
+ interface UseChartOptions {
131
+ /** ECharts options */
132
+ option: EChartsOption;
133
+ /** Theme preference */
134
+ theme?: 'light' | 'dark' | 'auto';
135
+ /** Override animation setting */
136
+ animation?: boolean;
137
+ /** Callback when chart is ready */
138
+ onReady?: (chart: echarts.ECharts) => void;
139
+ }
140
+ interface UseChartReturn {
141
+ /** Chart instance ref */
142
+ chartRef: RefObject<echarts.ECharts | null>;
143
+ /** Container ref to attach to DOM element */
144
+ containerRef: RefObject<HTMLDivElement>;
145
+ /** Current theme name */
146
+ currentTheme: string;
147
+ }
148
+ /**
149
+ * Hook to manage ECharts instance lifecycle
150
+ */
151
+ declare function useChart({ option, theme, animation, onReady, }: UseChartOptions): UseChartReturn;
152
+
153
+ /**
154
+ * Register Classic Theme ECharts themes
155
+ */
156
+ declare function registerClassicThemes(): void;
157
+ /**
158
+ * Hook to manage chart theme based on system/document dark mode
159
+ */
160
+ declare function useChartTheme(preference?: 'light' | 'dark' | 'auto'): string;
161
+
162
+ /**
163
+ * Hook to handle chart resizing with ResizeObserver
164
+ */
165
+ declare function useChartResize(chartRef: RefObject<echarts.ECharts | null>, containerRef: RefObject<HTMLElement | null>): void;
166
+
167
+ /**
168
+ * Hook to detect user's reduced motion preference
169
+ */
170
+ declare function useReducedMotion(): boolean;
171
+
172
+ declare function cn(...inputs: ClassValue[]): string;
173
+
174
+ export { AreaChart, BarChart, CandlestickChart, ChartContainer, type ChartContainerProps, ChartEmpty, type ChartEmptyProps, ChartError, type ChartErrorProps, ChartSkeleton, type ChartSkeletonProps, DonutChart, FunnelChart, GaugeChart, HeatmapChart, LineChart, PieChart, RadarChart, SankeyChart, ScatterChart, TreemapChart, type UseChartOptions, type UseChartReturn, cn, registerClassicThemes, useChart, useChartResize, useChartTheme, useReducedMotion };