712 lines
16 KiB
JavaScript
712 lines
16 KiB
JavaScript
/**
|
|
* Statistics Cards
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
(function () {
|
|
let cardColor, shadeColor, labelColor, headingColor, legendColor;
|
|
|
|
if (isDarkStyle) {
|
|
cardColor = config.colors_dark.cardColor;
|
|
labelColor = config.colors_dark.textMuted;
|
|
legendColor = config.colors_dark.bodyColor;
|
|
headingColor = config.colors_dark.headingColor;
|
|
shadeColor = 'dark';
|
|
} else {
|
|
cardColor = config.colors.cardColor;
|
|
labelColor = config.colors.textMuted;
|
|
legendColor = config.colors.bodyColor;
|
|
headingColor = config.colors.headingColor;
|
|
shadeColor = '';
|
|
}
|
|
|
|
// Donut Chart Colors
|
|
const chartColors = {
|
|
donut: {
|
|
series1: '#66C732',
|
|
series2: '#8DE45F',
|
|
series3: '#AAEB87',
|
|
series4: '#E3F8D7'
|
|
}
|
|
};
|
|
|
|
// Order Area Chart
|
|
// --------------------------------------------------------------------
|
|
const orderAreaChartEl = document.querySelector('#orderChart'),
|
|
orderAreaChartConfig = {
|
|
chart: {
|
|
height: 95,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
markers: {
|
|
size: 6,
|
|
colors: 'transparent',
|
|
strokeColors: 'transparent',
|
|
strokeWidth: 4,
|
|
discrete: [
|
|
{
|
|
fillColor: cardColor,
|
|
seriesIndex: 0,
|
|
dataPointIndex: 6,
|
|
strokeColor: config.colors.success,
|
|
strokeWidth: 2,
|
|
size: 6,
|
|
radius: 8
|
|
}
|
|
],
|
|
hover: {
|
|
size: 7
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
right: 8
|
|
}
|
|
},
|
|
colors: [config.colors.success],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: shadeColor,
|
|
shadeIntensity: 0.8,
|
|
opacityFrom: 0.8,
|
|
opacityTo: 0.25,
|
|
stops: [0, 85, 100]
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: 'smooth'
|
|
},
|
|
series: [
|
|
{
|
|
data: [180, 175, 275, 140, 205, 190, 295]
|
|
}
|
|
],
|
|
xaxis: {
|
|
show: false,
|
|
lines: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
show: false
|
|
},
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
show: false
|
|
}
|
|
};
|
|
if (typeof orderAreaChartEl !== undefined && orderAreaChartEl !== null) {
|
|
const orderAreaChart = new ApexCharts(orderAreaChartEl, orderAreaChartConfig);
|
|
orderAreaChart.render();
|
|
}
|
|
|
|
// Revenue Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const revenueBarChartEl = document.querySelector('#revenueChart'),
|
|
revenueBarChartConfig = {
|
|
chart: {
|
|
height: 95,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
barHeight: '80%',
|
|
columnWidth: '75%',
|
|
startingShape: 'rounded',
|
|
endingShape: 'rounded',
|
|
borderRadius: 4,
|
|
distributed: true
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -20,
|
|
bottom: -12,
|
|
left: -10,
|
|
right: 0
|
|
}
|
|
},
|
|
colors: [
|
|
config.colors_label.primary,
|
|
config.colors_label.primary,
|
|
config.colors_label.primary,
|
|
config.colors_label.primary,
|
|
config.colors.primary,
|
|
config.colors_label.primary,
|
|
config.colors_label.primary
|
|
],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
series: [
|
|
{
|
|
data: [40, 95, 60, 45, 90, 50, 75]
|
|
}
|
|
],
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
if (typeof revenueBarChartEl !== undefined && revenueBarChartEl !== null) {
|
|
const revenueBarChart = new ApexCharts(revenueBarChartEl, revenueBarChartConfig);
|
|
revenueBarChart.render();
|
|
}
|
|
|
|
// Profit Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const profitBarChartEl = document.querySelector('#profitChart'),
|
|
profitBarChartConfig = {
|
|
series: [
|
|
{
|
|
data: [58, 28, 50, 80]
|
|
},
|
|
{
|
|
data: [50, 22, 65, 72]
|
|
}
|
|
],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 90,
|
|
toolbar: {
|
|
tools: {
|
|
download: false
|
|
}
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '65%',
|
|
startingShape: 'rounded',
|
|
endingShape: 'rounded',
|
|
borderRadius: 3,
|
|
dataLabels: {
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -30,
|
|
bottom: -12,
|
|
left: -10,
|
|
right: 0
|
|
}
|
|
},
|
|
colors: [config.colors.success, config.colors_label.success],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 5,
|
|
colors: cardColor
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
categories: ['Jan', 'Apr', 'Jul', 'Oct'],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
if (typeof profitBarChartEl !== undefined && profitBarChartEl !== null) {
|
|
const profitBarChart = new ApexCharts(profitBarChartEl, profitBarChartConfig);
|
|
profitBarChart.render();
|
|
}
|
|
|
|
// Session Area Chart
|
|
// --------------------------------------------------------------------
|
|
const sessionAreaChartEl = document.querySelector('#sessionsChart'),
|
|
sessionAreaChartConfig = {
|
|
chart: {
|
|
height: 90,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
markers: {
|
|
size: 6,
|
|
colors: 'transparent',
|
|
strokeColors: 'transparent',
|
|
strokeWidth: 4,
|
|
discrete: [
|
|
{
|
|
fillColor: cardColor,
|
|
seriesIndex: 0,
|
|
dataPointIndex: 8,
|
|
strokeColor: config.colors.warning,
|
|
strokeWidth: 2,
|
|
size: 6,
|
|
radius: 8
|
|
}
|
|
],
|
|
hover: {
|
|
size: 7
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
right: 8
|
|
}
|
|
},
|
|
colors: [config.colors.warning],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: shadeColor,
|
|
shadeIntensity: 0.8,
|
|
opacityFrom: 0.8,
|
|
opacityTo: 0.25,
|
|
stops: [0, 95, 100]
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: 'straight'
|
|
},
|
|
series: [
|
|
{
|
|
data: [280, 280, 240, 240, 200, 200, 260, 260, 310]
|
|
}
|
|
],
|
|
xaxis: {
|
|
show: false,
|
|
lines: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false
|
|
}
|
|
};
|
|
if (typeof sessionAreaChartEl !== undefined && sessionAreaChartEl !== null) {
|
|
const sessionAreaChart = new ApexCharts(sessionAreaChartEl, sessionAreaChartConfig);
|
|
sessionAreaChart.render();
|
|
}
|
|
|
|
// Total Sales Radial Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const expensesRadialChartEl = document.querySelector('#expensesChart'),
|
|
expensesRadialChartConfig = {
|
|
chart: {
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
parentHeightOffset: 0,
|
|
type: 'radialBar'
|
|
},
|
|
colors: [config.colors.primary],
|
|
series: [78],
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -90,
|
|
endAngle: 90,
|
|
hollow: {
|
|
size: '65%'
|
|
},
|
|
track: {
|
|
background: config.colors_label.secondary
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false
|
|
},
|
|
value: {
|
|
fontSize: '18px',
|
|
fontFamily: 'Public Sans',
|
|
color: headingColor,
|
|
fontWeight: 500,
|
|
offsetY: -5
|
|
}
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: -10,
|
|
right: -10,
|
|
bottom: 5
|
|
}
|
|
},
|
|
stroke: {
|
|
lineCap: 'round'
|
|
},
|
|
labels: ['Progress']
|
|
};
|
|
if (typeof expensesRadialChartEl !== undefined && expensesRadialChartEl !== null) {
|
|
const expensesRadialChart = new ApexCharts(expensesRadialChartEl, expensesRadialChartConfig);
|
|
expensesRadialChart.render();
|
|
}
|
|
|
|
// Visitor Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const visitorBarChartEl = document.querySelector('#visitorsChart'),
|
|
visitorBarChartConfig = {
|
|
chart: {
|
|
height: 120,
|
|
width: 200,
|
|
parentHeightOffset: 0,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
barHeight: '75%',
|
|
columnWidth: '40px',
|
|
startingShape: 'rounded',
|
|
endingShape: 'rounded',
|
|
borderRadius: 5,
|
|
distributed: true
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -25,
|
|
bottom: -12
|
|
}
|
|
},
|
|
colors: [
|
|
config.colors_label.primary,
|
|
config.colors_label.primary,
|
|
config.colors_label.primary,
|
|
config.colors_label.primary,
|
|
config.colors_label.primary,
|
|
config.colors.primary,
|
|
config.colors_label.primary
|
|
],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
series: [
|
|
{
|
|
data: [40, 95, 60, 45, 90, 50, 75]
|
|
}
|
|
],
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: '13px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1440,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 9,
|
|
columnWidth: '60%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1300,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 9,
|
|
columnWidth: '60%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1200,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 8,
|
|
columnWidth: '50%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1040,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 8,
|
|
columnWidth: '50%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 991,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 8,
|
|
columnWidth: '50%'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 420,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 8,
|
|
columnWidth: '50%'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (typeof visitorBarChartEl !== undefined && visitorBarChartEl !== null) {
|
|
const visitorBarChart = new ApexCharts(visitorBarChartEl, visitorBarChartConfig);
|
|
visitorBarChart.render();
|
|
}
|
|
|
|
// Activity Area Chart
|
|
// --------------------------------------------------------------------
|
|
const activityAreaChartEl = document.querySelector('#activityChart'),
|
|
activityAreaChartConfig = {
|
|
chart: {
|
|
height: 120,
|
|
width: 220,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
type: 'area'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: 'smooth'
|
|
},
|
|
series: [
|
|
{
|
|
data: [15, 22, 17, 40, 12, 35, 25]
|
|
}
|
|
],
|
|
colors: [config.colors.success],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: shadeColor,
|
|
shadeIntensity: 0.8,
|
|
opacityFrom: 0.8,
|
|
opacityTo: 0.25,
|
|
stops: [0, 85, 100]
|
|
}
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
top: -20,
|
|
bottom: -8
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
xaxis: {
|
|
categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
labels: {
|
|
style: {
|
|
fontSize: '13px',
|
|
colors: labelColor
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
if (typeof activityAreaChartEl !== undefined && activityAreaChartEl !== null) {
|
|
const activityAreaChart = new ApexCharts(activityAreaChartEl, activityAreaChartConfig);
|
|
activityAreaChart.render();
|
|
}
|
|
|
|
// Order Statistics Chart
|
|
// --------------------------------------------------------------------
|
|
const leadsReportChartEl = document.querySelector('#leadsReportChart'),
|
|
leadsReportChartConfig = {
|
|
chart: {
|
|
height: 157,
|
|
width: 130,
|
|
parentHeightOffset: 0,
|
|
type: 'donut'
|
|
},
|
|
labels: ['Electronic', 'Sports', 'Decor', 'Fashion'],
|
|
series: [20, 30, 20, 30],
|
|
colors: [
|
|
chartColors.donut.series1,
|
|
chartColors.donut.series4,
|
|
chartColors.donut.series3,
|
|
chartColors.donut.series2
|
|
],
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
formatter: function (val, opt) {
|
|
return parseInt(val) + '%';
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
theme: false
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 15
|
|
}
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '75%',
|
|
labels: {
|
|
show: true,
|
|
value: {
|
|
fontSize: '1.5rem',
|
|
fontFamily: 'Public Sans',
|
|
color: headingColor,
|
|
fontWeight: 500,
|
|
offsetY: -15,
|
|
formatter: function (val) {
|
|
return parseInt(val) + '%';
|
|
}
|
|
},
|
|
name: {
|
|
offsetY: 20,
|
|
fontFamily: 'Public Sans'
|
|
},
|
|
total: {
|
|
show: true,
|
|
fontSize: '15px',
|
|
fontFamily: 'Public Sans',
|
|
label: 'Average',
|
|
color: legendColor,
|
|
formatter: function (w) {
|
|
return '25%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
if (typeof leadsReportChartEl !== undefined && leadsReportChartEl !== null) {
|
|
const leadsReportChart = new ApexCharts(leadsReportChartEl, leadsReportChartConfig);
|
|
leadsReportChart.render();
|
|
}
|
|
})();
|