Commit before branch switch

app/assets/javascripts/chartTest.js

@@ -1,23 +0,0 @@
-(function (window) {
-
-const ctx = document.getElementById('myChart');
-
-  new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-      datasets: [{
-        label: '# of Votes',
-        data: [12, 19, 3, 5, 2, 3],
-        borderWidth: 1
-      }]
-    },
-    options: {
-      scales: {
-        y: {
-          beginAtZero: true
-        }
-      }
-    }
-  });
-})(window);

app/assets/javascripts/show.js

@@ -0,0 +1,61 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const ctx = document.getElementById('myChart').getContext('2d');
+    const labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+
+    const dataDelivered = labels.map(() => Math.floor(Math.random() * 81) + 20); // Random between 20 and 100
+    const dataFailed = dataDelivered.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
+
+    const myChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: labels,
+            datasets: [{
+                label: 'Delivered',
+                data: dataDelivered,
+                backgroundColor: '#0076d6',
+                stack: 'Stack 0'
+            }, {
+                label: 'Failed',
+                data: dataFailed,
+                backgroundColor: '#fa9441',
+                stack: 'Stack 0'
+            }]
+        },
+        options: {
+            scales: {
+                x: {
+                    stacked: true,
+                },
+                y: {
+                    stacked: true,
+                    beginAtZero: true,
+                    max: 120,
+                      title: {
+                        display: true,
+                        text: 'SMS Sent', // Label for the Y-axis
+                        color: '#666',   // Optional: you can change the label color
+                        font: {
+                            size: 16,     // Optional: change the font size
+                            weight: 'bold', // Optional: change the font weight
+                        }
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    position: 'top',
+                    align: 'end',  // This aligns the legend items to the end of the area
+                    labels: {
+                        padding: 20,
+                        boxWidth: 14,
+                        font: {
+                            size: 14
+                        }
+                    }
+                }
+            },
+            responsive: true,
+            maintainAspectRatio: true
+        }
+    });
+});

app/templates/admin_template.html

@@ -24,7 +24,7 @@
     <meta property="og:image" content="{{ asset_url('images/notify-og-image.png') }}">
   {% endblock %}
   <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
-  <script type="text/javascript" type="module" src="{{ asset_url('js/chart.js') }}"></script>
+  <script type="text/javascript" src="{{ asset_url('js/chart.js') }}"></script>
 {% endblock %}
 
 {% block pageTitle %}

app/templates/views/dashboard/dashboard.html

@@ -18,11 +18,10 @@
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <canvas id="myChart" width="900" height="400"></canvas>
+    <h2 class="font-body-xl margin-0">Service Name Dashboard</h2>
+
+    <canvas id="myChart" width="600" height="400"></canvas>
 
-    <h2 class="font-body-xl margin-0">
-      SMS Activity
-    </h2>
     <h3 id="total-value" class="margin-y-1"></h3>
     <div class="chart-container">
       <div class="bar delivered" id="delivered-bar"></div>

gulpfile.js

@@ -129,7 +129,7 @@ const javascripts = () => {
     paths.src + 'javascripts/date.js',
     paths.src + 'javascripts/loginAlert.js',
     paths.src + 'javascripts/dataVisualization.js',
-    paths.src + 'javascripts/chartTest.js',
+    paths.src + 'javascripts/show.js',
     paths.src + 'javascripts/main.js',
   ])
     .pipe(plugins.prettyerror())