w33b/hstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add monthly views chart

Browse Source
This commit is contained in:
w33b
2025-10-08 16:52:40 +02:00
parent 2880547f3e
commit fffa320c08
8 changed files with 144 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
resources/js/stats.js Normal file
View File

@@ -0,0 +1,73 @@
import Chart from 'chart.js/auto';
// Theming
if (localStorage.theme !== 'light') {
Chart.defaults.color = "#ADBABD";
Chart.defaults.borderColor = "rgba(255,255,255,0.1)";
Chart.defaults.backgroundColor = "rgba(255,255,0,0.1)";
Chart.defaults.elements.line.borderColor = "rgba(255,255,0,0.4)";
}
// Get Tags from API
window.axios.get('/v1/monthly-views').then(function (response) {
if (response.status != 200) {
return;
}
const data = {
labels: response.data.map((entry) => { return entry.date }),
datasets: [{
label: 'Views',
fill: false,
backgroundColor: 'rgba(190, 18, 60, 0.3)',
borderColor: 'rgba(190, 18, 60, 1.0)',
cubicInterpolationMode: 'monotone',
data: response.data.map((entry) => { return entry.count }),
}]
}
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Views the last 30 days',
font: {
size: 18
}
},
},
interaction: {
intersect: false,
},
scales: {
x: {
display: true,
title: {
display: true
}
},
y: {
display: true,
title: {
display: true,
text: 'Views'
},
suggestedMin: 0,
suggestedMax: 40000
}
}
},
};
const monthlyViewChart = new Chart(
document.getElementById('monthlyChart'),
config
);
}).catch(function (error) {
console.log(error);
});

17
resources/views/home/stats.blade.php
View File

@@ -4,7 +4,7 @@
<div class="flex justify-center pb-10">
<img src="/images/cropped-HS-1-270x270.webp" class="max-w-[150px]" alt="hstream.moe Logo" />
</div>
<div class="grid md:grid-cols-5 lg:gap-x-12">
<div class="grid md:grid-cols-2 lg:grid-cols-4 lg:gap-x-12">
<div class="mb-12 md:mb-0">
<div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
<i class="fa-solid fa-eye text-3xl"> {{ number_format($viewCount) }}</i>
@@ -14,15 +14,7 @@
</h5>
</div>
<div class="mb-12 md:mb-0">
<div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
<i class="fa-solid fa-calendar-days text-3xl"> {{ number_format($monthlyCount) }}</i>
</div>
<h5 class="text-lg font-medium dark:text-neutral-300">
views the last 30 days
</h5>
</div>
<div class="mb-12 md:mb-0">
<div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
<div class="b-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
<i class="fa-solid fa-video text-3xl"> {{ $episodeCount }}</i>
</div>
<h5 class="text-lg font-medium dark:text-neutral-300">
@@ -46,7 +38,10 @@
</h5>
</div>
</div>
<div class="flex justify-center dark:bg-neutral-950 bg-gray-50 rounded-xl md:m-11 hidden md:block">
<canvas id="monthlyChart"></canvas>
</div>
</section>
<p class="text-center text-black/40 dark:text-white/40">Cached for 60 Minutes</p>
</div>
@vite(['resources/js/stats.js'])
</x-app-layout>