Refactor BotChart and Chart components to enhance data processing and visualization

This commit updates the BotChart component to utilize the TimeSeriesChart for improved data visualization and refines the data processing logic using useMemo for better performance. It also removes the deprecated chartTimeBounds utility, consolidating time-bound calculations directly within the components. Additionally, the Chart component is updated to streamline imports and enhance type definitions for better clarity and maintainability. These changes aim to improve the overall efficiency and user experience of the charting features.

Author: goldflag

client/src/app/[site]/bots/components/BotChart.tsx

@@ -1,71 +1,66 @@
 "use client";
 
-import { ResponsiveLine } from "@nivo/line";
 import { DateTime } from "luxon";
-import { Tilt_Warp } from "next/font/google";
 import Link from "next/link";
+import { useMemo } from "react";
+
 import { useGetBotTimeSeries } from "../../../../api/analytics/hooks/bots/useGetBotTimeSeries";
 import { BucketSelection } from "../../../../components/BucketSelection";
 import { ChartTooltip } from "../../../../components/charts/ChartTooltip";
+import { TimeSeriesChart } from "../../../../components/charts/TimeSeriesChart";
+import type { TimeSeriesChartPoint } from "../../../../components/charts/TimeSeriesChart";
+import { getChartTimeBounds } from "../../../../components/charts/timeSeriesChartUtils";
 import { RybbitTextLogo } from "../../../../components/RybbitLogo";
 import { Card, CardContent, CardLoader } from "../../../../components/ui/card";
 import { Skeleton } from "../../../../components/ui/skeleton";
 import { useWhiteLabel } from "../../../../hooks/useIsWhiteLabel";
 import { authClient } from "../../../../lib/auth";
-import { formatChartDateTime, hour12, userLocale } from "../../../../lib/dateTimeUtils";
-import { useNivoTheme } from "../../../../lib/nivo";
+import { formatChartDateTime } from "../../../../lib/dateTimeUtils";
 import { getTimezone, useStore } from "../../../../lib/store";
 
