667 lines
11 KiB
JavaScript
667 lines
11 KiB
JavaScript
$(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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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: ["#fff"],
|
|
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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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: ["#fff"],
|
|
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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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: ["#fff"],
|
|
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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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: ["#fff"],
|
|
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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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"
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "vertical",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: ["#fff"],
|
|
inverseColors: true,
|
|
opacityFrom: 0.2,
|
|
opacityTo: 0.5,
|
|
colorStops: []
|
|
}
|
|
},
|
|
colors: ["#fff"],
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
|
},
|
|
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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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"
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "vertical",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: ["#fff"],
|
|
inverseColors: true,
|
|
opacityFrom: 0.2,
|
|
opacityTo: 0.5,
|
|
colorStops: []
|
|
}
|
|
},
|
|
colors: ["#fff"],
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
|
},
|
|
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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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"
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "vertical",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: ["#fff"],
|
|
inverseColors: true,
|
|
opacityFrom: 0.2,
|
|
opacityTo: 0.5,
|
|
colorStops: []
|
|
}
|
|
},
|
|
colors: ["#fff"],
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
|
},
|
|
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: "#fff"
|
|
},
|
|
sparkline: {
|
|
enabled: !0
|
|
}
|
|
},
|
|
markers: {
|
|
size: 0,
|
|
colors: ["#fff"],
|
|
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"
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "vertical",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: ["#fff"],
|
|
inverseColors: true,
|
|
opacityFrom: 0.2,
|
|
opacityTo: 0.5,
|
|
colorStops: []
|
|
}
|
|
},
|
|
colors: ["#fff"],
|
|
xaxis: {
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
|
|
},
|
|
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()
|
|
}); |