671 lines
20 KiB
JavaScript
671 lines
20 KiB
JavaScript
'use strict';
|
|
|
|
(function() {
|
|
// JS global variables from app.js file
|
|
const colors = window.config.colors;
|
|
const fontFamily = window.config.fontFamily;
|
|
|
|
const revenueChartData = [
|
|
49.33, 48.79, 50.61, 53.31, 54.78, 53.84, 54.68, 56.74, 56.99, 56.14, 56.56, 60.35, 58.74, 61.44, 61.11, 58.57,
|
|
54.72, 52.07, 51.09, 47.48, 48.57, 48.99, 53.58, 50.28, 46.24, 48.61, 51.75, 51.34, 50.21, 54.65, 52.44, 53.06,
|
|
57.07, 52.97, 48.72, 52.69, 53.59, 58.52, 55.1, 58.05, 61.35, 57.74, 60.27, 61.0, 57.78, 56.8, 58.9, 62.45,
|
|
58.75, 58.4, 56.74, 52.76, 52.3, 50.56, 55.4, 50.49, 52.49, 48.79, 47.46, 43.31, 38.96, 34.73, 31.03, 32.63,
|
|
36.89, 35.89, 32.74, 33.2, 30.82, 28.64, 28.44, 27.73, 27.75, 25.96, 24.38, 21.95, 22.08, 23.54, 27.3, 30.27,
|
|
27.25, 29.92, 25.14, 23.09, 23.79, 23.46, 27.99, 23.21, 23.91, 19.21, 15.13, 15.08, 11.0, 9.2, 7.47, 11.64,
|
|
15.76, 13.99, 12.59, 13.53, 15.01, 13.95, 13.23, 18.1, 20.63, 21.06, 25.37, 25.32, 20.94, 18.75, 15.38, 14.56,
|
|
17.94, 15.96, 16.35, 14.16, 12.1, 14.84, 17.24, 17.79, 14.03, 18.65, 18.46, 22.68, 25.08, 28.18, 28.03, 24.11,
|
|
24.28, 28.23, 26.24, 29.33, 26.07, 23.92, 28.82, 25.14, 21.79, 23.05, 20.71, 29.72, 30.21, 32.56, 31.46, 33.69,
|
|
30.05, 34.2, 36.93, 35.5, 34.78, 36.97,
|
|
];
|
|
|
|
const revenueChartCategories = [
|
|
'Jan 01 2025',
|
|
'Jan 02 2025',
|
|
'jan 03 2025',
|
|
'Jan 04 2025',
|
|
'Jan 05 2025',
|
|
'Jan 06 2025',
|
|
'Jan 07 2025',
|
|
'Jan 08 2025',
|
|
'Jan 09 2025',
|
|
'Jan 10 2025',
|
|
'Jan 11 2025',
|
|
'Jan 12 2025',
|
|
'Jan 13 2025',
|
|
'Jan 14 2025',
|
|
'Jan 15 2025',
|
|
'Jan 16 2025',
|
|
'Jan 17 2025',
|
|
'Jan 18 2025',
|
|
'Jan 19 2025',
|
|
'Jan 20 2025',
|
|
'Jan 21 2025',
|
|
'Jan 22 2025',
|
|
'Jan 23 2025',
|
|
'Jan 24 2025',
|
|
'Jan 25 2025',
|
|
'Jan 26 2025',
|
|
'Jan 27 2025',
|
|
'Jan 28 2025',
|
|
'Jan 29 2025',
|
|
'Jan 30 2025',
|
|
'Jan 31 2025',
|
|
'Feb 01 2025',
|
|
'Feb 02 2025',
|
|
'Feb 03 2025',
|
|
'Feb 04 2025',
|
|
'Feb 05 2025',
|
|
'Feb 06 2025',
|
|
'Feb 07 2025',
|
|
'Feb 08 2025',
|
|
'Feb 09 2025',
|
|
'Feb 10 2025',
|
|
'Feb 11 2025',
|
|
'Feb 12 2025',
|
|
'Feb 13 2025',
|
|
'Feb 14 2025',
|
|
'Feb 15 2025',
|
|
'Feb 16 2025',
|
|
'Feb 17 2025',
|
|
'Feb 18 2025',
|
|
'Feb 19 2025',
|
|
'Feb 20 2025',
|
|
'Feb 21 2025',
|
|
'Feb 22 2025',
|
|
'Feb 23 2025',
|
|
'Feb 24 2025',
|
|
'Feb 25 2025',
|
|
'Feb 26 2025',
|
|
'Feb 27 2025',
|
|
'Feb 28 2025',
|
|
'Mar 01 2025',
|
|
'Mar 02 2025',
|
|
'Mar 03 2025',
|
|
'Mar 04 2025',
|
|
'Mar 05 2025',
|
|
'Mar 06 2025',
|
|
'Mar 07 2025',
|
|
'Mar 08 2025',
|
|
'Mar 09 2025',
|
|
'Mar 10 2025',
|
|
'Mar 11 2025',
|
|
'Mar 12 2025',
|
|
'Mar 13 2025',
|
|
'Mar 14 2025',
|
|
'Mar 15 2025',
|
|
'Mar 16 2025',
|
|
'Mar 17 2025',
|
|
'Mar 18 2025',
|
|
'Mar 19 2025',
|
|
'Mar 20 2025',
|
|
'Mar 21 2025',
|
|
'Mar 22 2025',
|
|
'Mar 23 2025',
|
|
'Mar 24 2025',
|
|
'Mar 25 2025',
|
|
'Mar 26 2025',
|
|
'Mar 27 2025',
|
|
'Mar 28 2025',
|
|
'Mar 29 2025',
|
|
'Mar 30 2025',
|
|
'Mar 31 2025',
|
|
'Apr 01 2025',
|
|
'Apr 02 2025',
|
|
'Apr 03 2025',
|
|
'Apr 04 2025',
|
|
'Apr 05 2025',
|
|
'Apr 06 2025',
|
|
'Apr 07 2025',
|
|
'Apr 08 2025',
|
|
'Apr 09 2025',
|
|
'Apr 10 2025',
|
|
'Apr 11 2025',
|
|
'Apr 12 2025',
|
|
'Apr 13 2025',
|
|
'Apr 14 2025',
|
|
'Apr 15 2025',
|
|
'Apr 16 2025',
|
|
'Apr 17 2025',
|
|
'Apr 18 2025',
|
|
'Apr 19 2025',
|
|
'Apr 20 2025',
|
|
'Apr 21 2025',
|
|
'Apr 22 2025',
|
|
'Apr 23 2025',
|
|
'Apr 24 2025',
|
|
'Apr 25 2025',
|
|
'Apr 26 2025',
|
|
'Apr 27 2025',
|
|
'Apr 28 2025',
|
|
'Apr 29 2025',
|
|
'Apr 30 2025',
|
|
'May 01 2025',
|
|
'May 02 2025',
|
|
'May 03 2025',
|
|
'May 04 2025',
|
|
'May 05 2025',
|
|
'May 06 2025',
|
|
'May 07 2025',
|
|
'May 08 2025',
|
|
'May 09 2025',
|
|
'May 10 2025',
|
|
'May 11 2025',
|
|
'May 12 2025',
|
|
'May 13 2025',
|
|
'May 14 2025',
|
|
'May 15 2025',
|
|
'May 16 2025',
|
|
'May 17 2025',
|
|
'May 18 2025',
|
|
'May 19 2025',
|
|
'May 20 2025',
|
|
'May 21 2025',
|
|
'May 22 2025',
|
|
'May 23 2025',
|
|
'May 24 2025',
|
|
'May 25 2025',
|
|
'May 26 2025',
|
|
'May 27 2025',
|
|
'May 28 2025',
|
|
'May 29 2025',
|
|
'May 30 2025',
|
|
];
|
|
|
|
// Date Picker
|
|
if (document.querySelector('#dashboardDate')) {
|
|
flatpickr('#dashboardDate', {
|
|
wrap: true,
|
|
dateFormat: 'd-M-Y',
|
|
defaultDate: 'today',
|
|
});
|
|
}
|
|
// Date Picker - END
|
|
|
|
// New Customers Chart
|
|
const customersChartElement = document.querySelector('#customersChart');
|
|
if (customersChartElement) {
|
|
const customersChartOptions = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 60,
|
|
sparkline: {
|
|
enabled: !0,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
data: [3844, 3855, 3841, 3867, 3822, 3843, 3821, 3841, 3856, 3827, 3843],
|
|
},
|
|
],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'Jan 01 2025',
|
|
'Jan 02 2025',
|
|
'Jan 03 2025',
|
|
'Jan 04 2025',
|
|
'Jan 05 2025',
|
|
'Jan 06 2025',
|
|
'Jan 07 2025',
|
|
'Jan 08 2025',
|
|
'Jan 09 2025',
|
|
'Jan 10 2025',
|
|
'Jan 11 2025',
|
|
],
|
|
},
|
|
yaxis: {
|
|
min: 3820,
|
|
max: 3870,
|
|
tickAmount: 4,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: 'smooth',
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
},
|
|
colors: [colors.primary],
|
|
};
|
|
const customersChart = new ApexCharts(customersChartElement, customersChartOptions);
|
|
customersChart.render();
|
|
}
|
|
// New Customers Chart - END
|
|
|
|
// Orders Chart
|
|
const ordersChartElement = document.querySelector('#ordersChart');
|
|
if (ordersChartElement) {
|
|
const ordersChartOptions = {
|
|
chart: {
|
|
type: 'bar',
|
|
height: 60,
|
|
sparkline: {
|
|
enabled: !0,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 2,
|
|
columnWidth: '60%',
|
|
},
|
|
},
|
|
colors: [colors.primary],
|
|
series: [
|
|
{
|
|
name: '',
|
|
data: [36, 77, 52, 90, 74, 35, 55, 23, 47, 10, 63],
|
|
},
|
|
],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'Jan 01 2025',
|
|
'Jan 02 2025',
|
|
'Jan 03 2025',
|
|
'Jan 04 2025',
|
|
'Jan 05 2025',
|
|
'Jan 06 2025',
|
|
'Jan 07 2025',
|
|
'Jan 08 2025',
|
|
'Jan 09 2025',
|
|
'Jan 10 2025',
|
|
'Jan 11 2025',
|
|
],
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 90,
|
|
tickAmount: 4,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
};
|
|
const ordersChart = new ApexCharts(ordersChartElement, ordersChartOptions);
|
|
ordersChart.render();
|
|
}
|
|
// Orders Chart - END
|
|
|
|
// Growth Chart
|
|
const growthChartElement = document.querySelector('#growthChart');
|
|
if (growthChartElement) {
|
|
const growthChartOptions = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 60,
|
|
sparkline: {
|
|
enabled: !0,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
data: [41, 45, 44, 46, 52, 54, 43, 74, 82, 82, 89],
|
|
},
|
|
],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'Jan 01 2025',
|
|
'Jan 02 2025',
|
|
'Jan 03 2025',
|
|
'Jan 04 2025',
|
|
'Jan 05 2025',
|
|
'Jan 06 2025',
|
|
'Jan 07 2025',
|
|
'Jan 08 2025',
|
|
'Jan 09 2025',
|
|
'Jan 10 2025',
|
|
'Jan 11 2025',
|
|
],
|
|
},
|
|
yaxis: {
|
|
min: 40,
|
|
max: 90,
|
|
tickAmount: 4,
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val + '%';
|
|
},
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: 'smooth',
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
},
|
|
colors: [colors.primary],
|
|
};
|
|
const growthChart = new ApexCharts(growthChartElement, growthChartOptions);
|
|
growthChart.render();
|
|
}
|
|
// Growth Chart - END
|
|
|
|
// Revenue Chart
|
|
const revenueChartElement = document.querySelector('#revenueChart');
|
|
if (revenueChartElement) {
|
|
const revenueChartOptions = {
|
|
chart: {
|
|
type: 'line',
|
|
height: '400',
|
|
parentHeightOffset: 0,
|
|
foreColor: colors.secondary,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
colors: [colors.primary, colors.danger, colors.warning],
|
|
grid: {
|
|
padding: {
|
|
bottom: -4,
|
|
},
|
|
borderColor: colors.gridBorder,
|
|
xaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Revenue',
|
|
data: revenueChartData,
|
|
},
|
|
],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: revenueChartCategories,
|
|
lines: {
|
|
show: true,
|
|
},
|
|
axisBorder: {
|
|
color: colors.gridBorder,
|
|
},
|
|
axisTicks: {
|
|
color: colors.gridBorder,
|
|
},
|
|
crosshairs: {
|
|
stroke: {
|
|
color: colors.secondary,
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: -10,
|
|
max: 70,
|
|
title: {
|
|
text: 'Revenue ( $1000 x )',
|
|
style: {
|
|
size: 9,
|
|
color: colors.secondary,
|
|
},
|
|
},
|
|
tickAmount: 4,
|
|
tooltip: {
|
|
enabled: true,
|
|
},
|
|
crosshairs: {
|
|
stroke: {
|
|
color: colors.secondary,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: 'straight',
|
|
},
|
|
};
|
|
const revenueChart = new ApexCharts(revenueChartElement, revenueChartOptions);
|
|
revenueChart.render();
|
|
}
|
|
// Revenue Chart - END
|
|
|
|
// Monthly Sales Chart
|
|
const monthlySalesChartElement = document.querySelector('#monthlySalesChart');
|
|
if (monthlySalesChartElement) {
|
|
const monthlySalesChartOptions = {
|
|
chart: {
|
|
type: 'bar',
|
|
height: '318',
|
|
parentHeightOffset: 0,
|
|
foreColor: colors.secondary,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
colors: [colors.primary],
|
|
fill: {
|
|
opacity: 0.9,
|
|
},
|
|
grid: {
|
|
padding: {
|
|
bottom: -4,
|
|
},
|
|
borderColor: colors.gridBorder,
|
|
xaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Sales',
|
|
data: [152, 109, 93, 113, 126, 161, 188, 143, 102, 113, 116, 124],
|
|
},
|
|
],
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: [
|
|
'01/01/2025',
|
|
'02/01/2025',
|
|
'03/01/2025',
|
|
'04/01/2025',
|
|
'05/01/2025',
|
|
'06/01/2025',
|
|
'07/01/2025',
|
|
'08/01/2025',
|
|
'09/01/2025',
|
|
'10/01/2025',
|
|
'11/01/2025',
|
|
'12/01/2025',
|
|
],
|
|
axisBorder: {
|
|
color: colors.gridBorder,
|
|
},
|
|
axisTicks: {
|
|
color: colors.gridBorder,
|
|
},
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Number of Sales',
|
|
style: {
|
|
size: 9,
|
|
color: colors.secondary,
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: 'top',
|
|
horizontalAlign: 'center',
|
|
fontFamily: fontFamily,
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 0,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 0,
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
style: {
|
|
fontSize: '10px',
|
|
fontFamily: fontFamily,
|
|
},
|
|
offsetY: -27,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '50%',
|
|
borderRadius: 4,
|
|
dataLabels: {
|
|
position: 'top',
|
|
orientation: 'vertical',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const monthlySalesChart = new ApexCharts(monthlySalesChartElement, monthlySalesChartOptions);
|
|
monthlySalesChart.render();
|
|
}
|
|
// Monthly Sales Chart - END
|
|
|
|
// Cloud Storage Chart
|
|
const storageChartElement = document.querySelector('#storageChart');
|
|
if (storageChartElement) {
|
|
const storageChartOptions = {
|
|
chart: {
|
|
height: 260,
|
|
type: 'radialBar',
|
|
},
|
|
series: [67],
|
|
colors: [colors.primary],
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: '70%',
|
|
},
|
|
track: {
|
|
show: true,
|
|
background: colors.gridBorder,
|
|
strokeWidth: '100%',
|
|
opacity: 1,
|
|
margin: 5,
|
|
},
|
|
dataLabels: {
|
|
showOn: 'always',
|
|
name: {
|
|
offsetY: -11,
|
|
show: true,
|
|
color: colors.secondary,
|
|
fontSize: '13px',
|
|
},
|
|
value: {
|
|
color: colors.secondary,
|
|
fontSize: '30px',
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
lineCap: 'round',
|
|
},
|
|
labels: ['Storage Used'],
|
|
};
|
|
|
|
const storageChart = new ApexCharts(storageChartElement, storageChartOptions);
|
|
storageChart.render();
|
|
}
|
|
// Cloud Storage Chart - END
|
|
|
|
// Billing Chart
|
|
const billingChartElement = document.querySelector('#billingChart');
|
|
if (billingChartElement) {
|
|
const today = parseFloat(billingChartElement.getAttribute('data-today')) || 0;
|
|
const month = parseFloat(billingChartElement.getAttribute('data-month')) || 0;
|
|
const year = parseFloat(billingChartElement.getAttribute('data-year')) || 0;
|
|
|
|
const billingChartOptions = {
|
|
chart: {
|
|
height: 250,
|
|
type: 'donut',
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
series: [today, month, year],
|
|
labels: ['Today', 'This Month', 'This Year'],
|
|
colors: [colors.primary, colors.warning, colors.danger],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
fontFamily: fontFamily,
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 0,
|
|
},
|
|
},
|
|
stroke: {
|
|
colors: ['#fff'],
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '70%',
|
|
labels: {
|
|
show: true,
|
|
name: {
|
|
fontSize: '14px',
|
|
fontFamily: fontFamily,
|
|
color: colors.secondary,
|
|
offsetY: -10,
|
|
},
|
|
value: {
|
|
fontSize: '16px',
|
|
fontFamily: fontFamily,
|
|
color: colors.bodyColor,
|
|
offsetY: 16,
|
|
formatter: function (val) {
|
|
return new Intl.NumberFormat('vi-VN', {
|
|
style: 'currency',
|
|
currency: 'VND',
|
|
}).format(val);
|
|
},
|
|
},
|
|
total: {
|
|
show: true,
|
|
fontFamily: fontFamily,
|
|
label: 'This Month',
|
|
color: colors.secondary,
|
|
formatter: function (w) {
|
|
return new Intl.NumberFormat('vi-VN', {
|
|
style: 'currency',
|
|
currency: 'VND',
|
|
}).format(month);
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const billingChart = new ApexCharts(billingChartElement, billingChartOptions);
|
|
billingChart.render();
|
|
}
|
|
// Billing Chart - END
|
|
})(); |