Moving from a tabbed area to switching on account dropdown

app/assets/javascripts/dashboardVisualization.js

@@ -1,5 +1,4 @@
- document.addEventListener('DOMContentLoaded', function() {
-    // Define constants
+(function (window) {
     const COLORS = {
         delivered: '#0076d6',
         failed: '#fa9441',
@@ -10,86 +9,106 @@
     const FONT_WEIGHT = 'bold';
     const MAX_Y = 120;
 
-    const tabButtons = document.querySelectorAll('.tablinks');
-    let monthlyChartInitialized = false;
-    let yearlyChartInitialized = false;
+    // Function to create a stacked bar chart with animation using D3.js
+    function createChart(containerId, labels, deliveredData, failedData) {
+        const container = d3.select(containerId);
+        container.selectAll('*').remove(); // Clear any existing content
 
+        const margin = { top: 20, right: 30, bottom: 40, left: 40 };
+        const width = container.node().clientWidth - margin.left - margin.right;
+        const height = 400 - margin.top - margin.bottom;
 
-    // Function to create a chart
-    function createChart(ctx, labels, deliveredData, failedData) {
-        return new Chart(ctx, {
-            type: 'bar',
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'Delivered',
-                    data: deliveredData,
-                    backgroundColor: COLORS.delivered,
-                    stack: 'Stack 0'
-                }, {
-                    label: 'Failed',
-                    data: failedData,
-                    backgroundColor: COLORS.failed,
-                    stack: 'Stack 0'
-                }]
-            },
-            options: {
-                scales: {
-                    x: {
-                        stacked: true,
-                    },
-                    y: {
-                        stacked: true,
-                        beginAtZero: true,
-                        max: MAX_Y,
-                        title: {
-                            display: true,
-                            text: 'SMS Sent',
-                            color: COLORS.text,
-                            font: {
-                                size: FONT_SIZE,
-                                weight: FONT_WEIGHT
-                            }
-                        }
-                    }
-                },
-                plugins: {
-                    legend: {
-                        position: 'top',
-                        align: 'end',
-                        labels: {
-                            padding: 20,
-                            boxWidth: 14,
-                            font: {
-                                size: 14
-                            }
-                        }
-                    }
-                },
-                responsive: true,
-                maintainAspectRatio: true
-            }
-        });
-    }
+        const svg = container.append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+            .append('g')
+            .attr('transform', `translate(${margin.left},${margin.top})`);
 
-    // Function to get number of days in a month
-    function getDaysInMonth(year, month) {
-        return new Date(year, month + 1, 0).getDate();
-    }
+        const x = d3.scaleBand()
+            .domain(labels)
+            .range([0, width])
+            .padding(0.1);
 
-    function generateYearlyData(labels) {
-        const deliveredData = labels.map((label, index) => {
-            return index < 6 ? Math.floor(Math.random() * 81) + 20 : 0; // Random between 20 and 100 for months Jan-June, zero for others
-        });
-        const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
-        return { deliveredData, failedData };
-    }
+        // Adjust the y-axis domain to add some space above the tallest bar
+        const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0)));
+        const y = d3.scaleLinear()
+            .domain([0, maxY + 2]) // Add 2 units of space at the top
+            .nice()
+            .range([height, 0]);
 
