add chart stats on component

Author: ricardo-devis-agullo

src/registry/routes/component-info.ts

@@ -6,7 +6,7 @@ import infoView from '../views/info';
 import isUrlDiscoverable from './helpers/is-url-discoverable';
 import * as urlBuilder from '../domain/url-builder';
 import type { Repository } from '../domain/repository';
-import { Component, Config } from '../../types';
+import { Component, ComponentDetail, Config } from '../../types';
 import { Request, Response } from 'express';
 
 function getParams(component: Component) {
@@ -38,9 +38,10 @@ function componentInfo(
   err: InfoError | string | null,
   req: Request,
   res: Response,
-  component: Component
+  component?: Component,
+  componentDetail?: ComponentDetail
 ): void {
-  if (err) {
+  if (!component || err) {
     res.errorDetails = (err as any).registryError || err;
     res.status(404).json(err);
     return;
@@ -67,6 +68,7 @@ function componentInfo(
       res.send(
         infoView({
           component,
+          componentDetail,
           dependencies: Object.keys(component.dependencies || {}),
           href,
           parsedAuthor,
@@ -89,24 +91,32 @@ export default function componentInfoRoute(
   conf: Config,
   repository: Repository
 ) {
-  return function (req: Request, res: Response): void {
-    fromPromise(repository.getComponent)(
-      req.params['componentName'],
-      req.params['componentVersion'],
-      (registryError: any, component) => {
-        if (registryError && conf.fallbackRegistryUrl) {
-          return getComponentFallback.getComponentInfo(
-            conf,
-            req,
-            res,
-            registryError,
-            (fallbackError, fallbackComponent) =>
-              componentInfo(fallbackError, req, res, fallbackComponent)
-          );
-        }
-
-        componentInfo(registryError, req, res, component);
+  async function handler(req: Request, res: Response): Promise<void> {
+    try {
+      const history = await repository
+        .getComponentsDetails()
+        .catch(() => undefined);
+      const componentDetail = history?.components[req.params['componentName']];
+      const component = await repository.getComponent(
+        req.params['componentName'],
+        req.params['componentVersion']
+      );
+      componentInfo(null, req, res, component, componentDetail);
+    } catch (registryError) {
+      if (conf.fallbackRegistryUrl) {
+        return getComponentFallback.getComponentInfo(
+          conf,
+          req,
+          res,
+          registryError as any,
+          (fallbackError, fallbackComponent) =>
+            componentInfo(fallbackError, req, res, fallbackComponent)
+        );
       }
-    );
-  };
+
+      componentInfo(registryError as any, req, res);
+    }
+  }
+
+  return handler;
 }

src/registry/views/info.ts

@@ -1,4 +1,4 @@
-import { Component } from '../../types';
+import { Component, ComponentDetail } from '../../types';
 
 import getComponentAuthor from './partials/component-author';
 import getComponentParameters from './partials/component-parameters';
@@ -12,13 +12,89 @@ import isTemplateLegacy from '../../utils/is-template-legacy';
 interface Vm {
   parsedAuthor: { name?: string; email?: string; url?: string };
   component: Component;
+  componentDetail?: ComponentDetail;
   dependencies: string[];
   href: string;
   sandBoxDefaultQs: string;
   title: string;
   repositoryUrl: string | null;
 }
 
+function statsJs(componentDetail: ComponentDetail) {
+  return `
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+  <script>
+  (function () {
+    const componentDetail = ${JSON.stringify(componentDetail)};
+    window.componentDetail = componentDetail;
+    const ctx = document.getElementById('stats');
+    const dataPoints = [];
+    const versionNumbers = Object.keys(componentDetail);
+  
+    for (const versionNumber of versionNumbers) {
+      const versionData = componentDetail[versionNumber];
+      const date = new Date(versionData.publishDate);
+      const size = Math.round(versionData.templateSize / 1024);
+  
+      // Add the data point to the array
+      dataPoints.push({ x: date, y: size, version: versionNumber });
+    }
+  
+    const dataset = {
+      label: 'guest-stay-config',
+      data: dataPoints,
+      tension: 0.1,
+      borderWidth: 1
+    }
+  
+    new Chart(ctx, {
+      type: 'line',
+      data: {
+        datasets: [dataset]
+      },
+      options: {
+        plugins: {
+          tooltip: {
+            callbacks: {
+              footer(items) {
+                const version = items[0].raw.version;
+                return 'Version: ' + version;
+              }
+            }
+          }
+        },
+        title: {
+          display: true,
+          text: "Package Sizes Over Time",
+        },
+        scales: {
+          x: {
+            type: "time",
+            time: {
+              unit: "day",
+            },
+            display: true,
+            title: {
+              display: true,
+              text: 'Date published'
+            }
+          },
+          y: {
+            display: true,
+            title: {
+              display: true,
+              text: 'Size in KB'
+            }
+          },
+        },
+      }
+    });
+    }());
+  </script>
+  `;
+}
+
 export default function info(vm: Vm): string {
   const componentAuthor = getComponentAuthor(vm);
   const componentParameters = getComponentParameters(vm);
@@ -49,10 +125,18 @@ export default function info(vm: Vm): string {
       ? 'legacy'
       : compiler + '@' + component.oc.files.template.version
   })`;
+  const statsAvailable =
+    !!vm.componentDetail && Object.keys(vm.componentDetail).length > 1;
 
   const content = `<a class="back" href="${href}">&lt;&lt; All components</a>
     <h2>${component.name} &nbsp;${componentVersions()}</h2>
     <p class="w-100">${component.description} ${componentState()}</p>
+    ${
+      statsAvailable
+        ? `<h3>Stats</h3>
+           <canvas id="stats" width="400" height="200"></canvas>`
+        : ''
+    }
     <h3>Component Info</h3>
     ${property('Repository', repositoryUrl || 'not available', !!repositoryUrl)}
     ${componentAuthor()}
@@ -82,9 +166,12 @@ export default function info(vm: Vm): string {
     </h3>
     <iframe class="preview" src="~preview/${sandBoxDefaultQs}"></iframe>`;
 
-  const scripts = `<script>var thisComponentHref="${href}${component.name}/";
+  const scripts = `
+  <script>var thisComponentHref="${href}${component.name}/";
     ${infoJS}
-  </script>`;
+  </script>
+  ${statsAvailable ? statsJs(vm.componentDetail!) : ''}
+  `;
 
   return layout({ content, scripts });
 }

src/types.ts

@@ -32,14 +32,16 @@ export interface TemplateInfo {
   version: string;
 }
 
+export type ComponentDetail = {
+  [componentVersion: string]: {
+    publishDate: number;
+    templateSize?: number;
+  };
+};
+
 export interface ComponentsDetails {
   components: {
-    [componentName: string]: {
-      [componentVersion: string]: {
-        publishDate: number;
-        templateSize?: number;
-      };
-    };
+    [componentName: string]: ComponentDetail;
   };
   lastEdit: number;
 }