mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-28 15:14:12 +00:00
Compare commits
1 Commits
shadcn-ui@
...
shadcn/deb
| Author | SHA1 | Date | |
|---|---|---|---|
|
93cb808f3a |
5
.changeset/wet-eagles-leave.md
Normal file
5
.changeset/wet-eagles-leave.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"shadcn-ui": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
update zod imports
|
||||||
@@ -8,7 +8,6 @@
|
|||||||
"plugin:tailwindcss/recommended"
|
"plugin:tailwindcss/recommended"
|
||||||
],
|
],
|
||||||
"plugins": ["tailwindcss"],
|
"plugins": ["tailwindcss"],
|
||||||
"ignorePatterns": ["**/fixtures/**"],
|
|
||||||
"rules": {
|
"rules": {
|
||||||
"@next/next/no-html-link-for-pages": "off",
|
"@next/next/no-html-link-for-pages": "off",
|
||||||
"tailwindcss/no-custom-classname": "off",
|
"tailwindcss/no-custom-classname": "off",
|
||||||
|
|||||||
2
.github/version-script-beta.js
vendored
2
.github/version-script-beta.js
vendored
@@ -4,7 +4,7 @@
|
|||||||
import { exec } from "child_process"
|
import { exec } from "child_process"
|
||||||
import fs from "fs"
|
import fs from "fs"
|
||||||
|
|
||||||
const pkgJsonPath = "packages/shadcn/package.json"
|
const pkgJsonPath = "packages/cli/package.json"
|
||||||
try {
|
try {
|
||||||
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
||||||
exec("git rev-parse --short HEAD", (err, stdout) => {
|
exec("git rev-parse --short HEAD", (err, stdout) => {
|
||||||
|
|||||||
2
.github/version-script-next.js
vendored
2
.github/version-script-next.js
vendored
@@ -4,7 +4,7 @@
|
|||||||
import { exec } from "child_process"
|
import { exec } from "child_process"
|
||||||
import fs from "fs"
|
import fs from "fs"
|
||||||
|
|
||||||
const pkgJsonPath = "packages/shadcn/package.json"
|
const pkgJsonPath = "packages/cli/package.json"
|
||||||
try {
|
try {
|
||||||
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
|
||||||
exec("git rev-parse --short HEAD", (err, stdout) => {
|
exec("git rev-parse --short HEAD", (err, stdout) => {
|
||||||
|
|||||||
12
.github/workflows/code-check.yml
vendored
12
.github/workflows/code-check.yml
vendored
@@ -18,11 +18,11 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v4
|
- uses: pnpm/action-setup@v2.2.4
|
||||||
name: Install pnpm
|
name: Install pnpm
|
||||||
id: pnpm-install
|
id: pnpm-install
|
||||||
with:
|
with:
|
||||||
version: 9.0.6
|
version: 8.6.1
|
||||||
run_install: false
|
run_install: false
|
||||||
|
|
||||||
- name: Get pnpm store directory
|
- name: Get pnpm store directory
|
||||||
@@ -54,11 +54,11 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v4
|
- uses: pnpm/action-setup@v2.2.4
|
||||||
name: Install pnpm
|
name: Install pnpm
|
||||||
id: pnpm-install
|
id: pnpm-install
|
||||||
with:
|
with:
|
||||||
version: 9.0.6
|
version: 8.6.1
|
||||||
run_install: false
|
run_install: false
|
||||||
|
|
||||||
- name: Get pnpm store directory
|
- name: Get pnpm store directory
|
||||||
@@ -92,11 +92,11 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v4
|
- uses: pnpm/action-setup@v2.2.4
|
||||||
name: Install pnpm
|
name: Install pnpm
|
||||||
id: pnpm-install
|
id: pnpm-install
|
||||||
with:
|
with:
|
||||||
version: 9.0.6
|
version: 8.6.1
|
||||||
run_install: false
|
run_install: false
|
||||||
|
|
||||||
- name: Get pnpm store directory
|
- name: Get pnpm store directory
|
||||||
|
|||||||
9
.github/workflows/issue-stale.yml
vendored
9
.github/workflows/issue-stale.yml
vendored
@@ -16,12 +16,11 @@ jobs:
|
|||||||
name: "Close stale issues with no reproduction"
|
name: "Close stale issues with no reproduction"
|
||||||
with:
|
with:
|
||||||
repo-token: ${{ secrets.STALE_TOKEN }}
|
repo-token: ${{ secrets.STALE_TOKEN }}
|
||||||
close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please reopen or leave a comment. Thank you.\n(This is an automated message.)"
|
close-issue-message: "This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you."
|
||||||
days-before-issue-close: 7
|
days-before-issue-close: 7
|
||||||
days-before-issue-stale: 30
|
days-before-issue-stale: 15
|
||||||
stale-pr-label: "stale?"
|
stale-pr-label: "stale?"
|
||||||
days-before-pr-close: 7
|
days-before-pr-close: -1
|
||||||
days-before-pr-stale: 15
|
days-before-pr-stale: -1
|
||||||
only-pr-labels: "postpone: more info or changes requested,please add a reproduction"
|
|
||||||
exempt-issue-labels: "roadmap,next,bug"
|
exempt-issue-labels: "roadmap,next,bug"
|
||||||
operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
|
operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
|
||||||
|
|||||||
4
.github/workflows/prerelease-comment.yml
vendored
4
.github/workflows/prerelease-comment.yml
vendored
@@ -28,7 +28,7 @@ jobs:
|
|||||||
|
|
||||||
for (const artifact of allArtifacts.data.artifacts) {
|
for (const artifact of allArtifacts.data.artifacts) {
|
||||||
// Extract the PR number and package version from the artifact name
|
// Extract the PR number and package version from the artifact name
|
||||||
const match = /^npm-package-shadcn@(.*?)-pr-(\d+)/.exec(artifact.name);
|
const match = /^npm-package-shadcn-ui@(.*?)-pr-(\d+)/.exec(artifact.name);
|
||||||
|
|
||||||
if (match) {
|
if (match) {
|
||||||
require("fs").appendFileSync(
|
require("fs").appendFileSync(
|
||||||
@@ -49,7 +49,7 @@ jobs:
|
|||||||
A new prerelease is available for testing:
|
A new prerelease is available for testing:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npx shadcn@${{ env.BETA_PACKAGE_VERSION }}
|
npx shadcn-ui@${{ env.BETA_PACKAGE_VERSION }}
|
||||||
```
|
```
|
||||||
|
|
||||||
- name: "Remove the autorelease label once published"
|
- name: "Remove the autorelease label once published"
|
||||||
|
|||||||
14
.github/workflows/prerelease.yml
vendored
14
.github/workflows/prerelease.yml
vendored
@@ -23,9 +23,9 @@ jobs:
|
|||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
|
|
||||||
- name: Use PNPM
|
- name: Use PNPM
|
||||||
uses: pnpm/action-setup@v4
|
uses: pnpm/action-setup@v2.2.4
|
||||||
with:
|
with:
|
||||||
version: 9.0.6
|
version: 8.6.1
|
||||||
|
|
||||||
- name: Use Node.js 18
|
- name: Use Node.js 18
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v3
|
||||||
@@ -40,7 +40,7 @@ jobs:
|
|||||||
run: node .github/version-script-beta.js
|
run: node .github/version-script-beta.js
|
||||||
|
|
||||||
- name: Authenticate to NPM
|
- name: Authenticate to NPM
|
||||||
run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/shadcn/.npmrc
|
run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/cli/.npmrc
|
||||||
env:
|
env:
|
||||||
NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
|
NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
|
||||||
|
|
||||||
@@ -51,10 +51,10 @@ jobs:
|
|||||||
id: package-version
|
id: package-version
|
||||||
uses: martinbeentjes/npm-get-version-action@main
|
uses: martinbeentjes/npm-get-version-action@main
|
||||||
with:
|
with:
|
||||||
path: packages/shadcn
|
path: packages/cli
|
||||||
|
|
||||||
- name: Upload packaged artifact
|
- name: Upload packaged artifact
|
||||||
uses: actions/upload-artifact@v3
|
uses: actions/upload-artifact@v2
|
||||||
with:
|
with:
|
||||||
name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
|
name: npm-package-shadcn-ui@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
|
||||||
path: packages/shadcn/dist/index.js
|
path: packages/cli/dist/index.js
|
||||||
|
|||||||
8
.github/workflows/release.yml
vendored
8
.github/workflows/release.yml
vendored
@@ -19,14 +19,14 @@ jobs:
|
|||||||
fetch-depth: 0
|
fetch-depth: 0
|
||||||
|
|
||||||
- name: Use PNPM
|
- name: Use PNPM
|
||||||
uses: pnpm/action-setup@v4
|
uses: pnpm/action-setup@v2.2.4
|
||||||
with:
|
with:
|
||||||
version: 9.0.6
|
version: 8.6.1
|
||||||
|
|
||||||
- name: Use Node.js 18
|
- name: Use Node.js 18
|
||||||
uses: actions/setup-node@v3
|
uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
version: 9.0.6
|
version: 8.6.1
|
||||||
node-version: 18
|
node-version: 18
|
||||||
cache: "pnpm"
|
cache: "pnpm"
|
||||||
|
|
||||||
@@ -37,7 +37,7 @@ jobs:
|
|||||||
# run: pnpm check
|
# run: pnpm check
|
||||||
|
|
||||||
- name: Build the package
|
- name: Build the package
|
||||||
run: pnpm shadcn:build
|
run: pnpm build:cli
|
||||||
|
|
||||||
- name: Create Version PR or Publish to NPM
|
- name: Create Version PR or Publish to NPM
|
||||||
id: changesets
|
id: changesets
|
||||||
|
|||||||
4
.github/workflows/test.yml
vendored
4
.github/workflows/test.yml
vendored
@@ -18,11 +18,11 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- uses: pnpm/action-setup@v4
|
- uses: pnpm/action-setup@v2.2.4
|
||||||
name: Install pnpm
|
name: Install pnpm
|
||||||
id: pnpm-install
|
id: pnpm-install
|
||||||
with:
|
with:
|
||||||
version: 9.0.6
|
version: 8.6.1
|
||||||
run_install: false
|
run_install: false
|
||||||
|
|
||||||
- name: Get pnpm store directory
|
- name: Get pnpm store directory
|
||||||
|
|||||||
5
.gitignore
vendored
5
.gitignore
vendored
@@ -34,8 +34,3 @@ yarn-error.log*
|
|||||||
|
|
||||||
.contentlayer
|
.contentlayer
|
||||||
tsconfig.tsbuildinfo
|
tsconfig.tsbuildinfo
|
||||||
|
|
||||||
# ide
|
|
||||||
.idea
|
|
||||||
.fleet
|
|
||||||
.vscode
|
|
||||||
|
|||||||
4
.husky/commit-msg
Executable file
4
.husky/commit-msg
Executable file
@@ -0,0 +1,4 @@
|
|||||||
|
#!/usr/bin/env sh
|
||||||
|
. "$(dirname -- "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npx commitlint --edit $1
|
||||||
@@ -4,4 +4,3 @@ node_modules
|
|||||||
build
|
build
|
||||||
.contentlayer
|
.contentlayer
|
||||||
apps/www/pages/api/registry.json
|
apps/www/pages/api/registry.json
|
||||||
**/fixtures
|
|
||||||
|
|||||||
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@@ -6,10 +6,5 @@
|
|||||||
"tailwindCSS.experimental.classRegex": [
|
"tailwindCSS.experimental.classRegex": [
|
||||||
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
|
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
|
||||||
["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
|
["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
|
||||||
],
|
|
||||||
"vitest.debugExclude": [
|
|
||||||
"<node_internals>/**",
|
|
||||||
"**/node_modules/**",
|
|
||||||
"**/fixtures/**"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,110 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "An area chart with axes"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Axes</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
left: -20,
|
|
||||||
right: 12,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<XAxis
|
|
||||||
dataKey="month"
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={8}
|
|
||||||
tickFormatter={(value) => value.slice(0, 3)}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={8}
|
|
||||||
tickCount={3}
|
|
||||||
/>
|
|
||||||
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
|
|
||||||
<Area
|
|
||||||
dataKey="mobile"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A simple area chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,130 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "An area chart with gradient fill"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Gradient</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 />} />
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop
|
|
||||||
offset="5%"
|
|
||||||
stopColor="var(--color-desktop)"
|
|
||||||
stopOpacity={0.8}
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset="95%"
|
|
||||||
stopColor="var(--color-desktop)"
|
|
||||||
stopOpacity={0.1}
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop
|
|
||||||
offset="5%"
|
|
||||||
stopColor="var(--color-mobile)"
|
|
||||||
stopOpacity={0.8}
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset="95%"
|
|
||||||
stopColor="var(--color-mobile)"
|
|
||||||
stopOpacity={0.1}
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<Area
|
|
||||||
dataKey="mobile"
|
|
||||||
type="natural"
|
|
||||||
fill="url(#fillMobile)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
fill="url(#fillDesktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingDown, TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartLegend,
|
|
||||||
ChartLegendContent,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "An area chart with icons"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
icon: TrendingDown,
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
icon: TrendingUp,
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Icons</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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="mobile"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<ChartLegend content={<ChartLegendContent />} />
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,265 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartLegend,
|
|
||||||
ChartLegendContent,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/registry/default/ui/select"
|
|
||||||
|
|
||||||
export const description = "An interactive area 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 },
|
|
||||||
{ date: "2024-05-01", desktop: 165, mobile: 220 },
|
|
||||||
{ date: "2024-05-02", desktop: 293, mobile: 310 },
|
|
||||||
{ date: "2024-05-03", desktop: 247, mobile: 190 },
|
|
||||||
{ date: "2024-05-04", desktop: 385, mobile: 420 },
|
|
||||||
{ date: "2024-05-05", desktop: 481, mobile: 390 },
|
|
||||||
{ date: "2024-05-06", desktop: 498, mobile: 520 },
|
|
||||||
{ date: "2024-05-07", desktop: 388, mobile: 300 },
|
|
||||||
{ date: "2024-05-08", desktop: 149, mobile: 210 },
|
|
||||||
{ date: "2024-05-09", desktop: 227, mobile: 180 },
|
|
||||||
{ date: "2024-05-10", desktop: 293, mobile: 330 },
|
|
||||||
{ date: "2024-05-11", desktop: 335, mobile: 270 },
|
|
||||||
{ date: "2024-05-12", desktop: 197, mobile: 240 },
|
|
||||||
{ date: "2024-05-13", desktop: 197, mobile: 160 },
|
|
||||||
{ date: "2024-05-14", desktop: 448, mobile: 490 },
|
|
||||||
{ date: "2024-05-15", desktop: 473, mobile: 380 },
|
|
||||||
{ date: "2024-05-16", desktop: 338, mobile: 400 },
|
|
||||||
{ date: "2024-05-17", desktop: 499, mobile: 420 },
|
|
||||||
{ date: "2024-05-18", desktop: 315, mobile: 350 },
|
|
||||||
{ date: "2024-05-19", desktop: 235, mobile: 180 },
|
|
||||||
{ date: "2024-05-20", desktop: 177, mobile: 230 },
|
|
||||||
{ date: "2024-05-21", desktop: 82, mobile: 140 },
|
|
||||||
{ date: "2024-05-22", desktop: 81, mobile: 120 },
|
|
||||||
{ date: "2024-05-23", desktop: 252, mobile: 290 },
|
|
||||||
{ date: "2024-05-24", desktop: 294, mobile: 220 },
|
|
||||||
{ date: "2024-05-25", desktop: 201, mobile: 250 },
|
|
||||||
{ date: "2024-05-26", desktop: 213, mobile: 170 },
|
|
||||||
{ date: "2024-05-27", desktop: 420, mobile: 460 },
|
|
||||||
{ date: "2024-05-28", desktop: 233, mobile: 190 },
|
|
||||||
{ date: "2024-05-29", desktop: 78, mobile: 130 },
|
|
||||||
{ date: "2024-05-30", desktop: 340, mobile: 280 },
|
|
||||||
{ date: "2024-05-31", desktop: 178, mobile: 230 },
|
|
||||||
{ date: "2024-06-01", desktop: 178, mobile: 200 },
|
|
||||||
{ date: "2024-06-02", desktop: 470, mobile: 410 },
|
|
||||||
{ date: "2024-06-03", desktop: 103, mobile: 160 },
|
|
||||||
{ date: "2024-06-04", desktop: 439, mobile: 380 },
|
|
||||||
{ date: "2024-06-05", desktop: 88, mobile: 140 },
|
|
||||||
{ date: "2024-06-06", desktop: 294, mobile: 250 },
|
|
||||||
{ date: "2024-06-07", desktop: 323, mobile: 370 },
|
|
||||||
{ date: "2024-06-08", desktop: 385, mobile: 320 },
|
|
||||||
{ date: "2024-06-09", desktop: 438, mobile: 480 },
|
|
||||||
{ date: "2024-06-10", desktop: 155, mobile: 200 },
|
|
||||||
{ date: "2024-06-11", desktop: 92, mobile: 150 },
|
|
||||||
{ date: "2024-06-12", desktop: 492, mobile: 420 },
|
|
||||||
{ date: "2024-06-13", desktop: 81, mobile: 130 },
|
|
||||||
{ date: "2024-06-14", desktop: 426, mobile: 380 },
|
|
||||||
{ date: "2024-06-15", desktop: 307, mobile: 350 },
|
|
||||||
{ date: "2024-06-16", desktop: 371, mobile: 310 },
|
|
||||||
{ date: "2024-06-17", desktop: 475, mobile: 520 },
|
|
||||||
{ date: "2024-06-18", desktop: 107, mobile: 170 },
|
|
||||||
{ date: "2024-06-19", desktop: 341, mobile: 290 },
|
|
||||||
{ date: "2024-06-20", desktop: 408, mobile: 450 },
|
|
||||||
{ date: "2024-06-21", desktop: 169, mobile: 210 },
|
|
||||||
{ date: "2024-06-22", desktop: 317, mobile: 270 },
|
|
||||||
{ date: "2024-06-23", desktop: 480, mobile: 530 },
|
|
||||||
{ date: "2024-06-24", desktop: 132, mobile: 180 },
|
|
||||||
{ date: "2024-06-25", desktop: 141, mobile: 190 },
|
|
||||||
{ date: "2024-06-26", desktop: 434, mobile: 380 },
|
|
||||||
{ date: "2024-06-27", desktop: 448, mobile: 490 },
|
|
||||||
{ date: "2024-06-28", desktop: 149, mobile: 200 },
|
|
||||||
{ date: "2024-06-29", desktop: 103, mobile: 160 },
|
|
||||||
{ date: "2024-06-30", desktop: 446, mobile: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
const [timeRange, setTimeRange] = React.useState("90d")
|
|
||||||
|
|
||||||
const filteredData = chartData.filter((item) => {
|
|
||||||
const date = new Date(item.date)
|
|
||||||
const now = new Date()
|
|
||||||
let daysToSubtract = 90
|
|
||||||
if (timeRange === "30d") {
|
|
||||||
daysToSubtract = 30
|
|
||||||
} else if (timeRange === "7d") {
|
|
||||||
daysToSubtract = 7
|
|
||||||
}
|
|
||||||
now.setDate(now.getDate() - daysToSubtract)
|
|
||||||
return date >= now
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
|
|
||||||
<div className="grid flex-1 gap-1 text-center sm:text-left">
|
|
||||||
<CardTitle>Area Chart - Interactive</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 3 months
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
<Select value={timeRange} onValueChange={setTimeRange}>
|
|
||||||
<SelectTrigger
|
|
||||||
className="w-[160px] rounded-lg sm:ml-auto"
|
|
||||||
aria-label="Select a value"
|
|
||||||
>
|
|
||||||
<SelectValue placeholder="Last 3 months" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent className="rounded-xl">
|
|
||||||
<SelectItem value="90d" className="rounded-lg">
|
|
||||||
Last 3 months
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="30d" className="rounded-lg">
|
|
||||||
Last 30 days
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem value="7d" className="rounded-lg">
|
|
||||||
Last 7 days
|
|
||||||
</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="aspect-auto h-[250px] w-full"
|
|
||||||
>
|
|
||||||
<AreaChart data={filteredData}>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop
|
|
||||||
offset="5%"
|
|
||||||
stopColor="var(--color-desktop)"
|
|
||||||
stopOpacity={0.8}
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset="95%"
|
|
||||||
stopColor="var(--color-desktop)"
|
|
||||||
stopOpacity={0.1}
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop
|
|
||||||
offset="5%"
|
|
||||||
stopColor="var(--color-mobile)"
|
|
||||||
stopOpacity={0.8}
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset="95%"
|
|
||||||
stopColor="var(--color-mobile)"
|
|
||||||
stopOpacity={0.1}
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<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
|
|
||||||
cursor={false}
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
labelFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
indicator="dot"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="mobile"
|
|
||||||
type="natural"
|
|
||||||
fill="url(#fillMobile)"
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
fill="url(#fillDesktop)"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<ChartLegend content={<ChartLegendContent />} />
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartLegend,
|
|
||||||
ChartLegendContent,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "An area chart with a legend"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Legend</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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="mobile"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<ChartLegend content={<ChartLegendContent />} />
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A linear area chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Linear</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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="dot" hideLabel />}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="linear"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked area chart with expand stacking"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186, mobile: 80, other: 45 },
|
|
||||||
{ month: "February", desktop: 305, mobile: 200, other: 100 },
|
|
||||||
{ month: "March", desktop: 237, mobile: 120, other: 150 },
|
|
||||||
{ month: "April", desktop: 73, mobile: 190, other: 50 },
|
|
||||||
{ month: "May", desktop: 209, mobile: 130, other: 100 },
|
|
||||||
{ month: "June", desktop: 214, mobile: 140, other: 160 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Stacked Expanded</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
left: 12,
|
|
||||||
right: 12,
|
|
||||||
top: 12,
|
|
||||||
}}
|
|
||||||
stackOffset="expand"
|
|
||||||
>
|
|
||||||
<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="other"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-other)"
|
|
||||||
fillOpacity={0.1}
|
|
||||||
stroke="var(--color-other)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="mobile"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked area 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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Stacked</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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="dot" />}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="mobile"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
stackId="a"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,95 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Activity, TrendingUp } from "lucide-react"
|
|
||||||
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A step area chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
icon: Activity,
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Area Chart - Step</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 hideLabel />}
|
|
||||||
/>
|
|
||||||
<Area
|
|
||||||
dataKey="desktop"
|
|
||||||
type="step"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter>
|
|
||||||
<div className="flex w-full items-start gap-2 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A bar chart with an active bar"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Active</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<XAxis
|
|
||||||
dataKey="browser"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) =>
|
|
||||||
chartConfig[value as keyof typeof chartConfig]?.label
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="visitors"
|
|
||||||
strokeWidth={2}
|
|
||||||
radius={8}
|
|
||||||
activeIndex={2}
|
|
||||||
activeBar={({ ...props }) => {
|
|
||||||
return (
|
|
||||||
<Rectangle
|
|
||||||
{...props}
|
|
||||||
fillOpacity={0.8}
|
|
||||||
stroke={props.payload.fill}
|
|
||||||
strokeDasharray={4}
|
|
||||||
strokeDashoffset={4}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A bar chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<XAxis
|
|
||||||
dataKey="month"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => value.slice(0, 3)}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, XAxis, YAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A horizontal bar chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Horizontal</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
layout="vertical"
|
|
||||||
margin={{
|
|
||||||
left: -20,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<XAxis type="number" dataKey="desktop" hide />
|
|
||||||
<YAxis
|
|
||||||
dataKey="month"
|
|
||||||
type="category"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => value.slice(0, 3)}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={5} />
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,221 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/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 },
|
|
||||||
{ date: "2024-05-01", desktop: 165, mobile: 220 },
|
|
||||||
{ date: "2024-05-02", desktop: 293, mobile: 310 },
|
|
||||||
{ date: "2024-05-03", desktop: 247, mobile: 190 },
|
|
||||||
{ date: "2024-05-04", desktop: 385, mobile: 420 },
|
|
||||||
{ date: "2024-05-05", desktop: 481, mobile: 390 },
|
|
||||||
{ date: "2024-05-06", desktop: 498, mobile: 520 },
|
|
||||||
{ date: "2024-05-07", desktop: 388, mobile: 300 },
|
|
||||||
{ date: "2024-05-08", desktop: 149, mobile: 210 },
|
|
||||||
{ date: "2024-05-09", desktop: 227, mobile: 180 },
|
|
||||||
{ date: "2024-05-10", desktop: 293, mobile: 330 },
|
|
||||||
{ date: "2024-05-11", desktop: 335, mobile: 270 },
|
|
||||||
{ date: "2024-05-12", desktop: 197, mobile: 240 },
|
|
||||||
{ date: "2024-05-13", desktop: 197, mobile: 160 },
|
|
||||||
{ date: "2024-05-14", desktop: 448, mobile: 490 },
|
|
||||||
{ date: "2024-05-15", desktop: 473, mobile: 380 },
|
|
||||||
{ date: "2024-05-16", desktop: 338, mobile: 400 },
|
|
||||||
{ date: "2024-05-17", desktop: 499, mobile: 420 },
|
|
||||||
{ date: "2024-05-18", desktop: 315, mobile: 350 },
|
|
||||||
{ date: "2024-05-19", desktop: 235, mobile: 180 },
|
|
||||||
{ date: "2024-05-20", desktop: 177, mobile: 230 },
|
|
||||||
{ date: "2024-05-21", desktop: 82, mobile: 140 },
|
|
||||||
{ date: "2024-05-22", desktop: 81, mobile: 120 },
|
|
||||||
{ date: "2024-05-23", desktop: 252, mobile: 290 },
|
|
||||||
{ date: "2024-05-24", desktop: 294, mobile: 220 },
|
|
||||||
{ date: "2024-05-25", desktop: 201, mobile: 250 },
|
|
||||||
{ date: "2024-05-26", desktop: 213, mobile: 170 },
|
|
||||||
{ date: "2024-05-27", desktop: 420, mobile: 460 },
|
|
||||||
{ date: "2024-05-28", desktop: 233, mobile: 190 },
|
|
||||||
{ date: "2024-05-29", desktop: 78, mobile: 130 },
|
|
||||||
{ date: "2024-05-30", desktop: 340, mobile: 280 },
|
|
||||||
{ date: "2024-05-31", desktop: 178, mobile: 230 },
|
|
||||||
{ date: "2024-06-01", desktop: 178, mobile: 200 },
|
|
||||||
{ date: "2024-06-02", desktop: 470, mobile: 410 },
|
|
||||||
{ date: "2024-06-03", desktop: 103, mobile: 160 },
|
|
||||||
{ date: "2024-06-04", desktop: 439, mobile: 380 },
|
|
||||||
{ date: "2024-06-05", desktop: 88, mobile: 140 },
|
|
||||||
{ date: "2024-06-06", desktop: 294, mobile: 250 },
|
|
||||||
{ date: "2024-06-07", desktop: 323, mobile: 370 },
|
|
||||||
{ date: "2024-06-08", desktop: 385, mobile: 320 },
|
|
||||||
{ date: "2024-06-09", desktop: 438, mobile: 480 },
|
|
||||||
{ date: "2024-06-10", desktop: 155, mobile: 200 },
|
|
||||||
{ date: "2024-06-11", desktop: 92, mobile: 150 },
|
|
||||||
{ date: "2024-06-12", desktop: 492, mobile: 420 },
|
|
||||||
{ date: "2024-06-13", desktop: 81, mobile: 130 },
|
|
||||||
{ date: "2024-06-14", desktop: 426, mobile: 380 },
|
|
||||||
{ date: "2024-06-15", desktop: 307, mobile: 350 },
|
|
||||||
{ date: "2024-06-16", desktop: 371, mobile: 310 },
|
|
||||||
{ date: "2024-06-17", desktop: 475, mobile: 520 },
|
|
||||||
{ date: "2024-06-18", desktop: 107, mobile: 170 },
|
|
||||||
{ date: "2024-06-19", desktop: 341, mobile: 290 },
|
|
||||||
{ date: "2024-06-20", desktop: 408, mobile: 450 },
|
|
||||||
{ date: "2024-06-21", desktop: 169, mobile: 210 },
|
|
||||||
{ date: "2024-06-22", desktop: 317, mobile: 270 },
|
|
||||||
{ date: "2024-06-23", desktop: 480, mobile: 530 },
|
|
||||||
{ date: "2024-06-24", desktop: 132, mobile: 180 },
|
|
||||||
{ date: "2024-06-25", desktop: 141, mobile: 190 },
|
|
||||||
{ date: "2024-06-26", desktop: 434, mobile: 380 },
|
|
||||||
{ date: "2024-06-27", desktop: 448, mobile: 490 },
|
|
||||||
{ date: "2024-06-28", desktop: 149, mobile: 200 },
|
|
||||||
{ date: "2024-06-29", desktop: 103, mobile: 160 },
|
|
||||||
{ date: "2024-06-30", desktop: 446, mobile: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
views: {
|
|
||||||
label: "Page Views",
|
|
||||||
},
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
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>
|
|
||||||
<CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
|
|
||||||
<div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
|
|
||||||
<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="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
|
|
||||||
onClick={() => setActiveChart(chart)}
|
|
||||||
>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{chartConfig[chart].label}
|
|
||||||
</span>
|
|
||||||
<span className="text-lg font-bold leading-none 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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A bar chart with a custom label"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
color: "hsl(var(--background))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Custom Label</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
layout="vertical"
|
|
||||||
margin={{
|
|
||||||
right: 16,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid horizontal={false} />
|
|
||||||
<YAxis
|
|
||||||
dataKey="month"
|
|
||||||
type="category"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => value.slice(0, 3)}
|
|
||||||
hide
|
|
||||||
/>
|
|
||||||
<XAxis dataKey="desktop" type="number" hide />
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent indicator="line" />}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="desktop"
|
|
||||||
layout="vertical"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
radius={4}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
dataKey="month"
|
|
||||||
position="insideLeft"
|
|
||||||
offset={8}
|
|
||||||
className="fill-[--color-label]"
|
|
||||||
fontSize={12}
|
|
||||||
/>
|
|
||||||
<LabelList
|
|
||||||
dataKey="desktop"
|
|
||||||
position="right"
|
|
||||||
offset={8}
|
|
||||||
className="fill-foreground"
|
|
||||||
fontSize={12}
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A bar chart with a label"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Label</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: 20,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<XAxis
|
|
||||||
dataKey="month"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => value.slice(0, 3)}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
|
|
||||||
<LabelList
|
|
||||||
position="top"
|
|
||||||
offset={12}
|
|
||||||
className="fill-foreground"
|
|
||||||
fontSize={12}
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, XAxis, YAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A mixed bar chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Mixed</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
layout="vertical"
|
|
||||||
margin={{
|
|
||||||
left: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<YAxis
|
|
||||||
dataKey="browser"
|
|
||||||
type="category"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) =>
|
|
||||||
chartConfig[value as keyof typeof chartConfig]?.label
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<XAxis dataKey="visitors" type="number" hide />
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Bar dataKey="visitors" layout="vertical" radius={5} />
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A multiple bar 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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Multiple</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<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 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, Cell, LabelList } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A bar chart with negative values"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", visitors: 186 },
|
|
||||||
{ month: "February", visitors: 205 },
|
|
||||||
{ month: "March", visitors: -207 },
|
|
||||||
{ month: "April", visitors: 173 },
|
|
||||||
{ month: "May", visitors: -209 },
|
|
||||||
{ month: "June", visitors: 214 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Negative</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel hideIndicator />}
|
|
||||||
/>
|
|
||||||
<Bar dataKey="visitors">
|
|
||||||
<LabelList position="top" dataKey="month" fillOpacity={1} />
|
|
||||||
{chartData.map((item) => (
|
|
||||||
<Cell
|
|
||||||
key={item.month}
|
|
||||||
fill={
|
|
||||||
item.visitors > 0
|
|
||||||
? "hsl(var(--chart-1))"
|
|
||||||
: "hsl(var(--chart-2))"
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartLegend,
|
|
||||||
ChartLegendContent,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Bar Chart - Stacked + Legend</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<XAxis
|
|
||||||
dataKey="month"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => value.slice(0, 3)}
|
|
||||||
/>
|
|
||||||
<ChartTooltip content={<ChartTooltipContent hideLabel />} />
|
|
||||||
<ChartLegend content={<ChartLegendContent />} />
|
|
||||||
<Bar
|
|
||||||
dataKey="desktop"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="mobile"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A line chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 hideLabel />}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, Dot, Line, LineChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A line chart with dots and colors"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Dots Colors</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: 24,
|
|
||||||
left: 24,
|
|
||||||
right: 24,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
indicator="line"
|
|
||||||
nameKey="visitors"
|
|
||||||
hideLabel
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="visitors"
|
|
||||||
type="natural"
|
|
||||||
stroke="var(--color-visitors)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={({ payload, ...props }) => {
|
|
||||||
return (
|
|
||||||
<Dot
|
|
||||||
key={payload.browser}
|
|
||||||
r={5}
|
|
||||||
cx={props.cx}
|
|
||||||
cy={props.cy}
|
|
||||||
fill={payload.fill}
|
|
||||||
stroke={payload.fill}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { GitCommitVertical, TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A line chart with custom dots"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Custom Dots</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 hideLabel />}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={({ cx, cy, payload }) => {
|
|
||||||
const r = 24
|
|
||||||
return (
|
|
||||||
<GitCommitVertical
|
|
||||||
key={payload.month}
|
|
||||||
x={cx - r / 2}
|
|
||||||
y={cy - r / 2}
|
|
||||||
width={r}
|
|
||||||
height={r}
|
|
||||||
fill="hsl(var(--background))"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A line chart with dots"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Dots</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 hideLabel />}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{
|
|
||||||
fill: "var(--color-desktop)",
|
|
||||||
}}
|
|
||||||
activeDot={{
|
|
||||||
r: 6,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,227 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "An interactive line 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 },
|
|
||||||
{ date: "2024-05-01", desktop: 165, mobile: 220 },
|
|
||||||
{ date: "2024-05-02", desktop: 293, mobile: 310 },
|
|
||||||
{ date: "2024-05-03", desktop: 247, mobile: 190 },
|
|
||||||
{ date: "2024-05-04", desktop: 385, mobile: 420 },
|
|
||||||
{ date: "2024-05-05", desktop: 481, mobile: 390 },
|
|
||||||
{ date: "2024-05-06", desktop: 498, mobile: 520 },
|
|
||||||
{ date: "2024-05-07", desktop: 388, mobile: 300 },
|
|
||||||
{ date: "2024-05-08", desktop: 149, mobile: 210 },
|
|
||||||
{ date: "2024-05-09", desktop: 227, mobile: 180 },
|
|
||||||
{ date: "2024-05-10", desktop: 293, mobile: 330 },
|
|
||||||
{ date: "2024-05-11", desktop: 335, mobile: 270 },
|
|
||||||
{ date: "2024-05-12", desktop: 197, mobile: 240 },
|
|
||||||
{ date: "2024-05-13", desktop: 197, mobile: 160 },
|
|
||||||
{ date: "2024-05-14", desktop: 448, mobile: 490 },
|
|
||||||
{ date: "2024-05-15", desktop: 473, mobile: 380 },
|
|
||||||
{ date: "2024-05-16", desktop: 338, mobile: 400 },
|
|
||||||
{ date: "2024-05-17", desktop: 499, mobile: 420 },
|
|
||||||
{ date: "2024-05-18", desktop: 315, mobile: 350 },
|
|
||||||
{ date: "2024-05-19", desktop: 235, mobile: 180 },
|
|
||||||
{ date: "2024-05-20", desktop: 177, mobile: 230 },
|
|
||||||
{ date: "2024-05-21", desktop: 82, mobile: 140 },
|
|
||||||
{ date: "2024-05-22", desktop: 81, mobile: 120 },
|
|
||||||
{ date: "2024-05-23", desktop: 252, mobile: 290 },
|
|
||||||
{ date: "2024-05-24", desktop: 294, mobile: 220 },
|
|
||||||
{ date: "2024-05-25", desktop: 201, mobile: 250 },
|
|
||||||
{ date: "2024-05-26", desktop: 213, mobile: 170 },
|
|
||||||
{ date: "2024-05-27", desktop: 420, mobile: 460 },
|
|
||||||
{ date: "2024-05-28", desktop: 233, mobile: 190 },
|
|
||||||
{ date: "2024-05-29", desktop: 78, mobile: 130 },
|
|
||||||
{ date: "2024-05-30", desktop: 340, mobile: 280 },
|
|
||||||
{ date: "2024-05-31", desktop: 178, mobile: 230 },
|
|
||||||
{ date: "2024-06-01", desktop: 178, mobile: 200 },
|
|
||||||
{ date: "2024-06-02", desktop: 470, mobile: 410 },
|
|
||||||
{ date: "2024-06-03", desktop: 103, mobile: 160 },
|
|
||||||
{ date: "2024-06-04", desktop: 439, mobile: 380 },
|
|
||||||
{ date: "2024-06-05", desktop: 88, mobile: 140 },
|
|
||||||
{ date: "2024-06-06", desktop: 294, mobile: 250 },
|
|
||||||
{ date: "2024-06-07", desktop: 323, mobile: 370 },
|
|
||||||
{ date: "2024-06-08", desktop: 385, mobile: 320 },
|
|
||||||
{ date: "2024-06-09", desktop: 438, mobile: 480 },
|
|
||||||
{ date: "2024-06-10", desktop: 155, mobile: 200 },
|
|
||||||
{ date: "2024-06-11", desktop: 92, mobile: 150 },
|
|
||||||
{ date: "2024-06-12", desktop: 492, mobile: 420 },
|
|
||||||
{ date: "2024-06-13", desktop: 81, mobile: 130 },
|
|
||||||
{ date: "2024-06-14", desktop: 426, mobile: 380 },
|
|
||||||
{ date: "2024-06-15", desktop: 307, mobile: 350 },
|
|
||||||
{ date: "2024-06-16", desktop: 371, mobile: 310 },
|
|
||||||
{ date: "2024-06-17", desktop: 475, mobile: 520 },
|
|
||||||
{ date: "2024-06-18", desktop: 107, mobile: 170 },
|
|
||||||
{ date: "2024-06-19", desktop: 341, mobile: 290 },
|
|
||||||
{ date: "2024-06-20", desktop: 408, mobile: 450 },
|
|
||||||
{ date: "2024-06-21", desktop: 169, mobile: 210 },
|
|
||||||
{ date: "2024-06-22", desktop: 317, mobile: 270 },
|
|
||||||
{ date: "2024-06-23", desktop: 480, mobile: 530 },
|
|
||||||
{ date: "2024-06-24", desktop: 132, mobile: 180 },
|
|
||||||
{ date: "2024-06-25", desktop: 141, mobile: 190 },
|
|
||||||
{ date: "2024-06-26", desktop: 434, mobile: 380 },
|
|
||||||
{ date: "2024-06-27", desktop: 448, mobile: 490 },
|
|
||||||
{ date: "2024-06-28", desktop: 149, mobile: 200 },
|
|
||||||
{ date: "2024-06-29", desktop: 103, mobile: 160 },
|
|
||||||
{ date: "2024-06-30", desktop: 446, mobile: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
views: {
|
|
||||||
label: "Page Views",
|
|
||||||
},
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
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>
|
|
||||||
<CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
|
|
||||||
<div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
|
|
||||||
<CardTitle>Line 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="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
|
|
||||||
onClick={() => setActiveChart(chart)}
|
|
||||||
>
|
|
||||||
<span className="text-xs text-muted-foreground">
|
|
||||||
{chartConfig[chart].label}
|
|
||||||
</span>
|
|
||||||
<span className="text-lg font-bold leading-none 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"
|
|
||||||
>
|
|
||||||
<LineChart
|
|
||||||
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",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey={activeChart}
|
|
||||||
type="monotone"
|
|
||||||
stroke={`var(--color-${activeChart})`}
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, LabelList, Line, LineChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A line chart with a custom label"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Custom Label</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: 24,
|
|
||||||
left: 24,
|
|
||||||
right: 24,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid vertical={false} />
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
indicator="line"
|
|
||||||
nameKey="visitors"
|
|
||||||
hideLabel
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="visitors"
|
|
||||||
type="natural"
|
|
||||||
stroke="var(--color-visitors)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{
|
|
||||||
fill: "var(--color-visitors)",
|
|
||||||
}}
|
|
||||||
activeDot={{
|
|
||||||
r: 6,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
position="top"
|
|
||||||
offset={12}
|
|
||||||
className="fill-foreground"
|
|
||||||
fontSize={12}
|
|
||||||
dataKey="browser"
|
|
||||||
formatter={(value: keyof typeof chartConfig) =>
|
|
||||||
chartConfig[value]?.label
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Line>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A line chart with a label"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Label</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: 20,
|
|
||||||
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" />}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="desktop"
|
|
||||||
type="natural"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{
|
|
||||||
fill: "var(--color-desktop)",
|
|
||||||
}}
|
|
||||||
activeDot={{
|
|
||||||
r: 6,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
position="top"
|
|
||||||
offset={12}
|
|
||||||
className="fill-foreground"
|
|
||||||
fontSize={12}
|
|
||||||
/>
|
|
||||||
</Line>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A linear line chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Linear</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 hideLabel />}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="desktop"
|
|
||||||
type="linear"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A multiple line 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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Multiple</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 text-sm">
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A line chart with step"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Line Chart - Step</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={chartData}
|
|
||||||
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 hideLabel />}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="desktop"
|
|
||||||
type="step"
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-2 text-sm">
|
|
||||||
<div className="flex gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Label, Pie, PieChart, Sector } from "recharts"
|
|
||||||
import { PieSectorDataItem } from "recharts/types/polar/Pie"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A donut chart with an active sector"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Donut Active</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie
|
|
||||||
data={chartData}
|
|
||||||
dataKey="visitors"
|
|
||||||
nameKey="browser"
|
|
||||||
innerRadius={60}
|
|
||||||
strokeWidth={5}
|
|
||||||
activeIndex={0}
|
|
||||||
activeShape={({
|
|
||||||
outerRadius = 0,
|
|
||||||
...props
|
|
||||||
}: PieSectorDataItem) => (
|
|
||||||
<Sector {...props} outerRadius={outerRadius + 10} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Label, Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A donut chart with text"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ 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 chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
const totalVisitors = React.useMemo(() => {
|
|
||||||
return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<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={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie
|
|
||||||
data={chartData}
|
|
||||||
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 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A donut chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Donut</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie
|
|
||||||
data={chartData}
|
|
||||||
dataKey="visitors"
|
|
||||||
nameKey="browser"
|
|
||||||
innerRadius={60}
|
|
||||||
/>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,192 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import { Label, Pie, PieChart, Sector } from "recharts"
|
|
||||||
import { PieSectorDataItem } from "recharts/types/polar/Pie"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartStyle,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/registry/default/ui/select"
|
|
||||||
|
|
||||||
export const description = "An interactive pie chart"
|
|
||||||
|
|
||||||
const desktopData = [
|
|
||||||
{ month: "january", desktop: 186, fill: "var(--color-january)" },
|
|
||||||
{ month: "february", desktop: 305, fill: "var(--color-february)" },
|
|
||||||
{ month: "march", desktop: 237, fill: "var(--color-march)" },
|
|
||||||
{ month: "april", desktop: 173, fill: "var(--color-april)" },
|
|
||||||
{ month: "may", desktop: 209, fill: "var(--color-may)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
},
|
|
||||||
january: {
|
|
||||||
label: "January",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
february: {
|
|
||||||
label: "February",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
march: {
|
|
||||||
label: "March",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
april: {
|
|
||||||
label: "April",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
may: {
|
|
||||||
label: "May",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
const id = "pie-interactive"
|
|
||||||
const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
|
|
||||||
|
|
||||||
const activeIndex = React.useMemo(
|
|
||||||
() => desktopData.findIndex((item) => item.month === activeMonth),
|
|
||||||
[activeMonth]
|
|
||||||
)
|
|
||||||
const months = React.useMemo(() => desktopData.map((item) => item.month), [])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card data-chart={id} className="flex flex-col">
|
|
||||||
<ChartStyle id={id} config={chartConfig} />
|
|
||||||
<CardHeader className="flex-row items-start space-y-0 pb-0">
|
|
||||||
<div className="grid gap-1">
|
|
||||||
<CardTitle>Pie Chart - Interactive</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</div>
|
|
||||||
<Select value={activeMonth} onValueChange={setActiveMonth}>
|
|
||||||
<SelectTrigger
|
|
||||||
className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
|
|
||||||
aria-label="Select a value"
|
|
||||||
>
|
|
||||||
<SelectValue placeholder="Select month" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent align="end" className="rounded-xl">
|
|
||||||
{months.map((key) => {
|
|
||||||
const config = chartConfig[key as keyof typeof chartConfig]
|
|
||||||
|
|
||||||
if (!config) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SelectItem
|
|
||||||
key={key}
|
|
||||||
value={key}
|
|
||||||
className="rounded-lg [&_span]:flex"
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2 text-xs">
|
|
||||||
<span
|
|
||||||
className="flex h-3 w-3 shrink-0 rounded-sm"
|
|
||||||
style={{
|
|
||||||
backgroundColor: `var(--color-${key})`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{config?.label}
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-1 justify-center pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
id={id}
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square w-full max-w-[300px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie
|
|
||||||
data={desktopData}
|
|
||||||
dataKey="desktop"
|
|
||||||
nameKey="month"
|
|
||||||
innerRadius={60}
|
|
||||||
strokeWidth={5}
|
|
||||||
activeIndex={activeIndex}
|
|
||||||
activeShape={({
|
|
||||||
outerRadius = 0,
|
|
||||||
...props
|
|
||||||
}: PieSectorDataItem) => (
|
|
||||||
<g>
|
|
||||||
<Sector {...props} outerRadius={outerRadius + 10} />
|
|
||||||
<Sector
|
|
||||||
{...props}
|
|
||||||
outerRadius={outerRadius + 25}
|
|
||||||
innerRadius={outerRadius + 12}
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
{desktopData[activeIndex].desktop.toLocaleString()}
|
|
||||||
</tspan>
|
|
||||||
<tspan
|
|
||||||
x={viewBox.cx}
|
|
||||||
y={(viewBox.cy || 0) + 24}
|
|
||||||
className="fill-muted-foreground"
|
|
||||||
>
|
|
||||||
Visitors
|
|
||||||
</tspan>
|
|
||||||
</text>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Pie>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A pie chart with a custom label"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Custom Label</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
content={<ChartTooltipContent nameKey="visitors" hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie
|
|
||||||
data={chartData}
|
|
||||||
dataKey="visitors"
|
|
||||||
labelLine={false}
|
|
||||||
label={({ payload, ...props }) => {
|
|
||||||
return (
|
|
||||||
<text
|
|
||||||
cx={props.cx}
|
|
||||||
cy={props.cy}
|
|
||||||
x={props.x}
|
|
||||||
y={props.y}
|
|
||||||
textAnchor={props.textAnchor}
|
|
||||||
dominantBaseline={props.dominantBaseline}
|
|
||||||
fill="hsla(var(--foreground))"
|
|
||||||
>
|
|
||||||
{`${
|
|
||||||
chartConfig[payload.browser as keyof typeof chartConfig]
|
|
||||||
?.label
|
|
||||||
} (${payload.visitors})`}
|
|
||||||
</text>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
nameKey="browser"
|
|
||||||
/>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { LabelList, Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A pie chart with a label list"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Label List</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
content={<ChartTooltipContent nameKey="visitors" hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie data={chartData} dataKey="visitors">
|
|
||||||
<LabelList
|
|
||||||
dataKey="browser"
|
|
||||||
className="fill-background"
|
|
||||||
stroke="none"
|
|
||||||
fontSize={12}
|
|
||||||
formatter={(value: keyof typeof chartConfig) =>
|
|
||||||
chartConfig[value]?.label
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Pie>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,85 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A pie chart with a label"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Label</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip content={<ChartTooltipContent hideLabel />} />
|
|
||||||
<Pie data={chartData} dataKey="visitors" label nameKey="browser" />
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartLegend,
|
|
||||||
ChartLegendContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A pie chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Legend</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[300px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<Pie data={chartData} dataKey="visitors" />
|
|
||||||
<ChartLegend
|
|
||||||
content={<ChartLegendContent nameKey="browser" />}
|
|
||||||
className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
|
|
||||||
/>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A pie chart with no separator"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Separator None</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie
|
|
||||||
data={chartData}
|
|
||||||
dataKey="visitors"
|
|
||||||
nameKey="browser"
|
|
||||||
stroke="0"
|
|
||||||
/>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A simple pie chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<Pie data={chartData} dataKey="visitors" nameKey="browser" />
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Label, Pie, PieChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A pie chart with stacked sections"
|
|
||||||
|
|
||||||
const desktopData = [
|
|
||||||
{ month: "january", desktop: 186, fill: "var(--color-january)" },
|
|
||||||
{ month: "february", desktop: 305, fill: "var(--color-february)" },
|
|
||||||
{ month: "march", desktop: 237, fill: "var(--color-march)" },
|
|
||||||
{ month: "april", desktop: 173, fill: "var(--color-april)" },
|
|
||||||
{ month: "may", desktop: 209, fill: "var(--color-may)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const mobileData = [
|
|
||||||
{ month: "january", mobile: 80, fill: "var(--color-january)" },
|
|
||||||
{ month: "february", mobile: 200, fill: "var(--color-february)" },
|
|
||||||
{ month: "march", mobile: 120, fill: "var(--color-march)" },
|
|
||||||
{ month: "april", mobile: 190, fill: "var(--color-april)" },
|
|
||||||
{ month: "may", mobile: 130, fill: "var(--color-may)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
},
|
|
||||||
january: {
|
|
||||||
label: "January",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
february: {
|
|
||||||
label: "February",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
march: {
|
|
||||||
label: "March",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
april: {
|
|
||||||
label: "April",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
may: {
|
|
||||||
label: "May",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Pie Chart - Stacked</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<PieChart>
|
|
||||||
<ChartTooltip
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
labelKey="visitors"
|
|
||||||
nameKey="month"
|
|
||||||
indicator="line"
|
|
||||||
labelFormatter={(_, payload) => {
|
|
||||||
return chartConfig[
|
|
||||||
payload?.[0].dataKey as keyof typeof chartConfig
|
|
||||||
].label
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Pie data={desktopData} dataKey="desktop" outerRadius={60} />
|
|
||||||
<Pie
|
|
||||||
data={mobileData}
|
|
||||||
dataKey="mobile"
|
|
||||||
innerRadius={70}
|
|
||||||
outerRadius={90}
|
|
||||||
/>
|
|
||||||
</PieChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,75 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 305 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 273 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 214 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<PolarGrid />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.6}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with dots"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 305 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 273 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 214 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center">
|
|
||||||
<CardTitle>Radar Chart - Dots</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<PolarGrid />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.6}
|
|
||||||
dot={{
|
|
||||||
r: 4,
|
|
||||||
fillOpacity: 1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a grid and circle fill"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 285 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 203 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 264 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Grid Circle Filled</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
|
|
||||||
<PolarGrid
|
|
||||||
className="fill-[--color-desktop] opacity-20"
|
|
||||||
gridType="circle"
|
|
||||||
/>
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.5}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a grid and circle fill"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 305 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 203 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 214 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<PolarGrid gridType="circle" radialLines={false} />
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.6}
|
|
||||||
dot={{
|
|
||||||
r: 4,
|
|
||||||
fillOpacity: 1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,82 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a grid and circle"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 305 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 273 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 214 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Grid Circle</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<PolarGrid gridType="circle" />
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.6}
|
|
||||||
dot={{
|
|
||||||
r: 4,
|
|
||||||
fillOpacity: 1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a custom grid"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 305 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 273 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 214 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Grid Custom</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.6}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a grid filled"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 285 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 203 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 264 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Grid Filled</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<PolarGrid className="fill-[--color-desktop] opacity-20" />
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.5}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with no grid"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186 },
|
|
||||||
{ month: "February", desktop: 305 },
|
|
||||||
{ month: "March", desktop: 237 },
|
|
||||||
{ month: "April", desktop: 273 },
|
|
||||||
{ month: "May", desktop: 209 },
|
|
||||||
{ month: "June", desktop: 214 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Grid None</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.6}
|
|
||||||
dot={{
|
|
||||||
r: 4,
|
|
||||||
fillOpacity: 1,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartLegend,
|
|
||||||
ChartLegendContent,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with icons"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
icon: ArrowDownFromLine,
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
icon: ArrowUpFromLine,
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Icons</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: -40,
|
|
||||||
bottom: -10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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)" />
|
|
||||||
<ChartLegend className="mt-8" content={<ChartLegendContent />} />
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 pt-4 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a custom label"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Custom Label</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: 10,
|
|
||||||
right: 10,
|
|
||||||
bottom: 10,
|
|
||||||
left: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent indicator="line" />}
|
|
||||||
/>
|
|
||||||
<PolarAngleAxis
|
|
||||||
dataKey="month"
|
|
||||||
tick={({ x, y, textAnchor, value, index, ...props }) => {
|
|
||||||
const data = chartData[index]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<text
|
|
||||||
x={x}
|
|
||||||
y={index === 0 ? y - 10 : y}
|
|
||||||
textAnchor={textAnchor}
|
|
||||||
fontSize={13}
|
|
||||||
fontWeight={500}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<tspan>{data.desktop}</tspan>
|
|
||||||
<tspan className="fill-muted-foreground">/</tspan>
|
|
||||||
<tspan>{data.mobile}</tspan>
|
|
||||||
<tspan
|
|
||||||
x={x}
|
|
||||||
dy={"1rem"}
|
|
||||||
fontSize={12}
|
|
||||||
className="fill-muted-foreground"
|
|
||||||
>
|
|
||||||
{data.month}
|
|
||||||
</tspan>
|
|
||||||
</text>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartLegend,
|
|
||||||
ChartLegendContent,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a legend"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Legend</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: -40,
|
|
||||||
bottom: -10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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)" />
|
|
||||||
<ChartLegend className="mt-8" content={<ChartLegendContent />} />
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 pt-4 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with lines only"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ month: "January", desktop: 186, mobile: 160 },
|
|
||||||
{ month: "February", desktop: 185, mobile: 170 },
|
|
||||||
{ month: "March", desktop: 207, mobile: 180 },
|
|
||||||
{ month: "April", desktop: 173, mobile: 160 },
|
|
||||||
{ month: "May", desktop: 160, mobile: 190 },
|
|
||||||
{ month: "June", desktop: 174, mobile: 204 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Lines Only</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent indicator="line" />}
|
|
||||||
/>
|
|
||||||
<PolarAngleAxis dataKey="month" />
|
|
||||||
<PolarGrid radialLines={false} />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0}
|
|
||||||
stroke="var(--color-desktop)"
|
|
||||||
strokeWidth={2}
|
|
||||||
/>
|
|
||||||
<Radar
|
|
||||||
dataKey="mobile"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
fillOpacity={0}
|
|
||||||
stroke="var(--color-mobile)"
|
|
||||||
strokeWidth={2}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with multiple data"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<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={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<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 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import {
|
|
||||||
PolarAngleAxis,
|
|
||||||
PolarGrid,
|
|
||||||
PolarRadiusAxis,
|
|
||||||
Radar,
|
|
||||||
RadarChart,
|
|
||||||
} from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radar chart with a radius axis"
|
|
||||||
|
|
||||||
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: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="items-center pb-4">
|
|
||||||
<CardTitle>Radar Chart - Radius Axis</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadarChart data={chartData}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent indicator="line" labelKey="month" />
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<PolarGrid />
|
|
||||||
<Radar
|
|
||||||
dataKey="desktop"
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
fillOpacity={0.6}
|
|
||||||
/>
|
|
||||||
<Radar dataKey="mobile" fill="var(--color-mobile)" />
|
|
||||||
<PolarRadiusAxis
|
|
||||||
angle={60}
|
|
||||||
stroke="hsla(var(--foreground))"
|
|
||||||
orientation="middle"
|
|
||||||
axisLine={false}
|
|
||||||
/>
|
|
||||||
</RadarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
|
||||||
January - June 2024
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radial chart with a grid"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Radial Chart - Grid</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel nameKey="browser" />}
|
|
||||||
/>
|
|
||||||
<PolarGrid gridType="circle" />
|
|
||||||
<RadialBar dataKey="visitors" />
|
|
||||||
</RadialBarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { LabelList, RadialBar, RadialBarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radial chart with a label"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Radial Chart - Label</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadialBarChart
|
|
||||||
data={chartData}
|
|
||||||
startAngle={-90}
|
|
||||||
endAngle={380}
|
|
||||||
innerRadius={30}
|
|
||||||
outerRadius={110}
|
|
||||||
>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel nameKey="browser" />}
|
|
||||||
/>
|
|
||||||
<RadialBar dataKey="visitors" background>
|
|
||||||
<LabelList
|
|
||||||
position="insideStart"
|
|
||||||
dataKey="browser"
|
|
||||||
className="fill-white capitalize mix-blend-luminosity"
|
|
||||||
fontSize={11}
|
|
||||||
/>
|
|
||||||
</RadialBar>
|
|
||||||
</RadialBarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import {
|
|
||||||
Label,
|
|
||||||
PolarGrid,
|
|
||||||
PolarRadiusAxis,
|
|
||||||
RadialBar,
|
|
||||||
RadialBarChart,
|
|
||||||
} from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import { ChartConfig, ChartContainer } from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radial chart with a custom shape"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Radial Chart - Shape</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadialBarChart
|
|
||||||
data={chartData}
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
{chartData[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 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { RadialBar, RadialBarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radial chart"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
|
|
||||||
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
|
|
||||||
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
chrome: {
|
|
||||||
label: "Chrome",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
firefox: {
|
|
||||||
label: "Firefox",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
edge: {
|
|
||||||
label: "Edge",
|
|
||||||
color: "hsl(var(--chart-4))",
|
|
||||||
},
|
|
||||||
other: {
|
|
||||||
label: "Other",
|
|
||||||
color: "hsl(var(--chart-5))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Radial Chart</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel nameKey="browser" />}
|
|
||||||
/>
|
|
||||||
<RadialBar dataKey="visitors" background />
|
|
||||||
</RadialBarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radial chart with stacked sections"
|
|
||||||
|
|
||||||
const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
desktop: {
|
|
||||||
label: "Desktop",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
mobile: {
|
|
||||||
label: "Mobile",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
const totalVisitors = chartData[0].desktop + chartData[0].mobile
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Radial Chart - Stacked</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-1 items-center pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square w-full max-w-[250px]"
|
|
||||||
>
|
|
||||||
<RadialBarChart
|
|
||||||
data={chartData}
|
|
||||||
endAngle={180}
|
|
||||||
innerRadius={80}
|
|
||||||
outerRadius={130}
|
|
||||||
>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
/>
|
|
||||||
<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">
|
|
||||||
<tspan
|
|
||||||
x={viewBox.cx}
|
|
||||||
y={(viewBox.cy || 0) - 16}
|
|
||||||
className="fill-foreground text-2xl font-bold"
|
|
||||||
>
|
|
||||||
{totalVisitors.toLocaleString()}
|
|
||||||
</tspan>
|
|
||||||
<tspan
|
|
||||||
x={viewBox.cx}
|
|
||||||
y={(viewBox.cy || 0) + 4}
|
|
||||||
className="fill-muted-foreground"
|
|
||||||
>
|
|
||||||
Visitors
|
|
||||||
</tspan>
|
|
||||||
</text>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</PolarRadiusAxis>
|
|
||||||
<RadialBar
|
|
||||||
dataKey="desktop"
|
|
||||||
stackId="a"
|
|
||||||
cornerRadius={5}
|
|
||||||
fill="var(--color-desktop)"
|
|
||||||
className="stroke-transparent stroke-2"
|
|
||||||
/>
|
|
||||||
<RadialBar
|
|
||||||
dataKey="mobile"
|
|
||||||
fill="var(--color-mobile)"
|
|
||||||
stackId="a"
|
|
||||||
cornerRadius={5}
|
|
||||||
className="stroke-transparent stroke-2"
|
|
||||||
/>
|
|
||||||
</RadialBarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col gap-2 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { TrendingUp } from "lucide-react"
|
|
||||||
import {
|
|
||||||
Label,
|
|
||||||
PolarGrid,
|
|
||||||
PolarRadiusAxis,
|
|
||||||
RadialBar,
|
|
||||||
RadialBarChart,
|
|
||||||
} from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import { ChartConfig, ChartContainer } from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A radial chart with text"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
visitors: {
|
|
||||||
label: "Visitors",
|
|
||||||
},
|
|
||||||
safari: {
|
|
||||||
label: "Safari",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card className="flex flex-col">
|
|
||||||
<CardHeader className="items-center pb-0">
|
|
||||||
<CardTitle>Radial Chart - Text</CardTitle>
|
|
||||||
<CardDescription>January - June 2024</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 pb-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={chartConfig}
|
|
||||||
className="mx-auto aspect-square max-h-[250px]"
|
|
||||||
>
|
|
||||||
<RadialBarChart
|
|
||||||
data={chartData}
|
|
||||||
startAngle={0}
|
|
||||||
endAngle={250}
|
|
||||||
innerRadius={80}
|
|
||||||
outerRadius={110}
|
|
||||||
>
|
|
||||||
<PolarGrid
|
|
||||||
gridType="circle"
|
|
||||||
radialLines={false}
|
|
||||||
stroke="none"
|
|
||||||
className="first:fill-muted last:fill-background"
|
|
||||||
polarRadius={[86, 74]}
|
|
||||||
/>
|
|
||||||
<RadialBar dataKey="visitors" background cornerRadius={10} />
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
{chartData[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 text-sm">
|
|
||||||
<div className="flex items-center gap-2 font-medium leading-none">
|
|
||||||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
<div className="leading-none text-muted-foreground">
|
|
||||||
Showing total visitors for the last 6 months
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,123 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - Advanced</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Tooltip with custom formatter and total.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
hideLabel
|
|
||||||
className="w-[180px]"
|
|
||||||
formatter={(value, name, item, index) => (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--color-bg": `var(--color-${name})`,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
|
||||||
name}
|
|
||||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
|
||||||
{value}
|
|
||||||
<span className="font-normal text-muted-foreground">
|
|
||||||
kcal
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/* Add this after the last item */}
|
|
||||||
{index === 1 && (
|
|
||||||
<div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
|
|
||||||
Total
|
|
||||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
|
||||||
{item.payload.running + item.payload.swimming}
|
|
||||||
<span className="font-normal text-muted-foreground">
|
|
||||||
kcal
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - Default</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Default tooltip with ChartTooltipContent.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={<ChartTooltipContent />}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - Formatter</CardTitle>
|
|
||||||
<CardDescription>Tooltip with custom formatter .</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
hideLabel
|
|
||||||
formatter={(value, name) => (
|
|
||||||
<div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
|
|
||||||
{chartConfig[name as keyof typeof chartConfig]?.label ||
|
|
||||||
name}
|
|
||||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
|
||||||
{value}
|
|
||||||
<span className="font-normal text-muted-foreground">
|
|
||||||
kcal
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Footprints, Waves } from "lucide-react"
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
icon: Footprints,
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
icon: Waves,
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - Icons</CardTitle>
|
|
||||||
<CardDescription>Tooltip with icons.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - Line Indicator</CardTitle>
|
|
||||||
<CardDescription>Tooltip with line indicator.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={<ChartTooltipContent indicator="line" />}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - No Indicator</CardTitle>
|
|
||||||
<CardDescription>Tooltip with no indicator.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={<ChartTooltipContent hideIndicator />}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
activities: {
|
|
||||||
label: "Activities",
|
|
||||||
},
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - Custom label</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Tooltip with custom label from chartConfig.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent labelKey="activities" indicator="line" />
|
|
||||||
}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - Label Formatter</CardTitle>
|
|
||||||
<CardDescription>Tooltip with label formatter.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
labelFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
day: "numeric",
|
|
||||||
month: "long",
|
|
||||||
year: "numeric",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Bar, BarChart, XAxis } from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartConfig,
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
|
|
||||||
export const description = "A stacked bar chart with a legend"
|
|
||||||
|
|
||||||
const chartData = [
|
|
||||||
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
||||||
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
||||||
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
||||||
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
||||||
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
||||||
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
||||||
]
|
|
||||||
|
|
||||||
const chartConfig = {
|
|
||||||
running: {
|
|
||||||
label: "Running",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
swimming: {
|
|
||||||
label: "Swimming",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
} satisfies ChartConfig
|
|
||||||
|
|
||||||
export default function Component() {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tooltip - No Label</CardTitle>
|
|
||||||
<CardDescription>Tooltip with no label.</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer config={chartConfig}>
|
|
||||||
<BarChart accessibilityLayer data={chartData}>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={10}
|
|
||||||
axisLine={false}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="running"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-running)"
|
|
||||||
radius={[0, 0, 4, 4]}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="swimming"
|
|
||||||
stackId="a"
|
|
||||||
fill="var(--color-swimming)"
|
|
||||||
radius={[4, 4, 0, 0]}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={<ChartTooltipContent hideIndicator hideLabel />}
|
|
||||||
cursor={false}
|
|
||||||
defaultIndex={1}
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,871 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Area,
|
|
||||||
AreaChart,
|
|
||||||
Bar,
|
|
||||||
BarChart,
|
|
||||||
CartesianGrid,
|
|
||||||
Label,
|
|
||||||
LabelList,
|
|
||||||
Line,
|
|
||||||
LineChart,
|
|
||||||
PolarAngleAxis,
|
|
||||||
RadialBar,
|
|
||||||
RadialBarChart,
|
|
||||||
Rectangle,
|
|
||||||
ReferenceLine,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
} from "recharts"
|
|
||||||
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/registry/default/ui/card"
|
|
||||||
import {
|
|
||||||
ChartContainer,
|
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
} from "@/registry/default/ui/chart"
|
|
||||||
import { Separator } from "@/registry/default/ui/separator"
|
|
||||||
|
|
||||||
export const description = "A collection of health charts."
|
|
||||||
|
|
||||||
export const iframeHeight = "900px"
|
|
||||||
|
|
||||||
export const containerClassName = "min-h-screen py-12"
|
|
||||||
|
|
||||||
export default function Charts() {
|
|
||||||
return (
|
|
||||||
<div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
|
|
||||||
<div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
|
|
||||||
<Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
|
|
||||||
<CardHeader className="space-y-0 pb-2">
|
|
||||||
<CardDescription>Today</CardDescription>
|
|
||||||
<CardTitle className="text-4xl tabular-nums">
|
|
||||||
12,584{" "}
|
|
||||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
|
||||||
steps
|
|
||||||
</span>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
steps: {
|
|
||||||
label: "Steps",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
margin={{
|
|
||||||
left: -4,
|
|
||||||
right: -4,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
date: "2024-01-01",
|
|
||||||
steps: 2000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-02",
|
|
||||||
steps: 2100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-03",
|
|
||||||
steps: 2200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-04",
|
|
||||||
steps: 1300,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-05",
|
|
||||||
steps: 1400,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-06",
|
|
||||||
steps: 2500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-07",
|
|
||||||
steps: 1600,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Bar
|
|
||||||
dataKey="steps"
|
|
||||||
fill="var(--color-steps)"
|
|
||||||
radius={5}
|
|
||||||
fillOpacity={0.6}
|
|
||||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
|
||||||
/>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={4}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
defaultIndex={2}
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
hideIndicator
|
|
||||||
labelFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
day: "numeric",
|
|
||||||
month: "long",
|
|
||||||
year: "numeric",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
cursor={false}
|
|
||||||
/>
|
|
||||||
<ReferenceLine
|
|
||||||
y={1200}
|
|
||||||
stroke="hsl(var(--muted-foreground))"
|
|
||||||
strokeDasharray="3 3"
|
|
||||||
strokeWidth={1}
|
|
||||||
>
|
|
||||||
<Label
|
|
||||||
position="insideBottomLeft"
|
|
||||||
value="Average Steps"
|
|
||||||
offset={10}
|
|
||||||
fill="hsl(var(--foreground))"
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
position="insideTopLeft"
|
|
||||||
value="12,343"
|
|
||||||
className="text-lg"
|
|
||||||
fill="hsl(var(--foreground))"
|
|
||||||
offset={10}
|
|
||||||
startOffset={100}
|
|
||||||
/>
|
|
||||||
</ReferenceLine>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex-col items-start gap-1">
|
|
||||||
<CardDescription>
|
|
||||||
Over the past 7 days, you have walked{" "}
|
|
||||||
<span className="font-medium text-foreground">53,305</span> steps.
|
|
||||||
</CardDescription>
|
|
||||||
<CardDescription>
|
|
||||||
You need{" "}
|
|
||||||
<span className="font-medium text-foreground">12,584</span> more
|
|
||||||
steps to reach your goal.
|
|
||||||
</CardDescription>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
<Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
|
|
||||||
<CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
|
|
||||||
<div>
|
|
||||||
<CardDescription>Resting HR</CardDescription>
|
|
||||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
|
||||||
62
|
|
||||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
|
||||||
bpm
|
|
||||||
</span>
|
|
||||||
</CardTitle>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CardDescription>Variability</CardDescription>
|
|
||||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
|
||||||
35
|
|
||||||
<span className="text-sm font-normal tracking-normal text-muted-foreground">
|
|
||||||
ms
|
|
||||||
</span>
|
|
||||||
</CardTitle>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-1 items-center">
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
resting: {
|
|
||||||
label: "Resting",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<LineChart
|
|
||||||
accessibilityLayer
|
|
||||||
margin={{
|
|
||||||
left: 14,
|
|
||||||
right: 14,
|
|
||||||
top: 10,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
date: "2024-01-01",
|
|
||||||
resting: 62,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-02",
|
|
||||||
resting: 72,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-03",
|
|
||||||
resting: 35,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-04",
|
|
||||||
resting: 62,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-05",
|
|
||||||
resting: 52,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-06",
|
|
||||||
resting: 62,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-07",
|
|
||||||
resting: 70,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<CartesianGrid
|
|
||||||
strokeDasharray="4 4"
|
|
||||||
vertical={false}
|
|
||||||
stroke="hsl(var(--muted-foreground))"
|
|
||||||
strokeOpacity={0.5}
|
|
||||||
/>
|
|
||||||
<YAxis hide domain={["dataMin - 10", "dataMax + 10"]} />
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={8}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
weekday: "short",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
dataKey="resting"
|
|
||||||
type="natural"
|
|
||||||
fill="var(--color-resting)"
|
|
||||||
stroke="var(--color-resting)"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
activeDot={{
|
|
||||||
fill: "var(--color-resting)",
|
|
||||||
stroke: "var(--color-resting)",
|
|
||||||
r: 4,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
content={
|
|
||||||
<ChartTooltipContent
|
|
||||||
indicator="line"
|
|
||||||
labelFormatter={(value) => {
|
|
||||||
return new Date(value).toLocaleDateString("en-US", {
|
|
||||||
day: "numeric",
|
|
||||||
month: "long",
|
|
||||||
year: "numeric",
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
cursor={false}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
<div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
|
|
||||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-2">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Progress</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
You're average more steps a day this year than last year.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="grid gap-4">
|
|
||||||
<div className="grid auto-rows-min gap-2">
|
|
||||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
|
||||||
12,453
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
steps/day
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
steps: {
|
|
||||||
label: "Steps",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
className="aspect-auto h-[32px] w-full"
|
|
||||||
>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
layout="vertical"
|
|
||||||
margin={{
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
date: "2024",
|
|
||||||
steps: 12435,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Bar
|
|
||||||
dataKey="steps"
|
|
||||||
fill="var(--color-steps)"
|
|
||||||
radius={4}
|
|
||||||
barSize={32}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
position="insideLeft"
|
|
||||||
dataKey="date"
|
|
||||||
offset={8}
|
|
||||||
fontSize={12}
|
|
||||||
fill="white"
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
|
||||||
<XAxis dataKey="steps" type="number" hide />
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</div>
|
|
||||||
<div className="grid auto-rows-min gap-2">
|
|
||||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
|
||||||
10,103
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
steps/day
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
steps: {
|
|
||||||
label: "Steps",
|
|
||||||
color: "hsl(var(--muted))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
className="aspect-auto h-[32px] w-full"
|
|
||||||
>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
layout="vertical"
|
|
||||||
margin={{
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
date: "2023",
|
|
||||||
steps: 10103,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Bar
|
|
||||||
dataKey="steps"
|
|
||||||
fill="var(--color-steps)"
|
|
||||||
radius={4}
|
|
||||||
barSize={32}
|
|
||||||
>
|
|
||||||
<LabelList
|
|
||||||
position="insideLeft"
|
|
||||||
dataKey="date"
|
|
||||||
offset={8}
|
|
||||||
fontSize={12}
|
|
||||||
fill="hsl(var(--muted-foreground))"
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
<YAxis dataKey="date" type="category" tickCount={1} hide />
|
|
||||||
<XAxis dataKey="steps" type="number" hide />
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-3">
|
|
||||||
<CardHeader className="p-4 pb-0">
|
|
||||||
<CardTitle>Walking Distance</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Over the last 7 days, your distance walked and run was 12.5 miles
|
|
||||||
per day.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-0">
|
|
||||||
<div className="flex items-baseline gap-1 text-3xl font-bold tabular-nums leading-none">
|
|
||||||
12.5
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
miles/day
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
steps: {
|
|
||||||
label: "Steps",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
className="ml-auto w-[72px]"
|
|
||||||
>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
margin={{
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
date: "2024-01-01",
|
|
||||||
steps: 2000,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-02",
|
|
||||||
steps: 2100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-03",
|
|
||||||
steps: 2200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-04",
|
|
||||||
steps: 1300,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-05",
|
|
||||||
steps: 1400,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-06",
|
|
||||||
steps: 2500,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-07",
|
|
||||||
steps: 1600,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Bar
|
|
||||||
dataKey="steps"
|
|
||||||
fill="var(--color-steps)"
|
|
||||||
radius={2}
|
|
||||||
fillOpacity={0.2}
|
|
||||||
activeIndex={6}
|
|
||||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
|
||||||
/>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={4}
|
|
||||||
hide
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-4">
|
|
||||||
<CardContent className="flex gap-4 p-4 pb-2">
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
move: {
|
|
||||||
label: "Move",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
stand: {
|
|
||||||
label: "Stand",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
exercise: {
|
|
||||||
label: "Exercise",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
className="h-[140px] w-full"
|
|
||||||
>
|
|
||||||
<BarChart
|
|
||||||
margin={{
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
bottom: 10,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
activity: "stand",
|
|
||||||
value: (8 / 12) * 100,
|
|
||||||
label: "8/12 hr",
|
|
||||||
fill: "var(--color-stand)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
activity: "exercise",
|
|
||||||
value: (46 / 60) * 100,
|
|
||||||
label: "46/60 min",
|
|
||||||
fill: "var(--color-exercise)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
activity: "move",
|
|
||||||
value: (245 / 360) * 100,
|
|
||||||
label: "245/360 kcal",
|
|
||||||
fill: "var(--color-move)",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
layout="vertical"
|
|
||||||
barSize={32}
|
|
||||||
barGap={2}
|
|
||||||
>
|
|
||||||
<XAxis type="number" dataKey="value" hide />
|
|
||||||
<YAxis
|
|
||||||
dataKey="activity"
|
|
||||||
type="category"
|
|
||||||
tickLine={false}
|
|
||||||
tickMargin={4}
|
|
||||||
axisLine={false}
|
|
||||||
className="capitalize"
|
|
||||||
/>
|
|
||||||
<Bar dataKey="value" radius={5}>
|
|
||||||
<LabelList
|
|
||||||
position="insideLeft"
|
|
||||||
dataKey="label"
|
|
||||||
fill="white"
|
|
||||||
offset={8}
|
|
||||||
fontSize={12}
|
|
||||||
/>
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex flex-row border-t p-4">
|
|
||||||
<div className="flex w-full items-center gap-2">
|
|
||||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
|
||||||
<div className="text-xs text-muted-foreground">Move</div>
|
|
||||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
|
||||||
562
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
kcal
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
|
||||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
|
||||||
<div className="text-xs text-muted-foreground">Exercise</div>
|
|
||||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
|
||||||
73
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
min
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Separator orientation="vertical" className="mx-2 h-10 w-px" />
|
|
||||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
|
||||||
<div className="text-xs text-muted-foreground">Stand</div>
|
|
||||||
<div className="flex items-baseline gap-1 text-2xl font-bold tabular-nums leading-none">
|
|
||||||
14
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
hr
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
<div className="grid w-full flex-1 gap-6">
|
|
||||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-5">
|
|
||||||
<CardContent className="flex gap-4 p-4">
|
|
||||||
<div className="grid items-center gap-2">
|
|
||||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
|
||||||
<div className="text-sm text-muted-foreground">Move</div>
|
|
||||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
|
||||||
562/600
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
kcal
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
|
||||||
<div className="text-sm text-muted-foreground">Exercise</div>
|
|
||||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
|
||||||
73/120
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
min
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid flex-1 auto-rows-min gap-0.5">
|
|
||||||
<div className="text-sm text-muted-foreground">Stand</div>
|
|
||||||
<div className="flex items-baseline gap-1 text-xl font-bold tabular-nums leading-none">
|
|
||||||
8/12
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
hr
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
move: {
|
|
||||||
label: "Move",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
exercise: {
|
|
||||||
label: "Exercise",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
stand: {
|
|
||||||
label: "Stand",
|
|
||||||
color: "hsl(var(--chart-3))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
className="mx-auto aspect-square w-full max-w-[80%]"
|
|
||||||
>
|
|
||||||
<RadialBarChart
|
|
||||||
margin={{
|
|
||||||
left: -10,
|
|
||||||
right: -10,
|
|
||||||
top: -10,
|
|
||||||
bottom: -10,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
activity: "stand",
|
|
||||||
value: (8 / 12) * 100,
|
|
||||||
fill: "var(--color-stand)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
activity: "exercise",
|
|
||||||
value: (46 / 60) * 100,
|
|
||||||
fill: "var(--color-exercise)",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
activity: "move",
|
|
||||||
value: (245 / 360) * 100,
|
|
||||||
fill: "var(--color-move)",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
innerRadius="20%"
|
|
||||||
barSize={24}
|
|
||||||
startAngle={90}
|
|
||||||
endAngle={450}
|
|
||||||
>
|
|
||||||
<PolarAngleAxis
|
|
||||||
type="number"
|
|
||||||
domain={[0, 100]}
|
|
||||||
dataKey="value"
|
|
||||||
tick={false}
|
|
||||||
/>
|
|
||||||
<RadialBar dataKey="value" background cornerRadius={5} />
|
|
||||||
</RadialBarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-6">
|
|
||||||
<CardHeader className="p-4 pb-0">
|
|
||||||
<CardTitle>Active Energy</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
You're burning an average of 754 calories per day. Good job!
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-row items-baseline gap-4 p-4 pt-2">
|
|
||||||
<div className="flex items-baseline gap-2 text-3xl font-bold tabular-nums leading-none">
|
|
||||||
1,254
|
|
||||||
<span className="text-sm font-normal text-muted-foreground">
|
|
||||||
kcal/day
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
calories: {
|
|
||||||
label: "Calories",
|
|
||||||
color: "hsl(var(--chart-1))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
className="ml-auto w-[64px]"
|
|
||||||
>
|
|
||||||
<BarChart
|
|
||||||
accessibilityLayer
|
|
||||||
margin={{
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
date: "2024-01-01",
|
|
||||||
calories: 354,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-02",
|
|
||||||
calories: 514,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-03",
|
|
||||||
calories: 345,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-04",
|
|
||||||
calories: 734,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-05",
|
|
||||||
calories: 645,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-06",
|
|
||||||
calories: 456,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-07",
|
|
||||||
calories: 345,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Bar
|
|
||||||
dataKey="calories"
|
|
||||||
fill="var(--color-calories)"
|
|
||||||
radius={2}
|
|
||||||
fillOpacity={0.2}
|
|
||||||
activeIndex={6}
|
|
||||||
activeBar={<Rectangle fillOpacity={0.8} />}
|
|
||||||
/>
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={false}
|
|
||||||
tickMargin={4}
|
|
||||||
hide
|
|
||||||
/>
|
|
||||||
</BarChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
<Card className="max-w-xs" x-chunk="charts-01-chunk-7">
|
|
||||||
<CardHeader className="space-y-0 pb-0">
|
|
||||||
<CardDescription>Time in Bed</CardDescription>
|
|
||||||
<CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
|
|
||||||
8
|
|
||||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
|
||||||
hr
|
|
||||||
</span>
|
|
||||||
35
|
|
||||||
<span className="font-sans text-sm font-normal tracking-normal text-muted-foreground">
|
|
||||||
min
|
|
||||||
</span>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="p-0">
|
|
||||||
<ChartContainer
|
|
||||||
config={{
|
|
||||||
time: {
|
|
||||||
label: "Time",
|
|
||||||
color: "hsl(var(--chart-2))",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AreaChart
|
|
||||||
accessibilityLayer
|
|
||||||
data={[
|
|
||||||
{
|
|
||||||
date: "2024-01-01",
|
|
||||||
time: 8.5,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-02",
|
|
||||||
time: 7.2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-03",
|
|
||||||
time: 8.1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-04",
|
|
||||||
time: 6.2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-05",
|
|
||||||
time: 5.2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-06",
|
|
||||||
time: 8.1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: "2024-01-07",
|
|
||||||
time: 7.0,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
margin={{
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
bottom: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<XAxis dataKey="date" hide />
|
|
||||||
<YAxis domain={["dataMin - 5", "dataMax + 2"]} hide />
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="fillTime" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop
|
|
||||||
offset="5%"
|
|
||||||
stopColor="var(--color-time)"
|
|
||||||
stopOpacity={0.8}
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset="95%"
|
|
||||||
stopColor="var(--color-time)"
|
|
||||||
stopOpacity={0.1}
|
|
||||||
/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<Area
|
|
||||||
dataKey="time"
|
|
||||||
type="natural"
|
|
||||||
fill="url(#fillTime)"
|
|
||||||
fillOpacity={0.4}
|
|
||||||
stroke="var(--color-time)"
|
|
||||||
/>
|
|
||||||
<ChartTooltip
|
|
||||||
cursor={false}
|
|
||||||
content={<ChartTooltipContent hideLabel />}
|
|
||||||
formatter={(value) => (
|
|
||||||
<div className="flex min-w-[120px] items-center text-xs text-muted-foreground">
|
|
||||||
Time in bed
|
|
||||||
<div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
|
|
||||||
{value}
|
|
||||||
<span className="font-normal text-muted-foreground">
|
|
||||||
hr
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
|
||||||
</ChartContainer>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { LoginForm } from "@/registry/default/block/login-01/components/login-form"
|
|
||||||
|
|
||||||
export const iframeHeight = "870px"
|
|
||||||
|
|
||||||
export const containerClassName = "w-full h-full"
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<div className="flex h-screen w-full items-center justify-center px-4">
|
|
||||||
<LoginForm />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { LoginForm } from "@/registry/default/block/login-01/components/login-form"
|
|
||||||
|
|
||||||
export const iframeHeight = "870px"
|
|
||||||
|
|
||||||
export const containerClassName = "w-full h-full"
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
return (
|
|
||||||
<div className="flex h-screen w-full items-center justify-center px-4">
|
|
||||||
<LoginForm />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
SidebarLayout,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/block/sidebar-01/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "870px"
|
|
||||||
|
|
||||||
export const containerClassName = "w-full h-full"
|
|
||||||
|
|
||||||
export default async function Page() {
|
|
||||||
const { cookies } = await import("next/headers")
|
|
||||||
return (
|
|
||||||
<SidebarLayout
|
|
||||||
defaultOpen={cookies().get("sidebar:state")?.value === "true"}
|
|
||||||
>
|
|
||||||
<AppSidebar />
|
|
||||||
<main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
|
|
||||||
<div className="h-full rounded-md border-2 border-dashed p-2">
|
|
||||||
<SidebarTrigger />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</SidebarLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { AppSidebar } from "@/registry/default/block/sidebar-01/components/app-sidebar"
|
|
||||||
import {
|
|
||||||
SidebarLayout,
|
|
||||||
SidebarTrigger,
|
|
||||||
} from "@/registry/default/block/sidebar-01/ui/sidebar"
|
|
||||||
|
|
||||||
export const iframeHeight = "870px"
|
|
||||||
|
|
||||||
export const containerClassName = "w-full h-full"
|
|
||||||
|
|
||||||
export default async function Page() {
|
|
||||||
const { cookies } = await import("next/headers")
|
|
||||||
return (
|
|
||||||
<SidebarLayout
|
|
||||||
defaultOpen={cookies().get("sidebar:state")?.value === "true"}
|
|
||||||
>
|
|
||||||
<AppSidebar />
|
|
||||||
<main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
|
|
||||||
<div className="h-full rounded-md border-2 border-dashed p-2">
|
|
||||||
<SidebarTrigger />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</SidebarLayout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
33
apps/www/__registry__/default/example/accordion-demo.tsx
Normal file
33
apps/www/__registry__/default/example/accordion-demo.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "@/registry/default/ui/accordion"
|
||||||
|
|
||||||
|
export default function AccordionDemo() {
|
||||||
|
return (
|
||||||
|
<Accordion type="single" collapsible className="w-full">
|
||||||
|
<AccordionItem value="item-1">
|
||||||
|
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Yes. It adheres to the WAI-ARIA design pattern.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="item-2">
|
||||||
|
<AccordionTrigger>Is it styled?</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Yes. It comes with default styles that matches the other
|
||||||
|
components' aesthetic.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="item-3">
|
||||||
|
<AccordionTrigger>Is it animated?</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Yes. It's animated by default, but you can disable it if you
|
||||||
|
prefer.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
)
|
||||||
|
}
|
||||||
19
apps/www/__registry__/default/example/alert-demo.tsx
Normal file
19
apps/www/__registry__/default/example/alert-demo.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { Terminal } from "lucide-react"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
AlertDescription,
|
||||||
|
AlertTitle,
|
||||||
|
} from "@/registry/default/ui/alert"
|
||||||
|
|
||||||
|
export default function AlertDemo() {
|
||||||
|
return (
|
||||||
|
<Alert>
|
||||||
|
<Terminal className="h-4 w-4" />
|
||||||
|
<AlertTitle>Heads up!</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
You can add components to your app using the cli.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)
|
||||||
|
}
|
||||||
19
apps/www/__registry__/default/example/alert-destructive.tsx
Normal file
19
apps/www/__registry__/default/example/alert-destructive.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { AlertCircle } from "lucide-react"
|
||||||
|
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
AlertDescription,
|
||||||
|
AlertTitle,
|
||||||
|
} from "@/registry/default/ui/alert"
|
||||||
|
|
||||||
|
export default function AlertDestructive() {
|
||||||
|
return (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertCircle className="h-4 w-4" />
|
||||||
|
<AlertTitle>Error</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Your session has expired. Please log in again.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)
|
||||||
|
}
|
||||||
35
apps/www/__registry__/default/example/alert-dialog-demo.tsx
Normal file
35
apps/www/__registry__/default/example/alert-dialog-demo.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from "@/registry/default/ui/alert-dialog"
|
||||||
|
import { Button } from "@/registry/default/ui/button"
|
||||||
|
|
||||||
|
export default function AlertDialogDemo() {
|
||||||
|
return (
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button variant="outline">Show Dialog</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This action cannot be undone. This will permanently delete your
|
||||||
|
account and remove your data from our servers.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction>Continue</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
16
apps/www/__registry__/default/example/aspect-ratio-demo.tsx
Normal file
16
apps/www/__registry__/default/example/aspect-ratio-demo.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import Image from "next/image"
|
||||||
|
|
||||||
|
import { AspectRatio } from "@/registry/default/ui/aspect-ratio"
|
||||||
|
|
||||||
|
export default function AspectRatioDemo() {
|
||||||
|
return (
|
||||||
|
<AspectRatio ratio={16 / 9} className="bg-muted">
|
||||||
|
<Image
|
||||||
|
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
||||||
|
alt="Photo by Drew Beamer"
|
||||||
|
fill
|
||||||
|
className="rounded-md object-cover"
|
||||||
|
/>
|
||||||
|
</AspectRatio>
|
||||||
|
)
|
||||||
|
}
|
||||||
14
apps/www/__registry__/default/example/avatar-demo.tsx
Normal file
14
apps/www/__registry__/default/example/avatar-demo.tsx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import {
|
||||||
|
Avatar,
|
||||||
|
AvatarFallback,
|
||||||
|
AvatarImage,
|
||||||
|
} from "@/registry/default/ui/avatar"
|
||||||
|
|
||||||
|
export default function AvatarDemo() {
|
||||||
|
return (
|
||||||
|
<Avatar>
|
||||||
|
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||||
|
<AvatarFallback>CN</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
)
|
||||||
|
}
|
||||||
5
apps/www/__registry__/default/example/badge-demo.tsx
Normal file
5
apps/www/__registry__/default/example/badge-demo.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
|
export default function BadgeDemo() {
|
||||||
|
return <Badge>Badge</Badge>
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
|
export default function BadgeDestructive() {
|
||||||
|
return <Badge variant="destructive">Destructive</Badge>
|
||||||
|
}
|
||||||
5
apps/www/__registry__/default/example/badge-outline.tsx
Normal file
5
apps/www/__registry__/default/example/badge-outline.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
|
export default function BadgeOutline() {
|
||||||
|
return <Badge variant="outline">Outline</Badge>
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { Badge } from "@/registry/default/ui/badge"
|
||||||
|
|
||||||
|
export default function BadgeSecondary() {
|
||||||
|
return <Badge variant="secondary">Secondary</Badge>
|
||||||
|
}
|
||||||
49
apps/www/__registry__/default/example/breadcrumb-demo.tsx
Normal file
49
apps/www/__registry__/default/example/breadcrumb-demo.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from "@/registry/default/ui/breadcrumb"
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/registry/default/ui/dropdown-menu"
|
||||||
|
|
||||||
|
export default function BreadcrumbDemo() {
|
||||||
|
return (
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">Home</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger className="flex items-center gap-1">
|
||||||
|
<BreadcrumbEllipsis className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Toggle menu</span>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem>Documentation</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>Themes</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
)
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user