Merge pull request #426 from duyet/chore/ui-update

fix(running-queries): adjust position and styling of running queries
duyet · Nov 23, 2024 · cc982b4 · cc982b4 · vercel · Nov 23, 2024
2 parents 245ca28 + 09d62ed
commit cc982b4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 25 deletions.
diff --git a/components/generic-charts/area.tsx b/components/generic-charts/area.tsx
@@ -156,17 +156,22 @@ function renderChartTooltip<TValue extends ValueType, TName extends NameType>({
               payload: Array<Payload<ValueType, NameType>>
             ) => {
               return (
-                <div key={'' + name + index}>
-                  <div
-                    className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
-                    style={
-                      {
-                        '--color-bg': `var(--color-${name})`,
-                      } as React.CSSProperties
-                    }
-                  />
-
-                  {chartConfig[name as keyof typeof chartConfig]?.label || name}
+                <div
+                  key={'' + name + index}
+                  className="flex flex-row items-baseline justify-between gap-3"
+                >
+                  <div className="flex flex-row items-baseline gap-1">
+                    <div
+                      className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                      style={
+                        {
+                          '--color-bg': `var(--color-${name})`,
+                        } as React.CSSProperties
+                      }
+                    />
+                    {chartConfig[name as keyof typeof chartConfig]?.label ||
+                      name}
+                  </div>
 
                   <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
                     {item['payload'][`readable_${name}` as keyof typeof item] ||
@@ -219,20 +224,22 @@ function renderChartTooltip<TValue extends ValueType, TName extends NameType>({
 
             return (
               <>
-                <div
-                  className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
-                  style={
-                    {
-                      '--color-bg': `var(--color-${name})`,
-                    } as React.CSSProperties
-                  }
-                />
+                <div className="flex flex-row">
+                  <div
+                    className="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-[--color-bg]"
+                    style={
+                      {
+                        '--color-bg': `var(--color-${name})`,
+                      } as React.CSSProperties
+                    }
+                  />
 
-                {chartConfig[name as keyof typeof chartConfig]?.label || name}
+                  {chartConfig[name as keyof typeof chartConfig]?.label || name}
 
-                <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
-                  {value}
-                  <span className="font-normal text-muted-foreground"></span>
+                  <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
+                    {value}
+                    <span className="font-normal text-muted-foreground"></span>
+                  </div>
                 </div>
 
                 {breakdownData.length > 0 && (

diff --git a/components/overview-charts/running-queries.tsx b/components/overview-charts/running-queries.tsx
@@ -25,10 +25,10 @@ export async function RunningQueries({ className }: { className?: string }) {
   return (
     <Card className={cn('min-w-xs rounded-sm border-0 shadow-none', className)}>
       <CardContent className="group relative content-between p-0">
-        <div className="absolute left-0 top-0 z-50 flex flex-row items-center gap-2 p-4 pb-0">
+        <div className="absolute bottom-0 left-0 z-50 flex flex-row items-center gap-2 p-4 pb-0">
           <div className="text-2xl font-bold">{data[0].count}</div>
           <Link
-            className="text-xs text-muted-foreground"
+            className="text-xs text-black text-muted-foreground"
             href={await getScopedLink('/running-queries')}
           >
             running queries →