| Current File : /home/users/barii/public_html/finansenl.com.pl/wodki/admin/bkk/assets/js/dashboard/dashboard_2.js |
var options = {
series: [
{
name: "Sales",
data: [23, 23, 20, 20, 32, 32,40,32,32,25,30,30]
},
{
name: "sales",
data: [22, 22, 19, 19, 31, 31,39,31,31,24,29,29]
},
{
name: "sales",
data: [21, 21, 18, 18, 30, 30,38,30,30,23,28,28]
},
{
name: "sales",
data: [20, 20, 17, 17, 29, 29,37,29,29,22,27,27]
},
{
name: "sales",
data: [19, 19, 16, 16, 28, 28,36,28,28,21,26,26]
},
{
name: "sales",
data: [18, 18, 15, 15, 27, 27,35,27,27,20,25,25]
},
{
name: "sales",
data: [17, 17, 14, 14, 26, 26,34,26,26,19,24,24]
},
{
name: "sales",
data: [16, 16, 13, 13, 25, 25,33,25,25,18,23,23]
},
{
name: "sales",
data: [16, 16, 13, 13, 25, 25,33,25,25,18,23,23]
},
{
name: "sales",
data: [15, 15, 12, 12, 24, 24,32,24,24,17,22,22]
},
{
name: "sales",
data: [14, 14, 11, 11, 23, 23,31,23,23,16,21,21]
},
{
name: "sales",
data: [13, 13, 10, 10, 22, 22,30,22,22,15,20,20]
}
],
chart: {
height: 235,
type: 'line',
toolbar: {
show: false
}
},
colors: ['#7064F5', '#7064F5', '#7064F5','#7064F5', '#7064F5', '#7064F5','#7064F5', '#7064F5', '#7064F5','#7064F5', '#7064F5', '#7064F5'],
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: "horizontal",
shadeIntensity: 1,
gradientToColors: ['#FF8BA7', '#FF8BA7', '#FF8BA7','#FF8BA7', '#FF8BA7', '#FF8BA7','#FF8BA7', '#FF8BA7', '#FF8BA7','#FF8BA7', '#FF8BA7', '#FF8BA7'],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
// stops: [0, 50, 100],
colorStops: [
{
offset: 0,
color: "#e183b7",
opacity: 1
},
{
offset: 20,
color: "#ff8ba7",
opacity: 1
},
{
offset: 30,
color: "#b377d0",
opacity: 1
},
{
offset: 65,
color: "#7064f5",
opacity: 1
},
{
offset: 70,
color: "#b778cf",
opacity: 1
},
{
offset: 80,
color: "#eb86b2",
opacity: 1
},
{
offset: 100,
color: "#a873d7",
opacity: 1
}
]
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
width: 2,
},
grid: {
borderColor: '#e7e7e7',
yaxis: {
lines: {
show: false
}
},
column: {
colors: ['transparent','var(--light-background)'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['01', '03', '05', '07', '09', '10', '11', '12',"15", "16","18"],
tickAmount: 6,
tickPlacement: 'between',
axisTicks: {
show: false
},
axisBorder: {
show: false
},
tooltip: {
enabled: false,
},
},
yaxis: {
min: 5,
max: 40,
axisBorder: {
show: true,
color: 'var(--chart-border)',
offsetX: 12,
offsetY: 5
}
},
legend: {
show: false
},
tooltip: {
shared: false,
},
responsive: [{
breakpoint: 1400,
options: {
chart: {
height: 230
},
}
},
]
};
var chart = new ApexCharts(document.querySelector("#order-goal"), options);
chart.render();
// profit monthly
var optionsprofit = {
labels: ['Shoes', 'Grocery', 'other'],
series: [30, 55, 35],
chart: {
type: 'donut',
height: 300,
},
dataLabels: {
enabled: false
},
legend: {
position: 'bottom',
fontSize: '14px',
fontFamily: 'Rubik, sans-serif',
fontWeight: 500,
labels: {
colors: ["var(--chart-text-color)"],
},
markers: {
width: 6,
height: 6,
},
itemMargin: {
horizontal: 7,
vertical: 0
},
},
stroke: {
width: 10,
colors: ["var(--light2)"],
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '83%',
labels: {
show: true,
name: {
offsetY: 4,
},
total: {
show: true,
fontSize: '20px',
fontFamily: 'Rubik, sans-serif',
fontWeight: 500,
label: '$ 34,098',
formatter: () => 'Total Profit'
}
},
}
}
},
states: {
normal: {
filter: {
type: 'none',
}
},
hover: {
filter: {
type: 'none',
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
}
},
},
colors: ["#54BA4A", "var(--theme-deafult)", "#FFA941"],
responsive: [{
breakpoint: 1630,
options: {
chart: {
height: 360
},
}
},
{
breakpoint: 1584,
options: {
chart: {
height: 400
},
}
},
{
breakpoint: 1473,
options: {
chart: {
height: 250
},
}
},
{
breakpoint: 1425,
options: {
chart: {
height: 270
},
}
},
{
breakpoint: 1400,
options: {
chart: {
height: 320
},
}
},
{
breakpoint: 480,
options: {
chart: {
height: 250
},
}
}]
};
var chartprofit = new ApexCharts(document.querySelector("#profitmonthly"), optionsprofit);
chartprofit.render();
// overview chart
var optionsoverview = {
series: [ {
name: 'Earning',
type: 'area',
data: [44, 55, 35, 50, 67, 50, 55, 45, 32, 38, 45]
},
{
name: 'Order',
type: 'area',
data: [35, 30, 23, 40, 50, 35, 40, 52, 67, 50, 55]
},
{
name: 'Refunds',
type: 'area',
data: [25, 20, 15, 25, 32, 20, 30, 35, 23, 30, 20]
},
],
chart: {
height: 300,
type: 'line',
stacked: false,
toolbar: {
show: false
},
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
color: '#000',
opacity: 0.08
}
},
stroke: {
width: [2, 2, 2],
curve: 'smooth'
},
grid: {
show: true,
borderColor: 'var(--chart-border)',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
colors: ["#7064F5", "#54BA4A", "#FF3364"],
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "vertical",
opacityFrom: 0.4,
opacityTo: 0,
stops: [0, 100]
}
},
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov'
],
markers: {
discrete: [{
seriesIndex: 0,
dataPointIndex: 2,
fillColor: '#7064F5',
strokeColor: 'var(--white)',
size: 5,
sizeOffset: 3
}, {
seriesIndex: 1,
dataPointIndex: 2,
fillColor: '#54BA4A',
strokeColor: 'var(--white)',
size: 5,
},
{
seriesIndex: 2,
dataPointIndex: 2,
fillColor: '#FF3364',
strokeColor: 'var(--white)',
size: 5,
},
{
seriesIndex: 0,
dataPointIndex: 5,
fillColor: '#7064F5',
strokeColor: 'var(--white)',
size: 5,
sizeOffset: 3
}, {
seriesIndex: 1,
dataPointIndex: 5,
fillColor: '#54BA4A',
strokeColor: 'var(--white)',
size: 5,
},
{
seriesIndex: 2,
dataPointIndex: 5,
fillColor: '#FF3364',
strokeColor: 'var(--white)',
size: 5,
},
{
seriesIndex: 0,
dataPointIndex: 9,
fillColor: '#7064F5',
strokeColor: 'var(--white)',
size: 5,
sizeOffset: 3
}, {
seriesIndex: 1,
dataPointIndex: 9,
fillColor: '#54BA4A',
strokeColor: 'var(--white)',
size: 5,
},
{
seriesIndex: 2,
dataPointIndex: 9,
fillColor: '#FF3364',
strokeColor: 'var(--white)',
size: 5,
},
],
hover: {
size: 5,
sizeOffset: 0
}
},
xaxis: {
type: 'category',
tickAmount: 4,
tickPlacement: 'between',
tooltip: {
enabled: false,
},
axisBorder: {
color: 'var(--chart-border)',
},
axisTicks: {
show: false
}
},
legend: {
show: false,
},
yaxis: {
min: 0,
tickAmount: 6,
tickPlacement: 'between',
},
tooltip: {
shared: false,
intersect: false,
},
responsive: [{
breakpoint: 1200,
options: {
chart: {
height: 250,
}
},
}]
};
var chartoverview = new ApexCharts(document.querySelector("#orderoverview"), optionsoverview);
chartoverview.render();
// bar overview chart
var optionsorder = {
series: [ {
name: 'Revenue',
data: [30,40,18,25,18,10,20,35,22,40,30,38,20,35,11,28,40,11,28,40,11,28,40,11,28,40,11]
}],
chart: {
type: 'bar',
height: 180,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
},
},
colors: ["var(--light-bg)"],
grid: {
show: false,
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
fill: {
opacity: 0.7
},
tooltip: {
enabled: false
},
states: {
normal: {
filter: {
type: 'none',
}
},
hover: {
filter: {
type: 'none',
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
}
},
},
responsive: [{
breakpoint: 405,
options: {
chart: {
height: 150,
}
},
}]
};
var chartorder = new ApexCharts(document.querySelector("#order-bar"), optionsorder);
chartorder.render();
// visitor chart
var optionsvisitor = {
series: [{
name: 'Active',
data: [18, 10, 65, 18, 28, 10]
}, {
name: 'Bounce',
data: [25, 50, 30, 30, 25, 45]
}],
chart: {
type: 'bar',
height: 270,
toolbar: {
show: false
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 6,
colors: ['transparent']
},
grid: {
show: true,
borderColor: 'var(--chart-border)',
xaxis: {
lines: {
show: true
}
},
},
colors: ["#FFA941", "var(--theme-deafult)"],
xaxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
tickAmount: 4,
tickPlacement: 'between',
labels: {
style: {
fontFamily: 'Rubik, sans-serif',
},
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 5,
tickPlacement: 'between',
labels: {
style: {
fontFamily: 'Rubik, sans-serif',
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
fontFamily: "Rubik, sans-serif",
fontSize: '14px',
fontWeight: 500,
labels: {
colors: "var(--chart-text-color)",
},
markers: {
width: 6,
height: 6,
radius: 12,
},
itemMargin: {
horizontal: 10,
}
},
responsive: [{
breakpoint: 1366,
options: {
plotOptions: {
bar: {
columnWidth: '80%',
},
},
grid: {
padding: {
right: 0,
}
}
},
},
{
breakpoint: 992,
options: {
plotOptions: {
bar: {
columnWidth: '70%',
},
},
},
},
{
breakpoint: 576,
options: {
plotOptions: {
bar: {
columnWidth: '60%',
},
},
grid: {
padding: {
right: 5,
}
}
},
}
]
};
var chartvisitor = new ApexCharts(document.querySelector("#visitor-chart"), optionsvisitor);
chartvisitor.render();