@classic-homes/charts-react 0.1.38 → 0.2.0

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.
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
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';
2
+ import { ReactNode, RefObject } from 'react';
3
+ import { ChartLegendPosition, LegendRenderProps, ChartLegendConfig, LineChartProps, BarChartProps, PieChartProps, AreaChartProps, ScatterChartProps, DonutChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps } from '@classic-homes/charts-core';
4
+ export { AreaChartData, AreaChartProps, AreaSeriesData, AxisChartProps, AxisConfig, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, ChartFormatter, ChartLegendConfig, ChartLegendPosition, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LabelChartProps, LabelFormatterParams, LegendChartProps, LegendItem, LegendRenderProps, LineChartData, LineChartProps, LineSeriesData, PieChartProps, PieSliceData, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartData, ScatterChartProps, ScatterSeriesData, SliceEventParams, TooltipFormatterParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode } from '@classic-homes/charts-core';
5
5
  import * as echarts from 'echarts/core';
6
6
  import { EChartsOption } from 'echarts';
7
7
  import { ClassValue } from 'clsx';
@@ -25,6 +25,13 @@ interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
25
25
  onRetry?: () => void;
26
26
  /** Additional wrapper styles */
27
27
  wrapperClassName?: string;
28
+ /**
29
+ * Custom legend, rendered beside the chart rather than inside the
30
+ * `role="img"` element so its controls stay accessible
31
+ */
32
+ legend?: React.ReactNode;
33
+ /** Where the custom legend sits (defaults to 'bottom') */
34
+ legendPosition?: ChartLegendPosition;
28
35
  }
29
36
  /**
30
37
  * Container component for all charts
@@ -62,45 +69,106 @@ interface ChartEmptyProps {
62
69
  */
63
70
  declare const ChartEmpty: React.ForwardRefExoticComponent<ChartEmptyProps & React.RefAttributes<HTMLDivElement>>;
64
71
 
72
+ interface ChartLegendProps extends Pick<LegendRenderProps, 'items' | 'toggle'>, Partial<Omit<LegendRenderProps, 'items' | 'toggle'>> {
73
+ /** Lay items out in a column (defaults to vertical for left/right positions) */
74
+ orientation?: 'horizontal' | 'vertical';
75
+ /** Additional classes for the list */
76
+ className?: string;
77
+ }
78
+ /**
79
+ * Accessible HTML legend for use with a chart's `renderLegend` prop. Each
80
+ * item is a toggle button that shows or hides its series.
81
+ */
82
+ declare const ChartLegend: React.ForwardRefExoticComponent<ChartLegendProps & React.RefAttributes<HTMLUListElement>>;
83
+
84
+ /** Props shared by charts that can render a custom legend */
85
+ interface CustomLegendProps {
86
+ /**
87
+ * Render your own legend in place of the built-in one, e.g.
88
+ * `renderLegend={(legend) => <ChartLegend {...legend} />}`
89
+ */
90
+ renderLegend?: (legend: LegendRenderProps) => ReactNode;
91
+ }
92
+ interface UseChartLegendOptions {
93
+ /** Legend item names in chart order */
94
+ names: string[];
95
+ /** Per-item colour overrides, by index */
96
+ colors: (string | undefined)[];
97
+ /** Theme series palette */
98
+ palette: string[];
99
+ /** Built-in legend config (its position also places a custom legend) */
100
+ config?: ChartLegendConfig;
101
+ /** Chart title */
102
+ title: string;
103
+ /** Called with every item's visibility when it changes */
104
+ onLegendChange?: (visible: Record<string, boolean>) => void;
105
+ }
106
+ interface UseChartLegendReturn {
107
+ /** Register legend listeners; call from the chart's `onReady` */
108
+ attach: (chart: echarts.ECharts) => void;
109
+ /** State and actions for a custom legend renderer */
110
+ renderProps: LegendRenderProps;
111
+ }
112
+ /**
113
+ * Track legend selection for a chart and expose it to custom legends
114
+ */
115
+ declare function useChartLegend({ names, colors, palette, config, title, onLegendChange, }: UseChartLegendOptions): UseChartLegendReturn;
116
+
117
+ interface LineChartComponentProps extends LineChartProps, CustomLegendProps {
118
+ }
65
119
  /**
66
120
  * Line chart component for displaying trends over time
67
121
  */
