Skip to content

Commit 3e7a009

Browse files
ariflogsariflogs
committed
pie chart done
1 parent c22459d commit 3e7a009

File tree

11 files changed

+541
-54
lines changed

11 files changed

+541
-54
lines changed

‎app/global.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@
3131
--color-destructive-foreground: var(--destructive-foreground);
3232
--color-border: var(--border);
3333
--background-image: var(--background-image);
34+
--chart-1: var(--chart-1);
35+
--chart-2: var(--chart-2);
36+
--chart-3: var(--chart-3);
37+
--chart-4: var(--chart-4);
38+
--chart-5: var(--chart-5);
3439
}
3540

3641
:root {
@@ -51,6 +56,11 @@
5156
--destructive-foreground: #fff;
5257
--border: #000;
5358
--background-image: url("/images/banner_void_2.svg");
59+
--chart-1: #c4a1ff;
60+
--chart-2: #01ffcc;
61+
--chart-3: #e7f192;
62+
--chart-4: #000;
63+
--chart-5: #ff30cd;
5464
}
5565

5666
.dark {
@@ -71,6 +81,11 @@
7181
--destructive-foreground: #fff;
7282
--border: #3a3a3a;
7383
--background-image: url("/images/bg_void_3.svg"); /* Optional: A different image for dark mode */
84+
--chart-1: #ffdb33;
85+
--chart-2: #000;
86+
--chart-3: #aeaeae;
87+
--chart-4: #fae583;
88+
--chart-5: #e63946;
7489
}
7590

