diff --git a/web/index.html b/web/index.html index 2bbc209e64f9..7a3ed3194c67 100644 --- a/web/index.html +++ b/web/index.html @@ -3,11 +3,14 @@ Flathub Stats - - - - + + + + + + + @@ -19,29 +22,38 @@ {"description":"Stats of flathub.org","@type":"WebSite","headline":"Flathub Stats","url":"https://klausenbusk.github.io/flathub-stats/","name":"Flathub Stats","@context":"https://schema.org"} - - - - -

+
+ + + + + +

+
- -
+
-
+ - https://github.com/klausenbusk/flathub-stats -
- * An update is sometimes reported as an install + diff --git a/web/script.js b/web/script.js index 75ee897fe781..005f85546d18 100644 --- a/web/script.js +++ b/web/script.js @@ -3,6 +3,8 @@ let refs = new Set(); let stats; let ref; let interval; +/** How many days to group into one data point. @type {number} */ +let granularity; let downloadType; let min = null; @@ -14,6 +16,10 @@ function initChart() { // Configuration options go here options: { + tension: 0.5, + borderCapStyle: "round", + borderJoinStyle: "round", + scales: { x: { type: "time", @@ -65,7 +71,7 @@ function updateDatasets() { let color = chartColors.pop(); datasets[arch] = { label: arch, - backgroundColor: Chart.helpers.color(color).alpha(0.5).rgbString(), + backgroundColor: Chart.helpers.color(color).alpha(0.2).rgbString(), borderColor: color, fill: true, data: [] @@ -92,13 +98,37 @@ function updateDatasets() { }); } } + + if (granularity > 1) { + for (let arch of Object.keys(datasets)) { + let oldData = datasets[arch].data; + let newData = []; + for (let i = 0; i < oldData.length; i += granularity) { + let sum = 0; + for (let di = 0; di < granularity && i+di < oldData.length; di++) { + sum += oldData[i+di].y; + } + newData.push({ + x: oldData[i].x, + y: sum + }); + } + datasets[arch].data = newData; + } + } + chart.data.datasets = Object.values(datasets); chart.update(); updateBasicStats(); } function updateURL() { - window.location.hash = `#ref=${ref}&interval=${interval}&downloadType=` + encodeURIComponent(downloadType); + const params = new URLSearchParams(); + params.set("ref", ref); + if (interval !== "infinity") params.set("interval", interval); + if (granularity !== 1) params.set("granularity", granularity); + if (downloadType !== "installs+updates") params.set("downloadType", downloadType); + window.location.hash = '#' + params.toString(); } async function refHandler(event) { @@ -115,7 +145,7 @@ async function refHandler(event) { updateURL(); } -function intervalHandler() { +function intervalHandler(event) { interval = event.target.value; if (interval === "infinity") { delete chart.options.scales.x.min; @@ -130,7 +160,13 @@ function intervalHandler() { updateURL(); } -function downloadTypeHandler() { +function granularityHandler(event) { + granularity = parseInt(event.target.value); + updateDatasets(); + updateURL(); +} + +function downloadTypeHandler(event) { downloadType = event.target.value; updateDatasets(); updateURL(); @@ -152,6 +188,7 @@ async function init() { let refElement = document.getElementById("ref"); let intervalSelectElement = document.getElementById("interval-select"); + let granularitySelectElement = document.getElementById("granularity"); let downloadTypeElement = document.getElementById("downloadType"); let params = new URLSearchParams(window.location.hash.substring(1)); @@ -160,6 +197,10 @@ async function init() { intervalSelectElement.value = params.get("interval"); } interval = intervalSelectElement.value; + if (params.has("granularity")) { + granularitySelectElement.value = params.get("granularity"); + } + granularity = parseInt(granularitySelectElement.value); if (params.has("downloadType")) { downloadTypeElement.value = params.get("downloadType"); } @@ -167,6 +208,7 @@ async function init() { refElement.addEventListener("change", refHandler); intervalSelectElement.addEventListener("change", intervalHandler); + granularitySelectElement.addEventListener("change", granularityHandler); downloadTypeElement.addEventListener("change", downloadTypeHandler); await refHandler({target: {value: refElement.value}}); diff --git a/web/style.css b/web/style.css new file mode 100644 index 000000000000..b8df81a23652 --- /dev/null +++ b/web/style.css @@ -0,0 +1,29 @@ +html { + color-scheme: light dark; +} +html, body { + height: 100%; + margin: 0; + padding: 0; +} +body { + display: flex; + flex-flow: column nowrap; +} +main { + display: flex; + flex: 0 1 100%; + align-items: center; + justify-content: center; +} +main canvas { + max-width: 100%; + max-height: 100%; +} + +header, +footer { + flex: 0 0 auto; + background: rgba(100, 100, 100, 0.1); + padding: 1rem; +}