354 lines
6.1 KiB
JavaScript
354 lines
6.1 KiB
JavaScript
// SIDEBAR DROPDOWN
|
|
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
if(!this.classList.contains('active')) {
|
|
allDropdown.forEach(i=> {
|
|
const aLink = i.parentElement.querySelector('a:first-child');
|
|
|
|
aLink.classList.remove('active');
|
|
i.classList.remove('show');
|
|
})
|
|
}
|
|
|
|
this.classList.toggle('active');
|
|
item.classList.toggle('show');
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// SIDEBAR COLLAPSE
|
|
const toggleSidebar = document.querySelector('nav .toggle-sidebar');
|
|
const allSideDivider = document.querySelectorAll('#sidebar .divider');
|
|
|
|
if(sidebar.classList.contains('hide')) {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
} else {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
|
|
toggleSidebar.addEventListener('click', function () {
|
|
sidebar.classList.toggle('hide');
|
|
|
|
if(sidebar.classList.contains('hide')) {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
} else {
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
sidebar.addEventListener('mouseleave', function () {
|
|
if(this.classList.contains('hide')) {
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = '-'
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
sidebar.addEventListener('mouseenter', function () {
|
|
if(this.classList.contains('hide')) {
|
|
allDropdown.forEach(item=> {
|
|
const a = item.parentElement.querySelector('a:first-child');
|
|
a.classList.remove('active');
|
|
item.classList.remove('show');
|
|
})
|
|
allSideDivider.forEach(item=> {
|
|
item.textContent = item.dataset.text;
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
|
|
// PROFILE DROPDOWN
|
|
const profile = document.querySelector('nav .profile');
|
|
const imgProfile = profile.querySelector('img');
|
|
const dropdownProfile = profile.querySelector('.profile-link');
|
|
|
|
imgProfile.addEventListener('click', function () {
|
|
dropdownProfile.classList.toggle('show');
|
|
})
|
|
|
|
|
|
|
|
|
|
// MENU
|
|
const allMenu = document.querySelectorAll('main .content-data .head .menu');
|
|
|
|
allMenu.forEach(item=> {
|
|
const icon = item.querySelector('.icon');
|
|
const menuLink = item.querySelector('.menu-link');
|
|
|
|
icon.addEventListener('click', function () {
|
|
menuLink.classList.toggle('show');
|
|
})
|
|
})
|
|
|
|
|
|
|
|
window.addEventListener('click', function (e) {
|
|
if(e.target !== imgProfile) {
|
|
if(e.target !== dropdownProfile) {
|
|
if(dropdownProfile.classList.contains('show')) {
|
|
dropdownProfile.classList.remove('show');
|
|
}
|
|
}
|
|
}
|
|
|
|
allMenu.forEach(item=> {
|
|
const icon = item.querySelector('.icon');
|
|
const menuLink = item.querySelector('.menu-link');
|
|
|
|
if(e.target !== icon) {
|
|
if(e.target !== menuLink) {
|
|
if (menuLink.classList.contains('show')) {
|
|
menuLink.classList.remove('show')
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// PROGRESSBAR
|
|
const allProgress = document.querySelectorAll('main .card .progress');
|
|
|
|
allProgress.forEach(item=> {
|
|
item.style.setProperty('--value', item.dataset.value)
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// APEXCHART
|
|
var options = {
|
|
series: [{
|
|
name: 'series1',
|
|
data: [31, 40, 28, 51, 42, 109, 100]
|
|
}, {
|
|
name: 'series2',
|
|
data: [11, 32, 45, 32, 34, 52, 41]
|
|
}],
|
|
chart: {
|
|
height: 350,
|
|
type: 'area'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth'
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'dd/MM/yy HH:mm'
|
|
},
|
|
},
|
|
};
|
|
|
|
var options2 = {
|
|
series: [{
|
|
name: 'Net Profit',
|
|
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
|
}, {
|
|
name: 'Revenue',
|
|
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
|
}, {
|
|
name: 'Free Cash Flow',
|
|
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
|
}],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 350
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '55%',
|
|
borderRadius: 5,
|
|
borderRadiusApplication: 'end'
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
xaxis: {
|
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: '$ (thousands)'
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$ " + val + " thousands"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
var options3 = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
x: 'New Delhi',
|
|
y: 218
|
|
},
|
|
{
|
|
x: 'Kolkata',
|
|
y: 149
|
|
},
|
|
{
|
|
x: 'Mumbai',
|
|
y: 184
|
|
},
|
|
{
|
|
x: 'Ahmedabad',
|
|
y: 55
|
|
},
|
|
{
|
|
x: 'Bangaluru',
|
|
y: 84
|
|
},
|
|
{
|
|
x: 'Pune',
|
|
y: 31
|
|
},
|
|
{
|
|
x: 'Chennai',
|
|
y: 70
|
|
},
|
|
{
|
|
x: 'Jaipur',
|
|
y: 30
|
|
},
|
|
{
|
|
x: 'Surat',
|
|
y: 44
|
|
},
|
|
{
|
|
x: 'Hyderabad',
|
|
y: 68
|
|
},
|
|
{
|
|
x: 'Lucknow',
|
|
y: 28
|
|
},
|
|
{
|
|
x: 'Indore',
|
|
y: 19
|
|
},
|
|
{
|
|
x: 'Kanpur',
|
|
y: 29
|
|
}
|
|
]
|
|
}
|
|
],
|
|
legend: {
|
|
show: false
|
|
},
|
|
chart: {
|
|
height: 350,
|
|
type: 'treemap'
|
|
},
|
|
title: {
|
|
text: 'Basic Treemap'
|
|
}
|
|
};
|
|
|
|
var options4 = {
|
|
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
|
|
chart: {
|
|
type: 'polarArea',
|
|
},
|
|
stroke: {
|
|
colors: ['#fff']
|
|
},
|
|
fill: {
|
|
opacity: 0.8
|
|
},
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 200
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#polar"), options4);
|
|
chart.render();
|
|
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
|
chart.render();
|
|
|
|
var chart = new ApexCharts(document.querySelector("#basic"), options2);
|
|
chart.render();
|
|
|
|
var basic = new ApexCharts(document.querySelector("#treemap"), options3);
|
|
basic.render(); |