798 lines
18 KiB
JavaScript
798 lines
18 KiB
JavaScript
/**
|
|
* Dashboard Analytics
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
function projectCardChart(project) {
|
|
// Order Statistics Chart
|
|
// --------------------------------------------------------------------
|
|
|
|
let cardColor, headingColor, axisColor, shadeColor, borderColor;
|
|
|
|
cardColor = config.colors.cardColor;
|
|
headingColor = config.colors.headingColor;
|
|
axisColor = config.colors.axisColor;
|
|
borderColor = config.colors.borderColor;
|
|
|
|
var divname = "#projectstatuschart-" + project.id;
|
|
const chartOrderStatistics = document.querySelector(divname),
|
|
orderChartConfig = {
|
|
chart: {
|
|
height: 165,
|
|
width: 130,
|
|
type: "donut",
|
|
},
|
|
labels: ["Electronic", "Sports", "Decor", "Fashion"],
|
|
series: [85, 15, 50, 50],
|
|
colors: [
|
|
config.colors.primary,
|
|
config.colors.secondary,
|
|
config.colors.info,
|
|
config.colors.success,
|
|
],
|
|
stroke: {
|
|
width: 5,
|
|
colors: [cardColor],
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
formatter: function (val, opt) {
|
|
return parseInt(val) + "%";
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 15,
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: { type: "none" },
|
|
},
|
|
active: {
|
|
filter: { type: "none" },
|
|
},
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: "75%",
|
|
labels: {
|
|
show: true,
|
|
value: {
|
|
fontSize: "1.5rem",
|
|
fontFamily: "Public Sans",
|
|
color: headingColor,
|
|
offsetY: -15,
|
|
formatter: function (val) {
|
|
return parseInt(val) + "%";
|
|
},
|
|
},
|
|
name: {
|
|
offsetY: 20,
|
|
fontFamily: "Public Sans",
|
|
},
|
|
total: {
|
|
show: true,
|
|
fontSize: "0.8125rem",
|
|
color: axisColor,
|
|
label: "Weekly",
|
|
formatter: function (w) {
|
|
return "38%";
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
if (
|
|
typeof chartOrderStatistics !== undefined &&
|
|
chartOrderStatistics !== null
|
|
) {
|
|
const statisticsChart = new ApexCharts(
|
|
chartOrderStatistics,
|
|
orderChartConfig
|
|
);
|
|
statisticsChart.render();
|
|
}
|
|
}
|
|
|
|
function dashboardAnalitics() {
|
|
let cardColor, headingColor, axisColor, shadeColor, borderColor;
|
|
|
|
cardColor = config.colors.cardColor;
|
|
headingColor = config.colors.headingColor;
|
|
axisColor = config.colors.axisColor;
|
|
borderColor = config.colors.borderColor;
|
|
|
|
// Total Revenue Report Chart - Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const totalRevenueChartEl = document.querySelector("#totalRevenueChart"),
|
|
totalRevenueChartOptions = {
|
|
series: [
|
|
{
|
|
name: "2021",
|
|
data: [18, 7, 15, 29, 18, 12, 9],
|
|
},
|
|
{
|
|
name: "2020",
|
|
data: [-13, -18, -9, -14, -5, -17, -15],
|
|
},
|
|
],
|
|
chart: {
|
|
height: 300,
|
|
stacked: true,
|
|
type: "bar",
|
|
toolbar: { show: false },
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: "33%",
|
|
borderRadius: 12,
|
|
startingShape: "rounded",
|
|
endingShape: "rounded",
|
|
},
|
|
},
|
|
colors: [config.colors.primary, config.colors.info],
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
width: 6,
|
|
lineCap: "round",
|
|
colors: [cardColor],
|
|
},
|
|
legend: {
|
|
show: true,
|
|
horizontalAlign: "left",
|
|
position: "top",
|
|
markers: {
|
|
height: 8,
|
|
width: 8,
|
|
radius: 12,
|
|
offsetX: -3,
|
|
},
|
|
labels: {
|
|
colors: axisColor,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 10,
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
padding: {
|
|
top: 0,
|
|
bottom: -8,
|
|
left: 20,
|
|
right: 20,
|
|
},
|
|
},
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
labels: {
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: axisColor,
|
|
},
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: axisColor,
|
|
},
|
|
},
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1700,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "32%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1580,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "35%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1440,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "42%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1300,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "48%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1200,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "40%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 1040,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 11,
|
|
columnWidth: "48%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 991,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "30%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 840,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "35%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 768,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "28%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 640,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "32%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 576,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "37%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "45%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 420,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "52%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 380,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 10,
|
|
columnWidth: "60%",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
states: {
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (
|
|
typeof totalRevenueChartEl !== undefined &&
|
|
totalRevenueChartEl !== null
|
|
) {
|
|
const totalRevenueChart = new ApexCharts(
|
|
totalRevenueChartEl,
|
|
totalRevenueChartOptions
|
|
);
|
|
totalRevenueChart.render();
|
|
}
|
|
|
|
// Growth Chart - Radial Bar Chart
|
|
// --------------------------------------------------------------------
|
|
const growthChartEl = document.querySelector("#growthChart"),
|
|
growthChartOptions = {
|
|
series: [78],
|
|
labels: ["Growth"],
|
|
chart: {
|
|
height: 240,
|
|
type: "radialBar",
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
size: 150,
|
|
offsetY: 10,
|
|
startAngle: -150,
|
|
endAngle: 150,
|
|
hollow: {
|
|
size: "55%",
|
|
},
|
|
track: {
|
|
background: cardColor,
|
|
strokeWidth: "100%",
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: 15,
|
|
color: headingColor,
|
|
fontSize: "15px",
|
|
fontWeight: "500",
|
|
fontFamily: "Public Sans",
|
|
},
|
|
value: {
|
|
offsetY: -25,
|
|
color: headingColor,
|
|
fontSize: "22px",
|
|
fontWeight: "500",
|
|
fontFamily: "Public Sans",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
colors: [config.colors.primary],
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shade: "dark",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: [config.colors.primary],
|
|
inverseColors: true,
|
|
opacityFrom: 1,
|
|
opacityTo: 0.6,
|
|
stops: [30, 70, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 5,
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -35,
|
|
bottom: -10,
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (typeof growthChartEl !== undefined && growthChartEl !== null) {
|
|
const growthChart = new ApexCharts(growthChartEl, growthChartOptions);
|
|
growthChart.render();
|
|
}
|
|
|
|
// Profit Report Line Chart
|
|
// --------------------------------------------------------------------
|
|
const profileReportChartEl = document.querySelector("#profileReportChart"),
|
|
profileReportChartConfig = {
|
|
chart: {
|
|
height: 80,
|
|
// width: 175,
|
|
type: "line",
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
top: 10,
|
|
left: 5,
|
|
blur: 3,
|
|
color: config.colors.warning,
|
|
opacity: 0.15,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
right: 8,
|
|
},
|
|
},
|
|
colors: [config.colors.warning],
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 5,
|
|
curve: "smooth",
|
|
},
|
|
series: [
|
|
{
|
|
data: [110, 270, 145, 245, 205, 285],
|
|
},
|
|
],
|
|
xaxis: {
|
|
show: false,
|
|
lines: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
},
|
|
};
|
|
if (
|
|
typeof profileReportChartEl !== undefined &&
|
|
profileReportChartEl !== null
|
|
) {
|
|
const profileReportChart = new ApexCharts(
|
|
profileReportChartEl,
|
|
profileReportChartConfig
|
|
);
|
|
profileReportChart.render();
|
|
}
|
|
|
|
// Order Statistics Chart
|
|
// --------------------------------------------------------------------
|
|
const chartOrderStatistics = document.querySelector("#orderStatisticsChart"),
|
|
orderChartConfig = {
|
|
chart: {
|
|
height: 165,
|
|
width: 130,
|
|
type: "donut",
|
|
},
|
|
labels: ["Electronic", "Sports", "Decor", "Fashion"],
|
|
series: [85, 15, 50, 50],
|
|
colors: [
|
|
config.colors.primary,
|
|
config.colors.secondary,
|
|
config.colors.info,
|
|
config.colors.success,
|
|
],
|
|
stroke: {
|
|
width: 5,
|
|
colors: [cardColor],
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
formatter: function (val, opt) {
|
|
return parseInt(val) + "%";
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 15,
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: { type: "none" },
|
|
},
|
|
active: {
|
|
filter: { type: "none" },
|
|
},
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: "75%",
|
|
labels: {
|
|
show: true,
|
|
value: {
|
|
fontSize: "1.5rem",
|
|
fontFamily: "Public Sans",
|
|
color: headingColor,
|
|
offsetY: -15,
|
|
formatter: function (val) {
|
|
return parseInt(val) + "%";
|
|
},
|
|
},
|
|
name: {
|
|
offsetY: 20,
|
|
fontFamily: "Public Sans",
|
|
},
|
|
total: {
|
|
show: true,
|
|
fontSize: "0.8125rem",
|
|
color: axisColor,
|
|
label: "Weekly",
|
|
formatter: function (w) {
|
|
return "38%";
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (
|
|
typeof chartOrderStatistics !== undefined &&
|
|
chartOrderStatistics !== null
|
|
) {
|
|
const statisticsChart = new ApexCharts(
|
|
chartOrderStatistics,
|
|
orderChartConfig
|
|
);
|
|
statisticsChart.render();
|
|
}
|
|
|
|
// Income Chart - Area chart
|
|
// --------------------------------------------------------------------
|
|
const incomeChartEl = document.querySelector("#incomeChart"),
|
|
incomeChartConfig = {
|
|
series: [
|
|
{
|
|
data: [24, 21, 30, 22, 42, 26, 35, 29],
|
|
},
|
|
],
|
|
chart: {
|
|
height: 215,
|
|
parentHeightOffset: 0,
|
|
parentWidthOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
type: "area",
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
curve: "smooth",
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
markers: {
|
|
size: 6,
|
|
colors: "transparent",
|
|
strokeColors: "transparent",
|
|
strokeWidth: 4,
|
|
discrete: [
|
|
{
|
|
fillColor: config.colors.white,
|
|
seriesIndex: 0,
|
|
dataPointIndex: 7,
|
|
strokeColor: config.colors.primary,
|
|
strokeWidth: 2,
|
|
size: 6,
|
|
radius: 8,
|
|
},
|
|
],
|
|
hover: {
|
|
size: 7,
|
|
},
|
|
},
|
|
colors: [config.colors.primary],
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shade: shadeColor,
|
|
shadeIntensity: 0.6,
|
|
opacityFrom: 0.5,
|
|
opacityTo: 0.25,
|
|
stops: [0, 95, 100],
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
padding: {
|
|
top: -20,
|
|
bottom: -8,
|
|
left: -10,
|
|
right: 8,
|
|
},
|
|
},
|
|
xaxis: {
|
|
categories: ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: axisColor,
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
min: 10,
|
|
max: 50,
|
|
tickAmount: 4,
|
|
},
|
|
};
|
|
if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
|
|
const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
|
|
incomeChart.render();
|
|
}
|
|
|
|
// Expenses Mini Chart - Radial Chart
|
|
// --------------------------------------------------------------------
|
|
const weeklyExpensesEl = document.querySelector("#expensesOfWeek"),
|
|
weeklyExpensesConfig = {
|
|
series: [65],
|
|
chart: {
|
|
width: 60,
|
|
height: 60,
|
|
type: "radialBar",
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: 0,
|
|
endAngle: 360,
|
|
strokeWidth: "8",
|
|
hollow: {
|
|
margin: 2,
|
|
size: "45%",
|
|
},
|
|
track: {
|
|
strokeWidth: "50%",
|
|
background: borderColor,
|
|
},
|
|
dataLabels: {
|
|
show: true,
|
|
name: {
|
|
show: false,
|
|
},
|
|
value: {
|
|
formatter: function (val) {
|
|
return "$" + parseInt(val);
|
|
},
|
|
offsetY: 5,
|
|
color: "#697a8d",
|
|
fontSize: "13px",
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
colors: config.colors.primary,
|
|
},
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -10,
|
|
bottom: -15,
|
|
left: -10,
|
|
right: -10,
|
|
},
|
|
},
|
|
states: {
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
active: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) {
|
|
const weeklyExpenses = new ApexCharts(
|
|
weeklyExpensesEl,
|
|
weeklyExpensesConfig
|
|
);
|
|
weeklyExpenses.render();
|
|
}
|
|
}
|