Merge pull request #2466 from HHS/mb/TTAHUB-3609/line-graph-refactors

[TTAHUB-3609] Refactor line graph checkbox controls
HHS · Nov 26, 2024 · da89fff · da89fff
2 parents 3fd28db + 9fa2187
commit da89fff
Show file tree

Hide file tree

Showing 15 changed files with 186 additions and 108 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,7 +12,7 @@
     "@react-hook/resize-observer": "^1.2.6",
     "@silevis/reactgrid": "3.1",
     "@trussworks/react-uswds": "4.1.1",
-    "@ttahub/common": "^2.1.5",
+    "@ttahub/common": "^2.1.7",
     "@use-it/interval": "^1.0.0",
     "async": "^3.2.3",
     "browserslist": "^4.16.5",

diff --git a/frontend/src/pages/RegionalDashboard/__tests__/index.js b/frontend/src/pages/RegionalDashboard/__tests__/index.js
@@ -24,11 +24,23 @@ const reasonListUrl = join('api', 'widgets', 'reasonList');
 const reasonListResponse = [{ name: 'Ongoing Quality Improvement', count: 3 }];
 const totalHrsAndRecipientGraphUrl = join('api', 'widgets', 'totalHrsAndRecipientGraph');
 const totalHoursResponse = [{
-  name: 'Hours of Training', x: ['17', '18', '23', '2', '3'], y: [1.5, 0, 0, 0, 0], month: ['Nov', 'Nov', 'Nov', 'Dec', 'Dec'],
+  name: 'Hours of Training',
+  x: ['17', '18', '23', '2', '3'],
+  y: [1.5, 0, 0, 0, 0],
+  month: ['Nov', 'Nov', 'Nov', 'Dec', 'Dec'],
+  trace: 'circle',
 }, {
-  name: 'Hours of Technical Assistance', x: ['17', '18', '23', '2', '3'], y: [0, 0, 2.5, 2.5, 0], month: ['Nov', 'Nov', 'Nov', 'Dec', 'Dec'],
+  name: 'Hours of Technical Assistance',
+  x: ['17', '18', '23', '2', '3'],
+  y: [0, 0, 2.5, 2.5, 0],
+  month: ['Nov', 'Nov', 'Nov', 'Dec', 'Dec'],
+  trace: 'square',
 }, {
-  name: 'Hours of Both', x: ['17', '18', '23', '2', '3'], y: [1.5, 1.5, 0, 0, 3.5], month: ['Nov', 'Nov', 'Nov', 'Dec', 'Dec'],
+  name: 'Hours of Both',
+  x: ['17', '18', '23', '2', '3'],
+  y: [1.5, 1.5, 0, 0, 3.5],
+  month: ['Nov', 'Nov', 'Nov', 'Dec', 'Dec'],
+  trace: 'triangle',
 }];
 const topicFrequencyGraphUrl = join('api', 'widgets', 'topicFrequencyGraph');
 const topicFrequencyResponse = [{ topic: 'Behavioral / Mental Health / Trauma', count: 0 }, { topic: 'Child Screening and Assessment', count: 0 }];

diff --git a/frontend/src/pages/RegionalGoalDashboard/__tests__/index.js b/frontend/src/pages/RegionalGoalDashboard/__tests__/index.js
@@ -3,6 +3,7 @@ import {
   render, screen, act, within,
 } from '@testing-library/react';
 import moment from 'moment';
+import { TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS } from '@ttahub/common/src/constants';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import join from 'url-join';
@@ -30,18 +31,24 @@ const WIDGET_MOCKS = {
       x: ['Jul-22', 'Aug-22', 'Sep-22'],
       y: [338.5, 772, 211],
       month: [false, false, false],
+      id: TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS.TRAINING,
+      trace: 'square',
     },
     {
       name: 'Hours of Technical Assistance',
       x: ['Jul-22', 'Aug-22', 'Sep-22'],
       y: [279.5, 274.5, 155.5],
       month: [false, false, false],
+      id: TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS.TECHNICAL_ASSISTANCE,
+      trace: 'circle',
     },
     {
       name: 'Hours of Both',
       x: ['Jul-22', 'Aug-22', 'Sep-22'],
       y: [279.5, 274.5, 155.5],
       month: [false, false, false],
+      id: TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS.BOTH,
+      trace: 'triangle',
     },
   ],
 };

