New Graph UI (#684)

A proposal from my end for a more polished UI for our Sync History.
<img width="1728" alt="Screenshot 2023-11-19 at 10 07 37 AM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/3e20285c-1778-445c-aec0-bba7d2b87ffe">

- Hovering on the bars reveals a proper tooltip box with rows synced and
at what time
<img width="610" alt="Screenshot 2023-11-19 at 10 31 57 AM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/11937132-0c28-4ee9-8377-ed85e981cdc1">

ui/app/mirrors/edit/[mirrorId]/aggregatedCountsByInterval.ts

@@ -36,7 +36,7 @@ function aggregateCountsByInterval(
 
   // Iterate through the timestamps and populate the aggregatedCounts object
   for (let { timestamp, count } of timestamps) {
-    const date = roundUpToNearestNMinutes(timestamp, 15);
+    const date = roundUpToNearestNMinutes(timestamp, 1);
     const formattedTimestamp = moment(date).format(timeUnit);
 
     if (!aggregatedCounts[formattedTimestamp]) {
@@ -64,6 +64,10 @@ function aggregateCountsByInterval(
       currentTimestamp.setHours(currentTimestamp.getHours() - 1);
     } else if (interval === '15min') {
       currentTimestamp.setMinutes(currentTimestamp.getMinutes() - 15);
+    } else if (interval === '1min') {
+      currentTimestamp.setMinutes(currentTimestamp.getMinutes() - 1);
+    } else if (interval === '5min') {
+      currentTimestamp.setMinutes(currentTimestamp.getMinutes() - 5);
     } else if (interval === 'month') {
       currentTimestamp.setMonth(currentTimestamp.getMonth() - 1);
     } else if (interval === 'day') {

ui/app/mirrors/edit/[mirrorId]/cdcGraph.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { Label } from '@/lib/Label';
+import { BarChart } from '@tremor/react';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
@@ -51,15 +52,15 @@ function CdcGraph({ syncs }: { syncs: SyncStatusRow[] }) {
       <div style={{ height: '3rem' }}>
         <Label variant='body'>Sync history</Label>
       </div>
-      <div className='flex space-x-2 justify-left ml-2'>
-        {counts.map((count, i) => (
-          <GraphBar
-            key={i}
-            label={formatGraphLabel(new Date(count[0]), aggregateType)}
-            count={count[1]}
-          />
-        ))}
-      </div>
+      <BarChart
+        className='mt-3'
+        data={counts.map((count) => ({
+          name: formatGraphLabel(new Date(count[0]), aggregateType),
+          'Rows synced at a point in time': count[1],
+        }))}
+        index='name'
+        categories={['Rows synced at a point in time']}
+      />
     </div>
   );
 }
@@ -80,32 +81,4 @@ function formatGraphLabel(date: Date, aggregateType: String): string {
   }
 }
 
-type GraphBarProps = {
-  count: number;
-  label: string;
-};
-
-function GraphBar({ label, count }: GraphBarProps) {
-  let color =
-    count && count > 0 ? 'bg-positive-fill-normal' : 'bg-base-border-subtle';
-  let classNames = `relative w-10 h-24 rounded  ${color}`;
-  return (
-    <div className={'group'}>
-      <div className={classNames}>
-        <div
-          className='group-hover:opacity-100 transition-opacity bg-gray-800 px-1 text-sm text-gray-100 rounded-md absolute left-1/2 
-        -translate-x-1/2 translate-y-full opacity-0 m-4 mx-auto w-28 z-10 text-center'
-        >
-          <div>{label}</div>
-          <div>{numberWithCommas(count)}</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function numberWithCommas(x: number): string {
-  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
 export default CdcGraph;