update system
This commit is contained in:
285
template/javascript/visitor.html
Normal file
285
template/javascript/visitor.html
Normal file
@@ -0,0 +1,285 @@
|
||||
<script src="/assets/script/charts.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
access_chart();
|
||||
chart_pie();
|
||||
revenue_chart();
|
||||
})
|
||||
|
||||
// Truy cập
|
||||
function access_chart() {
|
||||
const options = {
|
||||
colors: ["#0041E8", "#FFC700"],
|
||||
series: [
|
||||
{
|
||||
name: "Lượt truy cập",
|
||||
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: "Số khách",
|
||||
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: true,
|
||||
position: 'top',
|
||||
},
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function chart_pie() {
|
||||
const getChartOptions = () => {
|
||||
return {
|
||||
series: [55, 30, 15],
|
||||
colors: ["#0041E8", "#41C0E9", "#A8E5DA",],
|
||||
chart: {
|
||||
height: "370px",
|
||||
width: "100%",
|
||||
type: "pie",
|
||||
},
|
||||
stroke: {
|
||||
colors: ["transparent"],
|
||||
lineCap: "",
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontFamily: "Inter, sans-serif",
|
||||
offsetY: 20,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontFamily: "Inter, sans-serif",
|
||||
offsetY: -20,
|
||||
formatter: function (value) {
|
||||
return value + "%"
|
||||
},
|
||||
},
|
||||
},
|
||||
size: "100%",
|
||||
},
|
||||
},
|
||||
labels: ["Desktop", "Table", "Mobile"],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
textAnchor: 'middle',
|
||||
offsetX: '50%',
|
||||
offsetY: '50%',
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff',
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
fontFamily: "Inter, sans-serif",
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return value + "%"
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return value + "%"
|
||||
},
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
if (document.getElementById("js-chart-pie") && typeof ApexCharts !== 'undefined') {
|
||||
const chart = new ApexCharts(document.getElementById("js-chart-pie"), getChartOptions());
|
||||
chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user