-const tilt_wrap = Tilt_Warp({
-  subsets: ["latin"],
-  weight: "400",
-});
+type BotPoint = TimeSeriesChartPoint & {
+  currentTime: DateTime;
+};
 
 export function BotChart() {
   const session = authClient.useSession();
-  const { site, bucket } = useStore();
+  const { site, bucket, time } = useStore();
   const timezone = getTimezone();
-  const nivoTheme = useNivoTheme();
   const { isWhiteLabel } = useWhiteLabel();
 
   const { data: timeSeriesData, isLoading, isFetching } = useGetBotTimeSeries({ site });
 
-  const processedData =
-    timeSeriesData?.data
-      ?.map(item => {
-        const timestamp = DateTime.fromSQL(item.time, { zone: timezone }).toUTC();
-        if (timestamp > DateTime.now()) return null;
-        return {
-          time: timestamp.toFormat("yyyy-MM-dd HH:mm:ss"),
-          bot_requests: item.bot_requests,
-        };
-      })
-      .filter(item => item !== null) ?? [];
+  const { current, chartMin, chartMax, max } = useMemo(() => {
+    const { min: boundsMin, max: boundsMax } = getChartTimeBounds(time, bucket, timezone);
+
+    const now = DateTime.now();
+    const lowerBoundMs = boundsMin?.getTime();
+    const upperBoundMs = (boundsMax ?? now.toJSDate()).getTime();
+    const points: BotPoint[] = [];
 
-  const data = [
-    {
-      id: "Bot requests",
-      color: "hsl(var(--red-400))",
-      data: processedData.map(item => ({
-        x: item.time,
+    timeSeriesData?.data?.forEach(item => {
+      const timestamp = DateTime.fromSQL(item.time, { zone: timezone }).toUTC();
+      if (timestamp > now) return;
+      const timestampMs = timestamp.toMillis();
+      if (lowerBoundMs !== undefined && timestampMs < lowerBoundMs) return;
+      if (timestampMs > upperBoundMs) return;
+      points.push({
+        x: timestamp.toJSDate(),
         y: item.bot_requests,
-      })),
-    },
-  ].filter(series => series.data.length > 0);
+        currentTime: timestamp,
+      });
+    });
 
-  const formatXAxisValue = (value: any) => {
-    const dt = DateTime.fromJSDate(value, { zone: "utc" }).setZone(timezone).setLocale(userLocale);
-    if (
-      bucket === "hour" ||
-      bucket === "minute" ||
-      bucket === "five_minutes" ||
-      bucket === "ten_minutes" ||
-      bucket === "fifteen_minutes"
-    ) {
-      return dt.toFormat(hour12 ? "ha" : "HH:mm");
-    }
-    return dt.toFormat(hour12 ? "MMM d" : "dd MMM");
-  };
+    const dataMin = points.length ? points[0].x : undefined;
+    const dataMax = points.length ? points[points.length - 1].x : undefined;
+
+    return {
+      current: points,
+      chartMin: boundsMin ?? dataMin,
+      chartMax: boundsMax ?? dataMax ?? now.toJSDate(),
+      max: points.reduce((largest, point) => Math.max(largest, point.y), 0),
+    };
+  }, [bucket, time, timeSeriesData, timezone]);
 
   return (
     <Card className="overflow-visible">
@@ -90,7 +85,7 @@ export function BotChart() {
           <div className="space-y-3">
             <Skeleton className="w-full h-[300px] rounded-md" />
           </div>
-        ) : data.length === 0 ? (
+        ) : current.length === 0 ? (
           <div className="h-[300px] w-full flex items-center justify-center text-neutral-500">
             <div className="text-center">
               <p className="text-lg font-medium">No bot data available</p>
@@ -99,72 +94,27 @@ export function BotChart() {
           </div>
         ) : (
           <div className="h-[300px] w-full">
-            <ResponsiveLine
-              data={data}
-              theme={nivoTheme}
-              margin={{ top: 10, right: 20, bottom: 30, left: 40 }}
-              xScale={{
-                type: "time",
-                format: "%Y-%m-%d %H:%M:%S",
-                precision: "second",
-                useUTC: true,
-              }}
-              yScale={{
-                type: "linear",
-                min: 0,
-                stacked: false,
-                reverse: false,
-              }}
-              enableGridX={true}
-              enableGridY={true}
-              gridYValues={5}
-              axisTop={null}
-              axisRight={null}
-              axisBottom={{
-                tickSize: 5,
-                tickPadding: 10,
-                tickRotation: 0,
-                truncateTickAt: 0,
-                format: formatXAxisValue,
-              }}
-              axisLeft={{
-                tickSize: 5,
-                tickPadding: 10,
-                tickRotation: 0,
-                truncateTickAt: 0,
-                tickValues: 5,
-                format: value => Number(value).toLocaleString(),
-              }}
-              colors={d => d.color}
-              enableTouchCrosshair={true}
-              enablePoints={false}
-              useMesh={true}
-              animate={false}
-              enableSlices="x"
-              enableArea={true}
-              lineWidth={1}
-              sliceTooltip={({ slice }: any) => {
-                const currentTime = DateTime.fromJSDate(new Date(slice.points[0].data.x), { zone: "utc" }).setZone(
-                  timezone
-                );
-
-                return (
-                  <ChartTooltip>
-                    <div className="p-3 min-w-[150px]">
-                      <div className="mb-2">{formatChartDateTime(currentTime, bucket)}</div>
-                      {slice.points.map((point: any) => (
-                        <div key={point.seriesId} className="flex justify-between items-center gap-4">
-                          <div className="flex items-center gap-2">
-                            <div className="w-1 h-3 rounded-[3px]" style={{ backgroundColor: point.seriesColor }} />
-                            <span>{point.seriesId}</span>
-                          </div>
-                          <span className="font-medium">{Number(point.data.yFormatted).toLocaleString()}</span>
-                        </div>
-                      ))}
+            <TimeSeriesChart
+              current={current}
+              max={max}
+              chartMin={chartMin}
+              chartMax={chartMax}
+              currentColor="hsl(var(--red-400))"
+              yTickFormat={value => Number(value).toLocaleString()}
+              renderTooltip={({ point, bucket }) => (
+                <ChartTooltip>
+                  <div className="p-3 min-w-[150px]">
+                    <div className="mb-2">{formatChartDateTime(point.currentTime, bucket)}</div>
+                    <div className="flex justify-between items-center gap-4">
+                      <div className="flex items-center gap-2">
+                        <div className="w-1 h-3 rounded-[3px]" style={{ backgroundColor: "hsl(var(--red-400))" }} />
+                        <span>Bot requests</span>
+                      </div>
+                      <span className="font-medium">{point.y.toLocaleString()}</span>
                     </div>
-                  </ChartTooltip>
-                );
-              }}
+                  </div>
+                </ChartTooltip>
+              )}
             />
           </div>
         )}