Viewing File: /home/ubuntu/voice-assistant-backend/public/admin-assets/assets/js/widgets/modules-widgets.js
/**
*
* Analytics
*
**/
window.addEventListener("load", function(){
try {
getequationThemeObject = localStorage.getItem("theme");
getParseObject = JSON.parse(getequationThemeObject)
ParsedObject = getParseObject;
if (ParsedObject.settings.layout.darkMode) {
var Theme = 'dark';
Apex.tooltip = {
theme: Theme
}
/**
==============================
| @Options Charts Script |
==============================
*/
/*
======================================
Visitor Statistics | Options
======================================
*/
// Total Visits
var spark1 = {
chart: {
id: 'unique-visits',
group: 'sparks2',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 2,
color: '#e2a03f',
opacity: 0.7,
}
},
series: [{
data: [21, 9, 36, 12, 44, 25, 59, 41, 66, 25]
}],
stroke: {
curve: 'smooth',
width: 2,
},
markers: {
size: 0
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
colors: ['#e2a03f'],
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
},
responsive: [{
breakpoint: 1351,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 0
}
},
},
},
{
breakpoint: 1200,
options: {
chart: {
height: 80,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
},
},
{
breakpoint: 576,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 45,
bottom: 0,
left: 0
}
},
},
}
]
}
// Paid Visits
var spark2 = {
chart: {
id: 'total-users',
group: 'sparks1',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 3,
left: 1,
blur: 3,
color: '#009688',
opacity: 0.7,
}
},
series: [{
data: [22, 19, 30, 47, 32, 44, 34, 55, 41, 69]
}],
stroke: {
curve: 'smooth',
width: 2,
},
markers: {
size: 0
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
colors: ['#009688'],
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
},
responsive: [{
breakpoint: 1351,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 0
}
},
},
},
{
breakpoint: 1200,
options: {
chart: {
height: 80,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
},
},
{
breakpoint: 576,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 0
}
},
},
}
]
}
/*
===================================
Unique Visitors | Options
===================================
*/
var d_1options1 = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
colors: ['#622bd7', '#ffbb44'],
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded',
borderRadius: 10,
},
},
dataLabels: {
enabled: false
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '14px',
markers: {
width: 10,
height: 10,
offsetX: -5,
offsetY: 0
},
itemMargin: {
horizontal: 10,
vertical: 8
}
},
grid: {
borderColor: '#191e3a',
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
series: [{
name: 'Direct',
data: [58, 44, 55, 57, 56, 61, 58, 63, 60, 66, 56, 63]
}, {
name: 'Organic',
data: [91, 76, 85, 101, 98, 87, 105, 91, 114, 94, 66, 70]
}],
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
fill: {
type: 'gradient',
gradient: {
shade: Theme,
type: 'vertical',
shadeIntensity: 0.3,
inverseColors: false,
opacityFrom: 1,
opacityTo: 0.8,
stops: [0, 100]
}
},
tooltip: {
marker : {
show: false,
},
theme: Theme,
y: {
formatter: function (val) {
return val
}
}
},
responsive: [
{
breakpoint: 767,
options: {
plotOptions: {
bar: {
borderRadius: 0,
columnWidth: "50%"
}
}
}
},
]
}
/*
==============================
Statistics | Options
==============================
*/
// Followers
var d_1options3 = {
chart: {
id: 'sparkline1',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2,
},
series: [{
name: 'Sales',
data: [38, 60, 38, 52, 36, 40, 28 ]
}],
labels: ['1', '2', '3', '4', '5', '6', '7'],
yaxis: {
min: 0
},
colors: ['#4361ee'],
tooltip: {
x: {
show: false,
}
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: 5,
right: 0,
left: 0
},
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .30,
opacityTo: .05,
stops: [100, 100]
}
}
}
// Referral
var d_1options4 = {
chart: {
id: 'sparkline1',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2,
},
series: [{
name: 'Sales',
data: [ 60, 28, 52, 38, 40, 36, 38]
}],
labels: ['1', '2', '3', '4', '5', '6', '7'],
yaxis: {
min: 0
},
colors: ['#e7515a'],
tooltip: {
x: {
show: false,
}
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: 5,
right: 0,
left: 0
},
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .30,
opacityTo: .05,
stops: [100, 100]
}
}
}
// Engagement Rate
var d_1options5 = {
chart: {
id: 'sparkline1',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2,
},
fill: {
opacity: 1,
},
series: [{
name: 'Sales',
data: [28, 50, 36, 60, 38, 52, 38 ]
}],
labels: ['1', '2', '3', '4', '5', '6', '7'],
yaxis: {
min: 0
},
colors: ['#00ab55'],
tooltip: {
x: {
show: false,
}
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: 5,
right: 0,
left: 0
},
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .30,
opacityTo: .05,
stops: [100, 100]
}
}
}
} else {
var Theme = 'dark';
Apex.tooltip = {
theme: Theme
}
/**
==============================
| @Options Charts Script |
==============================
*/
/*
======================================
Visitor Statistics | Options
======================================
*/
// Total Visits
var spark1 = {
chart: {
id: 'unique-visits',
group: 'sparks2',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 2,
color: '#e2a03f',
opacity: 0.7,
}
},
series: [{
data: [21, 9, 36, 12, 44, 25, 59, 41, 66, 25]
}],
stroke: {
curve: 'smooth',
width: 2,
},
markers: {
size: 0
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
colors: ['#e2a03f'],
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
},
responsive: [{
breakpoint: 1351,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 0
}
},
},
},
{
breakpoint: 1200,
options: {
chart: {
height: 80,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
},
},
{
breakpoint: 576,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 45,
bottom: 0,
left: 0
}
},
},
}
]
}
// Paid Visits
var spark2 = {
chart: {
id: 'total-users',
group: 'sparks1',
type: 'line',
height: 80,
sparkline: {
enabled: true
},
dropShadow: {
enabled: true,
top: 3,
left: 1,
blur: 3,
color: '#009688',
opacity: 0.7,
}
},
series: [{
data: [22, 19, 30, 47, 32, 44, 34, 55, 41, 69]
}],
stroke: {
curve: 'smooth',
width: 2,
},
markers: {
size: 0
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
colors: ['#009688'],
tooltip: {
x: {
show: false
},
y: {
title: {
formatter: function formatter(val) {
return '';
}
}
}
},
responsive: [{
breakpoint: 1351,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 0
}
},
},
},
{
breakpoint: 1200,
options: {
chart: {
height: 80,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 40
}
},
},
},
{
breakpoint: 576,
options: {
chart: {
height: 95,
},
grid: {
padding: {
top: 35,
bottom: 0,
left: 0
}
},
},
}
]
}
/*
===================================
Unique Visitors | Options
===================================
*/
var d_1options1 = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false,
}
},
colors: ['#622bd7', '#ffbb44'],
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded',
borderRadius: 10,
},
},
dataLabels: {
enabled: false
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '14px',
markers: {
width: 10,
height: 10,
offsetX: -5,
offsetY: 0
},
itemMargin: {
horizontal: 10,
vertical: 8
}
},
grid: {
borderColor: '#e0e6ed',
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
series: [{
name: 'Direct',
data: [58, 44, 55, 57, 56, 61, 58, 63, 60, 66, 56, 63]
}, {
name: 'Organic',
data: [91, 76, 85, 101, 98, 87, 105, 91, 114, 94, 66, 70]
}],
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
fill: {
type: 'gradient',
gradient: {
shade: Theme,
type: 'vertical',
shadeIntensity: 0.3,
inverseColors: false,
opacityFrom: 1,
opacityTo: 0.8,
stops: [0, 100]
}
},
tooltip: {
marker : {
show: false,
},
theme: Theme,
y: {
formatter: function (val) {
return val
}
}
},
responsive: [
{
breakpoint: 767,
options: {
plotOptions: {
bar: {
borderRadius: 0,
columnWidth: "50%"
}
}
}
},
]
}
/*
==============================
Statistics | Options
==============================
*/
// Followers
var d_1options3 = {
chart: {
id: 'sparkline1',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2,
},
series: [{
name: 'Sales',
data: [38, 60, 38, 52, 36, 40, 28 ]
}],
labels: ['1', '2', '3', '4', '5', '6', '7'],
yaxis: {
min: 0
},
colors: ['#4361ee'],
tooltip: {
x: {
show: false,
}
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: 5,
right: 0,
left: 0
},
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .40,
opacityTo: .05,
stops: [100, 100]
}
}
}
// Referral
var d_1options4 = {
chart: {
id: 'sparkline1',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2,
},
series: [{
name: 'Sales',
data: [ 60, 28, 52, 38, 40, 36, 38]
}],
labels: ['1', '2', '3', '4', '5', '6', '7'],
yaxis: {
min: 0
},
colors: ['#e7515a'],
tooltip: {
x: {
show: false,
}
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: 5,
right: 0,
left: 0
},
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .40,
opacityTo: .05,
stops: [100, 100]
}
}
}
// Engagement Rate
var d_1options5 = {
chart: {
id: 'sparkline1',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2,
},
fill: {
opacity: 1,
},
series: [{
name: 'Sales',
data: [28, 50, 36, 60, 38, 52, 38 ]
}],
labels: ['1', '2', '3', '4', '5', '6', '7'],
yaxis: {
min: 0
},
colors: ['#00ab55'],
tooltip: {
x: {
show: false,
}
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: 5,
right: 0,
left: 0
},
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .40,
opacityTo: .05,
stops: [100, 100]
}
}
}
}
/**
==============================
| @Render Charts Script |
==============================
*/
/*
======================================
Visitor Statistics | Script
======================================
*/
// Total Visits
d_1C_1 = new ApexCharts(document.querySelector("#total-users"), spark1);
d_1C_1.render();
// Paid Visits
d_1C_2 = new ApexCharts(document.querySelector("#paid-visits"), spark2);
d_1C_2.render();
/*
===================================
Unique Visitors | Script
===================================
*/
var d_1C_3 = new ApexCharts(
document.querySelector("#uniqueVisits"),
d_1options1
);
d_1C_3.render();
/*
==============================
Statistics | Script
==============================
*/
// Followers
var d_1C_5 = new ApexCharts(document.querySelector("#hybrid_followers"), d_1options3);
d_1C_5.render()
// Referral
var d_1C_6 = new ApexCharts(document.querySelector("#hybrid_followers1"), d_1options4);
d_1C_6.render()
// Engagement Rate
var d_1C_7 = new ApexCharts(document.querySelector("#hybrid_followers3"), d_1options5);
d_1C_7.render()
/*
=============================================
Perfect Scrollbar | Notifications
=============================================
*/
const ps = new PerfectScrollbar(document.querySelector('.mt-container'));
/**
* =================================================================================================
* | @Re_Render | Re render all the necessary JS when clicked to switch/toggle theme |
* =================================================================================================
*/
document.querySelector('.theme-toggle').addEventListener('click', function() {
getequationThemeObject = localStorage.getItem("theme");
getParseObject = JSON.parse(getequationThemeObject)
ParsedObject = getParseObject;
// console.log(ParsedObject.settings.layout.darkMode)
if (ParsedObject.settings.layout.darkMode) {
/*
==============================
| @Re-Render Charts Script |
==============================
*/
/*
===================================
Unique Visitors | Script
===================================
*/
d_1C_3.updateOptions({
grid: {
borderColor: '#191e3a',
},
})
/*
==============================
Statistics | Script
==============================
*/
// Followers
d_1C_5.updateOptions({
fill: {
type:"gradient",
gradient: {
opacityFrom: .30,
}
}
})
// Referral
d_1C_6.updateOptions({
fill: {
type:"gradient",
gradient: {
opacityFrom: .30,
}
}
})
// Engagement Rate
d_1C_7.updateOptions({
fill: {
type:"gradient",
gradient: {
opacityFrom: .30,
}
}
})
} else {
/*
==============================
| @Re-Render Charts Script |
==============================
*/
/*
===================================
Unique Visitors | Script
===================================
*/
d_1C_3.updateOptions({
grid: {
borderColor: '#e0e6ed',
},
})
/*
==============================
Statistics | Script
==============================
*/
// Followers
d_1C_5.updateOptions({
fill: {
type:"gradient",
gradient: {
opacityFrom: .40,
}
}
})
// Referral
d_1C_6.updateOptions({
fill: {
type:"gradient",
gradient: {
opacityFrom: .40,
}
}
})
// Engagement Rate
d_1C_7.updateOptions({
fill: {
type:"gradient",
gradient: {
opacityFrom: .40,
}
}
})
}
})
} catch(e) {
// statements
console.log(e);
}
})
/**
*
* Sales
*
**/
window.addEventListener("load", function(){
try {
getequationThemeObject = localStorage.getItem("theme");
getParseObject = JSON.parse(getequationThemeObject)
ParsedObject = getParseObject;
if (ParsedObject.settings.layout.darkMode) {
var Theme = 'dark';
Apex.tooltip = {
theme: Theme
}
/**
==============================
| @Options Charts Script |
==============================
*/
/*
=============================
Daily Sales | Options
=============================
*/
var d_2options1 = {
chart: {
height: 160,
type: 'bar',
stacked: true,
stackType: '100%',
toolbar: {
show: false,
}
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: [3, 4],
curve: "smooth",
},
colors: ['#e2a03f', '#e0e6ed'],
series: [{
name: 'Sales',
data: [44, 55, 41, 67, 22, 43, 21]
},{
name: 'Last Week',
data: [13, 23, 20, 8, 13, 27, 33]
}],
xaxis: {
labels: {
show: false,
},
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
crosshairs: {
show: false
}
},
yaxis: {
show: false
},
fill: {
opacity: 1
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '25%',
borderRadius: 8,
}
},
legend: {
show: false,
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: -20,
right: 0,
bottom: -40,
left: 0
},
},
responsive: [
{
breakpoint: 575,
options: {
plotOptions: {
bar: {
borderRadius: 5,
columnWidth: '35%'
}
},
}
},
],
}
/*
=============================
Total Orders | Options
=============================
*/
var d_2options2 = {
chart: {
id: 'sparkline1',
group: 'sparklines',
type: 'area',
height: 290,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .30,
opacityTo: .05,
stops: [100, 100]
}
},
series: [{
name: 'Sales',
data: [28, 40, 36, 52, 38, 60, 38, 52, 36, 40]
}],
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
yaxis: {
min: 0
},
grid: {
padding: {
top: 125,
right: 0,
bottom: 0,
left: 0
},
},
tooltip: {
x: {
show: false,
},
theme: Theme
},
colors: ['#00ab55']
}
/*
=================================
Revenue Monthly | Options
=================================
*/
var options1 = {
chart: {
fontFamily: 'Nunito, sans-serif',
height: 365,
type: 'area',
zoom: {
enabled: false
},
dropShadow: {
enabled: true,
opacity: 0.2,
blur: 10,
left: -7,
top: 22
},
toolbar: {
show: false
},
},
colors: ['#e7515a', '#2196f3'],
dataLabels: {
enabled: false
},
markers: {
discrete: [{
seriesIndex: 0,
dataPointIndex: 7,
fillColor: '#000',
strokeColor: '#000',
size: 5
}, {
seriesIndex: 2,
dataPointIndex: 11,
fillColor: '#000',
strokeColor: '#000',
size: 4
}]
},
subtitle: {
text: '$10,840',
align: 'left',
margin: 0,
offsetX: 100,
offsetY: 20,
floating: false,
style: {
fontSize: '18px',
color: '#00ab55'
}
},
title: {
text: 'Total Profit',
align: 'left',
margin: 0,
offsetX: -10,
offsetY: 20,
floating: false,
style: {
fontSize: '18px',
color: '#bfc9d4'
},
},
stroke: {
show: true,
curve: 'smooth',
width: 2,
lineCap: 'square'
},
series: [{
name: 'Expenses',
data: [16800, 16800, 15500, 14800, 15500, 17000, 21000, 16000, 15000, 17000, 14000, 17000]
}, {
name: 'Income',
data: [16500, 17500, 16200, 17300, 16000, 21500, 16000, 17000, 16000, 19000, 18000, 19000]
}],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
xaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
show: true
},
labels: {
offsetX: 0,
offsetY: 5,
style: {
fontSize: '12px',
fontFamily: 'Nunito, sans-serif',
cssClass: 'apexcharts-xaxis-title',
},
}
},
yaxis: {
labels: {
formatter: function(value, index) {
return (value / 1000) + 'K'
},
offsetX: -15,
offsetY: 0,
style: {
fontSize: '12px',
fontFamily: 'Nunito, sans-serif',
cssClass: 'apexcharts-yaxis-title',
},
}
},
grid: {
borderColor: '#191e3a',
strokeDashArray: 5,
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: false,
}
},
padding: {
top: -50,
right: 0,
bottom: 0,
left: 5
},
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetY: -50,
fontSize: '16px',
fontFamily: 'Quicksand, sans-serif',
markers: {
width: 10,
height: 10,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
onClick: undefined,
offsetX: -5,
offsetY: 0
},
itemMargin: {
horizontal: 10,
vertical: 20
}
},
tooltip: {
theme: Theme,
marker: {
show: true,
},
x: {
show: false,
}
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .19,
opacityTo: .05,
stops: [100, 100]
}
},
responsive: [{
breakpoint: 575,
options: {
legend: {
offsetY: -50,
},
},
}]
}
/*
==================================
Sales By Category | Options
==================================
*/
var options = {
chart: {
type: 'donut',
width: 370,
height: 430
},
colors: ['#622bd7', '#e2a03f', '#e7515a', '#e2a03f'],
dataLabels: {
enabled: false
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '14px',
markers: {
width: 10,
height: 10,
offsetX: -5,
offsetY: 0
},
itemMargin: {
horizontal: 10,
vertical: 30
}
},
plotOptions: {
pie: {
donut: {
size: '75%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '29px',
fontFamily: 'Nunito, sans-serif',
color: undefined,
offsetY: -10
},
value: {
show: true,
fontSize: '26px',
fontFamily: 'Nunito, sans-serif',
color: '#bfc9d4',
offsetY: 16,
formatter: function (val) {
return val
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
color: '#888ea8',
fontSize: '30px',
formatter: function (w) {
return w.globals.seriesTotals.reduce( function(a, b) {
return a + b
}, 0)
}
}
}
}
}
},
stroke: {
show: true,
width: 15,
colors: '#0e1726'
},
series: [985, 737, 270],
labels: ['Apparel', 'Sports', 'Others'],
responsive: [
{
breakpoint: 1440, options: {
chart: {
width: 325
},
}
},
{
breakpoint: 1199, options: {
chart: {
width: 380
},
}
},
{
breakpoint: 575, options: {
chart: {
width: 320
},
}
},
],
}
} else {
var Theme = 'dark';
Apex.tooltip = {
theme: Theme
}
/**
==============================
| @Options Charts Script |
==============================
*/
/*
=============================
Daily Sales | Options
=============================
*/
var d_2options1 = {
chart: {
height: 160,
type: 'bar',
stacked: true,
stackType: '100%',
toolbar: {
show: false,
}
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: [3, 4],
curve: "smooth",
},
colors: ['#e2a03f', '#e0e6ed'],
series: [{
name: 'Sales',
data: [44, 55, 41, 67, 22, 43, 21]
},{
name: 'Last Week',
data: [13, 23, 20, 8, 13, 27, 33]
}],
xaxis: {
labels: {
show: false,
},
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
crosshairs: {
show: false
}
},
yaxis: {
show: false
},
fill: {
opacity: 1
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '25%',
borderRadius: 8,
}
},
legend: {
show: false,
},
grid: {
show: false,
xaxis: {
lines: {
show: false
}
},
padding: {
top: -20,
right: 0,
bottom: -40,
left: 0
},
},
responsive: [
{
breakpoint: 575,
options: {
plotOptions: {
bar: {
borderRadius: 5,
columnWidth: '35%'
}
},
}
},
],
}
/*
=============================
Total Orders | Options
=============================
*/
var d_2options2 = {
chart: {
id: 'sparkline1',
group: 'sparklines',
type: 'area',
height: 290,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'smooth',
width: 2
},
fill: {
opacity: 1,
// type:"gradient",
// gradient: {
// type: "vertical",
// shadeIntensity: 1,
// inverseColors: !1,
// opacityFrom: .30,
// opacityTo: .05,
// stops: [100, 100]
// }
},
series: [{
name: 'Sales',
data: [28, 40, 36, 52, 38, 60, 38, 52, 36, 40]
}],
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
yaxis: {
min: 0
},
grid: {
padding: {
top: 125,
right: 0,
bottom: 0,
left: 0
},
},
tooltip: {
x: {
show: false,
},
theme: Theme
},
colors: ['#00ab55']
}
/*
=================================
Revenue Monthly | Options
=================================
*/
var options1 = {
chart: {
fontFamily: 'Nunito, sans-serif',
height: 365,
type: 'area',
zoom: {
enabled: false
},
dropShadow: {
enabled: true,
opacity: 0.2,
blur: 10,
left: -7,
top: 22
},
toolbar: {
show: false
},
},
colors: ['#1b55e2', '#e7515a'],
dataLabels: {
enabled: false
},
markers: {
discrete: [{
seriesIndex: 0,
dataPointIndex: 7,
fillColor: '#000',
strokeColor: '#000',
size: 5
}, {
seriesIndex: 2,
dataPointIndex: 11,
fillColor: '#000',
strokeColor: '#000',
size: 4
}]
},
subtitle: {
text: '$10,840',
align: 'left',
margin: 0,
offsetX: 100,
offsetY: 20,
floating: false,
style: {
fontSize: '18px',
color: '#4361ee'
}
},
title: {
text: 'Total Profit',
align: 'left',
margin: 0,
offsetX: -10,
offsetY: 20,
floating: false,
style: {
fontSize: '18px',
color: '#0e1726'
},
},
stroke: {
show: true,
curve: 'smooth',
width: 2,
lineCap: 'square'
},
series: [{
name: 'Expenses',
data: [16800, 16800, 15500, 14800, 15500, 17000, 21000, 16000, 15000, 17000, 14000, 17000]
}, {
name: 'Income',
data: [16500, 17500, 16200, 17300, 16000, 21500, 16000, 17000, 16000, 19000, 18000, 19000]
}],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
xaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
show: true
},
labels: {
offsetX: 0,
offsetY: 5,
style: {
fontSize: '12px',
fontFamily: 'Nunito, sans-serif',
cssClass: 'apexcharts-xaxis-title',
},
}
},
yaxis: {
labels: {
formatter: function(value, index) {
return (value / 1000) + 'K'
},
offsetX: -15,
offsetY: 0,
style: {
fontSize: '12px',
fontFamily: 'Nunito, sans-serif',
cssClass: 'apexcharts-yaxis-title',
},
}
},
grid: {
borderColor: '#e0e6ed',
strokeDashArray: 5,
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: false,
}
},
padding: {
top: -50,
right: 0,
bottom: 0,
left: 5
},
},
legend: {
position: 'top',
horizontalAlign: 'right',
offsetY: -50,
fontSize: '16px',
fontFamily: 'Quicksand, sans-serif',
markers: {
width: 10,
height: 10,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
onClick: undefined,
offsetX: -5,
offsetY: 0
},
itemMargin: {
horizontal: 10,
vertical: 20
}
},
tooltip: {
theme: Theme,
marker: {
show: true,
},
x: {
show: false,
}
},
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .19,
opacityTo: .05,
stops: [100, 100]
}
},
responsive: [{
breakpoint: 575,
options: {
legend: {
offsetY: -50,
},
},
}]
}
/*
==================================
Sales By Category | Options
==================================
*/
var options = {
chart: {
type: 'donut',
width: 370,
height: 430
},
colors: ['#622bd7', '#e2a03f', '#e7515a', '#e2a03f'],
dataLabels: {
enabled: false
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
fontSize: '14px',
markers: {
width: 10,
height: 10,
offsetX: -5,
offsetY: 0
},
itemMargin: {
horizontal: 10,
vertical: 30
}
},
plotOptions: {
pie: {
donut: {
size: '75%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '29px',
fontFamily: 'Nunito, sans-serif',
color: undefined,
offsetY: -10
},
value: {
show: true,
fontSize: '26px',
fontFamily: 'Nunito, sans-serif',
color: '#0e1726',
offsetY: 16,
formatter: function (val) {
return val
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
color: '#888ea8',
fontSize: '30px',
formatter: function (w) {
return w.globals.seriesTotals.reduce( function(a, b) {
return a + b
}, 0)
}
}
}
}
}
},
stroke: {
show: true,
width: 15,
colors: '#fff'
},
series: [985, 737, 270],
labels: ['Apparel', 'Sports', 'Others'],
responsive: [
{
breakpoint: 1440, options: {
chart: {
width: 325
},
}
},
{
breakpoint: 1199, options: {
chart: {
width: 380
},
}
},
{
breakpoint: 575, options: {
chart: {
width: 320
},
}
},
],
}
}
/**
==============================
| @Render Charts Script |
==============================
*/
/*
============================
Daily Sales | Render
============================
*/
var d_2C_1 = new ApexCharts(document.querySelector("#daily-sales"), d_2options1);
d_2C_1.render();
/*
============================
Total Orders | Render
============================
*/
var d_2C_2 = new ApexCharts(document.querySelector("#total-orders"), d_2options2);
d_2C_2.render();
/*
================================
Revenue Monthly | Render
================================
*/
var chart1 = new ApexCharts(
document.querySelector("#revenueMonthly"),
options1
);
chart1.render();
/*
=================================
Sales By Category | Render
=================================
*/
var chart = new ApexCharts(
document.querySelector("#chart-2"),
options
);
chart.render();
/*
=============================================
Perfect Scrollbar | Recent Activities
=============================================
*/
const ps = new PerfectScrollbar(document.querySelector('.mt-container-ra'));
// const topSellingProduct = new PerfectScrollbar('.widget-table-three .table-scroll table', {
// wheelSpeed:.5,
// swipeEasing:!0,
// minScrollbarLength:40,
// maxScrollbarLength:100,
// suppressScrollY: true
// });
/**
* =================================================================================================
* | @Re_Render | Re render all the necessary JS when clicked to switch/toggle theme |
* =================================================================================================
*/
document.querySelector('.theme-toggle').addEventListener('click', function() {
// console.log(localStorage);
getequationThemeObject = localStorage.getItem("theme");
getParseObject = JSON.parse(getequationThemeObject)
ParsedObject = getParseObject;
if (ParsedObject.settings.layout.darkMode) {
/*
=================================
Revenue Monthly | Options
=================================
*/
chart1.updateOptions({
colors: ['#e7515a', '#2196f3'],
subtitle: {
style: {
color: '#00ab55'
}
},
title: {
style: {
color: '#bfc9d4'
}
},
grid: {
borderColor: '#191e3a',
}
})
/*
==================================
Sales By Category | Options
==================================
*/
chart.updateOptions({
stroke: {
colors: '#0e1726'
},
plotOptions: {
pie: {
donut: {
labels: {
value: {
color: '#bfc9d4'
}
}
}
}
}
})
/*
=============================
Total Orders | Options
=============================
*/
d_2C_2.updateOptions({
fill: {
type:"gradient",
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .30,
opacityTo: .05,
stops: [100, 100]
}
}
})
} else {
/*
=================================
Revenue Monthly | Options
=================================
*/
chart1.updateOptions({
colors: ['#1b55e2', '#e7515a'],
subtitle: {
style: {
color: '#4361ee'
}
},
title: {
style: {
color: '#0e1726'
}
},
grid: {
borderColor: '#e0e6ed',
}
})
/*
==================================
Sales By Category | Options
==================================
*/
chart.updateOptions({
stroke: {
colors: '#fff'
},
plotOptions: {
pie: {
donut: {
labels: {
value: {
color: '#0e1726'
}
}
}
}
}
})
/*
=============================
Total Orders | Options
=============================
*/
d_2C_2.updateOptions({
fill: {
type:"gradient",
opacity: 0.9,
gradient: {
type: "vertical",
shadeIntensity: 1,
inverseColors: !1,
opacityFrom: .45,
opacityTo: 0.1,
stops: [100, 100]
}
}
})
}
})
} catch(e) {
console.log(e);
}
})
Back to Directory
File Manager