tieptk/admin_hura8
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

giao dien admin hura 8

Browse Source
This commit is contained in:
Tieptk
2023-07-03 16:04:33 +07:00
commit f412201ed8
30 changed files with 13849 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
assets/js/chart_home.js Normal file
View File

@@ -0,0 +1,254 @@
const revenue = document.getElementById('revenueChart');
// Mảng labels chứa các ngày trong tuần
var labels_week = ['', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'];
var labels_month = ['', 'T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12']
var labels_year = ['', '2022', '2023']
// Mảng data chứa dữ liệu biểu đồ
var weeklyData = [0, 50000, 20000, 150000, 60000, 5000, 8000, 70];
var monthlyData = [0, 60000, 20000, 150000, 60000, 5000, 8000, 70, 20000, 10000, 40000, 2000, 22];
var yearlyData = [0, 20000000, 5000000];
// Xác định ngày hiện tại
const today = new Date().getDay(); // Lấy ngày trong tuần từ 0 (Chủ nhật) đến 6 (Thứ 7)
const Chart_revenue = new Chart(revenue, {
type: 'line',
data: {
labels: labels_week,
datasets: [{
label: 'view',
data: weeklyData,
borderColor: '#4795DF',
borderWidth: 2,
pointRadius: 6, // Đặt kích thước điểm mặc định
pointHoverRadius: 8 // Đặt kích thước điểm khi hover
},]
},
options: {
scales: {
y: {
beginAtZero: true,
grid: {
display: true,
color: 'transparent' // Màu sắc của ô kẻ trục x
},
ticks: {
stepSize: 50000,
callback: function (value, index, values) {
if (value >= 1000) {
return (value / 1000) + 'k';
}
return value;
}
}
},
x: {
beginAtZero: true,
grid: {
display: true,
color: 'rgb(234,239,244)', // Màu mờ
},
border: {
dash: [4, 8],
},
ticks: {
color: 'rgb(136,183,228)' // Màu đen
},
},
},
plugins: {
legend: {
display: false // Ẩn hiển thị legend
},
title: {
display: true,
},
tooltip: {
borderColor: 'black'
}
},
elements: {
line: {
tension: 0.2
},
point: {
borderColor: "#4795DF",
backgroundColor: "#4795DF"
}
},
interaction: {
mode: 'index', // Chế độ tương tác
intersect: false
},
onHover: function (event, elements) {
if (elements.length > 0) {
var element = elements[0];
var datasetIndex = element.datasetIndex;
var index = element.index;
// Tạo mảng mới chứa màu mờ ban đầu cho tất cả các điểm
var gridColor = new Array(Chart_revenue.data.labels.length).fill('rgb(234,239,244)');
var ticksColor = new Array(Chart_revenue.data.labels.length).fill('rgb(234,239,244)');
// Đặt màu của trục x tương ứng với điểm được hover thành màu tương ứng
gridColor[index] = 'rgb(136,183,228)';
ticksColor[index] = 'rgb(136,183,228)';
// Cập nhật màu của trục x
Chart_revenue.options.scales.x.grid.color = gridColor;
Chart_revenue.options.scales.x.ticks.color = ticksColor;
// Cập nhật biểu đồ
Chart_revenue.update();
}
},
onLeave: function () {
// Reset màu của trục x về màu mờ ban đầu
Chart_revenue.options.scales.x.grid.color = 'rgb(234,239,244)';
Chart_revenue.options.scales.x.ticks.color = 'rgb(234,239,244)';
// Cập nhật biểu đồ
Chart_revenue.update();
},
}
});
const clickRevenue = document.getElementById('click-revenue');
clickRevenue.addEventListener('change', select_revenue);
function select_revenue() {
var selectedValue = clickRevenue.value;
if (selectedValue === 'week') {
Chart_revenue.data.labels = labels_week;
Chart_revenue.data.datasets[0].data = weeklyData;
} else if (selectedValue === 'month') {
Chart_revenue.data.labels = labels_month;
Chart_revenue.data.datasets[0].data = monthlyData;
} else if (selectedValue === 'year') {
Chart_revenue.data.labels = labels_year;
Chart_revenue.data.datasets[0].data = yearlyData;
}
Chart_revenue.update();
}
// bieu dồ lượt truy cập
const access = document.getElementById('chart_access');
const Chart_access = new Chart(access, {
type: 'bar',
data: {
labels: ['Cột 1', 'Cột 2', 'Cột 3', 'Cột 4', 'Cột 5', 'Cột 6'],
datasets: [
{
label: 'Dữ liệu cột 1',
data: [100000, 20000, 5000, 16000, 2000, 22],
backgroundColor: 'rgb(141,212,252)',
borderWidth: 0,
borderRadius: 50
},
{
label: 'Dữ liệu cột 2',
data: [150202, 20005, 5055, 17000, 60000, 22],
backgroundColor: 'rgb(44,122,244)',
borderWidth: 0,
borderRadius: 50
},
]
},
options: {
responsive: true,
scales: {
x: {
grid: {
display: true,
color: 'transparent', // Màu sắc của ô kẻ trục x
}
},
y: {
beginAtZero: true,
grid: {
display: true,
color: 'rgb(221,221,221)',
borderDash: [5, 5],
},
ticks: {
stepSize: 50000,
callback: function (value, index, values) {
if (value >= 1000) {
return (value / 1000) + 'k';
}
return value;
}
}
}
},
plugins: {
legend: {
display: false // Ẩn hiển thị legend
},
title: {
display: true,
},
tooltip: {
borderColor: 'black'
}
},
barPercentage: 1,
categoryPercentage: 0.2
},
});
// biểu đồ website giới thiệu
const webInfo = document.getElementById('chart_WebInfo');
const chart_WebInfo = new Chart(webInfo, {
type: 'doughnut',
data: {
labels: [
'blue',
'green',
'Yellow',
'yellow'
],
datasets: [{
label: 'My First Dataset',
data: [30, 30, 30, 10],
backgroundColor: [
'rgb(53,158,255)',
'rgb(100,195,92)',
'rgb(0,78,153)',
'rgb(255,165,29)'
],
hoverOffset: 4,
borderWidth: 1
}]
},
options: {
cutout: 100,
plugins: {
datalabels: {
formatter: (value) => {
return Math.round(value) + '%';
},
color: '#fff',
font: {
size: 14
},
},
legend: {
display: false // Ẩn hiển thị legend
},
},
},
plugins: [ChartDataLabels],
})