github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

jsvectormap example added

pull/5104/head
Daniel 2023-05-09 10:16:00 +05:30
parent bb80f4d2f8
commit 441160809e
1 changed files with 164 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/html/pages/index.astro
View File

@ -18,6 +18,9 @@ const page = 'index'
<!-- apexcharts -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
<!-- jsvectormap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css" integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4=" crossorigin="anonymous">
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@ -45,7 +48,7 @@ const page = 'index'
<div class="container-fluid">
<!-- Small boxes (Stat box) -->
<div class="row">
<div class="col-lg-3 col-6">
<div class="col-lg-3 col-6" >
<!-- small box -->
<div class="small-box text-bg-primary">
<div class="inner">
@ -111,14 +114,10 @@ const page = 'index'
<!-- Main row -->
<div class="row">
<!-- Start col -->
<div class="col-lg-7">
<div class="col-lg-7 connectedSortable">
<div class="card">
<div class="card-header">
<h3 class="card-title">Sales Value</h3>
<div class="card-tools">
</div>
</div>
<div class="card-body">
@ -330,6 +329,39 @@ const page = 'index'
<!-- /.direct-chat -->
</div>
<!-- /.Start col -->
<!-- Start col -->
<div class="col-lg-5 connectedSortable">
<div class="card text-white bg-primary bg-gradient border-primary">
<div class="card-header border-0">
<h3 class="card-title">Sales Value</h3>
<div class="card-tools">
<button type="button" class="btn btn-primary btn-sm " data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
</button>
</div>
</div>
<div class="card-body">
<div id="world-map" style="height: 220px"></div>
</div>
<div class="card-footer border-0">
<div class="row">
<div class="col-4 text-center">
<div id="sparkline-1"></div>
<div class="text-white">Visitors</div>
</div>
<div class="col-4 text-center">
<div id="sparkline-2"></div>
<div class="text-white">Online</div>
</div>
<div class="col-4 text-center">
<div id="sparkline-3"></div>
<div class="text-white">Sales</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.Start col -->
</div>
<!-- /.row (main row) -->
</div><!-- /.container-fluid -->
@ -345,6 +377,24 @@ const page = 'index'
<!-- OPTIONAL SCRIPTS -->
<!-- sortablejs -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ=" crossorigin="anonymous"></script>
<!-- sortablejs -->
<script is:inline>
const connectedSortables = document.querySelectorAll('.connectedSortable')
connectedSortables.forEach(connectedSortable => {
let sortable = new Sortable(connectedSortable, {
group: 'shared',
})
})
const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
cardHeaders.forEach(cardHeader => {
cardHeader.style.cursor = 'move';
});
</script>
<!-- apexcharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
@ -354,7 +404,7 @@ const page = 'index'
// IT'S ALL JUST JUNK FOR DEMO
// ++++++++++++++++++++++++++++++++++++++++++
var sales_chart_options = {
const sales_chart_options = {
series: [{
name: 'Digital Goods',
data: [28, 48, 40, 19, 86, 27, 90]
@ -390,8 +440,114 @@ const page = 'index'
},
};
var sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
const sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
sales_chart.render();
</script>
<!-- jsvectormap -->
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js" integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js" integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY=" crossorigin="anonymous"></script>
<!-- jsvectormap -->
<script is:inline>
const visitorsData = {
US: 398, // USA
SA: 400, // Saudi Arabia
CA: 1000, // Canada
DE: 500, // Germany
FR: 760, // France
CN: 300, // China
AU: 700, // Australia
BR: 600, // Brazil
IN: 800, // India
GB: 320, // Great Britain
RU: 3000 // Russia
}
// World map by jsVectorMap
const map = new jsVectorMap({
selector: "#world-map",
map: "world",
});
// Sparkline charts
const option_sparkline1 = {
series: [{
data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
}],
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0
},
colors: ['#DCE6EC'],
};
const sparkline1 = new ApexCharts(document.querySelector("#sparkline-1"), option_sparkline1);
sparkline1.render();
const option_sparkline2 = {
series: [{
data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
}],
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0
},
colors: ['#DCE6EC'],
};
const sparkline2 = new ApexCharts(document.querySelector("#sparkline-2"), option_sparkline2);
sparkline2.render();
const option_sparkline3 = {
series: [{
data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
}],
chart: {
type: 'area',
height: 50,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0
},
colors: ['#DCE6EC'],
};
const sparkline3 = new ApexCharts(document.querySelector("#sparkline-3"), option_sparkline3);
sparkline3.render();
</script>
</body>
</html>