diff --git a/frontend/src/widgets/DeliveryMethodGraph.js b/frontend/src/widgets/DeliveryMethodGraph.js
@@ -34,6 +34,12 @@ const DEFAULT_SORT_CONFIG = {
 
 const KEY_COLUMNS = ['Months'];
 
+const TRACE_IDS = {
+  IN_PERSON: 'in-person',
+  VIRTUAL: 'virtual',
+  HYBRID: 'hybrid',
+};
+
 export default function DeliveryMethodGraph({ data }) {
   const widgetRef = useRef(null);
   const capture = useMediaCapture(widgetRef, 'Total TTA hours');
@@ -122,13 +128,13 @@ export default function DeliveryMethodGraph({ data }) {
     // use a map for quick lookup
     const traceMap = new Map();
     traceMap.set('Virtual', {
-      x: [], y: [], name: 'Virtual', traceOrder: 0,
+      x: [], y: [], name: 'Virtual', traceOrder: 0, id: TRACE_IDS.VIRTUAL, trace: 'triangle',
     });
     traceMap.set('In person', {
-      x: [], y: [], name: 'In person', traceOrder: 1,
+      x: [], y: [], name: 'In person', traceOrder: 1, id: TRACE_IDS.IN_PERSON, trace: 'circle',
     });
     traceMap.set('Hybrid', {
-      x: [], y: [], name: 'Hybrid', traceOrder: 2,
+      x: [], y: [], name: 'Hybrid', traceOrder: 2, id: TRACE_IDS.HYBRID, trace: 'square',
     });
 
     (records || []).forEach((dataset, index) => {
@@ -259,13 +265,13 @@ export default function DeliveryMethodGraph({ data }) {
         yAxisTitle="Percentage"
         legendConfig={[
           {
-            label: 'In person', selected: true, shape: 'circle', id: 'show-in-person-checkbox',
+            label: 'In person', selected: true, shape: 'circle', id: 'show-in-person-checkbox', traceId: TRACE_IDS.IN_PERSON,
           },
           {
-            label: 'Virtual', selected: true, shape: 'triangle', id: 'show-virtual-checkbox',
+            label: 'Virtual', selected: true, shape: 'triangle', id: 'show-virtual-checkbox', traceId: TRACE_IDS.VIRTUAL,
           },
           {
-            label: 'Hybrid', selected: true, shape: 'square', id: 'show-hybrid-checkbox',
+            label: 'Hybrid', selected: true, shape: 'square', id: 'show-hybrid-checkbox', traceId: TRACE_IDS.HYBRID,
           },
         ]}
         tableConfig={tableConfig}

diff --git a/frontend/src/widgets/LineGraph.js b/frontend/src/widgets/LineGraph.js
@@ -15,6 +15,73 @@ import NoResultsFound from '../components/NoResultsFound';
 
 const HOVER_TEMPLATE = '(%{x}, %{y})<extra></extra>';
 
+const TRACE_CONFIG = {
+  circle: (data) => ({
+    id: data.id,
+    // Technical Assistance
+    type: 'scatter',
+    mode: 'lines+markers',
+    x: data.x,
+    y: data.y,
+    hovertemplate: HOVER_TEMPLATE,
+    line: {
+      dash: 'solid',
+      width: 3,
+      color: colors.ttahubBlue,
+    },
+    marker: {
+      size: 12,
+    },
+    hoverlabel: {
+      font: { color: '#ffffff', size: '16' },
+      bgcolor: colors.textInk,
+    },
+  }),
+  square: (data) => ({
+    id: data.id,
+    type: 'scatter',
+    mode: 'lines+markers',
+    x: data.x,
+    y: data.y,
+    hovertemplate: HOVER_TEMPLATE,
+    line: {
+      dash: 'longdash',
+      width: 3,
+      color: colors.ttahubMediumDeepTeal,
+    },
+    marker: {
+      symbol: 'square',
+      size: 12,
+    },
+    hoverlabel: {
+      font: { color: '#ffffff', size: '16' },
+      bgcolor: colors.textInk,
+    },
+  }),
+  triangle: (data) => ({
+    // Training
+    id: data.id,
+    type: 'scatter',
+    mode: 'lines+markers',
+    x: data.x,
+    y: data.y,
+    hovertemplate: HOVER_TEMPLATE,
+    line: {
+      dash: 'dash',
+      width: 3,
+      color: colors.ttahubOrange,
+    },
+    marker: {
+      size: 14,
+      symbol: 'triangle-up',
+    },
+    hoverlabel: {
+      font: { color: '#ffffff', size: '16' },
+      bgcolor: colors.textInk,
+    },
+  }),
+};
+
 export default function LineGraph({
   data,
   hideYAxis,
@@ -125,74 +192,12 @@ export default function LineGraph({
       };
     }
 
-    // these are ordered from left to right how they appear in the checkboxes/legend
-    const traces = [
-      {
-        // Technical Assistance
-        type: 'scatter',
-        mode: 'lines+markers',
-        x: data[1].x,
-        y: data[1].y,
-        hovertemplate: HOVER_TEMPLATE,
-        line: {
-          dash: 'solid',
-          width: 3,
-          color: colors.ttahubBlue,
-        },
-        marker: {
-          size: 12,
-        },
-        hoverlabel: {
-          font: { color: '#ffffff', size: '16' },
-          bgcolor: colors.textInk,
-        },
-      },
-      // Both
-      {
-        type: 'scatter',
-        mode: 'lines+markers',
-        x: data[2].x,
-        y: data[2].y,
-        hovertemplate: HOVER_TEMPLATE,
-        line: {
-          dash: 'longdash',
-          width: 3,
-          color: colors.ttahubMediumDeepTeal,
-        },
-        marker: {
-          symbol: 'square',
-          size: 12,
-        },
-        hoverlabel: {
-          font: { color: '#ffffff', size: '16' },
-          bgcolor: colors.textInk,
-        },
-      },
-      {
-        // Training
-        type: 'scatter',
-        mode: 'lines+markers',
-        x: data[0].x,
-        y: data[0].y,
-        hovertemplate: HOVER_TEMPLATE,
-        line: {
-          dash: 'dash',
-          width: 3,
-          color: colors.ttahubOrange,
-        },
-        marker: {
-          size: 14,
-          symbol: 'triangle-up',
-        },
-        hoverlabel: {
-          font: { color: '#ffffff', size: '16' },
-          bgcolor: colors.textInk,
-        },
-      },
-    ];
+    const traces = data.map((d) => TRACE_CONFIG[d.trace](d));
 
-    const tracesToDraw = legends.map((legend, index) => (legend.selected ? traces[index] : null))
+    const tracesToDraw = legends
+      .map((legend) => (legend.selected ? traces.find(({ id }) => id === legend.traceId) : null))
       .filter((trace) => Boolean(trace));
+
     // draw the plot
     Plotly.newPlot(lines.current, tracesToDraw, layout, { displayModeBar: false, hovermode: 'none', responsive: true });
   }, [data, hideYAxis, legends, showTabularData, xAxisTitle, yAxisTitle, hasData]);
@@ -257,6 +262,7 @@ LineGraph.propTypes = {
       x: PropTypes.arrayOf(PropTypes.string),
       y: PropTypes.arrayOf(PropTypes.number),
       month: PropTypes.string,
+      id: PropTypes.string,
     }),
   ),
   hideYAxis: PropTypes.bool,

diff --git a/frontend/src/widgets/TotalHrsAndRecipientGraph.js b/frontend/src/widgets/TotalHrsAndRecipientGraph.js
@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS as TRACE_IDS } from '@ttahub/common';
 import withWidgetData from './withWidgetData';
 import LineGraph from './LineGraph';
 import WidgetContainer from '../components/WidgetContainer';
@@ -66,13 +67,13 @@ export function TotalHrsAndRecipientGraph({ data, hideYAxis }) {
         yAxisTitle="Number of hours"
         legendConfig={[
           {
-            label: 'Technical Assistance', selected: true, shape: 'circle', id: 'show-ta-checkbox',
+            label: 'Technical Assistance', selected: true, shape: 'circle', id: 'show-ta-checkbox', traceId: TRACE_IDS.TECHNICAL_ASSISTANCE,
           },
           {
-            label: 'Training', selected: true, shape: 'square', id: 'show-training-checkbox',
+            label: 'Training', selected: true, shape: 'square', id: 'show-training-checkbox', traceId: TRACE_IDS.TRAINING,
           },
           {
-            label: 'Both', selected: true, shape: 'triangle', id: 'show-both-checkbox',
+            label: 'Both', selected: true, shape: 'triangle', id: 'show-both-checkbox', traceId: TRACE_IDS.BOTH,
           },
         ]}
         tableConfig={{

diff --git a/frontend/src/widgets/__tests__/LineGraph.js b/frontend/src/widgets/__tests__/LineGraph.js
@@ -6,6 +6,7 @@ import {
   act,
   screen,
 } from '@testing-library/react';
+import { TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS } from '@ttahub/common/src/constants';
 import LineGraph from '../LineGraph';
 
 const traces = [
@@ -40,6 +41,8 @@ const traces = [
     ],
     name: 'In person',
     traceOrder: 1,
+    trace: 'circle',
+    id: TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS.IN_PERSON,
   },
   {
     x: [
@@ -72,6 +75,8 @@ const traces = [
     ],
     name: 'Virtual',
     traceOrder: 2,
+    trace: 'square',
+    id: TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS.VIRTUAL,
   },
   {
     x: [
@@ -104,6 +109,8 @@ const traces = [
     ],
     name: 'Hybrid',
     traceOrder: 3,
+    trace: 'triangle',
+    id: TOTAL_HOURS_AND_RECIPIENT_GRAPH_TRACE_IDS.HYBRID,
   },
 ];