update menu
This commit is contained in:
@@ -350,406 +350,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="{{ 'charts.js' | asset_url }}"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
revenue_chart(); // Doanh thu
|
|
||||||
|
|
||||||
access_chart(); // Truy cập
|
|
||||||
|
|
||||||
introduce_web_chart(); // web giới thiệu
|
|
||||||
|
|
||||||
$("#js-admin-home-tab a").click(function () {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
$("#js-admin-home-tab a").removeClass('current');
|
|
||||||
$(this).addClass('current');
|
|
||||||
|
|
||||||
var id = $(this).attr('href');
|
|
||||||
$('.home-report-holder').hide();
|
|
||||||
$(id).show();
|
|
||||||
})
|
|
||||||
|
|
||||||
// $('#js-show-menu').click(function () {
|
|
||||||
// $('#menu-big').removeClass('hidden');
|
|
||||||
// $('#menu-small').addClass('hidden');
|
|
||||||
// $('#js-form-search').removeClass('menu-hide')
|
|
||||||
// localStorage.setItem('menu_big', 'hidden');
|
|
||||||
// localStorage.removeItem("menu_small");
|
|
||||||
// })
|
|
||||||
|
|
||||||
// $('#js-hide-menu').click(function () {
|
|
||||||
// $('#menu-big').addClass('hidden');
|
|
||||||
// $('#menu-small').removeClass('hidden');
|
|
||||||
// $('#js-form-search').addClass('menu-hide')
|
|
||||||
// localStorage.setItem('menu_small', 'hidden');
|
|
||||||
// localStorage.removeItem("menu_big");
|
|
||||||
// })
|
|
||||||
|
|
||||||
// if (localStorage.getItem('menu_big') == 'hidden') {
|
|
||||||
// $('#menu-big').removeClass('hidden');
|
|
||||||
// $('#menu-small').addClass('hidden');
|
|
||||||
// $('#js-form-search').removeClass('menu-hide')
|
|
||||||
// } else {
|
|
||||||
// $('#menu-big').addClass('hidden');
|
|
||||||
// $('#menu-small').removeClass('hidden');
|
|
||||||
// $('#js-form-search').addClass('menu-hide')
|
|
||||||
// }
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
// Doanh thu
|
|
||||||
function revenue_chart() {
|
|
||||||
let options = {
|
|
||||||
chart: {
|
|
||||||
maxWidth: "100%",
|
|
||||||
height: "320px",
|
|
||||||
type: "area",
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
dropShadow: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: true,
|
|
||||||
x: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: "gradient",
|
|
||||||
gradient: {
|
|
||||||
opacityFrom: 0.55,
|
|
||||||
opacityTo: 0,
|
|
||||||
shade: "#1C64F2",
|
|
||||||
gradientToColors: ["#1C64F2"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
width: 6,
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
show: false,
|
|
||||||
strokeDashArray: 4,
|
|
||||||
padding: {
|
|
||||||
left: 2,
|
|
||||||
right: 2,
|
|
||||||
top: 0
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "New users",
|
|
||||||
data: [6500, 6418, 6456, 6526, 6356, 6456],
|
|
||||||
color: "#0041E8",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
xaxis: {
|
|
||||||
categories: [
|
|
||||||
'01 February',
|
|
||||||
'02 February',
|
|
||||||
'03 February',
|
|
||||||
'04 February',
|
|
||||||
'05 February',
|
|
||||||
'06 February',
|
|
||||||
'07 February'
|
|
||||||
],
|
|
||||||
labels: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.getElementById("js-revenue-chart") && typeof ApexCharts !== 'undefined') {
|
|
||||||
const chart = new ApexCharts(document.getElementById("js-revenue-chart"), options);
|
|
||||||
chart.render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Truy cập
|
|
||||||
function access_chart() {
|
|
||||||
const options = {
|
|
||||||
colors: ["#0041E8", "#FFC700"],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Organic",
|
|
||||||
color: "#0041E8",
|
|
||||||
data: [
|
|
||||||
{ x: "Mon", y: 231 },
|
|
||||||
{ x: "Tue", y: 122 },
|
|
||||||
{ x: "Wed", y: 63 },
|
|
||||||
{ x: "Thu", y: 421 },
|
|
||||||
{ x: "Fri", y: 122 },
|
|
||||||
{ x: "Sat", y: 323 },
|
|
||||||
{ x: "Sun", y: 111 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Social media",
|
|
||||||
color: "#FFC700",
|
|
||||||
data: [
|
|
||||||
{ x: "Mon", y: 232 },
|
|
||||||
{ x: "Tue", y: 113 },
|
|
||||||
{ x: "Wed", y: 341 },
|
|
||||||
{ x: "Thu", y: 224 },
|
|
||||||
{ x: "Fri", y: 522 },
|
|
||||||
{ x: "Sat", y: 411 },
|
|
||||||
{ x: "Sun", y: 243 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
chart: {
|
|
||||||
type: "bar",
|
|
||||||
height: "320px",
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
horizontal: false,
|
|
||||||
columnWidth: "70%",
|
|
||||||
borderRadiusApplication: "end",
|
|
||||||
borderRadius: 8,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
shared: true,
|
|
||||||
intersect: false,
|
|
||||||
style: {
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
states: {
|
|
||||||
hover: {
|
|
||||||
filter: {
|
|
||||||
type: "darken",
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
show: true,
|
|
||||||
width: 0,
|
|
||||||
colors: ["transparent"],
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
show: false,
|
|
||||||
strokeDashArray: 4,
|
|
||||||
padding: {
|
|
||||||
left: 2,
|
|
||||||
right: 2,
|
|
||||||
top: -14
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
floating: false,
|
|
||||||
labels: {
|
|
||||||
show: true,
|
|
||||||
style: {
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.getElementById("js-access-chart") && typeof ApexCharts !== 'undefined') {
|
|
||||||
const chart = new ApexCharts(document.getElementById("js-access-chart"), options);
|
|
||||||
chart.render();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// web giới thiệu
|
|
||||||
function introduce_web_chart() {
|
|
||||||
const getChartOptions = () => {
|
|
||||||
return {
|
|
||||||
series: [35.1, 23.5, 2.4, 5.4],
|
|
||||||
colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
|
|
||||||
chart: {
|
|
||||||
height: 320,
|
|
||||||
width: "100%",
|
|
||||||
type: "donut",
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
colors: ["transparent"],
|
|
||||||
lineCap: "",
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
pie: {
|
|
||||||
donut: {
|
|
||||||
labels: {
|
|
||||||
show: true,
|
|
||||||
name: {
|
|
||||||
show: true,
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
offsetY: 20,
|
|
||||||
},
|
|
||||||
total: {
|
|
||||||
showAlways: true,
|
|
||||||
show: true,
|
|
||||||
label: "Lượt truy cập",
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
formatter: function (w) {
|
|
||||||
const sum = w.globals.seriesTotals.reduce((a, b) => {
|
|
||||||
return a + b
|
|
||||||
}, 0)
|
|
||||||
return `${sum}k`
|
|
||||||
},
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
show: true,
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
offsetY: -20,
|
|
||||||
formatter: function (value) {
|
|
||||||
return value + "k"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
size: "80%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
padding: {
|
|
||||||
top: -2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
labels: ["Trực tiếp", "Quảng cáo", "Liên kết", "Qua Email"],
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
position: "bottom",
|
|
||||||
fontFamily: "Inter, sans-serif",
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
labels: {
|
|
||||||
formatter: function (value) {
|
|
||||||
return value + "k"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
labels: {
|
|
||||||
formatter: function (value) {
|
|
||||||
return value + "k"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.getElementById("js-introduce-web-chart") && typeof ApexCharts !== 'undefined') {
|
|
||||||
const chart = new ApexCharts(document.getElementById("js-introduce-web-chart"), getChartOptions());
|
|
||||||
chart.render();
|
|
||||||
|
|
||||||
// Get all the checkboxes by their class name
|
|
||||||
const checkboxes = document.querySelectorAll('#devices input[type="checkbox"]');
|
|
||||||
|
|
||||||
// Function to handle the checkbox change event
|
|
||||||
function handleCheckboxChange(event, chart) {
|
|
||||||
const checkbox = event.target;
|
|
||||||
if (checkbox.checked) {
|
|
||||||
switch (checkbox.value) {
|
|
||||||
case 'web_1':
|
|
||||||
chart.updateSeries([15.1, 22.5, 4.4, 8.4]);
|
|
||||||
break;
|
|
||||||
case 'web_2':
|
|
||||||
chart.updateSeries([25.1, 26.5, 1.4, 3.4]);
|
|
||||||
break;
|
|
||||||
case 'web_3':
|
|
||||||
chart.updateSeries([45.1, 27.5, 8.4, 2.4]);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
chart.updateSeries([55.1, 28.5, 1.4, 5.4]);
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
chart.updateSeries([35.1, 23.5, 2.4, 5.4]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Attach the event listener to each checkbox
|
|
||||||
checkboxes.forEach((checkbox) => {
|
|
||||||
checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Hàm để cập nhật trạng thái hiển thị menu và localStorage
|
|
||||||
function capNhatTrangThaiMenu(hideMenuBig) {
|
|
||||||
$('#menu-big').toggleClass('hidden', hideMenuBig);
|
|
||||||
$('#menu-small').toggleClass('hidden', !hideMenuBig);
|
|
||||||
$('#js-form-search').toggleClass('menu-hide', hideMenuBig);
|
|
||||||
localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
|
|
||||||
localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
|
||||||
// Sự kiện click để hiển thị menu
|
|
||||||
$('#js-show-menu').click(function () {
|
|
||||||
capNhatTrangThaiMenu(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sự kiện click để ẩn menu
|
|
||||||
$('#js-hide-menu').click(function () {
|
|
||||||
capNhatTrangThaiMenu(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Kiểm tra localStorage và thiết lập trạng thái ban đầu của menu
|
|
||||||
const hideMenuBig = localStorage.getItem('menu_big') === 'hidden';
|
|
||||||
capNhatTrangThaiMenu(hideMenuBig);
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
26
template/javascript/global.html
Normal file
26
template/javascript/global.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
// Sự kiện click để hiển thị menu
|
||||||
|
$('#js-show-menu').click(function () {
|
||||||
|
capNhatTrangThaiMenu(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sự kiện click để ẩn menu
|
||||||
|
$('#js-hide-menu').click(function () {
|
||||||
|
capNhatTrangThaiMenu(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Kiểm tra localStorage và thiết lập trạng thái ban đầu của menu
|
||||||
|
const hideMenuBig = localStorage.getItem('menu_big') === 'hidden';
|
||||||
|
capNhatTrangThaiMenu(hideMenuBig);
|
||||||
|
})
|
||||||
|
|
||||||
|
// Hàm để cập nhật trạng thái hiển thị menu và localStorage
|
||||||
|
function capNhatTrangThaiMenu(hideMenuBig) {
|
||||||
|
$('#menu-big').toggleClass('hidden', hideMenuBig);
|
||||||
|
$('#menu-small').toggleClass('hidden', !hideMenuBig);
|
||||||
|
$('#js-form-search').toggleClass('menu-hide', hideMenuBig);
|
||||||
|
localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
|
||||||
|
localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
346
template/javascript/homepage.html
Normal file
346
template/javascript/homepage.html
Normal file
@@ -0,0 +1,346 @@
|
|||||||
|
<script src="{{ 'charts.js' | asset_url }}"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
revenue_chart(); // Doanh thu
|
||||||
|
|
||||||
|
access_chart(); // Truy cập
|
||||||
|
|
||||||
|
introduce_web_chart(); // web giới thiệu
|
||||||
|
|
||||||
|
$("#js-admin-home-tab a").click(function () {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
$("#js-admin-home-tab a").removeClass('current');
|
||||||
|
$(this).addClass('current');
|
||||||
|
|
||||||
|
var id = $(this).attr('href');
|
||||||
|
$('.home-report-holder').hide();
|
||||||
|
$(id).show();
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
// Doanh thu
|
||||||
|
function revenue_chart() {
|
||||||
|
let options = {
|
||||||
|
chart: {
|
||||||
|
maxWidth: "100%",
|
||||||
|
height: "320px",
|
||||||
|
type: "area",
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
dropShadow: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
enabled: true,
|
||||||
|
x: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
type: "gradient",
|
||||||
|
gradient: {
|
||||||
|
opacityFrom: 0.55,
|
||||||
|
opacityTo: 0,
|
||||||
|
shade: "#1C64F2",
|
||||||
|
gradientToColors: ["#1C64F2"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
width: 6,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
strokeDashArray: 4,
|
||||||
|
padding: {
|
||||||
|
left: 2,
|
||||||
|
right: 2,
|
||||||
|
top: 0
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "New users",
|
||||||
|
data: [6500, 6418, 6456, 6526, 6356, 6456],
|
||||||
|
color: "#0041E8",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xaxis: {
|
||||||
|
categories: [
|
||||||
|
'01 February',
|
||||||
|
'02 February',
|
||||||
|
'03 February',
|
||||||
|
'04 February',
|
||||||
|
'05 February',
|
||||||
|
'06 February',
|
||||||
|
'07 February'
|
||||||
|
],
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById("js-revenue-chart") && typeof ApexCharts !== 'undefined') {
|
||||||
|
const chart = new ApexCharts(document.getElementById("js-revenue-chart"), options);
|
||||||
|
chart.render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Truy cập
|
||||||
|
function access_chart() {
|
||||||
|
const options = {
|
||||||
|
colors: ["#0041E8", "#FFC700"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Organic",
|
||||||
|
color: "#0041E8",
|
||||||
|
data: [
|
||||||
|
{ x: "Mon", y: 231 },
|
||||||
|
{ x: "Tue", y: 122 },
|
||||||
|
{ x: "Wed", y: 63 },
|
||||||
|
{ x: "Thu", y: 421 },
|
||||||
|
{ x: "Fri", y: 122 },
|
||||||
|
{ x: "Sat", y: 323 },
|
||||||
|
{ x: "Sun", y: 111 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Social media",
|
||||||
|
color: "#FFC700",
|
||||||
|
data: [
|
||||||
|
{ x: "Mon", y: 232 },
|
||||||
|
{ x: "Tue", y: 113 },
|
||||||
|
{ x: "Wed", y: 341 },
|
||||||
|
{ x: "Thu", y: 224 },
|
||||||
|
{ x: "Fri", y: 522 },
|
||||||
|
{ x: "Sat", y: 411 },
|
||||||
|
{ x: "Sun", y: 243 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
chart: {
|
||||||
|
type: "bar",
|
||||||
|
height: "320px",
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: false,
|
||||||
|
columnWidth: "70%",
|
||||||
|
borderRadiusApplication: "end",
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
shared: true,
|
||||||
|
intersect: false,
|
||||||
|
style: {
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
filter: {
|
||||||
|
type: "darken",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 0,
|
||||||
|
colors: ["transparent"],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
strokeDashArray: 4,
|
||||||
|
padding: {
|
||||||
|
left: 2,
|
||||||
|
right: 2,
|
||||||
|
top: -14
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
floating: false,
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
style: {
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById("js-access-chart") && typeof ApexCharts !== 'undefined') {
|
||||||
|
const chart = new ApexCharts(document.getElementById("js-access-chart"), options);
|
||||||
|
chart.render();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// web giới thiệu
|
||||||
|
function introduce_web_chart() {
|
||||||
|
const getChartOptions = () => {
|
||||||
|
return {
|
||||||
|
series: [35.1, 23.5, 2.4, 5.4],
|
||||||
|
colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
|
||||||
|
chart: {
|
||||||
|
height: 320,
|
||||||
|
width: "100%",
|
||||||
|
type: "donut",
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
colors: ["transparent"],
|
||||||
|
lineCap: "",
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
donut: {
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
name: {
|
||||||
|
show: true,
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
offsetY: 20,
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
showAlways: true,
|
||||||
|
show: true,
|
||||||
|
label: "Lượt truy cập",
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
formatter: function (w) {
|
||||||
|
const sum = w.globals.seriesTotals.reduce((a, b) => {
|
||||||
|
return a + b
|
||||||
|
}, 0)
|
||||||
|
return `${sum}k`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
show: true,
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
offsetY: -20,
|
||||||
|
formatter: function (value) {
|
||||||
|
return value + "k"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
size: "80%",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
padding: {
|
||||||
|
top: -2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labels: ["Trực tiếp", "Quảng cáo", "Liên kết", "Qua Email"],
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: "bottom",
|
||||||
|
fontFamily: "Inter, sans-serif",
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
formatter: function (value) {
|
||||||
|
return value + "k"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
labels: {
|
||||||
|
formatter: function (value) {
|
||||||
|
return value + "k"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById("js-introduce-web-chart") && typeof ApexCharts !== 'undefined') {
|
||||||
|
const chart = new ApexCharts(document.getElementById("js-introduce-web-chart"), getChartOptions());
|
||||||
|
chart.render();
|
||||||
|
|
||||||
|
// Get all the checkboxes by their class name
|
||||||
|
const checkboxes = document.querySelectorAll('#devices input[type="checkbox"]');
|
||||||
|
|
||||||
|
// Function to handle the checkbox change event
|
||||||
|
function handleCheckboxChange(event, chart) {
|
||||||
|
const checkbox = event.target;
|
||||||
|
if (checkbox.checked) {
|
||||||
|
switch (checkbox.value) {
|
||||||
|
case 'web_1':
|
||||||
|
chart.updateSeries([15.1, 22.5, 4.4, 8.4]);
|
||||||
|
break;
|
||||||
|
case 'web_2':
|
||||||
|
chart.updateSeries([25.1, 26.5, 1.4, 3.4]);
|
||||||
|
break;
|
||||||
|
case 'web_3':
|
||||||
|
chart.updateSeries([45.1, 27.5, 8.4, 2.4]);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
chart.updateSeries([55.1, 28.5, 1.4, 5.4]);
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
chart.updateSeries([35.1, 23.5, 2.4, 5.4]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attach the event listener to each checkbox
|
||||||
|
checkboxes.forEach((checkbox) => {
|
||||||
|
checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
4
template/javascript/index.html
Normal file
4
template/javascript/index.html
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{% include javascript/global %}
|
||||||
|
|
||||||
|
|
||||||
|
{% include javascript/homepage %}
|
||||||
@@ -438,6 +438,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{% include javascript/index %}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user