590 lines
12 KiB
JavaScript
590 lines
12 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
/* Sales Revenue */
|
|
var options = {
|
|
chart: {
|
|
height: 367,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
enabledOnSeries: undefined,
|
|
top: 7,
|
|
left: 0,
|
|
blur: 1,
|
|
color: ["var(--primary-color)", "var(--primary02)", "rgb(255, 90, 41)"],
|
|
opacity: 0.05,
|
|
},
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: "rgba(119, 119, 142, 0.1)",
|
|
strokeDashArray: 4,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
width: [1.5, 1.5],
|
|
curve: "straight",
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: "top",
|
|
horizontalAlign: "center",
|
|
fontWeight: 600,
|
|
fontSize: "11px",
|
|
labels: {
|
|
colors: "#74767c",
|
|
},
|
|
markers: {
|
|
size: 4,
|
|
strokeWidth: 0,
|
|
strokeColor: '#fff',
|
|
fillColors: undefined,
|
|
radius: 5,
|
|
customHTML: undefined,
|
|
onClick: undefined,
|
|
offsetX: 0,
|
|
offsetY: 0
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "فروش",
|
|
data: [5,15, 21,20,15,40,55,55, 55,30,45,100,85, 85,85,130,100,56, 131,140,195,140,140,140, 85,115,106,100,100,110, 129,140,137,135,140,145, 153,157,160,220,110,100,95, 90,90,105,92,105,120,122, 150,130,117, 108,120,127,150,],
|
|
type: "area",
|
|
},
|
|
{
|
|
name:"بازاریابی",
|
|
data: [40,45, 47,49,52,50,80,86, 85,70,89,130,100, 110,110,180,130,106, 140,110,110,90,80,110, 135,145,120,110,110,120, 139,150,117,110,110,100, 123,137,110,110,130,140,135, 140,190,125,102,105,100,92, 108,120,127,150,130,117],
|
|
type: "line",
|
|
},
|
|
],
|
|
fill: {
|
|
type: ['gradient', 'solid'],
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.1,
|
|
stops: [0, 90, 100],
|
|
colorStops: [
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "var(--primary01)",
|
|
opacity: 0.1
|
|
},
|
|
{
|
|
offset: 75,
|
|
color: "var(--primary01)",
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 100,
|
|
color: 'var(--primary02)',
|
|
opacity: 1
|
|
}
|
|
],
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(255, 90, 41)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 75,
|
|
color: 'rgb(255, 90, 41)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 100,
|
|
color: 'rgb(255, 90, 41)',
|
|
opacity: 1
|
|
}
|
|
],
|
|
]
|
|
}
|
|
},
|
|
colors: ["var(--primary-color)", "rgb(184 ,122 ,243)"],
|
|
yaxis: {
|
|
min:0,
|
|
title: {
|
|
style: {
|
|
color: "#adb5be",
|
|
fontSize: "14px",
|
|
fontFamily: "IRANSans",
|
|
fontWeight: 600,
|
|
cssClass: "apexcharts-yaxis-label",
|
|
},
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: "day",
|
|
categories: [
|
|
"فروردین",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"اردیبهشت",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"خرداد",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"تیر",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"مرداد",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"شهریور",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"مهر",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"آبان",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"آذر",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"دی",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"بهمن",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"اسفند",
|
|
],
|
|
axisBorder: {
|
|
show: true,
|
|
color: "rgba(119, 119, 142, 0.05)",
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
},
|
|
axisTicks: {
|
|
show: true,
|
|
borderType: "solid",
|
|
color: "rgba(119, 119, 142, 0.05)",
|
|
width: 6,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
},
|
|
labels: {
|
|
rotate: -90,
|
|
style: {
|
|
colors: "#8c9097",
|
|
fontSize: "11px",
|
|
fontWeight: 600,
|
|
cssClass: "apexcharts-xaxis-label",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#sales-revenue"), options);
|
|
chart.render();
|
|
/* Sales Revenue */
|
|
|
|
/* Sales Summary */
|
|
var options = {
|
|
series: [14, 18, 17, 15, 12, 10],
|
|
chart: {
|
|
type: 'polarArea',
|
|
height: 251,
|
|
|
|
},
|
|
stroke: {
|
|
colors: ['#fff'],
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
legend: {
|
|
show: false,
|
|
position: 'bottom',
|
|
itemMargin: {
|
|
horizontal: 5,
|
|
vertical: 5
|
|
},
|
|
fontFamily: "IRANSans",
|
|
},
|
|
labels: ['تحویل شد', 'لغو', 'در حال تعلیق', 'بازگردانده شد', 'ارسال شد', 'ناموفق'],
|
|
colors: ["var(--primary-color)", "rgba(175 ,109, 237,0.7)", "rgba(40 ,215 ,133,0.7)", "rgba(241 ,113 ,177,0.7)", "rgba(221 ,58, 82,0.7)", "rgba(253 ,126 ,20,0.7)"],
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 200,
|
|
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#sales-summary"), options);
|
|
chart.render();
|
|
/*Sales Summary */
|
|
|
|
/* Visitors Device */
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "هفته جاری",
|
|
data: [25, 50, 30, 55, ]
|
|
},
|
|
|
|
],
|
|
chart: {
|
|
height: 300,
|
|
type: 'bar',
|
|
offsetY: -10
|
|
},
|
|
plotOptions: {
|
|
|
|
bar: {
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
columnWidth: "40%",
|
|
|
|
dataLabels: {
|
|
name: {
|
|
fontSize: '16px',
|
|
color: undefined,
|
|
offsetY: 120
|
|
},
|
|
value: {
|
|
offsetY: 76,
|
|
fontSize: '22px',
|
|
color: undefined,
|
|
formatter: function (val) {
|
|
return val + "%";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
dashArray: 4
|
|
},
|
|
labels: ['موبایل','دسکتاپ','لپ تاپ','تبلت'],
|
|
colors: ["var(--primary-color)", "rgba(175 ,109, 237,0.7)", "rgba(40 ,215 ,133,0.7)", "rgba(241 ,113 ,177,0.7)", ],
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#visitors-device"), options);
|
|
chart.render();
|
|
/* Visitors Device */
|
|
|
|
/* line-graph charts */
|
|
var options2 = {
|
|
series: [{
|
|
data: [25, 39, 15, 89, 47, 70, 44]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
width: 100,
|
|
height: 35,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
stroke: {
|
|
width: [1.5],
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'butt',
|
|
},
|
|
colors:["rgb(88 ,155, 255)"],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
var chart2 = new ApexCharts(document.querySelector("#line-graph1"), options2);
|
|
chart2.render();
|
|
|
|
var options2 = {
|
|
series: [{
|
|
data: [5, 20, 15, 29, 17, 40, 4]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
width: 100,
|
|
height: 35,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
stroke: {
|
|
width: [1.5],
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'butt',
|
|
},
|
|
colors:["rgb(175 ,109, 237)"],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
var chart2 = new ApexCharts(document.querySelector("#line-graph2"), options2);
|
|
chart2.render();
|
|
|
|
var options2 = {
|
|
series: [{
|
|
data: [55,9, 55, 29, 87, 70, 64]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
width: 100,
|
|
height: 35,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
stroke: {
|
|
width: [1.5],
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'butt',
|
|
},
|
|
colors:["rgb(40 ,215 ,133)"],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
var chart2 = new ApexCharts(document.querySelector("#line-graph3"), options2);
|
|
chart2.render();
|
|
|
|
var options2 = {
|
|
series: [{
|
|
data: [2, 39, 5, 49, 37, 70, 24]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
width: 100,
|
|
height: 35,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
stroke: {
|
|
width: [1.5],
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'butt',
|
|
},
|
|
colors:["rgb(241 ,113 ,177)"],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
var chart2 = new ApexCharts(document.querySelector("#line-graph4"), options2);
|
|
chart2.render();
|
|
|
|
var options2 = {
|
|
series: [{
|
|
data: [25, 89, 15, 89, 47, 70, 44]
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
width: 100,
|
|
height: 35,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
stroke: {
|
|
width: [1.5],
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'butt',
|
|
},
|
|
colors:["rgb(253 ,126 ,20)"],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
var chart2 = new ApexCharts(document.querySelector("#line-graph5"), options2);
|
|
chart2.render();
|
|
/* line-graph charts */
|
|
|
|
/* Orders Summary */
|
|
var options = {
|
|
series: [1754, 834,549,234 ],
|
|
labels: ["مرد", "زن", "سایر","نامشخص"],
|
|
chart: {
|
|
height: 310,
|
|
type: 'donut',
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
|
|
legend: {
|
|
show: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
curve: 'smooth',
|
|
lineCap: 'round',
|
|
colors: "#fff",
|
|
width: 2,
|
|
dashArray: 0,
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
startAngle: -90,
|
|
endAngle: 90,
|
|
offsetY: 10,
|
|
expandOnClick: false,
|
|
donut: {
|
|
size: '75%',
|
|
background: 'transparent',
|
|
labels: {
|
|
show: true,
|
|
name: {
|
|
show: true,
|
|
fontSize: '20px',
|
|
color: '#495057',
|
|
fontFamily: "IRANSans",
|
|
offsetY: -35
|
|
},
|
|
value: {
|
|
show: true,
|
|
fontSize: '22px',
|
|
color: undefined,
|
|
offsetY: -25,
|
|
fontWeight: 600,
|
|
fontFamily: "IRANSans",
|
|
formatter: function (val) {
|
|
return val + "%"
|
|
}
|
|
},
|
|
total: {
|
|
show: true,
|
|
showAlways: true,
|
|
label: 'کل بازدیدکنندگان',
|
|
fontSize: '14px',
|
|
fontWeight: 400,
|
|
color: '#495057',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
padding: {
|
|
bottom: -100
|
|
}
|
|
},
|
|
colors: ["var(--primary-color)", "rgb(175 ,109, 237)", "rgb(40 ,215 ,133)", "rgb(241 ,113 ,177)"],
|
|
};
|
|
var chart = new ApexCharts(document.querySelector("#orders-summary"), options);
|
|
chart.render();
|
|
/* Orders Summary */
|
|
|
|
|
|
})(); |