Inisital Asset Commit
This commit is contained in:
Hickmeister
114
assets/js/app.js
Normal file
114
assets/js/app.js
Normal file
@@ -0,0 +1,114 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
new PerfectScrollbar(".app-container"),
|
||||
new PerfectScrollbar(".header-message-list"),
|
||||
new PerfectScrollbar(".header-notifications-list"),
|
||||
|
||||
|
||||
$(".mobile-toggle-icon").on("click", function () {
|
||||
$(".wrapper").toggleClass("toggled")
|
||||
}),
|
||||
|
||||
/* dark mode button */
|
||||
|
||||
$(".dark-mode").click(function () {
|
||||
$("html").attr("data-bs-theme", function (i, v) {
|
||||
return v === 'dark' ? 'light' : 'dark';
|
||||
})
|
||||
})
|
||||
|
||||
$(".dark-mode").on("click", function () {
|
||||
|
||||
if ($(".dark-mode-icon i").attr("class") == 'bx bx-sun') {
|
||||
$(".dark-mode-icon i").attr("class", "bx bx-moon");
|
||||
} else {
|
||||
$(".dark-mode-icon i").attr("class", "bx bx-sun");
|
||||
}
|
||||
}),
|
||||
|
||||
|
||||
|
||||
$(".mobile-toggle-menu").click(function () {
|
||||
$(".wrapper").hasClass("toggled") ? ($(".wrapper").removeClass("toggled"), $(".sidebar-wrapper").unbind("hover")) : ($(".wrapper").addClass("toggled"), $(".sidebar-wrapper").hover(function () {
|
||||
$(".wrapper").addClass("sidebar-hovered")
|
||||
}, function () {
|
||||
$(".wrapper").removeClass("sidebar-hovered")
|
||||
}))
|
||||
}),
|
||||
|
||||
// back to top button
|
||||
$(document).ready(function () {
|
||||
$(window).on("scroll", function () {
|
||||
$(this).scrollTop() > 300 ? $(".back-to-top").fadeIn() : $(".back-to-top").fadeOut()
|
||||
}), $(".back-to-top").on("click", function () {
|
||||
return $("html, body").animate({
|
||||
scrollTop: 0
|
||||
}, 600), !1
|
||||
})
|
||||
}),
|
||||
|
||||
|
||||
// menu
|
||||
$(function () {
|
||||
$("#menu").metisMenu()
|
||||
}),
|
||||
|
||||
// active
|
||||
$(function () {
|
||||
for (var e = window.location, o = $(".metismenu li a").filter(function () {
|
||||
return this.href == e
|
||||
}).addClass("").parent().addClass("mm-active"); o.is("li");) o = o.parent("").addClass("mm-show").parent("").addClass("mm-active")
|
||||
}),
|
||||
|
||||
// chat process
|
||||
$(".chat-toggle-btn").on("click", function () {
|
||||
$(".chat-wrapper").toggleClass("chat-toggled")
|
||||
}), $(".chat-toggle-btn-mobile").on("click", function () {
|
||||
$(".chat-wrapper").removeClass("chat-toggled")
|
||||
}),
|
||||
|
||||
// email
|
||||
$(".email-toggle-btn").on("click", function () {
|
||||
$(".email-wrapper").toggleClass("email-toggled")
|
||||
}), $(".email-toggle-btn-mobile").on("click", function () {
|
||||
$(".email-wrapper").removeClass("email-toggled")
|
||||
}), $(".compose-mail-btn").on("click", function () {
|
||||
$(".compose-mail-popup").show()
|
||||
}), $(".compose-mail-close").on("click", function () {
|
||||
$(".compose-mail-popup").hide()
|
||||
}),
|
||||
|
||||
|
||||
/* switcher */
|
||||
|
||||
$("#LightTheme").on("click", function () {
|
||||
$("html").attr("data-bs-theme", "light")
|
||||
}),
|
||||
|
||||
$("#DarkTheme").on("click", function () {
|
||||
$("html").attr("data-bs-theme", "dark")
|
||||
}),
|
||||
|
||||
$("#SemiDarkTheme").on("click", function () {
|
||||
$("html").attr("data-bs-theme", "semi-dark")
|
||||
}),
|
||||
|
||||
$("#BoderedTheme").on("click", function () {
|
||||
$("html").attr("data-bs-theme", "bodered-theme")
|
||||
})
|
||||
|
||||
|
||||
$(".switcher-btn").on("click", function () {
|
||||
$(".switcher-wrapper").toggleClass("switcher-toggled")
|
||||
}), $(".close-switcher").on("click", function () {
|
||||
$(".switcher-wrapper").removeClass("switcher-toggled")
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
7
assets/js/bootstrap.bundle.min.js
vendored
Normal file
7
assets/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/bootstrap.bundle.min.js.map
Normal file
1
assets/js/bootstrap.bundle.min.js.map
Normal file
File diff suppressed because one or more lines are too long
688
assets/js/index.js
Normal file
688
assets/js/index.js
Normal file
@@ -0,0 +1,688 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
|
||||
// chart 1
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Net Sales",
|
||||
data: [30, 15, 35, 12, 60, 20, 45]
|
||||
}],
|
||||
chart: {
|
||||
//width:150,
|
||||
foreColor: "#9ba7b2",
|
||||
toolbar: {
|
||||
show: !1,
|
||||
},
|
||||
height: 205,
|
||||
type: 'line',
|
||||
sparkline: {
|
||||
enabled: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#02c27a'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
//opacityFrom: 0.5,
|
||||
//opacityTo: 0.0,
|
||||
//stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ["#02c27a"],
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: 'rgba(0, 0, 0, 0.15)',
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart1"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 2
|
||||
|
||||
var options = {
|
||||
series: [78],
|
||||
chart: {
|
||||
height: 190,
|
||||
type: 'radialBar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
//startAngle: -110,
|
||||
//endAngle: 110,
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '80%',
|
||||
background: 'transparent',
|
||||
image: undefined,
|
||||
imageOffsetX: 0,
|
||||
imageOffsetY: 0,
|
||||
position: 'front',
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
top: 3,
|
||||
left: 0,
|
||||
blur: 4,
|
||||
opacity: 0.24
|
||||
}
|
||||
},
|
||||
track: {
|
||||
background: 'rgba(0, 0, 0, 0.1)',
|
||||
strokeWidth: '67%',
|
||||
margin: 0, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
top: -3,
|
||||
left: 0,
|
||||
blur: 4,
|
||||
opacity: 0.35
|
||||
}
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: -10,
|
||||
show: false,
|
||||
color: '#888',
|
||||
fontSize: '17px'
|
||||
},
|
||||
value: {
|
||||
offsetY: 10,
|
||||
color: '#111',
|
||||
fontSize: '24px',
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: ['#ff0844'],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
}
|
||||
},
|
||||
colors: ["#ffb199"],
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
labels: ['Active Users'],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart2"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 3
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Sales",
|
||||
data: [20, 5, 60, 10, 30, 20, 25]
|
||||
},
|
||||
{
|
||||
name: "Views",
|
||||
data: [17, 10, 45, 15, 25, 15, 40]
|
||||
}],
|
||||
chart: {
|
||||
//width:150,
|
||||
foreColor: "#9ba7b2",
|
||||
height: 210,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: !1,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 4,
|
||||
curve: 'smooth',
|
||||
colors: ['transparent']
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#0d6efd', 'rgba(13, 109, 253, 0.35);'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
//opacityFrom: 0.8,
|
||||
//opacityTo: 0.1,
|
||||
stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ['#0d6efd', "rgba(13, 109, 253, 0.35);"],
|
||||
plotOptions: {
|
||||
// bar: {
|
||||
// horizontal: !1,
|
||||
// columnWidth: "55%",
|
||||
// endingShape: "rounded"
|
||||
// }
|
||||
bar: {
|
||||
horizontal: false,
|
||||
borderRadius: 0,
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'last',
|
||||
columnWidth: '60%',
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: 'rgba(0, 0, 0, 0.15)',
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !0
|
||||
},
|
||||
x: {
|
||||
show: !0
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart3"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
// chart 4
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Net Sales",
|
||||
data: [30, 42, 35, 55, 42, 75, 50]
|
||||
}],
|
||||
chart: {
|
||||
//width:150,
|
||||
toolbar: {
|
||||
show: !1,
|
||||
},
|
||||
height: 210,
|
||||
type: 'area',
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#6f42c1'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.1,
|
||||
//stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ["#6f42c1"],
|
||||
grid: {
|
||||
show: false,
|
||||
borderColor: 'rgba(0, 0, 0, 0.15)',
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart4"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 5
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Total Clicks",
|
||||
data: [44, 30, 55, 44, 90, 45, 75]
|
||||
}],
|
||||
chart: {
|
||||
//width:150,
|
||||
toolbar: {
|
||||
show: !1,
|
||||
},
|
||||
height: 240,
|
||||
type: 'area',
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#fd7e14'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 0.5,
|
||||
opacityTo: 0.1
|
||||
//stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ["#fd7e14"],
|
||||
grid: {
|
||||
show: false,
|
||||
borderColor: 'rgba(0, 0, 0, 0.15)',
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart5"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 6
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Orders",
|
||||
data: [44, 69, 55, 44, 90, 45, 75, 55, 65, 68, 45, 78, 42, 55, 47, 30, 27]
|
||||
}],
|
||||
chart: {
|
||||
//width:150,
|
||||
toolbar: {
|
||||
show: !1,
|
||||
},
|
||||
height: 180,
|
||||
type: 'bar',
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
borderRadius: 10,
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'last',
|
||||
columnWidth: '40%',
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#008cff'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1
|
||||
//stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ["#008cff"],
|
||||
grid: {
|
||||
show: false,
|
||||
borderColor: 'rgba(0, 0, 0, 0.15)',
|
||||
strokeDashArray: 4,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart6"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
// chart 7
|
||||
var options = {
|
||||
series: [10, 24, 24],
|
||||
chart: {
|
||||
height: 240,
|
||||
type: 'donut',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
show: !1
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#ff6a00', '#98ec2d', '#3f51b5'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
//stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ["#ff6a00", "#98ec2d", "#3f51b5"],
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: "80%"
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart7"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
// chart 8
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Total Accounts",
|
||||
data: [4, 10, 25, 12, 25, 18, 40, 22, 7]
|
||||
}],
|
||||
chart: {
|
||||
//width:150,
|
||||
height: 105,
|
||||
type: 'area',
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#fd3550'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 0.8,
|
||||
opacityTo: 0.2,
|
||||
//stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ["#fd3550"],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart8"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
// chart 9
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Total Accounts",
|
||||
data: [20, 14, 25, 18, 20, 18, 40, 22, 45]
|
||||
}],
|
||||
chart: {
|
||||
//width:150,
|
||||
height: 105,
|
||||
type: 'area',
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#008cff'],
|
||||
shadeIntensity: 1,
|
||||
type: 'vertical',
|
||||
opacityFrom: 0.8,
|
||||
opacityTo: 0.2,
|
||||
//stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
colors: ["#008cff"],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart9"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
1497
assets/js/index2.js
Normal file
1497
assets/js/index2.js
Normal file
File diff suppressed because it is too large
Load Diff
736
assets/js/index3.js
Normal file
736
assets/js/index3.js
Normal file
@@ -0,0 +1,736 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
var e = {
|
||||
series: [{
|
||||
name: "Sessions",
|
||||
data: [14, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5]
|
||||
}],
|
||||
chart: {
|
||||
foreColor: "#9ba7b2",
|
||||
height: 310,
|
||||
type: "area",
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
toolbar: {
|
||||
show: !0
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .1
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 5,
|
||||
curve: "smooth"
|
||||
},
|
||||
xaxis: {
|
||||
//type: "datetime",
|
||||
categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
|
||||
},
|
||||
title: {
|
||||
text: "Sessions",
|
||||
align: "left",
|
||||
style: {
|
||||
fontSize: "16px",
|
||||
color: "#666"
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shade: "light",
|
||||
gradientToColors: ["#0d6efd"],
|
||||
shadeIntensity: 1,
|
||||
type: "vertical",
|
||||
opacityFrom: .7,
|
||||
opacityTo: .2,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 5,
|
||||
colors: ["#0d6efd"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
colors: ["#0d6efd"],
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: 'rgba(0, 0, 0, 0.15)',
|
||||
strokeDashArray: 4,
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#chart1"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Total Users",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#17a00e"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#17a00e"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "30%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#17a00e"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#chart2"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Page Views",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#f41127"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#f41127"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "30%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#f41127"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#chart3"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Avg. Session Duration",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#0d6efd"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#0d6efd"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "30%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#0d6efd"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#chart4"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Bounce Rate",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#ffb207"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#ffb207"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "30%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#ffb207"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#chart5"), e).render(), Highcharts.chart("chart6", {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: "column",
|
||||
styledMode: !0
|
||||
},
|
||||
credits: {
|
||||
enabled: !1
|
||||
},
|
||||
title: {
|
||||
text: "Traffic Sources Status. January, 2020"
|
||||
},
|
||||
accessibility: {
|
||||
announceNewData: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: "category"
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: "Total percent market share"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: !1
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
borderWidth: 0,
|
||||
dataLabels: {
|
||||
enabled: !0,
|
||||
format: "{point.y:.1f}%"
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
|
||||
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
|
||||
},
|
||||
series: [{
|
||||
name: "Traffic Sources",
|
||||
colorByPoint: !0,
|
||||
data: [{
|
||||
name: "Organic Search",
|
||||
y: 62.74,
|
||||
drilldown: "Organic Search"
|
||||
}, {
|
||||
name: "Direct",
|
||||
y: 40.57,
|
||||
drilldown: "Direct"
|
||||
}, {
|
||||
name: "Referral",
|
||||
y: 25.23,
|
||||
drilldown: "Referral"
|
||||
}, {
|
||||
name: "Others",
|
||||
y: 10.58,
|
||||
drilldown: "Others"
|
||||
}]
|
||||
}],
|
||||
drilldown: {
|
||||
series: [{
|
||||
name: "Chrome",
|
||||
id: "Chrome",
|
||||
data: [
|
||||
["v65.0", .1],
|
||||
["v64.0", 1.3],
|
||||
["v63.0", 53.02],
|
||||
["v62.0", 1.4],
|
||||
["v61.0", .88],
|
||||
["v60.0", .56],
|
||||
["v59.0", .45],
|
||||
["v58.0", .49],
|
||||
["v57.0", .32],
|
||||
["v56.0", .29],
|
||||
["v55.0", .79],
|
||||
["v54.0", .18],
|
||||
["v51.0", .13],
|
||||
["v49.0", 2.16],
|
||||
["v48.0", .13],
|
||||
["v47.0", .11],
|
||||
["v43.0", .17],
|
||||
["v29.0", .26]
|
||||
]
|
||||
}, {
|
||||
name: "Firefox",
|
||||
id: "Firefox",
|
||||
data: [
|
||||
["v58.0", 1.02],
|
||||
["v57.0", 7.36],
|
||||
["v56.0", .35],
|
||||
["v55.0", .11],
|
||||
["v54.0", .1],
|
||||
["v52.0", .95],
|
||||
["v51.0", .15],
|
||||
["v50.0", .1],
|
||||
["v48.0", .31],
|
||||
["v47.0", .12]
|
||||
]
|
||||
}, {
|
||||
name: "Internet Explorer",
|
||||
id: "Internet Explorer",
|
||||
data: [
|
||||
["v11.0", 6.2],
|
||||
["v10.0", .29],
|
||||
["v9.0", .27],
|
||||
["v8.0", .47]
|
||||
]
|
||||
}, {
|
||||
name: "Safari",
|
||||
id: "Safari",
|
||||
data: [
|
||||
["v11.0", 3.39],
|
||||
["v10.1", .96],
|
||||
["v10.0", .36],
|
||||
["v9.1", .54],
|
||||
["v9.0", .13],
|
||||
["v5.1", .2]
|
||||
]
|
||||
}, {
|
||||
name: "Edge",
|
||||
id: "Edge",
|
||||
data: [
|
||||
["v16", 2.6],
|
||||
["v15", .92],
|
||||
["v14", .4],
|
||||
["v13", .1]
|
||||
]
|
||||
}, {
|
||||
name: "Opera",
|
||||
id: "Opera",
|
||||
data: [
|
||||
["v50.0", .96],
|
||||
["v49.0", .82],
|
||||
["v12.1", .14]
|
||||
]
|
||||
}]
|
||||
}
|
||||
}), Highcharts.chart("chart7", {
|
||||
chart: {
|
||||
height: 350,
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: !1,
|
||||
type: "pie",
|
||||
styledMode: !0
|
||||
},
|
||||
credits: {
|
||||
enabled: !1
|
||||
},
|
||||
title: {
|
||||
text: "Sessions Device"
|
||||
},
|
||||
subtitle: {
|
||||
text: "Ratio of devices use by users"
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
|
||||
},
|
||||
accessibility: {
|
||||
point: {
|
||||
valueSuffix: "%"
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: !0,
|
||||
cursor: "pointer",
|
||||
innerSize: 120,
|
||||
dataLabels: {
|
||||
enabled: !0,
|
||||
format: "<b>{point.name}</b>: {point.percentage:.1f} %"
|
||||
},
|
||||
showInLegend: !0
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "Users",
|
||||
colorByPoint: !0,
|
||||
data: [{
|
||||
name: "Desktop",
|
||||
y: 56
|
||||
}, {
|
||||
name: "Mobile",
|
||||
y: 30
|
||||
}, {
|
||||
name: "Tablet",
|
||||
y: 14
|
||||
}]
|
||||
}],
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
plotOptions: {
|
||||
pie: {
|
||||
innerSize: 140,
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}), Highcharts.chart("chart8", {
|
||||
chart: {
|
||||
type: "bar",
|
||||
styledMode: !0
|
||||
},
|
||||
credits: {
|
||||
enabled: !1
|
||||
},
|
||||
exporting: {
|
||||
buttons: {
|
||||
contextButton: {
|
||||
enabled: !1
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Visitor by Gender"
|
||||
},
|
||||
xAxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May"]
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: "Visitor by Genders",
|
||||
style: {
|
||||
display: "none"
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
reversed: !1
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
stacking: "normal"
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "Male",
|
||||
data: [5, 3, 4, 7, 2]
|
||||
}, {
|
||||
name: "Female",
|
||||
data: [2, 2, 3, 2, 1]
|
||||
}, {
|
||||
name: "Others",
|
||||
data: [3, 4, 4, 2, 5]
|
||||
}]
|
||||
});
|
||||
e = {
|
||||
series: [42, 47, 52, 58, 65],
|
||||
chart: {
|
||||
height: 340,
|
||||
type: "polarArea"
|
||||
},
|
||||
labels: ["Chrome", "Firefox", "Edge", "Opera", "Safari"],
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: void 0
|
||||
},
|
||||
colors: ["#17a00e", "#0dcaf0", "#f41127", "#ffc107", "#0d6efd"],
|
||||
yaxis: {
|
||||
show: !1
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
legend: {
|
||||
show: !1,
|
||||
position: "bottom"
|
||||
},
|
||||
plotOptions: {
|
||||
polarArea: {
|
||||
rings: {
|
||||
strokeWidth: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#chart9"), e).render(), jQuery("#geographic-map").vectorMap({
|
||||
map: "world_mill_en",
|
||||
backgroundColor: "transparent",
|
||||
borderColor: "#818181",
|
||||
borderOpacity: .25,
|
||||
borderWidth: 1,
|
||||
zoomOnScroll: !1,
|
||||
color: "#009efb",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: "#6c757d"
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 9,
|
||||
fill: "#fff",
|
||||
"fill-opacity": 1,
|
||||
stroke: "#000",
|
||||
"stroke-width": 5,
|
||||
"stroke-opacity": .4
|
||||
}
|
||||
},
|
||||
enableZoom: !0,
|
||||
hoverColor: "#009efb",
|
||||
markers: [{
|
||||
latLng: [21, 78],
|
||||
name: "I Love My India"
|
||||
}],
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
IN: "#0d6efd",
|
||||
US: "#15b70a",
|
||||
RU: "#f41127",
|
||||
AU: "#ffb207"
|
||||
}
|
||||
}]
|
||||
},
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: "linear",
|
||||
scaleColors: ["#b6d6ff", "#005ace"],
|
||||
selectedColor: "#c9dfaf",
|
||||
selectedRegions: [],
|
||||
showTooltip: !0,
|
||||
onRegionClick: function(e, t, o) {
|
||||
var r = 'You clicked "' + o + '" which has the code: ' + t.toUpperCase();
|
||||
alert(r)
|
||||
}
|
||||
}),
|
||||
|
||||
|
||||
|
||||
|
||||
new PerfectScrollbar('.dashboard-top-countries');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
1
assets/js/jquery.min.js
vendored
Normal file
1
assets/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/pace.min.js
vendored
Normal file
1
assets/js/pace.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
627
assets/js/widgets.js
Normal file
627
assets/js/widgets.js
Normal file
@@ -0,0 +1,627 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
var e = {
|
||||
series: [{
|
||||
name: "Total Users",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "line",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#17a00e"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#17a00e"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#17a00e"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart1"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Page Views",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#f41127"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#f41127"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "35%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#f41127"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart2"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Avg. Session Duration",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "line",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#0d6efd"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#0d6efd"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#0d6efd"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart3"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Bounce Rate",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#ffb207"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#ffb207"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "35%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 0,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#ffb207"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart4"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Total Orders",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#f41127"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#f41127"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#f41127"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart5"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Total Income",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#0d6efd"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#0d6efd"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#0d6efd"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart6"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Total Users",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#ffb207"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#ffb207"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#ffb207"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart7"), e).render();
|
||||
e = {
|
||||
series: [{
|
||||
name: "Comments",
|
||||
data: [240, 160, 671, 414, 555, 257, 901, 613, 727, 414, 555, 257]
|
||||
}],
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 65,
|
||||
toolbar: {
|
||||
show: !1
|
||||
},
|
||||
zoom: {
|
||||
enabled: !1
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: !0,
|
||||
top: 3,
|
||||
left: 14,
|
||||
blur: 4,
|
||||
opacity: .12,
|
||||
color: "#17a00e"
|
||||
},
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
colors: ["#17a00e"],
|
||||
strokeColors: "#fff",
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 7
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: !1,
|
||||
columnWidth: "45%",
|
||||
endingShape: "rounded"
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: !1
|
||||
},
|
||||
stroke: {
|
||||
show: !0,
|
||||
width: 2.4,
|
||||
curve: "smooth"
|
||||
},
|
||||
colors: ["#17a00e"],
|
||||
xaxis: {
|
||||
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: !1
|
||||
},
|
||||
x: {
|
||||
show: !1
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function(e) {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: !1
|
||||
}
|
||||
}
|
||||
};
|
||||
new ApexCharts(document.querySelector("#w-chart8"), e).render()
|
||||
});
|
||||
Reference in New Issue
Block a user