feat: display column count and index count

frectonz · Jun 25, 2024 · e5e54c0 · e5e54c0
1 parent 7c5e5f2
commit e5e54c0
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git 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
@@ -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>