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