1544 - Data visualization for Total Message Allowance

app/assets/javascripts/chartDashboard.js

@@ -1,24 +1,86 @@
-(function (window) {
+document.addEventListener('DOMContentLoaded', function () {
+    var canvas = document.getElementById('myChart');
+    var ctx = canvas.getContext('2d');
+    // Set explicit dimensions for the canvas
+    canvas.width = canvas.parentElement.clientWidth;
+    canvas.height = 100;
 
-    const ctx = document.getElementById('myChart');
+    var sentMessages = 80000;
+    var totalMessages = 250000;
+    var remainingMessages = totalMessages - sentMessages;
 
-    new Chart(ctx, {
+    var 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
-        }]
+            labels: [''],
+            datasets: [{
+                label: 'Messages Sent',
+                data: [sentMessages],
+                backgroundColor: '#0076d6',
+            },
+            {
+                label: 'Remaining',
+                data: [remainingMessages],
+                backgroundColor: '#fa9441',
+            }]
         },
         options: {
-        scales: {
-            y: {
-            beginAtZero: true
+            indexAxis: 'y',
+            scales: {
+                x: {
+                    beginAtZero: true,
+                    stacked: true,
+                    max: totalMessages,
+                    grid: {
+                        display: false,
+                    },
+                    border: {
+                        display: false,
+                    },
+                    ticks: {
+                        display: false // Hide x-axis ticks
+                    }
+                },
+                y: {
+                    stacked: true,
+                    grid: {
+                        display: false,
+                    },
+                    border: {
+                        display: false,
+                    },
+                    ticks: {
+                        display: false // Hide y-axis ticks
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(tooltipItem) {
+                            return tooltipItem.dataset.label + ': ' + tooltipItem.raw.toLocaleString();
+                        }
+                    }
+                },
+                title: {
+                    display: false // Hide the Chart.js title and use custom title
+                }
+            },
+            responsive: true,
+            layout: {
+                padding: {
+                    left: -10, // Adjust left padding to remove extra space
+                    top: 0,
+                    bottom: 0
+                }
             }
         }
-        }
     });
 
-})(window);
+    // Update the message below the chart
+    document.getElementById('message').innerText = `${sentMessages.toLocaleString()} sent / ${remainingMessages.toLocaleString()} remaining`;
+
+});