@mlw-packages/react-components 1.8.5 → 1.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +59 -40
- package/dist/index.d.mts +80 -8
- package/dist/index.d.ts +80 -8
- package/dist/index.js +721 -268
- package/dist/index.mjs +699 -238
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -491,7 +491,7 @@ function cn(...inputs) {
|
|
|
491
491
|
}
|
|
492
492
|
|
|
493
493
|
// src/components/ui/form/ButtonBase.tsx
|
|
494
|
-
import { CircleNotchIcon } from "@phosphor-icons/react";
|
|
494
|
+
import { CircleNotchIcon as CircleNotchIcon2 } from "@phosphor-icons/react";
|
|
495
495
|
|
|
496
496
|
// src/components/ui/feedback/AlertDialogBase.tsx
|
|
497
497
|
import * as React from "react";
|
|
@@ -1166,49 +1166,59 @@ import {
|
|
|
1166
1166
|
XCircleIcon,
|
|
1167
1167
|
InfoIcon,
|
|
1168
1168
|
WarningIcon,
|
|
1169
|
-
|
|
1169
|
+
CircleNotchIcon
|
|
1170
1170
|
} from "@phosphor-icons/react";
|
|
1171
1171
|
import { Toaster as Sonner, toast as sonnertoast } from "sonner";
|
|
1172
1172
|
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
1173
|
-
var iconBaseClass = "w-5 h-
|
|
1173
|
+
var iconBaseClass = "w-5 h-5";
|
|
1174
1174
|
var Toaster = ({ testId, ...props }) => {
|
|
1175
1175
|
return /* @__PURE__ */ jsx7(
|
|
1176
1176
|
Sonner,
|
|
1177
1177
|
{
|
|
1178
1178
|
className: "toaster group",
|
|
1179
1179
|
position: "top-center",
|
|
1180
|
+
duration: 4e3,
|
|
1180
1181
|
toastOptions: {
|
|
1182
|
+
style: {
|
|
1183
|
+
backdropFilter: "blur(8px)",
|
|
1184
|
+
WebkitBackdropFilter: "blur(8px)"
|
|
1185
|
+
},
|
|
1181
1186
|
classNames: {
|
|
1182
1187
|
toast: `
|
|
1183
1188
|
group toast
|
|
1184
|
-
bg-background
|
|
1189
|
+
bg-background/95
|
|
1185
1190
|
text-foreground
|
|
1186
|
-
shadow-
|
|
1191
|
+
shadow-xl rounded-lg
|
|
1187
1192
|
border-l-4
|
|
1188
1193
|
border-border
|
|
1189
1194
|
flex items-center gap-3
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
data-[type=
|
|
1193
|
-
data-[type=
|
|
1195
|
+
transition-all duration-300
|
|
1196
|
+
hover:scale-[1.02] hover:shadow-2xl
|
|
1197
|
+
data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50/95 data-[type=success]:text-green-800 data-[type=success]:border-green-500
|
|
1198
|
+
data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50/95 data-[type=error]:text-red-800 data-[type=error]:border-red-500
|
|
1199
|
+
data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50/95 data-[type=warning]:text-yellow-800 data-[type=warning]:border-yellow-500
|
|
1200
|
+
data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50/95 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500
|
|
1194
1201
|
`,
|
|
1195
1202
|
description: `
|
|
1196
|
-
text-
|
|
1203
|
+
text-xs
|
|
1204
|
+
font-semibold
|
|
1197
1205
|
group-[.toast]:text-neutral-600
|
|
1198
1206
|
`,
|
|
1199
1207
|
actionButton: `
|
|
1200
1208
|
ml-auto
|
|
1201
1209
|
rounded-md px-3 py-1 text-sm font-semibold
|
|
1202
1210
|
bg-neutral-800 text-white
|
|
1203
|
-
hover:bg-neutral-700
|
|
1204
|
-
transition-
|
|
1211
|
+
hover:bg-neutral-700 hover:scale-105
|
|
1212
|
+
transition-all duration-200
|
|
1213
|
+
active:scale-95
|
|
1205
1214
|
`,
|
|
1206
1215
|
cancelButton: `
|
|
1207
1216
|
ml-2
|
|
1208
1217
|
rounded-md px-3 py-1 text-sm font-semibold
|
|
1209
1218
|
bg-neutral-100 text-neutral-700
|
|
1210
|
-
hover:bg-neutral-200
|
|
1211
|
-
transition-
|
|
1219
|
+
hover:bg-neutral-200 hover:scale-105
|
|
1220
|
+
transition-all duration-200
|
|
1221
|
+
active:scale-95
|
|
1212
1222
|
`
|
|
1213
1223
|
}
|
|
1214
1224
|
},
|
|
@@ -1218,24 +1228,52 @@ var Toaster = ({ testId, ...props }) => {
|
|
|
1218
1228
|
);
|
|
1219
1229
|
};
|
|
1220
1230
|
var toast = {
|
|
1221
|
-
success: (message) => sonnertoast.success(message, {
|
|
1222
|
-
|
|
1231
|
+
success: (message, description) => sonnertoast.success(message, {
|
|
1232
|
+
description,
|
|
1233
|
+
icon: /* @__PURE__ */ jsx7(
|
|
1234
|
+
CheckCircleIcon,
|
|
1235
|
+
{
|
|
1236
|
+
className: `${iconBaseClass} text-green-600`,
|
|
1237
|
+
weight: "fill"
|
|
1238
|
+
}
|
|
1239
|
+
),
|
|
1223
1240
|
className: "sonner-success"
|
|
1224
1241
|
}),
|
|
1225
|
-
error: (message) => sonnertoast.error(message, {
|
|
1226
|
-
|
|
1242
|
+
error: (message, description) => sonnertoast.error(message, {
|
|
1243
|
+
description,
|
|
1244
|
+
icon: /* @__PURE__ */ jsx7(
|
|
1245
|
+
XCircleIcon,
|
|
1246
|
+
{
|
|
1247
|
+
className: `${iconBaseClass} text-red-600`,
|
|
1248
|
+
weight: "fill"
|
|
1249
|
+
}
|
|
1250
|
+
),
|
|
1227
1251
|
className: "sonner-error"
|
|
1228
1252
|
}),
|
|
1229
|
-
warning: (message) => sonnertoast.warning(message, {
|
|
1230
|
-
|
|
1231
|
-
|
|
1253
|
+
warning: (message, description) => sonnertoast.warning(message, {
|
|
1254
|
+
description,
|
|
1255
|
+
icon: /* @__PURE__ */ jsx7(
|
|
1256
|
+
WarningIcon,
|
|
1257
|
+
{
|
|
1258
|
+
className: `${iconBaseClass} text-yellow-600`,
|
|
1259
|
+
weight: "fill"
|
|
1260
|
+
}
|
|
1261
|
+
),
|
|
1262
|
+
className: "sonner-warning"
|
|
1232
1263
|
}),
|
|
1233
|
-
info: (message) => sonnertoast.info(message, {
|
|
1264
|
+
info: (message, description) => sonnertoast.info(message, {
|
|
1265
|
+
description,
|
|
1234
1266
|
icon: /* @__PURE__ */ jsx7(InfoIcon, { className: `${iconBaseClass} text-blue-600`, weight: "fill" }),
|
|
1235
|
-
className: "sonner-
|
|
1267
|
+
className: "sonner-info"
|
|
1236
1268
|
}),
|
|
1237
|
-
loading: (message) => sonnertoast(message, {
|
|
1238
|
-
|
|
1269
|
+
loading: (message, description) => sonnertoast(message, {
|
|
1270
|
+
description,
|
|
1271
|
+
icon: /* @__PURE__ */ jsx7(
|
|
1272
|
+
CircleNotchIcon,
|
|
1273
|
+
{
|
|
1274
|
+
className: `${iconBaseClass} animate-spin text-gray-600`
|
|
1275
|
+
}
|
|
1276
|
+
),
|
|
1239
1277
|
className: "sonner-loading"
|
|
1240
1278
|
})
|
|
1241
1279
|
};
|
|
@@ -1383,12 +1421,21 @@ var TooltipTriggerBase = React7.forwardRef(({ children, onPointerDown, ...props
|
|
|
1383
1421
|
},
|
|
1384
1422
|
[onPointerDown]
|
|
1385
1423
|
);
|
|
1424
|
+
const onClick = React7.useCallback(
|
|
1425
|
+
(e) => {
|
|
1426
|
+
if (onPointerDown) {
|
|
1427
|
+
onPointerDown(e);
|
|
1428
|
+
}
|
|
1429
|
+
},
|
|
1430
|
+
[onPointerDown]
|
|
1431
|
+
);
|
|
1386
1432
|
return /* @__PURE__ */ jsx8(
|
|
1387
1433
|
TooltipPrimitive.Trigger,
|
|
1388
1434
|
{
|
|
1389
1435
|
ref,
|
|
1390
1436
|
tabIndex: -1,
|
|
1391
1437
|
onPointerDown: onPointerDown ? handlePointerDown : void 0,
|
|
1438
|
+
onClick,
|
|
1392
1439
|
"data-tooltip-trigger": true,
|
|
1393
1440
|
"aria-describedby": "tooltip-content",
|
|
1394
1441
|
...props,
|
|
@@ -1685,7 +1732,7 @@ var ButtonBase = React10.forwardRef(
|
|
|
1685
1732
|
isActivelyLoading && /* @__PURE__ */ jsxs8("span", { className: "absolute inset-0 flex items-center justify-center pointer-events-none rounded-md", children: [
|
|
1686
1733
|
/* @__PURE__ */ jsx11("span", { className: "absolute inset-0 rounded-md backdrop-blur overflow-hidden" }),
|
|
1687
1734
|
/* @__PURE__ */ jsx11(
|
|
1688
|
-
|
|
1735
|
+
CircleNotchIcon2,
|
|
1689
1736
|
{
|
|
1690
1737
|
weight: "bold",
|
|
1691
1738
|
className: "relative animate-spin h-4 w-4 text-current"
|
|
@@ -2761,8 +2808,7 @@ function MultiCombobox({
|
|
|
2761
2808
|
)
|
|
2762
2809
|
]
|
|
2763
2810
|
}
|
|
2764
|
-
)
|
|
2765
|
-
/* @__PURE__ */ jsx21(ErrorMessage_default, { error })
|
|
2811
|
+
)
|
|
2766
2812
|
]
|
|
2767
2813
|
}
|
|
2768
2814
|
);
|
|
@@ -7347,7 +7393,7 @@ function StatusIndicator({
|
|
|
7347
7393
|
|
|
7348
7394
|
// src/components/ui/form/DebouncedInput.tsx
|
|
7349
7395
|
import { useEffect as useEffect15, useState as useState14 } from "react";
|
|
7350
|
-
import { CircleNotchIcon as
|
|
7396
|
+
import { CircleNotchIcon as CircleNotchIcon3 } from "@phosphor-icons/react";
|
|
7351
7397
|
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
7352
7398
|
function DebouncedInput({
|
|
7353
7399
|
value: initialValue,
|
|
@@ -7382,7 +7428,7 @@ function DebouncedInput({
|
|
|
7382
7428
|
}, [debounce2, initialValue, onChange, value]);
|
|
7383
7429
|
const renderRightIcon = () => {
|
|
7384
7430
|
if (showLoadingIndicator && isDebouncing) {
|
|
7385
|
-
return /* @__PURE__ */ jsx54(
|
|
7431
|
+
return /* @__PURE__ */ jsx54(CircleNotchIcon3, { className: "h-4 w-4 animate-spin text-muted-foreground" });
|
|
7386
7432
|
}
|
|
7387
7433
|
return rightIcon;
|
|
7388
7434
|
};
|
|
@@ -7629,7 +7675,7 @@ function CalendarBase2({
|
|
|
7629
7675
|
selected: "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary/90 font-semibold hover:text-white rounded-md",
|
|
7630
7676
|
today: "bg-muted text-foreground font-bold ring-2 ring-primary/30 ring-inset rounded-md",
|
|
7631
7677
|
outside: "text-muted-foreground opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
|
|
7632
|
-
disabled: "text-muted-foreground cursor-not-allowed
|
|
7678
|
+
disabled: "text-muted-foreground cursor-not-allowed",
|
|
7633
7679
|
range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
|
|
7634
7680
|
hidden: "invisible",
|
|
7635
7681
|
...classNames
|
|
@@ -14400,27 +14446,27 @@ function MultiSelect({
|
|
|
14400
14446
|
}
|
|
14401
14447
|
|
|
14402
14448
|
// src/components/ui/charts/Chart.tsx
|
|
14403
|
-
import { useEffect as
|
|
14449
|
+
import { useEffect as useEffect34, useCallback as useCallback18, useMemo as useMemo26 } from "react";
|
|
14404
14450
|
import {
|
|
14405
|
-
ComposedChart,
|
|
14406
|
-
Bar,
|
|
14407
|
-
Line,
|
|
14408
|
-
Area,
|
|
14451
|
+
ComposedChart as ComposedChart2,
|
|
14452
|
+
Bar as Bar2,
|
|
14453
|
+
Line as Line2,
|
|
14454
|
+
Area as Area2,
|
|
14409
14455
|
Rectangle,
|
|
14410
14456
|
ReferenceLine,
|
|
14411
|
-
XAxis,
|
|
14412
|
-
YAxis,
|
|
14457
|
+
XAxis as XAxis2,
|
|
14458
|
+
YAxis as YAxis2,
|
|
14413
14459
|
CartesianGrid,
|
|
14414
14460
|
Tooltip,
|
|
14415
14461
|
Legend,
|
|
14416
14462
|
LabelList,
|
|
14417
|
-
ResponsiveContainer
|
|
14463
|
+
ResponsiveContainer as ResponsiveContainer2
|
|
14418
14464
|
} from "recharts";
|
|
14419
14465
|
|
|
14420
14466
|
// src/components/ui/charts/utils/helpers.ts
|
|
14421
14467
|
var formatFieldName = (fieldName) => {
|
|
14422
14468
|
return fieldName.split(/[/_-]/).filter(Boolean).map((word) => {
|
|
14423
|
-
return word.charAt(0).toUpperCase() + word.slice(1)
|
|
14469
|
+
return word.charAt(0).toUpperCase() + word.slice(1);
|
|
14424
14470
|
}).join(" ").trim();
|
|
14425
14471
|
};
|
|
14426
14472
|
var detectDataFields = (data, xAxisKey) => {
|
|
@@ -15981,8 +16027,213 @@ var TooltipSimple = ({
|
|
|
15981
16027
|
};
|
|
15982
16028
|
var TooltipSimple_default = TooltipSimple;
|
|
15983
16029
|
|
|
15984
|
-
// src/components/ui/charts/
|
|
16030
|
+
// src/components/ui/charts/components/Brush.tsx
|
|
16031
|
+
import {
|
|
16032
|
+
ComposedChart,
|
|
16033
|
+
Bar,
|
|
16034
|
+
Line,
|
|
16035
|
+
Area,
|
|
16036
|
+
XAxis,
|
|
16037
|
+
YAxis,
|
|
16038
|
+
ResponsiveContainer
|
|
16039
|
+
} from "recharts";
|
|
15985
16040
|
import { jsx as jsx94, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
16041
|
+
var Brush = ({
|
|
16042
|
+
data,
|
|
16043
|
+
startIndex,
|
|
16044
|
+
endIndex,
|
|
16045
|
+
onMouseDown,
|
|
16046
|
+
brushRef,
|
|
16047
|
+
xAxisKey,
|
|
16048
|
+
seriesOrder,
|
|
16049
|
+
finalColors,
|
|
16050
|
+
brushHeight = 80,
|
|
16051
|
+
brushColor,
|
|
16052
|
+
miniChartOpacity = 0.3,
|
|
16053
|
+
margin = { left: 0, right: 0 }
|
|
16054
|
+
}) => {
|
|
16055
|
+
const dataLength = data.length;
|
|
16056
|
+
return /* @__PURE__ */ jsxs72("div", { className: "w-full px-8 pb-4", children: [
|
|
16057
|
+
/* @__PURE__ */ jsxs72(
|
|
16058
|
+
"div",
|
|
16059
|
+
{
|
|
16060
|
+
className: "relative rounded-md border bg-muted/5 shadow-inner",
|
|
16061
|
+
style: { height: brushHeight },
|
|
16062
|
+
children: [
|
|
16063
|
+
/* @__PURE__ */ jsx94(
|
|
16064
|
+
"div",
|
|
16065
|
+
{
|
|
16066
|
+
className: "absolute inset-0 pointer-events-none rounded-md",
|
|
16067
|
+
style: { opacity: miniChartOpacity },
|
|
16068
|
+
children: /* @__PURE__ */ jsx94(ResponsiveContainer, { width: "100%", height: brushHeight, children: /* @__PURE__ */ jsxs72(
|
|
16069
|
+
ComposedChart,
|
|
16070
|
+
{
|
|
16071
|
+
data: data.map((item) => ({
|
|
16072
|
+
...item,
|
|
16073
|
+
name: String(item[xAxisKey] || "N/A")
|
|
16074
|
+
})),
|
|
16075
|
+
height: brushHeight,
|
|
16076
|
+
margin: {
|
|
16077
|
+
top: 5,
|
|
16078
|
+
right: margin.right ?? 30,
|
|
16079
|
+
left: margin.left ?? 0,
|
|
16080
|
+
bottom: 5
|
|
16081
|
+
},
|
|
16082
|
+
children: [
|
|
16083
|
+
/* @__PURE__ */ jsx94(XAxis, { dataKey: xAxisKey, hide: true }),
|
|
16084
|
+
/* @__PURE__ */ jsx94(YAxis, { yAxisId: "left", hide: true }),
|
|
16085
|
+
seriesOrder.map((s) => {
|
|
16086
|
+
const key = s.key;
|
|
16087
|
+
const color = finalColors[key];
|
|
16088
|
+
if (s.type === "bar") {
|
|
16089
|
+
return /* @__PURE__ */ jsx94(
|
|
16090
|
+
Bar,
|
|
16091
|
+
{
|
|
16092
|
+
dataKey: key,
|
|
16093
|
+
yAxisId: "left",
|
|
16094
|
+
fill: color,
|
|
16095
|
+
radius: [2, 2, 0, 0]
|
|
16096
|
+
},
|
|
16097
|
+
`brush-bar-${key}`
|
|
16098
|
+
);
|
|
16099
|
+
}
|
|
16100
|
+
if (s.type === "line") {
|
|
16101
|
+
return /* @__PURE__ */ jsx94(
|
|
16102
|
+
Line,
|
|
16103
|
+
{
|
|
16104
|
+
type: "monotone",
|
|
16105
|
+
dataKey: key,
|
|
16106
|
+
yAxisId: "left",
|
|
16107
|
+
stroke: color,
|
|
16108
|
+
strokeWidth: 1.5,
|
|
16109
|
+
dot: false
|
|
16110
|
+
},
|
|
16111
|
+
`brush-line-${key}`
|
|
16112
|
+
);
|
|
16113
|
+
}
|
|
16114
|
+
if (s.type === "area") {
|
|
16115
|
+
return /* @__PURE__ */ jsx94(
|
|
16116
|
+
Area,
|
|
16117
|
+
{
|
|
16118
|
+
type: "monotone",
|
|
16119
|
+
dataKey: key,
|
|
16120
|
+
yAxisId: "left",
|
|
16121
|
+
stroke: color,
|
|
16122
|
+
fill: `url(#gradient-${key})`,
|
|
16123
|
+
strokeWidth: 1.5
|
|
16124
|
+
},
|
|
16125
|
+
`brush-area-${key}`
|
|
16126
|
+
);
|
|
16127
|
+
}
|
|
16128
|
+
return null;
|
|
16129
|
+
})
|
|
16130
|
+
]
|
|
16131
|
+
}
|
|
16132
|
+
) })
|
|
16133
|
+
}
|
|
16134
|
+
),
|
|
16135
|
+
/* @__PURE__ */ jsxs72(
|
|
16136
|
+
"div",
|
|
16137
|
+
{
|
|
16138
|
+
ref: brushRef,
|
|
16139
|
+
className: "absolute inset-0 cursor-move rounded-md",
|
|
16140
|
+
style: { userSelect: "none" },
|
|
16141
|
+
children: [
|
|
16142
|
+
/* @__PURE__ */ jsx94(
|
|
16143
|
+
"div",
|
|
16144
|
+
{
|
|
16145
|
+
className: "absolute top-0 bottom-0 left-0 bg-muted/60 pointer-events-none rounded-md",
|
|
16146
|
+
style: {
|
|
16147
|
+
width: `${startIndex / (dataLength - 1) * 100}%`
|
|
16148
|
+
}
|
|
16149
|
+
}
|
|
16150
|
+
),
|
|
16151
|
+
/* @__PURE__ */ jsx94(
|
|
16152
|
+
"div",
|
|
16153
|
+
{
|
|
16154
|
+
className: "absolute top-0 bottom-0 right-0 bg-muted/60 pointer-events-none rounded-md",
|
|
16155
|
+
style: {
|
|
16156
|
+
width: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`
|
|
16157
|
+
}
|
|
16158
|
+
}
|
|
16159
|
+
),
|
|
16160
|
+
/* @__PURE__ */ jsxs72(
|
|
16161
|
+
"div",
|
|
16162
|
+
{
|
|
16163
|
+
className: "absolute top-0 bottom-0 border cursor-move group rounded-md border-primary/30",
|
|
16164
|
+
style: {
|
|
16165
|
+
left: `${startIndex / (dataLength - 1) * 100}%`,
|
|
16166
|
+
right: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`,
|
|
16167
|
+
backgroundColor: "hsl(var(--primary) / 0.03)"
|
|
16168
|
+
},
|
|
16169
|
+
onMouseDown: (e) => onMouseDown(e, "middle"),
|
|
16170
|
+
children: [
|
|
16171
|
+
/* @__PURE__ */ jsx94(
|
|
16172
|
+
"div",
|
|
16173
|
+
{
|
|
16174
|
+
className: "absolute top-1/2 -translate-y-1/2 -left-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
|
|
16175
|
+
onMouseDown: (e) => {
|
|
16176
|
+
e.stopPropagation();
|
|
16177
|
+
onMouseDown(e, "start");
|
|
16178
|
+
},
|
|
16179
|
+
children: /* @__PURE__ */ jsx94(
|
|
16180
|
+
"div",
|
|
16181
|
+
{
|
|
16182
|
+
className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
|
|
16183
|
+
style: {
|
|
16184
|
+
backgroundColor: brushColor ?? "hsl(var(--primary) / 0.7)"
|
|
16185
|
+
}
|
|
16186
|
+
}
|
|
16187
|
+
)
|
|
16188
|
+
}
|
|
16189
|
+
),
|
|
16190
|
+
/* @__PURE__ */ jsx94(
|
|
16191
|
+
"div",
|
|
16192
|
+
{
|
|
16193
|
+
className: "absolute top-1/2 -translate-y-1/2 -right-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
|
|
16194
|
+
onMouseDown: (e) => {
|
|
16195
|
+
e.stopPropagation();
|
|
16196
|
+
onMouseDown(e, "end");
|
|
16197
|
+
},
|
|
16198
|
+
children: /* @__PURE__ */ jsx94(
|
|
16199
|
+
"div",
|
|
16200
|
+
{
|
|
16201
|
+
className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
|
|
16202
|
+
style: {
|
|
16203
|
+
backgroundColor: brushColor ?? "hsl(var(--primary) / 0.7)"
|
|
16204
|
+
}
|
|
16205
|
+
}
|
|
16206
|
+
)
|
|
16207
|
+
}
|
|
16208
|
+
)
|
|
16209
|
+
]
|
|
16210
|
+
}
|
|
16211
|
+
)
|
|
16212
|
+
]
|
|
16213
|
+
}
|
|
16214
|
+
)
|
|
16215
|
+
]
|
|
16216
|
+
}
|
|
16217
|
+
),
|
|
16218
|
+
/* @__PURE__ */ jsxs72("div", { className: "flex justify-between items-center mt-2 text-xs text-muted-foreground", children: [
|
|
16219
|
+
/* @__PURE__ */ jsxs72("span", { children: [
|
|
16220
|
+
data[startIndex]?.[xAxisKey],
|
|
16221
|
+
" - ",
|
|
16222
|
+
data[endIndex]?.[xAxisKey]
|
|
16223
|
+
] }),
|
|
16224
|
+
/* @__PURE__ */ jsxs72("span", { children: [
|
|
16225
|
+
endIndex - startIndex + 1,
|
|
16226
|
+
" de ",
|
|
16227
|
+
dataLength,
|
|
16228
|
+
" per\xEDodos"
|
|
16229
|
+
] })
|
|
16230
|
+
] })
|
|
16231
|
+
] });
|
|
16232
|
+
};
|
|
16233
|
+
var Brush_default = Brush;
|
|
16234
|
+
|
|
16235
|
+
// src/components/ui/charts/utils/pillLabelRenderer.tsx
|
|
16236
|
+
import { jsx as jsx95, jsxs as jsxs73 } from "react/jsx-runtime";
|
|
15986
16237
|
var formatCompactNumber = (value) => {
|
|
15987
16238
|
const isNegative = value < 0;
|
|
15988
16239
|
const absValue = Math.abs(value);
|
|
@@ -16073,8 +16324,8 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
|
|
|
16073
16324
|
} else {
|
|
16074
16325
|
textColor = "#374151";
|
|
16075
16326
|
}
|
|
16076
|
-
return /* @__PURE__ */
|
|
16077
|
-
/* @__PURE__ */
|
|
16327
|
+
return /* @__PURE__ */ jsxs73("g", { children: [
|
|
16328
|
+
/* @__PURE__ */ jsx95(
|
|
16078
16329
|
"rect",
|
|
16079
16330
|
{
|
|
16080
16331
|
x: rectX,
|
|
@@ -16087,7 +16338,7 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
|
|
|
16087
16338
|
strokeWidth: rectStroke ? 1 : 0
|
|
16088
16339
|
}
|
|
16089
16340
|
),
|
|
16090
|
-
/* @__PURE__ */
|
|
16341
|
+
/* @__PURE__ */ jsx95(
|
|
16091
16342
|
"text",
|
|
16092
16343
|
{
|
|
16093
16344
|
x: textX,
|
|
@@ -16158,7 +16409,7 @@ var renderInsideBarLabel = (color, valueFormatter2) => {
|
|
|
16158
16409
|
const heightFactor = Math.max(0.8, Math.min(1.6, pHeight / heightRef));
|
|
16159
16410
|
fontSize = Math.min(18, Math.max(8, Math.round(fontSize * heightFactor)));
|
|
16160
16411
|
}
|
|
16161
|
-
return /* @__PURE__ */
|
|
16412
|
+
return /* @__PURE__ */ jsx95(
|
|
16162
16413
|
"text",
|
|
16163
16414
|
{
|
|
16164
16415
|
x: centerX,
|
|
@@ -16177,7 +16428,7 @@ var renderInsideBarLabel = (color, valueFormatter2) => {
|
|
|
16177
16428
|
|
|
16178
16429
|
// src/components/ui/charts/NoData.tsx
|
|
16179
16430
|
import { motion as motion21 } from "framer-motion";
|
|
16180
|
-
import { Fragment as Fragment17, jsx as
|
|
16431
|
+
import { Fragment as Fragment17, jsx as jsx96, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
16181
16432
|
var ChartBar = ({ x, y, w, h, i, loading }) => {
|
|
16182
16433
|
const baseY = y - h;
|
|
16183
16434
|
const d = i * 0.08;
|
|
@@ -16188,8 +16439,8 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
|
|
|
16188
16439
|
ease: "easeInOut",
|
|
16189
16440
|
delay: d
|
|
16190
16441
|
};
|
|
16191
|
-
return /* @__PURE__ */
|
|
16192
|
-
/* @__PURE__ */
|
|
16442
|
+
return /* @__PURE__ */ jsxs74("g", { children: [
|
|
16443
|
+
/* @__PURE__ */ jsx96(
|
|
16193
16444
|
motion21.rect,
|
|
16194
16445
|
{
|
|
16195
16446
|
x,
|
|
@@ -16204,7 +16455,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
|
|
|
16204
16455
|
style: { transformBox: "fill-box", originY: 1 }
|
|
16205
16456
|
}
|
|
16206
16457
|
),
|
|
16207
|
-
/* @__PURE__ */
|
|
16458
|
+
/* @__PURE__ */ jsx96(
|
|
16208
16459
|
motion21.rect,
|
|
16209
16460
|
{
|
|
16210
16461
|
x,
|
|
@@ -16220,7 +16471,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
|
|
|
16220
16471
|
style: { transformBox: "fill-box", originY: 1 }
|
|
16221
16472
|
}
|
|
16222
16473
|
),
|
|
16223
|
-
/* @__PURE__ */
|
|
16474
|
+
/* @__PURE__ */ jsx96(
|
|
16224
16475
|
motion21.line,
|
|
16225
16476
|
{
|
|
16226
16477
|
x1: x + w / 2,
|
|
@@ -16254,7 +16505,7 @@ var NoData = ({
|
|
|
16254
16505
|
{ x: 580, w: 100, h: h * 0.35 },
|
|
16255
16506
|
{ x: 700, w: 100, h: h * 0.3 }
|
|
16256
16507
|
];
|
|
16257
|
-
return /* @__PURE__ */
|
|
16508
|
+
return /* @__PURE__ */ jsx96(
|
|
16258
16509
|
"div",
|
|
16259
16510
|
{
|
|
16260
16511
|
className: cn(
|
|
@@ -16267,17 +16518,17 @@ var NoData = ({
|
|
|
16267
16518
|
},
|
|
16268
16519
|
role: "img",
|
|
16269
16520
|
"aria-label": message,
|
|
16270
|
-
children: /* @__PURE__ */
|
|
16271
|
-
/* @__PURE__ */
|
|
16521
|
+
children: /* @__PURE__ */ jsx96("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxs74("div", { className: "w-full max-w-[900px] relative", children: [
|
|
16522
|
+
/* @__PURE__ */ jsxs74(
|
|
16272
16523
|
"svg",
|
|
16273
16524
|
{
|
|
16274
16525
|
className: "w-full h-[var(--svg-h)] opacity-40",
|
|
16275
16526
|
viewBox: `0 0 900 ${h}`,
|
|
16276
16527
|
preserveAspectRatio: "none",
|
|
16277
16528
|
children: [
|
|
16278
|
-
/* @__PURE__ */
|
|
16279
|
-
/* @__PURE__ */
|
|
16280
|
-
/* @__PURE__ */
|
|
16529
|
+
/* @__PURE__ */ jsxs74("defs", { children: [
|
|
16530
|
+
/* @__PURE__ */ jsxs74("linearGradient", { id: "bg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
|
|
16531
|
+
/* @__PURE__ */ jsx96(
|
|
16281
16532
|
"stop",
|
|
16282
16533
|
{
|
|
16283
16534
|
offset: "0%",
|
|
@@ -16285,7 +16536,7 @@ var NoData = ({
|
|
|
16285
16536
|
stopOpacity: "0.15"
|
|
16286
16537
|
}
|
|
16287
16538
|
),
|
|
16288
|
-
/* @__PURE__ */
|
|
16539
|
+
/* @__PURE__ */ jsx96(
|
|
16289
16540
|
"stop",
|
|
16290
16541
|
{
|
|
16291
16542
|
offset: "100%",
|
|
@@ -16294,8 +16545,8 @@ var NoData = ({
|
|
|
16294
16545
|
}
|
|
16295
16546
|
)
|
|
16296
16547
|
] }),
|
|
16297
|
-
/* @__PURE__ */
|
|
16298
|
-
/* @__PURE__ */
|
|
16548
|
+
/* @__PURE__ */ jsxs74("linearGradient", { id: "gg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
|
|
16549
|
+
/* @__PURE__ */ jsx96(
|
|
16299
16550
|
"stop",
|
|
16300
16551
|
{
|
|
16301
16552
|
offset: "0%",
|
|
@@ -16303,7 +16554,7 @@ var NoData = ({
|
|
|
16303
16554
|
stopOpacity: "0.4"
|
|
16304
16555
|
}
|
|
16305
16556
|
),
|
|
16306
|
-
/* @__PURE__ */
|
|
16557
|
+
/* @__PURE__ */ jsx96(
|
|
16307
16558
|
"stop",
|
|
16308
16559
|
{
|
|
16309
16560
|
offset: "100%",
|
|
@@ -16312,17 +16563,17 @@ var NoData = ({
|
|
|
16312
16563
|
}
|
|
16313
16564
|
)
|
|
16314
16565
|
] }),
|
|
16315
|
-
/* @__PURE__ */
|
|
16316
|
-
/* @__PURE__ */
|
|
16317
|
-
/* @__PURE__ */
|
|
16318
|
-
/* @__PURE__ */
|
|
16319
|
-
/* @__PURE__ */
|
|
16320
|
-
/* @__PURE__ */
|
|
16321
|
-
/* @__PURE__ */
|
|
16566
|
+
/* @__PURE__ */ jsxs74("filter", { id: "s", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
|
|
16567
|
+
/* @__PURE__ */ jsx96("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "3" }),
|
|
16568
|
+
/* @__PURE__ */ jsx96("feOffset", { dx: "0", dy: "2" }),
|
|
16569
|
+
/* @__PURE__ */ jsx96("feComponentTransfer", { children: /* @__PURE__ */ jsx96("feFuncA", { type: "linear", slope: "0.2" }) }),
|
|
16570
|
+
/* @__PURE__ */ jsxs74("feMerge", { children: [
|
|
16571
|
+
/* @__PURE__ */ jsx96("feMergeNode", {}),
|
|
16572
|
+
/* @__PURE__ */ jsx96("feMergeNode", { in: "SourceGraphic" })
|
|
16322
16573
|
] })
|
|
16323
16574
|
] })
|
|
16324
16575
|
] }),
|
|
16325
|
-
/* @__PURE__ */
|
|
16576
|
+
/* @__PURE__ */ jsx96(
|
|
16326
16577
|
"rect",
|
|
16327
16578
|
{
|
|
16328
16579
|
x: 0,
|
|
@@ -16333,7 +16584,7 @@ var NoData = ({
|
|
|
16333
16584
|
rx: 8
|
|
16334
16585
|
}
|
|
16335
16586
|
),
|
|
16336
|
-
[...Array(6)].map((_, i) => /* @__PURE__ */
|
|
16587
|
+
[...Array(6)].map((_, i) => /* @__PURE__ */ jsx96(
|
|
16337
16588
|
"line",
|
|
16338
16589
|
{
|
|
16339
16590
|
x1: 50,
|
|
@@ -16346,7 +16597,7 @@ var NoData = ({
|
|
|
16346
16597
|
},
|
|
16347
16598
|
i
|
|
16348
16599
|
)),
|
|
16349
|
-
/* @__PURE__ */
|
|
16600
|
+
/* @__PURE__ */ jsx96(
|
|
16350
16601
|
"line",
|
|
16351
16602
|
{
|
|
16352
16603
|
x1: 50,
|
|
@@ -16358,7 +16609,7 @@ var NoData = ({
|
|
|
16358
16609
|
opacity: 0.5
|
|
16359
16610
|
}
|
|
16360
16611
|
),
|
|
16361
|
-
/* @__PURE__ */
|
|
16612
|
+
/* @__PURE__ */ jsx96(
|
|
16362
16613
|
"line",
|
|
16363
16614
|
{
|
|
16364
16615
|
x1: 50,
|
|
@@ -16370,7 +16621,7 @@ var NoData = ({
|
|
|
16370
16621
|
opacity: 0.5
|
|
16371
16622
|
}
|
|
16372
16623
|
),
|
|
16373
|
-
bars.map((b, i) => /* @__PURE__ */
|
|
16624
|
+
bars.map((b, i) => /* @__PURE__ */ jsx96(
|
|
16374
16625
|
ChartBar,
|
|
16375
16626
|
{
|
|
16376
16627
|
x: b.x,
|
|
@@ -16385,15 +16636,15 @@ var NoData = ({
|
|
|
16385
16636
|
]
|
|
16386
16637
|
}
|
|
16387
16638
|
),
|
|
16388
|
-
/* @__PURE__ */
|
|
16639
|
+
/* @__PURE__ */ jsx96("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ jsx96("div", { className: "pointer-events-auto bg-card/95 backdrop-blur-sm px-8 py-6 rounded-xl border border-border/50 shadow-lg text-center max-w-md", children: isLoading ? /* @__PURE__ */ jsx96("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ jsx96(
|
|
16389
16640
|
LoadingBase,
|
|
16390
16641
|
{
|
|
16391
16642
|
size: "xl",
|
|
16392
16643
|
message: loadingMessage ?? "Carregando"
|
|
16393
16644
|
}
|
|
16394
|
-
) }) : /* @__PURE__ */
|
|
16395
|
-
title && /* @__PURE__ */
|
|
16396
|
-
/* @__PURE__ */
|
|
16645
|
+
) }) : /* @__PURE__ */ jsxs74(Fragment17, { children: [
|
|
16646
|
+
title && /* @__PURE__ */ jsx96("h3", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
|
|
16647
|
+
/* @__PURE__ */ jsx96("p", { className: "text-lg font-medium text-foreground/90 mb-2", children: message })
|
|
16397
16648
|
] }) }) })
|
|
16398
16649
|
] }) })
|
|
16399
16650
|
}
|
|
@@ -16614,8 +16865,126 @@ var useChartClick = ({
|
|
|
16614
16865
|
};
|
|
16615
16866
|
};
|
|
16616
16867
|
|
|
16868
|
+
// src/components/ui/charts/hooks/useTimeSeriesRange.ts
|
|
16869
|
+
import { useState as useState43, useCallback as useCallback17, useEffect as useEffect33, useRef as useRef23 } from "react";
|
|
16870
|
+
function useTimeSeriesRange({
|
|
16871
|
+
dataLength,
|
|
16872
|
+
defaultStartIndex = 0,
|
|
16873
|
+
defaultEndIndex,
|
|
16874
|
+
onRangeChange
|
|
16875
|
+
}) {
|
|
16876
|
+
const [startIndex, setStartIndex] = useState43(defaultStartIndex);
|
|
16877
|
+
const [endIndex, setEndIndex] = useState43(
|
|
16878
|
+
defaultEndIndex ?? Math.max(0, dataLength - 1)
|
|
16879
|
+
);
|
|
16880
|
+
const [isDragging, setIsDragging] = useState43(null);
|
|
16881
|
+
const [dragStartX, setDragStartX] = useState43(0);
|
|
16882
|
+
const [initialStartIndex, setInitialStartIndex] = useState43(0);
|
|
16883
|
+
const [initialEndIndex, setInitialEndIndex] = useState43(0);
|
|
16884
|
+
const brushRef = useRef23(null);
|
|
16885
|
+
useEffect33(() => {
|
|
16886
|
+
if (dataLength > 0) {
|
|
16887
|
+
setStartIndex((prev) => Math.min(prev, dataLength - 1));
|
|
16888
|
+
setEndIndex((prev) => {
|
|
16889
|
+
if (prev >= dataLength - 2 || defaultEndIndex === void 0) {
|
|
16890
|
+
return dataLength - 1;
|
|
16891
|
+
}
|
|
16892
|
+
return Math.min(prev, dataLength - 1);
|
|
16893
|
+
});
|
|
16894
|
+
}
|
|
16895
|
+
}, [dataLength, defaultEndIndex]);
|
|
16896
|
+
const handleRangeChange = useCallback17(
|
|
16897
|
+
(newStart, newEnd) => {
|
|
16898
|
+
const clampedStart = Math.max(0, Math.min(newStart, dataLength - 1));
|
|
16899
|
+
const clampedEnd = Math.max(
|
|
16900
|
+
clampedStart,
|
|
16901
|
+
Math.min(newEnd, dataLength - 1)
|
|
16902
|
+
);
|
|
16903
|
+
setStartIndex(clampedStart);
|
|
16904
|
+
setEndIndex(clampedEnd);
|
|
16905
|
+
if (onRangeChange) {
|
|
16906
|
+
onRangeChange(clampedStart, clampedEnd);
|
|
16907
|
+
}
|
|
16908
|
+
},
|
|
16909
|
+
[dataLength, onRangeChange]
|
|
16910
|
+
);
|
|
16911
|
+
const handleMouseDown = useCallback17(
|
|
16912
|
+
(e, type) => {
|
|
16913
|
+
e.preventDefault();
|
|
16914
|
+
setIsDragging(type);
|
|
16915
|
+
setDragStartX(e.clientX);
|
|
16916
|
+
setInitialStartIndex(startIndex);
|
|
16917
|
+
setInitialEndIndex(endIndex);
|
|
16918
|
+
},
|
|
16919
|
+
[startIndex, endIndex]
|
|
16920
|
+
);
|
|
16921
|
+
const handleMouseMove = useCallback17(
|
|
16922
|
+
(e) => {
|
|
16923
|
+
if (!isDragging || !brushRef.current) return;
|
|
16924
|
+
const brushWidth = brushRef.current.offsetWidth;
|
|
16925
|
+
const deltaX = e.clientX - dragStartX;
|
|
16926
|
+
const indexDelta = Math.round(deltaX / brushWidth * dataLength);
|
|
16927
|
+
if (isDragging === "start") {
|
|
16928
|
+
const newStart = Math.max(
|
|
16929
|
+
0,
|
|
16930
|
+
Math.min(initialStartIndex + indexDelta, endIndex - 1)
|
|
16931
|
+
);
|
|
16932
|
+
handleRangeChange(newStart, endIndex);
|
|
16933
|
+
} else if (isDragging === "end") {
|
|
16934
|
+
const newEnd = Math.max(
|
|
16935
|
+
startIndex + 1,
|
|
16936
|
+
Math.min(initialEndIndex + indexDelta, dataLength - 1)
|
|
16937
|
+
);
|
|
16938
|
+
handleRangeChange(startIndex, newEnd);
|
|
16939
|
+
} else if (isDragging === "middle") {
|
|
16940
|
+
const rangeSize = initialEndIndex - initialStartIndex;
|
|
16941
|
+
let newStart = initialStartIndex + indexDelta;
|
|
16942
|
+
let newEnd = initialEndIndex + indexDelta;
|
|
16943
|
+
if (newStart < 0) {
|
|
16944
|
+
newStart = 0;
|
|
16945
|
+
newEnd = rangeSize;
|
|
16946
|
+
} else if (newEnd >= dataLength) {
|
|
16947
|
+
newEnd = dataLength - 1;
|
|
16948
|
+
newStart = newEnd - rangeSize;
|
|
16949
|
+
}
|
|
16950
|
+
handleRangeChange(newStart, newEnd);
|
|
16951
|
+
}
|
|
16952
|
+
},
|
|
16953
|
+
[
|
|
16954
|
+
isDragging,
|
|
16955
|
+
dragStartX,
|
|
16956
|
+
dataLength,
|
|
16957
|
+
startIndex,
|
|
16958
|
+
endIndex,
|
|
16959
|
+
initialStartIndex,
|
|
16960
|
+
initialEndIndex,
|
|
16961
|
+
handleRangeChange
|
|
16962
|
+
]
|
|
16963
|
+
);
|
|
16964
|
+
const handleMouseUp = useCallback17(() => {
|
|
16965
|
+
setIsDragging(null);
|
|
16966
|
+
}, []);
|
|
16967
|
+
useEffect33(() => {
|
|
16968
|
+
if (isDragging) {
|
|
16969
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
16970
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
16971
|
+
return () => {
|
|
16972
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
16973
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
16974
|
+
};
|
|
16975
|
+
}
|
|
16976
|
+
}, [isDragging, handleMouseMove, handleMouseUp]);
|
|
16977
|
+
return {
|
|
16978
|
+
startIndex,
|
|
16979
|
+
endIndex,
|
|
16980
|
+
isDragging,
|
|
16981
|
+
brushRef,
|
|
16982
|
+
handleMouseDown
|
|
16983
|
+
};
|
|
16984
|
+
}
|
|
16985
|
+
|
|
16617
16986
|
// src/components/ui/charts/Chart.tsx
|
|
16618
|
-
import { jsx as
|
|
16987
|
+
import { jsx as jsx97, jsxs as jsxs75 } from "react/jsx-runtime";
|
|
16619
16988
|
var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
|
|
16620
16989
|
var Chart = ({
|
|
16621
16990
|
data,
|
|
@@ -16648,7 +17017,8 @@ var Chart = ({
|
|
|
16648
17017
|
formatBR = false,
|
|
16649
17018
|
legendUppercase = false,
|
|
16650
17019
|
chartMargin,
|
|
16651
|
-
isLoading = false
|
|
17020
|
+
isLoading = false,
|
|
17021
|
+
timeSeries
|
|
16652
17022
|
}) => {
|
|
16653
17023
|
const smartConfig = useMemo26(() => {
|
|
16654
17024
|
const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
|
|
@@ -16688,15 +17058,38 @@ var Chart = ({
|
|
|
16688
17058
|
onTooltipPositionChange,
|
|
16689
17059
|
setActiveTooltips
|
|
16690
17060
|
} = useChartTooltips(maxTooltips);
|
|
16691
|
-
|
|
17061
|
+
useEffect34(() => {
|
|
16692
17062
|
if (highlightedSeries.size === 0 && showOnlyHighlighted) {
|
|
16693
17063
|
setShowOnlyHighlighted(false);
|
|
16694
17064
|
}
|
|
16695
17065
|
}, [highlightedSeries, showOnlyHighlighted, setShowOnlyHighlighted]);
|
|
16696
|
-
const
|
|
16697
|
-
|
|
16698
|
-
|
|
16699
|
-
|
|
17066
|
+
const timeSeriesConfig = useMemo26(() => {
|
|
17067
|
+
if (typeof timeSeries === "boolean") {
|
|
17068
|
+
return timeSeries ? {} : void 0;
|
|
17069
|
+
}
|
|
17070
|
+
return timeSeries;
|
|
17071
|
+
}, [timeSeries]);
|
|
17072
|
+
const {
|
|
17073
|
+
startIndex,
|
|
17074
|
+
endIndex,
|
|
17075
|
+
brushRef,
|
|
17076
|
+
handleMouseDown
|
|
17077
|
+
} = useTimeSeriesRange({
|
|
17078
|
+
dataLength: data.length,
|
|
17079
|
+
defaultStartIndex: timeSeriesConfig?.start,
|
|
17080
|
+
defaultEndIndex: timeSeriesConfig?.end,
|
|
17081
|
+
onRangeChange: timeSeriesConfig?.onRangeChange
|
|
17082
|
+
});
|
|
17083
|
+
const processedData = useMemo26(() => {
|
|
17084
|
+
const mapped = data.map((item) => ({
|
|
17085
|
+
...item,
|
|
17086
|
+
name: String(item[xAxisConfig.dataKey] || "N/A")
|
|
17087
|
+
}));
|
|
17088
|
+
if (timeSeriesConfig) {
|
|
17089
|
+
return mapped.slice(startIndex, endIndex + 1);
|
|
17090
|
+
}
|
|
17091
|
+
return mapped;
|
|
17092
|
+
}, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
|
|
16700
17093
|
const seriesOrder = [];
|
|
16701
17094
|
if (series) {
|
|
16702
17095
|
if (series.bar)
|
|
@@ -16785,7 +17178,7 @@ var Chart = ({
|
|
|
16785
17178
|
setActiveTooltips
|
|
16786
17179
|
}
|
|
16787
17180
|
);
|
|
16788
|
-
const getSeriesOpacity =
|
|
17181
|
+
const getSeriesOpacity = useCallback18(
|
|
16789
17182
|
(key) => {
|
|
16790
17183
|
return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
|
|
16791
17184
|
},
|
|
@@ -16826,7 +17219,7 @@ var Chart = ({
|
|
|
16826
17219
|
const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
|
|
16827
17220
|
const leftYAxisLabelDx = -Math.max(12, Math.round(yAxisTickWidth / 2));
|
|
16828
17221
|
const rightYAxisLabelDx = Math.max(12, Math.round(finalChartRightMargin / 2));
|
|
16829
|
-
const openTooltipForPeriod =
|
|
17222
|
+
const openTooltipForPeriod = useCallback18(
|
|
16830
17223
|
(periodName) => {
|
|
16831
17224
|
if (!enableDraggableTooltips) return;
|
|
16832
17225
|
const row = processedData.find((r) => String(r.name) === periodName);
|
|
@@ -16870,7 +17263,7 @@ var Chart = ({
|
|
|
16870
17263
|
);
|
|
16871
17264
|
if (!data && !isLoading) return null;
|
|
16872
17265
|
if (isLoading) {
|
|
16873
|
-
return /* @__PURE__ */
|
|
17266
|
+
return /* @__PURE__ */ jsx97(
|
|
16874
17267
|
NoData_default,
|
|
16875
17268
|
{
|
|
16876
17269
|
title,
|
|
@@ -16882,7 +17275,7 @@ var Chart = ({
|
|
|
16882
17275
|
);
|
|
16883
17276
|
}
|
|
16884
17277
|
if (Array.isArray(data) && data.length === 0) {
|
|
16885
|
-
return /* @__PURE__ */
|
|
17278
|
+
return /* @__PURE__ */ jsx97(
|
|
16886
17279
|
NoData_default,
|
|
16887
17280
|
{
|
|
16888
17281
|
title,
|
|
@@ -16891,7 +17284,7 @@ var Chart = ({
|
|
|
16891
17284
|
}
|
|
16892
17285
|
);
|
|
16893
17286
|
}
|
|
16894
|
-
return /* @__PURE__ */
|
|
17287
|
+
return /* @__PURE__ */ jsx97("div", { ref: wrapperRef, className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ jsxs75(
|
|
16895
17288
|
"div",
|
|
16896
17289
|
{
|
|
16897
17290
|
className: cn(
|
|
@@ -16899,7 +17292,7 @@ var Chart = ({
|
|
|
16899
17292
|
className
|
|
16900
17293
|
),
|
|
16901
17294
|
children: [
|
|
16902
|
-
title && /* @__PURE__ */
|
|
17295
|
+
title && /* @__PURE__ */ jsx97(
|
|
16903
17296
|
"div",
|
|
16904
17297
|
{
|
|
16905
17298
|
className: cn(
|
|
@@ -16908,11 +17301,11 @@ var Chart = ({
|
|
|
16908
17301
|
titlePosition === "right" && "justify-end",
|
|
16909
17302
|
titlePosition === "left" && "justify-start"
|
|
16910
17303
|
),
|
|
16911
|
-
children: /* @__PURE__ */
|
|
17304
|
+
children: /* @__PURE__ */ jsx97("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: title })
|
|
16912
17305
|
}
|
|
16913
17306
|
),
|
|
16914
|
-
allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */
|
|
16915
|
-
enableHighlights && /* @__PURE__ */
|
|
17307
|
+
allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxs75("div", { className: "flex items-center w-[98%] ml-[90px] gap-2", children: [
|
|
17308
|
+
enableHighlights && /* @__PURE__ */ jsx97(
|
|
16916
17309
|
Highlights_default,
|
|
16917
17310
|
{
|
|
16918
17311
|
allKeys,
|
|
@@ -16923,7 +17316,7 @@ var Chart = ({
|
|
|
16923
17316
|
containerWidth: chartInnerWidth
|
|
16924
17317
|
}
|
|
16925
17318
|
),
|
|
16926
|
-
enableShowOnly && /* @__PURE__ */
|
|
17319
|
+
enableShowOnly && /* @__PURE__ */ jsx97(
|
|
16927
17320
|
ShowOnly_default,
|
|
16928
17321
|
{
|
|
16929
17322
|
showOnlyHighlighted,
|
|
@@ -16932,7 +17325,7 @@ var Chart = ({
|
|
|
16932
17325
|
clearHighlights
|
|
16933
17326
|
}
|
|
16934
17327
|
),
|
|
16935
|
-
enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */
|
|
17328
|
+
enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx97("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx97(
|
|
16936
17329
|
PeriodsDropdown_default,
|
|
16937
17330
|
{
|
|
16938
17331
|
processedData,
|
|
@@ -16942,7 +17335,7 @@ var Chart = ({
|
|
|
16942
17335
|
}
|
|
16943
17336
|
) })
|
|
16944
17337
|
] }),
|
|
16945
|
-
!(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */
|
|
17338
|
+
!(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx97(
|
|
16946
17339
|
"div",
|
|
16947
17340
|
{
|
|
16948
17341
|
className: "w-full flex justify-end",
|
|
@@ -16951,7 +17344,7 @@ var Chart = ({
|
|
|
16951
17344
|
paddingRight: `${finalChartRightMargin}px`,
|
|
16952
17345
|
maxWidth: `${chartInnerWidth}px`
|
|
16953
17346
|
},
|
|
16954
|
-
children: /* @__PURE__ */
|
|
17347
|
+
children: /* @__PURE__ */ jsx97(
|
|
16955
17348
|
PeriodsDropdown_default,
|
|
16956
17349
|
{
|
|
16957
17350
|
processedData,
|
|
@@ -16961,8 +17354,8 @@ var Chart = ({
|
|
|
16961
17354
|
)
|
|
16962
17355
|
}
|
|
16963
17356
|
),
|
|
16964
|
-
/* @__PURE__ */
|
|
16965
|
-
|
|
17357
|
+
/* @__PURE__ */ jsx97(ResponsiveContainer2, { width: "100%", height, children: /* @__PURE__ */ jsxs75(
|
|
17358
|
+
ComposedChart2,
|
|
16966
17359
|
{
|
|
16967
17360
|
data: processedData,
|
|
16968
17361
|
height,
|
|
@@ -16974,10 +17367,10 @@ var Chart = ({
|
|
|
16974
17367
|
},
|
|
16975
17368
|
onClick: handleChartClick,
|
|
16976
17369
|
children: [
|
|
16977
|
-
/* @__PURE__ */
|
|
17370
|
+
/* @__PURE__ */ jsx97("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
|
|
16978
17371
|
const key = s.key;
|
|
16979
17372
|
const color = finalColors[key];
|
|
16980
|
-
return /* @__PURE__ */
|
|
17373
|
+
return /* @__PURE__ */ jsxs75(
|
|
16981
17374
|
"linearGradient",
|
|
16982
17375
|
{
|
|
16983
17376
|
id: `gradient-${key}`,
|
|
@@ -16986,14 +17379,14 @@ var Chart = ({
|
|
|
16986
17379
|
x2: "0",
|
|
16987
17380
|
y2: "0.8",
|
|
16988
17381
|
children: [
|
|
16989
|
-
/* @__PURE__ */
|
|
16990
|
-
/* @__PURE__ */
|
|
17382
|
+
/* @__PURE__ */ jsx97("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
|
|
17383
|
+
/* @__PURE__ */ jsx97("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
|
|
16991
17384
|
]
|
|
16992
17385
|
},
|
|
16993
17386
|
`gradient-${key}`
|
|
16994
17387
|
);
|
|
16995
17388
|
}) }),
|
|
16996
|
-
showGrid && /* @__PURE__ */
|
|
17389
|
+
showGrid && /* @__PURE__ */ jsx97(
|
|
16997
17390
|
CartesianGrid,
|
|
16998
17391
|
{
|
|
16999
17392
|
strokeDasharray: "3 3",
|
|
@@ -17001,8 +17394,8 @@ var Chart = ({
|
|
|
17001
17394
|
opacity: 0.5
|
|
17002
17395
|
}
|
|
17003
17396
|
),
|
|
17004
|
-
/* @__PURE__ */
|
|
17005
|
-
|
|
17397
|
+
/* @__PURE__ */ jsx97(
|
|
17398
|
+
XAxis2,
|
|
17006
17399
|
{
|
|
17007
17400
|
dataKey: xAxisConfig.dataKey,
|
|
17008
17401
|
stroke: "hsl(var(--muted-foreground))",
|
|
@@ -17028,8 +17421,8 @@ var Chart = ({
|
|
|
17028
17421
|
} : void 0
|
|
17029
17422
|
}
|
|
17030
17423
|
),
|
|
17031
|
-
/* @__PURE__ */
|
|
17032
|
-
|
|
17424
|
+
/* @__PURE__ */ jsx97(
|
|
17425
|
+
YAxis2,
|
|
17033
17426
|
{
|
|
17034
17427
|
yAxisId: "left",
|
|
17035
17428
|
width: yAxisTickWidth,
|
|
@@ -17054,7 +17447,7 @@ var Chart = ({
|
|
|
17054
17447
|
} : void 0
|
|
17055
17448
|
}
|
|
17056
17449
|
),
|
|
17057
|
-
minLeftDataValue < 0 && /* @__PURE__ */
|
|
17450
|
+
minLeftDataValue < 0 && /* @__PURE__ */ jsx97(
|
|
17058
17451
|
ReferenceLine,
|
|
17059
17452
|
{
|
|
17060
17453
|
y: 0,
|
|
@@ -17088,8 +17481,8 @@ var Chart = ({
|
|
|
17088
17481
|
return biaxialConfigNormalized.stroke[firstRightKey] || defaultRightColor;
|
|
17089
17482
|
return defaultRightColor;
|
|
17090
17483
|
})();
|
|
17091
|
-
return /* @__PURE__ */
|
|
17092
|
-
|
|
17484
|
+
return /* @__PURE__ */ jsx97(
|
|
17485
|
+
YAxis2,
|
|
17093
17486
|
{
|
|
17094
17487
|
yAxisId: "right",
|
|
17095
17488
|
width: finalChartRightMargin,
|
|
@@ -17117,10 +17510,10 @@ var Chart = ({
|
|
|
17117
17510
|
}
|
|
17118
17511
|
);
|
|
17119
17512
|
})(),
|
|
17120
|
-
showTooltip && /* @__PURE__ */
|
|
17513
|
+
showTooltip && /* @__PURE__ */ jsx97(
|
|
17121
17514
|
Tooltip,
|
|
17122
17515
|
{
|
|
17123
|
-
content: showTooltipTotal ? /* @__PURE__ */
|
|
17516
|
+
content: showTooltipTotal ? /* @__PURE__ */ jsx97(
|
|
17124
17517
|
TooltipWithTotal_default,
|
|
17125
17518
|
{
|
|
17126
17519
|
finalColors,
|
|
@@ -17128,7 +17521,7 @@ var Chart = ({
|
|
|
17128
17521
|
categoryFormatter,
|
|
17129
17522
|
periodLabel
|
|
17130
17523
|
}
|
|
17131
|
-
) : /* @__PURE__ */
|
|
17524
|
+
) : /* @__PURE__ */ jsx97(
|
|
17132
17525
|
TooltipSimple_default,
|
|
17133
17526
|
{
|
|
17134
17527
|
finalColors,
|
|
@@ -17140,7 +17533,7 @@ var Chart = ({
|
|
|
17140
17533
|
cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
|
|
17141
17534
|
}
|
|
17142
17535
|
),
|
|
17143
|
-
showLegend && /* @__PURE__ */
|
|
17536
|
+
showLegend && /* @__PURE__ */ jsx97(
|
|
17144
17537
|
Legend,
|
|
17145
17538
|
{
|
|
17146
17539
|
wrapperStyle: {
|
|
@@ -17153,7 +17546,7 @@ var Chart = ({
|
|
|
17153
17546
|
const key = String(value);
|
|
17154
17547
|
const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
|
|
17155
17548
|
const displayLabel = legendUppercase ? label.toUpperCase() : label;
|
|
17156
|
-
return /* @__PURE__ */
|
|
17549
|
+
return /* @__PURE__ */ jsx97("span", { className: "tracking-[0]", children: displayLabel });
|
|
17157
17550
|
}
|
|
17158
17551
|
}
|
|
17159
17552
|
),
|
|
@@ -17171,8 +17564,8 @@ var Chart = ({
|
|
|
17171
17564
|
}
|
|
17172
17565
|
}
|
|
17173
17566
|
if (s.type === "bar") {
|
|
17174
|
-
return /* @__PURE__ */
|
|
17175
|
-
|
|
17567
|
+
return /* @__PURE__ */ jsx97(
|
|
17568
|
+
Bar2,
|
|
17176
17569
|
{
|
|
17177
17570
|
dataKey: key,
|
|
17178
17571
|
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
@@ -17182,7 +17575,7 @@ var Chart = ({
|
|
|
17182
17575
|
onClick: handleBarClick,
|
|
17183
17576
|
className: "cursor-pointer",
|
|
17184
17577
|
style: { opacity: getSeriesOpacity(key) },
|
|
17185
|
-
activeBar: /* @__PURE__ */
|
|
17578
|
+
activeBar: /* @__PURE__ */ jsx97(
|
|
17186
17579
|
Rectangle,
|
|
17187
17580
|
{
|
|
17188
17581
|
fill: color,
|
|
@@ -17191,7 +17584,7 @@ var Chart = ({
|
|
|
17191
17584
|
opacity: 0.8
|
|
17192
17585
|
}
|
|
17193
17586
|
),
|
|
17194
|
-
children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */
|
|
17587
|
+
children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx97(
|
|
17195
17588
|
LabelList,
|
|
17196
17589
|
{
|
|
17197
17590
|
dataKey: key,
|
|
@@ -17218,8 +17611,8 @@ var Chart = ({
|
|
|
17218
17611
|
);
|
|
17219
17612
|
}
|
|
17220
17613
|
if (s.type === "line") {
|
|
17221
|
-
return /* @__PURE__ */
|
|
17222
|
-
|
|
17614
|
+
return /* @__PURE__ */ jsx97(
|
|
17615
|
+
Line2,
|
|
17223
17616
|
{
|
|
17224
17617
|
dataKey: key,
|
|
17225
17618
|
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
@@ -17231,7 +17624,7 @@ var Chart = ({
|
|
|
17231
17624
|
onClick: handleSeriesClick,
|
|
17232
17625
|
className: "cursor-pointer pointer-events-auto",
|
|
17233
17626
|
style: { opacity: getSeriesOpacity(key) },
|
|
17234
|
-
children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */
|
|
17627
|
+
children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx97(
|
|
17235
17628
|
LabelList,
|
|
17236
17629
|
{
|
|
17237
17630
|
dataKey: key,
|
|
@@ -17249,8 +17642,8 @@ var Chart = ({
|
|
|
17249
17642
|
);
|
|
17250
17643
|
}
|
|
17251
17644
|
if (s.type === "area") {
|
|
17252
|
-
return /* @__PURE__ */
|
|
17253
|
-
|
|
17645
|
+
return /* @__PURE__ */ jsx97(
|
|
17646
|
+
Area2,
|
|
17254
17647
|
{
|
|
17255
17648
|
type: "monotone",
|
|
17256
17649
|
dataKey: key,
|
|
@@ -17269,7 +17662,7 @@ var Chart = ({
|
|
|
17269
17662
|
stroke: "hsl(var(--background))",
|
|
17270
17663
|
strokeWidth: 2
|
|
17271
17664
|
},
|
|
17272
|
-
children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */
|
|
17665
|
+
children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx97(
|
|
17273
17666
|
LabelList,
|
|
17274
17667
|
{
|
|
17275
17668
|
dataKey: key,
|
|
@@ -17291,7 +17684,7 @@ var Chart = ({
|
|
|
17291
17684
|
]
|
|
17292
17685
|
}
|
|
17293
17686
|
) }),
|
|
17294
|
-
enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */
|
|
17687
|
+
enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx97(
|
|
17295
17688
|
DraggableTooltip_default,
|
|
17296
17689
|
{
|
|
17297
17690
|
id: tooltip.id,
|
|
@@ -17316,7 +17709,7 @@ var Chart = ({
|
|
|
17316
17709
|
},
|
|
17317
17710
|
tooltip.id
|
|
17318
17711
|
)),
|
|
17319
|
-
enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */
|
|
17712
|
+
enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsx97(
|
|
17320
17713
|
CloseAllButton_default,
|
|
17321
17714
|
{
|
|
17322
17715
|
count: activeTooltips.length,
|
|
@@ -17324,6 +17717,28 @@ var Chart = ({
|
|
|
17324
17717
|
position: "top-center",
|
|
17325
17718
|
variant: "floating"
|
|
17326
17719
|
}
|
|
17720
|
+
),
|
|
17721
|
+
timeSeriesConfig && /* @__PURE__ */ jsx97(
|
|
17722
|
+
Brush_default,
|
|
17723
|
+
{
|
|
17724
|
+
data,
|
|
17725
|
+
startIndex,
|
|
17726
|
+
endIndex,
|
|
17727
|
+
onMouseDown: handleMouseDown,
|
|
17728
|
+
brushRef,
|
|
17729
|
+
xAxisKey: xAxisConfig.dataKey,
|
|
17730
|
+
seriesOrder,
|
|
17731
|
+
finalColors,
|
|
17732
|
+
brushHeight: timeSeriesConfig.height,
|
|
17733
|
+
brushColor: timeSeriesConfig.brushColor,
|
|
17734
|
+
miniChartOpacity: timeSeriesConfig.miniChartOpacity,
|
|
17735
|
+
showGrid,
|
|
17736
|
+
gridColor,
|
|
17737
|
+
margin: {
|
|
17738
|
+
left: finalChartLeftMargin,
|
|
17739
|
+
right: finalChartRightMargin
|
|
17740
|
+
}
|
|
17741
|
+
}
|
|
17327
17742
|
)
|
|
17328
17743
|
]
|
|
17329
17744
|
}
|
|
@@ -17332,19 +17747,19 @@ var Chart = ({
|
|
|
17332
17747
|
var Chart_default = Chart;
|
|
17333
17748
|
|
|
17334
17749
|
// src/components/ui/charts/BarChart.tsx
|
|
17335
|
-
import { useState as
|
|
17750
|
+
import { useState as useState44, useEffect as useEffect35, useCallback as useCallback19, useMemo as useMemo27 } from "react";
|
|
17336
17751
|
import {
|
|
17337
17752
|
BarChart as RechartsBarChart,
|
|
17338
|
-
Bar as
|
|
17753
|
+
Bar as Bar3,
|
|
17339
17754
|
Rectangle as Rectangle2,
|
|
17340
|
-
XAxis as
|
|
17341
|
-
YAxis as
|
|
17755
|
+
XAxis as XAxis3,
|
|
17756
|
+
YAxis as YAxis3,
|
|
17342
17757
|
CartesianGrid as CartesianGrid2,
|
|
17343
17758
|
Tooltip as Tooltip2,
|
|
17344
17759
|
Legend as Legend2,
|
|
17345
17760
|
LabelList as LabelList2
|
|
17346
17761
|
} from "recharts";
|
|
17347
|
-
import { jsx as
|
|
17762
|
+
import { jsx as jsx98, jsxs as jsxs76 } from "react/jsx-runtime";
|
|
17348
17763
|
var DEFAULT_COLORS3 = ["#55af7d", "#8e68ff", "#2273e1"];
|
|
17349
17764
|
var BarChart = ({
|
|
17350
17765
|
data,
|
|
@@ -17424,14 +17839,14 @@ var BarChart = ({
|
|
|
17424
17839
|
return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
|
|
17425
17840
|
}, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
|
|
17426
17841
|
const { xAxisConfig, mapperConfig } = smartConfig;
|
|
17427
|
-
const [activeTooltips, setActiveTooltips] =
|
|
17428
|
-
const [isDragging, setIsDragging] =
|
|
17429
|
-
const [dragOffset, setDragOffset] =
|
|
17842
|
+
const [activeTooltips, setActiveTooltips] = useState44([]);
|
|
17843
|
+
const [isDragging, setIsDragging] = useState44(null);
|
|
17844
|
+
const [dragOffset, setDragOffset] = useState44({
|
|
17430
17845
|
x: 0,
|
|
17431
17846
|
y: 0
|
|
17432
17847
|
});
|
|
17433
|
-
const [globalTooltipCount, setGlobalTooltipCount] =
|
|
17434
|
-
const [alignmentGuides, setAlignmentGuides] =
|
|
17848
|
+
const [globalTooltipCount, setGlobalTooltipCount] = useState44(0);
|
|
17849
|
+
const [alignmentGuides, setAlignmentGuides] = useState44([]);
|
|
17435
17850
|
const processedData = data.map((item) => ({
|
|
17436
17851
|
...item,
|
|
17437
17852
|
name: String(item[xAxisConfig.dataKey] || "N/A")
|
|
@@ -17508,7 +17923,7 @@ var BarChart = ({
|
|
|
17508
17923
|
const GUIDE_THRESHOLD2 = 60;
|
|
17509
17924
|
const STRONG_SNAP_THRESHOLD2 = 35;
|
|
17510
17925
|
const PRECISION_SNAP_THRESHOLD2 = 8;
|
|
17511
|
-
const updateAlignmentGuides =
|
|
17926
|
+
const updateAlignmentGuides = useCallback19(
|
|
17512
17927
|
(draggedTooltipId, currentPosition) => {
|
|
17513
17928
|
if (!isDragging) return;
|
|
17514
17929
|
const getAllTooltips = () => {
|
|
@@ -17572,7 +17987,7 @@ var BarChart = ({
|
|
|
17572
17987
|
},
|
|
17573
17988
|
[isDragging, activeTooltips]
|
|
17574
17989
|
);
|
|
17575
|
-
const snapToGuides =
|
|
17990
|
+
const snapToGuides = useCallback19(
|
|
17576
17991
|
(position) => {
|
|
17577
17992
|
const snappedPosition = { ...position };
|
|
17578
17993
|
let hasSnapped = false;
|
|
@@ -17634,7 +18049,7 @@ var BarChart = ({
|
|
|
17634
18049
|
setIsDragging(tooltipId);
|
|
17635
18050
|
setDragOffset({ x: offsetX, y: offsetY });
|
|
17636
18051
|
};
|
|
17637
|
-
|
|
18052
|
+
useEffect35(() => {
|
|
17638
18053
|
let rafId;
|
|
17639
18054
|
let lastMousePosition = { x: 0, y: 0 };
|
|
17640
18055
|
const handleGlobalMouseMove = (e) => {
|
|
@@ -17692,7 +18107,7 @@ var BarChart = ({
|
|
|
17692
18107
|
updateAlignmentGuides,
|
|
17693
18108
|
snapToGuides
|
|
17694
18109
|
]);
|
|
17695
|
-
|
|
18110
|
+
useEffect35(() => {
|
|
17696
18111
|
const handleCloseAllTooltips = () => {
|
|
17697
18112
|
setActiveTooltips([]);
|
|
17698
18113
|
setGlobalTooltipCount(0);
|
|
@@ -17702,7 +18117,7 @@ var BarChart = ({
|
|
|
17702
18117
|
window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
|
|
17703
18118
|
};
|
|
17704
18119
|
}, []);
|
|
17705
|
-
|
|
18120
|
+
useEffect35(() => {
|
|
17706
18121
|
const handleTooltipCountRequest = () => {
|
|
17707
18122
|
window.dispatchEvent(
|
|
17708
18123
|
new CustomEvent("tooltipCountResponse", {
|
|
@@ -17741,7 +18156,7 @@ var BarChart = ({
|
|
|
17741
18156
|
);
|
|
17742
18157
|
};
|
|
17743
18158
|
}, [activeTooltips]);
|
|
17744
|
-
|
|
18159
|
+
useEffect35(() => {
|
|
17745
18160
|
if (isDragging) return;
|
|
17746
18161
|
let totalCount = 0;
|
|
17747
18162
|
const handleCountResponse = (event) => {
|
|
@@ -17765,25 +18180,25 @@ var BarChart = ({
|
|
|
17765
18180
|
label
|
|
17766
18181
|
}) => {
|
|
17767
18182
|
if (!active || !payload) return null;
|
|
17768
|
-
return /* @__PURE__ */
|
|
17769
|
-
/* @__PURE__ */
|
|
18183
|
+
return /* @__PURE__ */ jsxs76("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
|
|
18184
|
+
/* @__PURE__ */ jsx98("p", { className: "font-medium text-foreground mb-2", children: label }),
|
|
17770
18185
|
payload.map(
|
|
17771
|
-
(entry, index) => /* @__PURE__ */
|
|
17772
|
-
/* @__PURE__ */
|
|
18186
|
+
(entry, index) => /* @__PURE__ */ jsxs76("div", { className: "flex items-center gap-2 text-sm", children: [
|
|
18187
|
+
/* @__PURE__ */ jsx98(
|
|
17773
18188
|
"div",
|
|
17774
18189
|
{
|
|
17775
18190
|
className: "w-3 h-3 rounded-sm",
|
|
17776
18191
|
style: { backgroundColor: entry.color }
|
|
17777
18192
|
}
|
|
17778
18193
|
),
|
|
17779
|
-
/* @__PURE__ */
|
|
18194
|
+
/* @__PURE__ */ jsxs76("span", { className: "text-muted-foreground", children: [
|
|
17780
18195
|
entry.name,
|
|
17781
18196
|
":"
|
|
17782
18197
|
] }),
|
|
17783
|
-
/* @__PURE__ */
|
|
18198
|
+
/* @__PURE__ */ jsx98("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
|
|
17784
18199
|
] }, index)
|
|
17785
18200
|
),
|
|
17786
|
-
/* @__PURE__ */
|
|
18201
|
+
/* @__PURE__ */ jsx98("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
|
|
17787
18202
|
] });
|
|
17788
18203
|
};
|
|
17789
18204
|
const getTitleClassName = (position) => {
|
|
@@ -17797,7 +18212,7 @@ var BarChart = ({
|
|
|
17797
18212
|
return `${baseClasses} text-left`;
|
|
17798
18213
|
}
|
|
17799
18214
|
};
|
|
17800
|
-
return /* @__PURE__ */
|
|
18215
|
+
return /* @__PURE__ */ jsxs76(
|
|
17801
18216
|
"div",
|
|
17802
18217
|
{
|
|
17803
18218
|
className: cn("rounded-lg bg-card p-4 relative", className),
|
|
@@ -17806,8 +18221,8 @@ var BarChart = ({
|
|
|
17806
18221
|
maxWidth: "100%"
|
|
17807
18222
|
},
|
|
17808
18223
|
children: [
|
|
17809
|
-
title && /* @__PURE__ */
|
|
17810
|
-
/* @__PURE__ */
|
|
18224
|
+
title && /* @__PURE__ */ jsx98("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx98("h3", { className: getTitleClassName(titlePosition), children: title }) }),
|
|
18225
|
+
/* @__PURE__ */ jsxs76(
|
|
17811
18226
|
RechartsBarChart,
|
|
17812
18227
|
{
|
|
17813
18228
|
data: processedData,
|
|
@@ -17816,7 +18231,7 @@ var BarChart = ({
|
|
|
17816
18231
|
margin: resolveChartMargins(margins, chartMargins, showLabels),
|
|
17817
18232
|
onClick: handleChartClick,
|
|
17818
18233
|
children: [
|
|
17819
|
-
showGrid && /* @__PURE__ */
|
|
18234
|
+
showGrid && /* @__PURE__ */ jsx98(
|
|
17820
18235
|
CartesianGrid2,
|
|
17821
18236
|
{
|
|
17822
18237
|
strokeDasharray: "3 3",
|
|
@@ -17824,8 +18239,8 @@ var BarChart = ({
|
|
|
17824
18239
|
opacity: 0.5
|
|
17825
18240
|
}
|
|
17826
18241
|
),
|
|
17827
|
-
/* @__PURE__ */
|
|
17828
|
-
|
|
18242
|
+
/* @__PURE__ */ jsx98(
|
|
18243
|
+
XAxis3,
|
|
17829
18244
|
{
|
|
17830
18245
|
dataKey: xAxisConfig.dataKey,
|
|
17831
18246
|
stroke: "hsl(var(--muted-foreground))",
|
|
@@ -17835,8 +18250,8 @@ var BarChart = ({
|
|
|
17835
18250
|
tickFormatter: xAxisConfig.valueFormatter
|
|
17836
18251
|
}
|
|
17837
18252
|
),
|
|
17838
|
-
/* @__PURE__ */
|
|
17839
|
-
|
|
18253
|
+
/* @__PURE__ */ jsx98(
|
|
18254
|
+
YAxis3,
|
|
17840
18255
|
{
|
|
17841
18256
|
stroke: "hsl(var(--muted-foreground))",
|
|
17842
18257
|
fontSize: 12,
|
|
@@ -17847,14 +18262,14 @@ var BarChart = ({
|
|
|
17847
18262
|
tickCount: 6
|
|
17848
18263
|
}
|
|
17849
18264
|
),
|
|
17850
|
-
showTooltip && /* @__PURE__ */
|
|
18265
|
+
showTooltip && /* @__PURE__ */ jsx98(
|
|
17851
18266
|
Tooltip2,
|
|
17852
18267
|
{
|
|
17853
|
-
content: /* @__PURE__ */
|
|
18268
|
+
content: /* @__PURE__ */ jsx98(CustomTooltip, {}),
|
|
17854
18269
|
cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
|
|
17855
18270
|
}
|
|
17856
18271
|
),
|
|
17857
|
-
showLegend && /* @__PURE__ */
|
|
18272
|
+
showLegend && /* @__PURE__ */ jsx98(
|
|
17858
18273
|
Legend2,
|
|
17859
18274
|
{
|
|
17860
18275
|
wrapperStyle: {
|
|
@@ -17865,8 +18280,8 @@ var BarChart = ({
|
|
|
17865
18280
|
),
|
|
17866
18281
|
dataKeys.map((key) => {
|
|
17867
18282
|
const fieldConfig = mapperConfig[key];
|
|
17868
|
-
return /* @__PURE__ */
|
|
17869
|
-
|
|
18283
|
+
return /* @__PURE__ */ jsx98(
|
|
18284
|
+
Bar3,
|
|
17870
18285
|
{
|
|
17871
18286
|
dataKey: key,
|
|
17872
18287
|
name: fieldConfig?.label || key,
|
|
@@ -17874,7 +18289,7 @@ var BarChart = ({
|
|
|
17874
18289
|
radius: [4, 4, 0, 0],
|
|
17875
18290
|
onClick: handleBarClick,
|
|
17876
18291
|
style: { cursor: "pointer" },
|
|
17877
|
-
activeBar: /* @__PURE__ */
|
|
18292
|
+
activeBar: /* @__PURE__ */ jsx98(
|
|
17878
18293
|
Rectangle2,
|
|
17879
18294
|
{
|
|
17880
18295
|
fill: finalColors[key],
|
|
@@ -17883,7 +18298,7 @@ var BarChart = ({
|
|
|
17883
18298
|
opacity: 0.8
|
|
17884
18299
|
}
|
|
17885
18300
|
),
|
|
17886
|
-
children: showLabels && /* @__PURE__ */
|
|
18301
|
+
children: showLabels && /* @__PURE__ */ jsx98(
|
|
17887
18302
|
LabelList2,
|
|
17888
18303
|
{
|
|
17889
18304
|
dataKey: key,
|
|
@@ -17920,8 +18335,8 @@ var BarChart = ({
|
|
|
17920
18335
|
guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
|
|
17921
18336
|
guide.targetTooltip.top + guide.targetTooltip.height / 2
|
|
17922
18337
|
);
|
|
17923
|
-
return /* @__PURE__ */
|
|
17924
|
-
/* @__PURE__ */
|
|
18338
|
+
return /* @__PURE__ */ jsxs76("div", { children: [
|
|
18339
|
+
/* @__PURE__ */ jsx98(
|
|
17925
18340
|
"div",
|
|
17926
18341
|
{
|
|
17927
18342
|
className: "fixed pointer-events-none z-30",
|
|
@@ -17940,7 +18355,7 @@ var BarChart = ({
|
|
|
17940
18355
|
}
|
|
17941
18356
|
}
|
|
17942
18357
|
),
|
|
17943
|
-
/* @__PURE__ */
|
|
18358
|
+
/* @__PURE__ */ jsx98(
|
|
17944
18359
|
"div",
|
|
17945
18360
|
{
|
|
17946
18361
|
className: "fixed pointer-events-none z-31",
|
|
@@ -17956,7 +18371,7 @@ var BarChart = ({
|
|
|
17956
18371
|
}
|
|
17957
18372
|
}
|
|
17958
18373
|
),
|
|
17959
|
-
/* @__PURE__ */
|
|
18374
|
+
/* @__PURE__ */ jsx98(
|
|
17960
18375
|
"div",
|
|
17961
18376
|
{
|
|
17962
18377
|
className: "fixed pointer-events-none z-31",
|
|
@@ -17974,7 +18389,7 @@ var BarChart = ({
|
|
|
17974
18389
|
)
|
|
17975
18390
|
] }, index);
|
|
17976
18391
|
}),
|
|
17977
|
-
activeTooltips.map((tooltip, index) => /* @__PURE__ */
|
|
18392
|
+
activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsx98(
|
|
17978
18393
|
DraggableTooltip_default,
|
|
17979
18394
|
{
|
|
17980
18395
|
id: tooltip.id,
|
|
@@ -18007,18 +18422,18 @@ var BarChart = ({
|
|
|
18007
18422
|
var BarChart_default = BarChart;
|
|
18008
18423
|
|
|
18009
18424
|
// src/components/ui/charts/LineChart.tsx
|
|
18010
|
-
import { useState as
|
|
18425
|
+
import { useState as useState45, useEffect as useEffect36, useCallback as useCallback20, useMemo as useMemo28 } from "react";
|
|
18011
18426
|
import {
|
|
18012
18427
|
LineChart as RechartsLineChart,
|
|
18013
|
-
Line as
|
|
18014
|
-
XAxis as
|
|
18015
|
-
YAxis as
|
|
18428
|
+
Line as Line3,
|
|
18429
|
+
XAxis as XAxis4,
|
|
18430
|
+
YAxis as YAxis4,
|
|
18016
18431
|
CartesianGrid as CartesianGrid3,
|
|
18017
18432
|
Tooltip as Tooltip3,
|
|
18018
18433
|
Legend as Legend3,
|
|
18019
18434
|
LabelList as LabelList3
|
|
18020
18435
|
} from "recharts";
|
|
18021
|
-
import { jsx as
|
|
18436
|
+
import { jsx as jsx99, jsxs as jsxs77 } from "react/jsx-runtime";
|
|
18022
18437
|
var defaultData = [
|
|
18023
18438
|
{ name: "A", value: 100 },
|
|
18024
18439
|
{ name: "B", value: 200 },
|
|
@@ -18050,14 +18465,14 @@ var CustomLineChart = ({
|
|
|
18050
18465
|
containerPaddingLeft,
|
|
18051
18466
|
16
|
|
18052
18467
|
);
|
|
18053
|
-
const [activeTooltips, setActiveTooltips] =
|
|
18054
|
-
const [isDragging, setIsDragging] =
|
|
18055
|
-
const [dragOffset, setDragOffset] =
|
|
18468
|
+
const [activeTooltips, setActiveTooltips] = useState45([]);
|
|
18469
|
+
const [isDragging, setIsDragging] = useState45(null);
|
|
18470
|
+
const [dragOffset, setDragOffset] = useState45({
|
|
18056
18471
|
x: 0,
|
|
18057
18472
|
y: 0
|
|
18058
18473
|
});
|
|
18059
|
-
const [globalTooltipCount, setGlobalTooltipCount] =
|
|
18060
|
-
const [alignmentGuides, setAlignmentGuides] =
|
|
18474
|
+
const [globalTooltipCount, setGlobalTooltipCount] = useState45(0);
|
|
18475
|
+
const [alignmentGuides, setAlignmentGuides] = useState45([]);
|
|
18061
18476
|
const generateColors = (dataKeys2) => {
|
|
18062
18477
|
const colorMap = {};
|
|
18063
18478
|
const allColors = generateAdditionalColors(colors2, dataKeys2.length);
|
|
@@ -18117,7 +18532,7 @@ var CustomLineChart = ({
|
|
|
18117
18532
|
setActiveTooltips((prev) => [...prev, newTooltip]);
|
|
18118
18533
|
}
|
|
18119
18534
|
};
|
|
18120
|
-
return /* @__PURE__ */
|
|
18535
|
+
return /* @__PURE__ */ jsx99(
|
|
18121
18536
|
"circle",
|
|
18122
18537
|
{
|
|
18123
18538
|
cx,
|
|
@@ -18159,10 +18574,10 @@ var CustomLineChart = ({
|
|
|
18159
18574
|
const handleChartBackgroundClick = () => {
|
|
18160
18575
|
setActiveTooltips([]);
|
|
18161
18576
|
};
|
|
18162
|
-
const handleCloseAllTooltips =
|
|
18577
|
+
const handleCloseAllTooltips = useCallback20(() => {
|
|
18163
18578
|
window.dispatchEvent(new CustomEvent("closeAllTooltips"));
|
|
18164
18579
|
}, []);
|
|
18165
|
-
const updateAlignmentGuides =
|
|
18580
|
+
const updateAlignmentGuides = useCallback20(
|
|
18166
18581
|
(draggedTooltipId, draggedPosition) => {
|
|
18167
18582
|
const SNAP_THRESHOLD = 15;
|
|
18168
18583
|
const draggedTooltip = activeTooltips.find(
|
|
@@ -18243,7 +18658,7 @@ var CustomLineChart = ({
|
|
|
18243
18658
|
},
|
|
18244
18659
|
[activeTooltips]
|
|
18245
18660
|
);
|
|
18246
|
-
const snapToGuides =
|
|
18661
|
+
const snapToGuides = useCallback20(
|
|
18247
18662
|
(position) => {
|
|
18248
18663
|
const SNAP_DISTANCE = 10;
|
|
18249
18664
|
const snappedPosition = { ...position };
|
|
@@ -18271,7 +18686,7 @@ var CustomLineChart = ({
|
|
|
18271
18686
|
setIsDragging(tooltipId);
|
|
18272
18687
|
setDragOffset({ x: offsetX, y: offsetY });
|
|
18273
18688
|
};
|
|
18274
|
-
|
|
18689
|
+
useEffect36(() => {
|
|
18275
18690
|
let rafId;
|
|
18276
18691
|
let lastMousePosition = { x: 0, y: 0 };
|
|
18277
18692
|
const handleGlobalMouseMove = (e) => {
|
|
@@ -18318,7 +18733,7 @@ var CustomLineChart = ({
|
|
|
18318
18733
|
updateAlignmentGuides,
|
|
18319
18734
|
snapToGuides
|
|
18320
18735
|
]);
|
|
18321
|
-
|
|
18736
|
+
useEffect36(() => {
|
|
18322
18737
|
const handleCloseAllTooltips2 = () => {
|
|
18323
18738
|
setActiveTooltips([]);
|
|
18324
18739
|
setGlobalTooltipCount(0);
|
|
@@ -18328,7 +18743,7 @@ var CustomLineChart = ({
|
|
|
18328
18743
|
window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
|
|
18329
18744
|
};
|
|
18330
18745
|
}, []);
|
|
18331
|
-
|
|
18746
|
+
useEffect36(() => {
|
|
18332
18747
|
const handleTooltipCountRequest = () => {
|
|
18333
18748
|
window.dispatchEvent(
|
|
18334
18749
|
new CustomEvent("tooltipCountResponse", {
|
|
@@ -18372,7 +18787,7 @@ var CustomLineChart = ({
|
|
|
18372
18787
|
);
|
|
18373
18788
|
};
|
|
18374
18789
|
}, [activeTooltips]);
|
|
18375
|
-
|
|
18790
|
+
useEffect36(() => {
|
|
18376
18791
|
if (isDragging) return;
|
|
18377
18792
|
let totalCount = 0;
|
|
18378
18793
|
const handleCountResponse = (event) => {
|
|
@@ -18400,7 +18815,7 @@ var CustomLineChart = ({
|
|
|
18400
18815
|
return "text-left";
|
|
18401
18816
|
}
|
|
18402
18817
|
};
|
|
18403
|
-
return /* @__PURE__ */
|
|
18818
|
+
return /* @__PURE__ */ jsx99("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxs77(
|
|
18404
18819
|
"div",
|
|
18405
18820
|
{
|
|
18406
18821
|
className: "rounded-lg bg-card p-4 relative border border-border",
|
|
@@ -18410,8 +18825,8 @@ var CustomLineChart = ({
|
|
|
18410
18825
|
},
|
|
18411
18826
|
onClick: handleChartBackgroundClick,
|
|
18412
18827
|
children: [
|
|
18413
|
-
title && /* @__PURE__ */
|
|
18414
|
-
/* @__PURE__ */
|
|
18828
|
+
title && /* @__PURE__ */ jsx99("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsx99("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ jsx99("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
|
|
18829
|
+
/* @__PURE__ */ jsxs77(
|
|
18415
18830
|
RechartsLineChart,
|
|
18416
18831
|
{
|
|
18417
18832
|
data,
|
|
@@ -18420,7 +18835,7 @@ var CustomLineChart = ({
|
|
|
18420
18835
|
margin: resolveChartMargins(margins, chartMargins, showLabels),
|
|
18421
18836
|
onClick: handleChartClick,
|
|
18422
18837
|
children: [
|
|
18423
|
-
showGrid && /* @__PURE__ */
|
|
18838
|
+
showGrid && /* @__PURE__ */ jsx99(
|
|
18424
18839
|
CartesianGrid3,
|
|
18425
18840
|
{
|
|
18426
18841
|
strokeDasharray: "3 3",
|
|
@@ -18428,16 +18843,16 @@ var CustomLineChart = ({
|
|
|
18428
18843
|
opacity: 0.3
|
|
18429
18844
|
}
|
|
18430
18845
|
),
|
|
18431
|
-
/* @__PURE__ */
|
|
18432
|
-
|
|
18846
|
+
/* @__PURE__ */ jsx99(
|
|
18847
|
+
XAxis4,
|
|
18433
18848
|
{
|
|
18434
18849
|
dataKey: "name",
|
|
18435
18850
|
className: "fill-muted-foreground text-xs",
|
|
18436
18851
|
fontSize: 12
|
|
18437
18852
|
}
|
|
18438
18853
|
),
|
|
18439
|
-
/* @__PURE__ */
|
|
18440
|
-
|
|
18854
|
+
/* @__PURE__ */ jsx99(
|
|
18855
|
+
YAxis4,
|
|
18441
18856
|
{
|
|
18442
18857
|
className: "fill-muted-foreground text-xs",
|
|
18443
18858
|
fontSize: 12,
|
|
@@ -18446,8 +18861,8 @@ var CustomLineChart = ({
|
|
|
18446
18861
|
tickCount: 6
|
|
18447
18862
|
}
|
|
18448
18863
|
),
|
|
18449
|
-
showTooltip && /* @__PURE__ */
|
|
18450
|
-
showLegend && /* @__PURE__ */
|
|
18864
|
+
showTooltip && /* @__PURE__ */ jsx99(Tooltip3, { content: () => null }),
|
|
18865
|
+
showLegend && /* @__PURE__ */ jsx99(
|
|
18451
18866
|
Legend3,
|
|
18452
18867
|
{
|
|
18453
18868
|
wrapperStyle: {
|
|
@@ -18456,16 +18871,16 @@ var CustomLineChart = ({
|
|
|
18456
18871
|
}
|
|
18457
18872
|
}
|
|
18458
18873
|
),
|
|
18459
|
-
dataKeys.map((key) => /* @__PURE__ */
|
|
18460
|
-
|
|
18874
|
+
dataKeys.map((key) => /* @__PURE__ */ jsx99(
|
|
18875
|
+
Line3,
|
|
18461
18876
|
{
|
|
18462
18877
|
type: "monotone",
|
|
18463
18878
|
dataKey: key,
|
|
18464
18879
|
stroke: finalColors[key],
|
|
18465
18880
|
strokeWidth,
|
|
18466
18881
|
dot: showDots ? { r: 4, cursor: "pointer" } : false,
|
|
18467
|
-
activeDot: (props) => /* @__PURE__ */
|
|
18468
|
-
children: showLabels && /* @__PURE__ */
|
|
18882
|
+
activeDot: (props) => /* @__PURE__ */ jsx99(ClickableDot, { ...props, dataKey: key }),
|
|
18883
|
+
children: showLabels && /* @__PURE__ */ jsx99(
|
|
18469
18884
|
LabelList3,
|
|
18470
18885
|
{
|
|
18471
18886
|
dataKey: key,
|
|
@@ -18502,8 +18917,8 @@ var CustomLineChart = ({
|
|
|
18502
18917
|
guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
|
|
18503
18918
|
guide.targetTooltip.top + guide.targetTooltip.height / 2
|
|
18504
18919
|
);
|
|
18505
|
-
return /* @__PURE__ */
|
|
18506
|
-
/* @__PURE__ */
|
|
18920
|
+
return /* @__PURE__ */ jsxs77("div", { children: [
|
|
18921
|
+
/* @__PURE__ */ jsx99(
|
|
18507
18922
|
"div",
|
|
18508
18923
|
{
|
|
18509
18924
|
className: "fixed pointer-events-none z-30",
|
|
@@ -18522,7 +18937,7 @@ var CustomLineChart = ({
|
|
|
18522
18937
|
}
|
|
18523
18938
|
}
|
|
18524
18939
|
),
|
|
18525
|
-
/* @__PURE__ */
|
|
18940
|
+
/* @__PURE__ */ jsx99(
|
|
18526
18941
|
"div",
|
|
18527
18942
|
{
|
|
18528
18943
|
className: "fixed pointer-events-none z-31",
|
|
@@ -18538,7 +18953,7 @@ var CustomLineChart = ({
|
|
|
18538
18953
|
}
|
|
18539
18954
|
}
|
|
18540
18955
|
),
|
|
18541
|
-
/* @__PURE__ */
|
|
18956
|
+
/* @__PURE__ */ jsx99(
|
|
18542
18957
|
"div",
|
|
18543
18958
|
{
|
|
18544
18959
|
className: "fixed pointer-events-none z-31",
|
|
@@ -18556,7 +18971,7 @@ var CustomLineChart = ({
|
|
|
18556
18971
|
)
|
|
18557
18972
|
] }, index);
|
|
18558
18973
|
}),
|
|
18559
|
-
activeTooltips.map((tooltip, index) => /* @__PURE__ */
|
|
18974
|
+
activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsx99(
|
|
18560
18975
|
DraggableTooltip_default,
|
|
18561
18976
|
{
|
|
18562
18977
|
id: tooltip.id,
|
|
@@ -18591,11 +19006,11 @@ import {
|
|
|
18591
19006
|
PieChart as RechartsPieChart,
|
|
18592
19007
|
Pie,
|
|
18593
19008
|
Cell,
|
|
18594
|
-
ResponsiveContainer as
|
|
19009
|
+
ResponsiveContainer as ResponsiveContainer3,
|
|
18595
19010
|
Tooltip as Tooltip4,
|
|
18596
19011
|
Legend as Legend4
|
|
18597
19012
|
} from "recharts";
|
|
18598
|
-
import { jsx as
|
|
19013
|
+
import { jsx as jsx100, jsxs as jsxs78 } from "react/jsx-runtime";
|
|
18599
19014
|
var defaultData2 = [
|
|
18600
19015
|
{ name: "Vendas", value: 4e3 },
|
|
18601
19016
|
{ name: "Marketing", value: 3e3 },
|
|
@@ -18633,7 +19048,7 @@ var renderCustomizedLabel = ({
|
|
|
18633
19048
|
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
18634
19049
|
const x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
18635
19050
|
const y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
18636
|
-
return /* @__PURE__ */
|
|
19051
|
+
return /* @__PURE__ */ jsx100(
|
|
18637
19052
|
"text",
|
|
18638
19053
|
{
|
|
18639
19054
|
x,
|
|
@@ -18662,8 +19077,8 @@ var CustomPieChart = ({
|
|
|
18662
19077
|
centerY = "50%"
|
|
18663
19078
|
}) => {
|
|
18664
19079
|
const finalColors = colors2 || DEFAULT_COLORS5;
|
|
18665
|
-
return /* @__PURE__ */
|
|
18666
|
-
/* @__PURE__ */
|
|
19080
|
+
return /* @__PURE__ */ jsx100("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsx100(ResponsiveContainer3, { width, height, children: /* @__PURE__ */ jsxs78(RechartsPieChart, { children: [
|
|
19081
|
+
/* @__PURE__ */ jsx100(
|
|
18667
19082
|
Pie,
|
|
18668
19083
|
{
|
|
18669
19084
|
data,
|
|
@@ -18675,7 +19090,7 @@ var CustomPieChart = ({
|
|
|
18675
19090
|
innerRadius,
|
|
18676
19091
|
fill: "#8884d8",
|
|
18677
19092
|
dataKey: "value",
|
|
18678
|
-
children: data.map((entry, index) => /* @__PURE__ */
|
|
19093
|
+
children: data.map((entry, index) => /* @__PURE__ */ jsx100(
|
|
18679
19094
|
Cell,
|
|
18680
19095
|
{
|
|
18681
19096
|
fill: finalColors[index % finalColors.length]
|
|
@@ -18684,7 +19099,7 @@ var CustomPieChart = ({
|
|
|
18684
19099
|
))
|
|
18685
19100
|
}
|
|
18686
19101
|
),
|
|
18687
|
-
showTooltip && /* @__PURE__ */
|
|
19102
|
+
showTooltip && /* @__PURE__ */ jsx100(
|
|
18688
19103
|
Tooltip4,
|
|
18689
19104
|
{
|
|
18690
19105
|
contentStyle: {
|
|
@@ -18695,16 +19110,59 @@ var CustomPieChart = ({
|
|
|
18695
19110
|
}
|
|
18696
19111
|
}
|
|
18697
19112
|
),
|
|
18698
|
-
showLegend && /* @__PURE__ */
|
|
19113
|
+
showLegend && /* @__PURE__ */ jsx100(Legend4, {})
|
|
18699
19114
|
] }) }) });
|
|
18700
19115
|
};
|
|
18701
19116
|
var PieChart_default = CustomPieChart;
|
|
18702
19117
|
|
|
19118
|
+
// src/components/ui/charts/TimeSeries.tsx
|
|
19119
|
+
import { jsx as jsx101 } from "react/jsx-runtime";
|
|
19120
|
+
var TimeSeries = ({
|
|
19121
|
+
data,
|
|
19122
|
+
xAxis,
|
|
19123
|
+
chartHeight = 350,
|
|
19124
|
+
height,
|
|
19125
|
+
brushHeight,
|
|
19126
|
+
className,
|
|
19127
|
+
start,
|
|
19128
|
+
end,
|
|
19129
|
+
defaultStartIndex,
|
|
19130
|
+
defaultEndIndex,
|
|
19131
|
+
onRangeChange,
|
|
19132
|
+
brushColor,
|
|
19133
|
+
brushStroke,
|
|
19134
|
+
miniChartOpacity = 0.2,
|
|
19135
|
+
...rest
|
|
19136
|
+
}) => {
|
|
19137
|
+
const brushHeightValue = brushHeight ?? height ?? 60;
|
|
19138
|
+
const startIndex = defaultStartIndex ?? start ?? 0;
|
|
19139
|
+
const endIndex = defaultEndIndex ?? end;
|
|
19140
|
+
return /* @__PURE__ */ jsx101("div", { className: cn("w-full flex flex-col", className), children: /* @__PURE__ */ jsx101(
|
|
19141
|
+
Chart_default,
|
|
19142
|
+
{
|
|
19143
|
+
...rest,
|
|
19144
|
+
data,
|
|
19145
|
+
xAxis,
|
|
19146
|
+
height: chartHeight + brushHeightValue + 40,
|
|
19147
|
+
timeSeries: {
|
|
19148
|
+
start: startIndex,
|
|
19149
|
+
end: endIndex,
|
|
19150
|
+
onRangeChange,
|
|
19151
|
+
height: brushHeightValue,
|
|
19152
|
+
brushColor,
|
|
19153
|
+
brushStroke,
|
|
19154
|
+
miniChartOpacity
|
|
19155
|
+
}
|
|
19156
|
+
}
|
|
19157
|
+
) });
|
|
19158
|
+
};
|
|
19159
|
+
var TimeSeries_default = TimeSeries;
|
|
19160
|
+
|
|
18703
19161
|
// src/components/ui/LeaderBoard.tsx
|
|
18704
19162
|
import { CaretUpDownIcon as CaretUpDownIcon3 } from "@phosphor-icons/react";
|
|
18705
|
-
import { useState as
|
|
19163
|
+
import { useState as useState46 } from "react";
|
|
18706
19164
|
import { motion as motion22 } from "framer-motion";
|
|
18707
|
-
import { jsx as
|
|
19165
|
+
import { jsx as jsx102, jsxs as jsxs79 } from "react/jsx-runtime";
|
|
18708
19166
|
function Leaderboard({
|
|
18709
19167
|
items,
|
|
18710
19168
|
order: initialOrder = "desc",
|
|
@@ -18713,7 +19171,7 @@ function Leaderboard({
|
|
|
18713
19171
|
isLoading = false,
|
|
18714
19172
|
legend
|
|
18715
19173
|
}) {
|
|
18716
|
-
const [order, setOrder] =
|
|
19174
|
+
const [order, setOrder] = useState46(initialOrder);
|
|
18717
19175
|
const mockData = [
|
|
18718
19176
|
{ name: "Ana", value: 92 },
|
|
18719
19177
|
{ name: "Bruno", value: 81 },
|
|
@@ -18746,47 +19204,47 @@ function Leaderboard({
|
|
|
18746
19204
|
if (numValue >= 25) return "yellow";
|
|
18747
19205
|
return "green";
|
|
18748
19206
|
};
|
|
18749
|
-
return /* @__PURE__ */
|
|
19207
|
+
return /* @__PURE__ */ jsxs79(
|
|
18750
19208
|
"div",
|
|
18751
19209
|
{
|
|
18752
19210
|
className: `border rounded-xl flex flex-col max-h-80 w-96 ${className}`,
|
|
18753
19211
|
children: [
|
|
18754
|
-
/* @__PURE__ */
|
|
18755
|
-
/* @__PURE__ */
|
|
18756
|
-
/* @__PURE__ */
|
|
19212
|
+
/* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3", children: [
|
|
19213
|
+
/* @__PURE__ */ jsx102("h2", { className: "text-lg font-semibold px-1", children: title }),
|
|
19214
|
+
/* @__PURE__ */ jsx102(
|
|
18757
19215
|
ButtonBase,
|
|
18758
19216
|
{
|
|
18759
19217
|
size: "icon",
|
|
18760
19218
|
variant: "ghost",
|
|
18761
19219
|
onClick: () => setOrder(order === "desc" ? "asc" : "desc"),
|
|
18762
19220
|
disabled: isLoading || sortedData.length === 0,
|
|
18763
|
-
children: /* @__PURE__ */
|
|
19221
|
+
children: /* @__PURE__ */ jsx102(CaretUpDownIcon3, {})
|
|
18764
19222
|
}
|
|
18765
19223
|
)
|
|
18766
19224
|
] }),
|
|
18767
|
-
/* @__PURE__ */
|
|
18768
|
-
/* @__PURE__ */
|
|
18769
|
-
/* @__PURE__ */
|
|
18770
|
-
/* @__PURE__ */
|
|
19225
|
+
/* @__PURE__ */ jsx102("div", { className: "overflow-y-auto flex-1", children: isLoading ? /* @__PURE__ */ jsx102("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between p-1", children: [
|
|
19226
|
+
/* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-3 flex-1", children: [
|
|
19227
|
+
/* @__PURE__ */ jsx102(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
|
|
19228
|
+
/* @__PURE__ */ jsx102(SkeletonBase, { className: "h-4 w-36" })
|
|
18771
19229
|
] }),
|
|
18772
|
-
/* @__PURE__ */
|
|
18773
|
-
] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */
|
|
18774
|
-
/* @__PURE__ */
|
|
18775
|
-
/* @__PURE__ */
|
|
18776
|
-
/* @__PURE__ */
|
|
19230
|
+
/* @__PURE__ */ jsx102(SkeletonBase, { className: "h-6 w-12 rounded-full" })
|
|
19231
|
+
] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ jsx102("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ jsx102("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ jsxs79("div", { children: [
|
|
19232
|
+
/* @__PURE__ */ jsxs79("div", { className: "flex items-center justify-between py-2.5 px-4 border-b flex-shrink-0 gap-3 sticky top-0 bg-background", children: [
|
|
19233
|
+
/* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0]?.[0] ?? "Participante" }),
|
|
19234
|
+
/* @__PURE__ */ jsx102("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[0]?.[1] ?? "Pontua\xE7\xE3o" })
|
|
18777
19235
|
] }),
|
|
18778
|
-
/* @__PURE__ */
|
|
19236
|
+
/* @__PURE__ */ jsx102("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ jsx102(
|
|
18779
19237
|
motion22.span,
|
|
18780
19238
|
{
|
|
18781
19239
|
initial: { opacity: 0, y: 10 },
|
|
18782
19240
|
animate: { opacity: 1, y: 0 },
|
|
18783
19241
|
transition: { delay: idx * 5e-3 },
|
|
18784
|
-
children: /* @__PURE__ */
|
|
18785
|
-
/* @__PURE__ */
|
|
18786
|
-
/* @__PURE__ */
|
|
18787
|
-
/* @__PURE__ */
|
|
19242
|
+
children: /* @__PURE__ */ jsxs79("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
|
|
19243
|
+
/* @__PURE__ */ jsxs79("div", { className: "flex items-center gap-3", children: [
|
|
19244
|
+
/* @__PURE__ */ jsx102("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: idx + 1 }),
|
|
19245
|
+
/* @__PURE__ */ jsx102("span", { className: "font-medium", children: item.name })
|
|
18788
19246
|
] }),
|
|
18789
|
-
/* @__PURE__ */
|
|
19247
|
+
/* @__PURE__ */ jsx102(
|
|
18790
19248
|
Badge,
|
|
18791
19249
|
{
|
|
18792
19250
|
color: getBadgeColor(item.value),
|
|
@@ -18835,6 +19293,7 @@ export {
|
|
|
18835
19293
|
BreadcrumbListBase,
|
|
18836
19294
|
BreadcrumbPageBase,
|
|
18837
19295
|
BreadcrumbSeparatorBase,
|
|
19296
|
+
Brush_default as Brush,
|
|
18838
19297
|
ButtonBase,
|
|
18839
19298
|
ButtonGroupBase,
|
|
18840
19299
|
CalendarBase,
|
|
@@ -19088,6 +19547,7 @@ export {
|
|
|
19088
19547
|
ThemeProviderBase,
|
|
19089
19548
|
TimePicker,
|
|
19090
19549
|
TimePickerInput,
|
|
19550
|
+
TimeSeries_default as TimeSeries,
|
|
19091
19551
|
Toaster,
|
|
19092
19552
|
TooltipBase,
|
|
19093
19553
|
TooltipContentBase,
|
|
@@ -19183,5 +19643,6 @@ export {
|
|
|
19183
19643
|
useEventVisibilityAgenda,
|
|
19184
19644
|
useIsMobile,
|
|
19185
19645
|
useTheme,
|
|
19646
|
+
useTimeSeriesRange,
|
|
19186
19647
|
visualForItem
|
|
19187
19648
|
};
|