Skip to content

Commit c22459d

Browse files
ariflogsariflogs
committed
all chart examples added
1 parent f23ccbe commit c22459d

31 files changed

+1333
-6
lines changed

‎.vscode/settings.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,4 @@
77
"yaml.schemas": {
88
"https://json.schemastore.org/github-workflow.json": "file:///Users/arifhossain/Projects/ptm/retro-ui/.github/workflows/deploy.yml"
99
},
10-
"deno.enable": true
1110
}

‎components/SideNav.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function SideNav() {
1212
<div
1313
className={`fixed right-auto border-r-2 h-full overflow-y-scroll transition-transform transform md:translate-x-0 w-60 bg-background flex flex-col justify-center md:justify-start py-14 md:py-8`}
1414
>
15-
<nav className="flex flex-col items-start px-6 lg:pl-0 pb-26 space-y-4">
15+
<nav className="flex flex-col items-start px-6 lg:pl-0 pb-24 space-y-4" aria-label="Main navigation">
1616
{navConfig.sideNavItems.map((item) => (
1717
<div key={item.title} className="w-full">
1818
<Text as="h6">{item.title}</Text>
@@ -21,8 +21,8 @@ export default function SideNav() {
2121
<Link
2222
key={child.title}
2323
href={child.href}
24-
className={`px-2 py-1 w-full border border-transparent ${
25-
pathname === child.href && "bg-primary text-black"
24+
className={`px-2 py-1 w-full border border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors ${
25+
pathname === child.href && "bg-primary text-primary-foreground"
2626
}`}
2727
>
2828
{child.title}

‎components/retroui/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { cn } from "@/lib/utils";
22
import { HTMLAttributes } from "react";
3-
import { Text } from "./Text";
3+
import { Text } from "@/components/retroui/Text";
44

55
interface ICardProps extends HTMLAttributes<HTMLDivElement> {
66
className?: string;

‎components/retroui/charts/AreaChart.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
"use client"
2+
3+
import { cn } from "@/lib/utils"
4+
import React from "react"
5+
import {
6+
Area,
7+
AreaChart as RechartsAreaChart,
8+
CartesianGrid,
9+
ResponsiveContainer,
10+
Tooltip,
11+
XAxis,
12+
YAxis,
13+
} from "recharts"
14+
15+
interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
16+
data: Record<string, any>[]
17+
index: string
18+
categories: string[]
19+
strokeColors?: string[]
20+
fillColors?: string[]
21+
tooltipBgColor?: string
22+
tooltipBorderColor?: string
23+
gridColor?: string
24+
valueFormatter?: (value: number) => string
25+
showGrid?: boolean
26+
showTooltip?: boolean
27+
fill?: "gradient" | "solid"
28+
className?: string
29+
}
30+
31+
const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
32+
(
33+
{
34+
data = [],
35+
index,
36+
categories = [],
37+
strokeColors = ["var(--foreground)"],
38+
fillColors = ["var(--primary)"],
39+
tooltipBgColor = "var(--background)",
40+
tooltipBorderColor = "var(--border)",
41+
gridColor = "var(--muted)",
42+
valueFormatter = (value: number) => value.toString(),
43+
showGrid = true,
44+
showTooltip = true,
45+
fill = "gradient",
46+
className,
47+
...props
48+
},
49+
ref
50+
) => {
51+
const chartId = React.useId()
52+
53+
return (
54+
<div ref={ref} className={cn("h-80 w-full", className)} {...props}>
55+
<ResponsiveContainer width="100%" height="100%">
56+
<RechartsAreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
57+
<defs>
58+
{categories.map((category, index) => {
59+
const fillColor = fillColors[index] || fillColors[0]
60+
const gradientId = `gradient-${chartId}-${category}`
61+
return (
62+
<linearGradient key={category} id={gradientId} x1="0" y1="0" x2="0" y2="1">
63+
{fill === "gradient" ? (
64+
<>
65+
<stop offset="5%" stopColor={fillColor} stopOpacity={0.8} />
66+
<stop offset="95%" stopColor={fillColor} stopOpacity={0} />
67+
</>
68+
) : (
69+
<stop stopColor={fillColor} stopOpacity={0.6} />
70+
)}
71+
</linearGradient>
72+
)
73+
})}
74+
</defs>
75+
76+
{showGrid && (
77+
<CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
78+
)}
79+
80+
<XAxis
81+
dataKey={index}
82+
axisLine={false}
83+
tickLine={false}
84+
className="text-xs fill-muted-foreground"
85+
/>
86+
87+
<YAxis
88+
axisLine={false}
89+
tickLine={false}
90+
className="text-xs fill-muted-foreground"
91+
tickFormatter={valueFormatter}
92+
/>
93+
94+
{showTooltip && (
95+
<Tooltip
96+
content={({ active, payload, label }) => {
97+
if (!active || !payload?.length) return null
98+
99+
return (
100+
<div
101+
className="border p-2 shadow"
102+
style={{
103+
backgroundColor: tooltipBgColor,
104+
borderColor: tooltipBorderColor
105+
}}
106+
>
107+
<div className="grid grid-cols-2 gap-2">
108+
<div className="flex flex-col">
109+
<span className="text-[0.70rem] uppercase text-muted-foreground">
110+
{index}
111+
</span>
112+
<span className="font-bold text-muted-foreground">
113+
{label}
114+
</span>
115+
</div>
116+
{payload.map((entry, index) => (
117+
<div key={index} className="flex flex-col">
118+
<span className="text-[0.70rem] uppercase text-muted-foreground">
119+
{entry.dataKey}
120+
</span>
121+
<span className="font-bold" style={{ color: strokeColors[0] }}>
122+
{valueFormatter(entry.value as number)}
123+
</span>
124+
</div>
125+
))}
126+
</div>
127+
</div>
128+
)
129+
}}
130+
/>
131+
)}
132+
133+
{categories.map((category, index) => {
134+
const strokeColor = strokeColors[index] || strokeColors[0]
135+
const gradientId = `gradient-${chartId}-${category}`
136+
137+
return (
138+
<Area
139+
key={category}
140+
dataKey={category}
141+
stroke={strokeColor}
142+
fill={`url(#${gradientId})`}
143+
strokeWidth={2}
144+
/>
145+
)
146+
})}
147+
</RechartsAreaChart>
148+
</ResponsiveContainer>
149+
</div>
150+
)
151+
}
152+
)
153+
154+
AreaChart.displayName = "AreaChart"
155+
156+
export { AreaChart, type AreaChartProps }