68
- declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
122
+ declare const LineChart: React.ForwardRefExoticComponent<LineChartComponentProps & React.RefAttributes<HTMLDivElement>>;
69
123
 
124
+ interface BarChartComponentProps extends BarChartProps, CustomLegendProps {
125
+ }
70
126
  /**
71
127
  * Bar chart component for displaying categorical data
72
128
  */
73
- declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
129
+ declare const BarChart: React.ForwardRefExoticComponent<BarChartComponentProps & React.RefAttributes<HTMLDivElement>>;
74
130
 
131
+ interface PieChartComponentProps extends PieChartProps, CustomLegendProps {
132
+ }
75
133
  /**
76
134
  * Pie chart component for displaying proportional data
77
135
  */
78
- declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
136
+ declare const PieChart: React.ForwardRefExoticComponent<PieChartComponentProps & React.RefAttributes<HTMLDivElement>>;
79
137
 
138
+ interface AreaChartComponentProps extends AreaChartProps, CustomLegendProps {
139
+ }
80
140
  /**
81
141
  * Area chart component for displaying filled trends
82
142
  */
83
- declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
143
+ declare const AreaChart: React.ForwardRefExoticComponent<AreaChartComponentProps & React.RefAttributes<HTMLDivElement>>;
84
144
 
145
+ interface ScatterChartComponentProps extends ScatterChartProps, CustomLegendProps {
146
+ }
85
147
  /**
86
148
  * Scatter chart component for displaying X/Y relationships
87
149
  */
88
- declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<HTMLDivElement>>;
150
+ declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartComponentProps & React.RefAttributes<HTMLDivElement>>;
89
151
 
152
+ interface DonutChartComponentProps extends DonutChartProps, CustomLegendProps {
153
+ }
90
154
  /**
91
155
  * Donut chart component (pie chart with inner radius)
92
156
  */
93
- declare const DonutChart: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
157
+ declare const DonutChart: React.ForwardRefExoticComponent<DonutChartComponentProps & React.RefAttributes<HTMLDivElement>>;
94
158
 
159
+ interface RadarChartComponentProps extends RadarChartProps, CustomLegendProps {
160
+ }
95
161
  /**
96
162
  * Radar chart for multi-dimensional comparison
97
163
  */
98
- declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<HTMLDivElement>>;
164
+ declare const RadarChart: React.ForwardRefExoticComponent<RadarChartComponentProps & React.RefAttributes<HTMLDivElement>>;
99
165
 
166
+ interface FunnelChartComponentProps extends FunnelChartProps, CustomLegendProps {
167
+ }
100
168
  /**
101
169
  * Funnel chart for conversion/process flows
102
170
  */
103
- declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
171
+ declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartComponentProps & React.RefAttributes<HTMLDivElement>>;
104
172
 
