@pb33f/cowboy-components 0.6.6 → 0.7.0

package/dist/components/rodeo/npm/download-statistic.js

@@ -0,0 +1,634 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, queryAll, state } from "lit/decorators.js";
+import { html } from "lit";
+import { Colorful } from "../../charts/chart-colors.js";
+import { RodeoService } from "../../../services/rodeo-service.js";
+import '../../charts/beefy-chart';
+import '../../charts/doughnut-chart.js';
+let RodeoDownloadStatistics = class RodeoDownloadStatistics extends Colorful {
+    constructor() {
+        super();
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        Promise.all([
+            RodeoService.getNpmStatistics("@quobix/vacuum"),
+            RodeoService.getNpmStatistics("@pb33f/wiretap"),
+            RodeoService.getNpmStatistics("@pb33f/openapi-changes"),
+            RodeoService.getGithubStatistics("pb33f/openapi-changes", true),
+            RodeoService.getGithubStatistics("daveshanley/vacuum"),
+            RodeoService.getGithubStatistics("pb33f/wiretap", true),
+            RodeoService.getGithubCloneStatistics("daveshanley/vacuum"),
+            RodeoService.getGithubCloneStatistics("pb33f/libopenapi"),
+            RodeoService.getGithubCloneStatistics("pb33f/libopenapi-validator"),
+            RodeoService.getGithubCloneStatistics("pb33f/openapi-changes"),
+            RodeoService.getGithubCloneStatistics("pb33f/wiretap"),
+            RodeoService.getGithubStars("daveshanley/vacuum"),
+            RodeoService.getGithubStars("pb33f/libopenapi"),
+            RodeoService.getGithubStars("pb33f/openapi-changes"),
+            RodeoService.getGithubStars("pb33f/libopenapi-validator"),
+            RodeoService.getGithubStars("pb33f/wiretap"),
+            RodeoService.getGithubStars("pb33f/doctor"),
+            RodeoService.getGithubStars("pb33f/saddlebag-js"),
+            RodeoService.getDockerPulls("dshanley/vacuum"),
+            RodeoService.getDockerPulls("pb33f/openapi-changes"),
+            RodeoService.getDockerPulls("pb33f/wiretap"),
+        ]).then((stats) => {
+            this.vacuumStatistics = stats[0];
+            this.wiretapStatistics = stats[1];
+            this.openapiChangesStatistics = stats[2];
+            this.changesGithubTotal = stats[3];
+            this.vacuumGithubTotal = stats[4];
+            this.wiretapGithubTotal = stats[5];
+            this.vacuumClones = stats[6];
+            this.libopenapiClones = stats[7];
+            this.libopenapiValidatorClones = stats[8];
+            this.changesClones = stats[9];
+            this.wiretapClones = stats[10];
+            this.vacuumStars = stats[11];
+            this.libopenapiStars = stats[12];
+            this.changesStars = stats[13];
+            this.libopenapiValidatorStars = stats[14];
+            this.wiretapStars = stats[15];
+            this.doctorStars = stats[16];
+            this.saddlebagStars = stats[17];
+            this.vacuumDockerPulls = stats[18];
+            this.changesDockerPulls = stats[19];
+            this.wiretapDockerPulls = stats[20];
+        });
+    }
+    calculateStatistics(stats) {
+        let total = 0;
+        let highestIndex = 0;
+        let peak = 0;
+        for (let i = 0; i < stats.datasets[0].data.length; i++) {
+            total += stats?.datasets[0].data[i];
+            if (stats.datasets[0].data[i] > peak) {
+                highestIndex = i;
+                peak = stats.datasets[0].data[i];
+            }
+        }
+        let highestDate = stats?.labels[highestIndex];
+        return {
+            total: total,
+            peak: peak,
+            peakDate: highestDate,
+        };
+    }
+    composeStarHistory() {
+        // vacuum is the oldest, so we use that as our master list.
+        this.starHistory = {
+            labels: this.vacuumStars.labels,
+            datasets: this.vacuumStars.datasets,
+        };
+        this.starHistory.datasets.forEach((dataset) => {
+            dataset.borderColor = this.primary;
+            dataset.label = "vacuum";
+        });
+        let diff = this.vacuumStars.labels.length - this.libopenapiStars.labels.length;
+        let zeroes = new Array(diff).fill(0);
+        this.libopenapiStars.datasets[0].data.unshift(...zeroes);
+        diff = this.vacuumStars.labels.length - this.changesStars.labels.length;
+        zeroes = new Array(diff).fill(0);
+        this.changesStars.datasets[0].data.unshift(...zeroes);
+        // libopenapi-validator started later, so the dates are different, we need to pad the left hand side of the array
+        diff = this.vacuumStars.labels.length - this.libopenapiValidatorStars.labels.length;
+        zeroes = new Array(diff).fill(0);
+        this.libopenapiValidatorStars.datasets[0].data.unshift(...zeroes);
+        diff = this.vacuumStars.labels.length - this.wiretapStars.labels.length;
+        zeroes = new Array(diff).fill(0);
+        this.wiretapStars.datasets[0].data.unshift(...zeroes);
+        diff = this.vacuumStars.labels.length - this.doctorStars.labels.length;
+        zeroes = new Array(diff).fill(0);
+        this.doctorStars.datasets[0].data.unshift(...zeroes);
+        diff = this.vacuumStars.labels.length - this.saddlebagStars.labels.length;
+        zeroes = new Array(diff).fill(0);
+        this.saddlebagStars.datasets[0].data.unshift(...zeroes);
+        this.libopenapiStars.datasets.forEach((dataset) => {
+            dataset.borderColor = this.secondary;
+            dataset.label = "libopenapi";
+        });
+        this.changesStars.datasets.forEach((dataset) => {
+            dataset.borderColor = this.color1;
+            dataset.label = "openapi-changes";
+        });
+        this.libopenapiValidatorStars.datasets.forEach((dataset) => {
+            dataset.borderColor = this.color2;
+            dataset.label = "libopenapi-validator";
+        });
+        this.wiretapStars.datasets.forEach((dataset) => {
+            dataset.borderColor = this.color4;
+            dataset.label = "wiretap";
+        });
+        this.doctorStars.datasets.forEach((dataset) => {
+            dataset.borderColor = this.color3;
+            dataset.label = "libdoctor";
+        });
+        this.saddlebagStars.datasets.forEach((dataset) => {
+            dataset.borderColor = this.color5;
+            dataset.label = "saddlebag";
+        });
+        this.starHistory.datasets.push(...this.libopenapiStars.datasets);
+        this.starHistory.datasets.push(...this.changesStars.datasets);
+        this.starHistory.datasets.push(...this.libopenapiValidatorStars.datasets);
+        this.starHistory.datasets.push(...this.wiretapStars.datasets);
+        this.starHistory.datasets.push(...this.doctorStars.datasets);
+        this.starHistory.datasets.push(...this.saddlebagStars.datasets);
+        let total = 0;
+        this.starHistory.datasets.forEach((dataset) => {
+            total = total + dataset.data[dataset.data.length - 1];
+        });
+        return total;
+    }
+    render() {
+        if (this.vacuumStatistics === undefined && this.wiretapStatistics === undefined && this.openapiChangesStatistics === undefined) {
+            return html `loading chart`;
+        }
+        const vacuumNpmDownloads = [
+            {
+                label: "downloads",
+                data: this.vacuumStatistics?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const vacuumStatsSummary = this.calculateStatistics(this.vacuumStatistics);
+        const wiretapNpmDownloads = [
+            {
+                label: "downloads",
+                data: this.wiretapStatistics?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const wiretapStatsSummary = this.calculateStatistics(this.wiretapStatistics);
+        const changesNpmDownloads = [
+            {
+                label: "downloads",
+                data: this.openapiChangesStatistics?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const changesStatsSummary = this.calculateStatistics(this.openapiChangesStatistics);
+        const vacuumGithubDownloads = [
+            {
+                label: "downloads",
+                data: this.vacuumGithubTotal?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const vacuumGithubStatsSummary = this.calculateStatistics(this.vacuumGithubTotal);
+        const changesGithubDownloads = [
+            {
+                label: "downloads",
+                data: this.changesGithubTotal?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const changesGithubStatsSummary = this.calculateStatistics(this.changesGithubTotal);
+        const wiretapGithubDownloads = [
+            {
+                label: "downloads",
+                data: this.wiretapGithubTotal?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const wiretapGithubStatsSummary = this.calculateStatistics(this.wiretapGithubTotal);
+        const npmDownloads = vacuumStatsSummary.total + changesStatsSummary.total + wiretapStatsSummary.total;
+        const githubDownloads = vacuumGithubStatsSummary.total + changesGithubStatsSummary.total + wiretapGithubStatsSummary.total;
+        const npmVsGithubData = [npmDownloads, githubDownloads];
+        const npmVsGithubLabels = ['NPM', "Github"];
+        const splitPie = [
+            {
+                labels: npmVsGithubLabels,
+                data: npmVsGithubData,
+            }
+        ];
+        const vacuumGithubClones = [
+            {
+                label: "clones",
+                data: this.vacuumClones?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const vacuumGithubClonesSummary = this.calculateStatistics(this.vacuumClones);
+        const libopenapiGithubClones = [
+            {
+                label: "clones",
+                data: this.libopenapiClones?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const libopenapiGithubClonesSummary = this.calculateStatistics(this.libopenapiClones);
+        const libopenapiValidatorGithubClones = [
+            {
+                label: "clones",
+                data: this.libopenapiValidatorClones?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const libopenapiValidatorGithubClonesSummary = this.calculateStatistics(this.libopenapiValidatorClones);
+        const changesGithubClones = [
+            {
+                label: "clones",
+                data: this.changesClones?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const changesGithubClonesSummary = this.calculateStatistics(this.changesClones);
+        const wiretapGithubClones = [
+            {
+                label: "clones",
+                data: this.wiretapClones?.datasets[0].data,
+                borderColor: this.primary,
+            }
+        ];
+        const wiretapGithubClonesSummary = this.calculateStatistics(this.wiretapClones);
+        const totalClones = vacuumGithubClonesSummary.total + libopenapiGithubClonesSummary.total +
+            libopenapiValidatorGithubClonesSummary.total + changesGithubClonesSummary.total + wiretapGithubClonesSummary.total;
+        //
+        const totalStars = this.composeStarHistory();
+        const otherStarCount = (this.starHistory.datasets[3].data[this.starHistory.datasets[3].data.length - 1]) +
+            (this.starHistory.datasets[4].data[this.starHistory.datasets[4].data.length - 1]);
+        const dockerPulls = [
+            {
+                label: "vacuum",
+                data: this.vacuumDockerPulls?.datasets[0].data,
+                borderColor: this.primary,
+                backgroundColor: this.primary,
+            },
+            {
+                label: "openapi-changes",
+                data: this.changesDockerPulls?.datasets[0].data,
+                borderColor: this.secondary,
+                backgroundColor: this.secondary,
+            },
+            {
+                label: "wiretap",
+                data: this.wiretapDockerPulls?.datasets[0].data,
+                borderColor: this.tertiary,
+                backgroundColor: this.tertiary,
+            },
+        ];
+        const totalDockerPulls = dockerPulls[0].data.reduce((a, b) => a + b, 0) +
+            dockerPulls[1].data.reduce((a, b) => a + b, 0) +
+            dockerPulls[2].data.reduce((a, b) => a + b, 0);
+        return html `
+
+
+
+
+            <div style="display: flex; width: 600px;">
+
+                <pb33f-rodeo-statistic title="Total NPM Downloads"
+                                       value="${npmDownloads}"></pb33f-rodeo-statistic>
+
+                <pb33f-rodeo-statistic title="Total Github Downloads"
+                                       value="${githubDownloads}"></pb33f-rodeo-statistic>
+
+                <pb33f-rodeo-statistic title="Repo Clones last 14 days"
+                                       value="${totalClones}"></pb33f-rodeo-statistic>
+
+                <pb33f-rodeo-statistic title="Github Stars"
+                                       value="${totalStars}"></pb33f-rodeo-statistic>
+
+                <pb33f-rodeo-statistic title="Docker Pulls"
+                                       value="${totalDockerPulls}"></pb33f-rodeo-statistic>
+
+                
+
+
+            </div>
+            <div style="display: grid; grid-template-columns: 850px 850px ">
+
+               
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart legend stepSize=5 width="600" title="pb33f github stars over time"
+                                 .datasets=${this.starHistory.datasets}
+                                 .labels="${this.starHistory?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="vacuum"
+                                                   value="${this.starHistory.datasets[0].data[this.starHistory.datasets[0].data.length - 1]}"></pb33f-rodeo-statistic>
+                            <pb33f-rodeo-statistic small title="libopenapi"
+                                                   value="${this.starHistory.datasets[1].data[this.starHistory.datasets[1].data.length - 1]}"></pb33f-rodeo-statistic>
+                            <pb33f-rodeo-statistic small title="openapi-changes"
+                                                   value="${this.starHistory.datasets[2].data[this.starHistory.datasets[2].data.length - 1]}"></pb33f-rodeo-statistic>
+                            <pb33f-rodeo-statistic small title="wiretap"
+                                                   value="${this.starHistory.datasets[4].data[this.starHistory.datasets[4].data.length - 1]}"></pb33f-rodeo-statistic>
+                            <pb33f-rodeo-statistic small title="Other"
+                                                   value="${otherStarCount}"></pb33f-rodeo-statistic>
+
+                        </div>
+                    </div>
+                </div>
+
+
+                <div style="display: flex; width: 600px;">
+                    <pb33f-chart stepSize=1000 width=600 title="vacuum NPM Downloads by week"
+                                 .datasets=${vacuumNpmDownloads}
+                                 .labels="${this.vacuumStatistics?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total NPM Downloads"
+                                                   value="${vacuumStatsSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="Peak Per Week"
+                                                   value="${vacuumStatsSummary.peak}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="Peak Downloads Date"
+                                                   label="${vacuumStatsSummary.peakDate}"></pb33f-rodeo-statistic>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="display: flex; width: 600px;">
+                    <pb33f-chart stepSize=1000 width=600 title="openapi-changes NPM Downloads by week"
+                                 .datasets=${changesNpmDownloads}
+                                 .labels="${this.openapiChangesStatistics?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total NPM Downloads"
+                                                   value="${changesStatsSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="Peak Per Week"
+                                                   value="${changesStatsSummary.peak}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="Peak Downloads Date"
+                                                   label="${changesStatsSummary.peakDate}"></pb33f-rodeo-statistic>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="display: flex; width: 600px;">
+                    <pb33f-chart width=600 title="wiretap NPM Downloads by week" .datasets=${wiretapNpmDownloads}
+                                 .labels="${this.wiretapStatistics?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total NPM Downloads"
+                                                   value="${wiretapStatsSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="Peak Per Week"
+                                                   value="${wiretapStatsSummary.peak}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="Peak Downloads Date"
+                                                   label="${wiretapStatsSummary.peakDate}"></pb33f-rodeo-statistic>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart chartType="bar" legend stepSize=5 width=600 title="docker image pulls"
+                                 .datasets=${dockerPulls}
+                                 .labels="${this.vacuumDockerPulls?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="vacuum Stars"
+                                                   value="${this.starHistory.datasets[0].data[this.starHistory.datasets[0].data.length - 1]}"></pb33f-rodeo-statistic>
+
+                        </div>
+                    </div>
+                </div>
+
+
+
+                <div style="display: flex; width: 600px;">
+                    <pb33f-chart width=600 title="vacuum github downloads by version"
+                                 .datasets=${vacuumGithubDownloads}
+                                 .labels="${this.vacuumGithubTotal?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total Downloads"
+                                                   value="${vacuumGithubStatsSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+
+                        <div>
+                            <pb33f-rodeo-statistic small title="Most Downloaded"
+                                                   label="${vacuumGithubStatsSummary.peakDate}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="${vacuumGithubStatsSummary.peakDate} downloads"
+                                                   value="${vacuumGithubStatsSummary.peak}"></pb33f-rodeo-statistic>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div style="display: flex; width: 600px;">
+                    <pb33f-chart width=600 title="openapi-changes github downloads by version"
+                                 .datasets=${changesGithubDownloads}
+                                 .labels="${this.changesGithubTotal?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total Downloads"
+                                                   value="${changesGithubStatsSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="Most Downloaded"
+                                                   label="${changesGithubStatsSummary.peakDate}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="${changesGithubStatsSummary.peakDate} downloads"
+                                                   value="${changesGithubStatsSummary.peak}"></pb33f-rodeo-statistic>
+                        </div>
+                    </div>
+                </div>
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart stepSize=500 width=600 title="wiretap github downloads by version"
+                                 .datasets=${wiretapGithubDownloads}
+                                 .labels="${this.wiretapGithubTotal?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total Downloads"
+                                                   value="${wiretapGithubStatsSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+
+                        <div>
+                            <pb33f-rodeo-statistic small title="Most Downloaded"
+                                                   label="${wiretapGithubStatsSummary.peakDate}"></pb33f-rodeo-statistic>
+                        </div>
+                        <div>
+                            <pb33f-rodeo-statistic small title="${wiretapGithubStatsSummary.peakDate} downloads"
+                                                   value="${wiretapGithubStatsSummary.peak}"></pb33f-rodeo-statistic>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart width=600 title="vacuum repository clones over the last 14 days"
+                                 .datasets=${vacuumGithubClones}
+                                 .labels="${this.vacuumClones?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total clones"
+                                                   value="${vacuumGithubClonesSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart width=600 title="libopenapi repository clones over the last 14 days"
+                                 .datasets=${libopenapiGithubClones}
+                                 .labels="${this.libopenapiClones?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total clones"
+                                                   value="${libopenapiGithubClonesSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart width=600 title="libopenapi-validator repository clones over the last 14 days"
+                                 .datasets=${libopenapiValidatorGithubClones}
+                                 .labels="${this.libopenapiValidatorClones?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total clones"
+                                                   value="${libopenapiValidatorGithubClonesSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+
+                    </div>
+                </div>
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart width=600 title="openapi-changes repository clones over the last 14 days"
+                                 .datasets=${changesGithubClones}
+                                 .labels="${this.changesClones?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total clones"
+                                                   value="${changesGithubClonesSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+
+                    </div>
+                </div>
+
+
+                <div style="display: flex; padding-bottom: 30px; width: 600px;">
+                    <pb33f-chart width=600 title="wiretap repository clones over the last 14 days"
+                                 .datasets=${wiretapGithubClones}
+                                 .labels="${this.wiretapClones?.labels}"></pb33f-chart>
+
+                    <div style="padding-top: 20px;">
+                        <div>
+                            <pb33f-rodeo-statistic small title="Total clones"
+                                                   value="${wiretapGithubClonesSummary.total}"></pb33f-rodeo-statistic>
+                        </div>
+
+                    </div>
+                </div>
+                
+                
+            </div>
+            
+
+
+
+        `;
+        /*
+
+
+
+
+
+
+         */
+    }
+};
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "vacuumStatistics", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "wiretapStatistics", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "openapiChangesStatistics", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "vacuumGithubTotal", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "changesGithubTotal", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "wiretapGithubTotal", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "vacuumClones", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "libopenapiClones", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "libopenapiValidatorClones", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "changesClones", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "wiretapClones", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "vacuumStars", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "libopenapiStars", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "libopenapiValidatorStars", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "wiretapStars", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "changesStars", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "doctorStars", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "saddlebagStars", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "vacuumDockerPulls", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "changesDockerPulls", void 0);
+__decorate([
+    state()
+], RodeoDownloadStatistics.prototype, "wiretapDockerPulls", void 0);
+__decorate([
+    queryAll('pb33f-chart')
+], RodeoDownloadStatistics.prototype, "charts", void 0);
+RodeoDownloadStatistics = __decorate([
+    customElement('pb33f-rodeo-download-statistics')
+], RodeoDownloadStatistics);
+export { RodeoDownloadStatistics };

package/dist/components/rodeo/rodeo-nav.js

@@ -18,6 +18,7 @@ let RodeoNav = class RodeoNav extends LitElement {
             <nav>
                 <ul>
                     <li><a href="/rodeo/roundup/">roundup</a></li>
+                    <li><a href="/rodeo/download-stats/">downloads stats</a></li>
                     <li><a href="/rodeo/users/">patrons</a></li>
                 </ul>
             </nav>

package/dist/components/rodeo/rodeo.d.ts

@@ -19,6 +19,7 @@ export declare class Rodeo extends LitElement {
     private readonly endpoint;
     private authController;
     private roundupComponent;
+    private downloadStatisticsComponent;
     constructor();
     protected connectToBroker(): void;
     whoAmI(): void;