add chart.js to index3.html

src/assets/js/dashboard3.js

@@ -0,0 +1,117 @@
+/* global Chart:false */
+
+const ticksStyle = {
+  fontColor: '#495057',
+  fontStyle: 'bold'
+}
+
+const mode = 'index'
+const intersect = true
+
+const salesChartSelector = document.querySelector('#sales-chart')
+// eslint-disable-next-line no-unused-vars
+const salesChart = new Chart(salesChartSelector, {
+  type: 'bar',
+  data: {
+    labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
+    datasets: [{
+      label: 'My First Dataset',
+      data: [65, 59, 80, 81, 56, 55, 40],
+      backgroundColor: [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(255, 159, 64, 0.2)',
+        'rgba(255, 205, 86, 0.2)',
+        'rgba(75, 192, 192, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(153, 102, 255, 0.2)',
+        'rgba(201, 203, 207, 0.2)'
+      ],
+      borderColor: [
+        'rgb(255, 99, 132)',
+        'rgb(255, 159, 64)',
+        'rgb(255, 205, 86)',
+        'rgb(75, 192, 192)',
+        'rgb(54, 162, 235)',
+        'rgb(153, 102, 255)',
+        'rgb(201, 203, 207)'
+      ],
+      borderWidth: 1
+    }]
+  },
+  options: {
+    maintainAspectRatio: false,
+    scales: {
+      y: {
+        beginAtZero: true
+      }
+    }
+  }
+})
+
+const visitorsChartSelector = document.querySelector('#visitors-chart')
+// eslint-disable-next-line no-unused-vars
+const visitorsChart = new Chart(visitorsChartSelector, {
+  data: {
+    labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
+    datasets: [{
+      type: 'line',
+      data: [100, 120, 170, 167, 180, 177, 160],
+      backgroundColor: 'transparent',
+      borderColor: '#007bff',
+      pointBorderColor: '#007bff',
+      pointBackgroundColor: '#007bff'
+      // pointHoverBackgroundColor: '#007bff',
+      // pointHoverBorderColor    : '#007bff'
+    },
+    {
+      type: 'line',
+      data: [60, 80, 70, 67, 80, 77, 100],
+      backgroundColor: 'tansparent',
+      borderColor: '#ced4da',
+      pointBorderColor: '#ced4da',
+      pointBackgroundColor: '#ced4da'
+      // pointHoverBackgroundColor: '#ced4da',
+      // pointHoverBorderColor    : '#ced4da'
+    }]
+  },
+  options: {
+    maintainAspectRatio: false,
+    tooltip: {
+      mode,
+      intersect
+    },
+    hover: {
+      mode,
+      intersect
+    },
+    plugins: {
+      legend: {
+        display: false
+      }
+    },
+    scales: {
+      yAxes: [{
+        // display: false,
+        grid: {
+          display: true,
+          lineWidth: '4px',
+          color: 'rgba(0, 0, 0, .2)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: Object.assign({
+          beginAtZero: true,
+          suggestedMax: 200
+        }, ticksStyle)
+      }],
+      xAxes: [{
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: ticksStyle
+      }]
+    }
+  }
+})
+
+// lgtm [js/unused-local-variable]

src/index3.html

@@ -31,6 +31,45 @@
               <div class="col-lg-6">
                 <div class="card">
                   <div class="card-header border-0">
+                    <div class="d-flex justify-content-between">
+                      <h3 class="card-title">Online Store Visitors</h3>
+                      <a href="javascript:void(0);">View Report</a>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    <div class="d-flex">
+                      <p class="d-flex flex-column">
+                        <span class="text-bold text-lg">820</span>
+                        <span>Visitors Over Time</span>
+                      </p>
+                      <p class="ms-auto d-flex flex-column text-end">
+                        <span class="text-success">
+                          <i class="fas fa-arrow-up"></i> 12.5%
+                        </span>
+                        <span class="text-muted">Since last week</span>
+                      </p>
+                    </div>
+                    <!-- /.d-flex -->
+
+                    <div class="position-relative mb-4">
+                      <canvas id="visitors-chart" height="200"></canvas>
+                    </div>
+
+                    <div class="d-flex flex-row justify-content-end">
+                      <span class="me-2">
+                        <i class="fas fa-square text-primary"></i> This Week
+                      </span>
+
+                      <span>
+                        <i class="fas fa-square text-gray"></i> Last Week
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- /.card -->
+
+                <div class="card">
+                  <div class="card-header border-0">
                     <h3 class="card-title">Products</h3>
                     <div class="card-tools">
                       <a href="#" class="btn btn-tool btn-sm">
@@ -139,6 +178,45 @@
               <div class="col-lg-6">
                 <div class="card">
                   <div class="card-header border-0">
+                    <div class="d-flex justify-content-between">
+                      <h3 class="card-title">Sales</h3>
+                      <a href="javascript:void(0);">View Report</a>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    <div class="d-flex">
+                      <p class="d-flex flex-column">
+                        <span class="text-bold text-lg">$18,230.00</span>
+                        <span>Sales Over Time</span>
+                      </p>
+                      <p class="ms-auto d-flex flex-column text-end">
+                        <span class="text-success">
+                          <i class="fas fa-arrow-up"></i> 33.1%
+                        </span>
+                        <span class="text-muted">Since last month</span>
+                      </p>
+                    </div>
+                    <!-- /.d-flex -->
+
+                    <div class="position-relative mb-4">
+                      <canvas id="sales-chart" height="200"></canvas>
+                    </div>
+
+                    <div class="d-flex flex-row justify-content-end">
+                      <span class="me-2">
+                        <i class="fas fa-square text-primary"></i> This year
+                      </span>
+
+                      <span>
+                        <i class="fas fa-square text-gray"></i> Last year
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <!-- /.card -->
+
+                <div class="card">
+                  <div class="card-header border-0">
                     <h3 class="card-title">Online Store Overview</h3>
                     <div class="card-tools">
                       <a href="#" class="btn btn-sm btn-tool">
@@ -206,5 +284,10 @@
     @@include('./_scripts.html', {
       "path": "."
     })
+
+    <!-- ChartJS -->
+    <script src="./vendor/chart.js/dist/chart.js"></script>
+    <!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
+    <script src="./assets/js/dashboard3.js"></script>
   </body>
 </html>