first&last

resources/js/app.js

@@ -0,0 +1,202 @@
+import './bootstrap';
+
+const dashboardCharts = window.__dashboardCharts ?? {
+    initialized: false,
+    status: null,
+    priority: null,
+};
+
+window.__dashboardCharts = dashboardCharts;
+
+const destroyDashboardCharts = () => {
+    if (dashboardCharts.status) {
+        dashboardCharts.status.destroy();
+        dashboardCharts.status = null;
+    }
+
+    if (dashboardCharts.priority) {
+        dashboardCharts.priority.destroy();
+        dashboardCharts.priority = null;
+    }
+};
+
+const getDashboardPayloadFromDom = () => {
+    const node = document.getElementById('dashboard-chart-data');
+    if (!node) {
+        return null;
+    }
+
+    try {
+        return {
+            status: JSON.parse(node.dataset.status ?? '[]'),
+            priority: JSON.parse(node.dataset.priority ?? '[]'),
+        };
+    } catch (_) {
+        return { status: [], priority: [] };
+    }
+};
+
+const chartOptionsByType = (type) => {
+    const common = {
+        responsive: true,
+        maintainAspectRatio: true,
+        animation: false,
+    };
+
+    if (type === 'bar') {
+        return {
+            ...common,
+            aspectRatio: 2.2,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        precision: 0,
+                    },
+                },
+            },
+            plugins: {
+                legend: { display: false },
+            },
+        };
+    }
+
+    return {
+        ...common,
+        aspectRatio: 1.7,
+    };
+};
+
+const upsertChart = (canvasId, type, data) => {
+    const canvas = document.getElementById(canvasId);
+    if (!canvas || !window.Chart) {
+        return null;
+    }
+
+    const existing = window.Chart.getChart(canvas);
+    const labels = data.map((item) => item.label);
+    const values = data.map((item) => item.value);
+    const colors = data.map((item) => item.color);
+
+    if (existing) {
+        existing.data.labels = labels;
+        existing.data.datasets[0].data = values;
+        existing.data.datasets[0].backgroundColor = colors;
+        existing.update('none');
+
+        return existing;
+    }
+
+    return new window.Chart(canvas.getContext('2d'), {
+        type,
+        data: {
+            labels,
+            datasets: [{
+                data: values,
+                backgroundColor: colors,
+                borderWidth: 0,
+            }],
+        },
+        options: chartOptionsByType(type),
+    });
+};
+
+const renderDashboardCharts = (payload) => {
+    const data = payload ?? getDashboardPayloadFromDom();
+
+    if (!data) {
+        destroyDashboardCharts();
+        return;
+    }
+
+    if (!window.Chart) {
+        window.setTimeout(() => renderDashboardCharts(data), 120);
+        return;
+    }
+
+    dashboardCharts.status = upsertChart('statusChart', 'doughnut', data.status ?? []);
+    dashboardCharts.priority = upsertChart('priorityChart', 'bar', data.priority ?? []);
+};
+
+const generalReportChart = window.__generalReportChart ?? {
+    initialized: false,
+};
+
+window.__generalReportChart = generalReportChart;
+
+const destroyGeneralReportChart = () => {
+    const canvas = document.getElementById('generalStatusChart');
+    if (!canvas || !window.Chart) {
+        return;
+    }
+
+    const chart = window.Chart.getChart(canvas);
+    if (chart) {
+        chart.destroy();
+    }
+};
+
+const getGeneralReportPayloadFromDom = () => {
+    const node = document.getElementById('general-report-chart-data');
+    if (!node) {
+        return null;
+    }
+
+    try {
+        return JSON.parse(node.dataset.chart ?? '[]');
+    } catch (_) {
+        return [];
+    }
+};
+
+const normalizeGeneralReportPayload = (payload) => {
+    return (payload ?? []).map((item) => ({
+        label: item.status ?? item.label ?? 'Неизвестно',
+        value: Number(item.total ?? item.value ?? 0),
+        color: item.color ?? '#2563eb',
+    }));
+};
+
+const renderGeneralReportChart = (payload) => {
+    const node = document.getElementById('general-report-chart-data');
+    if (!node) {
+        destroyGeneralReportChart();
+        return;
+    }
+
+    const data = normalizeGeneralReportPayload(payload ?? getGeneralReportPayloadFromDom());
+
+    if (!window.Chart) {
+        window.setTimeout(() => renderGeneralReportChart(data), 120);
+        return;
+    }
+
+    upsertChart('generalStatusChart', 'bar', data);
+};
+
+if (!dashboardCharts.initialized) {
+    dashboardCharts.initialized = true;
+
+    window.addEventListener('dashboard-charts-updated', (event) => {
+        const detail = event.detail ?? {};
+        renderDashboardCharts({
+            status: detail.status ?? detail[0]?.status ?? [],
+            priority: detail.priority ?? detail[0]?.priority ?? [],
+        });
+    });
+
+    document.addEventListener('DOMContentLoaded', () => renderDashboardCharts());
+    document.addEventListener('livewire:navigated', () => renderDashboardCharts());
+}
+
+if (!generalReportChart.initialized) {
+    generalReportChart.initialized = true;
+
+    window.addEventListener('general-report-chart-updated', (event) => {
+        const detail = event.detail ?? {};
+        renderGeneralReportChart(detail.chart ?? detail[0]?.chart ?? []);
+    });
+
+    document.addEventListener('DOMContentLoaded', () => renderGeneralReportChart());
+    document.addEventListener('livewire:navigated', () => renderGeneralReportChart());
+}

resources/js/bootstrap.js

@@ -0,0 +1,32 @@
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });