diff --git a/ui/index.html b/ui/index.html index 0152b83..75d3192 100644 --- a/ui/index.html +++ b/ui/index.html @@ -5,6 +5,13 @@ SQLite Studio + + + + diff --git a/ui/src/components/editor.tsx b/ui/src/components/editor.tsx index 352b53d..842a724 100644 --- a/ui/src/components/editor.tsx +++ b/ui/src/components/editor.tsx @@ -32,6 +32,7 @@ export const Editor: FunctionComponent = ({ value, onChange }) => { top: 20, bottom: 20, }, + fontFamily: "JetBrains Mono", cursorStyle: "block", automaticLayout: true, readOnly: onChange === undefined, diff --git a/ui/src/index.css b/ui/src/index.css index eeb55d6..36579cd 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -64,6 +64,6 @@ @apply border-border; } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground font-mono; } } diff --git a/ui/src/routes/index.lazy.tsx b/ui/src/routes/index.lazy.tsx index 1d9d16a..b5cfc3e 100644 --- a/ui/src/routes/index.lazy.tsx +++ b/ui/src/routes/index.lazy.tsx @@ -1,11 +1,19 @@ -import { createFileRoute } from "@tanstack/react-router"; +import { createLazyFileRoute } from "@tanstack/react-router"; import { DatabaseZap, Table as TableIcon, TextSearch, Workflow, } from "lucide-react"; -import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"; +import { + Bar, + BarChart, + ResponsiveContainer, + Tooltip, + TooltipProps, + XAxis, + YAxis, +} from "recharts"; import { fetchOverview } from "@/api"; import { @@ -17,8 +25,12 @@ import { } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"; +import { + NameType, + ValueType, +} from "recharts/types/component/DefaultTooltipContent"; -export const Route = createFileRoute("/")({ +export const Route = createLazyFileRoute("/")({ component: Index, loader: () => fetchOverview(), pendingComponent: IndexSkeleton, @@ -93,7 +105,7 @@ function Index() { -
+
Rows Per Table @@ -177,7 +189,7 @@ type TheBarChartProps = { }[]; }; -const compactrer = Intl.NumberFormat("en-US", { +const compactNumberFormatter = Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1, }); @@ -198,7 +210,7 @@ export function TheBarChart({ counts }: TheBarChartProps) { fontSize={12} tickLine={false} axisLine={false} - tickFormatter={(number) => compactrer.format(number)} + tickFormatter={(number) => compactNumberFormatter.format(number)} /> + } cursor={{ fill: "#00ffa61e" }} /> ); @@ -233,3 +246,26 @@ function IndexSkeleton() { ); } + +function CustomTooltip({ + active, + payload, + label, +}: TooltipProps) { + if (!active || !payload || !payload.length) return null; + + return ( + + +
# {payload[0]?.value?.toLocaleString()}
+

+ Table {label} have{" "} + + {compactNumberFormatter.format(payload[0]?.value as number)} + {" "} + rows. +

+ + + ); +} diff --git a/ui/src/routes/tables.lazy.tsx b/ui/src/routes/tables.lazy.tsx index bfaa66e..916cd86 100644 --- a/ui/src/routes/tables.lazy.tsx +++ b/ui/src/routes/tables.lazy.tsx @@ -41,7 +41,7 @@ function Tables() { {data.tables.map((n, i) => ( - {n.name} ({n.count.toLocaleString()}) + {n.name} [{n.count.toLocaleString()}] ))} @@ -140,6 +140,12 @@ function Table({ name }: Props) { language="sql" theme={currentTheme === "dark" ? CodeDarkTheme : undefined} showLineNumbers={false} + customStyle={{ + FontFace: "JetBrains Mono", + padding: "10px", + backgroundColor: currentTheme === "dark" ? "#091813" : "#f5faf9", + borderRadius: "10px", + }} /> diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 0730ff9..5d567c9 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -9,6 +9,9 @@ module.exports = { ], prefix: "", theme: { + fontFamily: { + mono: ["JetBrains Mono"], + }, container: { center: true, padding: "2rem",