Initial charts

tinytek-io · Jul 14, 2024 · 6dd5a8f · 6dd5a8f
1 parent 6120fd5
commit 6dd5a8f
Show file tree

Hide file tree

Showing 13 changed files with 430 additions and 17 deletions.
diff --git a/docs/charts/basic/area-chart.mdx b/docs/charts/basic/area-chart.mdx
@@ -0,0 +1,58 @@
+# AreaChart
+
+AreaChart is a component that displays data in a bar chart format.
+
+```tsx preview
+import { AreaChart } from '@/ui/charts/AreaChart';
+
+const data: GroupedData<"uv" | "pv" | "amt">[] = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000
+  },
+  {
+    name: "Page E",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: 3800,
+    amt: 2500
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100
+  }
+];
+
+export default function Example() {
+  return (
+    <AreaChart data={data} />
+  );
+}
+```
diff --git a/docs/charts/basic/line-plot.mdx b/docs/charts/basic/line-plot.mdx
@@ -0,0 +1,58 @@
+# LinePlot
+
+LinePlot is a component that displays data in a bar chart format.
+
+```tsx preview
+import { LinePlot } from '@/ui/charts/LinePlot';
+
+const data: GroupedData<"uv" | "pv" | "amt">[] = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000
+  },
+  {
+    name: "Page E",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: 3800,
+    amt: 2500
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100
+  }
+];
+
+export default function Example() {
+  return (
+    <LinePlot data={data} />
+  );
+}
+```
diff --git a/docs/charts/basic/pie-chart.mdx b/docs/charts/basic/pie-chart.mdx
@@ -0,0 +1,58 @@
+# PieChart
+
+PieChart is a component that displays data in a bar chart format.
+
+```tsx preview
+import { PieChart } from '@/ui/charts/PieChart';
+
+const data: GroupedData<"uv" | "pv" | "amt">[] = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000
+  },
+  {
+    name: "Page E",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: 3800,
+    amt: 2500
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100
+  }
+];
+
+export default function Example() {
+  return (
+    <PieChart data={data} />
+  );
+}
+```
diff --git a/docs/charts/basic/radar-chart.mdx b/docs/charts/basic/radar-chart.mdx
@@ -0,0 +1,47 @@
+# RadarChart
+
+RadarChart is a component that displays data in a bar chart format.
+
+```tsx preview
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+const data: GroupedData<"uv" | "pv" | "amt">[] = [
+  {
+    name: 'Math',
+    Mike: 120,
+    Lily: 110,
+  },
+  {
+    name: 'Chinese',
+    Mike: 98,
+    Lily: 130,
+  },
+  {
+    name: 'English',
+    Mike: 86,
+    Lily: 130,
+  },
+  {
+    name: 'Geography',
+    Mike: 99,
+    Lily: 100,
+    fullMark: 150,
+  },
+  {
+    name: 'Physics',
+    Mike: 85,
+    Lily: 90,
+  },
+  {
+    name: 'History',
+    Mike: 65,
+    Lily: 85,
+  },
+];
+
+export default function Example() {
+  return (
+    <RadarChart data={data} domain={[0, 150]} />
+  );
+}
+```
diff --git a/ui/charts/AreaChart.tsx b/ui/charts/AreaChart.tsx
@@ -0,0 +1,34 @@
+import { Area, Legend, AreaChart as ReAreaChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { CartesianGrid } from "./CartesianGrid";
+import { Tooltip } from "./Tooltip";
+import { type GroupedData, getChartColor } from "./util";
+
+type AreaChartProps<T extends string> = {
+  data: GroupedData<T>[];
+};
+
+export function AreaChart<T extends string>({ data }: AreaChartProps<T>) {
+  const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <ReAreaChart data={data}>
+        <CartesianGrid />
+        <Tooltip />
+        {dataKeys.map((key, index) => (
+          <Area
+            key={key}
+            dataKey={key}
+            type="monotone"
+            stroke={getChartColor(index, dataKeys.length)}
+            fill={getChartColor(index, dataKeys.length)}
+            className="!stroke-border"
+            activeDot={{ r: 4 }}
+          />
+        ))}
+        <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <Legend stroke="hsl(var(--muted-foreground))" />
+      </ReAreaChart>
+    </ResponsiveContainer>
+  );
+}
diff --git a/ui/charts/BarChart.tsx b/ui/charts/BarChart.tsx
@@ -1,7 +1,7 @@
-import { Bar, CartesianGrid, Legend, BarChart as ReBarChart, Tooltip, XAxis, YAxis } from "recharts";
-import { getChartColor } from "./util";
-
-export type GroupedData<T extends string> = { name: string } & Record<T, number>;
+import { Bar, Legend, BarChart as ReBarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { CartesianGrid } from "./CartesianGrid";
+import { Tooltip } from "./Tooltip";
+import { type GroupedData, getChartColor } from "./util";
 
 type BarChartProps<T extends string> = {
   data: GroupedData<T>[];
@@ -10,18 +10,17 @@ type BarChartProps<T extends string> = {
 export function BarChart<T extends string>({ data }: BarChartProps<T>) {
   const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
   return (
-    <ReBarChart width={730} height={250} data={data} className="bg-background text-foreground">
-      <CartesianGrid strokeDasharray="3 3" className="!stroke-border" />
-      <Tooltip
-        wrapperClassName="!bg-background rounded-xl !border !border-border !p-2 !text-foreground !text-xs"
-        labelClassName="!font-semibold !text-xs"
-      />
-      {dataKeys.map((key, index) => (
-        <Bar key={key} dataKey={key} fill={getChartColor(index, dataKeys.length)} className="!stroke-border" />
-      ))}
-      <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
-      <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
-      <Legend stroke="hsl(var(--muted-foreground))" />
-    </ReBarChart>
+    <ResponsiveContainer width="100%" height="100%">
+      <ReBarChart data={data}>
+        <CartesianGrid />
+        <Tooltip />
+        {dataKeys.map((key, index) => (
+          <Bar key={key} dataKey={key} fill={getChartColor(index, dataKeys.length)} className="!stroke-border" />
+        ))}
+        <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <Legend stroke="hsl(var(--muted-foreground))" />
+      </ReBarChart>
+    </ResponsiveContainer>
   );
 }
diff --git a/ui/charts/CartesianGrid.tsx b/ui/charts/CartesianGrid.tsx
@@ -0,0 +1,6 @@
+import { CartesianGrid as ReCartesianGrid } from "recharts";
+import type { Props } from "recharts/types/cartesian/CartesianGrid";
+
+export function CartesianGrid({ className = "!stroke-border", strokeDasharray = "3 3", ...props }: Props) {
+  return <ReCartesianGrid {...props} strokeDasharray={strokeDasharray} className={className} />;
+}
diff --git a/ui/charts/LinePlot.tsx b/ui/charts/LinePlot.tsx
@@ -0,0 +1,33 @@
+import { Legend, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { CartesianGrid } from "./CartesianGrid";
+import { Tooltip } from "./Tooltip";
+import { type GroupedData, getChartColor } from "./util";
+
+type LinePlotProps<T extends string> = {
+  data: GroupedData<T>[];
+};
+
+export function LinePlot<T extends string>({ data }: LinePlotProps<T>) {
+  const dataKeys = Object.keys(data[0]).filter((key) => key !== "name") as T[];
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <LineChart data={data}>
+        <CartesianGrid />
+        <Tooltip />
+        {dataKeys.map((key, index) => (
+          <Line
+            key={key}
+            dataKey={key}
+            type="monotone"
+            stroke={getChartColor(index, dataKeys.length)}
+            className="!stroke-border"
+            activeDot={{ r: 4 }}
+          />
+        ))}
+        <XAxis dataKey="name" className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <YAxis className="!text-sm" stroke="hsl(var(--muted-foreground))" />
+        <Legend stroke="hsl(var(--muted-foreground))" />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}