105
173
  /**
106
174
  * Gauge chart for single value metrics
@@ -171,4 +239,4 @@ declare function useReducedMotion(): boolean;
171
239
 
172
240
  declare function cn(...inputs: ClassValue[]): string;
173
241
 
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 };
242
+ export { AreaChart, type AreaChartComponentProps, BarChart, type BarChartComponentProps, CandlestickChart, ChartContainer, type ChartContainerProps, ChartEmpty, type ChartEmptyProps, ChartError, type ChartErrorProps, ChartLegend, type ChartLegendProps, ChartSkeleton, type ChartSkeletonProps, type CustomLegendProps, DonutChart, type DonutChartComponentProps, FunnelChart, type FunnelChartComponentProps, GaugeChart, HeatmapChart, LineChart, type LineChartComponentProps, PieChart, type PieChartComponentProps, RadarChart, type RadarChartComponentProps, SankeyChart, ScatterChart, type ScatterChartComponentProps, TreemapChart, type UseChartLegendOptions, type UseChartLegendReturn, type UseChartOptions, type UseChartReturn, cn, registerClassicThemes, useChart, useChartLegend, useChartResize, useChartTheme, useReducedMotion };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
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';
2
+ import { ReactNode, RefObject } from 'react';
3
+ import { ChartLegendPosition, LegendRenderProps, ChartLegendConfig, LineChartProps, BarChartProps, PieChartProps, AreaChartProps, ScatterChartProps, DonutChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps } from '@classic-homes/charts-core';
4
+ export { AreaChartData, AreaChartProps, AreaSeriesData, AxisChartProps, AxisConfig, BarChartData, BarChartProps, BarSeriesData, BaseChartProps, CandlestickChartProps, CandlestickData, CandlestickEventParams, CandlestickItem, ChartFormatter, ChartLegendConfig, ChartLegendPosition, DataPointEventParams, DonutChartProps, FunnelChartProps, FunnelSliceData, GaugeChartProps, HeatmapChartProps, HeatmapData, HeatmapEventParams, LabelChartProps, LabelFormatterParams, LegendChartProps, LegendItem, LegendRenderProps, LineChartData, LineChartProps, LineSeriesData, PieChartProps, PieSliceData, RadarChartData, RadarChartProps, RadarIndicator, RadarSeriesData, SankeyChartProps, SankeyData, SankeyEventParams, SankeyLink, SankeyNode, ScatterChartData, ScatterChartProps, ScatterSeriesData, SliceEventParams, TooltipFormatterParams, TreemapChartProps, TreemapEventParams, TreemapLevel, TreemapNode } from '@classic-homes/charts-core';
5
5
  import * as echarts from 'echarts/core';
6
6
  import { EChartsOption } from 'echarts';
7
7
  import { ClassValue } from 'clsx';
@@ -25,6 +25,13 @@ interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
25
25
  onRetry?: () => void;
26
26
  /** Additional wrapper styles */
27
27
  wrapperClassName?: string;
28
+ /**
29
+ * Custom legend, rendered beside the chart rather than inside the
30
+ * `role="img"` element so its controls stay accessible
31
+ */
32
+ legend?: React.ReactNode;
33
+ /** Where the custom legend sits (defaults to 'bottom') */
34
+ legendPosition?: ChartLegendPosition;
28
35
  }
29
36
  /**
30
37
  * Container component for all charts
@@ -62,45 +69,106 @@ interface ChartEmptyProps {
62
69
  */
63
70
  declare const ChartEmpty: React.ForwardRefExoticComponent<ChartEmptyProps & React.RefAttributes<HTMLDivElement>>;
64
71
 
72
+ interface ChartLegendProps extends Pick<LegendRenderProps, 'items' | 'toggle'>, Partial<Omit<LegendRenderProps, 'items' | 'toggle'>> {
73
+ /** Lay items out in a column (defaults to vertical for left/right positions) */
74
+ orientation?: 'horizontal' | 'vertical';
75
+ /** Additional classes for the list */
76
+ className?: string;
77
+ }
78
+ /**
79
+ * Accessible HTML legend for use with a chart's `renderLegend` prop. Each
80
+ * item is a toggle button that shows or hides its series.
81
+ */
82
+ declare const ChartLegend: React.ForwardRefExoticComponent<ChartLegendProps & React.RefAttributes<HTMLUListElement>>;
83
+
84
+ /** Props shared by charts that can render a custom legend */
85
+ interface CustomLegendProps {
86
+ /**
87
+ * Render your own legend in place of the built-in one, e.g.
88
+ * `renderLegend={(legend) => <ChartLegend {...legend} />}`
89
+ */
90
+ renderLegend?: (legend: LegendRenderProps) => ReactNode;
91
+ }
92
+ interface UseChartLegendOptions {
93
+ /** Legend item names in chart order */
94
+ names: string[];
95
+ /** Per-item colour overrides, by index */
96
+ colors: (string | undefined)[];
97
+ /** Theme series palette */
98
+ palette: string[];
99
+ /** Built-in legend config (its position also places a custom legend) */
100
+ config?: ChartLegendConfig;
101
+ /** Chart title */
102
+ title: string;
103
+ /** Called with every item's visibility when it changes */
104
+ onLegendChange?: (visible: Record<string, boolean>) => void;
105
+ }
106
+ interface UseChartLegendReturn {
107
+ /** Register legend listeners; call from the chart's `onReady` */
108
+ attach: (chart: echarts.ECharts) => void;
109
+ /** State and actions for a custom legend renderer */
110
+ renderProps: LegendRenderProps;
111
+ }
112
+ /**
113
+ * Track legend selection for a chart and expose it to custom legends
114
+ */
115
+ declare function useChartLegend({ names, colors, palette, config, title, onLegendChange, }: UseChartLegendOptions): UseChartLegendReturn;
116
+
117
+ interface LineChartComponentProps extends LineChartProps, CustomLegendProps {
118
+ }
65
119
  /**
66
120
  * Line chart component for displaying trends over time
67
121
  */
