main
parent
726d1f9ac3
commit
5aaf59fab9
@ -0,0 +1,60 @@ |
|||||||
|
'use client'; |
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'; |
||||||
|
import { |
||||||
|
Card, |
||||||
|
CardAction, |
||||||
|
CardContent, |
||||||
|
CardDescription, |
||||||
|
CardFooter, |
||||||
|
CardHeader, |
||||||
|
CardTitle, |
||||||
|
} from '@/components/ui/card'; |
||||||
|
import { Input } from '@/components/ui/input'; |
||||||
|
import { Label } from '@/components/ui/label'; |
||||||
|
|
||||||
|
export default function CardPage() { |
||||||
|
return ( |
||||||
|
<div className="spce-y-6 flex h-full w-full flex-1 flex-col items-center justify-center"> |
||||||
|
<Card className="w-full max-w-sm"> |
||||||
|
<CardHeader> |
||||||
|
<CardTitle>Login to your account</CardTitle> |
||||||
|
<CardDescription>Enter your email below to login to your account</CardDescription> |
||||||
|
<CardAction> |
||||||
|
<Button variant="link">Sign up</Button> |
||||||
|
</CardAction> |
||||||
|
</CardHeader> |
||||||
|
<CardContent> |
||||||
|
<form> |
||||||
|
<div className="flex flex-col gap-6"> |
||||||
|
<div className="flex flex-col gap-2"> |
||||||
|
<Label htmlFor="email">Email</Label> |
||||||
|
<Input id="email" type="email" placeholder="email@example.com" required /> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col gap-2"> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
|
<Label htmlFor="password">Password</Label> |
||||||
|
<a |
||||||
|
href="#" |
||||||
|
className="ml-auto inline-block text-sm underline-offset-4 hover:underline" |
||||||
|
> |
||||||
|
Forgot your password? |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<Input id="password" type="password" required /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</CardContent> |
||||||
|
<CardFooter className="flex flex-col gap-2"> |
||||||
|
<Button type="submit" className="w-full"> |
||||||
|
Login |
||||||
|
</Button> |
||||||
|
<Button variant="outline" className="w-full"> |
||||||
|
Login with Google |
||||||
|
</Button> |
||||||
|
</CardFooter> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
'use client'; |
||||||
|
|
||||||
|
import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'; |
||||||
|
|
||||||
|
import { |
||||||
|
ChartConfig, |
||||||
|
ChartContainer, |
||||||
|
ChartLegend, |
||||||
|
ChartLegendContent, |
||||||
|
ChartTooltip, |
||||||
|
ChartTooltipContent, |
||||||
|
} from '@/components/ui/chart'; |
||||||
|
|
||||||
|
const chartData = [ |
||||||
|
{ month: 'January', desktop: 186, mobile: 80 }, |
||||||
|
{ month: 'February', desktop: 305, mobile: 200 }, |
||||||
|
{ month: 'March', desktop: 237, mobile: 120 }, |
||||||
|
{ month: 'April', desktop: 73, mobile: 190 }, |
||||||
|
{ month: 'May', desktop: 209, mobile: 130 }, |
||||||
|
{ month: 'June', desktop: 214, mobile: 140 }, |
||||||
|
]; |
||||||
|
|
||||||
|
const chartConfig = { |
||||||
|
desktop: { |
||||||
|
label: 'Desktop', |
||||||
|
color: 'var(--chart-1)', |
||||||
|
}, |
||||||
|
mobile: { |
||||||
|
label: 'Mobile', |
||||||
|
color: 'var(--chart-2)', |
||||||
|
}, |
||||||
|
} satisfies ChartConfig; |
||||||
|
|
||||||
|
export default function ChartPage() { |
||||||
|
return ( |
||||||
|
<div className="flex flex-1 flex-col items-center justify-center"> |
||||||
|
<ChartContainer config={chartConfig} className="min-h-[200px] max-w-sm"> |
||||||
|
<BarChart accessibilityLayer data={chartData}> |
||||||
|
<CartesianGrid vertical={false} /> |
||||||
|
<XAxis |
||||||
|
dataKey="month" |
||||||
|
tickLine={false} |
||||||
|
tickMargin={10} |
||||||
|
axisLine={false} |
||||||
|
tickFormatter={(v) => v.slice(0, 3)} |
||||||
|
/> |
||||||
|
<ChartTooltip content={<ChartTooltipContent />} /> |
||||||
|
<ChartLegend content={<ChartLegendContent />} /> |
||||||
|
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} /> |
||||||
|
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} /> |
||||||
|
</BarChart> |
||||||
|
</ChartContainer> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,75 +1,92 @@ |
|||||||
import * as React from 'react'; |
import * as React from "react" |
||||||
|
|
||||||
import { cn } from '@/lib/utils'; |
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
function Card({ className, ...props }: React.ComponentProps<'div'>) { |
function Card({ className, ...props }: React.ComponentProps<"div">) { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
data-slot="card" |
data-slot="card" |
||||||
className={cn( |
className={cn( |
||||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', |
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", |
||||||
className, |
className |
||||||
)} |
)} |
||||||
{...props} |
{...props} |
||||||
/> |
/> |
||||||
); |
) |
||||||
} |
} |
||||||
|
|
||||||
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { |
function CardHeader({ className, ...props }: React.ComponentProps<"div">) { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
data-slot="card-header" |
data-slot="card-header" |
||||||
className={cn( |
className={cn( |
||||||
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', |
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", |
||||||
className, |
className |
||||||
)} |
)} |
||||||
{...props} |
{...props} |
||||||
/> |
/> |
||||||
); |
) |
||||||
} |
} |
||||||
|
|
||||||
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { |
function CardTitle({ className, ...props }: React.ComponentProps<"div">) { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
data-slot="card-title" |
data-slot="card-title" |
||||||
className={cn('leading-none font-semibold', className)} |
className={cn("leading-none font-semibold", className)} |
||||||
{...props} |
{...props} |
||||||
/> |
/> |
||||||
); |
) |
||||||
} |
} |
||||||
|
|
||||||
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { |
function CardDescription({ className, ...props }: React.ComponentProps<"div">) { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
data-slot="card-description" |
data-slot="card-description" |
||||||
className={cn('text-muted-foreground text-sm', className)} |
className={cn("text-muted-foreground text-sm", className)} |
||||||
{...props} |
{...props} |
||||||
/> |
/> |
||||||
); |
) |
||||||
} |
} |
||||||
|
|
||||||
function CardAction({ className, ...props }: React.ComponentProps<'div'>) { |
function CardAction({ className, ...props }: React.ComponentProps<"div">) { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
data-slot="card-action" |
data-slot="card-action" |
||||||
className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)} |
className={cn( |
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end", |
||||||
|
className |
||||||
|
)} |
||||||
{...props} |
{...props} |
||||||
/> |
/> |
||||||
); |
) |
||||||
} |
} |
||||||
|
|
||||||
function CardContent({ className, ...props }: React.ComponentProps<'div'>) { |
function CardContent({ className, ...props }: React.ComponentProps<"div">) { |
||||||
return <div data-slot="card-content" className={cn('px-6', className)} {...props} />; |
return ( |
||||||
|
<div |
||||||
|
data-slot="card-content" |
||||||
|
className={cn("px-6", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
} |
} |
||||||
|
|
||||||
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { |
function CardFooter({ className, ...props }: React.ComponentProps<"div">) { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
data-slot="card-footer" |
data-slot="card-footer" |
||||||
className={cn('flex items-center px-6 [.border-t]:pt-6', className)} |
className={cn("flex items-center px-6 [.border-t]:pt-6", className)} |
||||||
{...props} |
{...props} |
||||||
/> |
/> |
||||||
); |
) |
||||||
} |
} |
||||||
|
|
||||||
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }; |
export { |
||||||
|
Card, |
||||||
|
CardHeader, |
||||||
|
CardFooter, |
||||||
|
CardTitle, |
||||||
|
CardAction, |
||||||
|
CardDescription, |
||||||
|
CardContent, |
||||||
|
} |
||||||
|
|||||||
@ -0,0 +1,353 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as RechartsPrimitive from "recharts" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||||
|
const THEMES = { light: "", dark: ".dark" } as const |
||||||
|
|
||||||
|
export type ChartConfig = { |
||||||
|
[k in string]: { |
||||||
|
label?: React.ReactNode |
||||||
|
icon?: React.ComponentType |
||||||
|
} & ( |
||||||
|
| { color?: string; theme?: never } |
||||||
|
| { color?: never; theme: Record<keyof typeof THEMES, string> } |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
type ChartContextProps = { |
||||||
|
config: ChartConfig |
||||||
|
} |
||||||
|
|
||||||
|
const ChartContext = React.createContext<ChartContextProps | null>(null) |
||||||
|
|
||||||
|
function useChart() { |
||||||
|
const context = React.useContext(ChartContext) |
||||||
|
|
||||||
|
if (!context) { |
||||||
|
throw new Error("useChart must be used within a <ChartContainer />") |
||||||
|
} |
||||||
|
|
||||||
|
return context |
||||||
|
} |
||||||
|
|
||||||
|
function ChartContainer({ |
||||||
|
id, |
||||||
|
className, |
||||||
|
children, |
||||||
|
config, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"div"> & { |
||||||
|
config: ChartConfig |
||||||
|
children: React.ComponentProps< |
||||||
|
typeof RechartsPrimitive.ResponsiveContainer |
||||||
|
>["children"] |
||||||
|
}) { |
||||||
|
const uniqueId = React.useId() |
||||||
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` |
||||||
|
|
||||||
|
return ( |
||||||
|
<ChartContext.Provider value={{ config }}> |
||||||
|
<div |
||||||
|
data-slot="chart" |
||||||
|
data-chart={chartId} |
||||||
|
className={cn( |
||||||
|
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ChartStyle id={chartId} config={config} /> |
||||||
|
<RechartsPrimitive.ResponsiveContainer> |
||||||
|
{children} |
||||||
|
</RechartsPrimitive.ResponsiveContainer> |
||||||
|
</div> |
||||||
|
</ChartContext.Provider> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { |
||||||
|
const colorConfig = Object.entries(config).filter( |
||||||
|
([, config]) => config.theme || config.color |
||||||
|
) |
||||||
|
|
||||||
|
if (!colorConfig.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<style |
||||||
|
dangerouslySetInnerHTML={{ |
||||||
|
__html: Object.entries(THEMES) |
||||||
|
.map( |
||||||
|
([theme, prefix]) => ` |
||||||
|
${prefix} [data-chart=${id}] { |
||||||
|
${colorConfig |
||||||
|
.map(([key, itemConfig]) => { |
||||||
|
const color = |
||||||
|
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || |
||||||
|
itemConfig.color |
||||||
|
return color ? ` --color-${key}: ${color};` : null |
||||||
|
}) |
||||||
|
.join("\n")} |
||||||
|
} |
||||||
|
` |
||||||
|
) |
||||||
|
.join("\n"), |
||||||
|
}} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const ChartTooltip = RechartsPrimitive.Tooltip |
||||||
|
|
||||||
|
function ChartTooltipContent({ |
||||||
|
active, |
||||||
|
payload, |
||||||
|
className, |
||||||
|
indicator = "dot", |
||||||
|
hideLabel = false, |
||||||
|
hideIndicator = false, |
||||||
|
label, |
||||||
|
labelFormatter, |
||||||
|
labelClassName, |
||||||
|
formatter, |
||||||
|
color, |
||||||
|
nameKey, |
||||||
|
labelKey, |
||||||
|
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & |
||||||
|
React.ComponentProps<"div"> & { |
||||||
|
hideLabel?: boolean |
||||||
|
hideIndicator?: boolean |
||||||
|
indicator?: "line" | "dot" | "dashed" |
||||||
|
nameKey?: string |
||||||
|
labelKey?: string |
||||||
|
}) { |
||||||
|
const { config } = useChart() |
||||||
|
|
||||||
|
const tooltipLabel = React.useMemo(() => { |
||||||
|
if (hideLabel || !payload?.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
const [item] = payload |
||||||
|
const key = `${labelKey || item?.dataKey || item?.name || "value"}` |
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||||
|
const value = |
||||||
|
!labelKey && typeof label === "string" |
||||||
|
? config[label as keyof typeof config]?.label || label |
||||||
|
: itemConfig?.label |
||||||
|
|
||||||
|
if (labelFormatter) { |
||||||
|
return ( |
||||||
|
<div className={cn("font-medium", labelClassName)}> |
||||||
|
{labelFormatter(value, payload)} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
if (!value) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return <div className={cn("font-medium", labelClassName)}>{value}</div> |
||||||
|
}, [ |
||||||
|
label, |
||||||
|
labelFormatter, |
||||||
|
payload, |
||||||
|
hideLabel, |
||||||
|
labelClassName, |
||||||
|
config, |
||||||
|
labelKey, |
||||||
|
]) |
||||||
|
|
||||||
|
if (!active || !payload?.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
const nestLabel = payload.length === 1 && indicator !== "dot" |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", |
||||||
|
className |
||||||
|
)} |
||||||
|
> |
||||||
|
{!nestLabel ? tooltipLabel : null} |
||||||
|
<div className="grid gap-1.5"> |
||||||
|
{payload.map((item, index) => { |
||||||
|
const key = `${nameKey || item.name || item.dataKey || "value"}` |
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||||
|
const indicatorColor = color || item.payload.fill || item.color |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={item.dataKey} |
||||||
|
className={cn( |
||||||
|
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", |
||||||
|
indicator === "dot" && "items-center" |
||||||
|
)} |
||||||
|
> |
||||||
|
{formatter && item?.value !== undefined && item.name ? ( |
||||||
|
formatter(item.value, item.name, item, index, item.payload) |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
{itemConfig?.icon ? ( |
||||||
|
<itemConfig.icon /> |
||||||
|
) : ( |
||||||
|
!hideIndicator && ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", |
||||||
|
{ |
||||||
|
"h-2.5 w-2.5": indicator === "dot", |
||||||
|
"w-1": indicator === "line", |
||||||
|
"w-0 border-[1.5px] border-dashed bg-transparent": |
||||||
|
indicator === "dashed", |
||||||
|
"my-0.5": nestLabel && indicator === "dashed", |
||||||
|
} |
||||||
|
)} |
||||||
|
style={ |
||||||
|
{ |
||||||
|
"--color-bg": indicatorColor, |
||||||
|
"--color-border": indicatorColor, |
||||||
|
} as React.CSSProperties |
||||||
|
} |
||||||
|
/> |
||||||
|
) |
||||||
|
)} |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-1 justify-between leading-none", |
||||||
|
nestLabel ? "items-end" : "items-center" |
||||||
|
)} |
||||||
|
> |
||||||
|
<div className="grid gap-1.5"> |
||||||
|
{nestLabel ? tooltipLabel : null} |
||||||
|
<span className="text-muted-foreground"> |
||||||
|
{itemConfig?.label || item.name} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
{item.value && ( |
||||||
|
<span className="text-foreground font-mono font-medium tabular-nums"> |
||||||
|
{item.value.toLocaleString()} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const ChartLegend = RechartsPrimitive.Legend |
||||||
|
|
||||||
|
function ChartLegendContent({ |
||||||
|
className, |
||||||
|
hideIcon = false, |
||||||
|
payload, |
||||||
|
verticalAlign = "bottom", |
||||||
|
nameKey, |
||||||
|
}: React.ComponentProps<"div"> & |
||||||
|
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & { |
||||||
|
hideIcon?: boolean |
||||||
|
nameKey?: string |
||||||
|
}) { |
||||||
|
const { config } = useChart() |
||||||
|
|
||||||
|
if (!payload?.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex items-center justify-center gap-4", |
||||||
|
verticalAlign === "top" ? "pb-3" : "pt-3", |
||||||
|
className |
||||||
|
)} |
||||||
|
> |
||||||
|
{payload.map((item) => { |
||||||
|
const key = `${nameKey || item.dataKey || "value"}` |
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={item.value} |
||||||
|
className={cn( |
||||||
|
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3" |
||||||
|
)} |
||||||
|
> |
||||||
|
{itemConfig?.icon && !hideIcon ? ( |
||||||
|
<itemConfig.icon /> |
||||||
|
) : ( |
||||||
|
<div |
||||||
|
className="h-2 w-2 shrink-0 rounded-[2px]" |
||||||
|
style={{ |
||||||
|
backgroundColor: item.color, |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{itemConfig?.label} |
||||||
|
</div> |
||||||
|
) |
||||||
|
})} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
// Helper to extract item config from a payload.
|
||||||
|
function getPayloadConfigFromPayload( |
||||||
|
config: ChartConfig, |
||||||
|
payload: unknown, |
||||||
|
key: string |
||||||
|
) { |
||||||
|
if (typeof payload !== "object" || payload === null) { |
||||||
|
return undefined |
||||||
|
} |
||||||
|
|
||||||
|
const payloadPayload = |
||||||
|
"payload" in payload && |
||||||
|
typeof payload.payload === "object" && |
||||||
|
payload.payload !== null |
||||||
|
? payload.payload |
||||||
|
: undefined |
||||||
|
|
||||||
|
let configLabelKey: string = key |
||||||
|
|
||||||
|
if ( |
||||||
|
key in payload && |
||||||
|
typeof payload[key as keyof typeof payload] === "string" |
||||||
|
) { |
||||||
|
configLabelKey = payload[key as keyof typeof payload] as string |
||||||
|
} else if ( |
||||||
|
payloadPayload && |
||||||
|
key in payloadPayload && |
||||||
|
typeof payloadPayload[key as keyof typeof payloadPayload] === "string" |
||||||
|
) { |
||||||
|
configLabelKey = payloadPayload[ |
||||||
|
key as keyof typeof payloadPayload |
||||||
|
] as string |
||||||
|
} |
||||||
|
|
||||||
|
return configLabelKey in config |
||||||
|
? config[configLabelKey] |
||||||
|
: config[key as keyof typeof config] |
||||||
|
} |
||||||
|
|
||||||
|
export { |
||||||
|
ChartContainer, |
||||||
|
ChartTooltip, |
||||||
|
ChartTooltipContent, |
||||||
|
ChartLegend, |
||||||
|
ChartLegendContent, |
||||||
|
ChartStyle, |
||||||
|
} |
||||||
Loading…
Reference in new issue