@once-ui-system/core 1.6.3 → 1.7.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.md +21 -0
- package/dist/components/Avatar.d.ts +1 -0
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +2 -2
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/BlobFx.d.ts +8 -0
- package/dist/components/BlobFx.d.ts.map +1 -0
- package/dist/components/BlobFx.js +82 -0
- package/dist/components/BlobFx.js.map +1 -0
- package/dist/components/Button.d.ts +1 -1
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +2 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Button.module.scss +62 -32
- package/dist/components/CelebrationFx.d.ts +1 -0
- package/dist/components/CelebrationFx.d.ts.map +1 -1
- package/dist/components/CelebrationFx.js +7 -3
- package/dist/components/CelebrationFx.js.map +1 -1
- package/dist/components/ContextMenu.d.ts +1 -0
- package/dist/components/ContextMenu.d.ts.map +1 -1
- package/dist/components/ContextMenu.js +8 -4
- package/dist/components/ContextMenu.js.map +1 -1
- package/dist/components/Dialog.d.ts.map +1 -1
- package/dist/components/Dialog.js +99 -91
- package/dist/components/Dialog.js.map +1 -1
- package/dist/components/Dropdown.d.ts +1 -0
- package/dist/components/Dropdown.d.ts.map +1 -1
- package/dist/components/Dropdown.js +4 -2
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/FadingLettersFx.d.ts +15 -0
- package/dist/components/FadingLettersFx.d.ts.map +1 -0
- package/dist/components/FadingLettersFx.js +27 -0
- package/dist/components/FadingLettersFx.js.map +1 -0
- package/dist/components/FadingLettersFx.module.scss +71 -0
- package/dist/components/HoloFx.d.ts +1 -0
- package/dist/components/HoloFx.d.ts.map +1 -1
- package/dist/components/HoloFx.js +10 -3
- package/dist/components/HoloFx.js.map +1 -1
- package/dist/components/IconButton.d.ts +5 -2
- package/dist/components/IconButton.d.ts.map +1 -1
- package/dist/components/IconButton.js +6 -4
- package/dist/components/IconButton.js.map +1 -1
- package/dist/components/IconButton.module.scss +14 -0
- package/dist/components/Input.d.ts +3 -1
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +18 -5
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Input.module.scss +38 -3
- package/dist/components/Mask.d.ts +1 -0
- package/dist/components/Mask.d.ts.map +1 -1
- package/dist/components/Mask.js +56 -32
- package/dist/components/Mask.js.map +1 -1
- package/dist/components/MatrixFx.d.ts +1 -0
- package/dist/components/MatrixFx.d.ts.map +1 -1
- package/dist/components/MatrixFx.js +8 -1
- package/dist/components/MatrixFx.js.map +1 -1
- package/dist/components/Media.d.ts +5 -1
- package/dist/components/Media.d.ts.map +1 -1
- package/dist/components/Media.js +20 -7
- package/dist/components/Media.js.map +1 -1
- package/dist/components/Modal.d.ts +11 -0
- package/dist/components/Modal.d.ts.map +1 -0
- package/dist/components/Modal.js +72 -0
- package/dist/components/Modal.js.map +1 -0
- package/dist/components/NumberInput.d.ts.map +1 -1
- package/dist/components/NumberInput.js +1 -1
- package/dist/components/NumberInput.js.map +1 -1
- package/dist/components/Particle.d.ts +1 -0
- package/dist/components/Particle.d.ts.map +1 -1
- package/dist/components/Particle.js +86 -78
- package/dist/components/Particle.js.map +1 -1
- package/dist/components/ScrollContainer.d.ts +9 -0
- package/dist/components/ScrollContainer.d.ts.map +1 -0
- package/dist/components/ScrollContainer.js +67 -0
- package/dist/components/ScrollContainer.js.map +1 -0
- package/dist/components/ScrollLock.d.ts.map +1 -1
- package/dist/components/ScrollLock.js +4 -91
- package/dist/components/ScrollLock.js.map +1 -1
- package/dist/components/ServerFlex.d.ts.map +1 -1
- package/dist/components/ServerFlex.js +3 -3
- package/dist/components/ServerFlex.js.map +1 -1
- package/dist/components/ServerGrid.d.ts.map +1 -1
- package/dist/components/ServerGrid.js +2 -2
- package/dist/components/ServerGrid.js.map +1 -1
- package/dist/components/ShineFx.d.ts +1 -0
- package/dist/components/ShineFx.d.ts.map +1 -1
- package/dist/components/ShineFx.js +5 -2
- package/dist/components/ShineFx.js.map +1 -1
- package/dist/components/SplitView.d.ts +16 -0
- package/dist/components/SplitView.d.ts.map +1 -0
- package/dist/components/SplitView.js +80 -0
- package/dist/components/SplitView.js.map +1 -0
- package/dist/components/SplitView.module.scss +18 -0
- package/dist/components/StylePanel.d.ts.map +1 -1
- package/dist/components/StylePanel.js +10 -10
- package/dist/components/StylePanel.js.map +1 -1
- package/dist/components/Textarea.d.ts +2 -0
- package/dist/components/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea.js +22 -12
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/ThemeInit.d.ts.map +1 -1
- package/dist/components/ThemeInit.js +39 -40
- package/dist/components/ThemeInit.js.map +1 -1
- package/dist/components/TiltFx.d.ts +1 -0
- package/dist/components/TiltFx.d.ts.map +1 -1
- package/dist/components/TiltFx.js +27 -10
- package/dist/components/TiltFx.js.map +1 -1
- package/dist/components/Timeline.d.ts +1 -1
- package/dist/components/Timeline.d.ts.map +1 -1
- package/dist/components/Timeline.js +50 -6
- package/dist/components/Timeline.js.map +1 -1
- package/dist/components/ToggleButton.d.ts +2 -1
- package/dist/components/ToggleButton.d.ts.map +1 -1
- package/dist/components/ToggleButton.js +3 -3
- package/dist/components/ToggleButton.js.map +1 -1
- package/dist/components/ToggleButton.module.scss +27 -8
- package/dist/components/TypeFx.d.ts.map +1 -1
- package/dist/components/TypeFx.js +66 -87
- package/dist/components/TypeFx.js.map +1 -1
- package/dist/components/WeatherFx.d.ts +1 -0
- package/dist/components/WeatherFx.d.ts.map +1 -1
- package/dist/components/WeatherFx.js +97 -2
- package/dist/components/WeatherFx.js.map +1 -1
- package/dist/components/index.d.ts +9 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +9 -1
- package/dist/components/index.js.map +1 -1
- package/dist/css/styles.css +1 -1
- package/dist/css/styles.css.map +1 -1
- package/dist/css/tokens.css +1 -1
- package/dist/css/tokens.css.map +1 -1
- package/dist/data/emoji-data.json +0 -8
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useInViewport.d.ts +3 -0
- package/dist/hooks/useInViewport.d.ts.map +1 -0
- package/dist/hooks/useInViewport.js +19 -0
- package/dist/hooks/useInViewport.js.map +1 -0
- package/dist/hooks/useReducedMotion.d.ts +8 -0
- package/dist/hooks/useReducedMotion.d.ts.map +1 -0
- package/dist/hooks/useReducedMotion.js +44 -0
- package/dist/hooks/useReducedMotion.js.map +1 -0
- package/dist/interfaces.d.ts +1 -0
- package/dist/interfaces.d.ts.map +1 -1
- package/dist/internal/dialogState.d.ts +17 -0
- package/dist/internal/dialogState.d.ts.map +1 -0
- package/dist/internal/dialogState.js +101 -0
- package/dist/internal/dialogState.js.map +1 -0
- package/dist/internal/scrollLockState.d.ts +15 -0
- package/dist/internal/scrollLockState.d.ts.map +1 -0
- package/dist/internal/scrollLockState.js +172 -0
- package/dist/internal/scrollLockState.js.map +1 -0
- package/dist/modules/code/CodeBlock.d.ts +3 -31
- package/dist/modules/code/CodeBlock.d.ts.map +1 -1
- package/dist/modules/code/CodeBlock.impl.d.ts +34 -0
- package/dist/modules/code/CodeBlock.impl.d.ts.map +1 -0
- package/dist/modules/code/CodeBlock.impl.js +487 -0
- package/dist/modules/code/CodeBlock.impl.js.map +1 -0
- package/dist/modules/code/CodeBlock.js +10 -483
- package/dist/modules/code/CodeBlock.js.map +1 -1
- package/dist/modules/data/BarChart.d.ts +1 -8
- package/dist/modules/data/BarChart.d.ts.map +1 -1
- package/dist/modules/data/BarChart.impl.d.ts +12 -0
- package/dist/modules/data/BarChart.impl.d.ts.map +1 -0
- package/dist/modules/data/BarChart.impl.js +137 -0
- package/dist/modules/data/BarChart.impl.js.map +1 -0
- package/dist/modules/data/BarChart.js +9 -132
- package/dist/modules/data/BarChart.js.map +1 -1
- package/dist/modules/data/DataTooltip.d.ts +2 -2
- package/dist/modules/data/DataTooltip.d.ts.map +1 -1
- package/dist/modules/data/Legend.d.ts +1 -1
- package/dist/modules/data/Legend.d.ts.map +1 -1
- package/dist/modules/data/LineBarChart.d.ts +1 -8
- package/dist/modules/data/LineBarChart.d.ts.map +1 -1
- package/dist/modules/data/LineBarChart.impl.d.ts +12 -0
- package/dist/modules/data/LineBarChart.impl.d.ts.map +1 -0
- package/dist/modules/data/LineBarChart.impl.js +142 -0
- package/dist/modules/data/LineBarChart.impl.js.map +1 -0
- package/dist/modules/data/LineBarChart.js +9 -137
- package/dist/modules/data/LineBarChart.js.map +1 -1
- package/dist/modules/data/LineChart.d.ts +1 -13
- package/dist/modules/data/LineChart.d.ts.map +1 -1
- package/dist/modules/data/LineChart.impl.d.ts +17 -0
- package/dist/modules/data/LineChart.impl.d.ts.map +1 -0
- package/dist/modules/data/LineChart.impl.js +148 -0
- package/dist/modules/data/LineChart.impl.js.map +1 -0
- package/dist/modules/data/LineChart.js +9 -143
- package/dist/modules/data/LineChart.js.map +1 -1
- package/dist/modules/data/PieChart.d.ts +4 -16
- package/dist/modules/data/PieChart.d.ts.map +1 -1
- package/dist/modules/data/PieChart.impl.d.ts +18 -0
- package/dist/modules/data/PieChart.impl.d.ts.map +1 -0
- package/dist/modules/data/PieChart.impl.js +102 -0
- package/dist/modules/data/PieChart.impl.js.map +1 -0
- package/dist/modules/data/PieChart.js +11 -97
- package/dist/modules/data/PieChart.js.map +1 -1
- package/dist/modules/media/MediaUpload.d.ts +2 -20
- package/dist/modules/media/MediaUpload.d.ts.map +1 -1
- package/dist/modules/media/MediaUpload.impl.d.ts +24 -0
- package/dist/modules/media/MediaUpload.impl.d.ts.map +1 -0
- package/dist/modules/media/MediaUpload.impl.js +92 -0
- package/dist/modules/media/MediaUpload.impl.js.map +1 -0
- package/dist/modules/media/MediaUpload.js +10 -88
- package/dist/modules/media/MediaUpload.js.map +1 -1
- package/dist/modules/navigation/Kbar.d.ts.map +1 -1
- package/dist/modules/navigation/Kbar.js +13 -28
- package/dist/modules/navigation/Kbar.js.map +1 -1
- package/dist/package.json +17 -6
- package/dist/styles/size.scss +20 -0
- package/dist/styles/typography.scss +8 -40
- package/dist/test/dialogTestUtils.d.ts +2 -0
- package/dist/test/dialogTestUtils.d.ts.map +1 -0
- package/dist/test/dialogTestUtils.js +9 -0
- package/dist/test/dialogTestUtils.js.map +1 -0
- package/dist/test/setup.d.ts +2 -0
- package/dist/test/setup.d.ts.map +1 -0
- package/dist/test/setup.js +59 -0
- package/dist/test/setup.js.map +1 -0
- package/dist/tokens/layout.scss +5 -0
- package/dist/utils/MissingDependency.d.ts +7 -0
- package/dist/utils/MissingDependency.d.ts.map +1 -0
- package/dist/utils/MissingDependency.js +6 -0
- package/dist/utils/MissingDependency.js.map +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/dist/utils/index.js.map +1 -1
- package/next-env.d.ts +5 -0
- package/package.json +135 -115
- package/tsconfig.vitest.json +20 -0
- package/vitest.config.ts +19 -0
|
@@ -1,142 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import React, {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import { useDataTheme } from "../../contexts/DataThemeProvider";
|
|
10
|
-
const LineBarChart = ({ title, description, data, series, date, emptyState, errorState, error = false, loading = false, tooltip = true, legend: legendProp = {}, grid = "y", axis = "both", border = "neutral-alpha-weak", variant: variantProp, barWidth = "l", curve = "natural", reverseY = false, reverseX = false, "data-viz-style": dataVizStyle, ...flex }) => {
|
|
11
|
-
const { variant: themeVariant, mode, height, tick: { fill: tickFill, fontSize: tickFontSize, line: tickLine }, axis: { stroke: axisLineStroke }, } = useDataTheme();
|
|
12
|
-
const variant = variantProp || themeVariant;
|
|
13
|
-
const legend = {
|
|
14
|
-
display: legendProp.display !== undefined ? legendProp.display : true,
|
|
15
|
-
position: legendProp.position || "top-left",
|
|
16
|
-
direction: legendProp.direction,
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import React, { Suspense } from "react";
|
|
4
|
+
import { MissingDependency } from "../../utils/MissingDependency";
|
|
5
|
+
const LineBarChartImpl = React.lazy(() => import("./LineBarChart.impl").catch(() => {
|
|
6
|
+
console.warn('[@once-ui-system/core] <LineBarChart /> requires the "recharts" package. Install it with: npm install recharts');
|
|
7
|
+
return {
|
|
8
|
+
default: () => _jsx(MissingDependency, { component: "LineBarChart", packageName: "recharts" }),
|
|
17
9
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
startDate: date.start,
|
|
21
|
-
endDate: date.end,
|
|
22
|
-
}
|
|
23
|
-
: undefined);
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
if (date?.start && date?.end) {
|
|
26
|
-
setSelectedDateRange({
|
|
27
|
-
startDate: date.start,
|
|
28
|
-
endDate: date.end,
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
}, [date?.start, date?.end]);
|
|
32
|
-
const allSeriesArray = Array.isArray(series) ? series : series ? [series] : [];
|
|
33
|
-
const seriesKeys = allSeriesArray.map((s) => s.key);
|
|
34
|
-
const xAxisKey = Object.keys(data[0] || {}).find((key) => !seriesKeys.includes(key)) || "name";
|
|
35
|
-
const filteredData = React.useMemo(() => {
|
|
36
|
-
if (selectedDateRange?.startDate && selectedDateRange?.endDate && xAxisKey) {
|
|
37
|
-
const startDate = selectedDateRange.startDate;
|
|
38
|
-
const endDate = selectedDateRange.endDate;
|
|
39
|
-
if (startDate instanceof Date && endDate instanceof Date) {
|
|
40
|
-
return data.filter((item) => {
|
|
41
|
-
try {
|
|
42
|
-
const itemDateValue = item[xAxisKey];
|
|
43
|
-
if (!itemDateValue)
|
|
44
|
-
return false;
|
|
45
|
-
const itemDate = typeof itemDateValue === "string" ? parseISO(itemDateValue) : itemDateValue;
|
|
46
|
-
return isWithinInterval(itemDate, {
|
|
47
|
-
start: startDate,
|
|
48
|
-
end: endDate,
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
catch (error) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
return data;
|
|
58
|
-
}, [data, selectedDateRange, xAxisKey]);
|
|
59
|
-
const handleDateRangeChange = useCallback((newRange) => {
|
|
60
|
-
setSelectedDateRange(newRange);
|
|
61
|
-
if (date?.onChange) {
|
|
62
|
-
date.onChange(newRange);
|
|
63
|
-
}
|
|
64
|
-
}, [date]);
|
|
65
|
-
const chartSeriesArray = Array.isArray(series) ? series : series ? [series] : [];
|
|
66
|
-
if (chartSeriesArray.length < 2) {
|
|
67
|
-
console.warn("LineBarChart requires at least 2 series (one for line, one for bar)");
|
|
68
|
-
}
|
|
69
|
-
const lineSeries = chartSeriesArray[0] || { key: "value1", color: "blue" };
|
|
70
|
-
const barSeries = chartSeriesArray[1] || { key: "value2", color: "green" };
|
|
71
|
-
const lineColor = lineSeries.color || "blue";
|
|
72
|
-
const barColor = barSeries.color || "green";
|
|
73
|
-
const finalLineColor = `var(--data-${lineColor})`;
|
|
74
|
-
const finalBarColor = `var(--data-${barColor})`;
|
|
75
|
-
const legendContent = useMemo(() => (_jsx(Legend, { variant: variant, colors: [finalLineColor, finalBarColor], labels: axis, position: legend.position, direction: legend.direction })), [variant, finalLineColor, finalBarColor, axis, legend.position, legend.direction]);
|
|
76
|
-
const legendWrapperStyle = useMemo(() => ({
|
|
77
|
-
position: "absolute",
|
|
78
|
-
top: legend.position === "top-center" ||
|
|
79
|
-
legend.position === "top-left" ||
|
|
80
|
-
legend.position === "top-right"
|
|
81
|
-
? reverseX ? 32 : 0
|
|
82
|
-
: undefined,
|
|
83
|
-
bottom: legend.position === "bottom-center" ||
|
|
84
|
-
legend.position === "bottom-left" ||
|
|
85
|
-
legend.position === "bottom-right"
|
|
86
|
-
? 0
|
|
87
|
-
: undefined,
|
|
88
|
-
paddingBottom: legend.position === "bottom-center" ||
|
|
89
|
-
legend.position === "bottom-left" ||
|
|
90
|
-
legend.position === "bottom-right"
|
|
91
|
-
? "var(--static-space-40)"
|
|
92
|
-
: undefined,
|
|
93
|
-
left: (axis === "y" || axis === "both") &&
|
|
94
|
-
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
95
|
-
? "var(--static-space-64)"
|
|
96
|
-
: 0,
|
|
97
|
-
width: (axis === "y" || axis === "both") &&
|
|
98
|
-
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
99
|
-
? "calc(100% - var(--static-space-64))"
|
|
100
|
-
: "100%",
|
|
101
|
-
right: 0,
|
|
102
|
-
margin: 0,
|
|
103
|
-
}), [legend.position, reverseX, axis]);
|
|
104
|
-
const chartId = React.useMemo(() => Math.random().toString(36).substring(2, 9), []);
|
|
105
|
-
return (_jsxs(Column, { fillWidth: true, height: height, border: border, radius: "l", "data-viz-style": dataVizStyle || mode, ...flex, children: [_jsx(ChartHeader, { title: title, description: description, dateRange: selectedDateRange, date: date, onDateRangeChange: handleDateRangeChange, presets: date?.presets }), _jsxs(Row, { fill: true, borderTop: (title || description || date?.selector) ? (border || "neutral-alpha-weak") : undefined, topRadius: flex.radius || "l", overflow: "hidden", children: [_jsx(ChartStatus, { loading: loading, empty: !filteredData || filteredData.length === 0, emptyState: emptyState, error: error, errorState: errorState }), !loading && !error && filteredData && filteredData.length > 0 && (_jsx(RechartsResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(RechartsComposedChart, { data: filteredData, margin: { left: 0, bottom: 0, top: 0, right: 0 }, barGap: 4, children: [_jsxs("defs", { children: [_jsx(LinearGradient, { id: `barGradient${chartId}`, color: finalBarColor, variant: variant }), _jsx(LinearGradient, { id: `lineGradient${chartId}`, color: finalLineColor, variant: variant })] }), _jsx(RechartsCartesianGrid, { vertical: grid === "x" || grid === "both", horizontal: grid === "y" || grid === "both", stroke: "var(--neutral-alpha-weak)" }), legend.display && (_jsx(RechartsLegend, { content: legendContent, wrapperStyle: legendWrapperStyle })), _jsx(RechartsXAxis, { height: 32, tickMargin: 6, dataKey: xAxisKey, hide: !(axis === "x" || axis === "both"), orientation: reverseX ? "top" : "bottom", axisLine: {
|
|
106
|
-
stroke: axisLineStroke,
|
|
107
|
-
}, tickLine: tickLine, tick: {
|
|
108
|
-
fill: tickFill,
|
|
109
|
-
fontSize: tickFontSize,
|
|
110
|
-
}, tickFormatter: (value) => {
|
|
111
|
-
const dataPoint = data.find((item) => item[xAxisKey] === value);
|
|
112
|
-
return formatDate(value, date, dataPoint);
|
|
113
|
-
} }), (axis === "y" || axis === "both") && (_jsx(RechartsYAxis, { width: 64, padding: { top: 40 }, allowDataOverflow: true, orientation: reverseY ? "right" : "left", tickLine: tickLine, tick: {
|
|
114
|
-
fill: tickFill,
|
|
115
|
-
fontSize: tickFontSize,
|
|
116
|
-
}, axisLine: {
|
|
117
|
-
stroke: axisLineStroke,
|
|
118
|
-
} })), tooltip && (_jsx(RechartsTooltip, { cursor: {
|
|
119
|
-
stroke: "var(--neutral-border-strong)",
|
|
120
|
-
strokeWidth: 1,
|
|
121
|
-
}, content: (props) => (_jsx(DataTooltip, { ...props, variant: variant, date: date, dataKey: xAxisKey })) })), _jsx(RechartsArea, { type: curve, dataKey: lineSeries.key, name: lineSeries.key, stroke: finalLineColor, transform: "translate(0, -1)", fill: `url(#lineGradient${chartId})`, activeDot: {
|
|
122
|
-
r: 4,
|
|
123
|
-
fill: finalLineColor,
|
|
124
|
-
stroke: "var(--background)",
|
|
125
|
-
strokeWidth: 0,
|
|
126
|
-
} }), _jsx(RechartsBar, { dataKey: barSeries.key, name: barSeries.key, fill: `url(#barGradient${chartId})`, stroke: finalBarColor, strokeWidth: 1, transform: "translate(0, -1)", radius: [4, 4, 4, 4], barSize: barWidth === "fill"
|
|
127
|
-
? "100%"
|
|
128
|
-
: barWidth === "xs"
|
|
129
|
-
? 6
|
|
130
|
-
: barWidth === "s"
|
|
131
|
-
? 12
|
|
132
|
-
: barWidth === "m"
|
|
133
|
-
? 20
|
|
134
|
-
: barWidth === "l"
|
|
135
|
-
? 40
|
|
136
|
-
: barWidth === "xl"
|
|
137
|
-
? 50
|
|
138
|
-
: barWidth })] }) }))] })] }));
|
|
139
|
-
};
|
|
10
|
+
}));
|
|
11
|
+
const LineBarChart = (props) => (_jsx(Suspense, { fallback: null, children: _jsx(LineBarChartImpl, { ...props }) }));
|
|
140
12
|
LineBarChart.displayName = "LineBarChart";
|
|
141
13
|
export { LineBarChart };
|
|
142
14
|
//# sourceMappingURL=LineBarChart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineBarChart.js","sourceRoot":"","sources":["../../../src/modules/data/LineBarChart.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"LineBarChart.js","sourceRoot":"","sources":["../../../src/modules/data/LineBarChart.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGlE,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CACvC,MAAM,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;IACvC,OAAO,CAAC,IAAI,CACV,gHAAgH,CACjH,CAAC;IACF,OAAO;QACL,OAAO,EAAE,GAAG,EAAE,CAAC,KAAC,iBAAiB,IAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,UAAU,GAAG;KACrF,CAAC;AACJ,CAAC,CAAC,CACH,CAAC;AAEF,MAAM,YAAY,GAAgC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3D,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YACtB,KAAC,gBAAgB,OAAK,KAAK,GAAI,GACtB,CACZ,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
interface LineChartProps extends ChartProps {
|
|
4
|
-
curve?: curveType;
|
|
5
|
-
reverseY?: boolean;
|
|
6
|
-
reverseX?: boolean;
|
|
7
|
-
animation?: boolean;
|
|
8
|
-
animationBegin?: number;
|
|
9
|
-
animationDuration?: number;
|
|
10
|
-
animationEasing?: unknown;
|
|
11
|
-
xAxisType?: "number" | "category";
|
|
12
|
-
xDomain?: [number, number];
|
|
13
|
-
"data-viz-style"?: string;
|
|
14
|
-
}
|
|
2
|
+
import type { LineChartProps } from "./LineChart.impl";
|
|
15
3
|
declare const LineChart: React.FC<LineChartProps>;
|
|
16
4
|
export { LineChart };
|
|
17
5
|
export type { LineChartProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/modules/data/LineChart.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/modules/data/LineChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAavD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAIvC,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ChartProps, curveType } from ".";
|
|
3
|
+
export interface LineChartProps extends ChartProps {
|
|
4
|
+
curve?: curveType;
|
|
5
|
+
reverseY?: boolean;
|
|
6
|
+
reverseX?: boolean;
|
|
7
|
+
animation?: boolean;
|
|
8
|
+
animationBegin?: number;
|
|
9
|
+
animationDuration?: number;
|
|
10
|
+
animationEasing?: unknown;
|
|
11
|
+
xAxisType?: "number" | "category";
|
|
12
|
+
xDomain?: [number, number];
|
|
13
|
+
"data-viz-style"?: string;
|
|
14
|
+
}
|
|
15
|
+
declare const LineChart: React.FC<LineChartProps>;
|
|
16
|
+
export default LineChart;
|
|
17
|
+
//# sourceMappingURL=LineChart.impl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChart.impl.d.ts","sourceRoot":"","sources":["../../../src/modules/data/LineChart.impl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAczE,OAAO,EAML,UAAU,EAGV,SAAS,EACV,MAAM,GAAG,CAAC;AAKX,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0TvC,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
|
4
|
+
import { isWithinInterval, parseISO } from "date-fns";
|
|
5
|
+
import { formatDate } from "./utils/formatDate";
|
|
6
|
+
import { AreaChart as RechartsAreaChart, Area as RechartsArea, YAxis as RechartsYAxis, XAxis as RechartsXAxis, CartesianGrid as RechartsCartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer as RechartsResponsiveContainer, Legend as RechartsLegend, } from "recharts";
|
|
7
|
+
import { Column, Row } from "../../components";
|
|
8
|
+
import { LinearGradient, ChartHeader, DataTooltip, Legend, ChartStatus, } from ".";
|
|
9
|
+
import { schemes } from "../../types";
|
|
10
|
+
import { getDistributedColor } from "./utils/colorDistribution";
|
|
11
|
+
import { useDataTheme } from "../../contexts/DataThemeProvider";
|
|
12
|
+
const LineChart = ({ title, description, data, series, date, emptyState, errorState, error = false, loading = false, tooltip = true, legend: legendProp = {}, axis = "both", grid = "both", border = "neutral-alpha-weak", variant: variantProp, curve = "natural", reverseY = false, reverseX = false, animation = true, animationBegin, animationDuration, animationEasing, xAxisType, xDomain, "data-viz-style": dataVizStyle, ...flex }) => {
|
|
13
|
+
const { variant: themeVariant, mode, height, tick: { fill: tickFill, fontSize: tickFontSize, line: tickLine }, axis: { stroke: axisLineStroke }, } = useDataTheme();
|
|
14
|
+
const variant = variantProp || themeVariant;
|
|
15
|
+
const legend = {
|
|
16
|
+
display: legendProp.display !== undefined ? legendProp.display : true,
|
|
17
|
+
position: legendProp.position || "top-left",
|
|
18
|
+
direction: legendProp.direction,
|
|
19
|
+
};
|
|
20
|
+
const [selectedDateRange, setSelectedDateRange] = useState(date?.start && date?.end
|
|
21
|
+
? {
|
|
22
|
+
startDate: date.start,
|
|
23
|
+
endDate: date.end,
|
|
24
|
+
}
|
|
25
|
+
: undefined);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (date?.start && date?.end) {
|
|
28
|
+
setSelectedDateRange({
|
|
29
|
+
startDate: date.start,
|
|
30
|
+
endDate: date.end,
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}, [date?.start, date?.end]);
|
|
34
|
+
const seriesArray = Array.isArray(series) ? series : series ? [series] : [];
|
|
35
|
+
const seriesKeys = seriesArray.map((s) => s.key);
|
|
36
|
+
// Generate a unique ID for this chart instance
|
|
37
|
+
const chartId = React.useMemo(() => Math.random().toString(36).substring(2, 9), []);
|
|
38
|
+
const coloredSeriesArray = useMemo(() => seriesArray.map((s, index) => ({
|
|
39
|
+
...s,
|
|
40
|
+
color: s.color || getDistributedColor(index, seriesArray.length),
|
|
41
|
+
})), [seriesArray]);
|
|
42
|
+
const autoKeys = Object.keys(data[0] || {}).filter((key) => !seriesKeys.includes(key));
|
|
43
|
+
const autoSeries = seriesArray.length > 0
|
|
44
|
+
? coloredSeriesArray
|
|
45
|
+
: autoKeys.map((key, index) => ({
|
|
46
|
+
key,
|
|
47
|
+
color: getDistributedColor(index, autoKeys.length),
|
|
48
|
+
}));
|
|
49
|
+
const xAxisKey = Object.keys(data[0] || {}).find((key) => !seriesKeys.includes(key)) || "name";
|
|
50
|
+
const filteredData = React.useMemo(() => {
|
|
51
|
+
if (selectedDateRange?.startDate && selectedDateRange?.endDate && xAxisKey) {
|
|
52
|
+
const startDate = selectedDateRange.startDate;
|
|
53
|
+
const endDate = selectedDateRange.endDate;
|
|
54
|
+
if (startDate instanceof Date && endDate instanceof Date) {
|
|
55
|
+
return data.filter((item) => {
|
|
56
|
+
try {
|
|
57
|
+
const itemDateValue = item[xAxisKey];
|
|
58
|
+
if (!itemDateValue)
|
|
59
|
+
return false;
|
|
60
|
+
const itemDate = typeof itemDateValue === "string" ? parseISO(itemDateValue) : itemDateValue;
|
|
61
|
+
return isWithinInterval(itemDate, {
|
|
62
|
+
start: startDate,
|
|
63
|
+
end: endDate,
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
catch (error) {
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
return data;
|
|
73
|
+
}, [data, selectedDateRange, xAxisKey]);
|
|
74
|
+
const handleDateRangeChange = useCallback((newRange) => {
|
|
75
|
+
setSelectedDateRange(newRange);
|
|
76
|
+
if (date?.onChange) {
|
|
77
|
+
date.onChange(newRange);
|
|
78
|
+
}
|
|
79
|
+
}, [date]);
|
|
80
|
+
const legendContent = useCallback((props) => {
|
|
81
|
+
const customPayload = autoSeries.map(({ key, color }, index) => ({
|
|
82
|
+
value: key,
|
|
83
|
+
color: `var(--data-${color || schemes[index % schemes.length]})`,
|
|
84
|
+
}));
|
|
85
|
+
return (_jsx(Legend, { payload: customPayload, reverseY: reverseY, labels: axis, position: legend.position, direction: legend.direction, variant: variant }));
|
|
86
|
+
}, [autoSeries, axis, legend.position, legend.direction, variant]);
|
|
87
|
+
const legendWrapperStyle = useMemo(() => ({
|
|
88
|
+
position: "absolute",
|
|
89
|
+
top: legend.position === "top-center" ||
|
|
90
|
+
legend.position === "top-left" ||
|
|
91
|
+
legend.position === "top-right"
|
|
92
|
+
? reverseX ? 32 : 0
|
|
93
|
+
: undefined,
|
|
94
|
+
bottom: legend.position === "bottom-center" ||
|
|
95
|
+
legend.position === "bottom-left" ||
|
|
96
|
+
legend.position === "bottom-right"
|
|
97
|
+
? 0
|
|
98
|
+
: undefined,
|
|
99
|
+
paddingBottom: legend.position === "bottom-center" ||
|
|
100
|
+
legend.position === "bottom-left" ||
|
|
101
|
+
legend.position === "bottom-right"
|
|
102
|
+
? "var(--static-space-40)"
|
|
103
|
+
: undefined,
|
|
104
|
+
left: (axis === "y" || axis === "both") &&
|
|
105
|
+
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
106
|
+
? "var(--static-space-64)"
|
|
107
|
+
: 0,
|
|
108
|
+
width: (axis === "y" || axis === "both") &&
|
|
109
|
+
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
110
|
+
? "calc(100% - var(--static-space-64))"
|
|
111
|
+
: "100%",
|
|
112
|
+
right: 0,
|
|
113
|
+
margin: 0,
|
|
114
|
+
}), [legend.position, reverseX, axis]);
|
|
115
|
+
return (_jsxs(Column, { fillWidth: true, height: height, border: border, radius: "l", "data-viz-style": dataVizStyle || mode, ...flex, children: [_jsx(ChartHeader, { title: title, description: description, dateRange: selectedDateRange, date: date, onDateRangeChange: handleDateRangeChange, presets: date?.presets }), _jsxs(Row, { fill: true, borderTop: (title || description || date?.selector) ? (border || "neutral-alpha-weak") : undefined, topRadius: flex.radius || "l", overflow: "hidden", children: [_jsx(ChartStatus, { loading: loading, empty: !filteredData || filteredData.length === 0, emptyState: emptyState, error: error, errorState: errorState }), !loading && !error && filteredData && filteredData.length > 0 && (_jsx(RechartsResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(RechartsAreaChart, { data: filteredData, margin: { left: 0, bottom: 0, top: 0, right: 0 }, children: [_jsx("defs", { children: autoSeries.map(({ key, color }, index) => {
|
|
116
|
+
const colorValue = color || schemes[index % schemes.length];
|
|
117
|
+
const lineColor = `var(--data-${colorValue})`;
|
|
118
|
+
return (_jsx(LinearGradient, { id: `barGradient${chartId}${index}`, variant: variant, color: lineColor }, `gradient-${chartId}-${index}`));
|
|
119
|
+
}) }), _jsx(RechartsCartesianGrid, { vertical: grid === "x" || grid === "both", horizontal: grid === "y" || grid === "both", stroke: "var(--neutral-alpha-weak)" }), legend.display && (_jsx(RechartsLegend, { content: legendContent, wrapperStyle: legendWrapperStyle })), _jsx(RechartsXAxis, { height: 32, tickMargin: 6, dataKey: xAxisKey, ...(xAxisType ? { type: xAxisType } : {}), ...(xDomain ? { domain: xDomain } : {}), hide: !(axis === "x" || axis === "both"), orientation: reverseX ? "top" : "bottom", axisLine: {
|
|
120
|
+
stroke: axisLineStroke,
|
|
121
|
+
}, tickLine: tickLine, tick: {
|
|
122
|
+
fill: tickFill,
|
|
123
|
+
fontSize: tickFontSize,
|
|
124
|
+
}, tickFormatter: (value) => {
|
|
125
|
+
const dataPoint = data.find((item) => item[xAxisKey] === value);
|
|
126
|
+
return formatDate(value, date, dataPoint);
|
|
127
|
+
} }), (axis === "y" || axis === "both") && (_jsx(RechartsYAxis, { width: 64, padding: { top: 40 }, allowDataOverflow: true, orientation: reverseY ? "right" : "left", tickLine: tickLine, tick: {
|
|
128
|
+
fill: tickFill,
|
|
129
|
+
fontSize: tickFontSize,
|
|
130
|
+
}, axisLine: {
|
|
131
|
+
stroke: axisLineStroke,
|
|
132
|
+
} })), tooltip && (_jsx(RechartsTooltip, { cursor: {
|
|
133
|
+
stroke: "var(--neutral-border-strong)",
|
|
134
|
+
strokeWidth: 1,
|
|
135
|
+
}, content: (props) => (_jsx(DataTooltip, { ...props, variant: variant, date: date })) })), autoSeries.map(({ key, color }, index) => {
|
|
136
|
+
const colorValue = color || schemes[index % schemes.length];
|
|
137
|
+
const lineColor = `var(--data-${colorValue})`;
|
|
138
|
+
return (_jsx(RechartsArea, { type: curve, dataKey: key, name: key, isAnimationActive: animation, animationBegin: animationBegin, animationDuration: animationDuration, animationEasing: animationEasing, stroke: lineColor, transform: "translate(0, -1)", fill: variant === "outline" ? "transparent" : `url(#barGradient${chartId}${index})`, activeDot: {
|
|
139
|
+
r: 4,
|
|
140
|
+
fill: lineColor,
|
|
141
|
+
stroke: "var(--background)",
|
|
142
|
+
strokeWidth: 0,
|
|
143
|
+
} }, key));
|
|
144
|
+
})] }) }))] })] }));
|
|
145
|
+
};
|
|
146
|
+
LineChart.displayName = "LineChart";
|
|
147
|
+
export default LineChart;
|
|
148
|
+
//# sourceMappingURL=LineChart.impl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChart.impl.js","sourceRoot":"","sources":["../../../src/modules/data/LineChart.impl.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EACL,SAAS,IAAI,iBAAiB,EAC9B,IAAI,IAAI,YAAY,EACpB,KAAK,IAAI,aAAa,EACtB,KAAK,IAAI,aAAa,EACtB,aAAa,IAAI,qBAAqB,EACtC,OAAO,IAAI,eAAe,EAC1B,mBAAmB,IAAI,2BAA2B,EAClD,MAAM,IAAI,cAAc,GACzB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,GAAG,EAAa,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EACL,cAAc,EACd,WAAW,EACX,WAAW,EACX,MAAM,EAGN,WAAW,GAGZ,MAAM,GAAG,CAAC;AACX,OAAO,EAAc,OAAO,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAehE,MAAM,SAAS,GAA6B,CAAC,EAC3C,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAK,GAAG,KAAK,EACb,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,IAAI,EACd,MAAM,EAAE,UAAU,GAAG,EAAE,EACvB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,MAAM,EACb,MAAM,GAAG,oBAAoB,EAC7B,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,SAAS,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,IAAI,EAChB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,OAAO,EACP,gBAAgB,EAAE,YAAY,EAC9B,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,EACJ,OAAO,EAAE,YAAY,EACrB,IAAI,EACJ,MAAM,EACN,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,EAChE,IAAI,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,GACjC,GAAG,YAAY,EAAE,CAAC;IACnB,MAAM,OAAO,GAAG,WAAW,IAAI,YAAY,CAAC;IAC5C,MAAM,MAAM,GAAG;QACb,OAAO,EAAE,UAAU,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;QACrE,QAAQ,EAAE,UAAU,CAAC,QAAQ,IAAI,UAAU;QAC3C,SAAS,EAAE,UAAU,CAAC,SAAS;KAChC,CAAC;IAEF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CACxD,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,GAAG;QACtB,CAAC,CAAC;YACE,SAAS,EAAE,IAAI,CAAC,KAAK;YACrB,OAAO,EAAE,IAAI,CAAC,GAAG;SAClB;QACH,CAAC,CAAC,SAAS,CACd,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC;YAC7B,oBAAoB,CAAC;gBACnB,SAAS,EAAE,IAAI,CAAC,KAAK;gBACrB,OAAO,EAAE,IAAI,CAAC,GAAG;aAClB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAE7B,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAE/D,+CAA+C;IAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEpF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CACH,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC7B,GAAG,CAAC;QACJ,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,mBAAmB,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;KACjE,CAAC,CAAC,EACL,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IACvF,MAAM,UAAU,GACd,WAAW,CAAC,MAAM,GAAG,CAAC;QACpB,CAAC,CAAC,kBAAkB;QACpB,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YAC5B,GAAG;YACH,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;SACnD,CAAC,CAAC,CAAC;IAEV,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM,CAAC;IAE/F,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,iBAAiB,EAAE,SAAS,IAAI,iBAAiB,EAAE,OAAO,IAAI,QAAQ,EAAE,CAAC;YAC3E,MAAM,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;YAC9C,MAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC;YAE1C,IAAI,SAAS,YAAY,IAAI,IAAI,OAAO,YAAY,IAAI,EAAE,CAAC;gBACzD,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;oBAC1B,IAAI,CAAC;wBACH,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;wBACrC,IAAI,CAAC,aAAa;4BAAE,OAAO,KAAK,CAAC;wBAEjC,MAAM,QAAQ,GACZ,OAAO,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAE,aAAsB,CAAC;wBAExF,OAAO,gBAAgB,CAAC,QAAQ,EAAE;4BAChC,KAAK,EAAE,SAAS;4BAChB,GAAG,EAAE,OAAO;yBACb,CAAC,CAAC;oBACL,CAAC;oBAAC,OAAO,KAAK,EAAE,CAAC;wBACf,OAAO,KAAK,CAAC;oBACf,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,QAAmB,EAAE,EAAE;QACtB,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QAC/B,IAAI,IAAI,EAAE,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAU,EAAE,EAAE;QACb,MAAM,aAAa,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YAC/D,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,cAAc,KAAK,IAAI,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG;SACjE,CAAC,CAAC,CAAC;QAEJ,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,OAAuB,GAChC,CACH,CAAC;IACJ,CAAC,EACD,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAC/D,CAAC;IAEF,MAAM,kBAAkB,GAAG,OAAO,CAChC,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ,EAAE,UAAmB;QAC7B,GAAG,EACD,MAAM,CAAC,QAAQ,KAAK,YAAY;YAChC,MAAM,CAAC,QAAQ,KAAK,UAAU;YAC9B,MAAM,CAAC,QAAQ,KAAK,WAAW;YAC7B,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC,CAAC,SAAS;QACf,MAAM,EACJ,MAAM,CAAC,QAAQ,KAAK,eAAe;YACnC,MAAM,CAAC,QAAQ,KAAK,aAAa;YACjC,MAAM,CAAC,QAAQ,KAAK,cAAc;YAChC,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,SAAS;QACf,aAAa,EACX,MAAM,CAAC,QAAQ,KAAK,eAAe;YACnC,MAAM,CAAC,QAAQ,KAAK,aAAa;YACjC,MAAM,CAAC,QAAQ,KAAK,cAAc;YAChC,CAAC,CAAC,wBAAwB;YAC1B,CAAC,CAAC,SAAS;QACf,IAAI,EACF,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,MAAM,CAAC;YACjC,CAAC,MAAM,CAAC,QAAQ,KAAK,YAAY,IAAI,MAAM,CAAC,QAAQ,KAAK,eAAe,CAAC;YACvE,CAAC,CAAC,wBAAwB;YAC1B,CAAC,CAAC,CAAC;QACP,KAAK,EACH,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,MAAM,CAAC;YACjC,CAAC,MAAM,CAAC,QAAQ,KAAK,YAAY,IAAI,MAAM,CAAC,QAAQ,KAAK,eAAe,CAAC;YACvE,CAAC,CAAC,qCAAqC;YACvC,CAAC,CAAC,MAAM;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV,CAAC,EACF,CAAC,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAClC,CAAC;IAEF,OAAO,CACL,MAAC,MAAM,IACL,SAAS,QACT,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAC,GAAG,oBACM,YAAY,IAAI,IAAI,KAChC,IAAI,aAER,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAE,IAAI,EACV,iBAAiB,EAAE,qBAAqB,EACxC,OAAO,EAAE,IAAI,EAAE,OAAO,GACtB,EACF,MAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAE,CAAC,KAAK,IAAI,WAAW,IAAI,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAoB,IAAI,GAAG,EAAE,QAAQ,EAAC,QAAQ,aAC1K,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EACjD,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,GACtB,EACD,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAChE,KAAC,2BAA2B,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,YACrD,MAAC,iBAAiB,IAChB,IAAI,EAAE,YAAY,EAClB,MAAM,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,aAEhD,yBACG,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;wCACxC,MAAM,UAAU,GAAG,KAAK,IAAI,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;wCAC5D,MAAM,SAAS,GAAG,cAAc,UAAU,GAAG,CAAC;wCAC9C,OAAO,CACL,KAAC,cAAc,IAEb,EAAE,EAAE,cAAc,OAAO,GAAG,KAAK,EAAE,EACnC,OAAO,EAAE,OAAuB,EAChC,KAAK,EAAE,SAAS,IAHX,YAAY,OAAO,IAAI,KAAK,EAAE,CAInC,CACH,CAAC;oCACJ,CAAC,CAAC,GACG,EACP,KAAC,qBAAqB,IAAC,QAAQ,EAAE,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,MAAM,EAAE,UAAU,EAAE,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,MAAM,EAAE,MAAM,EAAC,2BAA2B,GAAG,EACnJ,MAAM,CAAC,OAAO,IAAI,CACjB,KAAC,cAAc,IACb,OAAO,EAAE,aAAa,EACtB,YAAY,EAAE,kBAAkB,GAChC,CACH,EACD,KAAC,aAAa,IACZ,MAAM,EAAE,EAAE,EACV,UAAU,EAAE,CAAC,EACb,OAAO,EAAE,QAAQ,KACb,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACtC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,IAAI,EAAE,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,MAAM,CAAC,EACxC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACxC,QAAQ,EAAE;wCACR,MAAM,EAAE,cAAc;qCACvB,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE;wCACJ,IAAI,EAAE,QAAQ;wCACd,QAAQ,EAAE,YAAY;qCACvB,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;wCACvB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC;wCAChE,OAAO,UAAU,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;oCAC5C,CAAC,GACD,EACD,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,MAAM,CAAC,IAAI,CACpC,KAAC,aAAa,IACZ,KAAK,EAAE,EAAE,EACT,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EACpB,iBAAiB,QACjB,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EACxC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE;wCACJ,IAAI,EAAE,QAAQ;wCACd,QAAQ,EAAE,YAAY;qCACvB,EACD,QAAQ,EAAE;wCACR,MAAM,EAAE,cAAc;qCACvB,GACD,CACH,EACA,OAAO,IAAI,CACV,KAAC,eAAe,IACd,MAAM,EAAE;wCACN,MAAM,EAAE,8BAA8B;wCACtC,WAAW,EAAE,CAAC;qCACf,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAClB,KAAC,WAAW,OAAK,KAAK,EAAE,OAAO,EAAE,OAAuB,EAAE,IAAI,EAAE,IAAI,GAAI,CACzE,GACD,CACH,EACA,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oCACxC,MAAM,UAAU,GAAG,KAAK,IAAI,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;oCAC5D,MAAM,SAAS,GAAG,cAAc,UAAU,GAAG,CAAC;oCAC9C,OAAO,CACL,KAAC,YAAY,IAEX,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,GAAG,EACZ,IAAI,EAAE,GAAG,EACT,iBAAiB,EAAE,SAAS,EAC5B,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAsB,EACvC,MAAM,EAAE,SAAS,EACjB,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EACF,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,mBAAmB,OAAO,GAAG,KAAK,GAAG,EAE/E,SAAS,EAAE;4CACT,CAAC,EAAE,CAAC;4CACJ,IAAI,EAAE,SAAS;4CACf,MAAM,EAAE,mBAAmB;4CAC3B,WAAW,EAAE,CAAC;yCACf,IAlBI,GAAG,CAmBR,CACH,CAAC;gCACJ,CAAC,CAAC,IACgB,GACQ,CAC/B,IACG,IACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC"}
|
|
@@ -1,148 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx
|
|
3
|
-
import React, {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import { schemes } from "../../types";
|
|
10
|
-
import { getDistributedColor } from "./utils/colorDistribution";
|
|
11
|
-
import { useDataTheme } from "../../contexts/DataThemeProvider";
|
|
12
|
-
const LineChart = ({ title, description, data, series, date, emptyState, errorState, error = false, loading = false, tooltip = true, legend: legendProp = {}, axis = "both", grid = "both", border = "neutral-alpha-weak", variant: variantProp, curve = "natural", reverseY = false, reverseX = false, animation = true, animationBegin, animationDuration, animationEasing, xAxisType, xDomain, "data-viz-style": dataVizStyle, ...flex }) => {
|
|
13
|
-
const { variant: themeVariant, mode, height, tick: { fill: tickFill, fontSize: tickFontSize, line: tickLine }, axis: { stroke: axisLineStroke }, } = useDataTheme();
|
|
14
|
-
const variant = variantProp || themeVariant;
|
|
15
|
-
const legend = {
|
|
16
|
-
display: legendProp.display !== undefined ? legendProp.display : true,
|
|
17
|
-
position: legendProp.position || "top-left",
|
|
18
|
-
direction: legendProp.direction,
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import React, { Suspense } from "react";
|
|
4
|
+
import { MissingDependency } from "../../utils/MissingDependency";
|
|
5
|
+
const LineChartImpl = React.lazy(() => import("./LineChart.impl").catch(() => {
|
|
6
|
+
console.warn('[@once-ui-system/core] <LineChart /> requires the "recharts" package. Install it with: npm install recharts');
|
|
7
|
+
return {
|
|
8
|
+
default: () => _jsx(MissingDependency, { component: "LineChart", packageName: "recharts" }),
|
|
19
9
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
startDate: date.start,
|
|
23
|
-
endDate: date.end,
|
|
24
|
-
}
|
|
25
|
-
: undefined);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
if (date?.start && date?.end) {
|
|
28
|
-
setSelectedDateRange({
|
|
29
|
-
startDate: date.start,
|
|
30
|
-
endDate: date.end,
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
}, [date?.start, date?.end]);
|
|
34
|
-
const seriesArray = Array.isArray(series) ? series : series ? [series] : [];
|
|
35
|
-
const seriesKeys = seriesArray.map((s) => s.key);
|
|
36
|
-
// Generate a unique ID for this chart instance
|
|
37
|
-
const chartId = React.useMemo(() => Math.random().toString(36).substring(2, 9), []);
|
|
38
|
-
const coloredSeriesArray = useMemo(() => seriesArray.map((s, index) => ({
|
|
39
|
-
...s,
|
|
40
|
-
color: s.color || getDistributedColor(index, seriesArray.length),
|
|
41
|
-
})), [seriesArray]);
|
|
42
|
-
const autoKeys = Object.keys(data[0] || {}).filter((key) => !seriesKeys.includes(key));
|
|
43
|
-
const autoSeries = seriesArray.length > 0
|
|
44
|
-
? coloredSeriesArray
|
|
45
|
-
: autoKeys.map((key, index) => ({
|
|
46
|
-
key,
|
|
47
|
-
color: getDistributedColor(index, autoKeys.length),
|
|
48
|
-
}));
|
|
49
|
-
const xAxisKey = Object.keys(data[0] || {}).find((key) => !seriesKeys.includes(key)) || "name";
|
|
50
|
-
const filteredData = React.useMemo(() => {
|
|
51
|
-
if (selectedDateRange?.startDate && selectedDateRange?.endDate && xAxisKey) {
|
|
52
|
-
const startDate = selectedDateRange.startDate;
|
|
53
|
-
const endDate = selectedDateRange.endDate;
|
|
54
|
-
if (startDate instanceof Date && endDate instanceof Date) {
|
|
55
|
-
return data.filter((item) => {
|
|
56
|
-
try {
|
|
57
|
-
const itemDateValue = item[xAxisKey];
|
|
58
|
-
if (!itemDateValue)
|
|
59
|
-
return false;
|
|
60
|
-
const itemDate = typeof itemDateValue === "string" ? parseISO(itemDateValue) : itemDateValue;
|
|
61
|
-
return isWithinInterval(itemDate, {
|
|
62
|
-
start: startDate,
|
|
63
|
-
end: endDate,
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
catch (error) {
|
|
67
|
-
return false;
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
return data;
|
|
73
|
-
}, [data, selectedDateRange, xAxisKey]);
|
|
74
|
-
const handleDateRangeChange = useCallback((newRange) => {
|
|
75
|
-
setSelectedDateRange(newRange);
|
|
76
|
-
if (date?.onChange) {
|
|
77
|
-
date.onChange(newRange);
|
|
78
|
-
}
|
|
79
|
-
}, [date]);
|
|
80
|
-
const legendContent = useCallback((props) => {
|
|
81
|
-
const customPayload = autoSeries.map(({ key, color }, index) => ({
|
|
82
|
-
value: key,
|
|
83
|
-
color: `var(--data-${color || schemes[index % schemes.length]})`,
|
|
84
|
-
}));
|
|
85
|
-
return (_jsx(Legend, { payload: customPayload, reverseY: reverseY, labels: axis, position: legend.position, direction: legend.direction, variant: variant }));
|
|
86
|
-
}, [autoSeries, axis, legend.position, legend.direction, variant]);
|
|
87
|
-
const legendWrapperStyle = useMemo(() => ({
|
|
88
|
-
position: "absolute",
|
|
89
|
-
top: legend.position === "top-center" ||
|
|
90
|
-
legend.position === "top-left" ||
|
|
91
|
-
legend.position === "top-right"
|
|
92
|
-
? reverseX ? 32 : 0
|
|
93
|
-
: undefined,
|
|
94
|
-
bottom: legend.position === "bottom-center" ||
|
|
95
|
-
legend.position === "bottom-left" ||
|
|
96
|
-
legend.position === "bottom-right"
|
|
97
|
-
? 0
|
|
98
|
-
: undefined,
|
|
99
|
-
paddingBottom: legend.position === "bottom-center" ||
|
|
100
|
-
legend.position === "bottom-left" ||
|
|
101
|
-
legend.position === "bottom-right"
|
|
102
|
-
? "var(--static-space-40)"
|
|
103
|
-
: undefined,
|
|
104
|
-
left: (axis === "y" || axis === "both") &&
|
|
105
|
-
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
106
|
-
? "var(--static-space-64)"
|
|
107
|
-
: 0,
|
|
108
|
-
width: (axis === "y" || axis === "both") &&
|
|
109
|
-
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
110
|
-
? "calc(100% - var(--static-space-64))"
|
|
111
|
-
: "100%",
|
|
112
|
-
right: 0,
|
|
113
|
-
margin: 0,
|
|
114
|
-
}), [legend.position, reverseX, axis]);
|
|
115
|
-
return (_jsxs(Column, { fillWidth: true, height: height, border: border, radius: "l", "data-viz-style": dataVizStyle || mode, ...flex, children: [_jsx(ChartHeader, { title: title, description: description, dateRange: selectedDateRange, date: date, onDateRangeChange: handleDateRangeChange, presets: date?.presets }), _jsxs(Row, { fill: true, borderTop: (title || description || date?.selector) ? (border || "neutral-alpha-weak") : undefined, topRadius: flex.radius || "l", overflow: "hidden", children: [_jsx(ChartStatus, { loading: loading, empty: !filteredData || filteredData.length === 0, emptyState: emptyState, error: error, errorState: errorState }), !loading && !error && filteredData && filteredData.length > 0 && (_jsx(RechartsResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(RechartsAreaChart, { data: filteredData, margin: { left: 0, bottom: 0, top: 0, right: 0 }, children: [_jsx("defs", { children: autoSeries.map(({ key, color }, index) => {
|
|
116
|
-
const colorValue = color || schemes[index % schemes.length];
|
|
117
|
-
const lineColor = `var(--data-${colorValue})`;
|
|
118
|
-
return (_jsx(LinearGradient, { id: `barGradient${chartId}${index}`, variant: variant, color: lineColor }, `gradient-${chartId}-${index}`));
|
|
119
|
-
}) }), _jsx(RechartsCartesianGrid, { vertical: grid === "x" || grid === "both", horizontal: grid === "y" || grid === "both", stroke: "var(--neutral-alpha-weak)" }), legend.display && (_jsx(RechartsLegend, { content: legendContent, wrapperStyle: legendWrapperStyle })), _jsx(RechartsXAxis, { height: 32, tickMargin: 6, dataKey: xAxisKey, ...(xAxisType ? { type: xAxisType } : {}), ...(xDomain ? { domain: xDomain } : {}), hide: !(axis === "x" || axis === "both"), orientation: reverseX ? "top" : "bottom", axisLine: {
|
|
120
|
-
stroke: axisLineStroke,
|
|
121
|
-
}, tickLine: tickLine, tick: {
|
|
122
|
-
fill: tickFill,
|
|
123
|
-
fontSize: tickFontSize,
|
|
124
|
-
}, tickFormatter: (value) => {
|
|
125
|
-
const dataPoint = data.find((item) => item[xAxisKey] === value);
|
|
126
|
-
return formatDate(value, date, dataPoint);
|
|
127
|
-
} }), (axis === "y" || axis === "both") && (_jsx(RechartsYAxis, { width: 64, padding: { top: 40 }, allowDataOverflow: true, orientation: reverseY ? "right" : "left", tickLine: tickLine, tick: {
|
|
128
|
-
fill: tickFill,
|
|
129
|
-
fontSize: tickFontSize,
|
|
130
|
-
}, axisLine: {
|
|
131
|
-
stroke: axisLineStroke,
|
|
132
|
-
} })), tooltip && (_jsx(RechartsTooltip, { cursor: {
|
|
133
|
-
stroke: "var(--neutral-border-strong)",
|
|
134
|
-
strokeWidth: 1,
|
|
135
|
-
}, content: (props) => (_jsx(DataTooltip, { ...props, variant: variant, date: date })) })), autoSeries.map(({ key, color }, index) => {
|
|
136
|
-
const colorValue = color || schemes[index % schemes.length];
|
|
137
|
-
const lineColor = `var(--data-${colorValue})`;
|
|
138
|
-
return (_jsx(RechartsArea, { type: curve, dataKey: key, name: key, isAnimationActive: animation, animationBegin: animationBegin, animationDuration: animationDuration, animationEasing: animationEasing, stroke: lineColor, transform: "translate(0, -1)", fill: variant === "outline" ? "transparent" : `url(#barGradient${chartId}${index})`, activeDot: {
|
|
139
|
-
r: 4,
|
|
140
|
-
fill: lineColor,
|
|
141
|
-
stroke: "var(--background)",
|
|
142
|
-
strokeWidth: 0,
|
|
143
|
-
} }, key));
|
|
144
|
-
})] }) }))] })] }));
|
|
145
|
-
};
|
|
10
|
+
}));
|
|
11
|
+
const LineChart = (props) => (_jsx(Suspense, { fallback: null, children: _jsx(LineChartImpl, { ...props }) }));
|
|
146
12
|
LineChart.displayName = "LineChart";
|
|
147
13
|
export { LineChart };
|
|
148
14
|
//# sourceMappingURL=LineChart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.js","sourceRoot":"","sources":["../../../src/modules/data/LineChart.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"LineChart.js","sourceRoot":"","sources":["../../../src/modules/data/LineChart.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGlE,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CACpC,MAAM,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;IACpC,OAAO,CAAC,IAAI,CACV,6GAA6G,CAC9G,CAAC;IACF,OAAO;QACL,OAAO,EAAE,GAAG,EAAE,CAAC,KAAC,iBAAiB,IAAC,SAAS,EAAC,WAAW,EAAC,WAAW,EAAC,UAAU,GAAG;KAClF,CAAC;AACJ,CAAC,CAAC,CACH,CAAC;AAEF,MAAM,SAAS,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACrD,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YACtB,KAAC,aAAa,OAAK,KAAK,GAAI,GACnB,CACZ,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1,18 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
inner: number;
|
|
7
|
-
outer: number;
|
|
8
|
-
};
|
|
9
|
-
dataKey?: string;
|
|
10
|
-
nameKey?: string;
|
|
11
|
-
origo?: {
|
|
12
|
-
x: number;
|
|
13
|
-
y: number;
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
export declare const PieChart: React.FC<PieChartProps>;
|
|
17
|
-
export {};
|
|
2
|
+
import type { PieChartProps } from "./PieChart.impl";
|
|
3
|
+
declare const PieChart: React.FC<PieChartProps>;
|
|
4
|
+
export { PieChart };
|
|
5
|
+
export type { PieChartProps };
|
|
18
6
|
//# sourceMappingURL=PieChart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/modules/data/PieChart.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/modules/data/PieChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAarD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAIrC,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|