From fc9d6c2f00817731e625bed4cd489899d0448114 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Tue, 6 May 2025 22:45:34 -0700
Subject: [PATCH 1/2] fix(frontend): unstack download charts

---
 frontend/routes/package/(_islands)/DownloadChart.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/routes/package/(_islands)/DownloadChart.tsx b/frontend/routes/package/(_islands)/DownloadChart.tsx
index 1881d3f3..76cbb2f1 100644
--- a/frontend/routes/package/(_islands)/DownloadChart.tsx
+++ b/frontend/routes/package/(_islands)/DownloadChart.tsx
@@ -24,7 +24,6 @@ export function DownloadChart(props: Props) {
   ) => ({
     chart: {
       type: "area",
-      stacked: true,
       animations: {
         enabled: false,
       },

From 226e7ce358639898b4472acc848a79a9c1ae2fd7 Mon Sep 17 00:00:00 2001
From: Tyler <26290074+tylersayshi@users.noreply.github.com>
Date: Thu, 8 May 2025 22:55:59 -0700
Subject: [PATCH 2/2] feat(frontend): add option to unstack downloads per
 version

---
 .../package/(_islands)/DownloadChart.tsx      | 112 ++++++++++--------
 1 file changed, 63 insertions(+), 49 deletions(-)

diff --git a/frontend/routes/package/(_islands)/DownloadChart.tsx b/frontend/routes/package/(_islands)/DownloadChart.tsx
index 76cbb2f1..acce013f 100644
--- a/frontend/routes/package/(_islands)/DownloadChart.tsx
+++ b/frontend/routes/package/(_islands)/DownloadChart.tsx
@@ -20,10 +20,10 @@ export function DownloadChart(props: Props) {
 
   const getChartOptions = (
     isDarkMode: boolean,
-    aggregationPeriod: AggregationPeriod = "weekly",
   ) => ({
     chart: {
       type: "area",
+      stacked: true,
       animations: {
         enabled: false,
       },
@@ -56,7 +56,7 @@ export function DownloadChart(props: Props) {
       curve: "straight",
       width: 1.7,
     },
-    series: getSeries(props.downloads, aggregationPeriod),
+    series: getSeries(props.downloads, "weekly"),
     xaxis: {
       type: "datetime",
       tooltip: {
@@ -136,37 +136,52 @@ export function DownloadChart(props: Props) {
   return (
     <div class="relative">
       {graphRendered && (
-        <div className="absolute flex items-center gap-2 pt-1 text-sm pl-5 z-20">
-          <label htmlFor="aggregationPeriod" className="text-secondary">
-            Aggregation Period:
-          </label>
-          <select
-            id="aggregationPeriod"
-            onChange={(e) => {
-              const isDarkMode = document.documentElement.classList.contains(
-                "dark",
-              );
-              const newAggregationPeriod = e.currentTarget
-                .value as AggregationPeriod;
+        <div className="absolute flex md:flex-col md:-top-4 gap-2 pt-1 text-sm pl-5 z-20">
+          <div className="flex items-center gap-2">
+            <label htmlFor="aggregationPeriod" className="text-secondary">
+              Aggregation Period:
+            </label>
+            <select
+              id="aggregationPeriod"
+              onChange={(e) => {
+                chartRef.current?.updateSeries(
+                  getSeries(
+                    props.downloads,
+                    e.currentTarget.value as AggregationPeriod,
+                  ),
+                );
+              }}
+              className="input-container input select w-20"
+            >
+              <option value="daily">Daily</option>
+              <option value="weekly" selected>
+                Weekly
+              </option>
+              <option value="monthly">Monthly</option>
+            </select>
+          </div>
+          <div className="flex items-center gap-2">
+            <label htmlFor="displayAs" className="text-secondary">
+              Display As
+            </label>
+            <select
+              id="displayAs"
+              onChange={(e) => {
+                const newDisplay = e.currentTarget.value === "stacked";
 
-              // Update chart with new options including the new aggregation period
-              chartRef.current?.updateOptions(
-                getChartOptions(isDarkMode, newAggregationPeriod),
-              );
-
-              chartRef.current?.updateSeries(
-                getSeries(
-                  props.downloads,
-                  e.currentTarget.value as AggregationPeriod,
-                ),
-              );
-            }}
-            className="input-container input select w-20"
-          >
-            <option value="daily">Daily</option>
-            <option value="weekly" selected>Weekly</option>
-            <option value="monthly">Monthly</option>
-          </select>
+                // Update chart with new options including the new stacked display
+                chartRef.current?.updateOptions(
+                  { chart: { stacked: newDisplay } },
+                );
+              }}
+              className="input-container input select w-24"
+            >
+              <option value="stacked" selected>Stacked</option>
+              <option value="unstacked">
+                Unstacked
+              </option>
+            </select>
+          </div>
         </div>
       )}
       <div className="h-[300px] md:pt-0 pt-10 text-secondary">
@@ -196,19 +211,17 @@ function adjustTimePeriod(
   switch (aggregation) {
     case "weekly":
       // start of week (Sunday) in UTC
-      out = new Date(Date.UTC(
-        date.getUTCFullYear(),
-        date.getUTCMonth(),
-        date.getUTCDate() - date.getUTCDay(),
-      ));
+      out = new Date(
+        Date.UTC(
+          date.getUTCFullYear(),
+          date.getUTCMonth(),
+          date.getUTCDate() - date.getUTCDay(),
+        ),
+      );
       break;
     case "monthly":
       // first day of month in UTC
-      out = new Date(Date.UTC(
-        date.getUTCFullYear(),
-        date.getUTCMonth(),
-        1,
-      ));
+      out = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
       break;
     default: // daily
       out = date;
@@ -226,8 +239,8 @@ export function collectX(
     xValues.add(adjustTimePeriod(point.timeBucket, aggregationPeriod));
   });
 
-  return Array.from(xValues).sort((a, b) =>
-    new Date(a).getTime() - new Date(b).getTime()
+  return Array.from(xValues).sort(
+    (a, b) => new Date(a).getTime() - new Date(b).getTime(),
   );
 }
 
@@ -251,17 +264,18 @@ export function normalize(
     }
   });
 
-  return Object.entries(normalized).map((
-    [key, value],
-  ) => [new Date(key).getTime(), value]);
+  return Object.entries(normalized).map(([key, value]) => [
+    new Date(key).getTime(),
+    value,
+  ]);
 }
 
 function getSeries(
   recentVersions: PackageDownloadsRecentVersion[],
   aggregationPeriod: AggregationPeriod,
 ) {
-  const dataPointsWithDownloads = recentVersions.filter((dataPoints) =>
-    dataPoints.downloads.length > 0
+  const dataPointsWithDownloads = recentVersions.filter(
+    (dataPoints) => dataPoints.downloads.length > 0,
   );
 
   const dataPointsToDisplay = dataPointsWithDownloads.slice(0, 5);