feat: add download chart (#1042)

Closes #14

---------

Co-authored-by: crowlkats <crowlkats@toaxl.com>
Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>

Author: 3 people

frontend/deno.json

@@ -13,6 +13,7 @@
     }
   },
   "imports": {
+    "apexcharts": "npm:apexcharts@^4.5.0",
     "tb-icons": "jsr:@preact-icons/tb@^1.0.12",
     "@std/fmt": "jsr:@std/fmt@^1.0.6",
     "fresh": "jsr:@fresh/core@^2.0.0-alpha.25",

frontend/deno.lock

@@ -1,15 +1,20 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
-import type { PackageVersionWithUser } from "../../../utils/api_types.ts";
+import type { PackageVersionWithUser, User } from "../../../utils/api_types.ts";
 import { LocalSymbolSearch } from "../(_islands)/LocalSymbolSearch.tsx";
 import { Docs } from "../../../util.ts";
 import { Params } from "./PackageNav.tsx";
 import { BreadcrumbsSticky } from "../(_islands)/BreadcrumbsSticky.tsx";
+import { TicketModal } from "../../../islands/TicketModal.tsx";
+import { TbFlag } from "tb-icons";
 
 interface DocsProps {
   docs: Docs;
   params: Params;
   selectedVersion: PackageVersionWithUser;
   showProvenanceBadge?: boolean;
+  user: User | null;
+  scope: string;
+  pkg: string;
 }
 
 const USAGE_SELECTOR_SCRIPT = `(() => {
@@ -34,9 +39,12 @@ export function DocsView({
   params,
   selectedVersion,
   showProvenanceBadge,
+  user,
+  scope,
+  pkg,
 }: DocsProps) {
   return (
-    <div class="pt-6 space-y-8">
+    <div class="pt-6 pb-8 space-y-8">
       <style
         hidden
         // deno-lint-ignore react-no-danger
@@ -77,46 +85,87 @@ export function DocsView({
           />
           <div class="ddoc hidden" id="docSearchResults" />
 
-          {showProvenanceBadge && selectedVersion.rekorLogId && (
-            <div class="mt-8 mb-8 border-2 border-jsr-cyan-500 max-w-xl rounded-md py-4 px-6">
-              <div class="flex flex-row items-end justify-between">
-                <div class="items-center">
-                  <span class="text-sm text-jsr-gray-300">
-                    Built and signed on
-                  </span>
+          <div class="flex justify-between items-center gap-4">
+            {showProvenanceBadge && selectedVersion.rekorLogId && (
+              <div class="mt-8 mb-8 border-2 border-jsr-cyan-500 max-w-xl rounded-md py-4 px-6">
+                <div class="flex flex-row items-end justify-between">
+                  <div class="items-center">
+                    <span class="text-sm text-jsr-gray-300">
+                      Built and signed on
+                    </span>
 
-                  <div class="flex gap-2 items-center">
-                    <span class="text-2xl font-bold">GitHub Actions</span>
-                    <svg
-                      aria-hidden="true"
-                      role="img"
-                      class="text-green-600"
-                      viewBox="0 0 16 16"
-                      width="20"
-                      height="20"
-                      fill="currentColor"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom;"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        d="M9.585.52a2.678 2.678 0 00-3.17 0l-.928.68a1.178 1.178 0 01-.518.215L3.83 1.59a2.678 2.678 0 00-2.24 2.24l-.175 1.14a1.178 1.178 0 01-.215.518l-.68.928a2.678 2.678 0 000 3.17l.68.928c.113.153.186.33.215.518l.175 1.138a2.678 2.678 0 002.24 2.24l1.138.175c.187.029.365.102.518.215l.928.68a2.678 2.678 0 003.17 0l.928-.68a1.17 1.17 0 01.518-.215l1.138-.175a2.678 2.678 0 002.241-2.241l.175-1.138c.029-.187.102-.365.215-.518l.68-.928a2.678 2.678 0 000-3.17l-.68-.928a1.179 1.179 0 01-.215-.518L14.41 3.83a2.678 2.678 0 00-2.24-2.24l-1.138-.175a1.179 1.179 0 01-.518-.215L9.585.52zM7.303 1.728c.415-.305.98-.305 1.394 0l.928.68c.348.256.752.423 1.18.489l1.136.174c.51.078.909.478.987.987l.174 1.137c.066.427.233.831.489 1.18l.68.927c.305.415.305.98 0 1.394l-.68.928a2.678 2.678 0 00-.489 1.18l-.174 1.136a1.178 1.178 0 01-.987.987l-1.137.174a2.678 2.678 0 00-1.18.489l-.927.68c-.415.305-.98.305-1.394 0l-.928-.68a2.678 2.678 0 00-1.18-.489l-1.136-.174a1.178 1.178 0 01-.987-.987l-.174-1.137a2.678 2.678 0 00-.489-1.18l-.68-.927a1.178 1.178 0 010-1.394l.68-.928c.256-.348.423-.752.489-1.18l.174-1.136c.078-.51.478-.909.987-.987l1.137-.174a2.678 2.678 0 001.18-.489l.927-.68zM11.28 6.78a.75.75 0 00-1.06-1.06L7 8.94 5.78 7.72a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.75-3.75z"
+                    <div class="flex gap-2 items-center">
+                      <span class="text-2xl font-bold">GitHub Actions</span>
+                      <svg
+                        aria-hidden="true"
+                        role="img"
+                        class="text-green-600"
+                        viewBox="0 0 16 16"
+                        width="20"
+                        height="20"
+                        fill="currentColor"
+                        style="display: inline-block; user-select: none; vertical-align: text-bottom;"
                       >
-                      </path>
-                    </svg>
+                        <path
+                          fill-rule="evenodd"
+                          d="M9.585.52a2.678 2.678 0 00-3.17 0l-.928.68a1.178 1.178 0 01-.518.215L3.83 1.59a2.678 2.678 0 00-2.24 2.24l-.175 1.14a1.178 1.178 0 01-.215.518l-.68.928a2.678 2.678 0 000 3.17l.68.928c.113.153.186.33.215.518l.175 1.138a2.678 2.678 0 002.24 2.24l1.138.175c.187.029.365.102.518.215l.928.68a2.678 2.678 0 003.17 0l.928-.68a1.17 1.17 0 01.518-.215l1.138-.175a2.678 2.678 0 002.241-2.241l.175-1.138c.029-.187.102-.365.215-.518l.68-.928a2.678 2.678 0 000-3.17l-.68-.928a1.179 1.179 0 01-.215-.518L14.41 3.83a2.678 2.678 0 00-2.24-2.24l-1.138-.175a1.179 1.179 0 01-.518-.215L9.585.52zM7.303 1.728c.415-.305.98-.305 1.394 0l.928.68c.348.256.752.423 1.18.489l1.136.174c.51.078.909.478.987.987l.174 1.137c.066.427.233.831.489 1.18l.68.927c.305.415.305.98 0 1.394l-.68.928a2.678 2.678 0 00-.489 1.18l-.174 1.136a1.178 1.178 0 01-.987.987l-1.137.174a2.678 2.678 0 00-1.18.489l-.927.68c-.415.305-.98.305-1.394 0l-.928-.68a2.678 2.678 0 00-1.18-.489l-1.136-.174a1.178 1.178 0 01-.987-.987l-.174-1.137a2.678 2.678 0 00-.489-1.18l-.68-.927a1.178 1.178 0 010-1.394l.68-.928c.256-.348.423-.752.489-1.18l.174-1.136c.078-.51.478-.909.987-.987l1.137-.174a2.678 2.678 0 001.18-.489l.927-.68zM11.28 6.78a.75.75 0 00-1.06-1.06L7 8.94 5.78 7.72a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.75-3.75z"
+                        >
+                        </path>
+                      </svg>
+                    </div>
                   </div>
-                </div>
 
-                <a
-                  href={`https://search.sigstore.dev/?logIndex=${selectedVersion.rekorLogId}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-sm link"
-                >
-                  View transparency log
-                </a>
+                  <a
+                    href={`https://search.sigstore.dev/?logIndex=${selectedVersion.rekorLogId}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-sm link"
+                  >
+                    View transparency log
+                  </a>
+                </div>
               </div>
+            )}
+
+            <div>
+              <TicketModal
+                user={user}
+                kind="package_report"
+                style="danger"
+                title="Report package"
+                description={
+                  <>
+                    <p className="mt-4 text-jsr-gray-600">
+                      Please provide a reason for reporting this package. We
+                      will review your report and take appropriate action.
+                    </p>
+                    <p className="mt-4 text-jsr-gray-600">
+                      Please review the{" "}
+                      <a href="/docs/usage-policy#package-contents-and-metadata">
+                        JSR usage policy
+                      </a>{" "}
+                      before submitting a report.
+                    </p>
+                  </>
+                }
+                fields={[
+                  {
+                    name: "message",
+                    label: "Reason",
+                    type: "textarea",
+                    required: true,
+                  },
+                ]}
+                extraMeta={{
+                  scope,
+                  name: pkg,
+                  version: selectedVersion?.version,
+                }}
+              >
+                <TbFlag class="size-6 md:size-4" /> Report package
+              </TicketModal>
             </div>
-          )}
+          </div>
         </div>
         {docs.toc && (
           <div

frontend/routes/package/(_components)/Docs.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import type {
-  FullUser,
   Package,
+  PackageDownloads,
   PackageVersionWithUser,
 } from "../../../utils/api_types.ts";
 import TbBrandGithub from "tb-icons/TbBrandGithub";
@@ -10,24 +10,23 @@ import { getScoreTextColorClass } from "../../../utils/score_ring_color.ts";
 import {
   TbAlertTriangleFilled,
   TbExternalLink,
-  TbFlag,
   TbRosetteDiscountCheck,
 } from "tb-icons";
 import { Tooltip } from "../../../components/Tooltip.tsx";
 import twas from "twas";
 import { greaterThan, parse } from "@std/semver";
-import { TicketModal } from "../../../islands/TicketModal.tsx";
+import { DownloadWidget } from "../(_islands)/DownloadWidget.tsx";
 
 interface PackageHeaderProps {
   package: Package;
   selectedVersion?: PackageVersionWithUser;
-  user: FullUser | null;
+  downloads: PackageDownloads | null;
 }
 
 export function PackageHeader({
   package: pkg,
   selectedVersion,
-  user,
+  downloads,
 }: PackageHeaderProps) {
   const runtimeCompat = (
     <RuntimeCompatIndicator runtimeCompat={pkg.runtimeCompat} />
@@ -222,44 +221,15 @@ export function PackageHeader({
             )}
           </div>
 
-          <div>
-            <TicketModal
-              user={user}
-              kind="package_report"
-              style="danger"
-              title="Report package"
-              description={
-                <>
-                  <p class="mt-4 text-jsr-gray-600">
-                    Please provide a reason for reporting this package. We will
-                    review your report and take appropriate action.
-                  </p>
-                  <p class="mt-4 text-jsr-gray-600">
-                    Please review the{" "}
-                    <a href="/docs/usage-policy#package-contents-and-metadata">
-                      JSR usage policy
-                    </a>{" "}
-                    before submitting a report.
-                  </p>
-                </>
-              }
-              fields={[
-                {
-                  name: "message",
-                  label: "Reason",
-                  type: "textarea",
-                  required: true,
-                },
-              ]}
-              extraMeta={{
-                scope: pkg.scope,
-                name: pkg.name,
-                version: selectedVersion?.version,
-              }}
-            >
-              <TbFlag class="size-6 md:size-4" /> Report package
-            </TicketModal>
-          </div>
+          {downloads && (
+            <div>
+              <DownloadWidget
+                downloads={downloads.total}
+                scope={pkg.scope}
+                pkg={pkg.name}
+              />
+            </div>
+          )}
         </div>
       </div>
     </div>