Merge branch 'main' into JavaScript-Animations

GameLibrary/Pages/Admin/Index.cshtml

@@ -46,32 +46,36 @@
 <div class="row">
     <div class="col-md-6">
         <h2>Game Genres</h2>
-        <canvas id="gameGenresChart"></canvas>
+        <canvas id="gameGenresChart"
+                data-chart-type="pie"
+                data-chart-labels='@Html.Raw(Json.Serialize(Model.GameGenres.Keys))'
+                data-chart-data='@Html.Raw(Json.Serialize(Model.GameGenres.Values))'>
+        </canvas>
     </div>
     <div class="col-md-6">
         <h2>User Activity</h2>
-        <canvas id="userActivityChart"></canvas>
+        <canvas id="userActivityChart"
+                data-chart-type="line"
+                data-chart-label-text="User Activity"
+                data-chart-labels='@Html.Raw(Json.Serialize(Model.UserActivity.Keys))'
+                data-chart-data='@Html.Raw(Json.Serialize(Model.UserActivity.Values))'>
+        </canvas>
     </div>
 </div>
 
 <div class="row">
     <div class="col-md-12">
         <h2>Review Ratings</h2>
-        <canvas id="reviewRatingsChart"></canvas>
+        <canvas id="reviewRatingsChart"
+                data-chart-type="bar"
+                data-chart-label-text="Review Ratings"
+                data-chart-labels='@Html.Raw(Json.Serialize(Model.ReviewRatings.Keys))'
+                data-chart-data='@Html.Raw(Json.Serialize(Model.ReviewRatings.Values))'>
+        </canvas>
     </div>
 </div>
 
 @section Scripts {
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
-    <script src="~/js/charts.min.js" asp-append-version="true"></script>
-
-    <div id="gameGenresLabels" style="display: none;">@Html.Raw(Json.Serialize(Model.GameGenres.Keys))</div>
-    <div id="gameGenresData" style="display: none;">@Html.Raw(Json.Serialize(Model.GameGenres.Values))</div>
-
-    <div id="userActivityLabels" style="display: none;">@Html.Raw(Json.Serialize(Model.UserActivity.Keys))</div>
-    <div id="userActivityData" style="display: none;">@Html.Raw(Json.Serialize(Model.UserActivity.Values))</div>
-
-    <div id="reviewRatingsLabels" style="display: none;">@Html.Raw(Json.Serialize(Model.ReviewRatings.Keys))</div>
-    <div id="reviewRatingsData" style="display: none;">@Html.Raw(Json.Serialize(Model.ReviewRatings.Values))</div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+    <script src="~/js/graphs.min.js"></script>
 }
-

GameLibrary/Pages/Moderator/Index.cshtml

@@ -30,14 +30,16 @@
 <div class="row">
     <div class="col-md-6">
         <h2>Review Ratings</h2>
-        <canvas id="reviewRatingsChart"></canvas>
+        <canvas id="reviewRatingsChart"
+                data-chart-type="bar"
+                data-chart-label-text="Review Ratings"
+                data-chart-labels='@Html.Raw(Json.Serialize(Model.ReviewRatings.Keys))'
+                data-chart-data='@Html.Raw(Json.Serialize(Model.ReviewRatings.Values))'>
+        </canvas>
     </div>
 </div>
 
 @section Scripts {
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
-    <script src="~/js/charts.min.js" asp-append-version="true"></script>
-
-    <div id="reviewRatingsLabels" style="display: none;">@Html.Raw(Json.Serialize(Model.ReviewRatings.Keys))</div>
-    <div id="reviewRatingsData" style="display: none;">@Html.Raw(Json.Serialize(Model.ReviewRatings.Values))</div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+    <script src="~/js/graphs.min.js"></script>
 }

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);
+        }
+    });
+});