64 lines
2.7 KiB
JavaScript
64 lines
2.7 KiB
JavaScript
const chartBase = {
|
|
chart: {
|
|
background: 'transparent',
|
|
foreColor: '#b8bec4',
|
|
fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
|
|
toolbar: { show: false },
|
|
zoom: { enabled: false },
|
|
},
|
|
theme: { mode: 'dark' },
|
|
grid: { borderColor: '#292c30', strokeDashArray: 4 },
|
|
tooltip: { theme: 'dark' },
|
|
noData: { text: 'No data yet' },
|
|
};
|
|
|
|
if (document.querySelector('[data-dashboard-chart]')) {
|
|
import('apexcharts').then(({ default: ApexCharts }) => {
|
|
document.querySelectorAll('[data-dashboard-chart]').forEach((element) => {
|
|
let data;
|
|
|
|
try {
|
|
data = JSON.parse(element.dataset.chart);
|
|
} catch (error) {
|
|
console.error('Dashboard chart data is invalid', error);
|
|
return;
|
|
}
|
|
|
|
const height = element.clientHeight || 256;
|
|
let options;
|
|
|
|
if (element.dataset.dashboardChart === 'orders') {
|
|
options = {
|
|
...chartBase,
|
|
chart: { ...chartBase.chart, type: 'area', height },
|
|
colors: ['#e3f504'],
|
|
series: [{ name: 'Awaiting dispatch', data: data.series }],
|
|
xaxis: { categories: data.labels, labels: { rotate: -45, hideOverlappingLabels: true } },
|
|
yaxis: { min: 0, forceNiceScale: true, labels: { formatter: (value) => Number.isInteger(value) ? value.toString() : '' } },
|
|
stroke: { curve: 'smooth', width: 3 },
|
|
fill: { type: 'gradient', gradient: { opacityFrom: 0.35, opacityTo: 0.02 } },
|
|
dataLabels: { enabled: false },
|
|
markers: { size: 3 },
|
|
legend: { show: false },
|
|
};
|
|
} else if (element.dataset.dashboardChart === 'materials') {
|
|
options = {
|
|
...chartBase,
|
|
chart: { ...chartBase.chart, type: 'donut', height },
|
|
labels: data.map((item) => item.label),
|
|
series: data.map((item) => item.count),
|
|
colors: ['#e3f504', '#7dd3a3', '#8b9df0', '#f0a46b', '#cc9df0', '#66cbd1', '#f17fa5'],
|
|
legend: { position: 'bottom', fontSize: '12px', labels: { colors: '#b8bec4' } },
|
|
plotOptions: { pie: { donut: { size: '68%', labels: { show: true, total: { show: true, label: 'Spools' } } } } },
|
|
dataLabels: { enabled: false },
|
|
stroke: { colors: ['#17191b'], width: 2 },
|
|
};
|
|
}
|
|
|
|
if (options) {
|
|
new ApexCharts(element, options).render();
|
|
}
|
|
});
|
|
});
|
|
}
|