Skip to content

Commit 03622b3

Browse files
ariflogsariflogs
authored
Merge pull request #73 from Logging-Stuff/charts
Added Chart components
2 parents f23ccbe + be26db4 commit 03622b3

35 files changed

+1888
-10
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
}

‎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/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/Text.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { ElementType, HTMLAttributes } from "react";
2-
import { type VariantProps, cva } from "class-variance-authority";
1+
import { ElementType, HTMLAttributes } from "react";
2+
import { VariantProps, cva } from "class-variance-authority";
33
import { cn } from "@/lib/utils";
44

55
const textVariants = cva("font-head", {

‎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 }

0 commit comments

Comments
 (0)