@alexgorbatchev/shadcn 0.0.31 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/THIRD_PARTY_NOTICES.md +4 -0
- package/dist/{chunk-0ewzb2ax.js → chunk-0kyfh857.js} +1 -1
- package/dist/{chunk-8wfy03bp.js → chunk-6kwf9644.js} +1 -1
- package/dist/{chunk-82e7fbmq.js → chunk-9vyg3854.js} +2 -1
- package/dist/chunk-c6g2rbhv.js +3940 -0
- package/dist/chunk-dzvsjw59.js +200 -0
- package/dist/chunk-tch86q2w.js +6050 -0
- package/dist/{chunk-53q730zs.js → chunk-zdt8xxzy.js} +3 -0
- package/dist/components/Alert.d.ts +1 -1
- package/dist/components/assistant-ui/elements/Chart.js +2 -2
- package/dist/components/assistant-ui/elements/GuardrailNotice.js +2 -2
- package/dist/components/assistant-ui/index.js +4 -4
- package/dist/components/assistant-ui/native/Sources.d.ts +1 -1
- package/dist/components/carousel/index.js +15 -204
- package/dist/components/chart/AnalyticsChart.d.ts +3 -2
- package/dist/components/chart/Chart.d.ts +1 -1
- package/dist/components/chart/index.js +24 -10
- package/dist/components/chart/types.d.ts +1 -0
- package/dist/components/json-render/JsonAccordion.d.ts +3 -0
- package/dist/components/json-render/JsonAlert.d.ts +3 -0
- package/dist/components/json-render/JsonAvatar.d.ts +3 -0
- package/dist/components/json-render/JsonBadge.d.ts +3 -0
- package/dist/components/json-render/JsonButton.d.ts +3 -0
- package/dist/components/json-render/JsonButtonGroup.d.ts +3 -0
- package/dist/components/json-render/JsonCard.d.ts +3 -0
- package/dist/components/json-render/JsonCarousel.d.ts +3 -0
- package/dist/components/json-render/JsonCheckbox.d.ts +3 -0
- package/dist/components/json-render/JsonCollapsible.d.ts +3 -0
- package/dist/components/json-render/JsonDialog.d.ts +3 -0
- package/dist/components/json-render/JsonDrawer.d.ts +3 -0
- package/dist/components/json-render/JsonDropdownMenu.d.ts +3 -0
- package/dist/components/json-render/JsonGrid.d.ts +3 -0
- package/dist/components/json-render/JsonHeading.d.ts +3 -0
- package/dist/components/json-render/JsonImage.d.ts +3 -0
- package/dist/components/json-render/JsonInput.d.ts +3 -0
- package/dist/components/json-render/JsonLink.d.ts +3 -0
- package/dist/components/json-render/JsonPagination.d.ts +3 -0
- package/dist/components/json-render/JsonPopover.d.ts +3 -0
- package/dist/components/json-render/JsonProgress.d.ts +3 -0
- package/dist/components/json-render/JsonRadio.d.ts +3 -0
- package/dist/components/json-render/JsonSelect.d.ts +3 -0
- package/dist/components/json-render/JsonSeparator.d.ts +3 -0
- package/dist/components/json-render/JsonSkeleton.d.ts +3 -0
- package/dist/components/json-render/JsonSlider.d.ts +3 -0
- package/dist/components/json-render/JsonSpinner.d.ts +3 -0
- package/dist/components/json-render/JsonStack.d.ts +3 -0
- package/dist/components/json-render/JsonSwitch.d.ts +3 -0
- package/dist/components/json-render/JsonTable.d.ts +3 -0
- package/dist/components/json-render/JsonTabs.d.ts +3 -0
- package/dist/components/json-render/JsonText.d.ts +3 -0
- package/dist/components/json-render/JsonTextarea.d.ts +3 -0
- package/dist/components/json-render/JsonToggle.d.ts +3 -0
- package/dist/components/json-render/JsonToggleGroup.d.ts +3 -0
- package/dist/components/json-render/JsonTooltip.d.ts +3 -0
- package/dist/components/json-render/catalog.d.ts +548 -0
- package/dist/components/json-render/catalog.js +6 -0
- package/dist/components/json-render/getPaginationRange.d.ts +1 -0
- package/dist/components/json-render/index.d.ts +39 -0
- package/dist/components/json-render/index.js +1254 -0
- package/dist/index.js +569 -4191
- package/licenses/json-render-APACHE-2.0.txt +201 -0
- package/llms/components/data-display/AnalyticsChart.md +34 -0
- package/llms/components/data-display/JsonRender.md +476 -0
- package/llms/components/feedback/Alert.md +20 -4
- package/llms/setup.md +1 -0
- package/llms.txt +1 -0
- package/package.json +19 -1
|
@@ -9,6 +9,9 @@ var alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-sm bor
|
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
11
|
default: "bg-card text-card-foreground",
|
|
12
|
+
success: "bg-success text-success-foreground *:data-[slot=alert-description]:text-success-foreground",
|
|
13
|
+
warning: "bg-warning text-warning-foreground *:data-[slot=alert-description]:text-warning-foreground",
|
|
14
|
+
info: "bg-card text-primary *:data-[slot=alert-description]:text-primary/90",
|
|
12
15
|
destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
|
|
13
16
|
}
|
|
14
17
|
},
|
|
@@ -2,7 +2,7 @@ import type { IDensityProps } from "../density/types.js";
|
|
|
2
2
|
import type { ComponentProps, ReactElement } from "react";
|
|
3
3
|
import { type VariantProps } from "class-variance-authority";
|
|
4
4
|
declare const alertVariants: (props?: ({
|
|
5
|
-
variant?: "default" | "destructive" | null | undefined;
|
|
5
|
+
variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
type AlertProps = ComponentProps<"div"> & VariantProps<typeof alertVariants> & IDensityProps;
|
|
8
8
|
declare function Alert({ density, className, variant, ...props }: AlertProps): ReactElement;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Chart2
|
|
3
|
-
} from "../../../chunk-
|
|
3
|
+
} from "../../../chunk-0kyfh857.js";
|
|
4
4
|
import"../../../chunk-bygq5yqf.js";
|
|
5
|
-
import"../../../chunk-
|
|
5
|
+
import"../../../chunk-9vyg3854.js";
|
|
6
6
|
import"../../../chunk-jpvw9xqy.js";
|
|
7
7
|
import"../../../chunk-e6hk39ev.js";
|
|
8
8
|
import"../../../chunk-cp2m7y7v.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
GuardrailNotice2
|
|
3
|
-
} from "../../../chunk-
|
|
4
|
-
import"../../../chunk-
|
|
3
|
+
} from "../../../chunk-6kwf9644.js";
|
|
4
|
+
import"../../../chunk-zdt8xxzy.js";
|
|
5
5
|
import"../../../chunk-q7p28b89.js";
|
|
6
6
|
import"../../../chunk-cp2m7y7v.js";
|
|
7
7
|
export {
|
|
@@ -47,11 +47,11 @@ import {
|
|
|
47
47
|
CanvasSplitBody2,
|
|
48
48
|
CanvasSplitLine2
|
|
49
49
|
} from "../../chunk-vf1rsqpk.js";
|
|
50
|
-
import"../../chunk-
|
|
50
|
+
import"../../chunk-9vyg3854.js";
|
|
51
51
|
import"../../chunk-jpvw9xqy.js";
|
|
52
52
|
import {
|
|
53
53
|
Chart2
|
|
54
|
-
} from "../../chunk-
|
|
54
|
+
} from "../../chunk-0kyfh857.js";
|
|
55
55
|
import"../../chunk-59p19t57.js";
|
|
56
56
|
import"../../chunk-hz9azhzx.js";
|
|
57
57
|
import"../../chunk-57jj9v64.js";
|
|
@@ -292,10 +292,10 @@ import {
|
|
|
292
292
|
import {
|
|
293
293
|
GitHubIcon2
|
|
294
294
|
} from "../../chunk-4bjqbky7.js";
|
|
295
|
-
import"../../chunk-
|
|
295
|
+
import"../../chunk-zdt8xxzy.js";
|
|
296
296
|
import {
|
|
297
297
|
GuardrailNotice2
|
|
298
|
-
} from "../../chunk-
|
|
298
|
+
} from "../../chunk-6kwf9644.js";
|
|
299
299
|
import {
|
|
300
300
|
ImageRoot2,
|
|
301
301
|
ImagePreview2,
|
|
@@ -7,7 +7,7 @@ type SourceIconContract = ComponentProps<"span"> & {
|
|
|
7
7
|
faviconUrl?: ((domain: string) => string) | undefined;
|
|
8
8
|
};
|
|
9
9
|
export declare const sourceVariants: (props?: ({
|
|
10
|
-
variant?: "outline" | "secondary" | "ghost" | "destructive" | "success" | "warning" | "
|
|
10
|
+
variant?: "outline" | "secondary" | "ghost" | "destructive" | "success" | "warning" | "info" | "muted" | null | undefined;
|
|
11
11
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
12
12
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
13
|
export declare const SourceIcon: import("react").ForwardRefExoticComponent<Omit<SourceIconContract, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -1,207 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { useDirection } from "@base-ui/react/direction-provider";
|
|
12
|
-
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
|
|
13
|
-
|
|
14
|
-
// src/components/carousel/CarouselContext.ts
|
|
15
|
-
import { createContext } from "react";
|
|
16
|
-
var CarouselContext = createContext(null);
|
|
17
|
-
|
|
18
|
-
// src/components/carousel/hooks/useCarousel.ts
|
|
19
|
-
import { useContext } from "react";
|
|
20
|
-
function useCarousel() {
|
|
21
|
-
const context = useContext(CarouselContext);
|
|
22
|
-
if (!context)
|
|
23
|
-
throw new Error("useCarousel must be used within Carousel.");
|
|
24
|
-
return context;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// src/components/carousel/Carousel.tsx
|
|
28
|
-
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
29
|
-
function Carousel({
|
|
30
|
-
density,
|
|
31
|
-
orientation = "horizontal",
|
|
32
|
-
opts,
|
|
33
|
-
setApi,
|
|
34
|
-
plugins,
|
|
35
|
-
className,
|
|
36
|
-
children,
|
|
37
|
-
onKeyDown,
|
|
38
|
-
...props
|
|
39
|
-
}) {
|
|
40
|
-
const inheritedDirection = useDirection();
|
|
41
|
-
const direction = opts?.direction ?? inheritedDirection;
|
|
42
|
-
const [carouselRef, api] = useEmblaCarousel({
|
|
43
|
-
...opts,
|
|
44
|
-
direction,
|
|
45
|
-
axis: orientation === "horizontal" ? "x" : "y",
|
|
46
|
-
breakpoints: {
|
|
47
|
-
...opts?.breakpoints,
|
|
48
|
-
"(prefers-reduced-motion: reduce)": {
|
|
49
|
-
...opts?.breakpoints?.["(prefers-reduced-motion: reduce)"],
|
|
50
|
-
duration: 0
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}, plugins);
|
|
54
|
-
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
|
55
|
-
const [canScrollNext, setCanScrollNext] = useState(false);
|
|
56
|
-
const scrollPrev = useCallback(() => api?.scrollPrev(), [api]);
|
|
57
|
-
const scrollNext = useCallback(() => api?.scrollNext(), [api]);
|
|
58
|
-
useEffect(() => {
|
|
59
|
-
if (!api)
|
|
60
|
-
return;
|
|
61
|
-
const update = () => {
|
|
62
|
-
setCanScrollPrev(api.canScrollPrev());
|
|
63
|
-
setCanScrollNext(api.canScrollNext());
|
|
64
|
-
};
|
|
65
|
-
update();
|
|
66
|
-
api.on("reInit", update);
|
|
67
|
-
api.on("select", update);
|
|
68
|
-
return () => {
|
|
69
|
-
api.off("reInit", update);
|
|
70
|
-
api.off("select", update);
|
|
71
|
-
};
|
|
72
|
-
}, [api]);
|
|
73
|
-
useEffect(() => {
|
|
74
|
-
if (api)
|
|
75
|
-
setApi?.(api);
|
|
76
|
-
}, [api, setApi]);
|
|
77
|
-
const handleKeyDown = (event) => {
|
|
78
|
-
onKeyDown?.(event);
|
|
79
|
-
if (event.defaultPrevented || event.target !== event.currentTarget)
|
|
80
|
-
return;
|
|
81
|
-
const previousKey = orientation === "vertical" ? "ArrowUp" : direction === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
82
|
-
const nextKey = orientation === "vertical" ? "ArrowDown" : direction === "rtl" ? "ArrowLeft" : "ArrowRight";
|
|
83
|
-
if (event.key === previousKey) {
|
|
84
|
-
event.preventDefault();
|
|
85
|
-
scrollPrev();
|
|
86
|
-
}
|
|
87
|
-
if (event.key === nextKey) {
|
|
88
|
-
event.preventDefault();
|
|
89
|
-
scrollNext();
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
return /* @__PURE__ */ jsx(CarouselContext.Provider, {
|
|
93
|
-
value: { carouselRef, api, orientation, direction, scrollPrev, scrollNext, canScrollPrev, canScrollNext },
|
|
94
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
95
|
-
"data-slot": "carousel",
|
|
96
|
-
"data-density": density,
|
|
97
|
-
dir: direction,
|
|
98
|
-
role: "region",
|
|
99
|
-
"aria-roledescription": "carousel",
|
|
100
|
-
tabIndex: 0,
|
|
101
|
-
className: cn2("relative outline-none focus-visible:ring-1 focus-visible:ring-ring", className),
|
|
102
|
-
...props,
|
|
103
|
-
onKeyDown: handleKeyDown,
|
|
104
|
-
children
|
|
105
|
-
})
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
function CarouselContent({ className, ...props }) {
|
|
109
|
-
const { carouselRef, orientation } = useCarousel();
|
|
110
|
-
return /* @__PURE__ */ jsx("div", {
|
|
111
|
-
ref: carouselRef,
|
|
112
|
-
"data-slot": "carousel-content",
|
|
113
|
-
className: "overflow-hidden",
|
|
114
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
115
|
-
className: cn2("flex", orientation === "horizontal" ? "-ms-panel touch-pan-y touch-pinch-zoom" : "-mt-panel flex-col touch-pan-x touch-pinch-zoom", className),
|
|
116
|
-
...props
|
|
117
|
-
})
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
function CarouselItem({ className, ...props }) {
|
|
121
|
-
const { orientation } = useCarousel();
|
|
122
|
-
return /* @__PURE__ */ jsx("div", {
|
|
123
|
-
role: "group",
|
|
124
|
-
"aria-roledescription": "slide",
|
|
125
|
-
"data-slot": "carousel-item",
|
|
126
|
-
className: cn2("min-h-0 min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "ps-panel" : "pt-panel", className),
|
|
127
|
-
...props
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
function CarouselPrevious({
|
|
131
|
-
className,
|
|
132
|
-
variant = "outline",
|
|
133
|
-
size = "icon-sm",
|
|
134
|
-
disabled,
|
|
135
|
-
onClick,
|
|
136
|
-
children,
|
|
137
|
-
...props
|
|
138
|
-
}) {
|
|
139
|
-
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
|
140
|
-
return /* @__PURE__ */ jsx(Button2, {
|
|
141
|
-
"data-slot": "carousel-previous",
|
|
142
|
-
variant,
|
|
143
|
-
size,
|
|
144
|
-
className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -start-10 my-auto" : "-top-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
|
|
145
|
-
disabled: disabled || !canScrollPrev,
|
|
146
|
-
onClick: (event) => {
|
|
147
|
-
onClick?.(event);
|
|
148
|
-
if (!event.defaultPrevented)
|
|
149
|
-
scrollPrev();
|
|
150
|
-
},
|
|
151
|
-
...props,
|
|
152
|
-
children: children ?? /* @__PURE__ */ jsxs(Fragment, {
|
|
153
|
-
children: [
|
|
154
|
-
orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronLeftIcon, {
|
|
155
|
-
className: "rtl:rotate-180"
|
|
156
|
-
}) : /* @__PURE__ */ jsx(ChevronUpIcon, {}),
|
|
157
|
-
/* @__PURE__ */ jsx("span", {
|
|
158
|
-
className: "sr-only",
|
|
159
|
-
children: "Previous slide"
|
|
160
|
-
})
|
|
161
|
-
]
|
|
162
|
-
})
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
function CarouselNext({
|
|
166
|
-
className,
|
|
167
|
-
variant = "outline",
|
|
168
|
-
size = "icon-sm",
|
|
169
|
-
disabled,
|
|
170
|
-
onClick,
|
|
171
|
-
children,
|
|
172
|
-
...props
|
|
173
|
-
}) {
|
|
174
|
-
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
|
175
|
-
return /* @__PURE__ */ jsx(Button2, {
|
|
176
|
-
"data-slot": "carousel-next",
|
|
177
|
-
variant,
|
|
178
|
-
size,
|
|
179
|
-
className: (state) => cn2("absolute touch-manipulation", orientation === "horizontal" ? "inset-y-0 -end-10 my-auto" : "-bottom-10 left-1/2 -translate-x-1/2", typeof className === "function" ? className(state) : className),
|
|
180
|
-
disabled: disabled || !canScrollNext,
|
|
181
|
-
onClick: (event) => {
|
|
182
|
-
onClick?.(event);
|
|
183
|
-
if (!event.defaultPrevented)
|
|
184
|
-
scrollNext();
|
|
185
|
-
},
|
|
186
|
-
...props,
|
|
187
|
-
children: children ?? /* @__PURE__ */ jsxs(Fragment, {
|
|
188
|
-
children: [
|
|
189
|
-
orientation === "horizontal" ? /* @__PURE__ */ jsx(ChevronRightIcon, {
|
|
190
|
-
className: "rtl:rotate-180"
|
|
191
|
-
}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
|
|
192
|
-
/* @__PURE__ */ jsx("span", {
|
|
193
|
-
className: "sr-only",
|
|
194
|
-
children: "Next slide"
|
|
195
|
-
})
|
|
196
|
-
]
|
|
197
|
-
})
|
|
198
|
-
});
|
|
199
|
-
}
|
|
2
|
+
useCarousel2,
|
|
3
|
+
Carousel2,
|
|
4
|
+
CarouselContent2,
|
|
5
|
+
CarouselItem2,
|
|
6
|
+
CarouselPrevious2,
|
|
7
|
+
CarouselNext2
|
|
8
|
+
} from "../../chunk-dzvsjw59.js";
|
|
9
|
+
import"../../chunk-q7p28b89.js";
|
|
10
|
+
import"../../chunk-cp2m7y7v.js";
|
|
200
11
|
export {
|
|
201
|
-
Carousel,
|
|
202
|
-
CarouselContent,
|
|
203
|
-
CarouselItem,
|
|
204
|
-
CarouselNext,
|
|
205
|
-
CarouselPrevious,
|
|
206
|
-
useCarousel
|
|
12
|
+
Carousel2 as Carousel,
|
|
13
|
+
CarouselContent2 as CarouselContent,
|
|
14
|
+
CarouselItem2 as CarouselItem,
|
|
15
|
+
CarouselNext2 as CarouselNext,
|
|
16
|
+
CarouselPrevious2 as CarouselPrevious,
|
|
17
|
+
useCarousel2 as useCarousel
|
|
207
18
|
};
|
|
@@ -8,12 +8,13 @@ type AnalyticsSeries = {
|
|
|
8
8
|
};
|
|
9
9
|
type AnalyticsChartProps = IDensityProps & {
|
|
10
10
|
label: string;
|
|
11
|
-
data: Record<string, string | number>[];
|
|
11
|
+
data: Record<string, string | number | null>[];
|
|
12
|
+
showDots?: boolean;
|
|
12
13
|
index: string;
|
|
13
14
|
series: readonly AnalyticsSeries[];
|
|
14
15
|
valueFormatter?: (value: number) => string;
|
|
15
16
|
};
|
|
16
|
-
declare function AnalyticsChart({ label, data, index, series, valueFormatter, density }: AnalyticsChartProps): ReactElement;
|
|
17
|
+
declare function AnalyticsChart({ label, data, index, series, valueFormatter, showDots, density, }: AnalyticsChartProps): ReactElement;
|
|
17
18
|
type SparklineProps = IDensityProps & {
|
|
18
19
|
label: string;
|
|
19
20
|
values: readonly number[];
|
|
@@ -3,7 +3,7 @@ import type { ChartProps, ChartTooltipContentProps, ChartLegendContentProps } fr
|
|
|
3
3
|
import { Tooltip } from "recharts";
|
|
4
4
|
import { ChartStyle } from "./ChartStyle.js";
|
|
5
5
|
declare function Chart({ id, dir, density, className, children, config, initialDimension, ...props }: ChartProps): ReactElement;
|
|
6
|
-
declare function ChartTooltipContent({ density, active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, htmlProps, contentStyle, itemStyle, labelStyle, wrapperClassName, itemSorter, }: ChartTooltipContentProps): ReactElement | null;
|
|
6
|
+
declare function ChartTooltipContent({ density, active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, valueFormatter, labelClassName, formatter, color, nameKey, labelKey, htmlProps, contentStyle, itemStyle, labelStyle, wrapperClassName, itemSorter, }: ChartTooltipContentProps): ReactElement | null;
|
|
7
7
|
declare function ChartLegendContent({ density, className, hideIcon, payload, verticalAlign, nameKey, onClick, onMouseEnter, onMouseLeave, formatter, htmlProps, labelStyle, inactiveColor, }: ChartLegendContentProps): ReactElement | null;
|
|
8
8
|
declare const ChartTooltip: typeof Tooltip;
|
|
9
9
|
declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
|
|
@@ -6,16 +6,25 @@ import {
|
|
|
6
6
|
ChartLegendContent2,
|
|
7
7
|
ChartTooltip2,
|
|
8
8
|
ChartLegend2
|
|
9
|
-
} from "../../chunk-
|
|
9
|
+
} from "../../chunk-9vyg3854.js";
|
|
10
10
|
import"../../chunk-e6hk39ev.js";
|
|
11
11
|
import"../../chunk-cp2m7y7v.js";
|
|
12
12
|
import"../../chunk-jpvw9xqy.js";
|
|
13
13
|
// src/components/chart/AnalyticsChart.tsx
|
|
14
14
|
import { Area, Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from "recharts";
|
|
15
15
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
-
function AnalyticsChart({
|
|
17
|
-
|
|
16
|
+
function AnalyticsChart({
|
|
17
|
+
label,
|
|
18
|
+
data,
|
|
19
|
+
index,
|
|
20
|
+
series,
|
|
21
|
+
valueFormatter,
|
|
22
|
+
showDots = false,
|
|
23
|
+
density
|
|
24
|
+
}) {
|
|
25
|
+
const config = Object.fromEntries(series.map((item) => [item.key, { label: item.label }]));
|
|
18
26
|
return /* @__PURE__ */ jsx(Chart3, {
|
|
27
|
+
role: "region",
|
|
19
28
|
"aria-label": label,
|
|
20
29
|
density,
|
|
21
30
|
config,
|
|
@@ -38,27 +47,32 @@ function AnalyticsChart({ label, data, index, series, valueFormatter, density })
|
|
|
38
47
|
tickFormatter: valueFormatter
|
|
39
48
|
}),
|
|
40
49
|
/* @__PURE__ */ jsx(ChartTooltip2, {
|
|
41
|
-
content: /* @__PURE__ */ jsx(ChartTooltipContent2, {
|
|
50
|
+
content: /* @__PURE__ */ jsx(ChartTooltipContent2, {
|
|
51
|
+
valueFormatter
|
|
52
|
+
})
|
|
42
53
|
}),
|
|
43
54
|
/* @__PURE__ */ jsx(ChartLegend2, {
|
|
44
55
|
content: /* @__PURE__ */ jsx(ChartLegendContent2, {})
|
|
45
56
|
}),
|
|
46
|
-
series.map((item) => item.type === "bar" ? /* @__PURE__ */ jsx(Bar, {
|
|
57
|
+
series.map((item, i) => item.type === "bar" ? /* @__PURE__ */ jsx(Bar, {
|
|
47
58
|
dataKey: item.key,
|
|
48
|
-
fill:
|
|
59
|
+
fill: `var(--chart-${i % 5 + 1})`,
|
|
49
60
|
stackId: item.stackId,
|
|
50
61
|
isAnimationActive: false
|
|
51
62
|
}, item.key) : item.type === "area" ? /* @__PURE__ */ jsx(Area, {
|
|
52
63
|
dataKey: item.key,
|
|
53
|
-
stroke:
|
|
54
|
-
fill:
|
|
64
|
+
stroke: `var(--chart-${i % 5 + 1})`,
|
|
65
|
+
fill: `var(--chart-${i % 5 + 1})`,
|
|
55
66
|
fillOpacity: 0.15,
|
|
67
|
+
dot: showDots,
|
|
68
|
+
connectNulls: false,
|
|
56
69
|
stackId: item.stackId,
|
|
57
70
|
isAnimationActive: false
|
|
58
71
|
}, item.key) : /* @__PURE__ */ jsx(Line, {
|
|
59
72
|
dataKey: item.key,
|
|
60
|
-
stroke:
|
|
61
|
-
dot:
|
|
73
|
+
stroke: `var(--chart-${i % 5 + 1})`,
|
|
74
|
+
dot: showDots,
|
|
75
|
+
connectNulls: false,
|
|
62
76
|
isAnimationActive: false
|
|
63
77
|
}, item.key))
|
|
64
78
|
]
|
|
@@ -35,6 +35,7 @@ export type ChartTooltipContentProps = Omit<DefaultTooltipContentProps<TooltipVa
|
|
|
35
35
|
className?: string;
|
|
36
36
|
htmlProps?: ComponentProps<"div">;
|
|
37
37
|
active?: boolean;
|
|
38
|
+
valueFormatter?: (value: number) => string;
|
|
38
39
|
hideLabel?: boolean;
|
|
39
40
|
hideIndicator?: boolean;
|
|
40
41
|
indicator?: "line" | "dot" | "dashed";
|