Load Chart.js globally and update disk usage chart
This commit is contained in:
root
51
package-lock.json
generated
51
package-lock.json
generated
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,6 +20,6 @@
|
||||
"vite": "^7.0.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"echarts": "^6.0.0"
|
||||
"chart.js": "^4.4.2"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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('<br>');
|
||||
y: {
|
||||
ticks: { display: false },
|
||||
grid: { display: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', () => this.chart?.resize());
|
||||
},
|
||||
destroy() {
|
||||
this.chart?.dispose();
|
||||
this.chart?.destroy();
|
||||
}
|
||||
}"
|
||||
wire:ignore
|
||||
>
|
||||
<div x-ref="chart" class="disk-bar-container"></div>
|
||||
<div class="disk-bar-container">
|
||||
<canvas x-ref="chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
Reference in New Issue
Block a user