7691
body {

‎components/MDX.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Link from "next/link";
1111
import { ComponentInstall, CliCommand } from "./ComponentInstall";
1212
import Image from "next/image";
1313
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
14+
import { Table } from "./retroui/Table";
1415

1516
const components = (type: "doc" | "blog") => ({
1617
h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
@@ -95,6 +96,26 @@ const components = (type: "doc" | "blog") => ({
9596
Tab,
9697
TabPanels,
9798
TabPanel,
99+
Table,
100+
// table: (props: HTMLAttributes<HTMLTableElement>) => {
101+
// console.log(props);
102+
// return <table className="w-full caption-bottom text-sm border-2 shadow-lg" {...props} />
103+
// },
104+
// thead: (props: HTMLAttributes<HTMLTableSectionElement>) => (
105+
// <thead className="[&_tr]:border-b bg-primary text-primary-foreground font-head" {...props} />
106+
// ),
107+
// tbody: (props: HTMLAttributes<HTMLTableSectionElement>) => (
108+
// <tbody className="[&_tr:last-child]:border-0" {...props} />
109+
// ),
110+
// tr: (props: HTMLAttributes<HTMLTableRowElement>) => (
111+
// <tr className="border-b transition-colors hover:bg-primary/50 hover:text-primary-foreground data-[state=selected]:bg-muted" {...props} />
112+
// ),
113+
// th: (props: HTMLAttributes<HTMLTableCellElement>) => (
114+
// <th className="h-12 px-4 text-left align-middle font-medium text-primary-foreground [&:has([role=checkbox])]:pr-0" {...props} />
115+
// ),
116+
// td: (props: HTMLAttributes<HTMLTableCellElement>) => (
117+
// <td className="p-3 align-middle [&:has([role=checkbox])]:pr-0" {...props} />
118+
// ),
98119
Link,
99120
Badge,
100121
Image,

‎components/retroui/charts/PieChart.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(
3636
valueFormatter = (value: number) => value.toString(),
3737
showTooltip = true,
3838
innerRadius = 0,
39-
outerRadius = 80,
39+
outerRadius = 100,
4040
className,
4141
...props
4242
},
@@ -54,7 +54,8 @@ const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(
5454
cy="50%"
5555
innerRadius={innerRadius}
5656
outerRadius={outerRadius}
57-
paddingAngle={2}
57+
isAnimationActive={false}
58+
className="w-full h-full"
5859
>
5960
{data.map((entry, index) => (
6061
<Cell

‎config/components.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,11 @@ export const componentConfig: {
4545
filePath: "components/retroui/Card.tsx",
4646
},
4747
areaChart: {
48-
name: "area-chart",
48+
name: "areaChart",
4949
filePath: "components/retroui/charts/AreaChart.tsx",
5050
},
5151
barChart: {
52-
name: "bar-chart",
52+
name: "barChart",
5353
filePath: "components/retroui/charts/BarChart.tsx",
5454
},
5555
checkbox: {
@@ -69,15 +69,15 @@ export const componentConfig: {
6969
filePath: "components/retroui/Label.tsx",
7070
},
7171
lineChart: {
72-
name: "line-chart",
72+
name: "lineChart",
7373
filePath: "components/retroui/charts/LineChart.tsx",
7474
},
7575
menu: {
7676
name: "menu",
7777
filePath: "components/retroui/Menu.tsx",
7878
},
7979
pieChart: {
80-
name: "pie-chart",
80+
name: "pieChart",
8181
filePath: "components/retroui/charts/PieChart.tsx",
8282
},
8383
progress: {
@@ -174,6 +174,11 @@ export const componentConfig: {
174174
filePath: "preview/charts/area-chart-style-multiple.tsx",
175175
preview: lazy(() => import("@/preview/charts/area-chart-style-multiple")),
176176
},
177+
"area-chart-style-stacked": {
178+
name: "area-chart-style-stacked",
179+
filePath: "preview/charts/area-chart-style-stacked.tsx",
180+
preview: lazy(() => import("@/preview/charts/area-chart-style-stacked")),
181+
},
177182
"avatar-style-circle": {
178183
name: "avatar-style-circle",
179184
filePath: "preview/components/avatar-style-circle.tsx",

‎content/docs/charts/area-chart.mdx‎

Lines changed: 138 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,146 @@
11
---
2-
title: Chart
3-
description: A customizable chart component to visualize your data. 📊
4-
lastUpdated: 11 Aug, 2025
2+
title: Area Chart
3+
description: A customizable area chart component to visualize your data with gradient fills and smooth curves. 📈
4+
lastUpdated: 12 Aug, 2025
55
---
66

77
<ComponentShowcase name="area-chart-style-default" />
88
<br />
99
<br />
10+
11+
## Installation
12+
13+
<ComponentInstall>
14+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/area-chart.json'" />
15+
<ComponentInstall.Manual>
16+
17+
#### 1. Install dependencies:
18+
19+
```sh
20+
npm install recharts
21+
```
22+
23+
<br />
24+
25+
#### 2. Copy the code 👇 into your project:
26+
27+
## <ComponentSource name="areaChart" />
28+
29+
</ComponentInstall.Manual>
30+
</ComponentInstall>
31+
32+
<br />
33+
<br />
34+
35+
## Examples
36+
37+
### Default
38+
39+
<ComponentShowcase name="area-chart-style-default" />
40+
<br />
41+
<br />
42+
43+
### Multiple Categories
44+
1045
<ComponentShowcase name="area-chart-style-multiple" />
46+
<br />
47+
<br />
48+
49+
### Stacked Areas
50+
51+
<ComponentShowcase name="area-chart-style-stacked" />
52+
<br />
53+
<br />
54+
55+
## API Reference
1156

57+
<Table>
58+
<Table.Header>
59+
<Table.Row>
60+
<Table.Head>Prop</Table.Head>
61+
<Table.Head>Type</Table.Head>
62+
<Table.Head>Default</Table.Head>
63+
<Table.Head>Description</Table.Head>
64+
</Table.Row>
65+
</Table.Header>
66+
<Table.Body>
67+
<Table.Row>
68+
<Table.Cell className="font-medium">data</Table.Cell>
69+
<Table.Cell className="*:text-xs">`Record<string, any>[]`</Table.Cell>
70+
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
71+
<Table.Cell>Array of data objects to display</Table.Cell>
72+
</Table.Row>
73+
<Table.Row>
74+
<Table.Cell className="font-medium">index</Table.Cell>
75+
<Table.Cell className="*:text-xs">`string`</Table.Cell>
76+
<Table.Cell className="*:text-xs">-</Table.Cell>
77+
<Table.Cell>Key for the x-axis (category) data</Table.Cell>
78+
</Table.Row>
79+
<Table.Row>
80+
<Table.Cell className="font-medium">categories</Table.Cell>
81+
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
82+
<Table.Cell className="*:text-xs">`[]`</Table.Cell>
83+
<Table.Cell>Array of keys for the data values to display as areas</Table.Cell>
84+
</Table.Row>
85+
<Table.Row>
86+
<Table.Cell className="font-medium">fill</Table.Cell>
87+
<Table.Cell className="*:text-xs">`"gradient" | "solid"`</Table.Cell>
88+
<Table.Cell className="*:text-xs">`"gradient"`</Table.Cell>
89+
<Table.Cell>Fill style for the areas</Table.Cell>
90+
</Table.Row>
91+
<Table.Row>
92+
<Table.Cell className="font-medium">strokeColors</Table.Cell>
93+
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
94+
<Table.Cell className="*:text-xs">`["var(--foreground)"]`</Table.Cell>
95+
<Table.Cell>Array of stroke colors for the areas</Table.Cell>
96+
</Table.Row>
97+
<Table.Row>
98+
<Table.Cell className="font-medium">fillColors</Table.Cell>
99+
<Table.Cell className="*:text-xs">`string[]`</Table.Cell>
100+
<Table.Cell className="*:text-xs">`["var(--primary)"]`</Table.Cell>
101+
<Table.Cell>Array of fill colors for the areas</Table.Cell>
102+
</Table.Row>
103+
<Table.Row>
104+
<Table.Cell className="font-medium">tooltipBgColor</Table.Cell>
105+
<Table.Cell className="*:text-xs">`string`</Table.Cell>
106+
<Table.Cell className="*:text-xs">`"var(--background)"`</Table.Cell>
107+
<Table.Cell>Background color for tooltips</Table.Cell>
108+
</Table.Row>
109+
<Table.Row>
110+
<Table.Cell className="font-medium">tooltipBorderColor</Table.Cell>
111+
<Table.Cell className="*:text-xs">`string`</Table.Cell>
112+
<Table.Cell className="*:text-xs">`"var(--border)"`</Table.Cell>
113+
<Table.Cell>Border color for tooltips</Table.Cell>
114+
</Table.Row>
115+
<Table.Row>
116+
<Table.Cell className="font-medium">gridColor</Table.Cell>
117+
<Table.Cell className="*:text-xs">`string`</Table.Cell>
118+
<Table.Cell className="*:text-xs">`"var(--muted)"`</Table.Cell>
119+
<Table.Cell>Color for the grid lines</Table.Cell>
120+
</Table.Row>
121+
<Table.Row>
122+
<Table.Cell className="font-medium">valueFormatter</Table.Cell>
123+
<Table.Cell className="*:text-xs">`(value: number) => string`</Table.Cell>
124+
<Table.Cell className="*:text-xs">`(value) => value.toString()`</Table.Cell>
125+
<Table.Cell>Function to format values</Table.Cell>
126+
</Table.Row>
127+
<Table.Row>
128+
<Table.Cell className="font-medium">showGrid</Table.Cell>
129+
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
130+
<Table.Cell className="*:text-xs">`true`</Table.Cell>
131+
<Table.Cell>Whether to show grid lines</Table.Cell>
132+
</Table.Row>
133+
<Table.Row>
134+
<Table.Cell className="font-medium">showTooltip</Table.Cell>
135+
<Table.Cell className="*:text-xs">`boolean`</Table.Cell>
136+
<Table.Cell className="*:text-xs">`true`</Table.Cell>
137+
<Table.Cell>Whether to show tooltips on hover</Table.Cell>
138+
</Table.Row>
139+
<Table.Row>
140+
<Table.Cell className="font-medium">className</Table.Cell>
141+
<Table.Cell className="*:text-xs">`string`</Table.Cell>
142+
<Table.Cell className="*:text-xs">-</Table.Cell>
143+
<Table.Cell>Additional CSS classes</Table.Cell>
144+
</Table.Row>
145+
</Table.Body>
146+
</Table>

0 commit comments

Comments
 (0)