docs: charts

src/bank/index.ts

@@ -503,6 +503,18 @@ export const Bank: Bank = {
         family: [],
         files: ["src/demo/bar-chart-demo.tsx"],
     },
+    "bar-chart-grouped-demo": {
+        name: "bar-chart-grouped-demo",
+        component: React.lazy(() => import("@/demo/bar-chart-grouped-demo")),
+        family: [],
+        files: ["src/demo/bar-chart-grouped-demo.tsx"],
+    },
+    "bar-chart-vertical-demo": {
+        name: "bar-chart-vertical-demo",
+        component: React.lazy(() => import("@/demo/bar-chart-vertical-demo")),
+        family: [],
+        files: ["src/demo/bar-chart-vertical-demo.tsx"],
+    },
     "breadcrumbs-demo": {
         name: "breadcrumbs-demo",
         component: React.lazy(() => import("@/demo/breadcrumbs-demo")),

src/demo/area-chart-demo.tsx

@@ -3,43 +3,43 @@ import { AreaChart } from "@/workshop/charts"
 const areaChartData = [
     {
         date: "Jan 25",
-        "Phone sales": 2890,
-        "Tablet sales": 1560,
+        "Trend 1": 2890,
+        "Trend 2": 1560,
     },
     {
         date: "Feb 25",
-        "Phone sales": 2756,
-        "Tablet sales": 1103,
+        "Trend 1": 2756,
+        "Trend 2": 1103,
     },
     {
         date: "Mar 25",
-        "Phone sales": 3325,
-        "Tablet sales": 1194,
+        "Trend 1": 3325,
+        "Trend 2": 1194,
     },
     {
         date: "Apr 25",
-        "Phone sales": 2500,
-        "Tablet sales": 1108,
+        "Trend 1": 2500,
+        "Trend 2": 1108,
     },
     {
         date: "May 25",
-        "Phone sales": 3475,
-        "Tablet sales": 1812,
+        "Trend 1": 3475,
+        "Trend 2": 1812,
     },
     {
         date: "Jun 25",
-        "Phone sales": 3129,
-        "Tablet sales": 1726,
+        "Trend 1": 3129,
+        "Trend 2": 1726,
     },
 ]
 
 export default function AreaChartDemo() {
     return (
         <AreaChart
-            className="h-80 mt-4"
+            className="h-80"
             data={areaChartData}
             index="date"
-            categories={["Phone sales", "Tablet sales"]}
+            categories={["Trend 1", "Trend 2"]}
             colors={["brand", "green"]}
             valueFormatter={(number: number) => {
                 return "$ " + Intl.NumberFormat("us").format(number).toString()

src/demo/bar-chart-demo.tsx

@@ -1,6 +1,43 @@
+import { BarChart } from "@/workshop/charts"
+
+const barChartData = [
+    {
+        name: "Topic 1",
+        "Reports": 2488,
+    },
+    {
+        name: "Topic 2",
+        "Reports": 1445,
+    },
+    {
+        name: "Topic 3",
+        "Reports": 743,
+    },
+    {
+        name: "Topic 4",
+        "Reports": 281,
+    },
+    {
+        name: "Topic 5",
+        "Reports": 251,
+    },
+    {
+        name: "Topic 6",
+        "Reports": 232,
+    },
+    {
+        name: "Topic 7",
+        "Reports": 98,
+    },
+]
+
 export default function BarChartDemo() {
     return (
-        <></>
+        <BarChart
+            data={barChartData}
+            index="name"
+            categories={["Reports"]}
+            colors={["green"]}
+        />
     )
 }
-

src/demo/bar-chart-grouped-demo.tsx

@@ -0,0 +1,39 @@
+import { BarChart } from "@/workshop/charts"
+
+const barChartData = [
+    {
+        topic: "Topic 1",
+        "Group A": 890,
+        "Group B": 338,
+        "Group C": 538,
+        "Group D": 396,
+        "Group E": 138,
+        "Group F": 436,
+    },
+    {
+        topic: "Topic 2",
+        "Group A": 289,
+        "Group B": 233,
+        "Group C": 253,
+        "Group D": 333,
+        "Group E": 133,
+        "Group F": 533,
+    },
+]
+
+export default function BarChartDemo() {
+    return (
+        <BarChart
+            data={barChartData}
+            index="topic"
+            categories={[
+                "Group A",
+                "Group B",
+                "Group C",
+                "Group D",
+                "Group E",
+                "Group F",
+            ]}
+        />
+    )
+}

src/demo/bar-chart-vertical-demo.tsx

@@ -0,0 +1,40 @@
+import { BarChart } from "@/workshop/charts"
+
+const barChartData = [
+    {
+        topic: "Topic 1",
+        "Group A": 890,
+        "Group B": 338,
+    },
+    {
+        topic: "Topic 2",
+        "Group A": 289,
+        "Group B": 233,
+    },
+    {
+        topic: "Topic 3",
+        "Group A": 253,
+        "Group B": 333,
+    },
+    {
+        topic: "Topic 4",
+        "Group A": 133,
+        "Group B": 533,
+    },
+    {
+        topic: "Topic 5",
+        "Group A": 333,
+        "Group B": 133,
+    }
+]
+
+export default function BarChartDemo() {
+    return (
+        <BarChart
+            data={barChartData}
+            index="topic"
+            layout="vertical"
+            categories={["Group A", "Group B"]}
+        />
+    )
+}

src/demo/donut-chart-demo.tsx

@@ -1,6 +1,46 @@
+import { DonutChart } from "@/workshop/charts"
+
+const donutChartData = [
+    {
+        name: "Topic 1",
+        sales: 9800,
+    },
+    {
+        name: "Topic 2",
+        sales: 4567,
+    },
+    {
+        name: "Topic 3",
+        sales: 3908,
+    },
+    {
+        name: "Topic 4",
+        sales: 2400,
+    },
+    {
+        name: "Topic 5",
+        sales: 1908,
+    },
+    {
+        name: "Topic 6",
+        sales: 1398,
+    },
+]
+
 export default function DonutChartDemo() {
     return (
-        <></>
+        <div className="flex gap-2 w-full">
+            <DonutChart
+                data={donutChartData}
+                index="name"
+                category="sales"
+            />
+            <DonutChart
+                data={donutChartData}
+                index="name"
+                category="sales"
+                variant="pie"
+            />
+        </div>
     )
 }
-