From d5cc2239ed2ddf24d77980ec489c4f1427f7dcf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Fri, 3 May 2024 13:06:36 +0200
Subject: [PATCH] update real time dashboard a bit

---
 .../overview/overview-live-histogram.tsx      | 15 ++++-----------
 .../components/overview/overview-metrics.tsx  |  6 +++---
 .../components/report/chart/MetricCard.tsx    | 19 +++++++++----------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/apps/dashboard/src/components/overview/overview-live-histogram.tsx b/apps/dashboard/src/components/overview/overview-live-histogram.tsx
index 0ab74ac8..9f5db228 100644
--- a/apps/dashboard/src/components/overview/overview-live-histogram.tsx
+++ b/apps/dashboard/src/components/overview/overview-live-histogram.tsx
@@ -135,18 +135,11 @@ interface WrapperProps {
 function Wrapper({ open, children, count }: WrapperProps) {
   return (
     <AnimateHeight open={open}>
-      <div className="flex flex-col items-end md:flex-row">
-        <div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
-          <div className="text-sm max-md:mb-1">Last 30 minutes</div>
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
-            {count}
-          </div>
+      <div className="flex flex-col">
+        <div className="relative -top-2 text-center text-xs font-medium text-muted-foreground">
+          {count} unique vistors last 30 minutes
         </div>
-        <div className="relative flex aspect-[5/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:gap-2">
-          <div className="absolute -top-3 right-0 text-xs text-muted-foreground">
-            NOW
-          </div>
-          {/* <div className="md:absolute top-0 left-0 md:card md:p-4 mr-2 md:bg-background/90 z-50"> */}
+        <div className="relative flex aspect-[6/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:aspect-[10/1] md:gap-2">
           {children}
         </div>
       </div>
diff --git a/apps/dashboard/src/components/overview/overview-metrics.tsx b/apps/dashboard/src/components/overview/overview-metrics.tsx
index 1bff6442..9a8dc1a7 100644
--- a/apps/dashboard/src/components/overview/overview-metrics.tsx
+++ b/apps/dashboard/src/components/overview/overview-metrics.tsx
@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
 
   return (
     <div className="card col-span-6 p-4">
-      <div className="mb-2 grid grid-cols-6 gap-2">
+      <div className="-mx-2 -mt-2 mb-2 grid grid-cols-6 gap-2">
         {reports.map((report, index) => (
           <button
             key={index}
             className={cn(
-              'col-span-3 rounded p-2 transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-sm',
-              index === metric && 'border-l-4 border-blue-600 bg-slate-50'
+              'col-span-3 rounded-lg border border-background p-2 transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-xs',
+              index === metric && 'border-border'
             )}
             onClick={() => {
               setMetric(index);
diff --git a/apps/dashboard/src/components/report/chart/MetricCard.tsx b/apps/dashboard/src/components/report/chart/MetricCard.tsx
index 3bcf5619..d499bc05 100644
--- a/apps/dashboard/src/components/report/chart/MetricCard.tsx
+++ b/apps/dashboard/src/components/report/chart/MetricCard.tsx
@@ -57,24 +57,23 @@ export function MetricCard({
   return (
     <div
       className={cn(
-        'group relative h-[70px] overflow-hidden',
-        '[#report-editor_&&]:card [#report-editor_&&]:px-4 [#report-editor_&&]:py-2'
+        'group relative h-[70px] overflow-hidden'
+        // '[#report-editor_&&]:card [#report-editor_&&]:px-4 [#report-editor_&&]:py-2'
       )}
       key={serie.name}
     >
       <div
         className={cn(
-          'absolute -right-1 bottom-2 top-0 z-0 rounded-md opacity-20 transition-opacity duration-300 group-hover:opacity-50',
-          previous ? 'left-[80px]' : '-left-1'
+          'pointer-events-none absolute -bottom-1 -left-1 -right-1 top-0 z-0 opacity-20 transition-opacity duration-300 group-hover:opacity-50'
         )}
       >
         <AutoSizer>
           {({ width, height }) => (
             <AreaChart
               width={width}
-              height={height / 3}
+              height={height / 2.5}
               data={serie.data}
-              style={{ marginTop: (height / 3) * 2 }}
+              style={{ marginTop: (height / 2.5) * 1.5 }}
             >
               <Area
                 dataKey="count"
@@ -105,11 +104,11 @@ export function MetricCard({
           <div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
             {renderValue(serie.metrics[metric], 'ml-1 font-light text-xl')}
           </div>
+          <PreviousDiffIndicatorText
+            {...previous}
+            className="mb-0.5 text-xs font-medium"
+          />
         </div>
-        <PreviousDiffIndicatorText
-          {...previous}
-          className="mb-0.5 text-xs font-medium"
-        />
       </div>
     </div>
   );