From e5e54c08c7f34b90c003b473a5d154bbcfd8039b Mon Sep 17 00:00:00 2001
From: frectonz <fraol0912@gmail.com>
Date: Tue, 25 Jun 2024 22:17:02 +0300
Subject: [PATCH] feat: display column count and index count

---
 ui/src/api.ts                | 23 +++++++++++------------
 ui/src/routes/index.lazy.tsx | 29 +++++++++++++++++++++++++++--
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/ui/src/api.ts b/ui/src/api.ts
index 0756526..9d0cd4b 100644
--- a/ui/src/api.ts
+++ b/ui/src/api.ts
@@ -3,6 +3,13 @@ import { createZodFetcher } from "zod-fetch";
 
 const BASE_URL = import.meta.env.PROD ? "/api" : "http://localhost:3030/api";
 
+const counts = z
+  .object({
+    name: z.string(),
+    count: z.number(),
+  })
+  .array();
+
 const overview = z.object({
   file_name: z.string(),
   sqlite_version: z.string().nullable(),
@@ -21,21 +28,13 @@ const overview = z.object({
   indexes: z.number(),
   triggers: z.number(),
   views: z.number(),
-  row_counts: z
-    .object({
-      name: z.string(),
-      count: z.number(),
-    })
-    .array(),
+  row_counts: counts,
+  column_counts: counts,
+  index_counts: counts,
 });
 
 const tables = z.object({
-  tables: z
-    .object({
-      name: z.string(),
-      count: z.number(),
-    })
-    .array(),
+  tables: counts,
 });
 
 const table = z.object({
diff --git a/ui/src/routes/index.lazy.tsx b/ui/src/routes/index.lazy.tsx
index 02daa19..5148994 100644
--- a/ui/src/routes/index.lazy.tsx
+++ b/ui/src/routes/index.lazy.tsx
@@ -139,6 +139,26 @@ function Index() {
           </CardContent>
         </Card>
       </div>
+
+      <div className="grid gap-8 lg:grid-cols-2 xl:grid-cols-7">
+        <Card className="xl:col-span-3">
+          <CardHeader>
+            <CardTitle>INDEXES PER TABLE</CardTitle>
+          </CardHeader>
+          <CardContent className="pl-2">
+            <TheBarChart counts={data.index_counts} />
+          </CardContent>
+        </Card>
+
+        <Card className="xl:col-span-4">
+          <CardHeader>
+            <CardTitle>COLUMNS PER TABLE</CardTitle>
+          </CardHeader>
+          <CardContent className="pl-2">
+            <TheBarChart counts={data.column_counts} />
+          </CardContent>
+        </Card>
+      </div>
     </>
   );
 }
@@ -225,6 +245,11 @@ function IndexSkeleton() {
         <Skeleton className="xl:col-span-4 h-[400px]" />
         <Skeleton className="xl:col-span-3 h-[400px]" />
       </div>
+
+      <div className="w-full grid gap-4 lg:grid-cols-2 xl:grid-cols-7">
+        <Skeleton className="xl:col-span-3 h-[400px]" />
+        <Skeleton className="xl:col-span-4 h-[400px]" />
+      </div>
     </>
   );
 }
@@ -244,8 +269,8 @@ function CustomTooltip({
           Table <span className="text-primary font-semibold">{label}</span> has{" "}
           <span className="text-primary font-semibold">
             {compactNumberFormatter.format(payload[0]?.value as number)}
-          </span>{" "}
-          rows.
+          </span>
+          .
         </p>
       </CardContent>
     </Card>