‎components/retroui/charts/BarChart.tsx‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
"use client"
2+
3+
import { cn } from "@/lib/utils"
4+
import React from "react"
5+
import {
6+
Bar,
7+
BarChart as RechartsBarChart,
8+
CartesianGrid,
9+
ResponsiveContainer,
10+
Tooltip,
11+
XAxis,
12+
YAxis,
13+
} from "recharts"
14+
15+
interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
16+
data: Record<string, any>[]
17+
index: string
18+
categories: string[]
19+
strokeColors?: string[]
20+
fillColors?: string[]
21+
tooltipBgColor?: string
22+
tooltipBorderColor?: string
23+
gridColor?: string
24+
valueFormatter?: (value: number) => string
25+
showGrid?: boolean
26+
showTooltip?: boolean
27+
alignment?: "vertical" | "horizontal"
28+
className?: string
29+
}
30+
31+
const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
32+
(
33+
{
34+
data = [],
35+
index,
36+
categories = [],
37+
strokeColors = ["var(--foreground)"],
38+
fillColors = ["var(--primary)"],
39+
tooltipBgColor = "var(--background)",
40+
tooltipBorderColor = "var(--border)",
41+
gridColor = "var(--muted)",
42+
valueFormatter = (value: number) => value.toString(),
43+
showGrid = true,
44+
showTooltip = true,
45+
alignment = "vertical",
46+
className,
47+
...props
48+
},
49+
ref
50+
) => {
51+
return (
52+
<div ref={ref} className={cn("h-80 w-full", className)} {...props}>
53+
<ResponsiveContainer width="100%" height="100%">
54+
<RechartsBarChart
55+
data={data}
56+
layout={alignment === "horizontal" ? "vertical" : undefined}
57+
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
58+
>
59+
{showGrid && (
60+
<CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
61+
)}
62+
63+
{alignment === "horizontal" ? (
64+
<>
65+
<XAxis
66+
type="number"
67+
axisLine={false}
68+
tickLine={false}
69+
className="text-xs fill-muted-foreground"
70+
tickFormatter={valueFormatter}
71+
/>
72+
73+
<YAxis
74+
type="category"
75+
dataKey={index}
76+
axisLine={false}
77+
tickLine={false}
78+
className="text-xs fill-muted-foreground"
79+
width={80}
80+
/>
81+
</>
82+
) : (
83+
<>
84+
<XAxis
85+
dataKey={index}
86+
axisLine={false}
87+
tickLine={false}
88+
className="text-xs fill-muted-foreground"
89+
/>
90+
91+
<YAxis
92+
axisLine={false}
93+
tickLine={false}
94+
className="text-xs fill-muted-foreground"
95+
tickFormatter={valueFormatter}
96+
/>
97+
</>
98+
)}
99+
100+
{showTooltip && (
101+
<Tooltip
102+
content={({ active, payload, label }) => {
103+
if (!active || !payload?.length) return null
104+
105+
return (
106+
<div
107+
className="border p-2 shadow"
108+
style={{
109+
backgroundColor: tooltipBgColor,
110+
borderColor: tooltipBorderColor
111+
}}
112+
>
113+
<div className="grid grid-cols-2 gap-2">
114+
<div className="flex flex-col">
115+
<span className="text-[0.70rem] uppercase text-muted-foreground">
116+
{index}
117+
</span>
118+
<span className="font-bold text-muted-foreground">
119+
{label}
120+
</span>
121+
</div>
122+
{payload.map((entry, index) => (
123+
<div key={index} className="flex flex-col">
124+
<span className="text-[0.70rem] uppercase text-muted-foreground">
125+
{entry.dataKey}
126+
</span>
127+
<span className="font-bold" style={{ color: strokeColors[0] }}>
128+
{valueFormatter(entry.value as number)}
129+
</span>
130+
</div>
131+
))}
132+
</div>
133+
</div>
134+
)
135+
}}
136+
/>
137+
)}
138+
139+
{categories.map((category, index) => {
140+
const fillColor = fillColors[index] || fillColors[0]
141+
const strokeColor = strokeColors[index] || strokeColors[0]
142+
143+
return (
144+
<Bar
145+
key={category}
146+
dataKey={category}
147+
fill={fillColor}
148+
stroke={strokeColor}
149+
strokeWidth={1}
150+
/>
151+
)
152+
})}
153+
</RechartsBarChart>
154+
</ResponsiveContainer>
155+
</div>
156+
)
157+
}
158+
)
159+
160+
BarChart.displayName = "BarChart"
161+
162+
export { BarChart, type BarChartProps }

0 commit comments

Comments
 (0)