fix: enable usage charts

.github/workflows/deploy.yml

@@ -21,6 +21,11 @@ jobs:
       - name: Import the nested docs
         run: make import
 
+      - name: Generate newer usage graphs
+        run: |
+          pip3 install click requests pygal
+          python3 files/generate_usage.py
+
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build website

.github/workflows/test-deploy.yml

@@ -19,6 +19,11 @@ jobs:
       - name: Import the nested docs
         run: make import
 
+      - name: Generate newer usage graphs
+        run: |
+          pip3 install click requests pygal
+          python3 files/generate_usage.py
+
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Test build website

.gitignore

@@ -29,3 +29,6 @@ yarn-error.log*
 
 deployment
 research
+
+# Generated usage graphs
+static/img/usage/*.svg

Makefile

@@ -1,10 +1,13 @@
-run-dev: import
+run-dev: import generate-usage
 	yarn start
 
 install-dependencies: import
 	sudo dnf -y install yarnpkg
 	yarn install
 
+generate-usage:
+	python3 files/generate_usage.py
+
 import:
 	# Deployment
 	([[ -d .deployment-docs ]] && rm -rf .deployment-docs deployment) || true

docusaurus.config.js

@@ -286,6 +286,10 @@ const config = {
           {
             title: "More",
             items: [
+              {
+                label: "Usage Charts",
+                to: "/usage",
+              },
               {
                 label: "Blog Posts",
                 to: "/posts",

files/generate_usage.py

@@ -7,18 +7,20 @@
 import requests
 import json
 import pygal
+from pygal.style import DefaultStyle, DarkStyle
 
 from collections import defaultdict
 
 
-def generate_graph(title, data, path, value_text="builds"):
+def generate_graph(title, data, path, value_text="builds", style=DefaultStyle):
     """
     Generate a treemap from our data
     """
     treemap = pygal.Treemap(
         title=title,
         value_formatter=("{} " + value_text).format,
         truncate_legend=32,
+        style=style,
     )
 
     for name, value in data:
@@ -41,37 +43,32 @@ def generate_usage_treemap():
     )
     result = json.loads(response.content)
 
-    with open("./layouts/shortcodes/usagecharts.html", "w") as short_code_file:
+    for job_name, job_data in result["jobs"].items():
+        job_name_human_readable = (
+            job_name.replace("_", " ")
+            .capitalize()
+            .replace(" Groups", "s")
+            .replace(" Targets", "s")
+            .replace("Vm", "VM")
+            .replace("Tft", "TFT")
+            .replace("Srpm", "SRPM")
+        )
 
-        for job_name, job_data in result["jobs"].items():
-            job_name_human_readable = (
-                job_name.replace("_", " ")
-                .capitalize()
-                .replace(" Groups", "s")
-                .replace(" Targets", "s")
-                .replace("Vm", "VM")
-                .replace("Tft", "TFT")
-                .replace("Srpm", "SRPM")
-            )
-            short_code_file.write(
-                f"""<figure>
-    <embed type="image/svg+xml" src="/images/usage/{job_name}.svg" />
-</figure>\n"""
-            )
-
-            data_namespaces = defaultdict(int)
-            for p, c in job_data["top_projects_by_job_runs"].items():
-                data_namespaces[
-                    p.removeprefix("https://github.com/").rsplit("/", maxsplit=1)[0]
-                ] += c
+        data_namespaces = defaultdict(int)
+        for p, c in job_data["top_projects_by_job_runs"].items():
+            data_namespaces[
+                p.removeprefix("https://github.com/").rsplit("/", maxsplit=1)[0]
+            ] += c
 
-            sorted_data = sorted(data_namespaces.items(), key=lambda x: -x[1])  # [:3]
+        sorted_data = sorted(data_namespaces.items(), key=lambda x: -x[1])  # [:3]
 
+        for style, style_class in (("light", DefaultStyle), ("dark", DarkStyle)):
             generate_graph(
                 f"Packit: {job_name_human_readable}",
                 data=sorted_data,
-                path=f"./static/images/usage/{job_name}.svg",
+                path=f"./static/img/usage/{job_name}_{style}.svg",
                 value_text=("builds" if "build" in job_name else "runs"),
+                style=style_class,
             )
 
 

src/components/UsageGraph/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function UsageGraph({ src }) {
+  return (
+    <figure className="row">
+      <embed
+        className="col light-mode-only"
+        type="image/svg+xml"
+        src={`${src}_light.svg`}
+      />
+      <embed
+        className="col dark-mode-only"
+        type="image/svg+xml"
+        src={`${src}_dark.svg`}
+      />
+    </figure>
+  );
+}

src/css/custom.css

@@ -51,3 +51,11 @@
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
+
+/* Used for switching around between light and dark theme. */
+[data-theme="light"] img[src$="#gh-dark-mode-only"],
+[data-theme="dark"] img[src$="#gh-light-mode-only"],
+[data-theme="light"] .dark-mode-only,
+[data-theme="dark"] .light-mode-only {
+  display: none;
+}

src/pages/usage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Layout from "@theme/Layout";
+
+import UsageGraph from "../components/UsageGraph";
+
+const USAGES = [
+  "/img/usage/srpm_builds",
+  "/img/usage/copr_build_groups",
+  "/img/usage/koji_build_groups",
+  "/img/usage/vm_image_build_targets",
+  "/img/usage/tft_test_run_groups",
+  "/img/usage/sync_release_runs",
+];
+
+export default function Usage() {
+  return (
+    <Layout title="Usage" description="Usage statistics of Packit Service">
+      <main className="container">
+        {USAGES.map((path) => (
+          <UsageGraph src={path} />
+        ))}
+      </main>
+    </Layout>
+  );
+}