Initial Commit
This commit is contained in:
467
public/back/vendors/scripts/dashboard.js
vendored
Normal file
467
public/back/vendors/scripts/dashboard.js
vendored
Normal file
@@ -0,0 +1,467 @@
|
||||
var options = {
|
||||
series: [80],
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
height: 100,
|
||||
width: 70,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '50%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
color: '#fff'
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
color: '#333',
|
||||
offsetY: 5,
|
||||
fontSize: '15px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#ecf0f4'],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'diagonal1',
|
||||
shadeIntensity: 0.8,
|
||||
gradientToColors: ['#1b00ff'],
|
||||
inverseColors: false,
|
||||
opacityFrom: [1, 0.2],
|
||||
opacityTo: 1,
|
||||
stops: [0, 100],
|
||||
}
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
var options2 = {
|
||||
series: [70],
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
height: 100,
|
||||
width: 70,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '50%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
color: '#fff'
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
color: '#333',
|
||||
offsetY: 5,
|
||||
fontSize: '15px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#ecf0f4'],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'diagonal1',
|
||||
shadeIntensity: 1,
|
||||
gradientToColors: ['#009688'],
|
||||
inverseColors: false,
|
||||
opacityFrom: [1, 0.2],
|
||||
opacityTo: 1,
|
||||
stops: [0, 100],
|
||||
}
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
var options3 = {
|
||||
series: [75],
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
height: 100,
|
||||
width: 70,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '50%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
color: '#fff'
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
color: '#333',
|
||||
offsetY: 5,
|
||||
fontSize: '15px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#ecf0f4'],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'diagonal1',
|
||||
shadeIntensity: 0.8,
|
||||
gradientToColors: ['#f56767'],
|
||||
inverseColors: false,
|
||||
opacityFrom: [1, 0.2],
|
||||
opacityTo: 1,
|
||||
stops: [0, 100],
|
||||
}
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
var options4 = {
|
||||
series: [85],
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
},
|
||||
chart: {
|
||||
height: 100,
|
||||
width: 70,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '50%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
color: '#fff'
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
color: '#333',
|
||||
offsetY: 5,
|
||||
fontSize: '15px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: ['#ecf0f4'],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'diagonal1',
|
||||
shadeIntensity: 0.8,
|
||||
gradientToColors: ['#2979ff'],
|
||||
inverseColors: false,
|
||||
opacityFrom: [1, 0.5],
|
||||
opacityTo: 1,
|
||||
stops: [0, 100],
|
||||
}
|
||||
},
|
||||
states: {
|
||||
normal: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
active: {
|
||||
filter: {
|
||||
type: 'none',
|
||||
value: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
var options5 = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
parentHeightOffset: 0,
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: ['#1b00ff', '#f56767'],
|
||||
grid: {
|
||||
borderColor: '#c7d2dd',
|
||||
strokeDashArray: 5,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '25%',
|
||||
endingShape: 'rounded'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
series: [{
|
||||
name: 'In Progress',
|
||||
data: [40, 28, 47, 22, 34, 25]
|
||||
}, {
|
||||
name: 'Complete',
|
||||
data: [30, 20, 37, 10, 28, 11]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: ['#353535'],
|
||||
fontSize: '16px',
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
color: '#8fa6bc',
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#353535',
|
||||
fontSize: '16px',
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
color: '#f00',
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: 'right',
|
||||
position: 'top',
|
||||
fontSize: '16px',
|
||||
offsetY: 0,
|
||||
labels: {
|
||||
colors: '#353535',
|
||||
},
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
radius: 15,
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var options6 = {
|
||||
series: [73],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
offsetY: 0
|
||||
},
|
||||
colors: ['#0B132B', '#222222'],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '16px',
|
||||
color: undefined,
|
||||
offsetY: 120
|
||||
},
|
||||
value: {
|
||||
offsetY: 76,
|
||||
fontSize: '22px',
|
||||
color: undefined,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 4
|
||||
},
|
||||
labels: ['Achieve Goals'],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.render();
|
||||
|
||||
var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
|
||||
chart2.render();
|
||||
|
||||
var chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
|
||||
chart3.render();
|
||||
|
||||
var chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
|
||||
chart4.render();
|
||||
|
||||
var chart5 = new ApexCharts(document.querySelector("#chart5"), options5);
|
||||
chart5.render();
|
||||
|
||||
var chart6 = new ApexCharts(document.querySelector("#chart6"), options6);
|
||||
chart6.render();
|
||||
|
||||
|
||||
// datatable init
|
||||
$('document').ready(function(){
|
||||
$('.data-table').DataTable({
|
||||
scrollCollapse: true,
|
||||
autoWidth: true,
|
||||
responsive: true,
|
||||
searching: false,
|
||||
bLengthChange: false,
|
||||
bPaginate: false,
|
||||
bInfo: false,
|
||||
columnDefs: [{
|
||||
targets: "datatable-nosort",
|
||||
orderable: false,
|
||||
}],
|
||||
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
|
||||
"language": {
|
||||
"info": "_START_-_END_ of _TOTAL_ entries",
|
||||
searchPlaceholder: "Search",
|
||||
paginate: {
|
||||
next: '<i class="ion-chevron-right"></i>',
|
||||
previous: '<i class="ion-chevron-left"></i>'
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user