Update chart.js

svelte/package.json

@@ -8,7 +8,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "@types/jsmediatags": "^3.9.3",
     "rollup": "^2.3.4",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^6.0.0",
@@ -16,7 +17,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
-    "chart.js": "^2.8.0",
+    "chart.js": "^3.6.2",
     "sirv-cli": "^1.0.0"
   }
 }

svelte/src/admin_panel/Home.svelte

@@ -5,7 +5,6 @@ import Chart from "../util/Chart.svelte";
 
 let graphViews
 let graphBandwidth
-let graphBandwidthPaid
 let graphTimeout = null
 
 let start_time = ""
@@ -43,12 +42,10 @@ const loadGraph = (minutes, interval, live) => {
 		graphViews.chart().data.labels = resp.views.timestamps;
 		graphViews.chart().data.datasets[0].data = resp.views.amounts;
 		graphBandwidth.chart().data.labels = resp.views.timestamps;
-		graphBandwidth.chart().data.datasets[0].data = resp.bandwidth.amounts;
-		graphBandwidthPaid.chart().data.labels = resp.views.timestamps;
-		graphBandwidthPaid.chart().data.datasets[0].data = resp.bandwidth_paid.amounts;
+		graphBandwidth.chart().data.datasets[0].data = resp.bandwidth.amounts
+		graphBandwidth.chart().data.datasets[1].data = resp.bandwidth_paid.amounts
 		graphViews.update()
 		graphBandwidth.update()
-		graphBandwidthPaid.update()
 
 		start_time = resp.views.timestamps[0]
 		end_time = resp.views.timestamps.slice(-1)[0];
@@ -109,6 +106,33 @@ function getStats(order) {
 
 let statsInterval = null
 onMount(() => {
+	// Prepare chart datasets
+	graphBandwidth.chart().data.datasets = [
+		{
+			label: "Bandwidth (free)",
+			borderWidth: 2,
+			pointRadius: 0,
+			borderColor: "#"+window.style.highlightColor,
+			backgroundColor: "#"+window.style.highlightColor,
+		},
+		{
+			label: "Bandwidth (premium)",
+			borderWidth: 2,
+			pointRadius: 0,
+			borderColor: "#"+window.style.dangerColor,
+			backgroundColor: "#"+window.style.dangerColor,
+		},
+	];
+	graphViews.chart().data.datasets = [
+		{
+			label: "Views",
+			borderWidth: 2,
+			pointRadius: 0,
+			borderColor: "#"+window.style.highlightColor,
+			backgroundColor: "#"+window.style.highlightColor,
+		},
+	];
+
 	loadGraph(10080, 10, false);
 	getStats("calls")
 	statsInterval = setInterval(() => {
@@ -127,7 +151,7 @@ onDestroy(() => {
 
 <div>
 	<div class="limit_width">
-		<h3>Bandwidth, paid transfers and views</h3>
+		<h3>Bandwidth usage and file views</h3>
 	</div>
 	<div class="highlight_dark" style="margin-bottom: 6px;">
 		<button on:click={() => { loadGraph(1440, 1, true) }}>Day</button>
@@ -140,9 +164,6 @@ onDestroy(() => {
 		<button on:click={() => { loadGraph(1051200, 1440, false) }}>Two Years</button>
 	</div>
 	<Chart bind:this={graphBandwidth} dataType="bytes" label="Bandwidth" />
-	<hr/>
-	<Chart bind:this={graphBandwidthPaid} dataType="bytes" label="Paid bandwidth" />
-	<hr/>
 	<Chart bind:this={graphViews} dataType="number" label="Views" />
 	<div class="highlight_dark">
 		Total usage from {start_time} to {end_time}<br/>

svelte/src/file_viewer/DetailsWindow.svelte

@@ -127,9 +127,9 @@ let update_charts = () => {
 	</table>
 
 	<h2>Downloads</h2>
-	<Chart bind:this={download_chart}></Chart>
+	<Chart bind:this={download_chart} label="Downloads"></Chart>
 	<h2>Views</h2>
-	<Chart bind:this={view_chart}></Chart>
+	<Chart bind:this={view_chart} label="Views"></Chart>
 
 	<p style="text-align: center">
 		Charts rendered by the amazing <a href="https://www.chartjs.org/" target="_blank">Chart.js</a>.

svelte/src/util/Chart.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import { formatDataVolume, formatNumber } from "./Formatting.svelte";
-import { Chart } from "chart.js"
+import { Chart, PointElement, LineElement, LinearScale, CategoryScale, LineController, Filler, Tooltip } from "chart.js"
 
 let chart_element
 let chart_object
@@ -15,16 +15,16 @@ export const update = () => {
 	return chart_object.update()
 }
 
-Chart.defaults.global.defaultFontColor = "#cccccc";
-Chart.defaults.global.defaultFontSize = 15;
-Chart.defaults.global.defaultFontFamily = "system-ui, sans-serif";
-Chart.defaults.global.maintainAspectRatio = false;
-Chart.defaults.global.elements.point.radius = 0;
-Chart.defaults.global.tooltips.mode = "index";
-Chart.defaults.global.tooltips.axis = "x";
-Chart.defaults.global.tooltips.intersect = false;
-Chart.defaults.global.animation.duration = 500;
-Chart.defaults.global.animation.easing = "linear";
+Chart.register(PointElement, LineElement, LinearScale, CategoryScale, LineController, Filler, Tooltip)
+Chart.defaults.color = "#"+window.style.textColor;
+Chart.defaults.font.size = 15;
+Chart.defaults.font.family = "system-ui, sans-serif";
+Chart.defaults.maintainAspectRatio = false;
+Chart.defaults.plugins.tooltip.mode = "index";
+Chart.defaults.plugins.tooltip.axis = "x";
+Chart.defaults.plugins.tooltip.intersect = false;
+Chart.defaults.animation.duration = 500;
+Chart.defaults.animation.easing = "linear";
 
 onMount(() => {
 	chart_object = new Chart(
@@ -35,46 +35,54 @@ onMount(() => {
 				datasets: [
 					{
 						label: label,
-						backgroundColor: "#"+window.style.highlightColor,
 						borderWidth: 0,
-						lineTension: 0,
-						fill: true,
-						yAxisID: "ax_1"
+						pointRadius: 0,
+						fill: 'origin',
+						backgroundColor: "#"+window.style.highlightColor,
 					}
 				]
 			},
 			options: {
 				legend: { display: false },
+				layout: {
+					padding: {
+						left: 4,
+						right: 10,
+					}
+				},
 				scales: {
-					yAxes: [
-						{
-							type: "linear",
+					y: {
+						type: "linear",
+						display: true,
+						position: "left",
+						ticks: {
+							callback: function (value, index, values) {
+								if (dataType == "bytes") {
+									return formatDataVolume(value, 3);
+								}
+								return formatNumber(value, 3);
+							},
+						},
+						beginAtZero: true,
+						grid: {
 							display: true,
-							position: "left",
-							id: "ax_1",
-							ticks: {
-								callback: function (value, index, values) {
-									if (dataType == "bytes") {
-										return formatDataVolume(value, 3);
-									}
-									return formatNumber(value, 3);
-								},
-								beginAtZero: true
-							},
-							gridLines: { display: true },
+							drawBorder: false,
+							color: "#"+window.style.layer3Color,
+						},
+					},
+					x: {
+						display: true,
+						ticks: {
+							sampleSize: 1,
+							padding: 4,
+							minRotation: 0,
+							maxRotation: 0
+						},
+						grid: {
+							display: false,
+							drawBorder: false,
 						}
-					],
-					xAxes: [
-						{
-							ticks: {
-								sampleSize: 1,
-								padding: 4,
-								minRotation: 0,
-								maxRotation: 0
-							},
-							gridLines: { display: false }
-						}
-					]
+					}
 				}
 			}
 		}