feat: add monthly downloads line graph (#216)

Author: flaming-codes

web/app/licenses.json

@@ -4,10 +4,6 @@ import { NodeSDK } from "@opentelemetry/sdk-node";
 import { getNodeAutoInstrumentations } from "@opentelemetry/auto-instrumentations-node";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { Resource } from "@opentelemetry/resources";
-import {
-  ATTR_SERVICE_NAME,
-  ATTR_SERVICE_VERSION,
-} from "@opentelemetry/semantic-conventions";
 import { ENV } from "../data/env";
 import { RemixInstrumentation } from "opentelemetry-instrumentation-remix";
 
@@ -26,8 +22,8 @@ export function initOTEL() {
         new RemixInstrumentation(),
       ],
       resource: new Resource({
-        [ATTR_SERVICE_NAME]: ENV.OTEL_NAME,
-        [ATTR_SERVICE_VERSION]: ENV.npm_package_version,
+        ["service.name"]: ENV.OTEL_NAME,
+        ["service.version"]: ENV.npm_package_version,
       }),
     });
 

web/app/modules/instrumentation.server.ts

@@ -9,14 +9,14 @@ import { registerInstrumentations } from "@opentelemetry/instrumentation";
 import { WinstonInstrumentation } from "@opentelemetry/instrumentation-winston";
 import * as winston from "winston";
 import { Resource } from "@opentelemetry/resources";
-import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
 import { ENV } from "../data/env";
 import { OTLPLogExporter } from "@opentelemetry/exporter-logs-otlp-http";
 
 const serviceName = "crane-app";
 
 const resource = new Resource({
-  [SemanticResourceAttributes.SERVICE_NAME]: serviceName,
+  ["service.name"]: serviceName,
+  ["service.version"]: ENV.npm_package_version,
 });
 
 const otlpExporter = new OTLPLogExporter({

web/app/modules/observability.server.ts

@@ -60,8 +60,10 @@ type LoaderData = {
   totalMonthDownloads: number;
   yesterdayDownloads?: { day: string; downloads: number };
   peakYearlyDayDownloads?: { day: string; downloads: number };
+  last31DaysDownloads: CranDownloadsResponse;
   monthlyDayDownloadsComment: string;
   totalYearDownloads: number;
+  totalLast31DaysDownloads: number;
   totalYearlyDownloadsComment: string;
   indexOfTrendingItems: number;
   indexOfTopDownloads: number;
@@ -165,12 +167,14 @@ export const loader: LoaderFunction = async ({ params }) => {
     maintainer: undefined,
     dailyDownloads: [],
     yearlyDailyDownloads: [],
+    last31DaysDownloads: [],
     lastRelease: "",
     totalMonthDownloads: 0,
     yesterdayDownloads: undefined,
     peakYearlyDayDownloads: undefined,
     monthlyDayDownloadsComment: "",
     totalYearDownloads: 0,
+    totalLast31DaysDownloads: 0,
     totalYearlyDownloadsComment: "",
     indexOfTrendingItems: -1,
     indexOfTopDownloads: -1,
@@ -285,6 +289,21 @@ export const loader: LoaderFunction = async ({ params }) => {
     loaderData.indexOfTopDownloads = _topDownloads?.downloads.findIndex(
       (item) => item.package === packageName,
     );
+
+    if (loaderData.yearlyDailyDownloads.at(0)) {
+      const yearly = loaderData.yearlyDailyDownloads.at(0)!;
+      loaderData.last31DaysDownloads = [
+        {
+          ...yearly,
+          downloads: yearly.downloads.slice(-31),
+        },
+      ];
+      loaderData.totalLast31DaysDownloads =
+        loaderData.last31DaysDownloads[0].downloads.reduce(
+          (acc, curr) => acc + curr.downloads,
+          0,
+        );
+    }
   } catch (error) {
     slog.error(error);
     throw new Response(null, {
@@ -310,11 +329,13 @@ export default function PackagePage() {
     authors,
     dailyDownloads,
     yearlyDailyDownloads,
+    last31DaysDownloads,
     lastRelease,
     totalMonthDownloads,
     yesterdayDownloads,
     totalYearDownloads,
     totalYearlyDownloadsComment,
+    totalLast31DaysDownloads,
     monthlyDayDownloadsComment,
     peakYearlyDayDownloads,
     indexOfTrendingItems,
@@ -367,6 +388,8 @@ export default function PackagePage() {
           totalYearDownloads={totalYearDownloads}
           monthlyDayDownloadsComment={monthlyDayDownloadsComment}
           totalYearlyDownloadsComment={totalYearlyDownloadsComment}
+          last31DaysDownloads={last31DaysDownloads}
+          totalLast31DaysDownloads={totalLast31DaysDownloads}
         />
 
         <BinariesPageContentSection
@@ -709,6 +732,8 @@ function InsightsPageContentSection(
     | "monthlyDayDownloadsComment"
     | "totalYearlyDownloadsComment"
     | "totalYearDownloads"
+    | "last31DaysDownloads"
+    | "totalLast31DaysDownloads"
   >,
 ) {
   const {
@@ -720,6 +745,7 @@ function InsightsPageContentSection(
     totalYearDownloads,
     monthlyDayDownloadsComment,
     totalYearlyDownloadsComment,
+    last31DaysDownloads,
   } = props;
 
   const nrFormatter = new Intl.NumberFormat("en-US");
@@ -791,6 +817,29 @@ function InsightsPageContentSection(
                 />
               )}
             </ClientOnly>
+
+            <div className="space-y-4">
+              <p>
+                The following line graph shows the downloads per day. You can
+                hover over the graph to see the exact number of downloads per
+                day.
+              </p>
+            </div>
+            <ClientOnly
+              fallback={
+                <div className="h-200 bg-gray-ui animate-pulse rounded-md" />
+              }
+            >
+              {() => (
+                <LineGraph
+                  height={200}
+                  data={last31DaysDownloads[0].downloads.map((d) => ({
+                    date: d.day,
+                    value: d.downloads,
+                  }))}
+                />
+              )}
+            </ClientOnly>
           </>
         ) : null}