1484 - Dashboard visualizations

app/assets/javascripts/dataVisualization.js

@@ -0,0 +1,71 @@
+(function (window) {
+
+    // Dummy data (replace with API data)
+    const data = {
+        messageStats: {
+            totalMessages: 1000,
+            delivered: 800,
+            pending: 100,
+            failed: 100
+        },
+        dailyUsage: {
+            dailyUsage: 20,
+            dailyUsageLimit: 100
+        },
+        yearlyUsage: {
+            yearlyUsage: 2000,
+            yearlyUsageLimit: 250000
+        }
+    };
+
+     // Update total messages progress bar percentages
+    const messageStats = data.messageStats;
+
+    const messageBars = ["delivered", "pending", "failed"];
+        for (const bar of messageBars) {
+        const percentage = messageStats[bar] / messageStats.totalMessages * 100;
+        const elementId = `${bar}-bar`;
+        const element = document.getElementById(elementId);
+        element.style.width = `${parseFloat(percentage)}%`;
+    }
+
+    // Update total messages progress bar percentages
+    const dailyUsage = data.dailyUsage;
+    const dailyUsageLimit = dailyUsage.dailyUsageLimit;
+    const yearlyUsage = data.yearlyUsage;
+    const yearlyUsageLimit = yearlyUsage.yearlyUsageLimit;
+
+    function updateUsageBar(elementId, dailyUsage, dailyUsageLimit, yearlyUsage, yearlyUsageLimit) {
+        // Ensure element exists
+        if (!elementId || !document.getElementById(elementId)) {
+            console.error(`Element with ID "${elementId}" not found`);
+            return;
+        }
+
+        // Calculate percentage
+        const percentage = dailyUsage / dailyUsageLimit * 100;
+
+        // Update bar width
+        const element = document.getElementById(elementId);
+        element.style.width = `${parseFloat(percentage)}%`;
+    }
+
+    // Update usage bars
+    updateUsageBar("dailyUsage-bar", dailyUsage.dailyUsage, dailyUsageLimit);
+    updateUsageBar("dailyUsageRemaining-bar", dailyUsageLimit - dailyUsage.dailyUsage, dailyUsageLimit);
+    updateUsageBar("yearlyUsage-bar", yearlyUsage.yearlyUsage, yearlyUsageLimit);
+    updateUsageBar("yearlyUsageRemaining-bar", yearlyUsageLimit - yearlyUsage.yearlyUsage, yearlyUsageLimit);
+
+    // Update total messages legend values
+    document.getElementById("total-value").innerText = `Total: ${messageStats.totalMessages} messages`;
+    document.getElementById("delivered-value").innerText = `Delivered: ${messageStats.delivered}`;
+    document.getElementById("pending-value").innerText = `Pending: ${messageStats.pending}`;
+    document.getElementById("failed-value").innerText = `Failed: ${messageStats.failed}`;
+
+    // Update usage legend values
+    document.getElementById("daily-usage-value").innerText = `Daily usage: ${dailyUsage.dailyUsage}`;
+    document.getElementById("daily-remaining-value").innerText = `Remaining messages: ${dailyUsage.dailyUsageLimit - dailyUsage.dailyUsage}`;
+    document.getElementById("yearly-usage-value").innerText = `Yearly usage: ${yearlyUsage.yearlyUsage}`;
+    document.getElementById("yearly-remaining-value").innerText = `Remaining messages: ${yearlyUsage.yearlyUsageLimit - yearlyUsage.yearlyUsage}`;
+
+})(window);

app/assets/sass/uswds/_data-visualization.scss

@@ -0,0 +1,79 @@
+@use "uswds-core" as *;
+
+$delivered: color('blue-50v');
+$pending: color('green-cool-40v');
+$failed: color('orange-30v');
+
+.chart-container {
+  display: flex;
+  height: units(8);
+  &.usage {
+    height: units(4);
+  }
+}
+
+.bar {
+  border-radius: units(0.5);
+  &.delivered, &.usage {
+    background-color: $delivered;
+    margin-right: 1px;
+  }
+  &.pending{
+    background-color: $pending;
+    margin-right: 1px;
+  }
+  &.failed, &.remaining {
+    background-color: $failed;
+  }
+}
+
+.legend {
+  display: flex;
+  margin: units(1) 0;
+  .legend-item {
+    display: flex;
+    align-items: flex-start;
+    margin-right: units(2);
+  }
+  .legend-color {
+    width: units(3);
+    height: units(3);
+    margin-right: 0;
+    padding: 0;
+    border-radius: 2px;
+    background-color: $delivered;
+    &.pending {
+      background-color: $pending;
+    }
+    &.failed, &.remaining {
+      background-color: $failed;
+    }
+  }
+  .legend-value {
+    margin: 0 units(1);
+  }
+}
+
+.usa-tooltip {
+  line-height: 1;
+  .usa-tooltip__body {
+    width: units(mobile);
+    height: auto;
+    white-space: wrap;
+    line-height: 1.3;
+  }
+}
+
+.progress-bar {
+  width: 300px;
+  height: 20px;
+  background-color: #eee;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+.progress-bar-inner {
+  height: 100%;
+  background-color: #007bff;
+  border-radius: inherit;
+}