|
|
@@ -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>
|
Daniel