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": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"echarts": "^6.0.0"
|
"chart.js": "^4.4.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/forms": "^0.5.11",
|
"@tailwindcss/forms": "^0.5.11",
|
||||||
@@ -507,6 +507,12 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@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": {
|
"node_modules/@puppeteer/browsers": {
|
||||||
"version": "2.11.1",
|
"version": "2.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.11.1.tgz",
|
"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.11.1.tgz",
|
||||||
@@ -1525,6 +1531,18 @@
|
|||||||
"node": ">=8"
|
"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": {
|
"node_modules/chromium-bidi": {
|
||||||
"version": "12.0.1",
|
"version": "12.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-12.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-12.0.1.tgz",
|
||||||
@@ -1728,22 +1746,6 @@
|
|||||||
"node": ">= 0.4"
|
"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": {
|
"node_modules/electron-to-chromium": {
|
||||||
"version": "1.5.267",
|
"version": "1.5.267",
|
||||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
|
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
|
||||||
@@ -3537,21 +3539,6 @@
|
|||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/colinhacks"
|
"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"
|
"vite": "^7.0.7"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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
|
// Make Chart.js available globally for Alpine.js components
|
||||||
window.echarts = echarts;
|
window.Chart = Chart;
|
||||||
|
|||||||
@@ -59,91 +59,76 @@
|
|||||||
this.initChart();
|
this.initChart();
|
||||||
},
|
},
|
||||||
initChart() {
|
initChart() {
|
||||||
if (typeof window.echarts === 'undefined') {
|
if (typeof window.Chart === 'undefined') {
|
||||||
setTimeout(() => this.initChart(), 100);
|
setTimeout(() => this.initChart(), 100);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const isDark = document.documentElement.classList.contains('dark');
|
const isDark = document.documentElement.classList.contains('dark');
|
||||||
this.chart = echarts.init(this.$refs.chart);
|
const ctx = this.$refs.chart.getContext('2d');
|
||||||
|
this.chart = new Chart(ctx, {
|
||||||
this.chart.setOption({
|
type: 'bar',
|
||||||
grid: {
|
data: {
|
||||||
left: 10,
|
labels: [''],
|
||||||
right: 10,
|
datasets: [
|
||||||
top: 10,
|
{
|
||||||
bottom: 25,
|
label: '{{ __('Used') }}',
|
||||||
containLabel: false
|
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: {
|
options: {
|
||||||
type: 'value',
|
responsive: true,
|
||||||
min: 0,
|
maintainAspectRatio: false,
|
||||||
max: 100,
|
indexAxis: 'y',
|
||||||
axisLine: { show: false },
|
plugins: {
|
||||||
axisTick: { show: false },
|
legend: { display: false },
|
||||||
axisLabel: {
|
tooltip: {
|
||||||
formatter: '{value}%',
|
enabled: true,
|
||||||
color: isDark ? '#9ca3af' : '#6b7280',
|
callbacks: {
|
||||||
fontSize: 11
|
label: (context) => `${context.dataset.label}: ${Number(context.parsed.x).toFixed(1)}%`
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
splitLine: { show: false }
|
scales: {
|
||||||
},
|
x: {
|
||||||
yAxis: {
|
min: 0,
|
||||||
type: 'category',
|
max: 100,
|
||||||
data: [''],
|
ticks: {
|
||||||
axisLine: { show: false },
|
color: isDark ? '#9ca3af' : '#6b7280',
|
||||||
axisTick: { show: false },
|
callback: (value) => `${value}%`,
|
||||||
axisLabel: { show: false }
|
font: { size: 11 }
|
||||||
},
|
},
|
||||||
series: [
|
grid: { display: false }
|
||||||
{
|
|
||||||
name: '{{ __('Used') }}',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
barWidth: 28,
|
|
||||||
barGap: 0,
|
|
||||||
itemStyle: {
|
|
||||||
color: '{{ $usedColor }}',
|
|
||||||
borderRadius: [6, 0, 0, 6]
|
|
||||||
},
|
},
|
||||||
label: {
|
y: {
|
||||||
show: true,
|
ticks: { display: false },
|
||||||
position: 'inside',
|
grid: { display: false }
|
||||||
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>');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
window.addEventListener('resize', () => this.chart?.resize());
|
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy() {
|
||||||
this.chart?.dispose();
|
this.chart?.destroy();
|
||||||
}
|
}
|
||||||
}"
|
}"
|
||||||
wire:ignore
|
wire:ignore
|
||||||
>
|
>
|
||||||
<div x-ref="chart" class="disk-bar-container"></div>
|
<div class="disk-bar-container">
|
||||||
|
<canvas x-ref="chart"></canvas>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user