fix(frontend): fix data point aggregation logic for download chart (#1060)

This PR fixes the rendering of download chart when the recent 5 versions
don't have enough x values in the chart.

This PR fixes the download chart of `@ecopages/lit` package:

BEFORE
<img width="1228" alt="Screenshot 2025-04-22 at 11 49 45"
src="https://github.com/user-attachments/assets/e9536df1-ca96-4c8e-ae70-ca8d7fc75f36"
/>

AFTER
<img width="1242" alt="Screenshot 2025-04-22 at 11 49 31"
src="https://github.com/user-attachments/assets/2c846670-9d46-4822-9472-07608b50d42f"
/>

Author: kt3k

frontend/deno.lock

@@ -5,6 +5,7 @@ import type {
   DownloadDataPoint,
   PackageDownloadsRecentVersion,
 } from "../../../utils/api_types.ts";
+import type ApexCharts from "apexcharts";
 
 interface Props {
   downloads: PackageDownloadsRecentVersion[];
@@ -14,8 +15,7 @@ export type AggregationPeriod = "daily" | "weekly" | "monthly";
 
 export function DownloadChart(props: Props) {
   const chartDivRef = useRef<HTMLDivElement>(null);
-  // deno-lint-ignore no-explicit-any
-  const chartRef = useRef<any>(null);
+  const chartRef = useRef<ApexCharts>(null);
   const [graphRendered, setGraphRendered] = useState(false);
 
   useEffect(() => {
@@ -63,7 +63,7 @@ export function DownloadChart(props: Props) {
       setGraphRendered(true);
     })();
     return () => {
-      chartRef.current.destroy();
+      chartRef.current?.destroy();
       chartRef.current = null;
     };
   }, []);
@@ -78,7 +78,7 @@ export function DownloadChart(props: Props) {
           <select
             id="aggregationPeriod"
             onChange={(e) =>
-              chartRef.current.updateSeries(
+              chartRef.current?.updateSeries(
                 getSeries(
                   props.downloads,
                   e.currentTarget.value as AggregationPeriod,
@@ -158,7 +158,7 @@ export function normalize(
   dataPoints: DownloadDataPoint[],
   xValues: string[],
   aggregationPeriod: AggregationPeriod,
-): [Date, number][] {
+): [number, number][] {
   const normalized: { [key: string]: number } = {};
   for (const date of xValues) {
     normalized[date] = 0;
@@ -176,7 +176,7 @@ export function normalize(
 
   return Object.entries(normalized).map((
     [key, value],
-  ) => [new Date(key), value]);
+  ) => [new Date(key).getTime(), value]);
 }
 
 function getSeries(
@@ -193,7 +193,7 @@ function getSeries(
   ).flat();
 
   const xValues = collectX(
-    dataPointsToDisplay.map((version) => version.downloads).flat(),
+    dataPointsWithDownloads.map((version) => version.downloads).flat(),
     aggregationPeriod,
   );
 

frontend/routes/package/(_islands)/DownloadChart.tsx

@@ -34,7 +34,7 @@ export function DownloadWidget(props: Props) {
   }
 
   const [hoveredDataPoint, setHoveredDataPoint] = useState<
-    { date: Date; data: number } | null
+    { date: number; data: number } | null
   >(null);
   const [graphRendered, setGraphRendered] = useState(false);
 
@@ -141,11 +141,11 @@ export function DownloadWidget(props: Props) {
             <div>
               {hoveredDataPoint
                 ? `${
-                  hoveredDataPoint.date.toISOString()
+                  new Date(hoveredDataPoint.date).toISOString()
                     .split("T")[0]
                 } to ${
                   new Date(
-                    hoveredDataPoint.date.getTime() + 6 * 24 * 60 * 60 * 1000,
+                    hoveredDataPoint.date + 6 * 24 * 60 * 60 * 1000,
                   ).toISOString()
                     .split("T")[0]
                 }`