rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-02 17:08:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: chart

Browse Source
This commit is contained in:
shadcn
2026-01-15 10:26:46 +04:00
parent f2d4395233
commit 3f62e7dee0
31 changed files with 482 additions and 1502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
apps/v4/content/docs/components/base/chart.mdx
View File

@@ -13,7 +13,7 @@ component: true
<ComponentPreview
styleName="base-nova"
name="chart-bar-interactive"
name="chart-demo"
className="theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
hideCode
/>
@@ -53,12 +53,6 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
## Installation
<Callout className="mt-4">
**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
</Callout>
<CodeTabs>
<TabsList>
@@ -67,38 +61,10 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
</TabsList>
<TabsContent value="cli">
<Steps className="mb-0 pt-2">
<Step>Run the following command to install `chart.tsx`</Step>
```bash
npx shadcn@latest add chart
```
<Step>Add the following colors to your CSS file</Step>
```css title="app/globals.css" showLineNumbers
@layer base {
:root {
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
}
.dark {
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
}
}
```
</Steps>
</TabsContent>
<TabsContent value="manual">
@@ -151,7 +117,7 @@ npm install recharts
Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
<Steps className="mb-0 pt-2">
<Steps>
<Step>Start by defining your data</Step>
@@ -203,16 +169,10 @@ You can now build your chart using Recharts components.
</Callout>
<ComponentSource
name="chart-bar-demo"
title="components/example-chart.tsx"
styleName="base-nova"
/>
<ComponentPreview
styleName="base-nova"
name="chart-bar-demo"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example"
previewClassName="h-80"
/>
</Steps>
@@ -243,8 +203,8 @@ import { Bar, BarChart, CartesianGrid } from "recharts"
<ComponentPreview
styleName="base-nova"
name="chart-bar-demo-grid"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-grid"
previewClassName="h-80"
/>
</Steps>
@@ -282,8 +242,8 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
<ComponentPreview
styleName="base-nova"
name="chart-bar-demo-axis"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-axis"
previewClassName="h-80"
/>
</Steps>
@@ -324,8 +284,8 @@ import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
<ComponentPreview
styleName="base-nova"
name="chart-bar-demo-tooltip"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-tooltip"
previewClassName="h-80"
/>
Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.
@@ -367,8 +327,8 @@ import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
<ComponentPreview
styleName="base-nova"
name="chart-bar-demo-legend"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-legend"
previewClassName="h-80"
/>
</Steps>
@@ -417,7 +377,7 @@ Charts have built-in support for theming. You can use css variables (recommended
<Step>Define your colors in your css file</Step>
```css {6-7,14-15} title="app/globals.css" showLineNumbers
```css title="app/globals.css" showLineNumbers
@layer base {
:root {
--chart-1: oklch(0.646 0.222 41.116);
@@ -433,7 +393,7 @@ Charts have built-in support for theming. You can use css variables (recommended
<Step>Add the color to your `chartConfig`</Step>
```tsx {4,8} showLineNumbers
```tsx title="components/example-chart.tsx" showLineNumbers
const chartConfig = {
desktop: {
label: "Desktop",
@@ -452,12 +412,24 @@ const chartConfig = {
You can also define your colors directly in the chart config. Use the color format you prefer.
```tsx showLineNumbers
```tsx title="components/example-chart.tsx" showLineNumbers
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
mobile: {
label: "Mobile",
color: "hsl(220, 98%, 61%)",
},
tablet: {
label: "Tablet",
color: "oklch(0.5 0.2 240)",
},
laptop: {
label: "Laptop",
color: "var(--chart-2)",
},
} satisfies ChartConfig
```
@@ -473,7 +445,7 @@ To use the theme colors in your chart, reference the colors using the format `va
#### Chart Data
```tsx showLineNumbers
```tsx title="components/example-chart.tsx" showLineNumbers
const chartData = [
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
@@ -482,7 +454,7 @@ const chartData = [
#### Tailwind
```tsx
```tsx title="components/example-chart.tsx"
<LabelList className="fill-[--color-desktop]" />
```
@@ -490,12 +462,7 @@ const chartData = [
A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
<ComponentPreview
styleName="base-nova"
name="chart-tooltip-demo"
className="[&_.preview]:py-0"
hideCode
/>
<ComponentPreview styleName="base-nova" name="chart-tooltip" hideCode />
You can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.
@@ -503,11 +470,11 @@ Use `labelKey` and `nameKey` to use a custom key for the tooltip label and name.
Chart comes with the `<ChartTooltip>` and `<ChartTooltipContent>` components. You can use these two components to add custom tooltips to your chart.
```tsx
```tsx title="components/example-chart.tsx"
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartTooltip content={<ChartTooltipContent />} />
```
@@ -552,7 +519,7 @@ const chartConfig = {
} satisfies ChartConfig
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartTooltip
content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
/>
@@ -564,11 +531,11 @@ This will use `Total Visitors` for label and `Chrome` and `Safari` for the toolt
You can use the custom `<ChartLegend>` and `<ChartLegendContent>` components to add a legend to your chart.
```tsx
```tsx title="components/example-chart.tsx"
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartLegend content={<ChartLegendContent />} />
```
@@ -598,7 +565,7 @@ const chartConfig = {
} satisfies ChartConfig
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartLegend content={<ChartLegendContent nameKey="browser" />} />
```
@@ -610,6 +577,6 @@ You can turn on the `accessibilityLayer` prop to add an accessible layer to your
This prop adds keyboard access and screen reader support to your charts.
```tsx
```tsx title="components/example-chart.tsx"
<LineChart accessibilityLayer />
```

107
apps/v4/content/docs/components/radix/chart.mdx
View File

@@ -13,7 +13,7 @@ component: true
<ComponentPreview
styleName="radix-nova"
name="chart-bar-interactive"
name="chart-demo"
className="theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
hideCode
/>
@@ -53,12 +53,6 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
## Installation
<Callout className="mt-4">
**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
</Callout>
<CodeTabs>
<TabsList>
@@ -67,38 +61,10 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
</TabsList>
<TabsContent value="cli">
<Steps className="mb-0 pt-2">
<Step>Run the following command to install `chart.tsx`</Step>
```bash
npx shadcn@latest add chart
```
<Step>Add the following colors to your CSS file</Step>
```css title="app/globals.css" showLineNumbers
@layer base {
:root {
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
}
.dark {
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
}
}
```
</Steps>
</TabsContent>
<TabsContent value="manual">
@@ -151,7 +117,7 @@ npm install recharts
Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
<Steps className="mb-0 pt-2">
<Steps>
<Step>Start by defining your data</Step>
@@ -203,16 +169,10 @@ You can now build your chart using Recharts components.
</Callout>
<ComponentSource
name="chart-bar-demo"
title="components/example-chart.tsx"
styleName="radix-nova"
/>
<ComponentPreview
styleName="radix-nova"
name="chart-bar-demo"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example"
previewClassName="h-80"
/>
</Steps>
@@ -243,8 +203,8 @@ import { Bar, BarChart, CartesianGrid } from "recharts"
<ComponentPreview
styleName="radix-nova"
name="chart-bar-demo-grid"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-grid"
previewClassName="h-80"
/>
</Steps>
@@ -282,8 +242,8 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
<ComponentPreview
styleName="radix-nova"
name="chart-bar-demo-axis"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-axis"
previewClassName="h-80"
/>
</Steps>
@@ -324,8 +284,8 @@ import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
<ComponentPreview
styleName="radix-nova"
name="chart-bar-demo-tooltip"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-tooltip"
previewClassName="h-80"
/>
Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.
@@ -367,8 +327,8 @@ import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
<ComponentPreview
styleName="radix-nova"
name="chart-bar-demo-legend"
className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
name="chart-example-legend"
previewClassName="h-80"
/>
</Steps>
@@ -417,7 +377,7 @@ Charts have built-in support for theming. You can use css variables (recommended
<Step>Define your colors in your css file</Step>
```css {6-7,14-15} title="app/globals.css" showLineNumbers
```css title="app/globals.css" showLineNumbers
@layer base {
:root {
--chart-1: oklch(0.646 0.222 41.116);
@@ -433,7 +393,7 @@ Charts have built-in support for theming. You can use css variables (recommended
<Step>Add the color to your `chartConfig`</Step>
```tsx {4,8} showLineNumbers
```tsx title="components/example-chart.tsx" showLineNumbers
const chartConfig = {
desktop: {
label: "Desktop",
@@ -452,12 +412,24 @@ const chartConfig = {
You can also define your colors directly in the chart config. Use the color format you prefer.
```tsx showLineNumbers
```tsx title="components/example-chart.tsx" showLineNumbers
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
mobile: {
label: "Mobile",
color: "hsl(220, 98%, 61%)",
},
tablet: {
label: "Tablet",
color: "oklch(0.5 0.2 240)",
},
laptop: {
label: "Laptop",
color: "var(--chart-2)",
},
} satisfies ChartConfig
```
@@ -473,7 +445,7 @@ To use the theme colors in your chart, reference the colors using the format `va
#### Chart Data
```tsx showLineNumbers
```tsx title="components/example-chart.tsx" showLineNumbers
const chartData = [
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
@@ -482,7 +454,7 @@ const chartData = [
#### Tailwind
```tsx
```tsx title="components/example-chart.tsx"
<LabelList className="fill-[--color-desktop]" />
```
@@ -490,12 +462,7 @@ const chartData = [
A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
<ComponentPreview
styleName="radix-nova"
name="chart-tooltip-demo"
className="[&_.preview]:py-0"
hideCode
/>
<ComponentPreview styleName="radix-nova" name="chart-tooltip" hideCode />
You can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.
@@ -503,11 +470,11 @@ Use `labelKey` and `nameKey` to use a custom key for the tooltip label and name.
Chart comes with the `<ChartTooltip>` and `<ChartTooltipContent>` components. You can use these two components to add custom tooltips to your chart.
```tsx
```tsx title="components/example-chart.tsx"
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartTooltip content={<ChartTooltipContent />} />
```
@@ -552,7 +519,7 @@ const chartConfig = {
} satisfies ChartConfig
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartTooltip
content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
/>
@@ -564,11 +531,11 @@ This will use `Total Visitors` for label and `Chrome` and `Safari` for the toolt
You can use the custom `<ChartLegend>` and `<ChartLegendContent>` components to add a legend to your chart.
```tsx
```tsx title="components/example-chart.tsx"
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartLegend content={<ChartLegendContent />} />
```
@@ -598,7 +565,7 @@ const chartConfig = {
} satisfies ChartConfig
```
```tsx
```tsx title="components/example-chart.tsx"
<ChartLegend content={<ChartLegendContent nameKey="browser" />} />
```
@@ -610,6 +577,6 @@ You can turn on the `accessibilityLayer` prop to add an accessible layer to your
This prop adds keyboard access and screen reader support to your charts.
```tsx
```tsx title="components/example-chart.tsx"
<LineChart accessibilityLayer />
```

270
apps/v4/examples/__index__.tsx
View File

@@ -1123,159 +1123,94 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"chart-area-example": {
name: "chart-area-example",
filePath: "examples/radix/chart-area-example.tsx",
"chart-demo": {
name: "chart-demo",
filePath: "examples/radix/chart-demo.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-area-example")
const mod = await import("./radix/chart-demo")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-area-example"
) || "chart-demo"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-axis": {
name: "chart-bar-demo-axis",
filePath: "examples/radix/chart-bar-demo-axis.tsx",
"chart-example-axis": {
name: "chart-example-axis",
filePath: "examples/radix/chart-example-axis.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-bar-demo-axis")
const mod = await import("./radix/chart-example-axis")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-axis"
) || "chart-example-axis"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-grid": {
name: "chart-bar-demo-grid",
filePath: "examples/radix/chart-bar-demo-grid.tsx",
"chart-example-grid": {
name: "chart-example-grid",
filePath: "examples/radix/chart-example-grid.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-bar-demo-grid")
const mod = await import("./radix/chart-example-grid")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-grid"
) || "chart-example-grid"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-legend": {
name: "chart-bar-demo-legend",
filePath: "examples/radix/chart-bar-demo-legend.tsx",
"chart-example-legend": {
name: "chart-example-legend",
filePath: "examples/radix/chart-example-legend.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-bar-demo-legend")
const mod = await import("./radix/chart-example-legend")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-legend"
) || "chart-example-legend"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-tooltip": {
name: "chart-bar-demo-tooltip",
filePath: "examples/radix/chart-bar-demo-tooltip.tsx",
"chart-example-tooltip": {
name: "chart-example-tooltip",
filePath: "examples/radix/chart-example-tooltip.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-bar-demo-tooltip")
const mod = await import("./radix/chart-example-tooltip")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-tooltip"
) || "chart-example-tooltip"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo": {
name: "chart-bar-demo",
filePath: "examples/radix/chart-bar-demo.tsx",
"chart-example": {
name: "chart-example",
filePath: "examples/radix/chart-example.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-bar-demo")
const mod = await import("./radix/chart-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo"
) || "chart-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-example": {
name: "chart-bar-example",
filePath: "examples/radix/chart-bar-example.tsx",
"chart-tooltip": {
name: "chart-tooltip",
filePath: "examples/radix/chart-tooltip.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-bar-example")
const mod = await import("./radix/chart-tooltip")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-line-example": {
name: "chart-line-example",
filePath: "examples/radix/chart-line-example.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-line-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-line-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-pie-example": {
name: "chart-pie-example",
filePath: "examples/radix/chart-pie-example.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-pie-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-pie-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-radar-example": {
name: "chart-radar-example",
filePath: "examples/radix/chart-radar-example.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-radar-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-radar-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-radial-example": {
name: "chart-radial-example",
filePath: "examples/radix/chart-radial-example.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-radial-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-radial-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-tooltip-demo": {
name: "chart-tooltip-demo",
filePath: "examples/radix/chart-tooltip-demo.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/chart-tooltip-demo")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-tooltip-demo"
) || "chart-tooltip"
return { default: mod.default || mod[exportName] }
}),
},
@@ -7822,159 +7757,94 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"chart-area-example": {
name: "chart-area-example",
filePath: "examples/base/chart-area-example.tsx",
"chart-demo": {
name: "chart-demo",
filePath: "examples/base/chart-demo.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-area-example")
const mod = await import("./base/chart-demo")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-area-example"
) || "chart-demo"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-axis": {
name: "chart-bar-demo-axis",
filePath: "examples/base/chart-bar-demo-axis.tsx",
"chart-example-axis": {
name: "chart-example-axis",
filePath: "examples/base/chart-example-axis.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-bar-demo-axis")
const mod = await import("./base/chart-example-axis")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-axis"
) || "chart-example-axis"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-grid": {
name: "chart-bar-demo-grid",
filePath: "examples/base/chart-bar-demo-grid.tsx",
"chart-example-grid": {
name: "chart-example-grid",
filePath: "examples/base/chart-example-grid.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-bar-demo-grid")
const mod = await import("./base/chart-example-grid")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-grid"
) || "chart-example-grid"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-legend": {
name: "chart-bar-demo-legend",
filePath: "examples/base/chart-bar-demo-legend.tsx",
"chart-example-legend": {
name: "chart-example-legend",
filePath: "examples/base/chart-example-legend.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-bar-demo-legend")
const mod = await import("./base/chart-example-legend")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-legend"
) || "chart-example-legend"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo-tooltip": {
name: "chart-bar-demo-tooltip",
filePath: "examples/base/chart-bar-demo-tooltip.tsx",
"chart-example-tooltip": {
name: "chart-example-tooltip",
filePath: "examples/base/chart-example-tooltip.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-bar-demo-tooltip")
const mod = await import("./base/chart-example-tooltip")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo-tooltip"
) || "chart-example-tooltip"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-demo": {
name: "chart-bar-demo",
filePath: "examples/base/chart-bar-demo.tsx",
"chart-example": {
name: "chart-example",
filePath: "examples/base/chart-example.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-bar-demo")
const mod = await import("./base/chart-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-demo"
) || "chart-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-bar-example": {
name: "chart-bar-example",
filePath: "examples/base/chart-bar-example.tsx",
"chart-tooltip": {
name: "chart-tooltip",
filePath: "examples/base/chart-tooltip.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-bar-example")
const mod = await import("./base/chart-tooltip")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-bar-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-line-example": {
name: "chart-line-example",
filePath: "examples/base/chart-line-example.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-line-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-line-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-pie-example": {
name: "chart-pie-example",
filePath: "examples/base/chart-pie-example.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-pie-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-pie-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-radar-example": {
name: "chart-radar-example",
filePath: "examples/base/chart-radar-example.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-radar-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-radar-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-radial-example": {
name: "chart-radial-example",
filePath: "examples/base/chart-radial-example.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-radial-example")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-radial-example"
return { default: mod.default || mod[exportName] }
}),
},
"chart-tooltip-demo": {
name: "chart-tooltip-demo",
filePath: "examples/base/chart-tooltip-demo.tsx",
component: React.lazy(async () => {
const mod = await import("./base/chart-tooltip-demo")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "chart-tooltip-demo"
) || "chart-tooltip"
return { default: mod.default || mod[exportName] }
}),
},

90
apps/v4/examples/base/chart-area-example.tsx
View File

@@ -1,90 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/base/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/base/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
const areaChartData = [
{ month: "January", desktop: 186 },
{ month: "February", desktop: 305 },
{ month: "March", desktop: 237 },
{ month: "April", desktop: 73 },
{ month: "May", desktop: 209 },
{ month: "June", desktop: 214 },
]
const areaChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
} satisfies ChartConfig
export function ChartAreaExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Area Chart</CardTitle>
<CardDescription>
Showing total visitors for the last 6 months
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={areaChartConfig}>
<AreaChart
accessibilityLayer
data={areaChartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="line" />}
/>
<Area
dataKey="desktop"
type="natural"
fill="var(--color-desktop)"
fillOpacity={0.4}
stroke="var(--color-desktop)"
/>
</AreaChart>
</ChartContainer>
</CardContent>
<CardFooter>
<div className="flex w-full items-start gap-2">
<div className="grid gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month{" "}
<TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
January - June 2024
</div>
</div>
</div>
</CardFooter>
</Card>
)
}

75
apps/v4/examples/base/chart-bar-example.tsx
View File

@@ -1,75 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/base/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/base/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
const barChartData = [
{ 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 barChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartBarExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Bar Chart - Multiple</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={barChartConfig}>
<BarChart accessibilityLayer data={barChartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="dashed" />}
/>
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col items-start gap-2">
<div className="flex gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</CardFooter>
</Card>
)
}

160
apps/v4/examples/base/chart-demo.tsx Normal file
View File

@@ -0,0 +1,160 @@
"use client"
import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/registry/new-york-v4/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
export const description = "An interactive bar chart"
const chartData = [
{ date: "2024-04-01", desktop: 222, mobile: 150 },
{ date: "2024-04-02", desktop: 97, mobile: 180 },
{ date: "2024-04-03", desktop: 167, mobile: 120 },
{ date: "2024-04-04", desktop: 242, mobile: 260 },
{ date: "2024-04-05", desktop: 373, mobile: 290 },
{ date: "2024-04-06", desktop: 301, mobile: 340 },
{ date: "2024-04-07", desktop: 245, mobile: 180 },
{ date: "2024-04-08", desktop: 409, mobile: 320 },
{ date: "2024-04-09", desktop: 59, mobile: 110 },
{ date: "2024-04-10", desktop: 261, mobile: 190 },
{ date: "2024-04-11", desktop: 327, mobile: 350 },
{ date: "2024-04-12", desktop: 292, mobile: 210 },
{ date: "2024-04-13", desktop: 342, mobile: 380 },
{ date: "2024-04-14", desktop: 137, mobile: 220 },
{ date: "2024-04-15", desktop: 120, mobile: 170 },
{ date: "2024-04-16", desktop: 138, mobile: 190 },
{ date: "2024-04-17", desktop: 446, mobile: 360 },
{ date: "2024-04-18", desktop: 364, mobile: 410 },
{ date: "2024-04-19", desktop: 243, mobile: 180 },
{ date: "2024-04-20", desktop: 89, mobile: 150 },
{ date: "2024-04-21", desktop: 137, mobile: 200 },
{ date: "2024-04-22", desktop: 224, mobile: 170 },
{ date: "2024-04-23", desktop: 138, mobile: 230 },
{ date: "2024-04-24", desktop: 387, mobile: 290 },
{ date: "2024-04-25", desktop: 215, mobile: 250 },
{ date: "2024-04-26", desktop: 75, mobile: 130 },
{ date: "2024-04-27", desktop: 383, mobile: 420 },
{ date: "2024-04-28", desktop: 122, mobile: 180 },
{ date: "2024-04-29", desktop: 315, mobile: 240 },
{ date: "2024-04-30", desktop: 454, mobile: 380 },
]
const chartConfig = {
views: {
label: "Page Views",
},
desktop: {
label: "Desktop",
color: "var(--chart-2)",
},
mobile: {
label: "Mobile",
color: "var(--chart-1)",
},
} satisfies ChartConfig
export function ChartDemo() {
const [activeChart, setActiveChart] =
React.useState<keyof typeof chartConfig>("desktop")
const total = React.useMemo(
() => ({
desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
}),
[]
)
return (
<Card className="py-0 pb-4">
<CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
<div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
<CardTitle>Bar Chart - Interactive</CardTitle>
<CardDescription>
Showing total visitors for the last 3 months
</CardDescription>
</div>
<div className="flex">
{["desktop", "mobile"].map((key) => {
const chart = key as keyof typeof chartConfig
return (
<button
key={chart}
data-active={activeChart === chart}
className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
onClick={() => setActiveChart(chart)}
>
<span className="text-muted-foreground text-xs">
{chartConfig[chart].label}
</span>
<span className="text-lg leading-none font-bold sm:text-3xl">
{total[key as keyof typeof total].toLocaleString()}
</span>
</button>
)
})}
</div>
</CardHeader>
<CardContent className="px-2 sm:p-6">
<ChartContainer
config={chartConfig}
className="aspect-auto h-[250px] w-full"
>
<BarChart
accessibilityLayer
data={chartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
tickMargin={8}
minTickGap={32}
tickFormatter={(value) => {
const date = new Date(value)
return date.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})
}}
/>
<ChartTooltip
content={
<ChartTooltipContent
className="w-[150px]"
nameKey="views"
labelFormatter={(value) => {
return new Date(value).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})
}}
/>
}
/>
<Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
</BarChart>
</ChartContainer>
</CardContent>
</Card>
)
}

0
apps/v4/examples/base/chart-bar-demo-axis.tsx → apps/v4/examples/base/chart-example-axis.tsx
View File

0
apps/v4/examples/base/chart-bar-demo-grid.tsx → apps/v4/examples/base/chart-example-grid.tsx
View File

0
apps/v4/examples/base/chart-bar-demo-legend.tsx → apps/v4/examples/base/chart-example-legend.tsx
View File

0
apps/v4/examples/base/chart-bar-demo-tooltip.tsx → apps/v4/examples/base/chart-example-tooltip.tsx
View File

2
apps/v4/examples/base/chart-bar-demo.tsx → apps/v4/examples/base/chart-example.tsx
View File

@@ -23,7 +23,7 @@ const chartConfig = {
},
} satisfies ChartConfig
export function ChartBarDemo() {
export function ChartExample() {
return (
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>

96
apps/v4/examples/base/chart-line-example.tsx
View File

@@ -1,96 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/base/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/base/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
const lineChartData = [
{ 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 lineChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartLineExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Line Chart - Multiple</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={lineChartConfig}>
<LineChart
accessibilityLayer
data={lineChartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
<Line
dataKey="desktop"
type="monotone"
stroke="var(--color-desktop)"
strokeWidth={2}
dot={false}
/>
<Line
dataKey="mobile"
type="monotone"
stroke="var(--color-mobile)"
strokeWidth={2}
dot={false}
/>
</LineChart>
</ChartContainer>
</CardContent>
<CardFooter>
<div className="flex w-full items-start gap-2">
<div className="grid gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month{" "}
<TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
Showing total visitors for the last 6 months
</div>
</div>
</div>
</CardFooter>
</Card>
)
}

126
apps/v4/examples/base/chart-pie-example.tsx
View File

@@ -1,126 +0,0 @@
"use client"
import * as React from "react"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/base/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/base/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { Label, Pie, PieChart } from "recharts"
const pieChartData = [
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
{ browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
{ browser: "other", visitors: 190, fill: "var(--color-other)" },
]
const pieChartConfig = {
visitors: {
label: "Visitors",
},
chrome: {
label: "Chrome",
color: "var(--chart-1)",
},
safari: {
label: "Safari",
color: "var(--chart-2)",
},
firefox: {
label: "Firefox",
color: "var(--chart-3)",
},
edge: {
label: "Edge",
color: "var(--chart-4)",
},
other: {
label: "Other",
color: "var(--chart-5)",
},
} satisfies ChartConfig
export function ChartPieExample() {
const totalVisitors = React.useMemo(() => {
return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)
}, [])
return (
<Card className="w-full">
<CardHeader className="items-center pb-0">
<CardTitle>Pie Chart - Donut with Text</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent className="flex-1 pb-0">
<ChartContainer
config={pieChartConfig}
className="mx-auto aspect-square max-h-[250px]"
>
<PieChart>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Pie
data={pieChartData}
dataKey="visitors"
nameKey="browser"
innerRadius={60}
strokeWidth={5}
>
<Label
content={({ viewBox }) => {
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
return (
<text
x={viewBox.cx}
y={viewBox.cy}
textAnchor="middle"
dominantBaseline="middle"
>
<tspan
x={viewBox.cx}
y={viewBox.cy}
className="fill-foreground text-3xl font-bold"
>
{totalVisitors.toLocaleString()}
</tspan>
<tspan
x={viewBox.cx}
y={(viewBox.cy || 0) + 24}
className="fill-muted-foreground"
>
Visitors
</tspan>
</text>
)
}
}}
/>
</Pie>
</PieChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</CardFooter>
</Card>
)
}

78
apps/v4/examples/base/chart-radar-example.tsx
View File

@@ -1,78 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/base/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/base/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
const radarChartData = [
{ 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 radarChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartRadarExample() {
return (
<Card className="w-full">
<CardHeader className="items-center pb-4">
<CardTitle>Radar Chart - Multiple</CardTitle>
<CardDescription>
Showing total visitors for the last 6 months
</CardDescription>
</CardHeader>
<CardContent className="pb-0">
<ChartContainer
config={radarChartConfig}
className="mx-auto aspect-square max-h-[250px]"
>
<RadarChart data={radarChartData}>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="line" />}
/>
<PolarAngleAxis dataKey="month" />
<PolarGrid />
<Radar
dataKey="desktop"
fill="var(--color-desktop)"
fillOpacity={0.6}
/>
<Radar dataKey="mobile" fill="var(--color-mobile)" />
</RadarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
January - June 2024
</div>
</CardFooter>
</Card>
)
}

103
apps/v4/examples/base/chart-radial-example.tsx
View File

@@ -1,103 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/base/ui/card"
import { ChartContainer, type ChartConfig } from "@/examples/base/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import {
Label,
PolarGrid,
PolarRadiusAxis,
RadialBar,
RadialBarChart,
} from "recharts"
const radialChartData = [
{ browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
]
const radialChartConfig = {
visitors: {
label: "Visitors",
},
safari: {
label: "Safari",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartRadialExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Radial Chart - Shape</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent className="flex-1 pb-0">
<ChartContainer
config={radialChartConfig}
className="mx-auto aspect-square max-h-[210px]"
>
<RadialBarChart
data={radialChartData}
endAngle={100}
innerRadius={80}
outerRadius={140}
>
<PolarGrid
gridType="circle"
radialLines={false}
stroke="none"
className="first:fill-muted last:fill-background"
polarRadius={[86, 74]}
/>
<RadialBar dataKey="visitors" background />
<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
<Label
content={({ viewBox }) => {
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
return (
<text
x={viewBox.cx}
y={viewBox.cy}
textAnchor="middle"
dominantBaseline="middle"
>
<tspan
x={viewBox.cx}
y={viewBox.cy}
className="fill-foreground text-4xl font-bold"
>
{radialChartData[0].visitors.toLocaleString()}
</tspan>
<tspan
x={viewBox.cx}
y={(viewBox.cy || 0) + 24}
className="fill-muted-foreground"
>
Visitors
</tspan>
</text>
)
}
}}
/>
</PolarRadiusAxis>
</RadialBarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</CardFooter>
</Card>
)
}

18
apps/v4/examples/base/chart-tooltip-demo.tsx → apps/v4/examples/base/chart-tooltip.tsx
View File

@@ -4,7 +4,7 @@ import * as React from "react"
import { cn } from "@/lib/utils"
export default function Component() {
export function ChartTooltipDemo() {
return (
<div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
<div>
@@ -34,8 +34,8 @@ export default function Component() {
<TooltipDemo
label="Page Views"
payload={[
{ name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
{ name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
{ name: "Desktop", value: 186, fill: "var(--chart-1)" },
{ name: "Mobile", value: 80, fill: "var(--chart-2)" },
]}
className="w-[8rem]"
/>
@@ -68,8 +68,8 @@ export default function Component() {
label="Browser"
hideLabel
payload={[
{ name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
{ name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
{ name: "Chrome", value: 1286, fill: "var(--chart-3)" },
{ name: "Firefox", value: 1000, fill: "var(--chart-4)" },
]}
indicator="dashed"
className="w-[8rem]"
@@ -78,9 +78,7 @@ export default function Component() {
<div className="!hidden md:!flex">
<TooltipDemo
label="Page Views"
payload={[
{ name: "Desktop", value: 12486, fill: "hsl(var(--chart-3))" },
]}
payload={[{ name: "Desktop", value: 12486, fill: "var(--chart-3)" }]}
className="w-[9rem]"
indicator="line"
/>
@@ -92,9 +90,7 @@ export default function Component() {
<TooltipDemo
label="Browser"
hideLabel
payload={[
{ name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
]}
payload={[{ name: "Chrome", value: 1286, fill: "var(--chart-1)" }]}
indicator="dot"
className="w-[8rem]"
/>

90
apps/v4/examples/radix/chart-area-example.tsx
View File

@@ -1,90 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/radix/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/radix/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
const areaChartData = [
{ month: "January", desktop: 186 },
{ month: "February", desktop: 305 },
{ month: "March", desktop: 237 },
{ month: "April", desktop: 73 },
{ month: "May", desktop: 209 },
{ month: "June", desktop: 214 },
]
const areaChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
} satisfies ChartConfig
export function ChartAreaExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Area Chart</CardTitle>
<CardDescription>
Showing total visitors for the last 6 months
</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={areaChartConfig}>
<AreaChart
accessibilityLayer
data={areaChartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="line" />}
/>
<Area
dataKey="desktop"
type="natural"
fill="var(--color-desktop)"
fillOpacity={0.4}
stroke="var(--color-desktop)"
/>
</AreaChart>
</ChartContainer>
</CardContent>
<CardFooter>
<div className="flex w-full items-start gap-2">
<div className="grid gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month{" "}
<TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
January - June 2024
</div>
</div>
</div>
</CardFooter>
</Card>
)
}

75
apps/v4/examples/radix/chart-bar-example.tsx
View File

@@ -1,75 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/radix/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/radix/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
const barChartData = [
{ 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 barChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartBarExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Bar Chart - Multiple</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={barChartConfig}>
<BarChart accessibilityLayer data={barChartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="dashed" />}
/>
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col items-start gap-2">
<div className="flex gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</CardFooter>
</Card>
)
}

160
apps/v4/examples/radix/chart-demo.tsx Normal file
View File

@@ -0,0 +1,160 @@
"use client"
import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/registry/new-york-v4/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/registry/new-york-v4/ui/chart"
export const description = "An interactive bar chart"
const chartData = [
{ date: "2024-04-01", desktop: 222, mobile: 150 },
{ date: "2024-04-02", desktop: 97, mobile: 180 },
{ date: "2024-04-03", desktop: 167, mobile: 120 },
{ date: "2024-04-04", desktop: 242, mobile: 260 },
{ date: "2024-04-05", desktop: 373, mobile: 290 },
{ date: "2024-04-06", desktop: 301, mobile: 340 },
{ date: "2024-04-07", desktop: 245, mobile: 180 },
{ date: "2024-04-08", desktop: 409, mobile: 320 },
{ date: "2024-04-09", desktop: 59, mobile: 110 },
{ date: "2024-04-10", desktop: 261, mobile: 190 },
{ date: "2024-04-11", desktop: 327, mobile: 350 },
{ date: "2024-04-12", desktop: 292, mobile: 210 },
{ date: "2024-04-13", desktop: 342, mobile: 380 },
{ date: "2024-04-14", desktop: 137, mobile: 220 },
{ date: "2024-04-15", desktop: 120, mobile: 170 },
{ date: "2024-04-16", desktop: 138, mobile: 190 },
{ date: "2024-04-17", desktop: 446, mobile: 360 },
{ date: "2024-04-18", desktop: 364, mobile: 410 },
{ date: "2024-04-19", desktop: 243, mobile: 180 },
{ date: "2024-04-20", desktop: 89, mobile: 150 },
{ date: "2024-04-21", desktop: 137, mobile: 200 },
{ date: "2024-04-22", desktop: 224, mobile: 170 },
{ date: "2024-04-23", desktop: 138, mobile: 230 },
{ date: "2024-04-24", desktop: 387, mobile: 290 },
{ date: "2024-04-25", desktop: 215, mobile: 250 },
{ date: "2024-04-26", desktop: 75, mobile: 130 },
{ date: "2024-04-27", desktop: 383, mobile: 420 },
{ date: "2024-04-28", desktop: 122, mobile: 180 },
{ date: "2024-04-29", desktop: 315, mobile: 240 },
{ date: "2024-04-30", desktop: 454, mobile: 380 },
]
const chartConfig = {
views: {
label: "Page Views",
},
desktop: {
label: "Desktop",
color: "var(--chart-2)",
},
mobile: {
label: "Mobile",
color: "var(--chart-1)",
},
} satisfies ChartConfig
export function ChartDemo() {
const [activeChart, setActiveChart] =
React.useState<keyof typeof chartConfig>("desktop")
const total = React.useMemo(
() => ({
desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
}),
[]
)
return (
<Card className="py-0 pb-4">
<CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
<div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
<CardTitle>Bar Chart - Interactive</CardTitle>
<CardDescription>
Showing total visitors for the last 3 months
</CardDescription>
</div>
<div className="flex">
{["desktop", "mobile"].map((key) => {
const chart = key as keyof typeof chartConfig
return (
<button
key={chart}
data-active={activeChart === chart}
className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
onClick={() => setActiveChart(chart)}
>
<span className="text-muted-foreground text-xs">
{chartConfig[chart].label}
</span>
<span className="text-lg leading-none font-bold sm:text-3xl">
{total[key as keyof typeof total].toLocaleString()}
</span>
</button>
)
})}
</div>
</CardHeader>
<CardContent className="px-2 sm:p-6">
<ChartContainer
config={chartConfig}
className="aspect-auto h-[250px] w-full"
>
<BarChart
accessibilityLayer
data={chartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
tickMargin={8}
minTickGap={32}
tickFormatter={(value) => {
const date = new Date(value)
return date.toLocaleDateString("en-US", {
month: "short",
day: "numeric",
})
}}
/>
<ChartTooltip
content={
<ChartTooltipContent
className="w-[150px]"
nameKey="views"
labelFormatter={(value) => {
return new Date(value).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})
}}
/>
}
/>
<Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
</BarChart>
</ChartContainer>
</CardContent>
</Card>
)
}

0
apps/v4/examples/radix/chart-bar-demo-axis.tsx → apps/v4/examples/radix/chart-example-axis.tsx
View File

0
apps/v4/examples/radix/chart-bar-demo-grid.tsx → apps/v4/examples/radix/chart-example-grid.tsx
View File

0
apps/v4/examples/radix/chart-bar-demo-legend.tsx → apps/v4/examples/radix/chart-example-legend.tsx
View File

0
apps/v4/examples/radix/chart-bar-demo-tooltip.tsx → apps/v4/examples/radix/chart-example-tooltip.tsx
View File

2
apps/v4/examples/radix/chart-bar-demo.tsx → apps/v4/examples/radix/chart-example.tsx
View File

@@ -23,7 +23,7 @@ const chartConfig = {
},
} satisfies ChartConfig
export function ChartBarDemo() {
export function ChartExample() {
return (
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>

96
apps/v4/examples/radix/chart-line-example.tsx
View File

@@ -1,96 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/radix/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/radix/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
const lineChartData = [
{ 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 lineChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartLineExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Line Chart - Multiple</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent>
<ChartContainer config={lineChartConfig}>
<LineChart
accessibilityLayer
data={lineChartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
<Line
dataKey="desktop"
type="monotone"
stroke="var(--color-desktop)"
strokeWidth={2}
dot={false}
/>
<Line
dataKey="mobile"
type="monotone"
stroke="var(--color-mobile)"
strokeWidth={2}
dot={false}
/>
</LineChart>
</ChartContainer>
</CardContent>
<CardFooter>
<div className="flex w-full items-start gap-2">
<div className="grid gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month{" "}
<TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
Showing total visitors for the last 6 months
</div>
</div>
</div>
</CardFooter>
</Card>
)
}

126
apps/v4/examples/radix/chart-pie-example.tsx
View File

@@ -1,126 +0,0 @@
"use client"
import * as React from "react"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/radix/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/radix/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { Label, Pie, PieChart } from "recharts"
const pieChartData = [
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
{ browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
{ browser: "other", visitors: 190, fill: "var(--color-other)" },
]
const pieChartConfig = {
visitors: {
label: "Visitors",
},
chrome: {
label: "Chrome",
color: "var(--chart-1)",
},
safari: {
label: "Safari",
color: "var(--chart-2)",
},
firefox: {
label: "Firefox",
color: "var(--chart-3)",
},
edge: {
label: "Edge",
color: "var(--chart-4)",
},
other: {
label: "Other",
color: "var(--chart-5)",
},
} satisfies ChartConfig
export function ChartPieExample() {
const totalVisitors = React.useMemo(() => {
return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)
}, [])
return (
<Card className="w-full">
<CardHeader className="items-center pb-0">
<CardTitle>Pie Chart - Donut with Text</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent className="flex-1 pb-0">
<ChartContainer
config={pieChartConfig}
className="mx-auto aspect-square max-h-[250px]"
>
<PieChart>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Pie
data={pieChartData}
dataKey="visitors"
nameKey="browser"
innerRadius={60}
strokeWidth={5}
>
<Label
content={({ viewBox }) => {
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
return (
<text
x={viewBox.cx}
y={viewBox.cy}
textAnchor="middle"
dominantBaseline="middle"
>
<tspan
x={viewBox.cx}
y={viewBox.cy}
className="fill-foreground text-3xl font-bold"
>
{totalVisitors.toLocaleString()}
</tspan>
<tspan
x={viewBox.cx}
y={(viewBox.cy || 0) + 24}
className="fill-muted-foreground"
>
Visitors
</tspan>
</text>
)
}
}}
/>
</Pie>
</PieChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</CardFooter>
</Card>
)
}

78
apps/v4/examples/radix/chart-radar-example.tsx
View File

@@ -1,78 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/radix/ui/card"
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
type ChartConfig,
} from "@/examples/radix/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
const radarChartData = [
{ 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 radarChartConfig = {
desktop: {
label: "Desktop",
color: "var(--chart-1)",
},
mobile: {
label: "Mobile",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartRadarExample() {
return (
<Card className="w-full">
<CardHeader className="items-center pb-4">
<CardTitle>Radar Chart - Multiple</CardTitle>
<CardDescription>
Showing total visitors for the last 6 months
</CardDescription>
</CardHeader>
<CardContent className="pb-0">
<ChartContainer
config={radarChartConfig}
className="mx-auto aspect-square max-h-[250px]"
>
<RadarChart data={radarChartData}>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent indicator="line" />}
/>
<PolarAngleAxis dataKey="month" />
<PolarGrid />
<Radar
dataKey="desktop"
fill="var(--color-desktop)"
fillOpacity={0.6}
/>
<Radar dataKey="mobile" fill="var(--color-mobile)" />
</RadarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground flex items-center gap-2 leading-none">
January - June 2024
</div>
</CardFooter>
</Card>
)
}

103
apps/v4/examples/radix/chart-radial-example.tsx
View File

@@ -1,103 +0,0 @@
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/examples/radix/ui/card"
import { ChartContainer, type ChartConfig } from "@/examples/radix/ui/chart"
import { TrendingUpIcon } from "lucide-react"
import {
Label,
PolarGrid,
PolarRadiusAxis,
RadialBar,
RadialBarChart,
} from "recharts"
const radialChartData = [
{ browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
]
const radialChartConfig = {
visitors: {
label: "Visitors",
},
safari: {
label: "Safari",
color: "var(--chart-2)",
},
} satisfies ChartConfig
export function ChartRadialExample() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle>Radial Chart - Shape</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent className="flex-1 pb-0">
<ChartContainer
config={radialChartConfig}
className="mx-auto aspect-square max-h-[210px]"
>
<RadialBarChart
data={radialChartData}
endAngle={100}
innerRadius={80}
outerRadius={140}
>
<PolarGrid
gridType="circle"
radialLines={false}
stroke="none"
className="first:fill-muted last:fill-background"
polarRadius={[86, 74]}
/>
<RadialBar dataKey="visitors" background />
<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
<Label
content={({ viewBox }) => {
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
return (
<text
x={viewBox.cx}
y={viewBox.cy}
textAnchor="middle"
dominantBaseline="middle"
>
<tspan
x={viewBox.cx}
y={viewBox.cy}
className="fill-foreground text-4xl font-bold"
>
{radialChartData[0].visitors.toLocaleString()}
</tspan>
<tspan
x={viewBox.cx}
y={(viewBox.cy || 0) + 24}
className="fill-muted-foreground"
>
Visitors
</tspan>
</text>
)
}
}}
/>
</PolarRadiusAxis>
</RadialBarChart>
</ChartContainer>
</CardContent>
<CardFooter className="flex-col gap-2">
<div className="flex items-center gap-2 leading-none font-medium">
Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
</div>
<div className="text-muted-foreground leading-none">
Showing total visitors for the last 6 months
</div>
</CardFooter>
</Card>
)
}

18
apps/v4/examples/radix/chart-tooltip-demo.tsx → apps/v4/examples/radix/chart-tooltip.tsx
View File

@@ -4,7 +4,7 @@ import * as React from "react"
import { cn } from "@/lib/utils"
export default function Component() {
export function ChartTooltipDemo() {
return (
<div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
<div>
@@ -34,8 +34,8 @@ export default function Component() {
<TooltipDemo
label="Page Views"
payload={[
{ name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
{ name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
{ name: "Desktop", value: 186, fill: "var(--chart-1)" },
{ name: "Mobile", value: 80, fill: "var(--chart-2)" },
]}
className="w-[8rem]"
/>
@@ -68,8 +68,8 @@ export default function Component() {
label="Browser"
hideLabel
payload={[
{ name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
{ name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
{ name: "Chrome", value: 1286, fill: "var(--chart-3)" },
{ name: "Firefox", value: 1000, fill: "var(--chart-4)" },
]}
indicator="dashed"
className="w-[8rem]"
@@ -78,9 +78,7 @@ export default function Component() {
<div className="!hidden md:!flex">
<TooltipDemo
label="Page Views"
payload={[
{ name: "Desktop", value: 12486, fill: "hsl(var(--chart-3))" },
]}
payload={[{ name: "Desktop", value: 12486, fill: "var(--chart-3)" }]}
className="w-[9rem]"
indicator="line"
/>
@@ -92,9 +90,7 @@ export default function Component() {
<TooltipDemo
label="Browser"
hideLabel
payload={[
{ name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
]}
payload={[{ name: "Chrome", value: 1286, fill: "var(--chart-1)" }]}
indicator="dot"
className="w-[8rem]"
/>

2
apps/v4/mdx-components.tsx
View File

@@ -279,7 +279,7 @@ export const mdxComponents = {
Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
<h3
className={cn(
"font-heading mt-8 scroll-m-32 text-xl font-medium tracking-tight",
"font-heading mt-8 scroll-m-32 text-lg font-medium tracking-tight",
className
)}
{...props}

2
apps/v4/styles/globals.css
View File

@@ -227,7 +227,7 @@
counter-increment: step;
&:before {
@apply border-background bg-muted mr-2 inline-flex size-8 items-center justify-center rounded-full border-4 text-center -indent-px font-mono text-sm font-medium md:absolute md:mt-[-4px] md:ml-[-50px] md:size-9;
@apply border-background bg-muted mr-2 inline-flex size-6 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-medium md:absolute md:mt-[-4px] md:ml-[-50px] md:size-9 md:border-4;
content: counter(step);
}
}