From add8ab571ea21319d9c6f588e90021eded46a686 Mon Sep 17 00:00:00 2001 From: Mathias Date: Mon, 16 Dec 2024 01:06:55 +0100 Subject: [PATCH] Fix charts Fix: - There was a naming conflict with chart.js as charts.js conflicted with it, so now it is graphs.js - Incorrect chart min cdn ur Use data attributes for chart initialization. - Each canvas defines its type and data in `data-*` attributes. - All charts now load automatically, reducing repetitive code. --- GameLibrary/Pages/Admin/Index.cshtml | 34 +++++----- GameLibrary/Pages/Moderator/Index.cshtml | 14 ++-- GameLibrary/wwwroot/js/charts.js | 46 ------------- GameLibrary/wwwroot/js/charts.min.js | 1 - GameLibrary/wwwroot/js/graphs.js | 85 ++++++++++++++++++++++++ GameLibrary/wwwroot/js/graphs.min.js | 1 + 6 files changed, 113 insertions(+), 68 deletions(-) delete mode 100644 GameLibrary/wwwroot/js/charts.js delete mode 100644 GameLibrary/wwwroot/js/charts.min.js create mode 100644 GameLibrary/wwwroot/js/graphs.js create mode 100644 GameLibrary/wwwroot/js/graphs.min.js diff --git a/GameLibrary/Pages/Admin/Index.cshtml b/GameLibrary/Pages/Admin/Index.cshtml index e6a0e33..9e86d3f 100644 --- a/GameLibrary/Pages/Admin/Index.cshtml +++ b/GameLibrary/Pages/Admin/Index.cshtml @@ -46,32 +46,36 @@

Game Genres

- + +

User Activity

- + +

Review Ratings

- + +
@section Scripts { - - - - - - - - - - - + + } - diff --git a/GameLibrary/Pages/Moderator/Index.cshtml b/GameLibrary/Pages/Moderator/Index.cshtml index 18acaeb..77d55bc 100644 --- a/GameLibrary/Pages/Moderator/Index.cshtml +++ b/GameLibrary/Pages/Moderator/Index.cshtml @@ -30,14 +30,16 @@

Review Ratings

