tooltip adjustments

app/assets/javascripts/dashboardVisualization.js

@@ -9,28 +9,15 @@
     const FONT_WEIGHT = 'bold';
     const MAX_Y = 120;
 
-    let currentLabels = [];
-    let currentDeliveredData = [];
-    let currentFailedData = [];
-
-    // Function to format the date
-    function formatDate(dateStr) {
-        const date = new Date(dateStr);
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        const year = date.getFullYear().toString().slice(-2);
-        return `${month}/${day}/${year}`;
-    }
-
     // Function to create a stacked bar chart with animation using D3.js
     function createChart(containerId, labels, deliveredData, failedData) {
-        currentLabels = labels;
-        currentDeliveredData = deliveredData;
-        currentFailedData = failedData;
-
         const container = d3.select(containerId);
         container.selectAll('*').remove(); // Clear any existing content
 
+        // Dynamically create tooltip element
+        const tooltip = container.append('div')
+            .attr('id', 'tooltip');
+
         const margin = { top: 60, right: 20, bottom: 40, left: 20 }; // Adjusted top margin for legend
         const width = container.node().getBoundingClientRect().width - margin.left - margin.right;
         const height = 400 - margin.top - margin.bottom;
@@ -42,33 +29,36 @@
             .attr('transform', `translate(${margin.left},${margin.top})`);
 
         // Create legend
+        const legend = svg.append('g')
+            .attr('class', 'legend')
+            .attr('transform', `translate(${width - 200},-40)`); // Adjust the position of the legend
+
         const legendData = [
             { label: 'Delivered', color: COLORS.delivered },
             { label: 'Failed', color: COLORS.failed }
         ];
 
-        const legend = d3.select('.chart-legend').selectAll('.legend-item')
+        const legendItem = legend.selectAll('.legend-item')
-            .data(legendData);
+            .data(legendData)
+            .enter()
+            .append('g')
+            .attr('class', 'legend-item')
+            .attr('transform', (d, i) => `translate(${i * 100},0)`); // Adjust the spacing between legend items
 
-        const legendEnter = legend.enter().append('div')
+        legendItem.append('rect')
-            .attr('class', 'legend-item');
-
-        legendEnter.append('rect')
             .attr('width', 18)
             .attr('height', 18)
             .attr('fill', d => d.color);
 
-        legendEnter.append('text')
+        legendItem.append('text')
             .attr('x', 24)
             .attr('y', 9)
             .attr('dy', '0.35em')
             .style('text-anchor', 'start')
             .text(d => d.label);
 
-        legend.exit().remove();
-
         const x = d3.scaleBand()
-            .domain(labels.map(formatDate)) // Format the dates
+            .domain(labels)
             .range([0, width])
             .padding(0.1);
 
@@ -95,7 +85,7 @@
 
         // Data for stacking
         const stackData = labels.map((label, i) => ({
-            label: formatDate(label), // Format the dates
+            label: label,
             delivered: deliveredData[i],
             failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
         }));
@@ -113,9 +103,6 @@
             .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)
@@ -132,18 +119,18 @@
             .attr('y', height)
             .attr('height', 0)
             .attr('width', x.bandwidth())
