diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index ce5452c8e..8d11f95c1 100644
--- a/.github/workflows/deploy.yml
+++ b/.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
diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
index aa06ea784..549ebdb9a 100644
--- a/.github/workflows/test-deploy.yml
+++ b/.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
diff --git a/.gitignore b/.gitignore
index f11667af8..afccbf824 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,6 @@ yarn-error.log*
deployment
research
+
+# Generated usage graphs
+static/img/usage/*.svg
diff --git a/Makefile b/Makefile
index 14fd87de9..8db343a86 100644
--- a/Makefile
+++ b/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
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 271cffacc..20ec7eef6 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -286,6 +286,10 @@ const config = {
{
title: "More",
items: [
+ {
+ label: "Usage Charts",
+ to: "/usage",
+ },
{
label: "Blog Posts",
to: "/posts",
diff --git a/files/generate_usage.py b/files/generate_usage.py
index 07df49161..ba6c06a4b 100755
--- a/files/generate_usage.py
+++ b/files/generate_usage.py
@@ -7,11 +7,12 @@
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
"""
@@ -19,6 +20,7 @@ def generate_graph(title, data, path, value_text="builds"):
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"""\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,
)
diff --git a/src/components/UsageGraph/index.tsx b/src/components/UsageGraph/index.tsx
new file mode 100644
index 000000000..2ebb87908
--- /dev/null
+++ b/src/components/UsageGraph/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function UsageGraph({ src }) {
+ return (
+
+ );
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 8b3dbad2b..8375fc833 100644
--- a/src/css/custom.css
+++ b/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;
+}
diff --git a/src/pages/usage.tsx b/src/pages/usage.tsx
new file mode 100644
index 000000000..40d310da8
--- /dev/null
+++ b/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 (
+
+
+ {USAGES.map((path) => (
+
+ ))}
+
+
+ );
+}
diff --git a/static/img/usage/.gitkeep b/static/img/usage/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/static/img/usage/copr_build_groups.svg b/static/img/usage/copr_build_groups.svg
deleted file mode 100644
index 482b6052b..000000000
--- a/static/img/usage/copr_build_groups.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file
diff --git a/static/img/usage/koji_build_groups.svg b/static/img/usage/koji_build_groups.svg
deleted file mode 100644
index 50d2034b1..000000000
--- a/static/img/usage/koji_build_groups.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file
diff --git a/static/img/usage/srpm_builds.svg b/static/img/usage/srpm_builds.svg
deleted file mode 100644
index 901e4438f..000000000
--- a/static/img/usage/srpm_builds.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file
diff --git a/static/img/usage/sync_release_runs.svg b/static/img/usage/sync_release_runs.svg
deleted file mode 100644
index 198c2f917..000000000
--- a/static/img/usage/sync_release_runs.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file
diff --git a/static/img/usage/tft_test_run_groups.svg b/static/img/usage/tft_test_run_groups.svg
deleted file mode 100644
index aa0ac192c..000000000
--- a/static/img/usage/tft_test_run_groups.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file
diff --git a/static/img/usage/vm_image_build_targets.svg b/static/img/usage/vm_image_build_targets.svg
deleted file mode 100644
index 1b8a45126..000000000
--- a/static/img/usage/vm_image_build_targets.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
\ No newline at end of file