real-time-admin-dashboard added

2025-12-14 06:36:46 +00:00 · 2024-09-29 16:18:44 +02:00
parent 354680f702
commit ef0650f4d5
5 changed files with 431 additions and 0 deletions
--- a/resources/js/electionAdminCharts.js
+++ b/resources/js/electionAdminCharts.js
@@ -0,0 +1,169 @@
+import {Chart} from "chart.js/auto";
+
+export default (livewireComponent) => ({
+    plebs: livewireComponent.entangle('plebs', true),
+    electionConfig: livewireComponent.entangle('electionConfig', true),
+    votes: livewireComponent.entangle('votes', true),
+    charts: {}, // Store chart instances
+
+    hexToRGB(h) {
+        let r = 0;
+        let g = 0;
+        let b = 0;
+        if (h.length === 4) {
+            r = `0x${h[1]}${h[1]}`;
+            g = `0x${h[2]}${h[2]}`;
+            b = `0x${h[3]}${h[3]}`;
+        } else if (h.length === 7) {
+            r = `0x${h[1]}${h[2]}`;
+            g = `0x${h[3]}${h[4]}`;
+            b = `0x${h[5]}${h[6]}`;
+        }
+        return `${+r},${+g},${+b}`;
+    },
+
+    init() {
+        this.createChart('chart_presidency', 'presidency');
+        this.createChart('chart_vice_president', 'vice_president');
+        this.createChart('chart_finances', 'finances');
+        this.createChart('chart_secretary', 'secretary');
+        this.createChart('chart_press_officer', 'press_officer');
+        this.createChart('chart_it_manager', 'it_manager');
+
+        this.$watch('votes', () => {
+            this.createChart('chart_presidency', 'presidency');
+            this.createChart('chart_vice_president', 'vice_president');
+            this.createChart('chart_finances', 'finances');
+            this.createChart('chart_secretary', 'secretary');
+            this.createChart('chart_press_officer', 'press_officer');
+            this.createChart('chart_it_manager', 'it_manager');
+        });
+    },
+
+    createChart(refName, type) {
+        const ctx = this.$refs[refName];
+        if (!ctx) return;
+
+        // Destroy old chart instance if it exists
+        if (this.charts[refName]) {
+            this.charts[refName].destroy();
+        }
+
+        const darkMode = localStorage.getItem('dark-mode') === 'true';
+
+        const textColor = {
+            light: '#9CA3AF',
+            dark: '#6B7280'
+        };
+
+        const gridColor = {
+            light: '#F3F4F6',
+            dark: `rgba(${this.hexToRGB('#374151')}, 0.6)`
+        };
+
+        const tooltipBodyColor = {
+            light: '#6B7280',
+            dark: '#9CA3AF'
+        };
+
+        const tooltipBgColor = {
+            light: '#ffffff',
+            dark: '#374151'
+        };
+
+        const tooltipBorderColor = {
+            light: '#E5E7EB',
+            dark: '#4B5563'
+        };
+
+        const config = this.electionConfig.find(config => config.type === type);
+        const labels = config ? config.candidates.map(candidate => candidate.name) : [];
+        const labelsPubkeys = config ? config.candidates.map(candidate => candidate.pubkey) : [];
+        const data = this.votes.find(vote => vote.type === type);
+        const findVoteCountInDataByLabelsPubkey = data ? labelsPubkeys.map(pubkey => data.votes[pubkey]?.count ?? 0) : labelsPubkeys.map(() => 0);
+        console.log('findVoteCountInDataByLabelsPubkey', findVoteCountInDataByLabelsPubkey);
+
+        // Create new chart instance and store it
+        this.charts[refName] = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: 'Stimmen',
+                        data: findVoteCountInDataByLabelsPubkey,
+                        backgroundColor: '#67BFFF',
+                        hoverBackgroundColor: '#56B1F3',
+                        barPercentage: 0.7,
+                        categoryPercentage: 0.7,
+                        borderRadius: 4,
+                    },
+                ],
+            },
+            options: {
+                layout: {
+                    padding: {
+                        top: 12,
+                        bottom: 16,
+                        left: 20,
+                        right: 20,
+                    },
+                },
+                scales: {
+                    y: {
+                        border: {display: false},
+                        ticks: {
+                            maxTicksLimit: 5,
+                            color: darkMode ? textColor.dark : textColor.light,
+                        },
+                        grid: {
+                            color: darkMode ? gridColor.dark : gridColor.light,
+                        },
+                    },
+                    x: {
+                        border: {display: false},
+                        grid: {display: false},
+                        ticks: {
+                            color: darkMode ? textColor.dark : textColor.light,
+                        },
+                    },
+                },
+                plugins: {
+                    legend: {display: false},
+                    htmlLegend: {containerID: 'dashboard-card-01-legend'},
+                    tooltip: {
+                        bodyColor: darkMode ? tooltipBodyColor.dark : tooltipBodyColor.light,
+                        backgroundColor: darkMode ? tooltipBgColor.dark : tooltipBgColor.light,
+                        borderColor: darkMode ? tooltipBorderColor.dark : tooltipBorderColor.light,
+                    },
+                },
+                interaction: {
+                    intersect: false,
+                    mode: 'nearest',
+                },
+                animation: {duration: 200},
+                maintainAspectRatio: false,
+            },
+        });
+
+        document.addEventListener('darkMode', (e) => {
+            const {mode} = e.detail;
+            if (mode === 'on') {
+                this.charts[refName].options.scales.x.ticks.color = textColor.dark;
+                this.charts[refName].options.scales.y.ticks.color = textColor.dark;
+                this.charts[refName].options.scales.y.grid.color = gridColor.dark;
+                this.charts[refName].options.plugins.tooltip.bodyColor = tooltipBodyColor.dark;
+                this.charts[refName].options.plugins.tooltip.backgroundColor = tooltipBgColor.dark;
+                this.charts[refName].options.plugins.tooltip.borderColor = tooltipBorderColor.dark;
+            } else {
+                this.charts[refName].options.scales.x.ticks.color = textColor.light;
+                this.charts[refName].options.scales.y.ticks.color = textColor.light;
+                this.charts[refName].options.scales.y.grid.color = gridColor.light;
+                this.charts[refName].options.plugins.tooltip.bodyColor = tooltipBodyColor.light;
+                this.charts[refName].options.plugins.tooltip.backgroundColor = tooltipBgColor.light;
+                this.charts[refName].options.plugins.tooltip.borderColor = tooltipBorderColor.light;
+            }
+            this.charts[refName].update('none');
+        });
+    },
+});