- + +
@section Scripts { - - - - - + + } diff --git a/GameLibrary/wwwroot/js/charts.js b/GameLibrary/wwwroot/js/charts.js deleted file mode 100644 index bad4293..0000000 --- a/GameLibrary/wwwroot/js/charts.js +++ /dev/null @@ -1,46 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - // Game Genres Chart - let gameGenresCtx = document.getElementById('gameGenresChart').getContext('2d'); - let gameGenresChart = new Chart(gameGenresCtx, { - type: 'pie', - data: { - labels: JSON.parse(document.getElementById('gameGenresLabels').textContent), - datasets: [{ - data: JSON.parse(document.getElementById('gameGenresData').textContent), - backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'] - }] - } - }); - - // User Activity Chart - let userActivityCtx = document.getElementById('userActivityChart').getContext('2d'); - let userActivityChart = new Chart(userActivityCtx, { - type: 'line', - data: { - labels: JSON.parse(document.getElementById('userActivityLabels').textContent), - datasets: [{ - label: 'User Activity', - data: JSON.parse(document.getElementById('userActivityData').textContent), - backgroundColor: 'rgba(75, 192, 192, 0.2)', - borderColor: 'rgba(75, 192, 192, 1)', - borderWidth: 1 - }] - } - }); - - // Review Ratings Chart - let reviewRatingsCtx = document.getElementById('reviewRatingsChart').getContext('2d'); - let reviewRatingsChart = new Chart(reviewRatingsCtx, { - type: 'bar', - data: { - labels: JSON.parse(document.getElementById('reviewRatingsLabels').textContent), - datasets: [{ - label: 'Review Ratings', - data: JSON.parse(document.getElementById('reviewRatingsData').textContent), - backgroundColor: 'rgba(255, 99, 132, 0.2)', - borderColor: 'rgba(255, 99, 132, 1)', - borderWidth: 1 - }] - } - }); -}); diff --git a/GameLibrary/wwwroot/js/charts.min.js b/GameLibrary/wwwroot/js/charts.min.js deleted file mode 100644 index 75fece9..0000000 --- a/GameLibrary/wwwroot/js/charts.min.js +++ /dev/null @@ -1 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { let e = document.getElementById("gameGenresChart").getContext("2d"); new Chart(e, { type: "pie", data: { labels: JSON.parse(document.getElementById("gameGenresLabels").textContent), datasets: [{ data: JSON.parse(document.getElementById("gameGenresData").textContent), backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40"] }] } }); let t = document.getElementById("userActivityChart").getContext("2d"); new Chart(t, { type: "line", data: { labels: JSON.parse(document.getElementById("userActivityLabels").textContent), datasets: [{ label: "User Activity", data: JSON.parse(document.getElementById("userActivityData").textContent), backgroundColor: "rgba(75, 192, 192, 0.2)", borderColor: "rgba(75, 192, 192, 1)", borderWidth: 1 }] } }); let a = document.getElementById("reviewRatingsChart").getContext("2d"); new Chart(a, { type: "bar", data: { labels: JSON.parse(document.getElementById("reviewRatingsLabels").textContent), datasets: [{ label: "Review Ratings", data: JSON.parse(document.getElementById("reviewRatingsData").textContent), backgroundColor: "rgba(255, 99, 132, 0.2)", borderColor: "rgba(255, 99, 132, 1)", borderWidth: 1 }] } }) }); diff --git a/GameLibrary/wwwroot/js/graphs.js b/GameLibrary/wwwroot/js/graphs.js new file mode 100644 index 0000000..6d41d5e --- /dev/null +++ b/GameLibrary/wwwroot/js/graphs.js @@ -0,0 +1,85 @@ +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('canvas[data-chart-type]').forEach(canvas => { + const type = canvas.dataset.chartType; + const labels = JSON.parse(canvas.dataset.chartLabels || '[]'); + const data = JSON.parse(canvas.dataset.chartData || '[]'); + const labelText = canvas.dataset.chartLabelText || 'Data'; + const backgroundColors = canvas.dataset.chartBackgroundcolors ? JSON.parse(canvas.dataset.chartBackgroundcolors) : null; + const borderColor = canvas.dataset.chartBordercolor || 'rgba(255, 99, 132, 1)'; + const backgroundColor = canvas.dataset.chartBackgroundcolor || 'rgba(255, 99, 132, 0.2)'; + const ctx = canvas.getContext('2d'); + let config; + + switch (type) { + case 'bar': + config = { + type: 'bar', + data: { + labels: labels, + datasets: [{ + label: labelText, + data: data, + backgroundColor, + borderColor, + borderWidth: 1 + }] + }, + options: { + responsive: true, + plugins: { + legend: { position: 'top' }, + title: { display: true, text: labelText + ' Chart' } + } + } + }; + break; + case 'pie': + config = { + type: 'pie', + data: { + labels: labels, + datasets: [{ + data: data, + backgroundColor: backgroundColors || ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'] + }] + }, + options: { + responsive: true, + plugins: { + legend: { position: 'top' }, + title: { display: true, text: labelText + ' Chart' } + } + } + }; + break; + case 'line': + config = { + type: 'line', + data: { + labels: labels, + datasets: [{ + label: labelText, + data: data, + backgroundColor: backgroundColor || 'rgba(75, 192, 192, 0.2)', + borderColor: borderColor || 'rgba(75, 192, 192, 1)', + borderWidth: 1 + }] + }, + options: { + responsive: true, + plugins: { + legend: { position: 'top' }, + title: { display: true, text: labelText + ' Chart' } + } + } + }; + break; + default: + console.warn('Unknown chart type:', type); + } + + if (config) { + _ = new Chart(ctx, config); + } + }); +}); diff --git a/GameLibrary/wwwroot/js/graphs.min.js b/GameLibrary/wwwroot/js/graphs.min.js new file mode 100644 index 0000000..4eb8e6a --- /dev/null +++ b/GameLibrary/wwwroot/js/graphs.min.js @@ -0,0 +1 @@ +document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll("canvas[data-chart-type]").forEach(a => { let t = a.dataset.chartType, e = JSON.parse(a.dataset.chartLabels || "[]"), r = JSON.parse(a.dataset.chartData || "[]"), o = a.dataset.chartLabelText || "Data", s = a.dataset.chartBackgroundcolors ? JSON.parse(a.dataset.chartBackgroundcolors) : null, d = a.dataset.chartBordercolor || "rgba(255, 99, 132, 1)", l = a.dataset.chartBackgroundcolor || "rgba(255, 99, 132, 0.2)", n = a.getContext("2d"), i; switch (t) { case "bar": i = { type: "bar", data: { labels: e, datasets: [{ label: o, data: r, backgroundColor: l, borderColor: d, borderWidth: 1 }] }, options: { responsive: !0, plugins: { legend: { position: "top" }, title: { display: !0, text: o + " Chart" } } } }; break; case "pie": i = { type: "pie", data: { labels: e, datasets: [{ data: r, backgroundColor: s || ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF", "#FF9F40"] }] }, options: { responsive: !0, plugins: { legend: { position: "top" }, title: { display: !0, text: o + " Chart" } } } }; break; case "line": i = { type: "line", data: { labels: e, datasets: [{ label: o, data: r, backgroundColor: l || "rgba(75, 192, 192, 0.2)", borderColor: d || "rgba(75, 192, 192, 1)", borderWidth: 1 }] }, options: { responsive: !0, plugins: { legend: { position: "top" }, title: { display: !0, text: o + " Chart" } } } }; break; default: console.warn("Unknown chart type:", t) }i && (_ = new Chart(n, i)) }) });