@mlw-packages/react-components 1.7.15 → 1.7.17
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 +49 -3
- package/dist/index.d.mts +137 -166
- package/dist/index.d.ts +137 -166
- package/dist/index.js +1762 -1328
- package/dist/index.mjs +1529 -1081
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -2051,7 +2051,14 @@ function AvatarCombobox({
|
|
|
2051
2051
|
}
|
|
2052
2052
|
|
|
2053
2053
|
// src/components/charts/Chart.tsx
|
|
2054
|
-
import {
|
|
2054
|
+
import {
|
|
2055
|
+
useState as useState7,
|
|
2056
|
+
useEffect as useEffect5,
|
|
2057
|
+
useCallback as useCallback5,
|
|
2058
|
+
useMemo as useMemo5,
|
|
2059
|
+
useRef as useRef3,
|
|
2060
|
+
useLayoutEffect
|
|
2061
|
+
} from "react";
|
|
2055
2062
|
import {
|
|
2056
2063
|
ComposedChart,
|
|
2057
2064
|
Bar,
|
|
@@ -2422,7 +2429,7 @@ var Highlights = ({
|
|
|
2422
2429
|
const label = mapperConfig[k]?.label ?? k;
|
|
2423
2430
|
const color = finalColors[k];
|
|
2424
2431
|
const pillClasses = cn(
|
|
2425
|
-
"inline-flex items-center gap-2 px-
|
|
2432
|
+
"inline-flex items-center gap-2 px-2 rounded-lg text-xs border transition-all select-none relative overflow-hidden h-7",
|
|
2426
2433
|
isHighlighted ? "pr-8" : "",
|
|
2427
2434
|
isHighlighted ? "bg-card/95 border-2 text-foreground shadow-[0_6px_18px_rgba(0,0,0,0.12)]" : "bg-muted/10 border-border text-muted-foreground hover:bg-muted/5"
|
|
2428
2435
|
);
|
|
@@ -2457,7 +2464,7 @@ var Highlights = ({
|
|
|
2457
2464
|
style: {
|
|
2458
2465
|
backgroundColor: color,
|
|
2459
2466
|
borderColor: isHighlighted ? color : "transparent",
|
|
2460
|
-
boxShadow: isHighlighted ? `0 6px
|
|
2467
|
+
boxShadow: isHighlighted ? `0 6px 10px ${color}33` : void 0
|
|
2461
2468
|
},
|
|
2462
2469
|
layout: true,
|
|
2463
2470
|
initial: { scale: 0.8, opacity: 0.9 },
|
|
@@ -2472,7 +2479,7 @@ var Highlights = ({
|
|
|
2472
2479
|
showFullLabel ? /* @__PURE__ */ jsx22(
|
|
2473
2480
|
motion8.span,
|
|
2474
2481
|
{
|
|
2475
|
-
className: "truncate max-w-[10rem]
|
|
2482
|
+
className: "truncate max-w-[10rem] mt-0.5",
|
|
2476
2483
|
layout: true,
|
|
2477
2484
|
children: label
|
|
2478
2485
|
}
|
|
@@ -3480,107 +3487,8 @@ var TooltipSimple = ({
|
|
|
3480
3487
|
};
|
|
3481
3488
|
var TooltipSimple_default = TooltipSimple;
|
|
3482
3489
|
|
|
3483
|
-
// src/components/charts/NoData.tsx
|
|
3484
|
-
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
3485
|
-
var NoData = ({
|
|
3486
|
-
paddingLeft = 0,
|
|
3487
|
-
height = 360,
|
|
3488
|
-
message = "Sem dados para exibir",
|
|
3489
|
-
className
|
|
3490
|
-
}) => {
|
|
3491
|
-
const svgHeight = typeof height === "number" ? height : 360;
|
|
3492
|
-
const bars = [
|
|
3493
|
-
{ x: 120, w: 120, h: svgHeight * 0.45, label: "Label 0" },
|
|
3494
|
-
{ x: 260, w: 120, h: svgHeight * 0.75, label: "Label 1" },
|
|
3495
|
-
{ x: 400, w: 120, h: svgHeight * 0.65, label: "Label 2" },
|
|
3496
|
-
{ x: 540, w: 120, h: svgHeight * 0.55, label: "Label 3" },
|
|
3497
|
-
{ x: 680, w: 120, h: svgHeight * 0.25, label: "Label 4" }
|
|
3498
|
-
];
|
|
3499
|
-
const styleVars = {
|
|
3500
|
-
["--pl"]: `${paddingLeft}px`,
|
|
3501
|
-
["--svg-h"]: typeof height === "number" ? `${height}px` : String(height)
|
|
3502
|
-
};
|
|
3503
|
-
return /* @__PURE__ */ jsx27(
|
|
3504
|
-
"div",
|
|
3505
|
-
{
|
|
3506
|
-
className: cn(
|
|
3507
|
-
"rounded-lg bg-card p-2 relative overflow-visible w-full",
|
|
3508
|
-
className
|
|
3509
|
-
),
|
|
3510
|
-
style: styleVars,
|
|
3511
|
-
role: "img",
|
|
3512
|
-
"aria-label": message,
|
|
3513
|
-
children: /* @__PURE__ */ jsx27("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] pr-3 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxs22("div", { className: "w-full max-w-[900px] relative", children: [
|
|
3514
|
-
/* @__PURE__ */ jsxs22(
|
|
3515
|
-
"svg",
|
|
3516
|
-
{
|
|
3517
|
-
className: "w-full h-[var(--svg-h)]",
|
|
3518
|
-
width: "100%",
|
|
3519
|
-
viewBox: `0 0 900 ${svgHeight}`,
|
|
3520
|
-
preserveAspectRatio: "none",
|
|
3521
|
-
children: [
|
|
3522
|
-
/* @__PURE__ */ jsx27(
|
|
3523
|
-
"rect",
|
|
3524
|
-
{
|
|
3525
|
-
x: 0,
|
|
3526
|
-
y: 0,
|
|
3527
|
-
width: 900,
|
|
3528
|
-
height: svgHeight,
|
|
3529
|
-
fill: "transparent"
|
|
3530
|
-
}
|
|
3531
|
-
),
|
|
3532
|
-
Array.from({ length: 5 }).map((_, i) => {
|
|
3533
|
-
const y = 40 + (svgHeight - 80) / 4 * i;
|
|
3534
|
-
return /* @__PURE__ */ jsx27(
|
|
3535
|
-
"line",
|
|
3536
|
-
{
|
|
3537
|
-
x1: 60,
|
|
3538
|
-
x2: 840,
|
|
3539
|
-
y1: y,
|
|
3540
|
-
y2: y,
|
|
3541
|
-
stroke: "rgba(0,0,0,0.06)",
|
|
3542
|
-
strokeWidth: 1
|
|
3543
|
-
},
|
|
3544
|
-
`g-${i}`
|
|
3545
|
-
);
|
|
3546
|
-
}),
|
|
3547
|
-
bars.map((b, i) => /* @__PURE__ */ jsxs22("g", { children: [
|
|
3548
|
-
/* @__PURE__ */ jsx27(
|
|
3549
|
-
"rect",
|
|
3550
|
-
{
|
|
3551
|
-
x: b.x,
|
|
3552
|
-
y: svgHeight - 60 - b.h,
|
|
3553
|
-
width: b.w,
|
|
3554
|
-
height: b.h,
|
|
3555
|
-
rx: 6,
|
|
3556
|
-
fill: "rgba(0,0,0,0.06)",
|
|
3557
|
-
stroke: "rgba(0,0,0,0.04)"
|
|
3558
|
-
}
|
|
3559
|
-
),
|
|
3560
|
-
/* @__PURE__ */ jsx27(
|
|
3561
|
-
"text",
|
|
3562
|
-
{
|
|
3563
|
-
x: b.x + b.w / 2,
|
|
3564
|
-
y: svgHeight - 20,
|
|
3565
|
-
fill: "rgba(0,0,0,0.35)",
|
|
3566
|
-
fontSize: 12,
|
|
3567
|
-
textAnchor: "middle",
|
|
3568
|
-
children: b.label
|
|
3569
|
-
}
|
|
3570
|
-
)
|
|
3571
|
-
] }, `barg-${i}`))
|
|
3572
|
-
]
|
|
3573
|
-
}
|
|
3574
|
-
),
|
|
3575
|
-
/* @__PURE__ */ jsx27("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ jsx27("div", { className: "pointer-events-auto bg-transparent px-3", children: /* @__PURE__ */ jsx27("div", { className: "text-2xl font-extrabold text-black/80", children: message }) }) })
|
|
3576
|
-
] }) })
|
|
3577
|
-
}
|
|
3578
|
-
);
|
|
3579
|
-
};
|
|
3580
|
-
var NoData_default = NoData;
|
|
3581
|
-
|
|
3582
3490
|
// src/components/charts/utils/pillLabelRenderer.tsx
|
|
3583
|
-
import { jsx as
|
|
3491
|
+
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
3584
3492
|
var formatCompactNumber = (value) => {
|
|
3585
3493
|
const isNegative = value < 0;
|
|
3586
3494
|
const absValue = Math.abs(value);
|
|
@@ -3625,7 +3533,7 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
|
|
|
3625
3533
|
40,
|
|
3626
3534
|
String(text).length * approxCharWidth + paddingX * 2
|
|
3627
3535
|
);
|
|
3628
|
-
const pillHeight =
|
|
3536
|
+
const pillHeight = 14;
|
|
3629
3537
|
const xNum = parseNumber(x);
|
|
3630
3538
|
const px = parseNumber(props.x);
|
|
3631
3539
|
const pWidth = parseNumber(props.width);
|
|
@@ -3671,8 +3579,8 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
|
|
|
3671
3579
|
} else {
|
|
3672
3580
|
textColor = "#374151";
|
|
3673
3581
|
}
|
|
3674
|
-
return /* @__PURE__ */
|
|
3675
|
-
/* @__PURE__ */
|
|
3582
|
+
return /* @__PURE__ */ jsxs22("g", { children: [
|
|
3583
|
+
/* @__PURE__ */ jsx27(
|
|
3676
3584
|
"rect",
|
|
3677
3585
|
{
|
|
3678
3586
|
x: rectX,
|
|
@@ -3685,13 +3593,13 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
|
|
|
3685
3593
|
strokeWidth: rectStroke ? 1 : 0
|
|
3686
3594
|
}
|
|
3687
3595
|
),
|
|
3688
|
-
/* @__PURE__ */
|
|
3596
|
+
/* @__PURE__ */ jsx27(
|
|
3689
3597
|
"text",
|
|
3690
3598
|
{
|
|
3691
3599
|
x: textX,
|
|
3692
|
-
y: textY +
|
|
3600
|
+
y: textY + 1,
|
|
3693
3601
|
fill: textColor,
|
|
3694
|
-
fontSize:
|
|
3602
|
+
fontSize: 10,
|
|
3695
3603
|
fontWeight: 700,
|
|
3696
3604
|
textAnchor: "middle",
|
|
3697
3605
|
dominantBaseline: "central",
|
|
@@ -3703,324 +3611,216 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
|
|
|
3703
3611
|
};
|
|
3704
3612
|
};
|
|
3705
3613
|
var pillLabelRenderer_default = renderPillLabel;
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
const
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
}
|
|
3717
|
-
}
|
|
3718
|
-
return max;
|
|
3719
|
-
}
|
|
3720
|
-
function minForKeys(processedData, keys) {
|
|
3721
|
-
let min = 0;
|
|
3722
|
-
for (const row of processedData) {
|
|
3723
|
-
const r = row;
|
|
3724
|
-
for (const key of keys) {
|
|
3725
|
-
const v = r[key];
|
|
3726
|
-
if (typeof v === "number" && Number.isFinite(v) && v < min)
|
|
3727
|
-
min = v;
|
|
3728
|
-
}
|
|
3729
|
-
}
|
|
3730
|
-
return min;
|
|
3731
|
-
}
|
|
3732
|
-
|
|
3733
|
-
// src/components/charts/utils/formatters.ts
|
|
3734
|
-
var TITLE_CLASSNAME = "text-xl font-semibold text-foreground mb-3";
|
|
3735
|
-
function buildPercentFormatter(decimals = 0) {
|
|
3736
|
-
return (v) => {
|
|
3737
|
-
const n = Number(String(v));
|
|
3738
|
-
if (Number.isNaN(n)) return String(v ?? "");
|
|
3739
|
-
const value = Math.abs(n) <= 1 ? n * 100 : n;
|
|
3740
|
-
return `${value.toFixed(decimals)}%`;
|
|
3741
|
-
};
|
|
3742
|
-
}
|
|
3743
|
-
function createFinalValueFormatter(valueFormatter2, formatBR) {
|
|
3744
|
-
const nf = new Intl.NumberFormat("pt-BR", {
|
|
3745
|
-
minimumFractionDigits: 2,
|
|
3746
|
-
maximumFractionDigits: 2
|
|
3747
|
-
});
|
|
3748
|
-
if (valueFormatter2) {
|
|
3749
|
-
if (formatBR) {
|
|
3750
|
-
const wrapped = (props) => {
|
|
3751
|
-
const { value, formattedValue } = props;
|
|
3752
|
-
let num = NaN;
|
|
3753
|
-
if (typeof value === "number") num = value;
|
|
3754
|
-
else if (typeof value === "string" && value.trim() !== "") {
|
|
3755
|
-
const parsed = Number(value);
|
|
3756
|
-
num = Number.isNaN(parsed) ? NaN : parsed;
|
|
3757
|
-
}
|
|
3758
|
-
const brFormatted = !Number.isNaN(num) ? nf.format(num) : String(formattedValue ?? value ?? "");
|
|
3759
|
-
return valueFormatter2({
|
|
3760
|
-
...props,
|
|
3761
|
-
formattedValue: brFormatted,
|
|
3762
|
-
value: void 0
|
|
3763
|
-
});
|
|
3764
|
-
};
|
|
3765
|
-
return wrapped;
|
|
3766
|
-
}
|
|
3767
|
-
return valueFormatter2;
|
|
3768
|
-
}
|
|
3769
|
-
if (!formatBR) return void 0;
|
|
3770
|
-
const builtIn = (props) => {
|
|
3771
|
-
const { value, formattedValue } = props;
|
|
3772
|
-
let num = NaN;
|
|
3773
|
-
if (typeof value === "number") num = value;
|
|
3774
|
-
else if (typeof value === "string" && value.trim() !== "") {
|
|
3775
|
-
const parsed = Number(value);
|
|
3776
|
-
num = Number.isNaN(parsed) ? NaN : parsed;
|
|
3777
|
-
}
|
|
3778
|
-
if (!Number.isNaN(num)) return String(nf.format(num));
|
|
3779
|
-
return String(formattedValue ?? value ?? "");
|
|
3780
|
-
};
|
|
3781
|
-
return builtIn;
|
|
3782
|
-
}
|
|
3783
|
-
function createYTickFormatter(finalValueFormatter) {
|
|
3784
|
-
const nf = new Intl.NumberFormat("pt-BR", {
|
|
3785
|
-
minimumFractionDigits: 2,
|
|
3786
|
-
maximumFractionDigits: 2
|
|
3787
|
-
});
|
|
3788
|
-
const stripCurrency = (s) => String(s).replace(/^\s*R\$\s?/, "");
|
|
3789
|
-
if (finalValueFormatter) {
|
|
3790
|
-
return (v) => {
|
|
3791
|
-
const num = Number(String(v));
|
|
3792
|
-
const formatted = Number.isNaN(num) ? String(v ?? "") : nf.format(num);
|
|
3793
|
-
const out = finalValueFormatter({
|
|
3794
|
-
value: v,
|
|
3795
|
-
formattedValue: formatted
|
|
3796
|
-
});
|
|
3797
|
-
return stripCurrency(String(out));
|
|
3614
|
+
var renderInsideBarLabel = (color, valueFormatter2) => {
|
|
3615
|
+
return (props) => {
|
|
3616
|
+
const { x, y, value, width, height, viewBox, cx, cy, index } = props;
|
|
3617
|
+
const defaultFormatted = typeof value === "number" ? formatCompactNumber(value) : String(value ?? "");
|
|
3618
|
+
const text = valueFormatter2 ? valueFormatter2({ value, formattedValue: defaultFormatted, ...props }) : defaultFormatted;
|
|
3619
|
+
const parseNumberLocal = (v) => {
|
|
3620
|
+
if (typeof v === "number") return v;
|
|
3621
|
+
if (typeof v === "string" && v.trim() !== "" && !Number.isNaN(Number(v)))
|
|
3622
|
+
return Number(v);
|
|
3623
|
+
return void 0;
|
|
3798
3624
|
};
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
const
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
}
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
|
|
3819
|
-
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
else if (typeof
|
|
3823
|
-
|
|
3824
|
-
else
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
} else {
|
|
3855
|
-
Object.keys(mapperConfig).forEach(
|
|
3856
|
-
(k) => seriesOrder.push({ type: "bar", key: k })
|
|
3625
|
+
const px = parseNumberLocal(x);
|
|
3626
|
+
const py = parseNumberLocal(y);
|
|
3627
|
+
const pWidth = parseNumberLocal(width);
|
|
3628
|
+
const pHeight = parseNumberLocal(height);
|
|
3629
|
+
const cxNum = parseNumberLocal(cx);
|
|
3630
|
+
const vb = viewBox;
|
|
3631
|
+
let centerX;
|
|
3632
|
+
if (typeof px === "number" && typeof pWidth === "number") {
|
|
3633
|
+
centerX = px + pWidth / 2;
|
|
3634
|
+
} else if (typeof cxNum === "number") {
|
|
3635
|
+
centerX = cxNum;
|
|
3636
|
+
} else if (vb && typeof vb.x === "number" && typeof vb.width === "number") {
|
|
3637
|
+
const approxCols = Math.max(1, index + 1);
|
|
3638
|
+
const colWidth = vb.width / approxCols;
|
|
3639
|
+
centerX = (vb.x ?? 0) + colWidth * (index + 0.5);
|
|
3640
|
+
} else {
|
|
3641
|
+
centerX = typeof index === "number" ? index * 40 + 24 : 0;
|
|
3642
|
+
}
|
|
3643
|
+
let centerY;
|
|
3644
|
+
if (typeof py === "number" && typeof pHeight === "number") {
|
|
3645
|
+
centerY = py + pHeight / 2;
|
|
3646
|
+
} else if (typeof cy === "number") {
|
|
3647
|
+
centerY = cy;
|
|
3648
|
+
} else if (vb && typeof vb.y === "number" && typeof vb.height === "number") {
|
|
3649
|
+
centerY = (vb.y ?? 0) + (vb.height ?? 0) / 2;
|
|
3650
|
+
} else {
|
|
3651
|
+
centerY = 0;
|
|
3652
|
+
}
|
|
3653
|
+
const baseFontSize = 10;
|
|
3654
|
+
let fontSize = baseFontSize;
|
|
3655
|
+
if (typeof pWidth === "number") {
|
|
3656
|
+
const padding = 7;
|
|
3657
|
+
const approxCharWidth = 7;
|
|
3658
|
+
const requiredWidth = String(text).length * approxCharWidth + padding * 2;
|
|
3659
|
+
const widthScale = Math.min(1, pWidth / Math.max(1, requiredWidth));
|
|
3660
|
+
fontSize = Math.max(1, Math.round(baseFontSize * widthScale));
|
|
3661
|
+
}
|
|
3662
|
+
if (typeof pHeight === "number") {
|
|
3663
|
+
const heightRef = 14;
|
|
3664
|
+
const heightFactor = Math.max(0.8, Math.min(1.6, pHeight / heightRef));
|
|
3665
|
+
fontSize = Math.min(18, Math.max(8, Math.round(fontSize * heightFactor)));
|
|
3666
|
+
}
|
|
3667
|
+
return /* @__PURE__ */ jsx27(
|
|
3668
|
+
"text",
|
|
3669
|
+
{
|
|
3670
|
+
x: centerX,
|
|
3671
|
+
y: centerY,
|
|
3672
|
+
fill: "#ffffff",
|
|
3673
|
+
fontSize,
|
|
3674
|
+
fontWeight: 700,
|
|
3675
|
+
textAnchor: "middle",
|
|
3676
|
+
dominantBaseline: "central",
|
|
3677
|
+
style: { pointerEvents: "none" },
|
|
3678
|
+
children: text
|
|
3679
|
+
}
|
|
3857
3680
|
);
|
|
3858
|
-
}
|
|
3859
|
-
return seriesOrder;
|
|
3860
|
-
}
|
|
3861
|
-
function computeProcessedData(data, xAxisKey) {
|
|
3862
|
-
return data.map((item) => ({
|
|
3863
|
-
...item,
|
|
3864
|
-
name: String(item[xAxisKey] ?? "N/A")
|
|
3865
|
-
}));
|
|
3866
|
-
}
|
|
3867
|
-
function computeAllKeys(seriesOrder) {
|
|
3868
|
-
return seriesOrder.map((s) => s.key).filter(Boolean);
|
|
3869
|
-
}
|
|
3870
|
-
function computeLeftRightKeys(allKeys, yAxisMap) {
|
|
3871
|
-
const normalize = (v) => {
|
|
3872
|
-
if (v === "left" || v === "right") return v;
|
|
3873
|
-
if (v === 1 || v === "1" || v === true) return "right";
|
|
3874
|
-
return "left";
|
|
3875
3681
|
};
|
|
3876
|
-
|
|
3877
|
-
const rightKeys = !yAxisMap ? [] : allKeys.filter((k) => normalize(yAxisMap?.[k]) === "right");
|
|
3878
|
-
return { leftKeys, rightKeys };
|
|
3879
|
-
}
|
|
3880
|
-
function computeNiceMax(value) {
|
|
3881
|
-
let padding = 0.08;
|
|
3882
|
-
if (value > 1e6) padding = 0.05;
|
|
3883
|
-
if (value > 1e7) padding = 0.03;
|
|
3884
|
-
if (value === 0) padding = 0.12;
|
|
3885
|
-
const padded = value * (1 + padding);
|
|
3886
|
-
return padded;
|
|
3887
|
-
}
|
|
3888
|
-
function computeChartWidth(dataLength, seriesCounts, niceMax, opts) {
|
|
3889
|
-
const basePerPoint = 60;
|
|
3890
|
-
const perBarExtra = seriesCounts.bar > 0 ? Math.max(0, seriesCounts.bar - 1) * 8 : 0;
|
|
3891
|
-
const perOtherExtra = (seriesCounts.line + seriesCounts.area) * 4;
|
|
3892
|
-
let sizeFactor = 1;
|
|
3893
|
-
if (niceMax > 1e5) sizeFactor = 1.1;
|
|
3894
|
-
if (niceMax > 1e6) sizeFactor = 1.2;
|
|
3895
|
-
if (niceMax > 1e7) sizeFactor = 1.3;
|
|
3896
|
-
const perPoint = Math.round(
|
|
3897
|
-
(basePerPoint + perBarExtra + perOtherExtra) * sizeFactor
|
|
3898
|
-
);
|
|
3899
|
-
const marginExtra = 120;
|
|
3900
|
-
const calculated = Math.max(1, dataLength) * perPoint + marginExtra;
|
|
3901
|
-
const minWidth = opts?.minWidth ?? 300;
|
|
3902
|
-
const maxWidth = opts?.maxWidth ?? 1800;
|
|
3903
|
-
return Math.max(minWidth, Math.min(maxWidth, calculated));
|
|
3904
|
-
}
|
|
3905
|
-
function computeLabelSample(keys, candidates, yTickFormatter) {
|
|
3906
|
-
if (!keys || keys.length === 0) return "";
|
|
3907
|
-
return String(
|
|
3908
|
-
candidates.map((v) => yTickFormatter(v)).sort((a, b) => String(b).length - String(a).length)[0] ?? ""
|
|
3909
|
-
);
|
|
3910
|
-
}
|
|
3911
|
-
function computeEstimatedAxisNeeded(labelSample, axisLabel, containerPaddingLeft = 16, defaultLeftMargin = 0) {
|
|
3912
|
-
const tickW = labelSample ? estimateTextWidth(labelSample) : 0;
|
|
3913
|
-
const axisW = axisLabel ? estimateTextWidth(axisLabel) + 8 : 0;
|
|
3914
|
-
return Math.max(
|
|
3915
|
-
defaultLeftMargin,
|
|
3916
|
-
Math.ceil(tickW + axisW + containerPaddingLeft / 2)
|
|
3917
|
-
);
|
|
3918
|
-
}
|
|
3919
|
-
function computeAxisLabelWidth(label) {
|
|
3920
|
-
return label ? estimateTextWidth(label) : 0;
|
|
3921
|
-
}
|
|
3922
|
-
|
|
3923
|
-
// src/components/charts/hooks/useMeasureWidth.ts
|
|
3924
|
-
import { useLayoutEffect, useRef as useRef3, useState as useState7 } from "react";
|
|
3925
|
-
function useMeasureWidth() {
|
|
3926
|
-
const wrapperRef = useRef3(null);
|
|
3927
|
-
const [measuredWidth, setMeasuredWidth] = useState7(null);
|
|
3928
|
-
useLayoutEffect(() => {
|
|
3929
|
-
const el = wrapperRef.current;
|
|
3930
|
-
if (!el) return;
|
|
3931
|
-
const ro = new ResizeObserver((entries) => {
|
|
3932
|
-
const r = entries[0];
|
|
3933
|
-
if (r && typeof r.contentRect.width === "number") {
|
|
3934
|
-
setMeasuredWidth(Math.round(r.contentRect.width));
|
|
3935
|
-
}
|
|
3936
|
-
});
|
|
3937
|
-
ro.observe(el);
|
|
3938
|
-
setMeasuredWidth(Math.round(el.getBoundingClientRect().width));
|
|
3939
|
-
return () => ro.disconnect();
|
|
3940
|
-
}, []);
|
|
3941
|
-
return { wrapperRef, measuredWidth };
|
|
3942
|
-
}
|
|
3682
|
+
};
|
|
3943
3683
|
|
|
3944
|
-
// src/components/charts/
|
|
3945
|
-
import {
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
const defaultChartRightMargin = 30;
|
|
3964
|
-
const defaultChartLeftMargin = 0;
|
|
3965
|
-
const computedWidth = useMemo5(() => {
|
|
3966
|
-
if (typeof width === "number") return width;
|
|
3967
|
-
return computeChartWidth(points, seriesCounts, niceMax, {
|
|
3968
|
-
minWidth: 300,
|
|
3969
|
-
maxWidth: 1800
|
|
3970
|
-
});
|
|
3971
|
-
}, [
|
|
3972
|
-
width,
|
|
3973
|
-
points,
|
|
3974
|
-
seriesCounts.bar,
|
|
3975
|
-
seriesCounts.line,
|
|
3976
|
-
seriesCounts.area,
|
|
3977
|
-
niceMax
|
|
3978
|
-
]);
|
|
3979
|
-
const measuredInner = measuredWidth ? Math.max(0, measuredWidth - 32) : void 0;
|
|
3980
|
-
const effectiveChartWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
|
|
3981
|
-
const estimatedLeftNeeded = computeEstimatedAxisNeeded(
|
|
3982
|
-
leftLabelSample ?? "",
|
|
3983
|
-
yAxisLabel,
|
|
3984
|
-
containerPaddingLeft,
|
|
3985
|
-
defaultChartLeftMargin
|
|
3986
|
-
);
|
|
3987
|
-
const estimatedRightNeeded = computeEstimatedAxisNeeded(
|
|
3988
|
-
rightLabelSample ?? "",
|
|
3989
|
-
yAxes?.right?.label,
|
|
3990
|
-
containerPaddingLeft,
|
|
3991
|
-
defaultChartRightMargin
|
|
3992
|
-
);
|
|
3993
|
-
const finalChartLeftMargin = chartMargin?.left ?? Math.max(estimatedLeftNeeded, yAxisLabel ? 40 : defaultChartLeftMargin);
|
|
3994
|
-
const finalChartRightMargin = chartMargin?.right ?? Math.max(defaultChartRightMargin, estimatedRightNeeded);
|
|
3995
|
-
const finalChartTopMargin = chartMargin?.top ?? (showLabels ? 48 : 20);
|
|
3996
|
-
const baseBottom = chartMargin?.bottom ?? 5;
|
|
3997
|
-
const extraForXAxisLabel = xAxisLabel ? 22 : 0;
|
|
3998
|
-
const extraForLegend = showLegend ? 36 : 0;
|
|
3999
|
-
const finalChartBottomMargin = baseBottom + extraForXAxisLabel + extraForLegend;
|
|
4000
|
-
const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
|
|
4001
|
-
const leftAxisLabelWidth = computeAxisLabelWidth(
|
|
4002
|
-
yAxes?.left?.label ?? yAxisLabel
|
|
4003
|
-
);
|
|
4004
|
-
const rightAxisLabelWidth = computeAxisLabelWidth(yAxes?.right?.label);
|
|
4005
|
-
const leftYAxisLabelDx = Math.ceil(leftAxisLabelWidth / 2) + 8;
|
|
4006
|
-
const rightYAxisLabelDx = Math.ceil(rightAxisLabelWidth / 2) + 8;
|
|
4007
|
-
return {
|
|
4008
|
-
containerPaddingLeft,
|
|
4009
|
-
computedWidth,
|
|
4010
|
-
measuredInner,
|
|
4011
|
-
effectiveChartWidth,
|
|
4012
|
-
chartInnerWidth,
|
|
4013
|
-
finalChartLeftMargin,
|
|
4014
|
-
finalChartRightMargin,
|
|
4015
|
-
finalChartTopMargin,
|
|
4016
|
-
finalChartBottomMargin,
|
|
4017
|
-
leftYAxisLabelDx,
|
|
4018
|
-
rightYAxisLabelDx
|
|
3684
|
+
// src/components/charts/NoData.tsx
|
|
3685
|
+
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
3686
|
+
var NoData = ({
|
|
3687
|
+
paddingLeft = 0,
|
|
3688
|
+
height = 360,
|
|
3689
|
+
message = "Sem dados para exibir",
|
|
3690
|
+
className
|
|
3691
|
+
}) => {
|
|
3692
|
+
const svgHeight = typeof height === "number" ? height : 360;
|
|
3693
|
+
const bars = [
|
|
3694
|
+
{ x: 120, w: 120, h: svgHeight * 0.45, label: "Label 0" },
|
|
3695
|
+
{ x: 260, w: 120, h: svgHeight * 0.75, label: "Label 1" },
|
|
3696
|
+
{ x: 400, w: 120, h: svgHeight * 0.65, label: "Label 2" },
|
|
3697
|
+
{ x: 540, w: 120, h: svgHeight * 0.55, label: "Label 3" },
|
|
3698
|
+
{ x: 680, w: 120, h: svgHeight * 0.25, label: "Label 4" }
|
|
3699
|
+
];
|
|
3700
|
+
const styleVars = {
|
|
3701
|
+
["--pl"]: `${paddingLeft}px`,
|
|
3702
|
+
["--svg-h"]: typeof height === "number" ? `${height}px` : String(height)
|
|
4019
3703
|
};
|
|
4020
|
-
|
|
3704
|
+
return /* @__PURE__ */ jsx28(
|
|
3705
|
+
"div",
|
|
3706
|
+
{
|
|
3707
|
+
className: cn(
|
|
3708
|
+
"rounded-lg bg-card p-3 relative overflow-visible w-full",
|
|
3709
|
+
className
|
|
3710
|
+
),
|
|
3711
|
+
style: styleVars,
|
|
3712
|
+
role: "img",
|
|
3713
|
+
"aria-label": message,
|
|
3714
|
+
children: /* @__PURE__ */ jsx28("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] pr-3 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxs23("div", { className: "w-full max-w-[900px] relative", children: [
|
|
3715
|
+
/* @__PURE__ */ jsxs23(
|
|
3716
|
+
"svg",
|
|
3717
|
+
{
|
|
3718
|
+
className: "w-full h-[var(--svg-h)]",
|
|
3719
|
+
width: "100%",
|
|
3720
|
+
viewBox: `0 0 900 ${svgHeight}`,
|
|
3721
|
+
preserveAspectRatio: "none",
|
|
3722
|
+
children: [
|
|
3723
|
+
/* @__PURE__ */ jsxs23("defs", { children: [
|
|
3724
|
+
/* @__PURE__ */ jsxs23("linearGradient", { id: "barGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
|
|
3725
|
+
/* @__PURE__ */ jsx28("stop", { offset: "0%", stopColor: "#60a5fa", stopOpacity: "0.95" }),
|
|
3726
|
+
"= "
|
|
3727
|
+
] }),
|
|
3728
|
+
/* @__PURE__ */ jsx28(
|
|
3729
|
+
"filter",
|
|
3730
|
+
{
|
|
3731
|
+
id: "softShadow",
|
|
3732
|
+
x: "-20%",
|
|
3733
|
+
y: "-20%",
|
|
3734
|
+
width: "140%",
|
|
3735
|
+
height: "140%",
|
|
3736
|
+
children: /* @__PURE__ */ jsx28(
|
|
3737
|
+
"feDropShadow",
|
|
3738
|
+
{
|
|
3739
|
+
dx: "0",
|
|
3740
|
+
dy: "6",
|
|
3741
|
+
stdDeviation: "8",
|
|
3742
|
+
floodColor: "#0f172a",
|
|
3743
|
+
floodOpacity: "0.06"
|
|
3744
|
+
}
|
|
3745
|
+
)
|
|
3746
|
+
}
|
|
3747
|
+
)
|
|
3748
|
+
] }),
|
|
3749
|
+
/* @__PURE__ */ jsx28(
|
|
3750
|
+
"rect",
|
|
3751
|
+
{
|
|
3752
|
+
x: 0,
|
|
3753
|
+
y: 0,
|
|
3754
|
+
width: 900,
|
|
3755
|
+
height: svgHeight,
|
|
3756
|
+
fill: "transparent"
|
|
3757
|
+
}
|
|
3758
|
+
),
|
|
3759
|
+
Array.from({ length: 5 }).map((_, i) => {
|
|
3760
|
+
const y = 40 + (svgHeight - 80) / 4 * i;
|
|
3761
|
+
return /* @__PURE__ */ jsx28(
|
|
3762
|
+
"line",
|
|
3763
|
+
{
|
|
3764
|
+
x1: 60,
|
|
3765
|
+
x2: 840,
|
|
3766
|
+
y1: y,
|
|
3767
|
+
y2: y,
|
|
3768
|
+
stroke: "rgba(15,23,42,0.06)",
|
|
3769
|
+
strokeWidth: 1
|
|
3770
|
+
},
|
|
3771
|
+
`g-${i}`
|
|
3772
|
+
);
|
|
3773
|
+
}),
|
|
3774
|
+
bars.map((b, i) => /* @__PURE__ */ jsxs23("g", { children: [
|
|
3775
|
+
/* @__PURE__ */ jsx28(
|
|
3776
|
+
"rect",
|
|
3777
|
+
{
|
|
3778
|
+
x: b.x,
|
|
3779
|
+
y: svgHeight - 60 - b.h,
|
|
3780
|
+
width: b.w,
|
|
3781
|
+
height: b.h,
|
|
3782
|
+
rx: 8,
|
|
3783
|
+
fill: "url(#barGradient)",
|
|
3784
|
+
filter: "url(#softShadow)",
|
|
3785
|
+
opacity: 0.95
|
|
3786
|
+
}
|
|
3787
|
+
),
|
|
3788
|
+
/* @__PURE__ */ jsx28(
|
|
3789
|
+
"rect",
|
|
3790
|
+
{
|
|
3791
|
+
x: b.x,
|
|
3792
|
+
y: svgHeight - 60 - b.h,
|
|
3793
|
+
width: b.w,
|
|
3794
|
+
height: b.h,
|
|
3795
|
+
rx: 8,
|
|
3796
|
+
fill: "none",
|
|
3797
|
+
stroke: "rgba(15,23,42,0.06)"
|
|
3798
|
+
}
|
|
3799
|
+
),
|
|
3800
|
+
/* @__PURE__ */ jsx28(
|
|
3801
|
+
"text",
|
|
3802
|
+
{
|
|
3803
|
+
x: b.x + b.w / 2,
|
|
3804
|
+
y: svgHeight - 20,
|
|
3805
|
+
fill: "rgba(15,23,42,0.45)",
|
|
3806
|
+
fontSize: 12,
|
|
3807
|
+
textAnchor: "middle",
|
|
3808
|
+
children: b.label
|
|
3809
|
+
}
|
|
3810
|
+
)
|
|
3811
|
+
] }, `barg-${i}`))
|
|
3812
|
+
]
|
|
3813
|
+
}
|
|
3814
|
+
),
|
|
3815
|
+
/* @__PURE__ */ jsx28("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ jsx28("div", { className: "pointer-events-auto bg-transparent px-3 text-center", children: /* @__PURE__ */ jsx28("div", { className: "text-2xl sm:text-3xl font-semibold text-black", children: message }) }) })
|
|
3816
|
+
] }) })
|
|
3817
|
+
}
|
|
3818
|
+
);
|
|
3819
|
+
};
|
|
3820
|
+
var NoData_default = NoData;
|
|
4021
3821
|
|
|
4022
3822
|
// src/components/charts/Chart.tsx
|
|
4023
|
-
import {
|
|
3823
|
+
import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
4024
3824
|
var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
|
|
4025
3825
|
var Chart = ({
|
|
4026
3826
|
data,
|
|
@@ -4037,6 +3837,7 @@ var Chart = ({
|
|
|
4037
3837
|
titlePosition = "left",
|
|
4038
3838
|
showLabels = false,
|
|
4039
3839
|
xAxis,
|
|
3840
|
+
biaxial,
|
|
4040
3841
|
xAxisLabel,
|
|
4041
3842
|
yAxisLabel,
|
|
4042
3843
|
labelMap,
|
|
@@ -4047,14 +3848,12 @@ var Chart = ({
|
|
|
4047
3848
|
enablePeriodsDropdown = false,
|
|
4048
3849
|
enableDraggableTooltips = false,
|
|
4049
3850
|
showTooltipTotal = false,
|
|
3851
|
+
periodLabel = "Per\xEDodo",
|
|
4050
3852
|
maxTooltips = 5,
|
|
4051
3853
|
formatBR = false,
|
|
4052
|
-
chartMargin
|
|
4053
|
-
yAxisMap,
|
|
4054
|
-
yAxes,
|
|
4055
|
-
periodLabel = "Per\xEDodo"
|
|
3854
|
+
chartMargin
|
|
4056
3855
|
}) => {
|
|
4057
|
-
const smartConfig =
|
|
3856
|
+
const smartConfig = useMemo5(() => {
|
|
4058
3857
|
const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
|
|
4059
3858
|
const xAxisConfig2 = typeof xAxis === "string" ? {
|
|
4060
3859
|
dataKey: resolvedXAxisKey,
|
|
@@ -4078,34 +3877,98 @@ var Chart = ({
|
|
|
4078
3877
|
return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
|
|
4079
3878
|
}, [data, xAxis, labelMap]);
|
|
4080
3879
|
const { xAxisConfig, mapperConfig } = smartConfig;
|
|
4081
|
-
const [activeTooltips, setActiveTooltips] =
|
|
4082
|
-
const [highlightedSeries, setHighlightedSeries] =
|
|
3880
|
+
const [activeTooltips, setActiveTooltips] = useState7([]);
|
|
3881
|
+
const [highlightedSeries, setHighlightedSeries] = useState7(
|
|
4083
3882
|
/* @__PURE__ */ new Set()
|
|
4084
3883
|
);
|
|
4085
|
-
const [showOnlyHighlighted, setShowOnlyHighlighted] =
|
|
3884
|
+
const [showOnlyHighlighted, setShowOnlyHighlighted] = useState7(false);
|
|
4086
3885
|
useEffect5(() => {
|
|
4087
3886
|
if (highlightedSeries.size === 0 && showOnlyHighlighted) {
|
|
4088
3887
|
setShowOnlyHighlighted(false);
|
|
4089
3888
|
}
|
|
4090
3889
|
}, [highlightedSeries, showOnlyHighlighted]);
|
|
4091
|
-
const processedData =
|
|
4092
|
-
|
|
4093
|
-
xAxisConfig.dataKey
|
|
4094
|
-
);
|
|
4095
|
-
const
|
|
4096
|
-
const
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
()
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
|
|
3890
|
+
const processedData = data.map((item) => ({
|
|
3891
|
+
...item,
|
|
3892
|
+
name: String(item[xAxisConfig.dataKey] || "N/A")
|
|
3893
|
+
}));
|
|
3894
|
+
const wrapperRef = useRef3(null);
|
|
3895
|
+
const [measuredWidth, setMeasuredWidth] = useState7(null);
|
|
3896
|
+
useLayoutEffect(() => {
|
|
3897
|
+
const el = wrapperRef.current;
|
|
3898
|
+
if (!el) return;
|
|
3899
|
+
const ro = new ResizeObserver((entries) => {
|
|
3900
|
+
const r = entries[0];
|
|
3901
|
+
if (r && typeof r.contentRect.width === "number") {
|
|
3902
|
+
setMeasuredWidth(Math.round(r.contentRect.width));
|
|
3903
|
+
}
|
|
3904
|
+
});
|
|
3905
|
+
ro.observe(el);
|
|
3906
|
+
setMeasuredWidth(Math.round(el.getBoundingClientRect().width));
|
|
3907
|
+
return () => ro.disconnect();
|
|
3908
|
+
}, []);
|
|
3909
|
+
const seriesOrder = [];
|
|
3910
|
+
if (series) {
|
|
3911
|
+
if (series.bar)
|
|
3912
|
+
series.bar.forEach((k) => seriesOrder.push({ type: "bar", key: k }));
|
|
3913
|
+
if (series.line)
|
|
3914
|
+
series.line.forEach((k) => seriesOrder.push({ type: "line", key: k }));
|
|
3915
|
+
if (series.area)
|
|
3916
|
+
series.area.forEach((k) => seriesOrder.push({ type: "area", key: k }));
|
|
3917
|
+
} else {
|
|
3918
|
+
Object.keys(mapperConfig).forEach(
|
|
3919
|
+
(k) => seriesOrder.push({ type: "bar", key: k })
|
|
3920
|
+
);
|
|
3921
|
+
}
|
|
3922
|
+
const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
|
|
3923
|
+
const generateColors = useCallback5(
|
|
3924
|
+
(dataKeys) => {
|
|
3925
|
+
const colorMap = {};
|
|
3926
|
+
const allColors = generateAdditionalColors(colors2, dataKeys.length);
|
|
3927
|
+
dataKeys.forEach((key, index) => {
|
|
3928
|
+
colorMap[key] = mapperConfig[key]?.color || allColors[index] || colors2[index % colors2.length];
|
|
3929
|
+
});
|
|
3930
|
+
return colorMap;
|
|
3931
|
+
},
|
|
3932
|
+
[colors2, mapperConfig]
|
|
3933
|
+
);
|
|
3934
|
+
const finalColors = useMemo5(
|
|
3935
|
+
() => generateColors(allKeys),
|
|
3936
|
+
[generateColors, allKeys]
|
|
3937
|
+
);
|
|
3938
|
+
const biaxialConfigNormalized = useMemo5(() => {
|
|
3939
|
+
if (!biaxial) return null;
|
|
3940
|
+
if (typeof biaxial === "string") return { key: [biaxial] };
|
|
3941
|
+
if (Array.isArray(biaxial)) return { key: biaxial };
|
|
3942
|
+
return biaxial;
|
|
3943
|
+
}, [biaxial]);
|
|
3944
|
+
useMemo5(() => {
|
|
3945
|
+
if (!biaxialConfigNormalized) return;
|
|
3946
|
+
const leftLabelMissing = !yAxisLabel || String(yAxisLabel).trim() === "";
|
|
3947
|
+
const rightLabelMissing = !biaxialConfigNormalized.label || String(biaxialConfigNormalized.label).trim() === "";
|
|
3948
|
+
if (leftLabelMissing || rightLabelMissing) {
|
|
3949
|
+
throw new Error(
|
|
3950
|
+
"When using `biaxial`, you must provide both `yAxisLabel` (left axis) and `biaxial.label` (right axis)."
|
|
3951
|
+
);
|
|
3952
|
+
}
|
|
3953
|
+
}, [biaxialConfigNormalized, yAxisLabel]);
|
|
3954
|
+
const rightKeys = useMemo5(
|
|
3955
|
+
() => biaxialConfigNormalized?.key ?? [],
|
|
3956
|
+
[biaxialConfigNormalized]
|
|
3957
|
+
);
|
|
3958
|
+
const leftKeys = useMemo5(
|
|
3959
|
+
() => allKeys.filter((k) => !rightKeys.includes(k)),
|
|
3960
|
+
[allKeys, rightKeys]
|
|
3961
|
+
);
|
|
3962
|
+
const adaptDataForTooltip = useCallback5(
|
|
3963
|
+
(universalData) => ({
|
|
3964
|
+
...universalData,
|
|
3965
|
+
name: String(universalData[xAxisConfig.dataKey] || "N/A")
|
|
3966
|
+
}),
|
|
4104
3967
|
[xAxisConfig.dataKey]
|
|
4105
3968
|
);
|
|
4106
|
-
const activePeriods =
|
|
4107
|
-
() => activeTooltips.map((t) =>
|
|
4108
|
-
[activeTooltips,
|
|
3969
|
+
const activePeriods = useMemo5(
|
|
3970
|
+
() => activeTooltips.map((t) => adaptDataForTooltip(t.data).name),
|
|
3971
|
+
[activeTooltips, adaptDataForTooltip]
|
|
4109
3972
|
);
|
|
4110
3973
|
useEffect5(() => {
|
|
4111
3974
|
window.dispatchEvent(new Event("recountTooltips"));
|
|
@@ -4118,46 +3981,103 @@ var Chart = ({
|
|
|
4118
3981
|
return next;
|
|
4119
3982
|
});
|
|
4120
3983
|
}, []);
|
|
4121
|
-
const
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
|
|
4128
|
-
|
|
4129
|
-
|
|
4130
|
-
|
|
4131
|
-
|
|
4132
|
-
);
|
|
4133
|
-
const
|
|
4134
|
-
|
|
4135
|
-
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
4142
|
-
|
|
4143
|
-
|
|
4144
|
-
|
|
4145
|
-
|
|
4146
|
-
|
|
4147
|
-
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
|
|
4152
|
-
|
|
4153
|
-
|
|
4154
|
-
|
|
4155
|
-
|
|
3984
|
+
const maxLeftDataValue = useMemo5(() => {
|
|
3985
|
+
let max = 0;
|
|
3986
|
+
const numericKeys = leftKeys.length > 0 ? leftKeys : allKeys;
|
|
3987
|
+
for (const row of processedData) {
|
|
3988
|
+
const r = row;
|
|
3989
|
+
for (const key of numericKeys) {
|
|
3990
|
+
const v = r[key];
|
|
3991
|
+
if (typeof v === "number" && Number.isFinite(v) && v > max) max = v;
|
|
3992
|
+
}
|
|
3993
|
+
}
|
|
3994
|
+
return max;
|
|
3995
|
+
}, [processedData, leftKeys, allKeys]);
|
|
3996
|
+
const minLeftDataValue = useMemo5(() => {
|
|
3997
|
+
let min = 0;
|
|
3998
|
+
const numericKeys = leftKeys.length > 0 ? leftKeys : allKeys;
|
|
3999
|
+
for (const row of processedData) {
|
|
4000
|
+
const r = row;
|
|
4001
|
+
for (const key of numericKeys) {
|
|
4002
|
+
const v = r[key];
|
|
4003
|
+
if (typeof v === "number" && Number.isFinite(v) && v < min)
|
|
4004
|
+
min = v;
|
|
4005
|
+
}
|
|
4006
|
+
}
|
|
4007
|
+
return min;
|
|
4008
|
+
}, [processedData, leftKeys, allKeys]);
|
|
4009
|
+
const maxRightDataValue = useMemo5(() => {
|
|
4010
|
+
let max = 0;
|
|
4011
|
+
if (rightKeys.length === 0) return max;
|
|
4012
|
+
for (const row of processedData) {
|
|
4013
|
+
const r = row;
|
|
4014
|
+
for (const key of rightKeys) {
|
|
4015
|
+
const v = r[key];
|
|
4016
|
+
if (typeof v === "number" && Number.isFinite(v) && v > max) max = v;
|
|
4017
|
+
}
|
|
4018
|
+
}
|
|
4019
|
+
return max;
|
|
4020
|
+
}, [processedData, rightKeys]);
|
|
4021
|
+
const minRightDataValue = useMemo5(() => {
|
|
4022
|
+
let min = 0;
|
|
4023
|
+
if (rightKeys.length === 0) return min;
|
|
4024
|
+
for (const row of processedData) {
|
|
4025
|
+
const r = row;
|
|
4026
|
+
for (const key of rightKeys) {
|
|
4027
|
+
const v = r[key];
|
|
4028
|
+
if (typeof v === "number" && Number.isFinite(v) && v < min)
|
|
4029
|
+
min = v;
|
|
4030
|
+
}
|
|
4031
|
+
}
|
|
4032
|
+
return min;
|
|
4033
|
+
}, [processedData, rightKeys]);
|
|
4034
|
+
const computeNiceMax = useCallback5((maxValue) => {
|
|
4035
|
+
let padding = 0.08;
|
|
4036
|
+
if (maxValue > 1e6) padding = 0.05;
|
|
4037
|
+
if (maxValue > 1e7) padding = 0.03;
|
|
4038
|
+
if (maxValue === 0) padding = 0.12;
|
|
4039
|
+
const padded = maxValue * (1 + padding);
|
|
4040
|
+
return niceCeil(padded);
|
|
4041
|
+
}, []);
|
|
4042
|
+
const niceMaxLeft = useMemo5(
|
|
4043
|
+
() => computeNiceMax(maxLeftDataValue),
|
|
4044
|
+
[computeNiceMax, maxLeftDataValue]
|
|
4156
4045
|
);
|
|
4157
|
-
const
|
|
4158
|
-
() =>
|
|
4159
|
-
[
|
|
4046
|
+
const niceMaxRight = useMemo5(
|
|
4047
|
+
() => computeNiceMax(maxRightDataValue),
|
|
4048
|
+
[computeNiceMax, maxRightDataValue]
|
|
4160
4049
|
);
|
|
4050
|
+
const computedWidth = useMemo5(() => {
|
|
4051
|
+
if (typeof width === "number") return width;
|
|
4052
|
+
const points = Math.max(1, processedData.length);
|
|
4053
|
+
const barCount = series?.bar?.length ?? 0;
|
|
4054
|
+
const lineCount = series?.line?.length ?? 0;
|
|
4055
|
+
const areaCount = series?.area?.length ?? 0;
|
|
4056
|
+
const basePerPoint = 60;
|
|
4057
|
+
const perBarExtra = barCount > 0 ? Math.max(0, barCount - 1) * 8 : 0;
|
|
4058
|
+
const perOtherExtra = (lineCount + areaCount) * 4;
|
|
4059
|
+
const overallNiceMax = Math.max(niceMaxLeft || 0, niceMaxRight || 0);
|
|
4060
|
+
let sizeFactor = 1;
|
|
4061
|
+
if (overallNiceMax > 1e5) sizeFactor = 1.1;
|
|
4062
|
+
if (overallNiceMax > 1e6) sizeFactor = 1.2;
|
|
4063
|
+
if (overallNiceMax > 1e7) sizeFactor = 1.3;
|
|
4064
|
+
const perPoint = Math.round(
|
|
4065
|
+
(basePerPoint + perBarExtra + perOtherExtra) * sizeFactor
|
|
4066
|
+
);
|
|
4067
|
+
const marginExtra = 120;
|
|
4068
|
+
const calculated = points * perPoint + marginExtra;
|
|
4069
|
+
const minWidth = 300;
|
|
4070
|
+
const maxWidth = 1800;
|
|
4071
|
+
return Math.max(minWidth, Math.min(maxWidth, calculated));
|
|
4072
|
+
}, [
|
|
4073
|
+
width,
|
|
4074
|
+
processedData.length,
|
|
4075
|
+
series?.bar?.length,
|
|
4076
|
+
series?.line?.length,
|
|
4077
|
+
series?.area?.length,
|
|
4078
|
+
niceMaxLeft,
|
|
4079
|
+
niceMaxRight
|
|
4080
|
+
]);
|
|
4161
4081
|
const toggleTooltip = useCallback5(
|
|
4162
4082
|
(tooltipId, data2, basePosition) => {
|
|
4163
4083
|
const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
|
|
@@ -4238,74 +4158,102 @@ var Chart = ({
|
|
|
4238
4158
|
},
|
|
4239
4159
|
[]
|
|
4240
4160
|
);
|
|
4241
|
-
const titleClassName =
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
[valueFormatter2, formatBR]
|
|
4245
|
-
);
|
|
4246
|
-
const yTickFormatter = useMemo6(
|
|
4247
|
-
() => createYTickFormatter(finalValueFormatter),
|
|
4248
|
-
[finalValueFormatter]
|
|
4249
|
-
);
|
|
4250
|
-
const finalEnableHighlights = enableHighlights;
|
|
4251
|
-
const finalEnableShowOnly = enableShowOnly;
|
|
4252
|
-
const finalEnablePeriodsDropdown = enablePeriodsDropdown && enableDraggableTooltips;
|
|
4253
|
-
const leftLabelSample = useMemo6(
|
|
4254
|
-
() => computeLabelSample(
|
|
4255
|
-
leftKeys,
|
|
4256
|
-
[maxLeft, minLeft, niceMaxLeft],
|
|
4257
|
-
yTickFormatter
|
|
4258
|
-
),
|
|
4259
|
-
[leftKeys, maxLeft, minLeft, niceMaxLeft, yTickFormatter]
|
|
4260
|
-
);
|
|
4261
|
-
const rightLabelSample = useMemo6(
|
|
4262
|
-
() => computeLabelSample(
|
|
4263
|
-
rightKeys,
|
|
4264
|
-
[maxRight, minRight, niceMaxRight],
|
|
4265
|
-
yTickFormatter
|
|
4266
|
-
),
|
|
4267
|
-
[rightKeys, maxRight, minRight, niceMaxRight, yTickFormatter]
|
|
4161
|
+
const titleClassName = useMemo5(
|
|
4162
|
+
() => "text-[1.4rem] font-semibold text-foreground mb-3",
|
|
4163
|
+
[]
|
|
4268
4164
|
);
|
|
4269
|
-
const {
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
|
|
4274
|
-
|
|
4275
|
-
|
|
4276
|
-
|
|
4277
|
-
|
|
4278
|
-
|
|
4279
|
-
|
|
4280
|
-
|
|
4281
|
-
|
|
4282
|
-
|
|
4283
|
-
|
|
4284
|
-
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
|
|
4290
|
-
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
|
|
4294
|
-
|
|
4295
|
-
|
|
4296
|
-
|
|
4297
|
-
|
|
4298
|
-
|
|
4299
|
-
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
return
|
|
4308
|
-
}, [
|
|
4165
|
+
const finalValueFormatter = useMemo5(() => {
|
|
4166
|
+
const nf = new Intl.NumberFormat("pt-BR", {
|
|
4167
|
+
minimumFractionDigits: 2,
|
|
4168
|
+
maximumFractionDigits: 2
|
|
4169
|
+
});
|
|
4170
|
+
if (valueFormatter2) {
|
|
4171
|
+
if (formatBR) {
|
|
4172
|
+
const wrapped = (props) => {
|
|
4173
|
+
const { value, formattedValue } = props;
|
|
4174
|
+
let num = NaN;
|
|
4175
|
+
if (typeof value === "number") num = value;
|
|
4176
|
+
else if (typeof value === "string" && value.trim() !== "") {
|
|
4177
|
+
const parsed = Number(value);
|
|
4178
|
+
num = Number.isNaN(parsed) ? NaN : parsed;
|
|
4179
|
+
}
|
|
4180
|
+
const brFormatted = !Number.isNaN(num) ? nf.format(num) : String(formattedValue ?? value ?? "");
|
|
4181
|
+
return valueFormatter2({
|
|
4182
|
+
...props,
|
|
4183
|
+
formattedValue: brFormatted,
|
|
4184
|
+
value: void 0
|
|
4185
|
+
});
|
|
4186
|
+
};
|
|
4187
|
+
return wrapped;
|
|
4188
|
+
}
|
|
4189
|
+
return valueFormatter2;
|
|
4190
|
+
}
|
|
4191
|
+
if (!formatBR) return void 0;
|
|
4192
|
+
const builtIn = (props) => {
|
|
4193
|
+
const { value, formattedValue } = props;
|
|
4194
|
+
let num = NaN;
|
|
4195
|
+
if (typeof value === "number") num = value;
|
|
4196
|
+
else if (typeof value === "string" && value.trim() !== "") {
|
|
4197
|
+
const parsed = Number(value);
|
|
4198
|
+
num = Number.isNaN(parsed) ? NaN : parsed;
|
|
4199
|
+
}
|
|
4200
|
+
if (!Number.isNaN(num)) return nf.format(num);
|
|
4201
|
+
return String(formattedValue ?? value ?? "");
|
|
4202
|
+
};
|
|
4203
|
+
return builtIn;
|
|
4204
|
+
}, [valueFormatter2, formatBR]);
|
|
4205
|
+
const yTickFormatter = useMemo5(() => {
|
|
4206
|
+
const nf = new Intl.NumberFormat("pt-BR", {
|
|
4207
|
+
minimumFractionDigits: 2,
|
|
4208
|
+
maximumFractionDigits: 2
|
|
4209
|
+
});
|
|
4210
|
+
const stripCurrency = (s) => String(s).replace(/^\s*R\$\s?/, "");
|
|
4211
|
+
if (finalValueFormatter) {
|
|
4212
|
+
return (v) => {
|
|
4213
|
+
const num = Number(String(v));
|
|
4214
|
+
const formatted = Number.isNaN(num) ? String(v ?? "") : nf.format(num);
|
|
4215
|
+
const out = finalValueFormatter({
|
|
4216
|
+
value: v,
|
|
4217
|
+
formattedValue: formatted
|
|
4218
|
+
});
|
|
4219
|
+
return stripCurrency(String(out));
|
|
4220
|
+
};
|
|
4221
|
+
}
|
|
4222
|
+
return (value) => {
|
|
4223
|
+
const num = Number(String(value));
|
|
4224
|
+
return Number.isNaN(num) ? String(value ?? "") : nf.format(num);
|
|
4225
|
+
};
|
|
4226
|
+
}, [finalValueFormatter]);
|
|
4227
|
+
const finalEnableHighlights = enableHighlights;
|
|
4228
|
+
const finalEnableShowOnly = enableShowOnly;
|
|
4229
|
+
const finalEnablePeriodsDropdown = enablePeriodsDropdown && enableDraggableTooltips;
|
|
4230
|
+
const defaultChartRightMargin = 30;
|
|
4231
|
+
const defaultChartLeftMargin = 0;
|
|
4232
|
+
const axisLabelMargin = 56;
|
|
4233
|
+
const containerPaddingLeft = -6;
|
|
4234
|
+
const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? axisLabelMargin : defaultChartRightMargin);
|
|
4235
|
+
const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? axisLabelMargin : defaultChartLeftMargin);
|
|
4236
|
+
const yAxisTickWidth = useMemo5(() => {
|
|
4237
|
+
if (typeof chartMargin?.left === "number") return chartMargin.left;
|
|
4238
|
+
if (yAxisLabel) return axisLabelMargin;
|
|
4239
|
+
const samples = [minLeftDataValue, niceMaxLeft, Math.round((minLeftDataValue + niceMaxLeft) / 2), 0];
|
|
4240
|
+
const formatted = samples.map((v) => String(yTickFormatter(v)));
|
|
4241
|
+
const maxLen = formatted.reduce((m, s) => Math.max(m, s.length), 0);
|
|
4242
|
+
const estimated = Math.max(48, Math.min(220, maxLen * 8 + 24));
|
|
4243
|
+
return estimated;
|
|
4244
|
+
}, [chartMargin?.left, yAxisLabel, yTickFormatter, minLeftDataValue, niceMaxLeft]);
|
|
4245
|
+
const composedChartLeftMargin = chartMargin?.left ?? defaultChartLeftMargin;
|
|
4246
|
+
const composedChartRightMargin = chartMargin?.right ?? defaultChartRightMargin;
|
|
4247
|
+
const finalChartTopMargin = chartMargin?.top ?? (showLabels ? 48 : 20);
|
|
4248
|
+
const baseBottom = chartMargin?.bottom ?? 5;
|
|
4249
|
+
const extraForXAxisLabel = xAxisLabel ? 22 : 0;
|
|
4250
|
+
const extraForLegend = showLegend ? 36 : 0;
|
|
4251
|
+
const finalChartBottomMargin = baseBottom + extraForXAxisLabel + extraForLegend;
|
|
4252
|
+
const measuredInner = measuredWidth ? Math.max(0, measuredWidth - 32) : void 0;
|
|
4253
|
+
const effectiveChartWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
|
|
4254
|
+
const chartInnerWidth = effectiveChartWidth - composedChartLeftMargin - composedChartRightMargin;
|
|
4255
|
+
const leftYAxisLabelDx = -Math.max(12, Math.round(yAxisTickWidth / 2));
|
|
4256
|
+
const rightYAxisLabelDx = Math.max(12, Math.round(finalChartRightMargin / 2));
|
|
4309
4257
|
const openTooltipForPeriod = useCallback5(
|
|
4310
4258
|
(periodName) => {
|
|
4311
4259
|
if (!enableDraggableTooltips) return;
|
|
@@ -4352,11 +4300,20 @@ var Chart = ({
|
|
|
4352
4300
|
if (!data) return null;
|
|
4353
4301
|
if (Array.isArray(data) && data.length === 0) {
|
|
4354
4302
|
return /* @__PURE__ */ jsx29(
|
|
4355
|
-
|
|
4303
|
+
"div",
|
|
4356
4304
|
{
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
|
|
4305
|
+
className: cn(
|
|
4306
|
+
"rounded-lg bg-card p-4 relative w-full text-muted-foreground"
|
|
4307
|
+
),
|
|
4308
|
+
children: /* @__PURE__ */ jsx29(
|
|
4309
|
+
"div",
|
|
4310
|
+
{
|
|
4311
|
+
style: {
|
|
4312
|
+
paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`
|
|
4313
|
+
},
|
|
4314
|
+
children: /* @__PURE__ */ jsx29(NoData_default, {})
|
|
4315
|
+
}
|
|
4316
|
+
)
|
|
4360
4317
|
}
|
|
4361
4318
|
);
|
|
4362
4319
|
}
|
|
@@ -4366,13 +4323,14 @@ var Chart = ({
|
|
|
4366
4323
|
ref: wrapperRef,
|
|
4367
4324
|
style: {
|
|
4368
4325
|
width: "100%",
|
|
4369
|
-
|
|
4326
|
+
overflowX: "hidden",
|
|
4327
|
+
overflowY: "hidden",
|
|
4370
4328
|
minWidth: 0
|
|
4371
4329
|
},
|
|
4372
4330
|
children: /* @__PURE__ */ jsxs24(
|
|
4373
4331
|
"div",
|
|
4374
4332
|
{
|
|
4375
|
-
className: cn("rounded-lg bg-card
|
|
4333
|
+
className: cn("rounded-lg bg-card relative", className),
|
|
4376
4334
|
style: { width: "100%", maxWidth: "100%", minWidth: 0 },
|
|
4377
4335
|
children: [
|
|
4378
4336
|
title && /* @__PURE__ */ jsx29(
|
|
@@ -4384,9 +4342,9 @@ var Chart = ({
|
|
|
4384
4342
|
display: "flex",
|
|
4385
4343
|
justifyContent: titlePosition === "center" ? "center" : titlePosition === "right" ? "flex-end" : "flex-start",
|
|
4386
4344
|
alignItems: "center",
|
|
4387
|
-
marginTop:
|
|
4345
|
+
marginTop: "19px"
|
|
4388
4346
|
},
|
|
4389
|
-
children: /* @__PURE__ */ jsx29("
|
|
4347
|
+
children: /* @__PURE__ */ jsx29("div", { className: titleClassName, children: title })
|
|
4390
4348
|
}
|
|
4391
4349
|
),
|
|
4392
4350
|
allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly) && /* @__PURE__ */ jsxs24(
|
|
@@ -4502,8 +4460,8 @@ var Chart = ({
|
|
|
4502
4460
|
},
|
|
4503
4461
|
label: xAxisLabel ? {
|
|
4504
4462
|
value: xAxisLabel,
|
|
4505
|
-
position: "
|
|
4506
|
-
offset:
|
|
4463
|
+
position: "insideBottomRight",
|
|
4464
|
+
offset: -5,
|
|
4507
4465
|
style: {
|
|
4508
4466
|
fontSize: 12,
|
|
4509
4467
|
fill: "hsl(var(--muted-foreground))",
|
|
@@ -4512,75 +4470,23 @@ var Chart = ({
|
|
|
4512
4470
|
} : void 0
|
|
4513
4471
|
}
|
|
4514
4472
|
),
|
|
4515
|
-
|
|
4516
|
-
/* @__PURE__ */ jsx29(
|
|
4517
|
-
YAxis,
|
|
4518
|
-
{
|
|
4519
|
-
yAxisId: "left",
|
|
4520
|
-
stroke: yAxes?.left?.stroke || "hsl(var(--muted-foreground))",
|
|
4521
|
-
width: yAxes?.left?.width,
|
|
4522
|
-
fontSize: 12,
|
|
4523
|
-
tickLine: false,
|
|
4524
|
-
axisLine: false,
|
|
4525
|
-
tickFormatter: leftAxisTickFormatter,
|
|
4526
|
-
domain: [Math.min(minLeft, 0), niceMaxLeft],
|
|
4527
|
-
tickCount: 6,
|
|
4528
|
-
label: yAxes?.left?.label ?? yAxisLabel ? {
|
|
4529
|
-
value: yAxes?.left?.label ?? yAxisLabel,
|
|
4530
|
-
angle: -90,
|
|
4531
|
-
position: "left",
|
|
4532
|
-
dx: -leftYAxisLabelDx,
|
|
4533
|
-
style: {
|
|
4534
|
-
fontSize: 12,
|
|
4535
|
-
fill: "hsl(var(--muted-foreground))",
|
|
4536
|
-
fontWeight: 500,
|
|
4537
|
-
textAnchor: "middle"
|
|
4538
|
-
}
|
|
4539
|
-
} : void 0
|
|
4540
|
-
}
|
|
4541
|
-
),
|
|
4542
|
-
/* @__PURE__ */ jsx29(
|
|
4543
|
-
YAxis,
|
|
4544
|
-
{
|
|
4545
|
-
yAxisId: "right",
|
|
4546
|
-
orientation: "right",
|
|
4547
|
-
stroke: yAxes?.right?.stroke || "hsl(var(--muted-foreground))",
|
|
4548
|
-
width: yAxes?.right?.width,
|
|
4549
|
-
fontSize: 12,
|
|
4550
|
-
tickLine: false,
|
|
4551
|
-
axisLine: false,
|
|
4552
|
-
tickFormatter: rightAxisTickFormatter,
|
|
4553
|
-
domain: [Math.min(minRight, 0), niceMaxRight],
|
|
4554
|
-
tickCount: 6,
|
|
4555
|
-
label: yAxes?.right?.label ? {
|
|
4556
|
-
value: yAxes?.right?.label,
|
|
4557
|
-
angle: -90,
|
|
4558
|
-
position: "right",
|
|
4559
|
-
dx: rightYAxisLabelDx,
|
|
4560
|
-
style: {
|
|
4561
|
-
fontSize: 12,
|
|
4562
|
-
fill: "hsl(var(--muted-foreground))",
|
|
4563
|
-
fontWeight: 500,
|
|
4564
|
-
textAnchor: "middle"
|
|
4565
|
-
}
|
|
4566
|
-
} : void 0
|
|
4567
|
-
}
|
|
4568
|
-
)
|
|
4569
|
-
] }) : /* @__PURE__ */ jsx29(Fragment7, { children: /* @__PURE__ */ jsx29(
|
|
4473
|
+
/* @__PURE__ */ jsx29(
|
|
4570
4474
|
YAxis,
|
|
4571
4475
|
{
|
|
4476
|
+
yAxisId: "left",
|
|
4477
|
+
width: yAxisTickWidth,
|
|
4572
4478
|
stroke: "hsl(var(--muted-foreground))",
|
|
4573
4479
|
fontSize: 12,
|
|
4574
4480
|
tickLine: false,
|
|
4575
4481
|
axisLine: false,
|
|
4576
4482
|
tickFormatter: yTickFormatter,
|
|
4577
|
-
domain: [Math.min(
|
|
4483
|
+
domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
|
|
4578
4484
|
tickCount: 6,
|
|
4579
4485
|
label: yAxisLabel ? {
|
|
4580
4486
|
value: yAxisLabel,
|
|
4581
4487
|
angle: -90,
|
|
4582
4488
|
position: "left",
|
|
4583
|
-
dx:
|
|
4489
|
+
dx: leftYAxisLabelDx,
|
|
4584
4490
|
style: {
|
|
4585
4491
|
fontSize: 12,
|
|
4586
4492
|
fill: "hsl(var(--muted-foreground))",
|
|
@@ -4589,38 +4495,88 @@ var Chart = ({
|
|
|
4589
4495
|
}
|
|
4590
4496
|
} : void 0
|
|
4591
4497
|
}
|
|
4592
|
-
)
|
|
4593
|
-
|
|
4498
|
+
),
|
|
4499
|
+
minLeftDataValue < 0 && /* @__PURE__ */ jsx29(
|
|
4594
4500
|
ReferenceLine,
|
|
4595
4501
|
{
|
|
4596
4502
|
y: 0,
|
|
4503
|
+
yAxisId: "left",
|
|
4597
4504
|
stroke: "hsl(var(--muted-foreground))",
|
|
4598
4505
|
strokeWidth: 1,
|
|
4599
4506
|
strokeDasharray: "4 4"
|
|
4600
4507
|
}
|
|
4601
4508
|
),
|
|
4509
|
+
rightKeys.length > 0 && (() => {
|
|
4510
|
+
const decimals = typeof biaxialConfigNormalized?.decimals === "number" ? Math.max(0, Math.floor(biaxialConfigNormalized.decimals)) : 2;
|
|
4511
|
+
const rightTickFormatter = (v) => {
|
|
4512
|
+
if (biaxialConfigNormalized?.percentage) {
|
|
4513
|
+
const num = Number(String(v));
|
|
4514
|
+
const nf = new Intl.NumberFormat("pt-BR", {
|
|
4515
|
+
minimumFractionDigits: decimals,
|
|
4516
|
+
maximumFractionDigits: decimals
|
|
4517
|
+
});
|
|
4518
|
+
const out = Number.isNaN(num) ? String(v ?? "") : nf.format(num);
|
|
4519
|
+
return `${out}%`;
|
|
4520
|
+
}
|
|
4521
|
+
return yTickFormatter(v);
|
|
4522
|
+
};
|
|
4523
|
+
const firstRightKey = biaxialConfigNormalized?.key && biaxialConfigNormalized.key[0];
|
|
4524
|
+
const defaultRightColor = firstRightKey && finalColors[firstRightKey] || "hsl(var(--muted-foreground))";
|
|
4525
|
+
const rightAxisColor = (() => {
|
|
4526
|
+
if (!biaxialConfigNormalized) return defaultRightColor;
|
|
4527
|
+
if (typeof biaxialConfigNormalized.stroke === "string")
|
|
4528
|
+
return biaxialConfigNormalized.stroke;
|
|
4529
|
+
if (biaxialConfigNormalized.stroke && firstRightKey && typeof biaxialConfigNormalized.stroke === "object")
|
|
4530
|
+
return biaxialConfigNormalized.stroke[firstRightKey] || defaultRightColor;
|
|
4531
|
+
return defaultRightColor;
|
|
4532
|
+
})();
|
|
4533
|
+
return /* @__PURE__ */ jsx29(
|
|
4534
|
+
YAxis,
|
|
4535
|
+
{
|
|
4536
|
+
yAxisId: "right",
|
|
4537
|
+
width: finalChartRightMargin,
|
|
4538
|
+
orientation: "right",
|
|
4539
|
+
stroke: "hsl(var(--muted-foreground))",
|
|
4540
|
+
fontSize: 12,
|
|
4541
|
+
tickLine: false,
|
|
4542
|
+
axisLine: false,
|
|
4543
|
+
tick: { fill: rightAxisColor },
|
|
4544
|
+
tickFormatter: rightTickFormatter,
|
|
4545
|
+
domain: [Math.min(minRightDataValue, 0), niceMaxRight],
|
|
4546
|
+
tickCount: 6,
|
|
4547
|
+
label: biaxialConfigNormalized?.label ? {
|
|
4548
|
+
value: biaxialConfigNormalized.label,
|
|
4549
|
+
angle: -90,
|
|
4550
|
+
position: "right",
|
|
4551
|
+
dx: rightYAxisLabelDx,
|
|
4552
|
+
style: {
|
|
4553
|
+
fontSize: 12,
|
|
4554
|
+
fill: "hsl(var(--muted-foreground))",
|
|
4555
|
+
fontWeight: 500,
|
|
4556
|
+
textAnchor: "middle"
|
|
4557
|
+
}
|
|
4558
|
+
} : void 0
|
|
4559
|
+
}
|
|
4560
|
+
);
|
|
4561
|
+
})(),
|
|
4602
4562
|
showTooltip && /* @__PURE__ */ jsx29(
|
|
4603
4563
|
Tooltip,
|
|
4604
4564
|
{
|
|
4605
4565
|
content: showTooltipTotal ? /* @__PURE__ */ jsx29(
|
|
4606
4566
|
TooltipWithTotal_default,
|
|
4607
4567
|
{
|
|
4608
|
-
periodLabel,
|
|
4609
4568
|
finalColors,
|
|
4610
4569
|
valueFormatter: finalValueFormatter,
|
|
4611
4570
|
categoryFormatter,
|
|
4612
|
-
|
|
4613
|
-
isBiaxial: rightKeys.length > 0
|
|
4571
|
+
periodLabel
|
|
4614
4572
|
}
|
|
4615
4573
|
) : /* @__PURE__ */ jsx29(
|
|
4616
4574
|
TooltipSimple_default,
|
|
4617
4575
|
{
|
|
4618
|
-
periodLabel,
|
|
4619
4576
|
finalColors,
|
|
4620
4577
|
valueFormatter: finalValueFormatter,
|
|
4621
4578
|
categoryFormatter,
|
|
4622
|
-
|
|
4623
|
-
isBiaxial: rightKeys.length > 0
|
|
4579
|
+
periodLabel
|
|
4624
4580
|
}
|
|
4625
4581
|
),
|
|
4626
4582
|
cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
|
|
@@ -4638,25 +4594,23 @@ var Chart = ({
|
|
|
4638
4594
|
),
|
|
4639
4595
|
seriesOrder.map((s) => {
|
|
4640
4596
|
const key = s.key;
|
|
4641
|
-
const rawMapped = rightKeys.length > 0 ? yAxisMap?.[key] ?? "left" : void 0;
|
|
4642
|
-
const seriesYAxisId = (() => {
|
|
4643
|
-
if (rawMapped === void 0) return void 0;
|
|
4644
|
-
if (rawMapped === "left" || rawMapped === "right")
|
|
4645
|
-
return rawMapped;
|
|
4646
|
-
if (rawMapped === 1 || rawMapped === "1" || rawMapped === "right")
|
|
4647
|
-
return "right";
|
|
4648
|
-
return "left";
|
|
4649
|
-
})();
|
|
4650
4597
|
if (showOnlyHighlighted && !highlightedSeries.has(key))
|
|
4651
4598
|
return null;
|
|
4652
4599
|
const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
|
|
4653
|
-
|
|
4600
|
+
let color = finalColors[key];
|
|
4601
|
+
if (rightKeys.includes(key) && biaxialConfigNormalized?.stroke) {
|
|
4602
|
+
if (typeof biaxialConfigNormalized.stroke === "string") {
|
|
4603
|
+
color = biaxialConfigNormalized.stroke;
|
|
4604
|
+
} else {
|
|
4605
|
+
color = biaxialConfigNormalized.stroke[key] ?? color;
|
|
4606
|
+
}
|
|
4607
|
+
}
|
|
4654
4608
|
if (s.type === "bar") {
|
|
4655
4609
|
return /* @__PURE__ */ jsx29(
|
|
4656
4610
|
Bar,
|
|
4657
4611
|
{
|
|
4658
|
-
yAxisId: seriesYAxisId,
|
|
4659
4612
|
dataKey: key,
|
|
4613
|
+
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
4660
4614
|
name: label,
|
|
4661
4615
|
fill: color,
|
|
4662
4616
|
radius: [4, 4, 0, 0],
|
|
@@ -4678,13 +4632,12 @@ var Chart = ({
|
|
|
4678
4632
|
LabelList,
|
|
4679
4633
|
{
|
|
4680
4634
|
dataKey: key,
|
|
4681
|
-
position: "
|
|
4682
|
-
content:
|
|
4635
|
+
position: "insideTop",
|
|
4636
|
+
content: renderInsideBarLabel(
|
|
4683
4637
|
color,
|
|
4684
|
-
"filled",
|
|
4685
4638
|
finalValueFormatter
|
|
4686
4639
|
),
|
|
4687
|
-
offset:
|
|
4640
|
+
offset: 0
|
|
4688
4641
|
}
|
|
4689
4642
|
) : null
|
|
4690
4643
|
},
|
|
@@ -4695,8 +4648,8 @@ var Chart = ({
|
|
|
4695
4648
|
return /* @__PURE__ */ jsx29(
|
|
4696
4649
|
Line,
|
|
4697
4650
|
{
|
|
4698
|
-
yAxisId: seriesYAxisId,
|
|
4699
4651
|
dataKey: key,
|
|
4652
|
+
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
4700
4653
|
name: label,
|
|
4701
4654
|
stroke: color,
|
|
4702
4655
|
strokeWidth: 2,
|
|
@@ -4729,8 +4682,8 @@ var Chart = ({
|
|
|
4729
4682
|
return /* @__PURE__ */ jsx29(
|
|
4730
4683
|
Area,
|
|
4731
4684
|
{
|
|
4732
|
-
yAxisId: seriesYAxisId,
|
|
4733
4685
|
dataKey: key,
|
|
4686
|
+
yAxisId: rightKeys.includes(key) ? "right" : "left",
|
|
4734
4687
|
name: label,
|
|
4735
4688
|
stroke: color,
|
|
4736
4689
|
fill: color,
|
|
@@ -4768,7 +4721,7 @@ var Chart = ({
|
|
|
4768
4721
|
DraggableTooltip_default,
|
|
4769
4722
|
{
|
|
4770
4723
|
id: tooltip.id,
|
|
4771
|
-
data:
|
|
4724
|
+
data: adaptDataForTooltip(tooltip.data),
|
|
4772
4725
|
position: tooltip.position,
|
|
4773
4726
|
title,
|
|
4774
4727
|
dataKeys: allKeys,
|
|
@@ -4807,7 +4760,7 @@ var Chart = ({
|
|
|
4807
4760
|
var Chart_default = Chart;
|
|
4808
4761
|
|
|
4809
4762
|
// src/components/charts/BarChart.tsx
|
|
4810
|
-
import { useState as
|
|
4763
|
+
import { useState as useState8, useEffect as useEffect6, useCallback as useCallback6, useMemo as useMemo6 } from "react";
|
|
4811
4764
|
import {
|
|
4812
4765
|
BarChart as RechartsBarChart,
|
|
4813
4766
|
Bar as Bar2,
|
|
@@ -4849,7 +4802,7 @@ var BarChart = ({
|
|
|
4849
4802
|
containerPaddingLeft,
|
|
4850
4803
|
16
|
|
4851
4804
|
);
|
|
4852
|
-
const smartConfig =
|
|
4805
|
+
const smartConfig = useMemo6(() => {
|
|
4853
4806
|
const providedMapper = yAxis ?? mapper;
|
|
4854
4807
|
if (autoDetect === true || xAxis == null || providedMapper == null) {
|
|
4855
4808
|
const detectedXAxis = detectXAxis(data);
|
|
@@ -4899,20 +4852,20 @@ var BarChart = ({
|
|
|
4899
4852
|
return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
|
|
4900
4853
|
}, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
|
|
4901
4854
|
const { xAxisConfig, mapperConfig } = smartConfig;
|
|
4902
|
-
const [activeTooltips, setActiveTooltips] =
|
|
4903
|
-
const [isDragging, setIsDragging] =
|
|
4904
|
-
const [dragOffset, setDragOffset] =
|
|
4855
|
+
const [activeTooltips, setActiveTooltips] = useState8([]);
|
|
4856
|
+
const [isDragging, setIsDragging] = useState8(null);
|
|
4857
|
+
const [dragOffset, setDragOffset] = useState8({
|
|
4905
4858
|
x: 0,
|
|
4906
4859
|
y: 0
|
|
4907
4860
|
});
|
|
4908
|
-
const [globalTooltipCount, setGlobalTooltipCount] =
|
|
4909
|
-
const [alignmentGuides, setAlignmentGuides] =
|
|
4861
|
+
const [globalTooltipCount, setGlobalTooltipCount] = useState8(0);
|
|
4862
|
+
const [alignmentGuides, setAlignmentGuides] = useState8([]);
|
|
4910
4863
|
const processedData = data.map((item) => ({
|
|
4911
4864
|
...item,
|
|
4912
4865
|
name: String(item[xAxisConfig.dataKey] || "N/A")
|
|
4913
4866
|
// Garantir propriedade 'name' para tooltip
|
|
4914
4867
|
}));
|
|
4915
|
-
const
|
|
4868
|
+
const generateColors = (dataKeys2) => {
|
|
4916
4869
|
const colorMap = {};
|
|
4917
4870
|
const allColors = generateAdditionalColors(colors2, dataKeys2.length);
|
|
4918
4871
|
dataKeys2.forEach((key, index) => {
|
|
@@ -4921,15 +4874,15 @@ var BarChart = ({
|
|
|
4921
4874
|
return colorMap;
|
|
4922
4875
|
};
|
|
4923
4876
|
const dataKeys = Object.keys(mapperConfig);
|
|
4924
|
-
const finalColors =
|
|
4925
|
-
const
|
|
4877
|
+
const finalColors = generateColors(dataKeys);
|
|
4878
|
+
const adaptDataForTooltip = (universalData) => {
|
|
4926
4879
|
return {
|
|
4927
4880
|
...universalData,
|
|
4928
4881
|
name: String(universalData[xAxisConfig.dataKey] || "N/A")
|
|
4929
4882
|
// Garantir que tem a propriedade 'name'
|
|
4930
4883
|
};
|
|
4931
4884
|
};
|
|
4932
|
-
const maxDataValue =
|
|
4885
|
+
const maxDataValue = useMemo6(() => {
|
|
4933
4886
|
let max = 0;
|
|
4934
4887
|
const keys = Object.keys(mapperConfig);
|
|
4935
4888
|
for (const row of processedData) {
|
|
@@ -4942,7 +4895,7 @@ var BarChart = ({
|
|
|
4942
4895
|
}
|
|
4943
4896
|
return max;
|
|
4944
4897
|
}, [processedData, mapperConfig]);
|
|
4945
|
-
const niceMax =
|
|
4898
|
+
const niceMax = useMemo6(() => {
|
|
4946
4899
|
let padding2 = 0.08;
|
|
4947
4900
|
if (maxDataValue > 1e6) padding2 = 0.05;
|
|
4948
4901
|
if (maxDataValue > 1e7) padding2 = 0.03;
|
|
@@ -5453,7 +5406,7 @@ var BarChart = ({
|
|
|
5453
5406
|
DraggableTooltip_default,
|
|
5454
5407
|
{
|
|
5455
5408
|
id: tooltip.id,
|
|
5456
|
-
data:
|
|
5409
|
+
data: adaptDataForTooltip(tooltip.data),
|
|
5457
5410
|
position: tooltip.position,
|
|
5458
5411
|
isDragging: isDragging === tooltip.id,
|
|
5459
5412
|
title,
|
|
@@ -5482,7 +5435,7 @@ var BarChart = ({
|
|
|
5482
5435
|
var BarChart_default = BarChart;
|
|
5483
5436
|
|
|
5484
5437
|
// src/components/charts/LineChart.tsx
|
|
5485
|
-
import { useState as
|
|
5438
|
+
import { useState as useState9, useEffect as useEffect7, useCallback as useCallback7, useMemo as useMemo7 } from "react";
|
|
5486
5439
|
import {
|
|
5487
5440
|
LineChart as RechartsLineChart,
|
|
5488
5441
|
Line as Line2,
|
|
@@ -5525,15 +5478,15 @@ var CustomLineChart = ({
|
|
|
5525
5478
|
containerPaddingLeft,
|
|
5526
5479
|
16
|
|
5527
5480
|
);
|
|
5528
|
-
const [activeTooltips, setActiveTooltips] =
|
|
5529
|
-
const [isDragging, setIsDragging] =
|
|
5530
|
-
const [dragOffset, setDragOffset] =
|
|
5481
|
+
const [activeTooltips, setActiveTooltips] = useState9([]);
|
|
5482
|
+
const [isDragging, setIsDragging] = useState9(null);
|
|
5483
|
+
const [dragOffset, setDragOffset] = useState9({
|
|
5531
5484
|
x: 0,
|
|
5532
5485
|
y: 0
|
|
5533
5486
|
});
|
|
5534
|
-
const [globalTooltipCount, setGlobalTooltipCount] =
|
|
5535
|
-
const [alignmentGuides, setAlignmentGuides] =
|
|
5536
|
-
const
|
|
5487
|
+
const [globalTooltipCount, setGlobalTooltipCount] = useState9(0);
|
|
5488
|
+
const [alignmentGuides, setAlignmentGuides] = useState9([]);
|
|
5489
|
+
const generateColors = (dataKeys2) => {
|
|
5537
5490
|
const colorMap = {};
|
|
5538
5491
|
const allColors = generateAdditionalColors(colors2, dataKeys2.length);
|
|
5539
5492
|
dataKeys2.forEach((key, index) => {
|
|
@@ -5541,12 +5494,12 @@ var CustomLineChart = ({
|
|
|
5541
5494
|
});
|
|
5542
5495
|
return colorMap;
|
|
5543
5496
|
};
|
|
5544
|
-
const dataKeys =
|
|
5497
|
+
const dataKeys = useMemo7(
|
|
5545
5498
|
() => data.length > 0 ? Object.keys(data[0]).filter((key) => key !== "name") : [],
|
|
5546
5499
|
[data]
|
|
5547
5500
|
);
|
|
5548
|
-
const finalColors =
|
|
5549
|
-
const maxDataValue =
|
|
5501
|
+
const finalColors = generateColors(dataKeys);
|
|
5502
|
+
const maxDataValue = useMemo7(() => {
|
|
5550
5503
|
let max = 0;
|
|
5551
5504
|
for (const row of data) {
|
|
5552
5505
|
const r = row;
|
|
@@ -5558,7 +5511,7 @@ var CustomLineChart = ({
|
|
|
5558
5511
|
}
|
|
5559
5512
|
return max;
|
|
5560
5513
|
}, [data, dataKeys]);
|
|
5561
|
-
const niceMax =
|
|
5514
|
+
const niceMax = useMemo7(() => {
|
|
5562
5515
|
let padding2 = 0.08;
|
|
5563
5516
|
if (maxDataValue > 1e6) padding2 = 0.05;
|
|
5564
5517
|
if (maxDataValue > 1e7) padding2 = 0.03;
|
|
@@ -6176,12 +6129,12 @@ var CustomPieChart = ({
|
|
|
6176
6129
|
var PieChart_default = CustomPieChart;
|
|
6177
6130
|
|
|
6178
6131
|
// src/components/charts/hooks/useChartHighlights.tsx
|
|
6179
|
-
import { useState as
|
|
6132
|
+
import { useState as useState10, useCallback as useCallback8 } from "react";
|
|
6180
6133
|
var useChartHighlights = () => {
|
|
6181
|
-
const [highlightedSeries, setHighlightedSeries] =
|
|
6134
|
+
const [highlightedSeries, setHighlightedSeries] = useState10(
|
|
6182
6135
|
/* @__PURE__ */ new Set()
|
|
6183
6136
|
);
|
|
6184
|
-
const [showOnlyHighlighted, setShowOnlyHighlighted] =
|
|
6137
|
+
const [showOnlyHighlighted, setShowOnlyHighlighted] = useState10(false);
|
|
6185
6138
|
const toggleHighlight = useCallback8((key) => {
|
|
6186
6139
|
setHighlightedSeries((prev) => {
|
|
6187
6140
|
const next = new Set(prev);
|
|
@@ -6481,7 +6434,7 @@ import {
|
|
|
6481
6434
|
FilePptIcon,
|
|
6482
6435
|
FileDocIcon
|
|
6483
6436
|
} from "@phosphor-icons/react";
|
|
6484
|
-
import { Fragment as
|
|
6437
|
+
import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
6485
6438
|
var formatFileSize = (bytes) => {
|
|
6486
6439
|
if (bytes === 0) return "0 Bytes";
|
|
6487
6440
|
const k = 1024;
|
|
@@ -6876,7 +6829,7 @@ var FileUploader = React18.forwardRef(
|
|
|
6876
6829
|
),
|
|
6877
6830
|
/* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
|
|
6878
6831
|
/* @__PURE__ */ jsx37("span", { children: formatFileSize(file.size) }),
|
|
6879
|
-
file.type && /* @__PURE__ */ jsxs28(
|
|
6832
|
+
file.type && /* @__PURE__ */ jsxs28(Fragment7, { children: [
|
|
6880
6833
|
/* @__PURE__ */ jsx37("span", { children: "\u2022" }),
|
|
6881
6834
|
/* @__PURE__ */ jsx37("span", { className: "uppercase", children: getFileExtension(file.name) })
|
|
6882
6835
|
] })
|
|
@@ -10394,7 +10347,7 @@ function DrawerDescriptionBase({
|
|
|
10394
10347
|
}
|
|
10395
10348
|
|
|
10396
10349
|
// src/hooks/use-universal-tooltip.tsx
|
|
10397
|
-
import { createContext as createContext4, useContext as useContext5, useState as
|
|
10350
|
+
import { createContext as createContext4, useContext as useContext5, useState as useState17, useCallback as useCallback11, useEffect as useEffect15, useRef as useRef7 } from "react";
|
|
10398
10351
|
import { jsx as jsx62 } from "react/jsx-runtime";
|
|
10399
10352
|
var UniversalTooltipContext = createContext4(null);
|
|
10400
10353
|
var useUniversalTooltip = () => {
|
|
@@ -10694,7 +10647,7 @@ CalendarBase2.displayName = "CalendarBase";
|
|
|
10694
10647
|
|
|
10695
10648
|
// src/components/picker/DateTimePicker.tsx
|
|
10696
10649
|
import { ptBR } from "date-fns/locale";
|
|
10697
|
-
import { useEffect as useEffect16, useState as
|
|
10650
|
+
import { useEffect as useEffect16, useState as useState19 } from "react";
|
|
10698
10651
|
|
|
10699
10652
|
// src/components/picker/TimePicker.tsx
|
|
10700
10653
|
import { motion as motion14, AnimatePresence as AnimatePresence10 } from "framer-motion";
|
|
@@ -11043,7 +10996,7 @@ var TimePickerInput = React41.forwardRef(
|
|
|
11043
10996
|
TimePickerInput.displayName = "TimePickerInput";
|
|
11044
10997
|
|
|
11045
10998
|
// src/components/picker/TimePicker.tsx
|
|
11046
|
-
import { Fragment as
|
|
10999
|
+
import { Fragment as Fragment9, jsx as jsx66, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
11047
11000
|
function TimePicker({
|
|
11048
11001
|
date,
|
|
11049
11002
|
setDate,
|
|
@@ -11113,7 +11066,7 @@ function TimePicker({
|
|
|
11113
11066
|
)
|
|
11114
11067
|
}
|
|
11115
11068
|
),
|
|
11116
|
-
/* @__PURE__ */ jsx66(AnimatePresence10, { children: !hideSeconds && /* @__PURE__ */ jsx66(
|
|
11069
|
+
/* @__PURE__ */ jsx66(AnimatePresence10, { children: !hideSeconds && /* @__PURE__ */ jsx66(Fragment9, { children: /* @__PURE__ */ jsx66(
|
|
11117
11070
|
motion14.div,
|
|
11118
11071
|
{
|
|
11119
11072
|
variants: itemVariants2,
|
|
@@ -11155,9 +11108,9 @@ function DateTimePicker({
|
|
|
11155
11108
|
className,
|
|
11156
11109
|
error
|
|
11157
11110
|
}) {
|
|
11158
|
-
const [internalDate, setInternalDate] =
|
|
11159
|
-
const [open, setOpen] =
|
|
11160
|
-
const [timePickerOpen, setTimePickerOpen] =
|
|
11111
|
+
const [internalDate, setInternalDate] = useState19(date);
|
|
11112
|
+
const [open, setOpen] = useState19(false);
|
|
11113
|
+
const [timePickerOpen, setTimePickerOpen] = useState19(false);
|
|
11161
11114
|
const handleSelect = (newDay) => {
|
|
11162
11115
|
if (!newDay) return;
|
|
11163
11116
|
if (!internalDate) {
|
|
@@ -12142,13 +12095,13 @@ function StatusIndicator({
|
|
|
12142
12095
|
}
|
|
12143
12096
|
|
|
12144
12097
|
// src/components/ui/form/DebouncedInput.tsx
|
|
12145
|
-
import { useEffect as useEffect18, useState as
|
|
12098
|
+
import { useEffect as useEffect18, useState as useState21 } from "react";
|
|
12146
12099
|
import { CircleNotchIcon as CircleNotchIcon2 } from "@phosphor-icons/react";
|
|
12147
12100
|
import { jsx as jsx72 } from "react/jsx-runtime";
|
|
12148
12101
|
function DebouncedInput({
|
|
12149
12102
|
value: initialValue,
|
|
12150
12103
|
onChange,
|
|
12151
|
-
debounce = 500,
|
|
12104
|
+
debounce: debounce2 = 500,
|
|
12152
12105
|
label,
|
|
12153
12106
|
labelClassname,
|
|
12154
12107
|
leftIcon,
|
|
@@ -12158,8 +12111,8 @@ function DebouncedInput({
|
|
|
12158
12111
|
error,
|
|
12159
12112
|
...props
|
|
12160
12113
|
}) {
|
|
12161
|
-
const [value, setValue] =
|
|
12162
|
-
const [isDebouncing, setIsDebouncing] =
|
|
12114
|
+
const [value, setValue] = useState21(initialValue);
|
|
12115
|
+
const [isDebouncing, setIsDebouncing] = useState21(false);
|
|
12163
12116
|
useEffect18(() => {
|
|
12164
12117
|
setValue(initialValue);
|
|
12165
12118
|
}, [initialValue]);
|
|
@@ -12170,12 +12123,12 @@ function DebouncedInput({
|
|
|
12170
12123
|
const timeout = setTimeout(() => {
|
|
12171
12124
|
onChange(value);
|
|
12172
12125
|
setIsDebouncing(false);
|
|
12173
|
-
},
|
|
12126
|
+
}, debounce2);
|
|
12174
12127
|
return () => {
|
|
12175
12128
|
clearTimeout(timeout);
|
|
12176
12129
|
setIsDebouncing(false);
|
|
12177
12130
|
};
|
|
12178
|
-
}, [
|
|
12131
|
+
}, [debounce2, initialValue, onChange, value]);
|
|
12179
12132
|
const renderRightIcon = () => {
|
|
12180
12133
|
if (showLoadingIndicator && isDebouncing) {
|
|
12181
12134
|
return /* @__PURE__ */ jsx72(CircleNotchIcon2, { className: "h-4 w-4 animate-spin text-muted-foreground" });
|
|
@@ -12201,15 +12154,32 @@ function DebouncedInput({
|
|
|
12201
12154
|
// src/components/event-calendar/AgendaView.tsx
|
|
12202
12155
|
import { addDays, format as format3, isToday } from "date-fns";
|
|
12203
12156
|
import { ptBR as ptBR3 } from "date-fns/locale";
|
|
12204
|
-
import { useMemo as
|
|
12157
|
+
import { useMemo as useMemo9 } from "react";
|
|
12205
12158
|
import { CalendarIcon as CalendarIcon2 } from "@phosphor-icons/react";
|
|
12206
|
-
import { jsx as jsx73, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
12159
|
+
import { Fragment as Fragment10, jsx as jsx73, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
12207
12160
|
function AgendaView({
|
|
12208
12161
|
currentDate,
|
|
12209
12162
|
events,
|
|
12210
|
-
onEventSelect
|
|
12163
|
+
onEventSelect,
|
|
12164
|
+
showUndatedEvents = false
|
|
12211
12165
|
}) {
|
|
12212
|
-
const
|
|
12166
|
+
const isValidDate3 = (d) => {
|
|
12167
|
+
try {
|
|
12168
|
+
const t = d instanceof Date ? d.getTime() : new Date(String(d)).getTime();
|
|
12169
|
+
return !isNaN(t);
|
|
12170
|
+
} catch {
|
|
12171
|
+
return false;
|
|
12172
|
+
}
|
|
12173
|
+
};
|
|
12174
|
+
const datedEvents = useMemo9(
|
|
12175
|
+
() => events.filter((e) => isValidDate3(e.start) && isValidDate3(e.end)),
|
|
12176
|
+
[events]
|
|
12177
|
+
);
|
|
12178
|
+
const undatedEvents = useMemo9(
|
|
12179
|
+
() => events.filter((e) => !(isValidDate3(e.start) && isValidDate3(e.end))),
|
|
12180
|
+
[events]
|
|
12181
|
+
);
|
|
12182
|
+
const days = useMemo9(() => {
|
|
12213
12183
|
console.log("Agenda view updating with date:", currentDate.toISOString());
|
|
12214
12184
|
return Array.from(
|
|
12215
12185
|
{ length: AgendaDaysToShow },
|
|
@@ -12219,48 +12189,66 @@ function AgendaView({
|
|
|
12219
12189
|
const handleEventClick = (event, e) => {
|
|
12220
12190
|
e.stopPropagation();
|
|
12221
12191
|
console.log("Agenda view event clicked:", event);
|
|
12222
|
-
onEventSelect(event);
|
|
12192
|
+
if (onEventSelect) onEventSelect(event);
|
|
12223
12193
|
};
|
|
12224
12194
|
const hasEvents = days.some(
|
|
12225
|
-
(day) => getAgendaEventsForDay(
|
|
12195
|
+
(day) => getAgendaEventsForDay(datedEvents, day).length > 0
|
|
12226
12196
|
);
|
|
12227
|
-
return /* @__PURE__ */ jsx73("div", { className: "border-border/70 border-t px-4", children: !hasEvents ? /* @__PURE__ */ jsxs55("div", { className: "flex min-h-[70svh] flex-col items-center justify-center py-16 text-center", children: [
|
|
12197
|
+
return /* @__PURE__ */ jsx73("div", { className: "border-border/70 border-t px-4", children: !hasEvents && !(showUndatedEvents && undatedEvents.length > 0) ? /* @__PURE__ */ jsxs55("div", { className: "flex min-h-[70svh] flex-col items-center justify-center py-16 text-center", children: [
|
|
12228
12198
|
/* @__PURE__ */ jsx73(CalendarIcon2, { className: "mb-2 text-muted-foreground/50", size: 32 }),
|
|
12229
12199
|
/* @__PURE__ */ jsx73("h3", { className: "font-medium text-lg", children: "Nenhum evento encontrado" }),
|
|
12230
12200
|
/* @__PURE__ */ jsx73("p", { className: "text-muted-foreground", children: "N\xE3o h\xE1 eventos agendados para este per\xEDodo." })
|
|
12231
|
-
] }) :
|
|
12232
|
-
|
|
12233
|
-
|
|
12234
|
-
|
|
12235
|
-
|
|
12236
|
-
|
|
12237
|
-
|
|
12238
|
-
|
|
12239
|
-
|
|
12240
|
-
|
|
12241
|
-
|
|
12242
|
-
|
|
12243
|
-
|
|
12244
|
-
|
|
12245
|
-
|
|
12246
|
-
|
|
12247
|
-
|
|
12248
|
-
|
|
12249
|
-
|
|
12250
|
-
|
|
12251
|
-
|
|
12252
|
-
|
|
12253
|
-
|
|
12254
|
-
|
|
12255
|
-
|
|
12256
|
-
|
|
12257
|
-
|
|
12258
|
-
|
|
12259
|
-
|
|
12260
|
-
|
|
12261
|
-
|
|
12262
|
-
|
|
12263
|
-
|
|
12201
|
+
] }) : /* @__PURE__ */ jsxs55(Fragment10, { children: [
|
|
12202
|
+
days.map((day) => {
|
|
12203
|
+
const dayEvents = getAgendaEventsForDay(datedEvents, day);
|
|
12204
|
+
if (dayEvents.length === 0) return null;
|
|
12205
|
+
return /* @__PURE__ */ jsxs55(
|
|
12206
|
+
"div",
|
|
12207
|
+
{
|
|
12208
|
+
className: "relative my-12 border-border/70 border-t",
|
|
12209
|
+
children: [
|
|
12210
|
+
/* @__PURE__ */ jsx73(
|
|
12211
|
+
"span",
|
|
12212
|
+
{
|
|
12213
|
+
className: "-top-3 absolute left-0 flex h-6 items-center bg-background pe-4 text-[10px] uppercase data-today:font-medium sm:pe-4 sm:text-xs",
|
|
12214
|
+
"data-today": isToday(day) || void 0,
|
|
12215
|
+
children: (() => {
|
|
12216
|
+
const s = format3(day, "d MMM, EEEE", { locale: ptBR3 });
|
|
12217
|
+
return s.split(" ").map((w) => w ? w[0].toUpperCase() + w.slice(1) : w).join(" ");
|
|
12218
|
+
})()
|
|
12219
|
+
}
|
|
12220
|
+
),
|
|
12221
|
+
/* @__PURE__ */ jsx73("div", { className: "mt-6 space-y-2", children: dayEvents.map((event) => /* @__PURE__ */ jsx73(
|
|
12222
|
+
EventItem,
|
|
12223
|
+
{
|
|
12224
|
+
event,
|
|
12225
|
+
onClick: onEventSelect ? (e) => handleEventClick(event, e) : void 0,
|
|
12226
|
+
view: "agenda",
|
|
12227
|
+
agendaOnly: showUndatedEvents,
|
|
12228
|
+
className: onEventSelect ? void 0 : "cursor-default hover:shadow-none hover:scale-100"
|
|
12229
|
+
},
|
|
12230
|
+
event.id
|
|
12231
|
+
)) })
|
|
12232
|
+
]
|
|
12233
|
+
},
|
|
12234
|
+
day.toString()
|
|
12235
|
+
);
|
|
12236
|
+
}),
|
|
12237
|
+
showUndatedEvents && undatedEvents.length > 0 && /* @__PURE__ */ jsxs55("div", { className: "relative my-12 border-border/70 border-t", children: [
|
|
12238
|
+
/* @__PURE__ */ jsx73("span", { className: "-top-3 absolute left-0 flex h-6 items-center bg-background pe-4 text-[10px] uppercase sm:pe-4 sm:text-xs", children: "Data de Atendimento n\xE3o Prevista" }),
|
|
12239
|
+
/* @__PURE__ */ jsx73("div", { className: "mt-6 space-y-2", children: undatedEvents.map((event) => /* @__PURE__ */ jsx73(
|
|
12240
|
+
EventItem,
|
|
12241
|
+
{
|
|
12242
|
+
event,
|
|
12243
|
+
onClick: onEventSelect ? (e) => handleEventClick(event, e) : void 0,
|
|
12244
|
+
view: "agenda",
|
|
12245
|
+
agendaOnly: showUndatedEvents,
|
|
12246
|
+
className: showUndatedEvents ? "cursor-default hover:shadow-none hover:scale-100 bg-gray-200/50 hover:bg-gray-200/40 text-gray-900/80 dark:bg-gray-700/25 dark:text-gray-200/90 shadow-none " : onEventSelect ? void 0 : "cursor-default hover:shadow-none hover:scale-100"
|
|
12247
|
+
},
|
|
12248
|
+
event.id
|
|
12249
|
+
)) })
|
|
12250
|
+
] })
|
|
12251
|
+
] }) });
|
|
12264
12252
|
}
|
|
12265
12253
|
|
|
12266
12254
|
// src/components/event-calendar/CalendarDND.tsx
|
|
@@ -12274,7 +12262,7 @@ import {
|
|
|
12274
12262
|
useSensors
|
|
12275
12263
|
} from "@dnd-kit/core";
|
|
12276
12264
|
import { addMinutes, differenceInMinutes } from "date-fns";
|
|
12277
|
-
import { useId as useId2, useRef as useRef9, useState as
|
|
12265
|
+
import { useId as useId2, useRef as useRef9, useState as useState22 } from "react";
|
|
12278
12266
|
|
|
12279
12267
|
// src/components/event-calendar/hooks.ts
|
|
12280
12268
|
import { createContext as createContext5, useContext as useContext6 } from "react";
|
|
@@ -12296,16 +12284,16 @@ function CalendarDndProvider({
|
|
|
12296
12284
|
children,
|
|
12297
12285
|
onEventUpdate
|
|
12298
12286
|
}) {
|
|
12299
|
-
const [activeEvent, setActiveEvent] =
|
|
12300
|
-
const [activeId, setActiveId] =
|
|
12301
|
-
const [activeView, setActiveView] =
|
|
12287
|
+
const [activeEvent, setActiveEvent] = useState22(null);
|
|
12288
|
+
const [activeId, setActiveId] = useState22(null);
|
|
12289
|
+
const [activeView, setActiveView] = useState22(
|
|
12302
12290
|
null
|
|
12303
12291
|
);
|
|
12304
|
-
const [currentTime, setCurrentTime] =
|
|
12305
|
-
const [eventHeight, setEventHeight] =
|
|
12306
|
-
const [isMultiDay, setIsMultiDay] =
|
|
12307
|
-
const [multiDayWidth, setMultiDayWidth] =
|
|
12308
|
-
const [dragHandlePosition, setDragHandlePosition] =
|
|
12292
|
+
const [currentTime, setCurrentTime] = useState22(null);
|
|
12293
|
+
const [eventHeight, setEventHeight] = useState22(null);
|
|
12294
|
+
const [isMultiDay, setIsMultiDay] = useState22(false);
|
|
12295
|
+
const [multiDayWidth, setMultiDayWidth] = useState22(null);
|
|
12296
|
+
const [dragHandlePosition, setDragHandlePosition] = useState22(null);
|
|
12309
12297
|
const eventDimensions = useRef9({ height: 0 });
|
|
12310
12298
|
const sensors = useSensors(
|
|
12311
12299
|
useSensor(MouseSensor, {
|
|
@@ -12530,7 +12518,7 @@ import {
|
|
|
12530
12518
|
isSameDay,
|
|
12531
12519
|
startOfDay
|
|
12532
12520
|
} from "date-fns";
|
|
12533
|
-
import { useMemo as
|
|
12521
|
+
import { useMemo as useMemo10 } from "react";
|
|
12534
12522
|
import { jsx as jsx75, jsxs as jsxs57 } from "react/jsx-runtime";
|
|
12535
12523
|
function DayView({
|
|
12536
12524
|
currentDate,
|
|
@@ -12538,14 +12526,14 @@ function DayView({
|
|
|
12538
12526
|
onEventSelect,
|
|
12539
12527
|
onEventCreate
|
|
12540
12528
|
}) {
|
|
12541
|
-
const hours =
|
|
12529
|
+
const hours = useMemo10(() => {
|
|
12542
12530
|
const dayStart = startOfDay(currentDate);
|
|
12543
12531
|
return eachHourOfInterval({
|
|
12544
12532
|
end: addHours(dayStart, EndHour - 1),
|
|
12545
12533
|
start: addHours(dayStart, StartHour)
|
|
12546
12534
|
});
|
|
12547
12535
|
}, [currentDate]);
|
|
12548
|
-
const dayEvents =
|
|
12536
|
+
const dayEvents = useMemo10(() => {
|
|
12549
12537
|
return events.filter((event) => {
|
|
12550
12538
|
const eventStart = new Date(event.start);
|
|
12551
12539
|
const eventEnd = new Date(event.end);
|
|
@@ -12554,17 +12542,17 @@ function DayView({
|
|
|
12554
12542
|
(a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
|
|
12555
12543
|
);
|
|
12556
12544
|
}, [currentDate, events]);
|
|
12557
|
-
const allDayEvents =
|
|
12545
|
+
const allDayEvents = useMemo10(() => {
|
|
12558
12546
|
return dayEvents.filter((event) => {
|
|
12559
12547
|
return event.allDay || isMultiDayEvent(event);
|
|
12560
12548
|
});
|
|
12561
12549
|
}, [dayEvents]);
|
|
12562
|
-
const timeEvents =
|
|
12550
|
+
const timeEvents = useMemo10(() => {
|
|
12563
12551
|
return dayEvents.filter((event) => {
|
|
12564
12552
|
return !event.allDay && !isMultiDayEvent(event);
|
|
12565
12553
|
});
|
|
12566
12554
|
}, [dayEvents]);
|
|
12567
|
-
const positionedEvents =
|
|
12555
|
+
const positionedEvents = useMemo10(() => {
|
|
12568
12556
|
const result = [];
|
|
12569
12557
|
const dayStart = startOfDay(currentDate);
|
|
12570
12558
|
const sortedEvents = [...timeEvents].sort((a, b) => {
|
|
@@ -12745,7 +12733,7 @@ function DayView({
|
|
|
12745
12733
|
import { useDraggable } from "@dnd-kit/core";
|
|
12746
12734
|
import { CSS } from "@dnd-kit/utilities";
|
|
12747
12735
|
import { differenceInDays } from "date-fns";
|
|
12748
|
-
import { useRef as useRef10, useState as
|
|
12736
|
+
import { useRef as useRef10, useState as useState23 } from "react";
|
|
12749
12737
|
import { jsx as jsx76 } from "react/jsx-runtime";
|
|
12750
12738
|
function DraggableEvent({
|
|
12751
12739
|
event,
|
|
@@ -12761,7 +12749,7 @@ function DraggableEvent({
|
|
|
12761
12749
|
}) {
|
|
12762
12750
|
const { activeId } = useCalendarDnd();
|
|
12763
12751
|
const elementRef = useRef10(null);
|
|
12764
|
-
const [dragHandlePosition, setDragHandlePosition] =
|
|
12752
|
+
const [dragHandlePosition, setDragHandlePosition] = useState23(null);
|
|
12765
12753
|
const eventStart = new Date(event.start);
|
|
12766
12754
|
const eventEnd = new Date(event.end);
|
|
12767
12755
|
const isMultiDayEvent2 = isMultiDay || event.allDay || differenceInDays(eventEnd, eventStart) >= 1;
|
|
@@ -12896,7 +12884,7 @@ import {
|
|
|
12896
12884
|
subWeeks
|
|
12897
12885
|
} from "date-fns";
|
|
12898
12886
|
import { ptBR as ptBR4 } from "date-fns/locale";
|
|
12899
|
-
import { useEffect as useEffect19, useMemo as
|
|
12887
|
+
import { useEffect as useEffect19, useMemo as useMemo11, useState as useState24, useCallback as useCallback12 } from "react";
|
|
12900
12888
|
import { toast as toast3 } from "sonner";
|
|
12901
12889
|
import {
|
|
12902
12890
|
ArrowDownIcon,
|
|
@@ -12912,14 +12900,19 @@ function EventCalendar({
|
|
|
12912
12900
|
onEventUpdate,
|
|
12913
12901
|
onEventDelete,
|
|
12914
12902
|
className,
|
|
12915
|
-
initialView = "month"
|
|
12903
|
+
initialView = "month",
|
|
12904
|
+
mode = "default"
|
|
12916
12905
|
}) {
|
|
12917
|
-
const
|
|
12918
|
-
const [
|
|
12919
|
-
const [
|
|
12906
|
+
const isAgendaOnly = mode === "agenda-only";
|
|
12907
|
+
const [currentDate, setCurrentDate] = useState24(/* @__PURE__ */ new Date());
|
|
12908
|
+
const [view, setView] = useState24(
|
|
12909
|
+
isAgendaOnly ? "agenda" : initialView
|
|
12910
|
+
);
|
|
12911
|
+
const [isFading, setIsFading] = useState24(false);
|
|
12920
12912
|
const FADE_DURATION = 220;
|
|
12921
12913
|
const changeView = useCallback12(
|
|
12922
12914
|
(next) => {
|
|
12915
|
+
if (isAgendaOnly) return;
|
|
12923
12916
|
if (next === view) return;
|
|
12924
12917
|
setIsFading(true);
|
|
12925
12918
|
window.setTimeout(() => {
|
|
@@ -12927,10 +12920,10 @@ function EventCalendar({
|
|
|
12927
12920
|
requestAnimationFrame(() => setIsFading(false));
|
|
12928
12921
|
}, FADE_DURATION);
|
|
12929
12922
|
},
|
|
12930
|
-
[view]
|
|
12923
|
+
[view, isAgendaOnly]
|
|
12931
12924
|
);
|
|
12932
|
-
const [isPaging, setIsPaging] =
|
|
12933
|
-
const [pageDirection, setPageDirection] =
|
|
12925
|
+
const [isPaging, setIsPaging] = useState24(false);
|
|
12926
|
+
const [pageDirection, setPageDirection] = useState24(
|
|
12934
12927
|
null
|
|
12935
12928
|
);
|
|
12936
12929
|
const PAGE_DURATION = 200;
|
|
@@ -12948,8 +12941,8 @@ function EventCalendar({
|
|
|
12948
12941
|
},
|
|
12949
12942
|
[]
|
|
12950
12943
|
);
|
|
12951
|
-
const [isEventDialogOpen, setIsEventDialogOpen] =
|
|
12952
|
-
const [selectedEvent, setSelectedEvent] =
|
|
12944
|
+
const [isEventDialogOpen, setIsEventDialogOpen] = useState24(false);
|
|
12945
|
+
const [selectedEvent, setSelectedEvent] = useState24(
|
|
12953
12946
|
null
|
|
12954
12947
|
);
|
|
12955
12948
|
useEffect19(() => {
|
|
@@ -12957,11 +12950,11 @@ function EventCalendar({
|
|
|
12957
12950
|
if (isEventDialogOpen || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLElement && e.target.isContentEditable) {
|
|
12958
12951
|
return;
|
|
12959
12952
|
}
|
|
12953
|
+
if (isAgendaOnly) return;
|
|
12960
12954
|
switch (e.key.toLowerCase()) {
|
|
12961
12955
|
case "m":
|
|
12962
12956
|
changeView("month");
|
|
12963
12957
|
break;
|
|
12964
|
-
// aceitar tanto 'w' (inglês) quanto 's' (pt-BR para "semana")
|
|
12965
12958
|
case "w":
|
|
12966
12959
|
case "s":
|
|
12967
12960
|
changeView("week");
|
|
@@ -12978,7 +12971,7 @@ function EventCalendar({
|
|
|
12978
12971
|
return () => {
|
|
12979
12972
|
window.removeEventListener("keydown", handleKeyDown);
|
|
12980
12973
|
};
|
|
12981
|
-
}, [isEventDialogOpen, changeView]);
|
|
12974
|
+
}, [isEventDialogOpen, changeView, isAgendaOnly]);
|
|
12982
12975
|
const handlePrevious = () => {
|
|
12983
12976
|
pageTransition(() => {
|
|
12984
12977
|
if (view === "month") {
|
|
@@ -13009,11 +13002,13 @@ function EventCalendar({
|
|
|
13009
13002
|
setCurrentDate(/* @__PURE__ */ new Date());
|
|
13010
13003
|
};
|
|
13011
13004
|
const handleEventSelect = (event) => {
|
|
13005
|
+
if (isAgendaOnly) return;
|
|
13012
13006
|
console.log("Event selected:", event);
|
|
13013
13007
|
setSelectedEvent(event);
|
|
13014
13008
|
setIsEventDialogOpen(true);
|
|
13015
13009
|
};
|
|
13016
13010
|
const handleEventCreate = (startTime) => {
|
|
13011
|
+
if (isAgendaOnly) return;
|
|
13017
13012
|
console.log("Creating new event at:", startTime);
|
|
13018
13013
|
const minutes = startTime.getMinutes();
|
|
13019
13014
|
const remainder = minutes % 15;
|
|
@@ -13087,7 +13082,7 @@ function EventCalendar({
|
|
|
13087
13082
|
position: "bottom-left"
|
|
13088
13083
|
});
|
|
13089
13084
|
};
|
|
13090
|
-
const viewTitle =
|
|
13085
|
+
const viewTitle = useMemo11(() => {
|
|
13091
13086
|
const capitalize = (s) => s && s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s;
|
|
13092
13087
|
if (view === "month") {
|
|
13093
13088
|
return capitalize(format5(currentDate, "MMMM yyyy", { locale: ptBR4 }));
|
|
@@ -13107,7 +13102,9 @@ function EventCalendar({
|
|
|
13107
13102
|
const month = capitalize(format5(currentDate, "MMMM", { locale: ptBR4 }));
|
|
13108
13103
|
const year = format5(currentDate, "yyyy", { locale: ptBR4 });
|
|
13109
13104
|
const short = `${dayNum} de ${month} de ${year}`;
|
|
13110
|
-
const long = `${format5(currentDate, "EEE", {
|
|
13105
|
+
const long = `${format5(currentDate, "EEE", {
|
|
13106
|
+
locale: ptBR4
|
|
13107
|
+
})}, ${dayNum} de ${month} de ${year}`;
|
|
13111
13108
|
return /* @__PURE__ */ jsxs58(Fragment11, { children: [
|
|
13112
13109
|
/* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: "min-[480px]:hidden", children: short }),
|
|
13113
13110
|
/* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: "max-[479px]:hidden min-md:hidden", children: short }),
|
|
@@ -13126,220 +13123,224 @@ function EventCalendar({
|
|
|
13126
13123
|
}
|
|
13127
13124
|
return capitalize(format5(currentDate, "MMMM yyyy", { locale: ptBR4 }));
|
|
13128
13125
|
}, [currentDate, view]);
|
|
13129
|
-
|
|
13130
|
-
|
|
13131
|
-
|
|
13132
|
-
|
|
13133
|
-
|
|
13134
|
-
|
|
13135
|
-
|
|
13136
|
-
|
|
13137
|
-
|
|
13138
|
-
|
|
13139
|
-
|
|
13140
|
-
|
|
13141
|
-
|
|
13142
|
-
|
|
13143
|
-
|
|
13144
|
-
|
|
13145
|
-
|
|
13146
|
-
children: [
|
|
13147
|
-
/* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-1 sm:gap-4", children: [
|
|
13148
|
-
/* @__PURE__ */ jsxs58(
|
|
13149
|
-
ButtonBase,
|
|
13150
|
-
{
|
|
13151
|
-
className: "max-[479px]:aspect-square max-[479px]:p-0!",
|
|
13152
|
-
onClick: handleToday,
|
|
13153
|
-
variant: "outline",
|
|
13154
|
-
children: [
|
|
13155
|
-
/* @__PURE__ */ jsx78(
|
|
13156
|
-
CalendarIcon3,
|
|
13157
|
-
{
|
|
13158
|
-
"aria-hidden": "true",
|
|
13159
|
-
className: "min-[480px]:hidden",
|
|
13160
|
-
size: 16
|
|
13161
|
-
}
|
|
13162
|
-
),
|
|
13163
|
-
/* @__PURE__ */ jsx78("span", { className: "max-[479px]:sr-only", children: "Hoje" })
|
|
13164
|
-
]
|
|
13165
|
-
}
|
|
13166
|
-
),
|
|
13167
|
-
/* @__PURE__ */ jsxs58("div", { className: "flex items-center sm:gap-2", children: [
|
|
13126
|
+
const calendarContent = /* @__PURE__ */ jsxs58(Fragment11, { children: [
|
|
13127
|
+
/* @__PURE__ */ jsxs58(
|
|
13128
|
+
"div",
|
|
13129
|
+
{
|
|
13130
|
+
className: cn(
|
|
13131
|
+
"flex items-center justify-between p-2 sm:p-4",
|
|
13132
|
+
className
|
|
13133
|
+
),
|
|
13134
|
+
children: [
|
|
13135
|
+
/* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-1 sm:gap-4", children: [
|
|
13136
|
+
!isAgendaOnly && /* @__PURE__ */ jsxs58(
|
|
13137
|
+
ButtonBase,
|
|
13138
|
+
{
|
|
13139
|
+
className: "max-[479px]:aspect-square max-[479px]:p-0!",
|
|
13140
|
+
onClick: handleToday,
|
|
13141
|
+
variant: "outline",
|
|
13142
|
+
children: [
|
|
13168
13143
|
/* @__PURE__ */ jsx78(
|
|
13169
|
-
|
|
13144
|
+
CalendarIcon3,
|
|
13170
13145
|
{
|
|
13171
|
-
"aria-
|
|
13172
|
-
|
|
13173
|
-
size:
|
|
13174
|
-
variant: "ghost",
|
|
13175
|
-
children: /* @__PURE__ */ jsx78(CaretLeft, { "aria-hidden": "true", size: 16 })
|
|
13146
|
+
"aria-hidden": "true",
|
|
13147
|
+
className: "min-[480px]:hidden",
|
|
13148
|
+
size: 16
|
|
13176
13149
|
}
|
|
13177
13150
|
),
|
|
13178
|
-
/* @__PURE__ */ jsx78(
|
|
13179
|
-
|
|
13180
|
-
|
|
13181
|
-
"aria-label": "Pr\xF3ximo",
|
|
13182
|
-
onClick: handleNext,
|
|
13183
|
-
size: "icon",
|
|
13184
|
-
variant: "ghost",
|
|
13185
|
-
children: /* @__PURE__ */ jsx78(CaretRight, { "aria-hidden": "true", size: 16 })
|
|
13186
|
-
}
|
|
13187
|
-
)
|
|
13188
|
-
] }),
|
|
13189
|
-
/* @__PURE__ */ jsx78("h2", { className: "font-semibold text-sm sm:text-lg md:text-xl", children: viewTitle })
|
|
13190
|
-
] }),
|
|
13191
|
-
/* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-2", children: [
|
|
13192
|
-
/* @__PURE__ */ jsxs58(DropDownMenuBase, { children: [
|
|
13193
|
-
/* @__PURE__ */ jsx78(DropDownMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs58(
|
|
13194
|
-
ButtonBase,
|
|
13195
|
-
{
|
|
13196
|
-
className: "gap-1.5 max-[479px]:h-8",
|
|
13197
|
-
variant: "outline",
|
|
13198
|
-
children: [
|
|
13199
|
-
/* @__PURE__ */ jsxs58("span", { children: [
|
|
13200
|
-
/* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: "min-[480px]:hidden", children: (() => {
|
|
13201
|
-
const labels = {
|
|
13202
|
-
month: "M\xEAs",
|
|
13203
|
-
week: "Semana",
|
|
13204
|
-
day: "Dia",
|
|
13205
|
-
agenda: "Agenda"
|
|
13206
|
-
};
|
|
13207
|
-
return (labels[view] || view).charAt(0).toUpperCase();
|
|
13208
|
-
})() }),
|
|
13209
|
-
/* @__PURE__ */ jsx78("span", { className: "max-[479px]:sr-only", children: (() => {
|
|
13210
|
-
const labels = {
|
|
13211
|
-
month: "M\xEAs",
|
|
13212
|
-
week: "Semana",
|
|
13213
|
-
day: "Dia",
|
|
13214
|
-
agenda: "Agenda"
|
|
13215
|
-
};
|
|
13216
|
-
return labels[view] || view;
|
|
13217
|
-
})() })
|
|
13218
|
-
] }),
|
|
13219
|
-
/* @__PURE__ */ jsx78(
|
|
13220
|
-
ArrowDownIcon,
|
|
13221
|
-
{
|
|
13222
|
-
"aria-hidden": "true",
|
|
13223
|
-
className: "-me-1 opacity-60",
|
|
13224
|
-
size: 16
|
|
13225
|
-
}
|
|
13226
|
-
)
|
|
13227
|
-
]
|
|
13228
|
-
}
|
|
13229
|
-
) }),
|
|
13230
|
-
/* @__PURE__ */ jsxs58(DropDownMenuContentBase, { align: "end", className: "min-w-32", children: [
|
|
13231
|
-
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("month"), children: [
|
|
13232
|
-
"M\xEAs ",
|
|
13233
|
-
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "M" })
|
|
13234
|
-
] }),
|
|
13235
|
-
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("week"), children: [
|
|
13236
|
-
"Semana ",
|
|
13237
|
-
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "S" })
|
|
13238
|
-
] }),
|
|
13239
|
-
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("day"), children: [
|
|
13240
|
-
"Dia ",
|
|
13241
|
-
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "D" })
|
|
13242
|
-
] }),
|
|
13243
|
-
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("agenda"), children: [
|
|
13244
|
-
"Agenda ",
|
|
13245
|
-
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "A" })
|
|
13246
|
-
] })
|
|
13247
|
-
] })
|
|
13248
|
-
] }),
|
|
13249
|
-
/* @__PURE__ */ jsxs58(
|
|
13250
|
-
ButtonBase,
|
|
13251
|
-
{
|
|
13252
|
-
className: "max-[479px]:aspect-square max-[479px]:p-0!",
|
|
13253
|
-
onClick: () => {
|
|
13254
|
-
setSelectedEvent(null);
|
|
13255
|
-
setIsEventDialogOpen(true);
|
|
13256
|
-
},
|
|
13257
|
-
size: "sm",
|
|
13258
|
-
children: [
|
|
13259
|
-
/* @__PURE__ */ jsx78(
|
|
13260
|
-
PlusIcon3,
|
|
13261
|
-
{
|
|
13262
|
-
"aria-hidden": "true",
|
|
13263
|
-
className: "sm:-ms-1 opacity-60",
|
|
13264
|
-
size: 16
|
|
13265
|
-
}
|
|
13266
|
-
),
|
|
13267
|
-
/* @__PURE__ */ jsx78("span", { className: "max-sm:sr-only", children: "Novo evento" })
|
|
13268
|
-
]
|
|
13269
|
-
}
|
|
13270
|
-
)
|
|
13271
|
-
] })
|
|
13272
|
-
]
|
|
13273
|
-
}
|
|
13274
|
-
),
|
|
13275
|
-
/* @__PURE__ */ jsxs58(
|
|
13276
|
-
"div",
|
|
13277
|
-
{
|
|
13278
|
-
className: cn(
|
|
13279
|
-
"flex flex-1 flex-col transition-all duration-200 ease-in-out",
|
|
13280
|
-
isFading ? "opacity-0 -translate-y-2 pointer-events-none" : isPaging ? pageDirection === "left" ? "-translate-x-4 opacity-0 pointer-events-none" : "translate-x-4 opacity-0 pointer-events-none" : "opacity-100 translate-y-0"
|
|
13151
|
+
/* @__PURE__ */ jsx78("span", { className: "max-[479px]:sr-only", children: "Hoje" })
|
|
13152
|
+
]
|
|
13153
|
+
}
|
|
13281
13154
|
),
|
|
13282
|
-
"
|
|
13283
|
-
|
|
13284
|
-
|
|
13285
|
-
MonthView,
|
|
13286
|
-
{
|
|
13287
|
-
currentDate,
|
|
13288
|
-
events,
|
|
13289
|
-
onEventCreate: handleEventCreate,
|
|
13290
|
-
onEventSelect: handleEventSelect
|
|
13291
|
-
}
|
|
13292
|
-
),
|
|
13293
|
-
view === "week" && /* @__PURE__ */ jsx78(
|
|
13294
|
-
WeekView,
|
|
13295
|
-
{
|
|
13296
|
-
currentDate,
|
|
13297
|
-
events,
|
|
13298
|
-
onEventCreate: handleEventCreate,
|
|
13299
|
-
onEventSelect: handleEventSelect
|
|
13300
|
-
}
|
|
13301
|
-
),
|
|
13302
|
-
view === "day" && /* @__PURE__ */ jsx78(
|
|
13303
|
-
DayView,
|
|
13155
|
+
/* @__PURE__ */ jsxs58("div", { className: "flex items-center sm:gap-2", children: [
|
|
13156
|
+
/* @__PURE__ */ jsx78(
|
|
13157
|
+
ButtonBase,
|
|
13304
13158
|
{
|
|
13305
|
-
|
|
13306
|
-
|
|
13307
|
-
|
|
13308
|
-
|
|
13159
|
+
"aria-label": "Anterior",
|
|
13160
|
+
onClick: handlePrevious,
|
|
13161
|
+
size: "icon",
|
|
13162
|
+
variant: "ghost",
|
|
13163
|
+
children: /* @__PURE__ */ jsx78(CaretLeft, { "aria-hidden": "true", size: 16 })
|
|
13309
13164
|
}
|
|
13310
13165
|
),
|
|
13311
|
-
|
|
13312
|
-
|
|
13166
|
+
/* @__PURE__ */ jsx78(
|
|
13167
|
+
ButtonBase,
|
|
13313
13168
|
{
|
|
13314
|
-
|
|
13315
|
-
|
|
13316
|
-
|
|
13169
|
+
"aria-label": "Pr\xF3ximo",
|
|
13170
|
+
onClick: handleNext,
|
|
13171
|
+
size: "icon",
|
|
13172
|
+
variant: "ghost",
|
|
13173
|
+
children: /* @__PURE__ */ jsx78(CaretRight, { "aria-hidden": "true", size: 16 })
|
|
13317
13174
|
}
|
|
13318
13175
|
)
|
|
13319
|
-
]
|
|
13320
|
-
|
|
13176
|
+
] }),
|
|
13177
|
+
/* @__PURE__ */ jsx78("h2", { className: "font-semibold text-sm sm:text-lg md:text-xl", children: viewTitle })
|
|
13178
|
+
] }),
|
|
13179
|
+
/* @__PURE__ */ jsx78("div", { className: "flex items-center gap-2", children: !isAgendaOnly && /* @__PURE__ */ jsxs58(Fragment11, { children: [
|
|
13180
|
+
/* @__PURE__ */ jsxs58(DropDownMenuBase, { children: [
|
|
13181
|
+
/* @__PURE__ */ jsx78(DropDownMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs58(
|
|
13182
|
+
ButtonBase,
|
|
13183
|
+
{
|
|
13184
|
+
className: "gap-1.5 max-[479px]:h-8",
|
|
13185
|
+
variant: "outline",
|
|
13186
|
+
children: [
|
|
13187
|
+
/* @__PURE__ */ jsxs58("span", { children: [
|
|
13188
|
+
/* @__PURE__ */ jsx78("span", { "aria-hidden": "true", className: "min-[480px]:hidden", children: (() => {
|
|
13189
|
+
const labels = {
|
|
13190
|
+
month: "M\xEAs",
|
|
13191
|
+
week: "Semana",
|
|
13192
|
+
day: "Dia",
|
|
13193
|
+
agenda: "Agenda"
|
|
13194
|
+
};
|
|
13195
|
+
return (labels[view] || view).charAt(0).toUpperCase();
|
|
13196
|
+
})() }),
|
|
13197
|
+
/* @__PURE__ */ jsx78("span", { className: "max-[479px]:sr-only", children: (() => {
|
|
13198
|
+
const labels = {
|
|
13199
|
+
month: "M\xEAs",
|
|
13200
|
+
week: "Semana",
|
|
13201
|
+
day: "Dia",
|
|
13202
|
+
agenda: "Agenda"
|
|
13203
|
+
};
|
|
13204
|
+
return labels[view] || view;
|
|
13205
|
+
})() })
|
|
13206
|
+
] }),
|
|
13207
|
+
/* @__PURE__ */ jsx78(
|
|
13208
|
+
ArrowDownIcon,
|
|
13209
|
+
{
|
|
13210
|
+
"aria-hidden": "true",
|
|
13211
|
+
className: "-me-1 opacity-60",
|
|
13212
|
+
size: 16
|
|
13213
|
+
}
|
|
13214
|
+
)
|
|
13215
|
+
]
|
|
13216
|
+
}
|
|
13217
|
+
) }),
|
|
13218
|
+
/* @__PURE__ */ jsxs58(DropDownMenuContentBase, { align: "end", className: "min-w-32", children: [
|
|
13219
|
+
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("month"), children: [
|
|
13220
|
+
"M\xEAs ",
|
|
13221
|
+
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "M" })
|
|
13222
|
+
] }),
|
|
13223
|
+
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("week"), children: [
|
|
13224
|
+
"Semana",
|
|
13225
|
+
" ",
|
|
13226
|
+
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "S" })
|
|
13227
|
+
] }),
|
|
13228
|
+
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("day"), children: [
|
|
13229
|
+
"Dia ",
|
|
13230
|
+
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "D" })
|
|
13231
|
+
] }),
|
|
13232
|
+
/* @__PURE__ */ jsxs58(DropDownMenuItemBase, { onClick: () => changeView("agenda"), children: [
|
|
13233
|
+
"Agenda",
|
|
13234
|
+
" ",
|
|
13235
|
+
/* @__PURE__ */ jsx78(DropDownMenuShortcutBase, { children: "A" })
|
|
13236
|
+
] })
|
|
13237
|
+
] })
|
|
13238
|
+
] }),
|
|
13239
|
+
/* @__PURE__ */ jsxs58(
|
|
13240
|
+
ButtonBase,
|
|
13241
|
+
{
|
|
13242
|
+
className: "max-[479px]:aspect-square max-[479px]:p-0!",
|
|
13243
|
+
onClick: () => {
|
|
13244
|
+
setSelectedEvent(null);
|
|
13245
|
+
setIsEventDialogOpen(true);
|
|
13246
|
+
},
|
|
13247
|
+
size: "sm",
|
|
13248
|
+
children: [
|
|
13249
|
+
/* @__PURE__ */ jsx78(
|
|
13250
|
+
PlusIcon3,
|
|
13251
|
+
{
|
|
13252
|
+
"aria-hidden": "true",
|
|
13253
|
+
className: "sm:-ms-1 opacity-60",
|
|
13254
|
+
size: 16
|
|
13255
|
+
}
|
|
13256
|
+
),
|
|
13257
|
+
/* @__PURE__ */ jsx78("span", { className: "max-sm:sr-only", children: "Novo evento" })
|
|
13258
|
+
]
|
|
13259
|
+
}
|
|
13260
|
+
)
|
|
13261
|
+
] }) })
|
|
13262
|
+
]
|
|
13263
|
+
}
|
|
13264
|
+
),
|
|
13265
|
+
/* @__PURE__ */ jsxs58(
|
|
13266
|
+
"div",
|
|
13267
|
+
{
|
|
13268
|
+
className: cn(
|
|
13269
|
+
"flex flex-1 flex-col transition-all duration-200 ease-in-out",
|
|
13270
|
+
isFading ? "opacity-0 -translate-y-2 pointer-events-none" : isPaging ? pageDirection === "left" ? "-translate-x-4 opacity-0 pointer-events-none" : "translate-x-4 opacity-0 pointer-events-none" : "opacity-100 translate-y-0"
|
|
13321
13271
|
),
|
|
13322
|
-
|
|
13323
|
-
|
|
13324
|
-
|
|
13325
|
-
|
|
13326
|
-
|
|
13327
|
-
|
|
13328
|
-
|
|
13329
|
-
|
|
13330
|
-
|
|
13331
|
-
|
|
13332
|
-
|
|
13333
|
-
|
|
13334
|
-
|
|
13335
|
-
|
|
13272
|
+
"aria-live": "polite",
|
|
13273
|
+
children: [
|
|
13274
|
+
view === "month" && /* @__PURE__ */ jsx78(
|
|
13275
|
+
MonthView,
|
|
13276
|
+
{
|
|
13277
|
+
currentDate,
|
|
13278
|
+
events,
|
|
13279
|
+
onEventCreate: handleEventCreate,
|
|
13280
|
+
onEventSelect: handleEventSelect
|
|
13281
|
+
}
|
|
13282
|
+
),
|
|
13283
|
+
view === "week" && /* @__PURE__ */ jsx78(
|
|
13284
|
+
WeekView,
|
|
13285
|
+
{
|
|
13286
|
+
currentDate,
|
|
13287
|
+
events,
|
|
13288
|
+
onEventCreate: handleEventCreate,
|
|
13289
|
+
onEventSelect: handleEventSelect
|
|
13290
|
+
}
|
|
13291
|
+
),
|
|
13292
|
+
view === "day" && /* @__PURE__ */ jsx78(
|
|
13293
|
+
DayView,
|
|
13294
|
+
{
|
|
13295
|
+
currentDate,
|
|
13296
|
+
events,
|
|
13297
|
+
onEventCreate: handleEventCreate,
|
|
13298
|
+
onEventSelect: handleEventSelect
|
|
13299
|
+
}
|
|
13300
|
+
),
|
|
13301
|
+
view === "agenda" && /* @__PURE__ */ jsx78(
|
|
13302
|
+
AgendaView,
|
|
13303
|
+
{
|
|
13304
|
+
currentDate,
|
|
13305
|
+
events,
|
|
13306
|
+
onEventSelect: isAgendaOnly ? void 0 : handleEventSelect,
|
|
13307
|
+
showUndatedEvents: isAgendaOnly
|
|
13308
|
+
}
|
|
13309
|
+
)
|
|
13310
|
+
]
|
|
13311
|
+
}
|
|
13312
|
+
),
|
|
13313
|
+
/* @__PURE__ */ jsx78(
|
|
13314
|
+
EventDialog,
|
|
13315
|
+
{
|
|
13316
|
+
event: selectedEvent,
|
|
13317
|
+
isOpen: isEventDialogOpen,
|
|
13318
|
+
onClose: () => {
|
|
13319
|
+
setIsEventDialogOpen(false);
|
|
13320
|
+
setSelectedEvent(null);
|
|
13321
|
+
},
|
|
13322
|
+
onDelete: handleEventDelete,
|
|
13323
|
+
onSave: handleEventSave
|
|
13324
|
+
}
|
|
13325
|
+
)
|
|
13326
|
+
] });
|
|
13327
|
+
return /* @__PURE__ */ jsx78(
|
|
13328
|
+
"div",
|
|
13329
|
+
{
|
|
13330
|
+
className: "flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1 p-6",
|
|
13331
|
+
style: {
|
|
13332
|
+
"--event-gap": `${EventGap}px`,
|
|
13333
|
+
"--event-height": `${EventHeight}px`,
|
|
13334
|
+
"--week-cells-height": `${WeekCellsHeight}px`
|
|
13335
|
+
},
|
|
13336
|
+
children: isAgendaOnly ? calendarContent : /* @__PURE__ */ jsx78(CalendarDndProvider, { onEventUpdate: handleEventUpdate, children: calendarContent })
|
|
13336
13337
|
}
|
|
13337
13338
|
);
|
|
13338
13339
|
}
|
|
13339
13340
|
|
|
13340
13341
|
// src/components/event-calendar/EventDialog.tsx
|
|
13341
13342
|
import { format as format6, isBefore } from "date-fns";
|
|
13342
|
-
import { useCallback as useCallback13, useEffect as useEffect20, useMemo as
|
|
13343
|
+
import { useCallback as useCallback13, useEffect as useEffect20, useMemo as useMemo12, useState as useState25 } from "react";
|
|
13343
13344
|
import { RadioGroup as RadioGroup3, RadioGroupItem } from "@radix-ui/react-radio-group";
|
|
13344
13345
|
import { motion as motion16 } from "framer-motion";
|
|
13345
13346
|
import { ptBR as ptBR5 } from "date-fns/locale";
|
|
@@ -13352,18 +13353,18 @@ function EventDialog({
|
|
|
13352
13353
|
onSave,
|
|
13353
13354
|
onDelete
|
|
13354
13355
|
}) {
|
|
13355
|
-
const [title, setTitle] =
|
|
13356
|
-
const [description, setDescription] =
|
|
13357
|
-
const [startDate, setStartDate] =
|
|
13358
|
-
const [endDate, setEndDate] =
|
|
13359
|
-
const [startTime, setStartTime] =
|
|
13360
|
-
const [endTime, setEndTime] =
|
|
13361
|
-
const [allDay, setAllDay] =
|
|
13362
|
-
const [location, setLocation] =
|
|
13363
|
-
const [color, setColor] =
|
|
13364
|
-
const [error, setError] =
|
|
13365
|
-
const [startDateOpen, setStartDateOpen] =
|
|
13366
|
-
const [endDateOpen, setEndDateOpen] =
|
|
13356
|
+
const [title, setTitle] = useState25("");
|
|
13357
|
+
const [description, setDescription] = useState25("");
|
|
13358
|
+
const [startDate, setStartDate] = useState25(/* @__PURE__ */ new Date());
|
|
13359
|
+
const [endDate, setEndDate] = useState25(/* @__PURE__ */ new Date());
|
|
13360
|
+
const [startTime, setStartTime] = useState25(`${DefaultStartHour}:00`);
|
|
13361
|
+
const [endTime, setEndTime] = useState25(`${DefaultEndHour}:00`);
|
|
13362
|
+
const [allDay, setAllDay] = useState25(false);
|
|
13363
|
+
const [location, setLocation] = useState25("");
|
|
13364
|
+
const [color, setColor] = useState25("sky");
|
|
13365
|
+
const [error, setError] = useState25(null);
|
|
13366
|
+
const [startDateOpen, setStartDateOpen] = useState25(false);
|
|
13367
|
+
const [endDateOpen, setEndDateOpen] = useState25(false);
|
|
13367
13368
|
useEffect20(() => {
|
|
13368
13369
|
}, [event]);
|
|
13369
13370
|
const resetForm = useCallback13(() => {
|
|
@@ -13401,7 +13402,7 @@ function EventDialog({
|
|
|
13401
13402
|
resetForm();
|
|
13402
13403
|
}
|
|
13403
13404
|
}, [event, formatTimeForInput, resetForm]);
|
|
13404
|
-
const timeOptions =
|
|
13405
|
+
const timeOptions = useMemo12(() => {
|
|
13405
13406
|
const options = [];
|
|
13406
13407
|
for (let hour = StartHour; hour <= EndHour; hour++) {
|
|
13407
13408
|
for (let minute = 0; minute < 60; minute += 15) {
|
|
@@ -13801,11 +13802,19 @@ function EventDialog({
|
|
|
13801
13802
|
|
|
13802
13803
|
// src/components/event-calendar/EventItem.tsx
|
|
13803
13804
|
import { differenceInMinutes as differenceInMinutes3, format as format7, isPast } from "date-fns";
|
|
13804
|
-
import { useMemo as
|
|
13805
|
+
import { useMemo as useMemo13 } from "react";
|
|
13805
13806
|
import { Fragment as Fragment12, jsx as jsx80, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
13806
13807
|
var formatTimeWithOptionalMinutes = (date) => {
|
|
13807
13808
|
return format7(date, "HH:mm");
|
|
13808
13809
|
};
|
|
13810
|
+
var isValidDate = (d) => {
|
|
13811
|
+
try {
|
|
13812
|
+
const dt = d instanceof Date ? d : new Date(String(d));
|
|
13813
|
+
return !isNaN(dt.getTime());
|
|
13814
|
+
} catch {
|
|
13815
|
+
return false;
|
|
13816
|
+
}
|
|
13817
|
+
};
|
|
13809
13818
|
function EventWrapper({
|
|
13810
13819
|
event,
|
|
13811
13820
|
isFirstDay = true,
|
|
@@ -13821,16 +13830,18 @@ function EventWrapper({
|
|
|
13821
13830
|
onTouchStart,
|
|
13822
13831
|
ariaLabel
|
|
13823
13832
|
}) {
|
|
13824
|
-
const
|
|
13833
|
+
const hasValidTimeForWrapper = isValidDate(event.start) && isValidDate(event.end);
|
|
13834
|
+
const displayEnd = hasValidTimeForWrapper ? currentTime ? new Date(
|
|
13825
13835
|
new Date(currentTime).getTime() + (new Date(event.end).getTime() - new Date(event.start).getTime())
|
|
13826
|
-
) : new Date(event.end);
|
|
13827
|
-
const isEventInPast = isPast(displayEnd);
|
|
13836
|
+
) : new Date(event.end) : void 0;
|
|
13837
|
+
const isEventInPast = displayEnd ? isPast(displayEnd) : false;
|
|
13838
|
+
const colorClasses = hasValidTimeForWrapper ? getEventColorClasses(event.color) : "bg-gray-200/50 hover:bg-gray-200/40 text-gray-900/80 dark:bg-gray-700/25 dark:text-gray-200/90 shadow-none";
|
|
13828
13839
|
return /* @__PURE__ */ jsx80(
|
|
13829
13840
|
"button",
|
|
13830
13841
|
{
|
|
13831
13842
|
className: cn(
|
|
13832
13843
|
"flex w-full select-none overflow-hidden px-3 py-1 text-left font-medium outline-none transition-transform duration-150 ease-out backdrop-blur-sm focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:border-ring data-dragging:cursor-grabbing data-past-event:line-through data-dragging:shadow-lg sm:px-3 rounded-lg shadow-sm hover:shadow-md hover:scale-105",
|
|
13833
|
-
|
|
13844
|
+
colorClasses,
|
|
13834
13845
|
getBorderRadiusClasses(isFirstDay, isLastDay),
|
|
13835
13846
|
className
|
|
13836
13847
|
),
|
|
@@ -13861,21 +13872,39 @@ function EventItem({
|
|
|
13861
13872
|
dndListeners,
|
|
13862
13873
|
dndAttributes,
|
|
13863
13874
|
onMouseDown,
|
|
13864
|
-
onTouchStart
|
|
13875
|
+
onTouchStart,
|
|
13876
|
+
agendaOnly = false
|
|
13865
13877
|
}) {
|
|
13866
13878
|
const eventColor = event.color;
|
|
13867
|
-
const
|
|
13868
|
-
|
|
13869
|
-
|
|
13870
|
-
|
|
13871
|
-
|
|
13872
|
-
|
|
13873
|
-
|
|
13874
|
-
|
|
13875
|
-
|
|
13879
|
+
const hasValidTime = isValidDate(event.start) && isValidDate(event.end) || isValidDate(event.attend_date);
|
|
13880
|
+
const colorClasses = hasValidTime ? getEventColorClasses(eventColor) : "bg-gray-200/50 hover:bg-gray-200/40 text-gray-900/80 dark:bg-gray-700/25 dark:text-gray-200/90 shadow-none";
|
|
13881
|
+
const displayStart = useMemo13(() => {
|
|
13882
|
+
if (!hasValidTime) return void 0;
|
|
13883
|
+
if (isValidDate(event.start))
|
|
13884
|
+
return currentTime || new Date(event.start);
|
|
13885
|
+
if (isValidDate(event.attend_date))
|
|
13886
|
+
return currentTime || new Date(event.attend_date);
|
|
13887
|
+
return void 0;
|
|
13888
|
+
}, [currentTime, event.start, event.attend_date, hasValidTime]);
|
|
13889
|
+
const displayEnd = useMemo13(() => {
|
|
13890
|
+
if (!hasValidTime) return void 0;
|
|
13891
|
+
if (isValidDate(event.end)) {
|
|
13892
|
+
return currentTime ? new Date(
|
|
13893
|
+
new Date(currentTime).getTime() + (new Date(event.end).getTime() - new Date(event.start).getTime())
|
|
13894
|
+
) : new Date(event.end);
|
|
13895
|
+
}
|
|
13896
|
+
if (isValidDate(event.attend_date)) {
|
|
13897
|
+
const start = new Date(event.attend_date);
|
|
13898
|
+
return addHoursToDate(start, 1);
|
|
13899
|
+
}
|
|
13900
|
+
return void 0;
|
|
13901
|
+
}, [currentTime, event.start, event.end, event.attend_date, hasValidTime]);
|
|
13902
|
+
const durationMinutes = useMemo13(() => {
|
|
13903
|
+
if (!hasValidTime || !displayStart || !displayEnd) return 0;
|
|
13876
13904
|
return differenceInMinutes3(displayEnd, displayStart);
|
|
13877
|
-
}, [displayStart, displayEnd]);
|
|
13905
|
+
}, [displayStart, displayEnd, hasValidTime]);
|
|
13878
13906
|
const getEventTime = () => {
|
|
13907
|
+
if (!hasValidTime) return "";
|
|
13879
13908
|
if (event.allDay) return "All day";
|
|
13880
13909
|
if (durationMinutes < 45) {
|
|
13881
13910
|
return formatTimeWithOptionalMinutes(displayStart);
|
|
@@ -13884,9 +13913,20 @@ function EventItem({
|
|
|
13884
13913
|
displayStart
|
|
13885
13914
|
)} - ${formatTimeWithOptionalMinutes(displayEnd)}`;
|
|
13886
13915
|
};
|
|
13887
|
-
|
|
13888
|
-
|
|
13889
|
-
|
|
13916
|
+
let ariaLabel;
|
|
13917
|
+
if (!hasValidTime) {
|
|
13918
|
+
ariaLabel = event.title;
|
|
13919
|
+
} else if (event.allDay) {
|
|
13920
|
+
ariaLabel = `${event.title}, All day`;
|
|
13921
|
+
} else if (durationMinutes < 45) {
|
|
13922
|
+
ariaLabel = `${event.title}, ${formatTimeWithOptionalMinutes(
|
|
13923
|
+
displayStart
|
|
13924
|
+
)}`;
|
|
13925
|
+
} else {
|
|
13926
|
+
ariaLabel = `${event.title}, ${formatTimeWithOptionalMinutes(
|
|
13927
|
+
displayStart
|
|
13928
|
+
)} - ${formatTimeWithOptionalMinutes(displayEnd)}`;
|
|
13929
|
+
}
|
|
13890
13930
|
if (view === "month") {
|
|
13891
13931
|
return /* @__PURE__ */ jsx80(
|
|
13892
13932
|
EventWrapper,
|
|
@@ -13907,8 +13947,17 @@ function EventItem({
|
|
|
13907
13947
|
onMouseDown,
|
|
13908
13948
|
onTouchStart,
|
|
13909
13949
|
children: children || /* @__PURE__ */ jsxs60("span", { className: "flex items-center gap-2 truncate", children: [
|
|
13910
|
-
!event.allDay && /* @__PURE__ */ jsx80("span", { className: "truncate font-normal opacity-80 sm:text-[11px] bg-white/10 px-2 py-0.5 rounded-full text-[11px]", children: formatTimeWithOptionalMinutes(displayStart) }),
|
|
13911
|
-
/* @__PURE__ */ jsx80(
|
|
13950
|
+
!event.allDay && hasValidTime && displayStart && /* @__PURE__ */ jsx80("span", { className: "truncate font-normal opacity-80 sm:text-[11px] bg-white/10 px-2 py-0.5 rounded-full text-[11px]", children: formatTimeWithOptionalMinutes(displayStart) }),
|
|
13951
|
+
/* @__PURE__ */ jsx80(
|
|
13952
|
+
"span",
|
|
13953
|
+
{
|
|
13954
|
+
className: cn(
|
|
13955
|
+
"truncate",
|
|
13956
|
+
agendaOnly ? "font-bold text-lg" : "font-medium"
|
|
13957
|
+
),
|
|
13958
|
+
children: event.title
|
|
13959
|
+
}
|
|
13960
|
+
)
|
|
13912
13961
|
] })
|
|
13913
13962
|
}
|
|
13914
13963
|
);
|
|
@@ -13935,21 +13984,81 @@ function EventItem({
|
|
|
13935
13984
|
onMouseDown,
|
|
13936
13985
|
onTouchStart,
|
|
13937
13986
|
children: durationMinutes < 45 ? /* @__PURE__ */ jsxs60("div", { className: "flex items-center justify-between w-full", children: [
|
|
13938
|
-
/* @__PURE__ */ jsx80("div", { className: "truncate", children: event.title }),
|
|
13939
|
-
showTime && /* @__PURE__ */ jsx80("span", { className: "ml-2 inline-block bg-white/10 px-2 py-0.5 rounded-full text-[11px] opacity-90", children: formatTimeWithOptionalMinutes(displayStart) })
|
|
13987
|
+
/* @__PURE__ */ jsx80("div", { className: cn("truncate", agendaOnly ? "text-lg" : ""), children: event.title }),
|
|
13988
|
+
showTime && hasValidTime && displayStart && /* @__PURE__ */ jsx80("span", { className: "ml-2 inline-block bg-white/10 px-2 py-0.5 rounded-full text-[11px] opacity-90", children: formatTimeWithOptionalMinutes(displayStart) })
|
|
13940
13989
|
] }) : /* @__PURE__ */ jsxs60(Fragment12, { children: [
|
|
13941
|
-
/* @__PURE__ */ jsx80(
|
|
13942
|
-
|
|
13990
|
+
/* @__PURE__ */ jsx80(
|
|
13991
|
+
"div",
|
|
13992
|
+
{
|
|
13993
|
+
className: cn(
|
|
13994
|
+
"truncate font-medium",
|
|
13995
|
+
agendaOnly ? "text-lg" : ""
|
|
13996
|
+
),
|
|
13997
|
+
children: event.title
|
|
13998
|
+
}
|
|
13999
|
+
),
|
|
14000
|
+
showTime && hasValidTime && /* @__PURE__ */ jsx80("div", { className: "truncate font-normal opacity-70 sm:text-[11px]", children: /* @__PURE__ */ jsx80("span", { className: "inline-block bg-white/5 px-2 py-0.5 rounded-full", children: getEventTime() }) })
|
|
13943
14001
|
] })
|
|
13944
14002
|
}
|
|
13945
14003
|
);
|
|
13946
14004
|
}
|
|
14005
|
+
if (!hasValidTime) {
|
|
14006
|
+
return /* @__PURE__ */ jsxs60(
|
|
14007
|
+
"button",
|
|
14008
|
+
{
|
|
14009
|
+
className: cn(
|
|
14010
|
+
"flex w-full flex-col gap-2 rounded-lg p-3 text-left outline-none transition-shadow duration-150 ease-out hover:bg-white/3 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:border-ring",
|
|
14011
|
+
getEventColorClasses(eventColor),
|
|
14012
|
+
className
|
|
14013
|
+
),
|
|
14014
|
+
"aria-label": ariaLabel,
|
|
14015
|
+
onClick,
|
|
14016
|
+
onMouseDown,
|
|
14017
|
+
onTouchStart,
|
|
14018
|
+
type: "button",
|
|
14019
|
+
...dndListeners,
|
|
14020
|
+
...dndAttributes,
|
|
14021
|
+
children: [
|
|
14022
|
+
/* @__PURE__ */ jsx80("div", { className: cn("font-medium", agendaOnly ? "text-lg" : "text-sm"), children: event.title }),
|
|
14023
|
+
/* @__PURE__ */ jsx80(
|
|
14024
|
+
"div",
|
|
14025
|
+
{
|
|
14026
|
+
className: cn(
|
|
14027
|
+
"opacity-70 flex items-center gap-2",
|
|
14028
|
+
agendaOnly ? "text-sm" : "text-xs"
|
|
14029
|
+
),
|
|
14030
|
+
children: event.location && /* @__PURE__ */ jsxs60("span", { className: "opacity-80 flex items-center gap-1", children: [
|
|
14031
|
+
"-",
|
|
14032
|
+
/* @__PURE__ */ jsx80("span", { className: "truncate", children: event.location })
|
|
14033
|
+
] })
|
|
14034
|
+
}
|
|
14035
|
+
),
|
|
14036
|
+
event.description && /* @__PURE__ */ jsx80(
|
|
14037
|
+
"div",
|
|
14038
|
+
{
|
|
14039
|
+
className: cn(
|
|
14040
|
+
"my-1 opacity-90",
|
|
14041
|
+
agendaOnly ? "text-sm" : "text-xs"
|
|
14042
|
+
),
|
|
14043
|
+
style: {
|
|
14044
|
+
display: "-webkit-box",
|
|
14045
|
+
WebkitLineClamp: 2,
|
|
14046
|
+
WebkitBoxOrient: "vertical",
|
|
14047
|
+
overflow: "hidden"
|
|
14048
|
+
},
|
|
14049
|
+
children: event.description
|
|
14050
|
+
}
|
|
14051
|
+
)
|
|
14052
|
+
]
|
|
14053
|
+
}
|
|
14054
|
+
);
|
|
14055
|
+
}
|
|
13947
14056
|
return /* @__PURE__ */ jsxs60(
|
|
13948
14057
|
"button",
|
|
13949
14058
|
{
|
|
13950
14059
|
className: cn(
|
|
13951
14060
|
"flex w-full flex-col gap-2 rounded-lg p-3 text-left outline-none transition-shadow duration-150 ease-out hover:bg-white/3 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:border-ring data-past-event:line-through data-past-event:opacity-90",
|
|
13952
|
-
|
|
14061
|
+
colorClasses,
|
|
13953
14062
|
className
|
|
13954
14063
|
),
|
|
13955
14064
|
"data-past-event": isPast(displayEnd) || void 0,
|
|
@@ -13961,23 +14070,32 @@ function EventItem({
|
|
|
13961
14070
|
...dndListeners,
|
|
13962
14071
|
...dndAttributes,
|
|
13963
14072
|
children: [
|
|
13964
|
-
/* @__PURE__ */ jsx80("div", { className: "font-medium text-sm", children: event.title }),
|
|
13965
|
-
/* @__PURE__ */ jsxs60(
|
|
13966
|
-
|
|
13967
|
-
|
|
13968
|
-
|
|
13969
|
-
|
|
13970
|
-
|
|
13971
|
-
|
|
13972
|
-
|
|
13973
|
-
|
|
13974
|
-
|
|
13975
|
-
|
|
13976
|
-
|
|
14073
|
+
/* @__PURE__ */ jsx80("div", { className: cn("font-medium", agendaOnly ? "text-lg" : "text-sm"), children: event.title }),
|
|
14074
|
+
/* @__PURE__ */ jsxs60(
|
|
14075
|
+
"div",
|
|
14076
|
+
{
|
|
14077
|
+
className: cn(
|
|
14078
|
+
"opacity-70 flex items-center gap-2",
|
|
14079
|
+
agendaOnly ? "text-sm" : "text-xs"
|
|
14080
|
+
),
|
|
14081
|
+
children: [
|
|
14082
|
+
event.allDay ? /* @__PURE__ */ jsx80("span", { className: "uppercase", children: "All day" }) : /* @__PURE__ */ jsxs60("span", { className: "uppercase", children: [
|
|
14083
|
+
formatTimeWithOptionalMinutes(displayStart),
|
|
14084
|
+
" -",
|
|
14085
|
+
" ",
|
|
14086
|
+
formatTimeWithOptionalMinutes(displayEnd)
|
|
14087
|
+
] }),
|
|
14088
|
+
event.location && /* @__PURE__ */ jsxs60("span", { className: "opacity-80 flex items-center gap-1", children: [
|
|
14089
|
+
"-",
|
|
14090
|
+
/* @__PURE__ */ jsx80("span", { className: "truncate", children: event.location })
|
|
14091
|
+
] })
|
|
14092
|
+
]
|
|
14093
|
+
}
|
|
14094
|
+
),
|
|
13977
14095
|
event.description && /* @__PURE__ */ jsx80(
|
|
13978
14096
|
"div",
|
|
13979
14097
|
{
|
|
13980
|
-
className: "my-1 text-
|
|
14098
|
+
className: cn("my-1 opacity-90", agendaOnly ? "text-sm" : "text-xs"),
|
|
13981
14099
|
style: {
|
|
13982
14100
|
display: "-webkit-box",
|
|
13983
14101
|
WebkitLineClamp: 2,
|
|
@@ -13995,7 +14113,7 @@ function EventItem({
|
|
|
13995
14113
|
// src/components/event-calendar/EventsPopUp.tsx
|
|
13996
14114
|
import { format as format8, isSameDay as isSameDay2 } from "date-fns";
|
|
13997
14115
|
import { ptBR as ptBR6 } from "date-fns/locale";
|
|
13998
|
-
import { useEffect as useEffect21, useMemo as
|
|
14116
|
+
import { useEffect as useEffect21, useMemo as useMemo14, useRef as useRef11 } from "react";
|
|
13999
14117
|
import { motion as motion17 } from "framer-motion";
|
|
14000
14118
|
import { XIcon as XIcon11 } from "@phosphor-icons/react";
|
|
14001
14119
|
import { jsx as jsx81, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
@@ -14030,10 +14148,10 @@ function EventsPopup({
|
|
|
14030
14148
|
};
|
|
14031
14149
|
}, [onClose]);
|
|
14032
14150
|
const handleEventClick = (event) => {
|
|
14033
|
-
onEventSelect(event);
|
|
14151
|
+
if (onEventSelect) onEventSelect(event);
|
|
14034
14152
|
onClose();
|
|
14035
14153
|
};
|
|
14036
|
-
const adjustedPosition =
|
|
14154
|
+
const adjustedPosition = useMemo14(() => {
|
|
14037
14155
|
const positionCopy = { ...position };
|
|
14038
14156
|
if (popupRef.current) {
|
|
14039
14157
|
const rect = popupRef.current.getBoundingClientRect();
|
|
@@ -14086,18 +14204,20 @@ function EventsPopup({
|
|
|
14086
14204
|
const eventEnd = new Date(event.end);
|
|
14087
14205
|
const isFirstDay = isSameDay2(date, eventStart);
|
|
14088
14206
|
const isLastDay = isSameDay2(date, eventEnd);
|
|
14207
|
+
const clickable = Boolean(onEventSelect);
|
|
14089
14208
|
return /* @__PURE__ */ jsx81(
|
|
14090
14209
|
"div",
|
|
14091
14210
|
{
|
|
14092
|
-
className: "cursor-pointer",
|
|
14093
|
-
onClick: () => handleEventClick(event),
|
|
14211
|
+
className: clickable ? "cursor-pointer" : "cursor-default",
|
|
14212
|
+
onClick: clickable ? () => handleEventClick(event) : void 0,
|
|
14094
14213
|
children: /* @__PURE__ */ jsx81(
|
|
14095
14214
|
EventItem,
|
|
14096
14215
|
{
|
|
14097
14216
|
event,
|
|
14098
14217
|
isFirstDay,
|
|
14099
14218
|
isLastDay,
|
|
14100
|
-
view: "agenda"
|
|
14219
|
+
view: "agenda",
|
|
14220
|
+
className: clickable ? void 0 : "cursor-default hover:shadow-none hover:scale-100"
|
|
14101
14221
|
}
|
|
14102
14222
|
)
|
|
14103
14223
|
},
|
|
@@ -14112,10 +14232,10 @@ function EventsPopup({
|
|
|
14112
14232
|
// src/components/event-calendar/hooks/use-current-time-indicator.ts
|
|
14113
14233
|
import { endOfWeek as endOfWeek2, isSameDay as isSameDay3, isWithinInterval, startOfWeek as startOfWeek2 } from "date-fns";
|
|
14114
14234
|
import { ptBR as ptBR7 } from "date-fns/locale";
|
|
14115
|
-
import { useEffect as useEffect22, useState as
|
|
14235
|
+
import { useEffect as useEffect22, useState as useState26 } from "react";
|
|
14116
14236
|
function useCurrentTimeIndicator(currentDate, view) {
|
|
14117
|
-
const [currentTimePosition, setCurrentTimePosition] =
|
|
14118
|
-
const [currentTimeVisible, setCurrentTimeVisible] =
|
|
14237
|
+
const [currentTimePosition, setCurrentTimePosition] = useState26(0);
|
|
14238
|
+
const [currentTimeVisible, setCurrentTimeVisible] = useState26(false);
|
|
14119
14239
|
useEffect22(() => {
|
|
14120
14240
|
const calculateTimePosition = () => {
|
|
14121
14241
|
const now = /* @__PURE__ */ new Date();
|
|
@@ -14147,14 +14267,14 @@ function useCurrentTimeIndicator(currentDate, view) {
|
|
|
14147
14267
|
}
|
|
14148
14268
|
|
|
14149
14269
|
// src/components/event-calendar/hooks/use-event-visibility.ts
|
|
14150
|
-
import { useLayoutEffect as useLayoutEffect2, useMemo as
|
|
14270
|
+
import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo15, useRef as useRef12, useState as useState27 } from "react";
|
|
14151
14271
|
function useEventVisibility({
|
|
14152
14272
|
eventHeight,
|
|
14153
14273
|
eventGap
|
|
14154
14274
|
}) {
|
|
14155
14275
|
const contentRef = useRef12(null);
|
|
14156
14276
|
const observerRef = useRef12(null);
|
|
14157
|
-
const [contentHeight, setContentHeight] =
|
|
14277
|
+
const [contentHeight, setContentHeight] = useState27(null);
|
|
14158
14278
|
useLayoutEffect2(() => {
|
|
14159
14279
|
if (!contentRef.current) return;
|
|
14160
14280
|
const updateHeight = () => {
|
|
@@ -14175,7 +14295,7 @@ function useEventVisibility({
|
|
|
14175
14295
|
}
|
|
14176
14296
|
};
|
|
14177
14297
|
}, []);
|
|
14178
|
-
const getVisibleEventCount =
|
|
14298
|
+
const getVisibleEventCount = useMemo15(() => {
|
|
14179
14299
|
return (totalEvents) => {
|
|
14180
14300
|
if (!contentHeight) return totalEvents;
|
|
14181
14301
|
const maxEvents = Math.floor(contentHeight / (eventHeight + eventGap));
|
|
@@ -14206,7 +14326,7 @@ import {
|
|
|
14206
14326
|
startOfWeek as startOfWeek3
|
|
14207
14327
|
} from "date-fns";
|
|
14208
14328
|
import { ptBR as ptBR8 } from "date-fns/locale";
|
|
14209
|
-
import { useEffect as useEffect23, useMemo as
|
|
14329
|
+
import { useEffect as useEffect23, useMemo as useMemo16, useState as useState28 } from "react";
|
|
14210
14330
|
import { jsx as jsx82, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
14211
14331
|
function MonthView({
|
|
14212
14332
|
currentDate,
|
|
@@ -14214,21 +14334,21 @@ function MonthView({
|
|
|
14214
14334
|
onEventSelect,
|
|
14215
14335
|
onEventCreate
|
|
14216
14336
|
}) {
|
|
14217
|
-
const days =
|
|
14337
|
+
const days = useMemo16(() => {
|
|
14218
14338
|
const monthStart = startOfMonth(currentDate);
|
|
14219
14339
|
const monthEnd = endOfMonth(monthStart);
|
|
14220
14340
|
const calendarStart = startOfWeek3(monthStart, { weekStartsOn: 0 });
|
|
14221
14341
|
const calendarEnd = endOfWeek3(monthEnd, { weekStartsOn: 0 });
|
|
14222
14342
|
return eachDayOfInterval({ end: calendarEnd, start: calendarStart });
|
|
14223
14343
|
}, [currentDate]);
|
|
14224
|
-
const weekdays =
|
|
14344
|
+
const weekdays = useMemo16(() => {
|
|
14225
14345
|
return Array.from({ length: 7 }).map((_, i) => {
|
|
14226
14346
|
const date = addDays3(startOfWeek3(/* @__PURE__ */ new Date(), { weekStartsOn: 0 }), i);
|
|
14227
14347
|
const short = format9(date, "EEE", { locale: ptBR8 });
|
|
14228
14348
|
return short.charAt(0).toUpperCase() + short.slice(1);
|
|
14229
14349
|
});
|
|
14230
14350
|
}, []);
|
|
14231
|
-
const weeks =
|
|
14351
|
+
const weeks = useMemo16(() => {
|
|
14232
14352
|
const result = [];
|
|
14233
14353
|
let week = [];
|
|
14234
14354
|
for (let i = 0; i < days.length; i++) {
|
|
@@ -14244,7 +14364,7 @@ function MonthView({
|
|
|
14244
14364
|
e.stopPropagation();
|
|
14245
14365
|
onEventSelect(event);
|
|
14246
14366
|
};
|
|
14247
|
-
const [isMounted, setIsMounted] =
|
|
14367
|
+
const [isMounted, setIsMounted] = useState28(false);
|
|
14248
14368
|
const { contentRef, getVisibleEventCount } = useEventVisibility({
|
|
14249
14369
|
eventGap: EventGap,
|
|
14250
14370
|
eventHeight: EventHeight
|
|
@@ -14424,6 +14544,7 @@ function MonthView({
|
|
|
14424
14544
|
|
|
14425
14545
|
// src/components/event-calendar/utils.ts
|
|
14426
14546
|
import { isSameDay as isSameDay5 } from "date-fns";
|
|
14547
|
+
import { addHours as addHours2 } from "date-fns";
|
|
14427
14548
|
function getEventColorClasses(color) {
|
|
14428
14549
|
const eventColor = color || "sky";
|
|
14429
14550
|
switch (eventColor) {
|
|
@@ -14456,15 +14577,16 @@ function getBorderRadiusClasses(isFirstDay, isLastDay) {
|
|
|
14456
14577
|
return "rounded-none";
|
|
14457
14578
|
}
|
|
14458
14579
|
function isMultiDayEvent(event) {
|
|
14459
|
-
const eventStart = new Date(event.start);
|
|
14460
|
-
const eventEnd = new Date(event.end);
|
|
14580
|
+
const eventStart = isValidDate2(event.start) ? new Date(event.start) : void 0;
|
|
14581
|
+
const eventEnd = isValidDate2(event.end) ? new Date(event.end) : void 0;
|
|
14582
|
+
if (!eventStart || !eventEnd) return !!event.allDay;
|
|
14461
14583
|
return event.allDay || eventStart.getDate() !== eventEnd.getDate();
|
|
14462
14584
|
}
|
|
14463
14585
|
function getEventsForDay(events, day) {
|
|
14464
14586
|
return events.filter((event) => {
|
|
14465
|
-
const eventStart = new Date(event.start);
|
|
14466
|
-
return isSameDay5(day, eventStart);
|
|
14467
|
-
}).sort((a, b) =>
|
|
14587
|
+
const eventStart = isValidDate2(event.start) ? new Date(event.start) : isValidDate2(event.attend_date) ? new Date(event.attend_date) : void 0;
|
|
14588
|
+
return eventStart ? isSameDay5(day, eventStart) : false;
|
|
14589
|
+
}).sort((a, b) => getEventStartTimestamp(a) - getEventStartTimestamp(b));
|
|
14468
14590
|
}
|
|
14469
14591
|
function sortEvents(events) {
|
|
14470
14592
|
return [...events].sort((a, b) => {
|
|
@@ -14472,30 +14594,47 @@ function sortEvents(events) {
|
|
|
14472
14594
|
const bIsMultiDay = isMultiDayEvent(b);
|
|
14473
14595
|
if (aIsMultiDay && !bIsMultiDay) return -1;
|
|
14474
14596
|
if (!aIsMultiDay && bIsMultiDay) return 1;
|
|
14475
|
-
return
|
|
14597
|
+
return getEventStartTimestamp(a) - getEventStartTimestamp(b);
|
|
14476
14598
|
});
|
|
14477
14599
|
}
|
|
14478
14600
|
function getSpanningEventsForDay(events, day) {
|
|
14479
14601
|
return events.filter((event) => {
|
|
14480
14602
|
if (!isMultiDayEvent(event)) return false;
|
|
14481
|
-
const eventStart = new Date(event.start);
|
|
14482
|
-
const eventEnd = new Date(event.end);
|
|
14603
|
+
const eventStart = isValidDate2(event.start) ? new Date(event.start) : void 0;
|
|
14604
|
+
const eventEnd = isValidDate2(event.end) ? new Date(event.end) : void 0;
|
|
14605
|
+
if (!eventStart || !eventEnd) return false;
|
|
14483
14606
|
return !isSameDay5(day, eventStart) && (isSameDay5(day, eventEnd) || day > eventStart && day < eventEnd);
|
|
14484
14607
|
});
|
|
14485
14608
|
}
|
|
14486
14609
|
function getAllEventsForDay(events, day) {
|
|
14487
14610
|
return events.filter((event) => {
|
|
14488
|
-
const eventStart = new Date(event.start);
|
|
14489
|
-
const eventEnd = new Date(event.end);
|
|
14490
|
-
|
|
14611
|
+
const eventStart = isValidDate2(event.start) ? new Date(event.start) : void 0;
|
|
14612
|
+
const eventEnd = isValidDate2(event.end) ? new Date(event.end) : void 0;
|
|
14613
|
+
if (!eventStart) return false;
|
|
14614
|
+
return isSameDay5(day, eventStart) || (eventEnd ? isSameDay5(day, eventEnd) : false) || (eventEnd ? day > eventStart && day < eventEnd : false);
|
|
14491
14615
|
});
|
|
14492
14616
|
}
|
|
14493
14617
|
function getAgendaEventsForDay(events, day) {
|
|
14494
14618
|
return events.filter((event) => {
|
|
14495
|
-
const eventStart = new Date(event.start);
|
|
14496
|
-
const eventEnd = new Date(event.end);
|
|
14497
|
-
|
|
14498
|
-
|
|
14619
|
+
const eventStart = isValidDate2(event.start) ? new Date(event.start) : isValidDate2(event.attend_date) ? new Date(event.attend_date) : void 0;
|
|
14620
|
+
const eventEnd = isValidDate2(event.end) ? new Date(event.end) : isValidDate2(event.attend_date) ? addHours2(new Date(event.attend_date), 1) : void 0;
|
|
14621
|
+
if (!eventStart) return false;
|
|
14622
|
+
return isSameDay5(day, eventStart) || (eventEnd ? isSameDay5(day, eventEnd) : false) || (eventEnd ? day > eventStart && day < eventEnd : false);
|
|
14623
|
+
}).sort((a, b) => getEventStartTimestamp(a) - getEventStartTimestamp(b));
|
|
14624
|
+
}
|
|
14625
|
+
function isValidDate2(d) {
|
|
14626
|
+
try {
|
|
14627
|
+
const t = d instanceof Date ? d.getTime() : new Date(String(d)).getTime();
|
|
14628
|
+
return !isNaN(t);
|
|
14629
|
+
} catch {
|
|
14630
|
+
return false;
|
|
14631
|
+
}
|
|
14632
|
+
}
|
|
14633
|
+
function getEventStartTimestamp(e) {
|
|
14634
|
+
if (isValidDate2(e.start)) return new Date(e.start).getTime();
|
|
14635
|
+
if (isValidDate2(e.attend_date))
|
|
14636
|
+
return new Date(e.attend_date).getTime();
|
|
14637
|
+
return Number.MAX_SAFE_INTEGER;
|
|
14499
14638
|
}
|
|
14500
14639
|
function addHoursToDate(date, hours) {
|
|
14501
14640
|
const result = new Date(date);
|
|
@@ -14505,7 +14644,7 @@ function addHoursToDate(date, hours) {
|
|
|
14505
14644
|
|
|
14506
14645
|
// src/components/event-calendar/WeekView.tsx
|
|
14507
14646
|
import {
|
|
14508
|
-
addHours as
|
|
14647
|
+
addHours as addHours3,
|
|
14509
14648
|
areIntervalsOverlapping as areIntervalsOverlapping2,
|
|
14510
14649
|
differenceInMinutes as differenceInMinutes4,
|
|
14511
14650
|
eachDayOfInterval as eachDayOfInterval2,
|
|
@@ -14521,7 +14660,7 @@ import {
|
|
|
14521
14660
|
startOfWeek as startOfWeek4
|
|
14522
14661
|
} from "date-fns";
|
|
14523
14662
|
import { ptBR as ptBR9 } from "date-fns/locale";
|
|
14524
|
-
import { useMemo as
|
|
14663
|
+
import { useMemo as useMemo17 } from "react";
|
|
14525
14664
|
import { jsx as jsx83, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
14526
14665
|
function WeekView({
|
|
14527
14666
|
currentDate,
|
|
@@ -14529,23 +14668,23 @@ function WeekView({
|
|
|
14529
14668
|
onEventSelect,
|
|
14530
14669
|
onEventCreate
|
|
14531
14670
|
}) {
|
|
14532
|
-
const days =
|
|
14671
|
+
const days = useMemo17(() => {
|
|
14533
14672
|
const weekStart2 = startOfWeek4(currentDate, { weekStartsOn: 0 });
|
|
14534
14673
|
const weekEnd = endOfWeek4(currentDate, { weekStartsOn: 0 });
|
|
14535
14674
|
return eachDayOfInterval2({ end: weekEnd, start: weekStart2 });
|
|
14536
14675
|
}, [currentDate]);
|
|
14537
|
-
const weekStart =
|
|
14676
|
+
const weekStart = useMemo17(
|
|
14538
14677
|
() => startOfWeek4(currentDate, { weekStartsOn: 0 }),
|
|
14539
14678
|
[currentDate]
|
|
14540
14679
|
);
|
|
14541
|
-
const hours =
|
|
14680
|
+
const hours = useMemo17(() => {
|
|
14542
14681
|
const dayStart = startOfDay2(currentDate);
|
|
14543
14682
|
return eachHourOfInterval2({
|
|
14544
|
-
end:
|
|
14545
|
-
start:
|
|
14683
|
+
end: addHours3(dayStart, EndHour - 1),
|
|
14684
|
+
start: addHours3(dayStart, StartHour)
|
|
14546
14685
|
});
|
|
14547
14686
|
}, [currentDate]);
|
|
14548
|
-
const allDayEvents =
|
|
14687
|
+
const allDayEvents = useMemo17(() => {
|
|
14549
14688
|
return events.filter((event) => {
|
|
14550
14689
|
return event.allDay || isMultiDayEvent(event);
|
|
14551
14690
|
}).filter((event) => {
|
|
@@ -14556,7 +14695,7 @@ function WeekView({
|
|
|
14556
14695
|
);
|
|
14557
14696
|
});
|
|
14558
14697
|
}, [events, days]);
|
|
14559
|
-
const processedDayEvents =
|
|
14698
|
+
const processedDayEvents = useMemo17(() => {
|
|
14560
14699
|
const result = days.map((day) => {
|
|
14561
14700
|
const dayEvents = events.filter((event) => {
|
|
14562
14701
|
if (event.allDay || isMultiDayEvent(event)) return false;
|
|
@@ -14582,7 +14721,7 @@ function WeekView({
|
|
|
14582
14721
|
const eventStart = new Date(event.start);
|
|
14583
14722
|
const eventEnd = new Date(event.end);
|
|
14584
14723
|
const adjustedStart = isSameDay6(day, eventStart) ? eventStart : dayStart;
|
|
14585
|
-
const adjustedEnd = isSameDay6(day, eventEnd) ? eventEnd :
|
|
14724
|
+
const adjustedEnd = isSameDay6(day, eventEnd) ? eventEnd : addHours3(dayStart, 24);
|
|
14586
14725
|
const startHour = getHours2(adjustedStart) + getMinutes2(adjustedStart) / 60;
|
|
14587
14726
|
const endHour = getHours2(adjustedEnd) + getMinutes2(adjustedEnd) / 60;
|
|
14588
14727
|
const top = (startHour - StartHour) * WeekCellsHeight;
|
|
@@ -14802,11 +14941,11 @@ function WeekView({
|
|
|
14802
14941
|
}
|
|
14803
14942
|
|
|
14804
14943
|
// src/components/ui/form/CheckBoxThree.tsx
|
|
14805
|
-
import { useCallback as useCallback14, useMemo as
|
|
14944
|
+
import { useCallback as useCallback14, useMemo as useMemo18, useState as useState29, useEffect as useEffect24, useRef as useRef13 } from "react";
|
|
14806
14945
|
import { motion as motion18, AnimatePresence as AnimatePresence12 } from "framer-motion";
|
|
14807
14946
|
import { jsx as jsx84, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
14808
14947
|
function useCheckboxTree(initialTree) {
|
|
14809
|
-
const initialCheckedNodes =
|
|
14948
|
+
const initialCheckedNodes = useMemo18(() => {
|
|
14810
14949
|
const checkedSet = /* @__PURE__ */ new Set();
|
|
14811
14950
|
const initializeCheckedNodes = (node) => {
|
|
14812
14951
|
if (node.defaultChecked) {
|
|
@@ -14817,7 +14956,7 @@ function useCheckboxTree(initialTree) {
|
|
|
14817
14956
|
initializeCheckedNodes(initialTree);
|
|
14818
14957
|
return checkedSet;
|
|
14819
14958
|
}, [initialTree]);
|
|
14820
|
-
const [checkedNodes, setCheckedNodes] =
|
|
14959
|
+
const [checkedNodes, setCheckedNodes] = useState29(initialCheckedNodes);
|
|
14821
14960
|
const isChecked = useCallback14(
|
|
14822
14961
|
(node) => {
|
|
14823
14962
|
if (!node.children) {
|
|
@@ -14866,7 +15005,7 @@ function CheckboxTree({ tree, renderNode }) {
|
|
|
14866
15005
|
onCheckedChange,
|
|
14867
15006
|
children
|
|
14868
15007
|
}) => {
|
|
14869
|
-
const [open, setOpen] =
|
|
15008
|
+
const [open, setOpen] = useState29(() => !!node.children && status !== false);
|
|
14870
15009
|
const checkboxRef = useRef13(null);
|
|
14871
15010
|
useEffect24(() => {
|
|
14872
15011
|
if (checkboxRef.current) {
|
|
@@ -14951,14 +15090,335 @@ function CheckboxTree({ tree, renderNode }) {
|
|
|
14951
15090
|
return renderTreeNode(tree);
|
|
14952
15091
|
}
|
|
14953
15092
|
|
|
15093
|
+
// src/components/selects/MultiSelectBase.tsx
|
|
15094
|
+
import { CaretUpDownIcon as CaretUpDownIcon2, CheckIcon as CheckIcon12, XIcon as XIcon12 } from "@phosphor-icons/react";
|
|
15095
|
+
import {
|
|
15096
|
+
createContext as createContext6,
|
|
15097
|
+
useCallback as useCallback15,
|
|
15098
|
+
useContext as useContext7,
|
|
15099
|
+
useEffect as useEffect25,
|
|
15100
|
+
useRef as useRef14,
|
|
15101
|
+
useState as useState30
|
|
15102
|
+
} from "react";
|
|
15103
|
+
import { motion as motion19 } from "framer-motion";
|
|
15104
|
+
import { Fragment as Fragment13, jsx as jsx85, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
15105
|
+
var MultiSelectContext = createContext6(null);
|
|
15106
|
+
function MultiSelectBase({
|
|
15107
|
+
children,
|
|
15108
|
+
values,
|
|
15109
|
+
defaultValues,
|
|
15110
|
+
onValuesChange,
|
|
15111
|
+
disabled,
|
|
15112
|
+
empty,
|
|
15113
|
+
error
|
|
15114
|
+
}) {
|
|
15115
|
+
const [open, setOpen] = useState30(false);
|
|
15116
|
+
const [internalValues, setInternalValues] = useState30(
|
|
15117
|
+
new Set(values ?? defaultValues)
|
|
15118
|
+
);
|
|
15119
|
+
const selectedValues = values ? new Set(values) : internalValues;
|
|
15120
|
+
const [items, setItems] = useState30(/* @__PURE__ */ new Map());
|
|
15121
|
+
function toggleValue(value) {
|
|
15122
|
+
if (disabled) return;
|
|
15123
|
+
const getNewSet = (prev) => {
|
|
15124
|
+
const newSet = new Set(prev);
|
|
15125
|
+
if (newSet.has(value)) {
|
|
15126
|
+
newSet.delete(value);
|
|
15127
|
+
} else {
|
|
15128
|
+
newSet.add(value);
|
|
15129
|
+
}
|
|
15130
|
+
return newSet;
|
|
15131
|
+
};
|
|
15132
|
+
setInternalValues(getNewSet);
|
|
15133
|
+
onValuesChange?.([...getNewSet(selectedValues)]);
|
|
15134
|
+
}
|
|
15135
|
+
const onItemAdded = useCallback15((value, label) => {
|
|
15136
|
+
setItems((prev) => {
|
|
15137
|
+
if (prev.get(value) === label) return prev;
|
|
15138
|
+
return new Map(prev).set(value, label);
|
|
15139
|
+
});
|
|
15140
|
+
}, []);
|
|
15141
|
+
return /* @__PURE__ */ jsx85(
|
|
15142
|
+
MultiSelectContext.Provider,
|
|
15143
|
+
{
|
|
15144
|
+
value: {
|
|
15145
|
+
open,
|
|
15146
|
+
setOpen,
|
|
15147
|
+
selectedValues,
|
|
15148
|
+
toggleValue,
|
|
15149
|
+
items,
|
|
15150
|
+
onItemAdded,
|
|
15151
|
+
disabled,
|
|
15152
|
+
emptyMessage: empty,
|
|
15153
|
+
error
|
|
15154
|
+
},
|
|
15155
|
+
children: /* @__PURE__ */ jsx85(
|
|
15156
|
+
PopoverBase,
|
|
15157
|
+
{
|
|
15158
|
+
open,
|
|
15159
|
+
onOpenChange: (v) => !disabled && setOpen(v),
|
|
15160
|
+
modal: true,
|
|
15161
|
+
children
|
|
15162
|
+
}
|
|
15163
|
+
)
|
|
15164
|
+
}
|
|
15165
|
+
);
|
|
15166
|
+
}
|
|
15167
|
+
function MultiSelectTriggerBase({
|
|
15168
|
+
className,
|
|
15169
|
+
children,
|
|
15170
|
+
error: propError,
|
|
15171
|
+
...props
|
|
15172
|
+
}) {
|
|
15173
|
+
const { open, disabled, error: contextError } = useMultiSelectContext();
|
|
15174
|
+
const error = propError ?? contextError;
|
|
15175
|
+
return /* @__PURE__ */ jsxs65("div", { className: cn("w-full", error && "mb-0"), children: [
|
|
15176
|
+
/* @__PURE__ */ jsx85(PopoverTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxs65(
|
|
15177
|
+
ButtonBase,
|
|
15178
|
+
{
|
|
15179
|
+
...props,
|
|
15180
|
+
variant: props.variant ?? "outline",
|
|
15181
|
+
role: props.role ?? "combobox",
|
|
15182
|
+
"aria-expanded": props["aria-expanded"] ?? open,
|
|
15183
|
+
"aria-disabled": disabled || void 0,
|
|
15184
|
+
disabled,
|
|
15185
|
+
className: cn(
|
|
15186
|
+
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 min-w-[150px]",
|
|
15187
|
+
error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring",
|
|
15188
|
+
className
|
|
15189
|
+
),
|
|
15190
|
+
children: [
|
|
15191
|
+
children,
|
|
15192
|
+
/* @__PURE__ */ jsx85(CaretUpDownIcon2, { className: "size-4 shrink-0 opacity-50" })
|
|
15193
|
+
]
|
|
15194
|
+
}
|
|
15195
|
+
) }),
|
|
15196
|
+
error ? /* @__PURE__ */ jsx85(ErrorMessage_default, { error }) : null
|
|
15197
|
+
] });
|
|
15198
|
+
}
|
|
15199
|
+
function MultiSelectValueBase({
|
|
15200
|
+
placeholder,
|
|
15201
|
+
clickToRemove = true,
|
|
15202
|
+
className,
|
|
15203
|
+
overflowBehavior = "wrap-when-open",
|
|
15204
|
+
...props
|
|
15205
|
+
}) {
|
|
15206
|
+
const { selectedValues, toggleValue, items, open } = useMultiSelectContext();
|
|
15207
|
+
const [overflowAmount, setOverflowAmount] = useState30(0);
|
|
15208
|
+
const valueRef = useRef14(null);
|
|
15209
|
+
const overflowRef = useRef14(null);
|
|
15210
|
+
const mutationObserverRef = useRef14(null);
|
|
15211
|
+
const resizeObserverRef = useRef14(null);
|
|
15212
|
+
const shouldWrap = overflowBehavior === "wrap" || overflowBehavior === "wrap-when-open" && open;
|
|
15213
|
+
const checkOverflow = useCallback15(() => {
|
|
15214
|
+
if (valueRef.current == null) return;
|
|
15215
|
+
const containerElement = valueRef.current;
|
|
15216
|
+
const overflowElement = overflowRef.current;
|
|
15217
|
+
const items2 = containerElement.querySelectorAll(
|
|
15218
|
+
"[data-selected-item]"
|
|
15219
|
+
);
|
|
15220
|
+
if (overflowElement != null) overflowElement.style.display = "none";
|
|
15221
|
+
items2.forEach((child) => child.style.removeProperty("display"));
|
|
15222
|
+
let amount = 0;
|
|
15223
|
+
for (let i = items2.length - 1; i >= 0; i--) {
|
|
15224
|
+
const child = items2[i];
|
|
15225
|
+
if (containerElement.scrollWidth <= containerElement.clientWidth) {
|
|
15226
|
+
break;
|
|
15227
|
+
}
|
|
15228
|
+
amount = items2.length - i;
|
|
15229
|
+
child.style.display = "none";
|
|
15230
|
+
overflowElement?.style.removeProperty("display");
|
|
15231
|
+
}
|
|
15232
|
+
setOverflowAmount(amount);
|
|
15233
|
+
}, []);
|
|
15234
|
+
const handleResize = useCallback15(
|
|
15235
|
+
(node) => {
|
|
15236
|
+
if (node == null) {
|
|
15237
|
+
valueRef.current = null;
|
|
15238
|
+
if (resizeObserverRef.current) {
|
|
15239
|
+
resizeObserverRef.current.disconnect();
|
|
15240
|
+
resizeObserverRef.current = null;
|
|
15241
|
+
}
|
|
15242
|
+
if (mutationObserverRef.current) {
|
|
15243
|
+
mutationObserverRef.current.disconnect();
|
|
15244
|
+
mutationObserverRef.current = null;
|
|
15245
|
+
}
|
|
15246
|
+
return;
|
|
15247
|
+
}
|
|
15248
|
+
valueRef.current = node;
|
|
15249
|
+
if (resizeObserverRef.current) {
|
|
15250
|
+
resizeObserverRef.current.disconnect();
|
|
15251
|
+
resizeObserverRef.current = null;
|
|
15252
|
+
}
|
|
15253
|
+
if (mutationObserverRef.current) {
|
|
15254
|
+
mutationObserverRef.current.disconnect();
|
|
15255
|
+
mutationObserverRef.current = null;
|
|
15256
|
+
}
|
|
15257
|
+
const mo = new MutationObserver(checkOverflow);
|
|
15258
|
+
const ro = new ResizeObserver(debounce(checkOverflow, 100));
|
|
15259
|
+
mutationObserverRef.current = mo;
|
|
15260
|
+
resizeObserverRef.current = ro;
|
|
15261
|
+
mo.observe(node, {
|
|
15262
|
+
childList: true,
|
|
15263
|
+
attributes: true,
|
|
15264
|
+
attributeFilter: ["class", "style"]
|
|
15265
|
+
});
|
|
15266
|
+
ro.observe(node);
|
|
15267
|
+
checkOverflow();
|
|
15268
|
+
},
|
|
15269
|
+
[checkOverflow]
|
|
15270
|
+
);
|
|
15271
|
+
if (selectedValues.size === 0 && placeholder) {
|
|
15272
|
+
return /* @__PURE__ */ jsx85("span", { className: "min-w-0 overflow-hidden font-normal text-muted-foreground ", children: placeholder });
|
|
15273
|
+
}
|
|
15274
|
+
return /* @__PURE__ */ jsxs65(
|
|
15275
|
+
"div",
|
|
15276
|
+
{
|
|
15277
|
+
...props,
|
|
15278
|
+
ref: handleResize,
|
|
15279
|
+
className: cn(
|
|
15280
|
+
"flex w-full gap-1.5 overflow-hidden",
|
|
15281
|
+
shouldWrap && "h-full flex-wrap",
|
|
15282
|
+
className
|
|
15283
|
+
),
|
|
15284
|
+
children: [
|
|
15285
|
+
[...selectedValues].filter((value) => items.has(value)).map((value) => /* @__PURE__ */ jsxs65(
|
|
15286
|
+
Badge,
|
|
15287
|
+
{
|
|
15288
|
+
"data-selected-item": true,
|
|
15289
|
+
size: "sm",
|
|
15290
|
+
className: "group flex items-center gap-1",
|
|
15291
|
+
onClick: clickToRemove ? (e) => {
|
|
15292
|
+
e.stopPropagation();
|
|
15293
|
+
toggleValue(value);
|
|
15294
|
+
} : void 0,
|
|
15295
|
+
children: [
|
|
15296
|
+
items.get(value),
|
|
15297
|
+
clickToRemove && /* @__PURE__ */ jsx85(XIcon12, { className: "size-3 text-muted-foreground group-hover:text-destructive" })
|
|
15298
|
+
]
|
|
15299
|
+
},
|
|
15300
|
+
value
|
|
15301
|
+
)),
|
|
15302
|
+
/* @__PURE__ */ jsxs65(
|
|
15303
|
+
Badge,
|
|
15304
|
+
{
|
|
15305
|
+
style: {
|
|
15306
|
+
display: overflowAmount > 0 && !shouldWrap ? "block" : "none"
|
|
15307
|
+
},
|
|
15308
|
+
ref: overflowRef,
|
|
15309
|
+
children: [
|
|
15310
|
+
"+",
|
|
15311
|
+
overflowAmount
|
|
15312
|
+
]
|
|
15313
|
+
}
|
|
15314
|
+
)
|
|
15315
|
+
]
|
|
15316
|
+
}
|
|
15317
|
+
);
|
|
15318
|
+
}
|
|
15319
|
+
function MultiSelectContentBase({
|
|
15320
|
+
search = true,
|
|
15321
|
+
children,
|
|
15322
|
+
...props
|
|
15323
|
+
}) {
|
|
15324
|
+
const canSearch = typeof search === "object" ? true : search;
|
|
15325
|
+
const { emptyMessage } = useMultiSelectContext();
|
|
15326
|
+
return /* @__PURE__ */ jsx85(Fragment13, { children: /* @__PURE__ */ jsx85(PopoverContentBase, { className: "w-[--radix-popover-trigger-width] relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md p-0", children: /* @__PURE__ */ jsx85(
|
|
15327
|
+
motion19.div,
|
|
15328
|
+
{
|
|
15329
|
+
initial: { opacity: 0, scale: 0.95 },
|
|
15330
|
+
animate: { opacity: 1, scale: 1 },
|
|
15331
|
+
exit: { opacity: 0, scale: 0.95 },
|
|
15332
|
+
transition: { duration: 0.2 },
|
|
15333
|
+
children: /* @__PURE__ */ jsx85("div", { className: cn(" "), children: /* @__PURE__ */ jsxs65(CommandBase, { ...props, children: [
|
|
15334
|
+
canSearch ? /* @__PURE__ */ jsx85(
|
|
15335
|
+
CommandInputBase,
|
|
15336
|
+
{
|
|
15337
|
+
placeholder: typeof search === "object" ? search.placeholder : void 0
|
|
15338
|
+
}
|
|
15339
|
+
) : /* @__PURE__ */ jsx85("button", { autoFocus: true, className: "sr-only" }),
|
|
15340
|
+
/* @__PURE__ */ jsxs65(CommandListBase, { children: [
|
|
15341
|
+
canSearch && /* @__PURE__ */ jsx85(CommandEmptyBase, { children: typeof search === "object" ? search.emptyMessage ?? emptyMessage : emptyMessage }),
|
|
15342
|
+
children
|
|
15343
|
+
] })
|
|
15344
|
+
] }) })
|
|
15345
|
+
}
|
|
15346
|
+
) }) });
|
|
15347
|
+
}
|
|
15348
|
+
function MultiSelectItemBase({
|
|
15349
|
+
value,
|
|
15350
|
+
children,
|
|
15351
|
+
badgeLabel,
|
|
15352
|
+
onSelect,
|
|
15353
|
+
...props
|
|
15354
|
+
}) {
|
|
15355
|
+
const { toggleValue, selectedValues, onItemAdded } = useMultiSelectContext();
|
|
15356
|
+
const isSelected = selectedValues.has(value);
|
|
15357
|
+
useEffect25(() => {
|
|
15358
|
+
onItemAdded(value, badgeLabel ?? children);
|
|
15359
|
+
}, [value, children, onItemAdded, badgeLabel]);
|
|
15360
|
+
return /* @__PURE__ */ jsx85(
|
|
15361
|
+
CommandItemBase,
|
|
15362
|
+
{
|
|
15363
|
+
...props,
|
|
15364
|
+
onSelect: () => {
|
|
15365
|
+
toggleValue(value);
|
|
15366
|
+
onSelect?.(value);
|
|
15367
|
+
},
|
|
15368
|
+
children: /* @__PURE__ */ jsxs65(
|
|
15369
|
+
motion19.div,
|
|
15370
|
+
{
|
|
15371
|
+
whileHover: { scale: 1.02 },
|
|
15372
|
+
whileTap: { scale: 0.98 },
|
|
15373
|
+
transition: { duration: 0.1 },
|
|
15374
|
+
children: [
|
|
15375
|
+
/* @__PURE__ */ jsx85("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx85(
|
|
15376
|
+
motion19.div,
|
|
15377
|
+
{
|
|
15378
|
+
initial: { scale: 0 },
|
|
15379
|
+
animate: { scale: isSelected ? 1 : 0 },
|
|
15380
|
+
transition: { type: "spring", stiffness: 500, damping: 30 },
|
|
15381
|
+
children: /* @__PURE__ */ jsx85(CheckIcon12, { className: "size-4" })
|
|
15382
|
+
}
|
|
15383
|
+
) }),
|
|
15384
|
+
children
|
|
15385
|
+
]
|
|
15386
|
+
}
|
|
15387
|
+
)
|
|
15388
|
+
}
|
|
15389
|
+
);
|
|
15390
|
+
}
|
|
15391
|
+
function MultiSelectGroupBase(props) {
|
|
15392
|
+
return /* @__PURE__ */ jsx85(CommandGroupBase, { ...props });
|
|
15393
|
+
}
|
|
15394
|
+
function MultiSelectSeparatorBase(props) {
|
|
15395
|
+
return /* @__PURE__ */ jsx85(CommandSeparatorBase, { ...props });
|
|
15396
|
+
}
|
|
15397
|
+
function useMultiSelectContext() {
|
|
15398
|
+
const context = useContext7(MultiSelectContext);
|
|
15399
|
+
if (context == null) {
|
|
15400
|
+
throw new Error(
|
|
15401
|
+
"useMultiSelectContext must be used within a MultiSelectContext"
|
|
15402
|
+
);
|
|
15403
|
+
}
|
|
15404
|
+
return context;
|
|
15405
|
+
}
|
|
15406
|
+
function debounce(func, wait) {
|
|
15407
|
+
let timeout = null;
|
|
15408
|
+
return function(...args) {
|
|
15409
|
+
if (timeout) clearTimeout(timeout);
|
|
15410
|
+
timeout = setTimeout(() => func.apply(this, args), wait);
|
|
15411
|
+
};
|
|
15412
|
+
}
|
|
15413
|
+
|
|
14954
15414
|
// src/hooks/use-drag.tsx
|
|
14955
|
-
import { useState as useState31, useCallback as
|
|
15415
|
+
import { useState as useState31, useCallback as useCallback16, useRef as useRef15, useEffect as useEffect26 } from "react";
|
|
14956
15416
|
var useDrag = (options = {}) => {
|
|
14957
15417
|
const [isDragging, setIsDragging] = useState31(null);
|
|
14958
15418
|
const [positions, setPositions] = useState31({});
|
|
14959
|
-
const dragStartPos =
|
|
14960
|
-
const dragId =
|
|
14961
|
-
const handleMouseDown =
|
|
15419
|
+
const dragStartPos = useRef15(null);
|
|
15420
|
+
const dragId = useRef15(null);
|
|
15421
|
+
const handleMouseDown = useCallback16((id, e) => {
|
|
14962
15422
|
e.preventDefault();
|
|
14963
15423
|
const currentPosition = positions[id] || { top: 0, left: 0 };
|
|
14964
15424
|
dragStartPos.current = {
|
|
@@ -14971,7 +15431,7 @@ var useDrag = (options = {}) => {
|
|
|
14971
15431
|
setIsDragging(id);
|
|
14972
15432
|
options.onDragStart?.(id);
|
|
14973
15433
|
}, [positions, options]);
|
|
14974
|
-
const handleMouseMove =
|
|
15434
|
+
const handleMouseMove = useCallback16((e) => {
|
|
14975
15435
|
if (!isDragging || !dragStartPos.current || !dragId.current) return;
|
|
14976
15436
|
const deltaX = e.clientX - dragStartPos.current.x;
|
|
14977
15437
|
const deltaY = e.clientY - dragStartPos.current.y;
|
|
@@ -14987,7 +15447,7 @@ var useDrag = (options = {}) => {
|
|
|
14987
15447
|
}));
|
|
14988
15448
|
options.onDrag?.(dragId.current, newPosition);
|
|
14989
15449
|
}, [isDragging, options]);
|
|
14990
|
-
const handleMouseUp =
|
|
15450
|
+
const handleMouseUp = useCallback16(() => {
|
|
14991
15451
|
if (dragId.current) {
|
|
14992
15452
|
options.onDragEnd?.(dragId.current);
|
|
14993
15453
|
}
|
|
@@ -14995,7 +15455,7 @@ var useDrag = (options = {}) => {
|
|
|
14995
15455
|
dragStartPos.current = null;
|
|
14996
15456
|
dragId.current = null;
|
|
14997
15457
|
}, [options]);
|
|
14998
|
-
|
|
15458
|
+
useEffect26(() => {
|
|
14999
15459
|
if (isDragging) {
|
|
15000
15460
|
document.addEventListener("mousemove", handleMouseMove);
|
|
15001
15461
|
document.addEventListener("mouseup", handleMouseUp);
|
|
@@ -15007,16 +15467,16 @@ var useDrag = (options = {}) => {
|
|
|
15007
15467
|
};
|
|
15008
15468
|
}
|
|
15009
15469
|
}, [isDragging, handleMouseMove, handleMouseUp]);
|
|
15010
|
-
const setPosition =
|
|
15470
|
+
const setPosition = useCallback16((id, position) => {
|
|
15011
15471
|
setPositions((prev) => ({
|
|
15012
15472
|
...prev,
|
|
15013
15473
|
[id]: position
|
|
15014
15474
|
}));
|
|
15015
15475
|
}, []);
|
|
15016
|
-
const getPosition =
|
|
15476
|
+
const getPosition = useCallback16((id) => {
|
|
15017
15477
|
return positions[id] || { top: 0, left: 0 };
|
|
15018
15478
|
}, [positions]);
|
|
15019
|
-
const isElementDragging =
|
|
15479
|
+
const isElementDragging = useCallback16((id) => {
|
|
15020
15480
|
return isDragging === id;
|
|
15021
15481
|
}, [isDragging]);
|
|
15022
15482
|
return {
|
|
@@ -15194,6 +15654,13 @@ export {
|
|
|
15194
15654
|
MonthView,
|
|
15195
15655
|
MoreButton,
|
|
15196
15656
|
MultiCombobox,
|
|
15657
|
+
MultiSelectBase,
|
|
15658
|
+
MultiSelectContentBase,
|
|
15659
|
+
MultiSelectGroupBase,
|
|
15660
|
+
MultiSelectItemBase,
|
|
15661
|
+
MultiSelectSeparatorBase,
|
|
15662
|
+
MultiSelectTriggerBase,
|
|
15663
|
+
MultiSelectValueBase,
|
|
15197
15664
|
NavigationMenuBase,
|
|
15198
15665
|
NavigationMenuContentBase,
|
|
15199
15666
|
NavigationMenuIndicatorBase,
|
|
@@ -15272,7 +15739,6 @@ export {
|
|
|
15272
15739
|
StartHour,
|
|
15273
15740
|
StatusIndicator,
|
|
15274
15741
|
SwitchBase,
|
|
15275
|
-
TITLE_CLASSNAME,
|
|
15276
15742
|
TableBase,
|
|
15277
15743
|
TableBodyBase,
|
|
15278
15744
|
TableCaptionBase,
|
|
@@ -15304,31 +15770,16 @@ export {
|
|
|
15304
15770
|
VisibilityButton,
|
|
15305
15771
|
WeekCellsHeight,
|
|
15306
15772
|
WeekView,
|
|
15307
|
-
adaptDataForTooltip,
|
|
15308
15773
|
addHoursToDate,
|
|
15309
15774
|
badgeVariants,
|
|
15310
|
-
buildPercentFormatter,
|
|
15311
15775
|
buttonVariantsBase,
|
|
15312
15776
|
compactTick,
|
|
15313
|
-
computeAllKeys,
|
|
15314
|
-
computeAxisLabelWidth,
|
|
15315
|
-
computeChartWidth,
|
|
15316
|
-
computeEstimatedAxisNeeded,
|
|
15317
|
-
computeLabelSample,
|
|
15318
|
-
computeLeftRightKeys,
|
|
15319
|
-
computeNiceMax,
|
|
15320
|
-
computeProcessedData,
|
|
15321
|
-
computeSeriesOrder,
|
|
15322
15777
|
convert12HourTo24Hour,
|
|
15323
|
-
createFinalValueFormatter,
|
|
15324
|
-
createYTickFormatter,
|
|
15325
15778
|
detectDataFields,
|
|
15326
15779
|
detectXAxis,
|
|
15327
15780
|
display12HourValue,
|
|
15328
|
-
estimateTextWidth,
|
|
15329
15781
|
formatFieldName,
|
|
15330
15782
|
generateAdditionalColors,
|
|
15331
|
-
generateColors,
|
|
15332
15783
|
getAgendaEventsForDay,
|
|
15333
15784
|
getAllEventsForDay,
|
|
15334
15785
|
getArrowByType,
|
|
@@ -15349,9 +15800,8 @@ export {
|
|
|
15349
15800
|
isValid12Hour,
|
|
15350
15801
|
isValidHour,
|
|
15351
15802
|
isValidMinuteOrSecond,
|
|
15352
|
-
maxForKeys,
|
|
15353
|
-
minForKeys,
|
|
15354
15803
|
niceCeil,
|
|
15804
|
+
renderInsideBarLabel,
|
|
15355
15805
|
pillLabelRenderer_default as renderPillLabel,
|
|
15356
15806
|
resolveChartMargins,
|
|
15357
15807
|
resolveContainerPaddingLeft,
|
|
@@ -15364,11 +15814,9 @@ export {
|
|
|
15364
15814
|
toast2 as toast,
|
|
15365
15815
|
useCalendarDnd,
|
|
15366
15816
|
useChartHighlights,
|
|
15367
|
-
useChartLayout,
|
|
15368
15817
|
useCurrentTimeIndicator,
|
|
15369
15818
|
useDrag,
|
|
15370
15819
|
useEventVisibility,
|
|
15371
15820
|
useIsMobile,
|
|
15372
|
-
useMeasureWidth,
|
|
15373
15821
|
useTheme
|
|
15374
15822
|
};
|