346 lines
11 KiB
HTML
346 lines
11 KiB
HTML
|
<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>
|