@once-ui-system/core 1.5.1 → 1.5.3
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/README.md +54 -0
- package/dist/README.md +54 -0
- package/dist/components/Avatar.d.ts +2 -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/CelebrationFx.d.ts +16 -0
- package/dist/components/CelebrationFx.d.ts.map +1 -0
- package/dist/components/CelebrationFx.js +310 -0
- package/dist/components/CelebrationFx.js.map +1 -0
- package/dist/components/CountdownFx.d.ts +11 -0
- package/dist/components/CountdownFx.d.ts.map +1 -0
- package/dist/components/CountdownFx.js +49 -0
- package/dist/components/CountdownFx.js.map +1 -0
- package/dist/components/Heading.d.ts.map +1 -1
- package/dist/components/MatrixFx.d.ts +11 -1
- package/dist/components/MatrixFx.d.ts.map +1 -1
- package/dist/components/MatrixFx.js +480 -118
- package/dist/components/MatrixFx.js.map +1 -1
- package/dist/components/Media.d.ts.map +1 -1
- package/dist/components/Media.js +10 -5
- package/dist/components/Media.js.map +1 -1
- package/dist/components/Pulse.d.ts.map +1 -1
- package/dist/components/Pulse.js +1 -0
- package/dist/components/Pulse.js.map +1 -1
- package/dist/components/SegmentedControl.d.ts +1 -0
- package/dist/components/SegmentedControl.d.ts.map +1 -1
- package/dist/components/SegmentedControl.js +3 -3
- package/dist/components/SegmentedControl.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 +3 -2
- package/dist/components/ShineFx.js.map +1 -1
- package/dist/components/ShineFx.module.scss +18 -1
- package/dist/components/StylePanel.js +1 -1
- package/dist/components/StylePanel.js.map +1 -1
- package/dist/components/WeatherFx.d.ts +17 -0
- package/dist/components/WeatherFx.d.ts.map +1 -0
- package/dist/components/WeatherFx.js +769 -0
- package/dist/components/WeatherFx.js.map +1 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -1
- package/dist/data/emoji-data.json +10 -8
- package/dist/icons.d.ts.map +1 -1
- package/dist/icons.js +3 -0
- package/dist/icons.js.map +1 -1
- package/dist/modules/code/CodeBlock.js +1 -1
- package/dist/modules/code/CodeBlock.js.map +1 -1
- package/dist/modules/data/BarChart.d.ts +2 -0
- package/dist/modules/data/BarChart.d.ts.map +1 -1
- package/dist/modules/data/BarChart.js +43 -41
- package/dist/modules/data/BarChart.js.map +1 -1
- package/dist/modules/data/Gauge.module.css +27 -0
- package/dist/modules/data/LineBarChart.d.ts +2 -0
- package/dist/modules/data/LineBarChart.d.ts.map +1 -1
- package/dist/modules/data/LineBarChart.js +35 -33
- package/dist/modules/data/LineBarChart.js.map +1 -1
- package/dist/modules/data/LineChart.d.ts +2 -0
- package/dist/modules/data/LineChart.d.ts.map +1 -1
- package/dist/modules/data/LineChart.js +43 -41
- package/dist/modules/data/LineChart.js.map +1 -1
- package/dist/modules/data/LinearGauge.d.ts +18 -0
- package/dist/modules/data/LinearGauge.d.ts.map +1 -0
- package/dist/modules/data/LinearGauge.js +78 -0
- package/dist/modules/data/LinearGauge.js.map +1 -0
- package/dist/modules/data/RadialGauge.d.ts +25 -0
- package/dist/modules/data/RadialGauge.d.ts.map +1 -0
- package/dist/modules/data/RadialGauge.js +94 -0
- package/dist/modules/data/RadialGauge.js.map +1 -0
- package/dist/modules/data/index.d.ts +2 -0
- package/dist/modules/data/index.d.ts.map +1 -1
- package/dist/modules/data/index.js +2 -0
- package/dist/modules/data/index.js.map +1 -1
- package/dist/modules/index.d.ts +3 -16
- package/dist/modules/index.d.ts.map +1 -1
- package/dist/modules/index.js +2 -15
- package/dist/modules/index.js.map +1 -1
- package/dist/modules/navigation/MegaMenu.d.ts.map +1 -1
- package/dist/modules/navigation/MegaMenu.js +11 -11
- package/dist/modules/navigation/MegaMenu.js.map +1 -1
- package/dist/package.json +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React, { useState, useEffect } from "react";
|
|
3
|
+
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
|
4
4
|
import { isWithinInterval, parseISO } from "date-fns";
|
|
5
5
|
import { formatDate } from "./utils/formatDate";
|
|
6
6
|
import { ComposedChart as RechartsComposedChart, Bar as RechartsBar, XAxis as RechartsXAxis, YAxis as RechartsYAxis, CartesianGrid as RechartsCartesianGrid, Tooltip as RechartsTooltip, ResponsiveContainer as RechartsResponsiveContainer, Legend as RechartsLegend, Area as RechartsArea, } from "recharts";
|
|
7
7
|
import { Column, Row } from "../../components";
|
|
8
8
|
import { LinearGradient, ChartHeader, DataTooltip, Legend, ChartStatus, } from ".";
|
|
9
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", "data-viz-style": dataVizStyle, ...flex }) => {
|
|
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
11
|
const { variant: themeVariant, mode, height, tick: { fill: tickFill, fontSize: tickFontSize, line: tickLine }, axis: { stroke: axisLineStroke }, } = useDataTheme();
|
|
12
12
|
const variant = variantProp || themeVariant;
|
|
13
13
|
const legend = {
|
|
@@ -56,12 +56,12 @@ const LineBarChart = ({ title, description, data, series, date, emptyState, erro
|
|
|
56
56
|
}
|
|
57
57
|
return data;
|
|
58
58
|
}, [data, selectedDateRange, xAxisKey]);
|
|
59
|
-
const handleDateRangeChange = (newRange) => {
|
|
59
|
+
const handleDateRangeChange = useCallback((newRange) => {
|
|
60
60
|
setSelectedDateRange(newRange);
|
|
61
61
|
if (date?.onChange) {
|
|
62
62
|
date.onChange(newRange);
|
|
63
63
|
}
|
|
64
|
-
};
|
|
64
|
+
}, [date]);
|
|
65
65
|
const chartSeriesArray = Array.isArray(series) ? series : series ? [series] : [];
|
|
66
66
|
if (chartSeriesArray.length < 2) {
|
|
67
67
|
console.warn("LineBarChart requires at least 2 series (one for line, one for bar)");
|
|
@@ -72,35 +72,37 @@ const LineBarChart = ({ title, description, data, series, date, emptyState, erro
|
|
|
72
72
|
const barColor = barSeries.color || "green";
|
|
73
73
|
const finalLineColor = `var(--data-${lineColor})`;
|
|
74
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]);
|
|
75
104
|
const chartId = React.useMemo(() => Math.random().toString(36).substring(2, 9), []);
|
|
76
|
-
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: _jsx(
|
|
77
|
-
position: "absolute",
|
|
78
|
-
top: legend.position === "top-center" ||
|
|
79
|
-
legend.position === "top-left" ||
|
|
80
|
-
legend.position === "top-right"
|
|
81
|
-
? 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
|
-
} })), _jsx(RechartsXAxis, { height: 32, tickMargin: 6, dataKey: xAxisKey, hide: !(axis === "x" || axis === "both"), axisLine: {
|
|
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: {
|
|
104
106
|
stroke: axisLineStroke,
|
|
105
107
|
}, tickLine: tickLine, tick: {
|
|
106
108
|
fill: tickFill,
|
|
@@ -108,7 +110,7 @@ const LineBarChart = ({ title, description, data, series, date, emptyState, erro
|
|
|
108
110
|
}, tickFormatter: (value) => {
|
|
109
111
|
const dataPoint = data.find((item) => item[xAxisKey] === value);
|
|
110
112
|
return formatDate(value, date, dataPoint);
|
|
111
|
-
} }), (axis === "y" || axis === "both") && (_jsx(RechartsYAxis, { width: 64, padding: { top: 40 }, allowDataOverflow: true, tickLine: tickLine, tick: {
|
|
113
|
+
} }), (axis === "y" || axis === "both") && (_jsx(RechartsYAxis, { width: 64, padding: { top: 40 }, allowDataOverflow: true, orientation: reverseY ? "right" : "left", tickLine: tickLine, tick: {
|
|
112
114
|
fill: tickFill,
|
|
113
115
|
fontSize: tickFontSize,
|
|
114
116
|
}, axisLine: {
|
|
@@ -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,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LineBarChart.js","sourceRoot":"","sources":["../../../src/modules/data/LineBarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,8 @@ import React from "react";
|
|
|
2
2
|
import { ChartProps, curveType } from ".";
|
|
3
3
|
interface LineChartProps extends ChartProps {
|
|
4
4
|
curve?: curveType;
|
|
5
|
+
reverseY?: boolean;
|
|
6
|
+
reverseX?: boolean;
|
|
5
7
|
"data-viz-style"?: string;
|
|
6
8
|
}
|
|
7
9
|
declare const LineChart: React.FC<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,KAAoD,MAAM,OAAO,CAAC;AAczE,OAAO,EAML,UAAU,EAGV,SAAS,EACV,MAAM,GAAG,CAAC;AAKX,UAAU,cAAe,SAAQ,UAAU;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6SvC,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import React, { useState, useEffect } from "react";
|
|
3
|
+
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
|
4
4
|
import { isWithinInterval, parseISO } from "date-fns";
|
|
5
5
|
import { formatDate } from "./utils/formatDate";
|
|
6
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";
|
|
@@ -9,7 +9,7 @@ import { LinearGradient, ChartHeader, DataTooltip, Legend, ChartStatus, } from "
|
|
|
9
9
|
import { schemes } from "../../types";
|
|
10
10
|
import { getDistributedColor } from "./utils/colorDistribution";
|
|
11
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", "data-viz-style": dataVizStyle, ...flex }) => {
|
|
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, "data-viz-style": dataVizStyle, ...flex }) => {
|
|
13
13
|
const { variant: themeVariant, mode, height, tick: { fill: tickFill, fontSize: tickFontSize, line: tickLine }, axis: { stroke: axisLineStroke }, } = useDataTheme();
|
|
14
14
|
const variant = variantProp || themeVariant;
|
|
15
15
|
const legend = {
|
|
@@ -35,10 +35,10 @@ const LineChart = ({ title, description, data, series, date, emptyState, errorSt
|
|
|
35
35
|
const seriesKeys = seriesArray.map((s) => s.key);
|
|
36
36
|
// Generate a unique ID for this chart instance
|
|
37
37
|
const chartId = React.useMemo(() => Math.random().toString(36).substring(2, 9), []);
|
|
38
|
-
const coloredSeriesArray = seriesArray.map((s, index) => ({
|
|
38
|
+
const coloredSeriesArray = useMemo(() => seriesArray.map((s, index) => ({
|
|
39
39
|
...s,
|
|
40
40
|
color: s.color || getDistributedColor(index, seriesArray.length),
|
|
41
|
-
}));
|
|
41
|
+
})), [seriesArray]);
|
|
42
42
|
const autoKeys = Object.keys(data[0] || {}).filter((key) => !seriesKeys.includes(key));
|
|
43
43
|
const autoSeries = seriesArray.length > 0
|
|
44
44
|
? coloredSeriesArray
|
|
@@ -71,50 +71,52 @@ const LineChart = ({ title, description, data, series, date, emptyState, errorSt
|
|
|
71
71
|
}
|
|
72
72
|
return data;
|
|
73
73
|
}, [data, selectedDateRange, xAxisKey]);
|
|
74
|
-
const handleDateRangeChange = (newRange) => {
|
|
74
|
+
const handleDateRangeChange = useCallback((newRange) => {
|
|
75
75
|
setSelectedDateRange(newRange);
|
|
76
76
|
if (date?.onChange) {
|
|
77
77
|
date.onChange(newRange);
|
|
78
78
|
}
|
|
79
|
-
};
|
|
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, 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]);
|
|
80
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) => {
|
|
81
116
|
const colorValue = color || schemes[index % schemes.length];
|
|
82
117
|
const lineColor = `var(--data-${colorValue})`;
|
|
83
118
|
return (_jsx(LinearGradient, { id: `barGradient${chartId}${index}`, variant: variant, color: lineColor }, `gradient-${chartId}-${index}`));
|
|
84
|
-
}) }), _jsx(RechartsCartesianGrid, { vertical: grid === "x" || grid === "both", horizontal: grid === "y" || grid === "both", stroke: "var(--neutral-alpha-weak)" }), legend.display && (_jsx(RechartsLegend, { content: (
|
|
85
|
-
const customPayload = autoSeries.map(({ key, color }, index) => ({
|
|
86
|
-
value: key,
|
|
87
|
-
color: `var(--data-${color || schemes[index % schemes.length]})`,
|
|
88
|
-
}));
|
|
89
|
-
return (_jsx(Legend, { payload: customPayload, labels: axis, position: legend.position, direction: legend.direction, variant: variant }));
|
|
90
|
-
}, wrapperStyle: {
|
|
91
|
-
position: "absolute",
|
|
92
|
-
top: legend.position === "top-center" ||
|
|
93
|
-
legend.position === "top-left" ||
|
|
94
|
-
legend.position === "top-right"
|
|
95
|
-
? 0
|
|
96
|
-
: undefined,
|
|
97
|
-
bottom: legend.position === "bottom-center" ||
|
|
98
|
-
legend.position === "bottom-left" ||
|
|
99
|
-
legend.position === "bottom-right"
|
|
100
|
-
? 0
|
|
101
|
-
: undefined,
|
|
102
|
-
paddingBottom: legend.position === "bottom-center" ||
|
|
103
|
-
legend.position === "bottom-left" ||
|
|
104
|
-
legend.position === "bottom-right"
|
|
105
|
-
? "var(--static-space-40)"
|
|
106
|
-
: undefined,
|
|
107
|
-
left: (axis === "y" || axis === "both") &&
|
|
108
|
-
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
109
|
-
? "var(--static-space-64)"
|
|
110
|
-
: 0,
|
|
111
|
-
width: (axis === "y" || axis === "both") &&
|
|
112
|
-
(legend.position === "top-center" || legend.position === "bottom-center")
|
|
113
|
-
? "calc(100% - var(--static-space-64))"
|
|
114
|
-
: "100%",
|
|
115
|
-
right: 0,
|
|
116
|
-
margin: 0,
|
|
117
|
-
} })), _jsx(RechartsXAxis, { height: 32, tickMargin: 6, dataKey: xAxisKey, hide: !(axis === "x" || axis === "both"), axisLine: {
|
|
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, hide: !(axis === "x" || axis === "both"), orientation: reverseX ? "top" : "bottom", axisLine: {
|
|
118
120
|
stroke: axisLineStroke,
|
|
119
121
|
}, tickLine: tickLine, tick: {
|
|
120
122
|
fill: tickFill,
|
|
@@ -122,7 +124,7 @@ const LineChart = ({ title, description, data, series, date, emptyState, errorSt
|
|
|
122
124
|
}, tickFormatter: (value) => {
|
|
123
125
|
const dataPoint = data.find((item) => item[xAxisKey] === value);
|
|
124
126
|
return formatDate(value, date, dataPoint);
|
|
125
|
-
} }), (axis === "y" || axis === "both") && (_jsx(RechartsYAxis, { width: 64, padding: { top: 40 }, allowDataOverflow: true, tickLine: tickLine, tick: {
|
|
127
|
+
} }), (axis === "y" || axis === "both") && (_jsx(RechartsYAxis, { width: 64, padding: { top: 40 }, allowDataOverflow: true, orientation: reverseY ? "right" : "left", tickLine: tickLine, tick: {
|
|
126
128
|
fill: tickFill,
|
|
127
129
|
fontSize: tickFontSize,
|
|
128
130
|
}, axisLine: {
|
|
@@ -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,SAAS,
|
|
1
|
+
{"version":3,"file":"LineChart.js","sourceRoot":"","sources":["../../../src/modules/data/LineChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Flex } from "../../";
|
|
3
|
+
interface LinearGaugeProps extends React.ComponentProps<typeof Flex> {
|
|
4
|
+
width?: number;
|
|
5
|
+
height?: number;
|
|
6
|
+
line?: {
|
|
7
|
+
count?: number;
|
|
8
|
+
width?: number;
|
|
9
|
+
length?: number;
|
|
10
|
+
};
|
|
11
|
+
value?: number;
|
|
12
|
+
labels?: "none" | "percentage" | string[];
|
|
13
|
+
hue?: "success" | "neutral" | "danger" | [number, number];
|
|
14
|
+
color?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const LinearGauge: ({ width, height, line, value, labels, hue, color, ...flex }: LinearGaugeProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
18
|
+
//# sourceMappingURL=LinearGauge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinearGauge.d.ts","sourceRoot":"","sources":["../../../src/modules/data/LinearGauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAU,IAAI,EAAa,MAAM,QAAQ,CAAC;AAGjD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,MAAM,EAAE,CAAC;IAC1C,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAeD,eAAO,MAAM,WAAW,GAAI,6DASzB,gBAAgB,4CA0GlB,CAAC"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import { Column, Row, Text } from "../../";
|
|
5
|
+
import styles from "./Gauge.module.css";
|
|
6
|
+
const resolveHueRange = (hue) => {
|
|
7
|
+
if (hue && typeof hue !== "string") {
|
|
8
|
+
const [start = 200, end = 120] = hue;
|
|
9
|
+
return [start, end];
|
|
10
|
+
}
|
|
11
|
+
if (hue === "danger")
|
|
12
|
+
return [0, 30];
|
|
13
|
+
if (hue === "neutral")
|
|
14
|
+
return [30, 60];
|
|
15
|
+
if (hue === "success")
|
|
16
|
+
return [200, 120];
|
|
17
|
+
return [200, 120];
|
|
18
|
+
};
|
|
19
|
+
export const LinearGauge = ({ width = 400, height = 80, line, value = 50, labels = "none", hue, color = "contrast", ...flex }) => {
|
|
20
|
+
const pad = 8;
|
|
21
|
+
// Destructure line with individual defaults
|
|
22
|
+
const lineCount = line?.count ?? 48;
|
|
23
|
+
const lineWidth = line?.width ?? 3;
|
|
24
|
+
const lineLength = line?.length ?? 40;
|
|
25
|
+
// Animate active tick count
|
|
26
|
+
const [activeLines, setActiveLines] = useState(() => Math.floor((value / 100) * lineCount));
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
const target = Math.floor((value / 100) * lineCount);
|
|
29
|
+
if (target === activeLines)
|
|
30
|
+
return;
|
|
31
|
+
let current = activeLines;
|
|
32
|
+
const step = target > current ? 1 : -1;
|
|
33
|
+
const interval = window.setInterval(() => {
|
|
34
|
+
current += step;
|
|
35
|
+
setActiveLines(current);
|
|
36
|
+
if (current === target) {
|
|
37
|
+
window.clearInterval(interval);
|
|
38
|
+
}
|
|
39
|
+
}, 20);
|
|
40
|
+
return () => {
|
|
41
|
+
window.clearInterval(interval);
|
|
42
|
+
};
|
|
43
|
+
}, [value, lineCount, activeLines]);
|
|
44
|
+
const hasHue = hue !== undefined;
|
|
45
|
+
const [startHue, endHue] = resolveHueRange(hue);
|
|
46
|
+
const renderLines = () => {
|
|
47
|
+
const lines = [];
|
|
48
|
+
const spacing = (width - pad * 2) / (lineCount - 1);
|
|
49
|
+
for (let j = 0; j < lineCount; j++) {
|
|
50
|
+
const x = pad + j * spacing;
|
|
51
|
+
const isActive = j < activeLines;
|
|
52
|
+
const gradientPosition = lineCount > 1 ? j / (lineCount - 1) : 0;
|
|
53
|
+
const finalHue = startHue + (endHue - startHue) * gradientPosition;
|
|
54
|
+
lines.push(_jsx("line", { x1: x, y1: 0, x2: x, y2: lineLength, strokeLinecap: "round", vectorEffect: "non-scaling-stroke", className: isActive ? styles.activeLine : styles.inactiveLine, style: {
|
|
55
|
+
strokeWidth: lineWidth,
|
|
56
|
+
opacity: isActive ? 1 : 0.7,
|
|
57
|
+
stroke: isActive && hasHue
|
|
58
|
+
? `hsl(${finalHue}, 100%, 50%)`
|
|
59
|
+
: isActive && color ? `var(--data-${color})` : 'var(--neutral-alpha-medium)',
|
|
60
|
+
} }, j));
|
|
61
|
+
}
|
|
62
|
+
return lines;
|
|
63
|
+
};
|
|
64
|
+
const renderLabels = () => {
|
|
65
|
+
if (labels === "none")
|
|
66
|
+
return null;
|
|
67
|
+
let labelValues = [];
|
|
68
|
+
if (labels === "percentage") {
|
|
69
|
+
labelValues = [0, 25, 50, 75, 100].map(p => `${p}%`);
|
|
70
|
+
}
|
|
71
|
+
else if (Array.isArray(labels)) {
|
|
72
|
+
labelValues = labels;
|
|
73
|
+
}
|
|
74
|
+
return (_jsx(Row, { fillWidth: true, horizontal: "between", paddingX: "8", children: labelValues.map((label, i) => (_jsx(Text, { children: label }, `label-${i}`))) }));
|
|
75
|
+
};
|
|
76
|
+
return (_jsxs(Column, { fillWidth: true, gap: "8", textVariant: "label-default-s", onBackground: "neutral-weak", ...flex, children: [renderLabels(), _jsx(Column, { fillWidth: true, fill: true, children: _jsx("svg", { width: "100%", height: "100%", viewBox: `0 0 ${width} ${lineLength}`, preserveAspectRatio: "none", className: styles.svg, children: renderLines() }) })] }));
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=LinearGauge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinearGauge.js","sourceRoot":"","sources":["../../../src/modules/data/LinearGauge.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Column } from "../../";
|
|
3
|
+
interface RadialGaugeProps extends Omit<React.ComponentProps<typeof Column>, 'direction'> {
|
|
4
|
+
width?: number;
|
|
5
|
+
height?: number;
|
|
6
|
+
line?: {
|
|
7
|
+
count?: number;
|
|
8
|
+
width?: number;
|
|
9
|
+
length?: number;
|
|
10
|
+
};
|
|
11
|
+
unit?: React.ReactNode;
|
|
12
|
+
value?: number;
|
|
13
|
+
angle?: {
|
|
14
|
+
start: number;
|
|
15
|
+
sweep: number;
|
|
16
|
+
};
|
|
17
|
+
direction?: 'cw' | 'ccw';
|
|
18
|
+
edgePad?: number;
|
|
19
|
+
children?: React.ReactNode;
|
|
20
|
+
hue?: "success" | "neutral" | "danger" | [number, number];
|
|
21
|
+
color?: string;
|
|
22
|
+
}
|
|
23
|
+
export declare const RadialGauge: ({ width, height, line, value, angle, direction, edgePad, unit, children, hue, color, ...flex }: RadialGaugeProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=RadialGauge.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadialGauge.d.ts","sourceRoot":"","sources":["../../../src/modules/data/RadialGauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,MAAM,EAAiB,MAAM,QAAQ,CAAC;AAG/C,UAAU,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,SAAS,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAeD,eAAO,MAAM,WAAW,GAAI,gGAgBzB,gBAAgB,4CAoHlB,CAAC"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import { Column, CountFx, Text } from "../../";
|
|
5
|
+
import styles from "./Gauge.module.css";
|
|
6
|
+
const resolveHueRange = (hue) => {
|
|
7
|
+
if (hue && typeof hue !== "string") {
|
|
8
|
+
const [start = 200, end = 120] = hue;
|
|
9
|
+
return [start, end];
|
|
10
|
+
}
|
|
11
|
+
if (hue === "danger")
|
|
12
|
+
return [0, 30];
|
|
13
|
+
if (hue === "neutral")
|
|
14
|
+
return [30, 60];
|
|
15
|
+
if (hue === "success")
|
|
16
|
+
return [200, 120];
|
|
17
|
+
return [200, 120];
|
|
18
|
+
};
|
|
19
|
+
export const RadialGauge = ({ width = 300, height = 300, line, value = 7, angle = {
|
|
20
|
+
start: 0,
|
|
21
|
+
sweep: 360,
|
|
22
|
+
}, direction = 'cw', edgePad = 0, unit, children, hue, color = "contrast", ...flex }) => {
|
|
23
|
+
const pad = 4;
|
|
24
|
+
// Destructure line with individual defaults
|
|
25
|
+
const lineCount = line?.count ?? 48;
|
|
26
|
+
const lineWidth = line?.width ?? 3;
|
|
27
|
+
const lineLength = line?.length ?? 40;
|
|
28
|
+
// For semicircles (sweepAngle ~180), use width or height as the diameter
|
|
29
|
+
// For full circles, use the smaller dimension
|
|
30
|
+
let radius;
|
|
31
|
+
let cx;
|
|
32
|
+
let cy;
|
|
33
|
+
if (angle.sweep <= 180) {
|
|
34
|
+
// Semicircle: span the full width, center horizontally
|
|
35
|
+
radius = width / 2 - pad;
|
|
36
|
+
cx = width / 2;
|
|
37
|
+
cy = height; // bottom edge for top semicircle with startAngle=-90
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
// Full or large arc: use smaller dimension
|
|
41
|
+
radius = Math.min(width, height) / 2 - pad;
|
|
42
|
+
cx = width / 2;
|
|
43
|
+
cy = height / 2;
|
|
44
|
+
}
|
|
45
|
+
const ticks = Math.max(0, lineCount - edgePad * 2);
|
|
46
|
+
// Animate active tick count so ticks light up one by one when the value changes
|
|
47
|
+
const [activeLines, setActiveLines] = useState(() => Math.floor((value / 100) * ticks));
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
const target = Math.floor((value / 100) * ticks);
|
|
50
|
+
if (target === activeLines)
|
|
51
|
+
return;
|
|
52
|
+
let current = activeLines;
|
|
53
|
+
const step = target > current ? 1 : -1;
|
|
54
|
+
const interval = window.setInterval(() => {
|
|
55
|
+
current += step;
|
|
56
|
+
setActiveLines(current);
|
|
57
|
+
if (current === target) {
|
|
58
|
+
window.clearInterval(interval);
|
|
59
|
+
}
|
|
60
|
+
}, 20); // small delay for a smooth, sequential tick animation
|
|
61
|
+
return () => {
|
|
62
|
+
window.clearInterval(interval);
|
|
63
|
+
};
|
|
64
|
+
}, [value, ticks, activeLines]);
|
|
65
|
+
const dir = direction === 'cw' ? 1 : -1;
|
|
66
|
+
// Transform user angles to intuitive system: 0°=left, 90°=top, 180°=right
|
|
67
|
+
// SVG rotation: 0°=up, 90°=right, so user's angle - 90 maps correctly
|
|
68
|
+
const internalStartAngle = angle.start - 90;
|
|
69
|
+
const hasHue = hue !== undefined;
|
|
70
|
+
const [startHue, endHue] = resolveHueRange(hue);
|
|
71
|
+
const renderLines = () => {
|
|
72
|
+
const lines = [];
|
|
73
|
+
for (let j = 0; j < ticks; j++) {
|
|
74
|
+
// map j∈[0,ticks-1] to angle ∈ [startAngle, startAngle + sweepAngle]
|
|
75
|
+
const t = ticks > 1 ? j / (ticks - 1) : 0;
|
|
76
|
+
const finalAngle = internalStartAngle + dir * (t * angle.sweep);
|
|
77
|
+
const isActive = j < activeLines;
|
|
78
|
+
const gradientPosition = t; // 0..1 across the arc
|
|
79
|
+
const finalHue = startHue + (endHue - startHue) * gradientPosition;
|
|
80
|
+
lines.push(_jsx("line", { x1: cx, y1: cy - (radius - pad - lineLength), x2: cx, y2: cy - (radius - pad), strokeLinecap: "round", className: isActive ? styles.activeLine : styles.inactiveLine, style: {
|
|
81
|
+
transform: `rotate(${finalAngle}deg)`,
|
|
82
|
+
transformOrigin: `${cx}px ${cy}px`,
|
|
83
|
+
strokeWidth: lineWidth,
|
|
84
|
+
opacity: isActive ? 1 : 0.7,
|
|
85
|
+
stroke: isActive && hasHue
|
|
86
|
+
? `hsl(${finalHue}, 100%, 50%)`
|
|
87
|
+
: isActive && color ? `var(--data-${color})` : 'var(--neutral-alpha-medium)',
|
|
88
|
+
} }, j));
|
|
89
|
+
}
|
|
90
|
+
return lines;
|
|
91
|
+
};
|
|
92
|
+
return (_jsxs(Column, { center: true, radius: "full", children: [_jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMinYMid meet", className: styles.svg, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "lineGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: "var(--brand-solid-strong)" }), _jsx("stop", { offset: "100%", stopColor: "var(--accent-solid-strong)" })] }) }), renderLines()] }), _jsx(Column, { fill: true, position: "absolute", horizontal: "center", vertical: "center", gap: "2", ...flex, children: children || (_jsx(CountFx, { as: "div", variant: "display-strong-m", style: { fontFamily: "var(--font-code)", display: "flex" }, value: value, speed: 5000, children: _jsx(Text, { onBackground: "neutral-weak", variant: "label-default-xl", marginLeft: "4", marginTop: "4", children: unit }) })) })] }));
|
|
93
|
+
};
|
|
94
|
+
//# sourceMappingURL=RadialGauge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadialGauge.js","sourceRoot":"","sources":["../../../src/modules/data/RadialGauge.tsx"],"names":[],"mappings":"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"}
|