Add bar chart

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

Hide file tree

Showing 8 changed files with 397 additions and 20 deletions.
diff --git a/docs/_meta.json b/docs/_meta.json
@@ -9,6 +9,11 @@
     "link": "/components/introduction",
     "activeMatch": "/components/"
   },
+  {
+    "text": "Charts",
+    "link": "/charts/introduction",
+    "activeMatch": "/charts/"
+  },
   {
     "text": "Templates",
     "link": "/templates/introduction",

diff --git a/docs/charts/_meta.json b/docs/charts/_meta.json
@@ -0,0 +1,8 @@
+[
+  "introduction",
+  {
+    "type": "dir",
+    "label": "Basic Charts",
+    "name": "basic"
+  }
+]
diff --git a/docs/charts/basic/bar-chart.mdx b/docs/charts/basic/bar-chart.mdx
@@ -0,0 +1,58 @@
+# BarChart
+
+BarChart is a component that displays data in a bar chart format.
+
+```tsx preview
+import { BarChart } from '@/ui/charts/BarChart';
+
+const data: GroupedData<"uv" | "pv" | "av">[] = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    av: 2400
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    av: 2400
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    av: 2400
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    av: 2400
+  },
+  {
+    name: "Page E",
+    uv: 1890,
+    pv: 4800,
+    av: 2400
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: 3800,
+    av: 2400
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    av: 2400
+  }
+];
+
+export default function Example() {
+  return (
+    <BarChart data={data} />
+  );
+}
+```
diff --git a/docs/charts/introduction.mdx b/docs/charts/introduction.mdx
@@ -0,0 +1,2 @@
+# Charts
+