From bc07922526dd4bea14e75e009f4b443ba01e1013 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 30 Jan 2026 17:13:36 +0200 Subject: [PATCH] Load Chart.js globally and update disk usage chart --- package-lock.json | 51 +++----- package.json | 2 +- resources/js/server-charts.js | 6 +- .../jabali/widgets/disk-usage.blade.php | 123 ++++++++---------- 4 files changed, 77 insertions(+), 105 deletions(-) diff --git a/package-lock.json b/package-lock.json index f626eed..3934296 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,7 @@ "packages": { "": { "dependencies": { - "echarts": "^6.0.0" + "chart.js": "^4.4.2" }, "devDependencies": { "@tailwindcss/forms": "^0.5.11", @@ -507,6 +507,12 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz", + "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", + "license": "MIT" + }, "node_modules/@puppeteer/browsers": { "version": "2.11.1", "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.11.1.tgz", @@ -1525,6 +1531,18 @@ "node": ">=8" } }, + "node_modules/chart.js": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz", + "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==", + "license": "MIT", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/chromium-bidi": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-12.0.1.tgz", @@ -1728,22 +1746,6 @@ "node": ">= 0.4" } }, - "node_modules/echarts": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz", - "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==", - "license": "Apache-2.0", - "dependencies": { - "tslib": "2.3.0", - "zrender": "6.0.0" - } - }, - "node_modules/echarts/node_modules/tslib": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", - "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", - "license": "0BSD" - }, "node_modules/electron-to-chromium": { "version": "1.5.267", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz", @@ -3537,21 +3539,6 @@ "funding": { "url": "https://github.com/sponsors/colinhacks" } - }, - "node_modules/zrender": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz", - "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==", - "license": "BSD-3-Clause", - "dependencies": { - "tslib": "2.3.0" - } - }, - "node_modules/zrender/node_modules/tslib": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", - "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", - "license": "0BSD" } } } diff --git a/package.json b/package.json index cd3ec65..1c8162c 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,6 @@ "vite": "^7.0.7" }, "dependencies": { - "echarts": "^6.0.0" + "chart.js": "^4.4.2" } } diff --git a/resources/js/server-charts.js b/resources/js/server-charts.js index 482b20b..5045e17 100644 --- a/resources/js/server-charts.js +++ b/resources/js/server-charts.js @@ -1,4 +1,4 @@ -import * as echarts from 'echarts'; +import Chart from 'chart.js/auto'; -// Make echarts available globally for Alpine.js components -window.echarts = echarts; +// Make Chart.js available globally for Alpine.js components +window.Chart = Chart; diff --git a/resources/views/filament/jabali/widgets/disk-usage.blade.php b/resources/views/filament/jabali/widgets/disk-usage.blade.php index 1635d61..14dd201 100644 --- a/resources/views/filament/jabali/widgets/disk-usage.blade.php +++ b/resources/views/filament/jabali/widgets/disk-usage.blade.php @@ -59,91 +59,76 @@ this.initChart(); }, initChart() { - if (typeof window.echarts === 'undefined') { + if (typeof window.Chart === 'undefined') { setTimeout(() => this.initChart(), 100); return; } const isDark = document.documentElement.classList.contains('dark'); - this.chart = echarts.init(this.$refs.chart); - - this.chart.setOption({ - grid: { - left: 10, - right: 10, - top: 10, - bottom: 25, - containLabel: false + const ctx = this.$refs.chart.getContext('2d'); + this.chart = new Chart(ctx, { + type: 'bar', + data: { + labels: [''], + datasets: [ + { + label: '{{ __('Used') }}', + data: [{{ $percent }}], + backgroundColor: '{{ $usedColor }}', + stack: 'total', + borderRadius: { topLeft: 6, bottomLeft: 6, topRight: 0, bottomRight: 0 }, + borderSkipped: false, + }, + { + label: '{{ __('Free') }}', + data: [{{ 100 - $percent }}], + backgroundColor: isDark ? '#374151' : '#e5e7eb', + stack: 'total', + borderRadius: { topLeft: 0, bottomLeft: 0, topRight: 6, bottomRight: 6 }, + borderSkipped: false, + } + ] }, - xAxis: { - type: 'value', - min: 0, - max: 100, - axisLine: { show: false }, - axisTick: { show: false }, - axisLabel: { - formatter: '{value}%', - color: isDark ? '#9ca3af' : '#6b7280', - fontSize: 11 + options: { + responsive: true, + maintainAspectRatio: false, + indexAxis: 'y', + plugins: { + legend: { display: false }, + tooltip: { + enabled: true, + callbacks: { + label: (context) => `${context.dataset.label}: ${Number(context.parsed.x).toFixed(1)}%` + } + } }, - splitLine: { show: false } - }, - yAxis: { - type: 'category', - data: [''], - axisLine: { show: false }, - axisTick: { show: false }, - axisLabel: { show: false } - }, - series: [ - { - name: '{{ __('Used') }}', - type: 'bar', - stack: 'total', - barWidth: 28, - barGap: 0, - itemStyle: { - color: '{{ $usedColor }}', - borderRadius: [6, 0, 0, 6] + scales: { + x: { + min: 0, + max: 100, + ticks: { + color: isDark ? '#9ca3af' : '#6b7280', + callback: (value) => `${value}%`, + font: { size: 11 } + }, + grid: { display: false } }, - label: { - show: true, - position: 'inside', - formatter: '{{ number_format($percent, 1) }}%', - color: '#fff', - fontWeight: 'bold', - fontSize: 13 - }, - data: [{{ $percent }}] - }, - { - name: '{{ __('Free') }}', - type: 'bar', - stack: 'total', - barWidth: 28, - itemStyle: { - color: isDark ? '#374151' : '#e5e7eb', - borderRadius: [0, 6, 6, 0] - }, - data: [{{ 100 - $percent }}] - } - ], - tooltip: { - trigger: 'axis', - axisPointer: { type: 'shadow' }, - formatter: function(params) { - return params.map(p => p.seriesName + ': ' + p.value.toFixed(1) + '%').join('
'); + y: { + ticks: { display: false }, + grid: { display: false } + } } } }); - window.addEventListener('resize', () => this.chart?.resize()); }, destroy() { - this.chart?.dispose(); + this.chart?.destroy(); } }" wire:ignore > -
+
+ +
@endif