@optilogic/charts 1.0.0-beta.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/LICENSE +21 -0
- package/README.md +77 -0
- package/dist/index.cjs +327 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +240 -0
- package/dist/index.d.ts +240 -0
- package/dist/index.js +302 -0
- package/dist/index.js.map +1 -0
- package/package.json +66 -0
- package/src/bar-chart.tsx +337 -0
- package/src/index.ts +21 -0
- package/src/line-chart.tsx +266 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* LineChart
|
|
5
|
+
*
|
|
6
|
+
* A reusable, theme-aware line chart component built on Recharts.
|
|
7
|
+
* Supports multiple series, configurable axes, animations, and styling
|
|
8
|
+
* that integrates with the project's CSS variable theming system.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** Theme-aware chart colors from CSS variables */
|
|
12
|
+
declare const CHART_COLORS: string[];
|
|
13
|
+
declare function getChartColor(index: number, custom?: string): string;
|
|
14
|
+
/** Configuration for a single line series */
|
|
15
|
+
interface LineChartSeries {
|
|
16
|
+
/** Key in data objects for this series' values */
|
|
17
|
+
dataKey: string;
|
|
18
|
+
/** Display name shown in legend/tooltip */
|
|
19
|
+
name: string;
|
|
20
|
+
/** Custom color (defaults to theme chart colors) */
|
|
21
|
+
color?: string;
|
|
22
|
+
/** Line stroke width (default: 2) */
|
|
23
|
+
strokeWidth?: number;
|
|
24
|
+
/** Show dots on data points (default: false) */
|
|
25
|
+
dot?: boolean;
|
|
26
|
+
/** Line interpolation type */
|
|
27
|
+
type?: "monotone" | "linear" | "step" | "basis" | "natural";
|
|
28
|
+
}
|
|
29
|
+
/** X-axis configuration */
|
|
30
|
+
interface LineChartXAxis {
|
|
31
|
+
/** Key in data objects for x-axis values */
|
|
32
|
+
dataKey: string;
|
|
33
|
+
/** Axis label */
|
|
34
|
+
label?: string;
|
|
35
|
+
/** Custom tick formatter */
|
|
36
|
+
tickFormatter?: (value: unknown) => string;
|
|
37
|
+
/** Minimum gap between ticks in pixels */
|
|
38
|
+
minTickGap?: number;
|
|
39
|
+
}
|
|
40
|
+
/** Y-axis configuration */
|
|
41
|
+
interface LineChartYAxis {
|
|
42
|
+
/** Domain bounds [min, max] - use "auto" for automatic */
|
|
43
|
+
domain?: [
|
|
44
|
+
number | "auto" | "dataMin" | "dataMax",
|
|
45
|
+
number | "auto" | "dataMin" | "dataMax"
|
|
46
|
+
];
|
|
47
|
+
/** Axis label */
|
|
48
|
+
label?: string;
|
|
49
|
+
/** Custom tick formatter */
|
|
50
|
+
tickFormatter?: (value: unknown) => string;
|
|
51
|
+
/** Axis width in pixels */
|
|
52
|
+
width?: number;
|
|
53
|
+
}
|
|
54
|
+
/** Grid configuration */
|
|
55
|
+
interface LineChartGrid {
|
|
56
|
+
/** Show vertical grid lines */
|
|
57
|
+
vertical?: boolean;
|
|
58
|
+
/** Show horizontal grid lines */
|
|
59
|
+
horizontal?: boolean;
|
|
60
|
+
}
|
|
61
|
+
/** Legend configuration */
|
|
62
|
+
interface LineChartLegend {
|
|
63
|
+
/** Vertical position */
|
|
64
|
+
position?: "top" | "bottom";
|
|
65
|
+
/** Horizontal alignment */
|
|
66
|
+
align?: "left" | "center" | "right";
|
|
67
|
+
}
|
|
68
|
+
interface LineChartProps {
|
|
69
|
+
/** Array of data points */
|
|
70
|
+
data: Record<string, unknown>[];
|
|
71
|
+
/** Series configurations */
|
|
72
|
+
series: LineChartSeries[];
|
|
73
|
+
/** X-axis configuration */
|
|
74
|
+
xAxis: LineChartXAxis;
|
|
75
|
+
/** Y-axis configuration */
|
|
76
|
+
yAxis?: LineChartYAxis;
|
|
77
|
+
/** Grid configuration (true for default, false to hide, or object for fine control) */
|
|
78
|
+
grid?: boolean | LineChartGrid;
|
|
79
|
+
/** Show tooltip on hover */
|
|
80
|
+
tooltip?: boolean;
|
|
81
|
+
/** Legend configuration (true for default, false to hide, or object for fine control) */
|
|
82
|
+
legend?: boolean | LineChartLegend;
|
|
83
|
+
/** Enable animations */
|
|
84
|
+
animate?: boolean;
|
|
85
|
+
/** Additional CSS classes */
|
|
86
|
+
className?: string;
|
|
87
|
+
/** Chart height (default: 100%) */
|
|
88
|
+
height?: number | string;
|
|
89
|
+
/** Chart margins */
|
|
90
|
+
margin?: {
|
|
91
|
+
top?: number;
|
|
92
|
+
right?: number;
|
|
93
|
+
bottom?: number;
|
|
94
|
+
left?: number;
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* A flexible, theme-aware line chart component.
|
|
99
|
+
*
|
|
100
|
+
* @example
|
|
101
|
+
* <LineChart
|
|
102
|
+
* data={metrics}
|
|
103
|
+
* series={[
|
|
104
|
+
* { dataKey: "cpu", name: "CPU %" },
|
|
105
|
+
* { dataKey: "memory", name: "Memory %", color: "hsl(var(--success))" }
|
|
106
|
+
* ]}
|
|
107
|
+
* xAxis={{ dataKey: "time", tickFormatter: formatTime }}
|
|
108
|
+
* yAxis={{ domain: [0, 100] }}
|
|
109
|
+
* animate
|
|
110
|
+
* />
|
|
111
|
+
*/
|
|
112
|
+
declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* BarChart
|
|
116
|
+
*
|
|
117
|
+
* A reusable, theme-aware bar chart component built on Recharts.
|
|
118
|
+
* Supports vertical/horizontal layouts, stacked/grouped bars,
|
|
119
|
+
* configurable axes, animations, and styling that integrates
|
|
120
|
+
* with the project's CSS variable theming system.
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
/** Configuration for a single bar series */
|
|
124
|
+
interface BarChartSeries {
|
|
125
|
+
/** Key in data objects for this series' values */
|
|
126
|
+
dataKey: string;
|
|
127
|
+
/** Display name shown in legend/tooltip */
|
|
128
|
+
name: string;
|
|
129
|
+
/** Custom color (defaults to theme chart colors) */
|
|
130
|
+
color?: string;
|
|
131
|
+
/** Stack ID - bars with the same stackId will be stacked */
|
|
132
|
+
stackId?: string;
|
|
133
|
+
/** Border radius for bars */
|
|
134
|
+
radius?: number | [number, number, number, number];
|
|
135
|
+
}
|
|
136
|
+
/** X-axis configuration */
|
|
137
|
+
interface BarChartXAxis {
|
|
138
|
+
/** Key in data objects for x-axis values (category axis in vertical layout) */
|
|
139
|
+
dataKey: string;
|
|
140
|
+
/** Axis label */
|
|
141
|
+
label?: string;
|
|
142
|
+
/** Custom tick formatter */
|
|
143
|
+
tickFormatter?: (value: unknown) => string;
|
|
144
|
+
/** Minimum gap between ticks in pixels */
|
|
145
|
+
minTickGap?: number;
|
|
146
|
+
}
|
|
147
|
+
/** Y-axis configuration */
|
|
148
|
+
interface BarChartYAxis {
|
|
149
|
+
/** Domain bounds [min, max] - use "auto" for automatic */
|
|
150
|
+
domain?: [
|
|
151
|
+
number | "auto" | "dataMin" | "dataMax",
|
|
152
|
+
number | "auto" | "dataMin" | "dataMax"
|
|
153
|
+
];
|
|
154
|
+
/** Axis label */
|
|
155
|
+
label?: string;
|
|
156
|
+
/** Custom tick formatter */
|
|
157
|
+
tickFormatter?: (value: unknown) => string;
|
|
158
|
+
/** Axis width in pixels */
|
|
159
|
+
width?: number;
|
|
160
|
+
}
|
|
161
|
+
/** Grid configuration */
|
|
162
|
+
interface BarChartGrid {
|
|
163
|
+
/** Show vertical grid lines */
|
|
164
|
+
vertical?: boolean;
|
|
165
|
+
/** Show horizontal grid lines */
|
|
166
|
+
horizontal?: boolean;
|
|
167
|
+
}
|
|
168
|
+
/** Legend configuration */
|
|
169
|
+
interface BarChartLegend {
|
|
170
|
+
/** Vertical position */
|
|
171
|
+
position?: "top" | "bottom";
|
|
172
|
+
/** Horizontal alignment */
|
|
173
|
+
align?: "left" | "center" | "right";
|
|
174
|
+
}
|
|
175
|
+
interface BarChartProps {
|
|
176
|
+
/** Array of data points */
|
|
177
|
+
data: Record<string, unknown>[];
|
|
178
|
+
/** Series configurations */
|
|
179
|
+
series: BarChartSeries[];
|
|
180
|
+
/** Chart layout orientation */
|
|
181
|
+
layout?: "vertical" | "horizontal";
|
|
182
|
+
/** X-axis configuration */
|
|
183
|
+
xAxis: BarChartXAxis;
|
|
184
|
+
/** Y-axis configuration */
|
|
185
|
+
yAxis?: BarChartYAxis;
|
|
186
|
+
/** Grid configuration (true for default, false to hide, or object for fine control) */
|
|
187
|
+
grid?: boolean | BarChartGrid;
|
|
188
|
+
/** Show tooltip on hover */
|
|
189
|
+
tooltip?: boolean;
|
|
190
|
+
/** Legend configuration (true for default, false to hide, or object for fine control) */
|
|
191
|
+
legend?: boolean | BarChartLegend;
|
|
192
|
+
/** Enable animations */
|
|
193
|
+
animate?: boolean;
|
|
194
|
+
/** Bar width in pixels */
|
|
195
|
+
barSize?: number;
|
|
196
|
+
/** Gap between bars in a group (pixels) */
|
|
197
|
+
barGap?: number;
|
|
198
|
+
/** Gap between bar groups (pixels or percentage) */
|
|
199
|
+
barCategoryGap?: number | string;
|
|
200
|
+
/** Additional CSS classes */
|
|
201
|
+
className?: string;
|
|
202
|
+
/** Chart height (default: 100%) */
|
|
203
|
+
height?: number | string;
|
|
204
|
+
/** Chart margins */
|
|
205
|
+
margin?: {
|
|
206
|
+
top?: number;
|
|
207
|
+
right?: number;
|
|
208
|
+
bottom?: number;
|
|
209
|
+
left?: number;
|
|
210
|
+
};
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* A flexible, theme-aware bar chart component.
|
|
214
|
+
*
|
|
215
|
+
* @example
|
|
216
|
+
* // Grouped bar chart
|
|
217
|
+
* <BarChart
|
|
218
|
+
* data={salesData}
|
|
219
|
+
* series={[
|
|
220
|
+
* { dataKey: "revenue", name: "Revenue" },
|
|
221
|
+
* { dataKey: "profit", name: "Profit" }
|
|
222
|
+
* ]}
|
|
223
|
+
* xAxis={{ dataKey: "month" }}
|
|
224
|
+
* legend={{ position: "top" }}
|
|
225
|
+
* />
|
|
226
|
+
*
|
|
227
|
+
* @example
|
|
228
|
+
* // Stacked bar chart
|
|
229
|
+
* <BarChart
|
|
230
|
+
* data={salesData}
|
|
231
|
+
* series={[
|
|
232
|
+
* { dataKey: "q1", name: "Q1", stackId: "revenue" },
|
|
233
|
+
* { dataKey: "q2", name: "Q2", stackId: "revenue" }
|
|
234
|
+
* ]}
|
|
235
|
+
* xAxis={{ dataKey: "category" }}
|
|
236
|
+
* />
|
|
237
|
+
*/
|
|
238
|
+
declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
|
|
239
|
+
|
|
240
|
+
export { BarChart, type BarChartGrid, type BarChartLegend, type BarChartProps, type BarChartSeries, type BarChartXAxis, type BarChartYAxis, CHART_COLORS, LineChart, type LineChartGrid, type LineChartLegend, type LineChartProps, type LineChartSeries, type LineChartXAxis, type LineChartYAxis, getChartColor };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* LineChart
|
|
5
|
+
*
|
|
6
|
+
* A reusable, theme-aware line chart component built on Recharts.
|
|
7
|
+
* Supports multiple series, configurable axes, animations, and styling
|
|
8
|
+
* that integrates with the project's CSS variable theming system.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** Theme-aware chart colors from CSS variables */
|
|
12
|
+
declare const CHART_COLORS: string[];
|
|
13
|
+
declare function getChartColor(index: number, custom?: string): string;
|
|
14
|
+
/** Configuration for a single line series */
|
|
15
|
+
interface LineChartSeries {
|
|
16
|
+
/** Key in data objects for this series' values */
|
|
17
|
+
dataKey: string;
|
|
18
|
+
/** Display name shown in legend/tooltip */
|
|
19
|
+
name: string;
|
|
20
|
+
/** Custom color (defaults to theme chart colors) */
|
|
21
|
+
color?: string;
|
|
22
|
+
/** Line stroke width (default: 2) */
|
|
23
|
+
strokeWidth?: number;
|
|
24
|
+
/** Show dots on data points (default: false) */
|
|
25
|
+
dot?: boolean;
|
|
26
|
+
/** Line interpolation type */
|
|
27
|
+
type?: "monotone" | "linear" | "step" | "basis" | "natural";
|
|
28
|
+
}
|
|
29
|
+
/** X-axis configuration */
|
|
30
|
+
interface LineChartXAxis {
|
|
31
|
+
/** Key in data objects for x-axis values */
|
|
32
|
+
dataKey: string;
|
|
33
|
+
/** Axis label */
|
|
34
|
+
label?: string;
|
|
35
|
+
/** Custom tick formatter */
|
|
36
|
+
tickFormatter?: (value: unknown) => string;
|
|
37
|
+
/** Minimum gap between ticks in pixels */
|
|
38
|
+
minTickGap?: number;
|
|
39
|
+
}
|
|
40
|
+
/** Y-axis configuration */
|
|
41
|
+
interface LineChartYAxis {
|
|
42
|
+
/** Domain bounds [min, max] - use "auto" for automatic */
|
|
43
|
+
domain?: [
|
|
44
|
+
number | "auto" | "dataMin" | "dataMax",
|
|
45
|
+
number | "auto" | "dataMin" | "dataMax"
|
|
46
|
+
];
|
|
47
|
+
/** Axis label */
|
|
48
|
+
label?: string;
|
|
49
|
+
/** Custom tick formatter */
|
|
50
|
+
tickFormatter?: (value: unknown) => string;
|
|
51
|
+
/** Axis width in pixels */
|
|
52
|
+
width?: number;
|
|
53
|
+
}
|
|
54
|
+
/** Grid configuration */
|
|
55
|
+
interface LineChartGrid {
|
|
56
|
+
/** Show vertical grid lines */
|
|
57
|
+
vertical?: boolean;
|
|
58
|
+
/** Show horizontal grid lines */
|
|
59
|
+
horizontal?: boolean;
|
|
60
|
+
}
|
|
61
|
+
/** Legend configuration */
|
|
62
|
+
interface LineChartLegend {
|
|
63
|
+
/** Vertical position */
|
|
64
|
+
position?: "top" | "bottom";
|
|
65
|
+
/** Horizontal alignment */
|
|
66
|
+
align?: "left" | "center" | "right";
|
|
67
|
+
}
|
|
68
|
+
interface LineChartProps {
|
|
69
|
+
/** Array of data points */
|
|
70
|
+
data: Record<string, unknown>[];
|
|
71
|
+
/** Series configurations */
|
|
72
|
+
series: LineChartSeries[];
|
|
73
|
+
/** X-axis configuration */
|
|
74
|
+
xAxis: LineChartXAxis;
|
|
75
|
+
/** Y-axis configuration */
|
|
76
|
+
yAxis?: LineChartYAxis;
|
|
77
|
+
/** Grid configuration (true for default, false to hide, or object for fine control) */
|
|
78
|
+
grid?: boolean | LineChartGrid;
|
|
79
|
+
/** Show tooltip on hover */
|
|
80
|
+
tooltip?: boolean;
|
|
81
|
+
/** Legend configuration (true for default, false to hide, or object for fine control) */
|
|
82
|
+
legend?: boolean | LineChartLegend;
|
|
83
|
+
/** Enable animations */
|
|
84
|
+
animate?: boolean;
|
|
85
|
+
/** Additional CSS classes */
|
|
86
|
+
className?: string;
|
|
87
|
+
/** Chart height (default: 100%) */
|
|
88
|
+
height?: number | string;
|
|
89
|
+
/** Chart margins */
|
|
90
|
+
margin?: {
|
|
91
|
+
top?: number;
|
|
92
|
+
right?: number;
|
|
93
|
+
bottom?: number;
|
|
94
|
+
left?: number;
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* A flexible, theme-aware line chart component.
|
|
99
|
+
*
|
|
100
|
+
* @example
|
|
101
|
+
* <LineChart
|
|
102
|
+
* data={metrics}
|
|
103
|
+
* series={[
|
|
104
|
+
* { dataKey: "cpu", name: "CPU %" },
|
|
105
|
+
* { dataKey: "memory", name: "Memory %", color: "hsl(var(--success))" }
|
|
106
|
+
* ]}
|
|
107
|
+
* xAxis={{ dataKey: "time", tickFormatter: formatTime }}
|
|
108
|
+
* yAxis={{ domain: [0, 100] }}
|
|
109
|
+
* animate
|
|
110
|
+
* />
|
|
111
|
+
*/
|
|
112
|
+
declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* BarChart
|
|
116
|
+
*
|
|
117
|
+
* A reusable, theme-aware bar chart component built on Recharts.
|
|
118
|
+
* Supports vertical/horizontal layouts, stacked/grouped bars,
|
|
119
|
+
* configurable axes, animations, and styling that integrates
|
|
120
|
+
* with the project's CSS variable theming system.
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
/** Configuration for a single bar series */
|
|
124
|
+
interface BarChartSeries {
|
|
125
|
+
/** Key in data objects for this series' values */
|
|
126
|
+
dataKey: string;
|
|
127
|
+
/** Display name shown in legend/tooltip */
|
|
128
|
+
name: string;
|
|
129
|
+
/** Custom color (defaults to theme chart colors) */
|
|
130
|
+
color?: string;
|
|
131
|
+
/** Stack ID - bars with the same stackId will be stacked */
|
|
132
|
+
stackId?: string;
|
|
133
|
+
/** Border radius for bars */
|
|
134
|
+
radius?: number | [number, number, number, number];
|
|
135
|
+
}
|
|
136
|
+
/** X-axis configuration */
|
|
137
|
+
interface BarChartXAxis {
|
|
138
|
+
/** Key in data objects for x-axis values (category axis in vertical layout) */
|
|
139
|
+
dataKey: string;
|
|
140
|
+
/** Axis label */
|
|
141
|
+
label?: string;
|
|
142
|
+
/** Custom tick formatter */
|
|
143
|
+
tickFormatter?: (value: unknown) => string;
|
|
144
|
+
/** Minimum gap between ticks in pixels */
|
|
145
|
+
minTickGap?: number;
|
|
146
|
+
}
|
|
147
|
+
/** Y-axis configuration */
|
|
148
|
+
interface BarChartYAxis {
|
|
149
|
+
/** Domain bounds [min, max] - use "auto" for automatic */
|
|
150
|
+
domain?: [
|
|
151
|
+
number | "auto" | "dataMin" | "dataMax",
|
|
152
|
+
number | "auto" | "dataMin" | "dataMax"
|
|
153
|
+
];
|
|
154
|
+
/** Axis label */
|
|
155
|
+
label?: string;
|
|
156
|
+
/** Custom tick formatter */
|
|
157
|
+
tickFormatter?: (value: unknown) => string;
|
|
158
|
+
/** Axis width in pixels */
|
|
159
|
+
width?: number;
|
|
160
|
+
}
|
|
161
|
+
/** Grid configuration */
|
|
162
|
+
interface BarChartGrid {
|
|
163
|
+
/** Show vertical grid lines */
|
|
164
|
+
vertical?: boolean;
|
|
165
|
+
/** Show horizontal grid lines */
|
|
166
|
+
horizontal?: boolean;
|
|
167
|
+
}
|
|
168
|
+
/** Legend configuration */
|
|
169
|
+
interface BarChartLegend {
|
|
170
|
+
/** Vertical position */
|
|
171
|
+
position?: "top" | "bottom";
|
|
172
|
+
/** Horizontal alignment */
|
|
173
|
+
align?: "left" | "center" | "right";
|
|
174
|
+
}
|
|
175
|
+
interface BarChartProps {
|
|
176
|
+
/** Array of data points */
|
|
177
|
+
data: Record<string, unknown>[];
|
|
178
|
+
/** Series configurations */
|
|
179
|
+
series: BarChartSeries[];
|
|
180
|
+
/** Chart layout orientation */
|
|
181
|
+
layout?: "vertical" | "horizontal";
|
|
182
|
+
/** X-axis configuration */
|
|
183
|
+
xAxis: BarChartXAxis;
|
|
184
|
+
/** Y-axis configuration */
|
|
185
|
+
yAxis?: BarChartYAxis;
|
|
186
|
+
/** Grid configuration (true for default, false to hide, or object for fine control) */
|
|
187
|
+
grid?: boolean | BarChartGrid;
|
|
188
|
+
/** Show tooltip on hover */
|
|
189
|
+
tooltip?: boolean;
|
|
190
|
+
/** Legend configuration (true for default, false to hide, or object for fine control) */
|
|
191
|
+
legend?: boolean | BarChartLegend;
|
|
192
|
+
/** Enable animations */
|
|
193
|
+
animate?: boolean;
|
|
194
|
+
/** Bar width in pixels */
|
|
195
|
+
barSize?: number;
|
|
196
|
+
/** Gap between bars in a group (pixels) */
|
|
197
|
+
barGap?: number;
|
|
198
|
+
/** Gap between bar groups (pixels or percentage) */
|
|
199
|
+
barCategoryGap?: number | string;
|
|
200
|
+
/** Additional CSS classes */
|
|
201
|
+
className?: string;
|
|
202
|
+
/** Chart height (default: 100%) */
|
|
203
|
+
height?: number | string;
|
|
204
|
+
/** Chart margins */
|
|
205
|
+
margin?: {
|
|
206
|
+
top?: number;
|
|
207
|
+
right?: number;
|
|
208
|
+
bottom?: number;
|
|
209
|
+
left?: number;
|
|
210
|
+
};
|
|
211
|
+
}
|
|
212
|
+
/**
|
|
213
|
+
* A flexible, theme-aware bar chart component.
|
|
214
|
+
*
|
|
215
|
+
* @example
|
|
216
|
+
* // Grouped bar chart
|
|
217
|
+
* <BarChart
|
|
218
|
+
* data={salesData}
|
|
219
|
+
* series={[
|
|
220
|
+
* { dataKey: "revenue", name: "Revenue" },
|
|
221
|
+
* { dataKey: "profit", name: "Profit" }
|
|
222
|
+
* ]}
|
|
223
|
+
* xAxis={{ dataKey: "month" }}
|
|
224
|
+
* legend={{ position: "top" }}
|
|
225
|
+
* />
|
|
226
|
+
*
|
|
227
|
+
* @example
|
|
228
|
+
* // Stacked bar chart
|
|
229
|
+
* <BarChart
|
|
230
|
+
* data={salesData}
|
|
231
|
+
* series={[
|
|
232
|
+
* { dataKey: "q1", name: "Q1", stackId: "revenue" },
|
|
233
|
+
* { dataKey: "q2", name: "Q2", stackId: "revenue" }
|
|
234
|
+
* ]}
|
|
235
|
+
* xAxis={{ dataKey: "category" }}
|
|
236
|
+
* />
|
|
237
|
+
*/
|
|
238
|
+
declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
|
|
239
|
+
|
|
240
|
+
export { BarChart, type BarChartGrid, type BarChartLegend, type BarChartProps, type BarChartSeries, type BarChartXAxis, type BarChartYAxis, CHART_COLORS, LineChart, type LineChartGrid, type LineChartLegend, type LineChartProps, type LineChartSeries, type LineChartXAxis, type LineChartYAxis, getChartColor };
|