update
This commit is contained in:
@@ -1,76 +0,0 @@
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
// Sự kiện click để hiển thị menu
|
||||
$('#js-show-menu').click(function () {
|
||||
$('#js-menu-big').toggleClass('show');
|
||||
$('#overlay').addClass('active');
|
||||
});
|
||||
|
||||
// hover show danh muc con
|
||||
HoverShowMenu();
|
||||
|
||||
AdminFunctions.searchSuggestions('#js-input-search')
|
||||
})
|
||||
|
||||
|
||||
function clickBackground() {
|
||||
$('#js-menu-big').removeClass('show');
|
||||
$('#overlay').removeClass('active');
|
||||
}
|
||||
|
||||
|
||||
function HoverShowMenu() {
|
||||
const $menuBig = $('#js-menu-big');
|
||||
const $hoverMenu = $('#js-hover-menu');
|
||||
|
||||
$menuBig.find('.box-item .item').on('mousemove', function () {
|
||||
if ($menuBig.hasClass('active')) {
|
||||
const $parentItem = $(this).closest('.box-item');
|
||||
const $hoverContent = $parentItem.find('.hover-menu');
|
||||
|
||||
if ($hoverContent.length) {
|
||||
const offset = $parentItem.offset();
|
||||
const menuWidth = $menuBig.width();
|
||||
const hoverHeight = $hoverContent.outerHeight();
|
||||
const windowHeight = $(window).height();
|
||||
const maxY = $(window).scrollTop() + windowHeight;
|
||||
|
||||
let posX = offset.left + menuWidth;
|
||||
let posY = offset.top;
|
||||
|
||||
if (posY + hoverHeight > maxY) {
|
||||
posY = maxY - hoverHeight - 10;
|
||||
}
|
||||
|
||||
$hoverMenu.addClass('active')
|
||||
.html($hoverContent.html())
|
||||
.css({ left: posX, top: posY });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$hoverMenu.on('mouseleave', function () {
|
||||
$hoverMenu.removeClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function formatCurrency(a) {
|
||||
var b = parseFloat(a).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
|
||||
var len = b.length;
|
||||
b = b.substring(0, len - 3);
|
||||
return b;
|
||||
}
|
||||
|
||||
|
||||
function toggleSubMenu(id) {
|
||||
const submenu = $('#' + id);
|
||||
submenu.toggleClass('active');
|
||||
if ($('#js-menu-big .sub-menu').hasClass('active')) {
|
||||
$('#js-menu-big').addClass('active');
|
||||
} else {
|
||||
$('#js-menu-big').removeClass('active');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,346 +1,282 @@
|
||||
<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"],
|
||||
const initCustomerAcquisitionChart = () => {
|
||||
const chartOptions = {
|
||||
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%",
|
||||
},
|
||||
height: 356,
|
||||
sparkline: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
background: "transparent",
|
||||
},
|
||||
forecastDataPoints: {
|
||||
count: 2,
|
||||
dashArray: [6, 4],
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -2,
|
||||
show: false,
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
min: 125,
|
||||
max: 181,
|
||||
},
|
||||
xaxis: {
|
||||
categories: Array.from({ length: 15 }, (_, index) => index + 1),
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: (val) => val.toString(),
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: "stepline",
|
||||
width: [2, 1.5],
|
||||
},
|
||||
colors: ["#167bff", "rgba(150,150,150,0.3)"],
|
||||
series: [
|
||||
{
|
||||
name: "Customer",
|
||||
data: [144, 150, 146, 154, 150, 155, 160, 155, 140, 155, 160, 180, 170, 165, 165],
|
||||
},
|
||||
{
|
||||
name: "Advertise",
|
||||
data: [140, 142, 142, 140, 146, 148, 150, 136, 130, 133, 145, 148, 158, 150, 150],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (document.getElementById("customer-acquisition-chart")) {
|
||||
new ApexCharts(document.getElementById("customer-acquisition-chart"), chartOptions).render()
|
||||
}
|
||||
}
|
||||
|
||||
const initRevenueStatisticsChart = () => {
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
height: 288,
|
||||
type: "bar",
|
||||
stacked: true,
|
||||
background: "transparent",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
borderRadiusApplication: "end",
|
||||
borderRadiusWhenStacked: "last",
|
||||
colors: {
|
||||
backgroundBarColors: ["rgba(150,150,150,0.07)"],
|
||||
backgroundBarRadius: 8,
|
||||
},
|
||||
columnWidth: "45%",
|
||||
barHeight: "100%",
|
||||
},
|
||||
},
|
||||
labels: ["Trực tiếp", "Quảng cáo", "Liên kết", "Qua Email"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
colors: ["#ff8b4b", "#6c74f8"],
|
||||
legend: {
|
||||
position: "bottom",
|
||||
fontFamily: "Inter, sans-serif",
|
||||
show: true,
|
||||
horizontalAlign: "center",
|
||||
offsetX: 0,
|
||||
offsetY: 6,
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return value + "k"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Orders",
|
||||
data: [10, 12, 14, 16, 18, 20, 14, 16, 24, 12],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Revenue",
|
||||
data: [15, 24, 21, 28, 30, 40, 22, 32, 48, 20],
|
||||
},
|
||||
],
|
||||
xaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return value + "k"
|
||||
},
|
||||
categories: [
|
||||
new Date("1/1/2016"),
|
||||
new Date("1/1/2017"),
|
||||
new Date("1/1/2018"),
|
||||
new Date("1/1/2019"),
|
||||
new Date("1/1/2020"),
|
||||
new Date("1/1/2021"),
|
||||
new Date("1/1/2022"),
|
||||
new Date("1/1/2023"),
|
||||
new Date("1/1/2024"),
|
||||
new Date("1/1/2025"),
|
||||
],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
formatter: (val) => {
|
||||
return new Date(val).getFullYear().toString()
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
shared: true,
|
||||
intersect: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 450,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 3,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (document.getElementById("revenue-statics-chart")) {
|
||||
new ApexCharts(document.getElementById("revenue-statics-chart"), chartOptions).render()
|
||||
}
|
||||
}
|
||||
|
||||
if (document.getElementById("js-introduce-web-chart") && typeof ApexCharts !== 'undefined') {
|
||||
const chart = new ApexCharts(document.getElementById("js-introduce-web-chart"), getChartOptions());
|
||||
chart.render();
|
||||
const initGlobalSalesChart = () => {
|
||||
const data = [
|
||||
{
|
||||
name: "Turkey",
|
||||
orders: 9,
|
||||
},
|
||||
{
|
||||
name: "India",
|
||||
orders: 12,
|
||||
},
|
||||
{
|
||||
name: "Canada",
|
||||
orders: 13,
|
||||
},
|
||||
{
|
||||
name: "US",
|
||||
orders: 16,
|
||||
},
|
||||
{
|
||||
name: "Netherlands",
|
||||
orders: 14,
|
||||
},
|
||||
{
|
||||
name: "Italy",
|
||||
orders: 17,
|
||||
},
|
||||
{
|
||||
name: "Other",
|
||||
orders: 19,
|
||||
},
|
||||
]
|
||||
|
||||
// Get all the checkboxes by their class name
|
||||
const checkboxes = document.querySelectorAll('#devices input[type="checkbox"]');
|
||||
const chartOptions = {
|
||||
chart: {
|
||||
height: 344,
|
||||
type: "bar",
|
||||
parentHeightOffset: 0,
|
||||
background: "transparent",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
borderRadiusApplication: "end",
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
textAnchor: "start",
|
||||
style: {
|
||||
colors: ["#fff"],
|
||||
},
|
||||
formatter: function (val, opt) {
|
||||
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
|
||||
},
|
||||
offsetX: -10,
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.map((country) => country.orders),
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
colors: ["#fff"],
|
||||
},
|
||||
xaxis: {
|
||||
categories: data.map((country) => country.name),
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
// 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]);
|
||||
}
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
formatter: (val) => `${val}%`,
|
||||
},
|
||||
},
|
||||
colors: ["#7179ff", "#4bcd89", "#ff6c88", "#5cb7ff", "#9071ff", "#ff5892", "#ff8b4b"],
|
||||
}
|
||||
|
||||
// Attach the event listener to each checkbox
|
||||
checkboxes.forEach((checkbox) => {
|
||||
checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));
|
||||
});
|
||||
if (document.getElementById("global-sales-chart")) {
|
||||
new ApexCharts(document.getElementById("global-sales-chart"), chartOptions).render()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initCustomerAcquisitionChart()
|
||||
initRevenueStatisticsChart()
|
||||
initGlobalSalesChart()
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -1,6 +1,12 @@
|
||||
<script src="/assets/typescript/main.js?v=1.111"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.css" />
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
<script src="{{'main.js' | asset_url }}"></script>
|
||||
|
||||
{% include javascript/global %}
|
||||
|
||||
{% if global.module == 'home' %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user