Skip to content

Commit

Permalink
Merge pull request #21 from adil192/master
Browse files Browse the repository at this point in the history 
Add granularity selection, retheme, dark mode, and fixed sizing issues
  • Loading branch information
@klausenbusk
klausenbusk committed Apr 7, 2024
2 parents b02b482 + 796f9e6 commit 28196a5
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 29 deletions.
62 changes: 37 additions & 25 deletions web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@
<head>
<meta charset="UTF-8">
<title>Flathub Stats</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" integrity="sha512-+H4iLjY3JsKiF2V6N366in5IQHj2uEsGV7Pp/GRcm0fn76aPAk5V8xB6n8fQhhSonTqTXs/klFz4D0GIn6Br9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js" integrity="sha512-oh5t+CdSBsaVVAvxcZKy3XJdP7ZbYUBSRCXDTVn0ODewMDDNnELsrG9eDm8rVZAQg7RsDD/8K3MjPAFB13o6eA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- https://flaviocopes.com/javascript-async-defer/-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js" integrity="sha512-QoJS4DOhdmG8kbbHkxmB/rtPdN62cGWXAdAFWWJPvUFF1/zxcPSdAnn4HhYZSIlVoLVEJ0LesfNlusgm2bPfnA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.1/chartjs-adapter-moment.min.js" integrity="sha512-hVy4KxCKgnXi2ok7rlnlPma4JHXI1VPQeempoaclV1GwRHrDeaiuS1pI6DVldaj5oh6Opy2XJ2CTljQLPkaMrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- https://flaviocopes.com/javascript-async-defer/-->
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">

<meta property="og:type" content="website">
<meta property="og:title" content="Flathub Stats">
<meta property="og:locale" content="en_US">
Expand All @@ -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"}</script>
</head>
<body>
<input autocomplete="off" list="refs" id="ref" style="width: 35ch">
<datalist id="refs"></datalist>
<select autocomplete="off" id="interval-select">
<option value="infinity">∞</option>
<option value="365">365 days</option>
<option value="90">90 days</option>
<option value="30">30 days</option>
<option value="14">14 days</option>
</select>
<select autocomplete="off" id="downloadType">
<option value="installs+updates">installs* + updates</option>
<option value="installs">installs*</option>
<option value="updates">updates</option>
</select>
<p style="display:inline" id="basic-stats"></p>
<header>
<input autocomplete="off" list="refs" id="ref" style="width: 35ch">
<datalist id="refs"></datalist>
<select autocomplete="off" id="interval-select">
<option value="infinity">∞</option>
<option value="365">365 days</option>
<option value="90">90 days</option>
<option value="30">30 days</option>
<option value="14">14 days</option>
</select>
<select autocomplete="off" id="granularity">
<option value="1">per day</option>
<option value="2">per 2 days</option>
<option value="3">per 3 days</option>
<option value="7">per week</option>
</select>
<select autocomplete="off" id="downloadType">
<option value="installs+updates">installs* + updates</option>
<option value="installs">installs*</option>
<option value="updates">updates</option>
</select>
<p style="display:inline" id="basic-stats"></p>
</header>

<!-- max-width is ~2:1 (chart aspect ratio) to height, so canvas doesn't get too tall -->
<div style="max-width: 190vh; margin: 0 auto;">
<main>
<canvas id="chart"></canvas>
</div>
</main>

<a href="https://github.com/klausenbusk/flathub-stats" target="_blank" rel="noreferrer">https://github.com/klausenbusk/flathub-stats</a>
<br>
<small>* An update is sometimes <a href="https://github.com/flathub/flathub/issues/177#issuecomment-650361779" target="_blank" rel="noreferrer">reported as an install</a></small>
<footer>
<a href="https://github.com/klausenbusk/flathub-stats" target="_blank" rel="noreferrer">https://github.com/klausenbusk/flathub-stats</a>
<br>
<small>* An update is sometimes <a href="https://github.com/flathub/flathub/issues/177#issuecomment-650361779" target="_blank" rel="noreferrer">reported as an install</a></small>
</footer>
</body>
</html>
50 changes: 46 additions & 4 deletions web/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -14,6 +16,10 @@ function initChart() {

// Configuration options go here
options: {
tension: 0.5,
borderCapStyle: "round",
borderJoinStyle: "round",

scales: {
x: {
type: "time",
Expand Down Expand Up @@ -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: []
Expand All @@ -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) {
Expand All @@ -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;
Expand All @@ -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();
Expand All @@ -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));

Expand All @@ -160,13 +197,18 @@ 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");
}
downloadType = downloadTypeElement.value;

refElement.addEventListener("change", refHandler);
intervalSelectElement.addEventListener("change", intervalHandler);
granularitySelectElement.addEventListener("change", granularityHandler);
downloadTypeElement.addEventListener("change", downloadTypeHandler);

await refHandler({target: {value: refElement.value}});
Expand Down
29 changes: 29 additions & 0 deletions web/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 28196a5

Please sign in to comment.