-    // Function to generate random data
-    function generateRandomData(labels) {
-        const deliveredData = labels.map(() => Math.floor(Math.random() * 81) + 20); // Random between 20 and 100
-        const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
-        return { deliveredData, failedData };
+        svg.append('g')
+            .attr('class', 'x axis')
+            .attr('transform', `translate(0,${height})`)
+            .call(d3.axisBottom(x));
+
+        // Generate the y-axis with whole numbers
+        const yAxis = d3.axisLeft(y)
+            .ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data
+            .tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis
+
+        svg.append('g')
+            .attr('class', 'y axis')
+            .call(yAxis);
+
+        // Data for stacking
+        const stackData = labels.map((label, i) => ({
+            label: label,
+            delivered: deliveredData[i],
+            failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
+        }));
+
+        // Stack the data
+        const stack = d3.stack()
+            .keys(['delivered', 'failed'])
+            .order(d3.stackOrderNone)
+            .offset(d3.stackOffsetNone);
+
+        const series = stack(stackData);
+
+        // Color scale
+        const color = d3.scaleOrdinal()
+            .domain(['delivered', 'failed'])
+            .range([COLORS.delivered, COLORS.failed]);
+
+        // Create tooltip
+        const tooltip = d3.select('#tooltip');
+
+        // Create bars with animation
+        const barGroups = svg.selectAll('.bar-group')
+            .data(series)
+            .enter()
+            .append('g')
+            .attr('class', 'bar-group')
+            .attr('fill', d => color(d.key));
+
+        barGroups.selectAll('rect')
+            .data(d => d)
+            .enter()
+            .append('rect')
+            .attr('x', d => x(d.data.label))
+            .attr('y', height)
+            .attr('height', 0)
+            .attr('width', x.bandwidth())
+            .on('mouseover', function(event, d) {
+                const key = d3.select(this.parentNode).datum().key;
+                const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+                tooltip.style('display', 'block')
+                    .html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`)
+                    .style('left', `${event.pageX + 10}px`)
+                    .style('top', `${event.pageY - 20}px`);
+            })
+            .on('mousemove', function(event) {
+                const [mouseX, mouseY] = d3.pointer(event);
+                tooltip.style('left', `${mouseX + 10}px`)
+                    .style('top', `${mouseY + 30}px`);
+            })
+            .on('mouseout', function() {
+                tooltip.style('display', 'none');
+            })
+            .transition()
+            .duration(1000)
+            .attr('y', d => y(d[1]))
+            .attr('height', d => y(d[0]) - y(d[1]));
     }
 
     // Function to create an accessible table
@@ -134,59 +153,68 @@
         table.appendChild(tbody);
     }
 
-    // Function to handle tab switching
-    function openTab(button, tabName) {
-        // Hide all tab contents
-        document.querySelectorAll('.tabcontent').forEach(content => {
-            content.style.display = 'none';
-        });
+    // Function to handle dropdown change
+    function handleDropdownChange(event) {
+        const selectedValue = event.target.value;
+        const subTitle = document.querySelector(`#chartsArea .chart-subtitle`);
+        const selectElement = document.getElementById('options');
+        const selectedText = selectElement.options[selectElement.selectedIndex].text;
 
-        // Remove "active" class from all buttons
-        tabButtons.forEach(button => {
-            button.classList.remove('active');
-        });
-
-        // Show the current tab and add "active" class to the button
-        document.getElementById(tabName).style.display = 'block';
-        button.classList.add('active');
-
-        // Initialize monthly chart if the "Monthly" tab is clicked
-        if (tabName === 'Monthly' && !monthlyChartInitialized) {
-            const monthlyCtx = document.getElementById('monthlyChart').getContext('2d');
-            const now = new Date();
-            const daysInMonth = getDaysInMonth(now.getFullYear(), now.getMonth());
-            const monthlyLabels = Array.from({ length: daysInMonth }, (_, i) => `${i + 1}`);
-            const { deliveredData, failedData } = generateRandomData(monthlyLabels);
-            createChart(monthlyCtx, monthlyLabels, deliveredData, failedData);
-            createTable('monthlyTable', 'Monthly', monthlyLabels, deliveredData, failedData);
-            monthlyChartInitialized = true;
-        }
-
-         // Initialize yearly chart if the "Yearly" tab is clicked
-        if (tabName === 'Yearly' && !yearlyChartInitialized) {
-            const yearlyCtx = document.getElementById('yearlyChart').getContext('2d');
-            const yearlyLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-                    const { deliveredData, failedData } = generateYearlyData(yearlyLabels);
-            createChart(yearlyCtx, yearlyLabels, deliveredData, failedData);
-            createTable('yearlyTable', 'Yearly', yearlyLabels, deliveredData, failedData);
-            yearlyChartInitialized = true;
+        if (selectedValue === "individual") {
+            // Mock individual data
+            const labels = ["2024-06-06", "2024-06-07", "2024-06-08", "2024-06-09", "2024-06-10", "2024-06-11", "2024-06-12"];
+            const deliveredData = labels.map(() => Math.floor(Math.random() * 5) + 1); // Random between 1 and 5
+            const failedData = deliveredData.map(delivered => Math.floor(delivered * (Math.random() * 0.15 + 0.05))); // 5-20% of delivered
+            subTitle.textContent = selectedText + " - Last 7 Days";
+            createChart('#weeklyChart', labels, deliveredData, failedData);
+            createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
+        } else if (selectedValue === "service") {
+            subTitle.textContent = selectedText + " - Last 7 Days";
+            // Fetch and use real service data
+            fetchServiceData();
         }
     }
 
-    // Add event listeners to the tab buttons
-    tabButtons.forEach(button => {
-        button.addEventListener('click', function(event) {
-            openTab(this, this.getAttribute('data-tab'));
+    function fetchServiceData() {
+        var ctx = document.getElementById('weeklyChart');
+        if (!ctx) {
+            return;
+        }
+
+        var socket = io();
+        var serviceId = ctx.getAttribute('data-service-id');
+
+        socket.on('connect', function() {
+            socket.emit('fetch_daily_stats', serviceId);
         });
+
+        socket.on('daily_stats_update', function(data) {
+            var labels = [];
+            var deliveredData = [];
+            var failedData = [];
+
+            for (var date in data) {
+                labels.push(date);
+                deliveredData.push(data[date].sms.delivered);
+                failedData.push(data[date].sms.failed !== undefined ? data[date].sms.failed : 0);
+            }
+
+            createChart('#weeklyChart', labels, deliveredData, failedData);
+            createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
+        });
+
+        socket.on('error', function(data) {
+            console.log('Error:', data);
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize weekly chart and table with service data by default
+        fetchServiceData();
+
+        // Add event listener to the dropdown
+        const dropdown = document.getElementById('options');
+        dropdown.addEventListener('change', handleDropdownChange);
     });
 
-    // Show the first tab by default
-    tabButtons[0].click();
-
-    // Initialize weekly chart and table
-    const weeklyCtx = document.getElementById('weeklyChart').getContext('2d');
-    const weeklyLabels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-    const { deliveredData: weeklyDeliveredData, failedData: weeklyFailedData } = generateRandomData(weeklyLabels);
-    createChart(weeklyCtx, weeklyLabels, weeklyDeliveredData, weeklyFailedData);
-    createTable('weeklyTable', 'Weekly', weeklyLabels, weeklyDeliveredData, weeklyFailedData);
-});
+})(window);

app/assets/javascripts/sampleChartDashboard.js

@@ -20,6 +20,7 @@
                 ]
             },
             options: {
+                animation: false,
                 scales: {
                     y: {
                         beginAtZero: true
@@ -38,10 +39,12 @@
         socket.on('daily_stats_update', function(data) {
             var labels = [];
             var deliveredData = [];
+            var failedData = [];
 
             for (var date in data) {
                 labels.push(date);
                 deliveredData.push(data[date].sms.delivered);
+
             }
 
             myBarChart.data.labels = labels;

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

@@ -58,9 +58,10 @@ $failed: color('orange-30v');
   line-height: 1;
   .usa-tooltip__body {
     width: units(mobile);
+    font-size: units(1);
     height: auto;
     white-space: wrap;
-    line-height: 1.3;
+    line-height: units(1);
   }
 }
 
@@ -81,33 +82,79 @@ $failed: color('orange-30v');
 
 // tabs
 
-.tab {
-  display: flex;
-  margin-bottom: units(2);
+// .tab {
+//   display: flex;
+//   margin-bottom: 10px; /* Replace units(2) with 10px */
+// }
+
+// .tab button {
+//   cursor: pointer;
+//   border-radius: 0;
+//   margin-right: -1px; /* Replace units(-1px) with -1px */
+//   &:focus {
+//     outline-width: 2px;
+//   }
+//   &.active, &:hover {
+//     background-color: #0076d6; /* Assuming color("blue-60v") is #0076d6 */
+//     color: #FFF;
+//     box-shadow: none;
+//   }
+// }
+
+// .tabcontent {
+//   display: none;
+//   height: 400px;
+//   width: 100%;
+//   padding: 10px; /* Replace units(1) with 10px */
+// }
+
+#chartsArea {
+  min-height: 400px;
 }
 
-.tab button {
-    cursor: pointer;
-    border-radius: 0;
-    margin-right: units(-1px);
-    &:focus {
-      outline-width: 2px;
-    }
-    &.active, &:hover {
-      background-color: color("blue-60v");
-      color: #FFF;
-      box-shadow: none;
-    }
-}
-.tabcontent {
-    display: none;
-    padding: units(1);
-}
 .chart-subtitle {
-    text-align: left;
-    width: 100%;
-    font-size: size("body", 5);
-    font-weight: bold;
-    padding: units(1);
-    margin: 0;
+  text-align: left;
+  width: 100%;
+  font-size: units(2);
+  font-weight: bold;
+  padding: 10px;
+  margin: 0;
+}
+
+.chart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.axis text {
+  font-size: size("body", 2);
+}
+
+.axis line,
+.axis path {
+  shape-rendering: crispEdges;
+  stroke: #000;
+  fill: none;
+}
+
+.bar {
+  fill-opacity: 0.8;
+}
+
+.chart-container {
+  width: 100%;
+  position: relative; /* Ensure it is relative for absolute positioning of tooltip */
+}
+
+#tooltip {
+  position: absolute;
+  display: none;
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  pointer-events: none;
+  font-size: size("body", 2);
+  z-index: 100; /* Ensure tooltip appears above other elements */
 }

app/templates/views/dashboard/dashboard.html

@@ -18,34 +18,28 @@
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-xl margin-top-0">Service Name Dashboard</h2>
+    <!-- <canvas id="myChart" data-service-id="{{ service_id }}"></canvas> -->
 
-    <div class="tab">
-      <button class="tablinks usa-button usa-button--outline margin-right-0 border-right-0" data-tab="Weekly">Weekly</button>
-      <button class="tablinks usa-button usa-button--outline margin-right-0" data-tab="Monthly">Monthly</button>
-      <button class="tablinks usa-button usa-button--outline" data-tab="Yearly">Yearly</button>
+    <h2 class="font-body-2xl margin-top-0">Service Name Dashboard</h2>
+
+    <form class="usa-form margin-bottom-2">
+      <label class="usa-label" for="options">Account</label>
+      <select class="usa-select" name="options" id="options">
+        <option value>- Select -</option>
+        <option value="service" selected>{{ current_service.name }}</option>
+        <option value="individual">{{ current_user.name }}</option>
+      </select>
+    </form>
+
+    <div id="chartsArea" class="margin-bottom-8">
+      <div id="Weekly">
+        <div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
+        <div class="chart-container" id="weeklyChart" data-service-id="{{ service_id }}"></div>
+        <table id="weeklyTable" class="usa-sr-only"></table>
+      </div>
+      <div id="tooltip"></div>
     </div>
 
-    <div id="Weekly" class="tabcontent">
-      <div class="chart-subtitle">2024 Total Message Allowance - Weekly</div>
-      <canvas id="weeklyChart"></canvas>
-      <table id="weeklyTable" class="usa-sr-only"></table>
-    </div>
-
-    <div id="Monthly" class="tabcontent">
-      <div class="chart-subtitle">2024 Total Message Allowance - Monthly</div>
-      <canvas id="monthlyChart"></canvas>
-      <table id="monthlyTable" class="usa-sr-only"></table>
-    </div>
-
-    <div id="Yearly" class="tabcontent">
-      <div class="chart-subtitle">2024 Total Message Allowance - Yearly</div>
-      <canvas id="yearlyChart"></canvas>
-      <table id="yearlyTable" class="usa-sr-only"></table>
-    </div>
-
-    <div id="message"></div>
-
     <!-- <h3 id="total-value" class="margin-y-1"></h3>
     <div class="chart-container">
       <div class="bar delivered" id="delivered-bar"></div>
@@ -76,7 +70,7 @@
       </div>
     </div> -->
 
-    <h2 class="font-body-2xl line-height-sans-2 margin-bottom-0 margin-top-4">
+    <h2 class="font-body-xl line-height-sans-2 margin-bottom-0 margin-top-4">
       Messages sent
     </h2>