-            .on('mouseover', function (event, d) {
+            .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]}`);
             })
-            .on('mousemove', function (event) {
+            .on('mousemove', function(event) {
                 const containerPosition = container.node().getBoundingClientRect();
-                tooltip.style('left', `${event.clientX - containerPosition.left + 35}px`)
+                tooltip.style('left', `${event.clientX - containerPosition.left + 10}px`)
-                    .style('top', `${event.clientY - containerPosition.top + 135}px`);
+                    .style('top', `${event.clientY - containerPosition.top + 10}px`);
             })
-            .on('mouseout', function () {
+            .on('mouseout', function() {
                 tooltip.style('display', 'none');
             })
             .transition()
@@ -177,7 +164,7 @@
         labels.forEach((label, index) => {
             const row = document.createElement('tr');
             const cellDay = document.createElement('td');
-            cellDay.textContent = formatDate(label); // Format the dates
+            cellDay.textContent = label;
             row.appendChild(cellDay);
 
             const cellDelivered = document.createElement('td');
@@ -205,11 +192,11 @@
         var socket = io();
         var serviceId = ctx.getAttribute('data-service-id');
 
-        socket.on('connect', function () {
+        socket.on('connect', function() {
             socket.emit('fetch_daily_stats', serviceId);
         });
 
-        socket.on('daily_stats_update', function (data) {
+        socket.on('daily_stats_update', function(data) {
             var labels = [];
             var deliveredData = [];
             var failedData = [];
@@ -224,7 +211,7 @@
             createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
         });
 
-        socket.on('error', function (data) {
+        socket.on('error', function(data) {
             console.log('Error:', data);
         });
     }
@@ -251,13 +238,7 @@
         }
     }
 
-    function updateChartSize() {
+    document.addEventListener('DOMContentLoaded', function() {
-        createChart('#weeklyChart', currentLabels, currentDeliveredData, currentFailedData);
-    }
-
-    window.addEventListener('resize', updateChartSize);
-
-    document.addEventListener('DOMContentLoaded', function () {
         // Initialize weekly chart and table with service data by default
         fetchServiceData();
 

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

@@ -107,19 +107,6 @@ $failed: color('orange-30v');
 //   padding: 10px; /* Replace units(1) with 10px */
 // }
 
-#chartsArea {
-  min-height: 400px;
-}
-
-.chart-subtitle {
-  text-align: left;
-  width: 100%;
-  font-size: size("body", 6);
-  font-weight: bold;
-  padding: 0 units(1);
-  margin: 0;
-}
-
 .chart {
   display: flex;
   justify-content: center;
@@ -127,6 +114,22 @@ $failed: color('orange-30v');
   flex-direction: column;
 }
 
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+.chart-subtitle {
+  font-size: size("body", 6);
+  font-weight: bold;
+  text-align: left;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
 .axis text {
   font-size: size("body", 1);
 }
@@ -147,6 +150,23 @@ $failed: color('orange-30v');
   position: relative;
 }
 
+.chart-legend {
+    display: flex;
+    align-items: center;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    margin-right: units(2);
+}
+
+.legend-item rect {
+    width: units(2);
+    height: units(2);
+    margin-right: units(1);
+}
+
 #tooltip {
   position: absolute;
   display: none;
@@ -157,5 +177,6 @@ $failed: color('orange-30v');
   border-radius: units(1);
   pointer-events: none;
   z-index: 100;
-  font-size: size("body", 4);
+  font-size: size("body", 3);
+  line-height: 1.3;
 }

app/templates/views/dashboard/dashboard.html

@@ -22,6 +22,21 @@
 
     <h2 class="font-body-2xl margin-top-0">{{ current_service.name }} Dashboard</h2>
 
+    <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
+      Messages sent
+    </h2>
+
+    <!-- <button id="sevenDaysButton">7 Days</button>
+        <canvas id="myChart" data-service-id="{{ service_id }}"></canvas> -->
+    {{ ajax_block(partials, updates_url, 'inbox') }}
+
+    {{ ajax_block(partials, updates_url, 'totals') }}
+
+    {{ ajax_block(partials, updates_url, 'template-statistics') }}
+
+    <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
+      Activity snapshot
+    </h2>
     <div id="chartsArea">
       <form class="usa-form">
         <label class="usa-label" for="options">Account</label>
@@ -32,12 +47,14 @@
         </select>
       </form>
       <div id="Weekly">
-        <div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
+        <div class="chart-header">
+          <div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
+          <div class="chart-legend"></div>
+        </div>
         <div class="chart-container" id="weeklyChart" data-service-id="{{ service_id }}"></div>
         <table id="weeklyTable" class="usa-sr-only"></table>
       </div>
     </div>
-    <div id="tooltip"></div>
     <div id="message"></div>
 
     <!-- <h3 id="total-value" class="margin-y-1"></h3>
@@ -70,17 +87,6 @@
       </div>
     </div> -->
 
-    <h2 class="font-body-xl line-height-sans-2 margin-bottom-0 margin-top-4">
-      Messages sent
-    </h2>
-
-    <!-- <button id="sevenDaysButton">7 Days</button>
-    <canvas id="myChart" data-service-id="{{ service_id }}"></canvas> -->
-    {{ ajax_block(partials, updates_url, 'inbox') }}
-
-    {{ ajax_block(partials, updates_url, 'totals') }}
-
-    {{ ajax_block(partials, updates_url, 'template-statistics') }}
     <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
     <div class="table-wrapper">
       <table class="usa-table usa-table--borderless job-table">