68
- declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
122
+ declare const LineChart: React.ForwardRefExoticComponent<LineChartComponentProps & React.RefAttributes<HTMLDivElement>>;
69
123
 
124
+ interface BarChartComponentProps extends BarChartProps, CustomLegendProps {
125
+ }
70
126
  /**
71
127
  * Bar chart component for displaying categorical data
72
128
  */
73
- declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
129
+ declare const BarChart: React.ForwardRefExoticComponent<BarChartComponentProps & React.RefAttributes<HTMLDivElement>>;
74
130
 
131
+ interface PieChartComponentProps extends PieChartProps, CustomLegendProps {
132
+ }
75
133
  /**
76
134
  * Pie chart component for displaying proportional data
77
135
  */
78
- declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
136
+ declare const PieChart: React.ForwardRefExoticComponent<PieChartComponentProps & React.RefAttributes<HTMLDivElement>>;
79
137
 
138
+ interface AreaChartComponentProps extends AreaChartProps, CustomLegendProps {
139
+ }
80
140
  /**
81
141
  * Area chart component for displaying filled trends
82
142
  */
83
- declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
143
+ declare const AreaChart: React.ForwardRefExoticComponent<AreaChartComponentProps & React.RefAttributes<HTMLDivElement>>;
84
144
 
145
+ interface ScatterChartComponentProps extends ScatterChartProps, CustomLegendProps {
146
+ }
85
147
  /**
86
148
  * Scatter chart component for displaying X/Y relationships
87
149
  */
88
- declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<HTMLDivElement>>;
150
+ declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartComponentProps & React.RefAttributes<HTMLDivElement>>;
89
151
 
152
+ interface DonutChartComponentProps extends DonutChartProps, CustomLegendProps {
153
+ }
90
154
  /**
91
155
  * Donut chart component (pie chart with inner radius)
92
156
  */
93
- declare const DonutChart: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;
157
+ declare const DonutChart: React.ForwardRefExoticComponent<DonutChartComponentProps & React.RefAttributes<HTMLDivElement>>;
94
158
 
159
+ interface RadarChartComponentProps extends RadarChartProps, CustomLegendProps {
160
+ }
95
161
  /**
96
162
  * Radar chart for multi-dimensional comparison
97
163
  */
98
- declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<HTMLDivElement>>;
164
+ declare const RadarChart: React.ForwardRefExoticComponent<RadarChartComponentProps & React.RefAttributes<HTMLDivElement>>;
99
165
 
166
+ interface FunnelChartComponentProps extends FunnelChartProps, CustomLegendProps {
167
+ }
100
168
  /**
101
169
  * Funnel chart for conversion/process flows
102
170
  */
103
- declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
171
+ declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartComponentProps & React.RefAttributes<HTMLDivElement>>;
104
172
 
105
173
  /**
106
174
  * Gauge chart for single value metrics
@@ -171,4 +239,4 @@ declare function useReducedMotion(): boolean;
171
239
 
172
240
  declare function cn(...inputs: ClassValue[]): string;
173
241
 
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 };
242
+ export { AreaChart, type AreaChartComponentProps, BarChart, type BarChartComponentProps, CandlestickChart, ChartContainer, type ChartContainerProps, ChartEmpty, type ChartEmptyProps, ChartError, type ChartErrorProps, ChartLegend, type ChartLegendProps, ChartSkeleton, type ChartSkeletonProps, type CustomLegendProps, DonutChart, type DonutChartComponentProps, FunnelChart, type FunnelChartComponentProps, GaugeChart, HeatmapChart, LineChart, type LineChartComponentProps, PieChart, type PieChartComponentProps, RadarChart, type RadarChartComponentProps, SankeyChart, ScatterChart, type ScatterChartComponentProps, TreemapChart, type UseChartLegendOptions, type UseChartLegendReturn, type UseChartOptions, type UseChartReturn, cn, registerClassicThemes, useChart, useChartLegend, useChartResize, useChartTheme, useReducedMotion };