From 441160809ed4f780d35ab35b2e6f7669206e823d Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Tue, 9 May 2023 10:16:00 +0530
Subject: [PATCH] jsvectormap example added

---
 src/html/pages/index.astro | 172 +++++++++++++++++++++++++++++++++++--
 1 file changed, 164 insertions(+), 8 deletions(-)
diff --git a/src/html/pages/index.astro b/src/html/pages/index.astro
index cd350d854..04da45500 100644
--- a/src/html/pages/index.astro
+++ b/src/html/pages/index.astro
@@ -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>
