diff --git a/app/assets/javascripts/dataVisualization.js b/app/assets/javascripts/dataVisualization.js index 676999cdc..6163bf7dc 100644 --- a/app/assets/javascripts/dataVisualization.js +++ b/app/assets/javascripts/dataVisualization.js @@ -1,24 +1,71 @@ (function (window) { // Dummy data (replace with API data) - const totalMessages = 1000; - const delivered = 800; - const pending = 100; - const failed = 100; + const data = { + messageStats: { + totalMessages: 1000, + delivered: 800, + pending: 100, + failed: 100 + }, + dailyUsage: { + dailyUsage: 20, + dailyUsageLimit: 100 + }, + yearlyUsage: { + yearlyUsage: 2000, + yearlyUsageLimit: 250000 + } + }; - // Calculate percentages - const deliveredPercentage = (delivered / totalMessages) * 100; - const pendingPercentage = (pending / totalMessages) * 100; - const failedPercentage = (failed / totalMessages) * 100; + // Update total messages progress bar percentages + const messageStats = data.messageStats; - // Set width of bars - document.getElementById("delivered").style.width = `${deliveredPercentage}%`; - document.getElementById("pending").style.width = `${pendingPercentage}%`; - document.getElementById("failed").style.width = `${failedPercentage}%`; + 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 legend values - document.getElementById("delivered-value").innerText = delivered; - document.getElementById("pending-value").innerText = pending; - document.getElementById("failed-value").innerText = failed; + // 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 = dailyUsage.dailyUsage; + document.getElementById("daily-remaining-value").innerText = dailyUsage.dailyUsageLimit - dailyUsage.dailyUsage; + document.getElementById("yearly-usage-value").innerText = yearlyUsage.yearlyUsage; + document.getElementById("yearly-remaining-value").innerText = yearlyUsage.yearlyUsageLimit - yearlyUsage.yearlyUsage; })(window); diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss index 87b8c5f6e..48e73d05b 100644 --- a/app/assets/sass/uswds/_data-visualization.scss +++ b/app/assets/sass/uswds/_data-visualization.scss @@ -1,42 +1,67 @@ @use "uswds-core" as *; +$delivered: color('blue-50v'); +$pending: color('green-cool-40v'); +$failed: color('orange-30v'); + .chart-container { display: flex; - height: 100px; + height: units(10); + &.usage { + height: units(5); + } } .bar { - height: 30px; - transition: width 0.5s ease; - &#delivered { - background-color: green; + &.delivered, &.usage { + background-color: $delivered; + margin-right: 1px; } - &#pending { - background-color: yellow; + &.pending{ + background-color: $pending; + margin-right: 1px; } - &#failed { - background-color: red; + &.failed, &.remaining { + background-color: $failed; } } .legend { display: flex; - justify-content: center; - margin-top: 10px; - + margin: units(1) 0; .legend-item { display: flex; align-items: center; - margin: 0 15px; + margin-right: units(2); } - .legend-color { - width: 20px; - height: 20px; - margin-right: 5px; + width: units(3); + height: units(3); + margin-right: units(1); + background-color: $delivered; + &.pending { + background-color: $pending; + } + &.failed, &.remaining { + background-color: $failed; + } } - .legend-label { margin-right: 5px; } } + + + .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; + } diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html index 5467c4cd7..000ec6e3d 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -14,10 +14,6 @@
-
- -
-

Dashboard

{% if current_user.has_permissions('manage_templates') and not current_service.all_templates %} {% include 'views/dashboard/write-first-messages.html' %} @@ -26,36 +22,66 @@

SMS Activity

-

Total 1000

+

-
-
-
+
+
+
-
-
Delivered
+
-
-
Pending
+
-
-
Failed
+
- {{ pill(years, selected_year, big_number_args={'smallest': True}) }} +

Usage

+

Daily

+

Across all services

- Test: - You have sent - {{ big_number(sms_sent, 'messages of your', smaller=True) }} - {{ big_number(sms_free_allowance, 'free messages allowance.', smaller=True) }} +

+
+
+
+
+
+
+
+
Daily usage
+
+
+
+
+
Remaining messages today
+
+
+
+ +

This year

+
+
+
+
+
+
+
+
Yearly usage
+
+
+
+
+
Remaining yearly messages
+
+
+

Messages sent @@ -68,9 +94,6 @@ {{ ajax_block(partials, updates_url, 'template-statistics') }} -

Usage

-

Daily

-

Across all services

-
Daily @@ -85,7 +108,6 @@
{{ global_message_limit - daily_global_messages_remaining }} {{ daily_global_messages_remaining }}{{ current_service.message_limit }}
diff --git a/tests/javascripts/dataVisualization.test.js b/tests/javascripts/dataVisualization.test.js new file mode 100644 index 000000000..e69de29bb