Revert "Switch to minimal plotly build"

This reverts commit cd10e47.
HHS · Jul 16, 2024 · 0c0cfe5 · 0c0cfe5
1 parent 5b201a5
commit 0c0cfe5
Show file tree

Hide file tree

Showing 6 changed files with 1,514 additions and 122 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,7 +30,8 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.35",
     "nth-check": "^2.0.1",
-    "plotly.js-strict-dist-min": "^2.33.0",
+    "plotly.js": "^2.25.2",
+    "plotly.js-basic-dist": "^2.2.1",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.0",
     "react": "^17.0.1",
@@ -45,6 +46,7 @@
     "react-idle-timer": "^4.4.2",
     "react-input-autosize": "^3.0.0",
     "react-js-pagination": "^3.0.3",
+    "react-plotly.js": "^2.5.1",
     "react-responsive": "^8.1.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

diff --git a/frontend/src/widgets/BarGraph.js b/frontend/src/widgets/BarGraph.js
@@ -1,15 +1,16 @@
-import React, {
-  useRef, useLayoutEffect, useState, useEffect,
-} from 'react';
+import React, { useRef, useLayoutEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import Plotly from 'plotly.js-strict-dist-min';
+// https://github.com/plotly/react-plotly.js/issues/135#issuecomment-501398125
+import Plotly from 'plotly.js-basic-dist';
+import createPlotlyComponent from 'react-plotly.js/factory';
 import colors from '../colors';
 import './BarGraph.css';
 
+const Plot = createPlotlyComponent(Plotly);
+const BottomAxis = createPlotlyComponent(Plotly);
+
 function BarGraph({ data }) {
   const parentRef = useRef(null);
-  const plot = useRef();
-  const bottomAxis = useRef();
   const [width, setWidth] = useState(850);
 
   // more nightmarish stuff here
@@ -30,109 +31,107 @@ function BarGraph({ data }) {
     return () => window.removeEventListener('resize', updateSize);
   }, []);
 
-  useEffect(() => {
-    if (!data || !Array.isArray(data)) {
-      return;
-    }
+  if (!data || !Array.isArray(data)) {
+    return null;
+  }
 
-    const categories = [];
-    const counts = [];
+  const categories = [];
+  const counts = [];
 
-    data.forEach((dataPoint) => {
-      categories.push(dataPoint.category);
-      counts.push(dataPoint.count);
-    });
+  data.forEach((dataPoint) => {
+    categories.push(dataPoint.category);
+    counts.push(dataPoint.count);
+  });
 
-    const range = [Math.min(...counts), Math.max(...counts)];
+  const range = [Math.min(...counts), Math.max(...counts)];
 
-    const trace = {
-      type: 'bar',
-      orientation: 'h',
-      x: counts,
-      y: categories,
-      marker: {
-        color: colors.ttahubMediumBlue,
-      },
-      width: 0.75,
-      hovertemplate: '%{y}: %{x}<extra></extra>',
-    };
+  const trace = {
+    type: 'bar',
+    orientation: 'h',
+    x: counts,
+    y: categories,
+    marker: {
+      color: colors.ttahubMediumBlue,
+    },
+    width: 0.75,
+    hovertemplate: '%{y}: %{x}<extra></extra>',
+  };
 
-    const layout = {
-      bargap: 0.5,
-      height: 25 * data.length,
-      width,
-      hoverlabel: {
-        bgcolor: '#000',
-        bordercolor: '#000',
-        font: {
-          color: '#fff',
-          size: 16,
-        },
-      },
+  const layout = {
+    bargap: 0.5,
+    height: 25 * data.length,
+    width,
+    hoverlabel: {
+      bgcolor: '#000',
+      bordercolor: '#000',
       font: {
-        color: colors.textInk,
-      },
-      margin: {
-        l: 320,
-        r: 0,
-        t: 0,
-        b: 0,
+        color: '#fff',
+        size: 16,
       },
-      xaxis: {
-        range,
-      },
-      yaxis: {
-        zeroline: false,
-        autotick: false,
-        ticks: 'outside',
-        tick0: 0,
-        ticklen: 4,
-        tickwidth: 1,
-        tickcolor: 'transparent',
-      },
-    };
-
-    const config = {
-      responsive: true,
-      displayModeBar: false,
-      hovermode: 'none',
-    };
+    },
+    font: {
+      color: colors.textInk,
+    },
+    margin: {
+      l: 320,
+      r: 0,
+      t: 0,
+      b: 0,
+    },
+    xaxis: {
+      range,
+    },
+    yaxis: {
+      zeroline: false,
+      autotick: false,
+      ticks: 'outside',
+      tick0: 0,
+      ticklen: 4,
+      tickwidth: 1,
+      tickcolor: 'transparent',
+    },
+  };
 
-    Plotly.newPlot(plot.current, [trace], layout, config);
-    Plotly.newPlot(
-      bottomAxis.current,
-      [{ mode: 'bar' }],
-      {
-        width,
-        height: 40,
-        margin: {
-          l: 320,
-          t: 0,
-          r: 0,
-        },
-        yaxis: { tickmode: 'array', tickvals: [] },
-        xaxis: {
-          range,
-        },
-      },
-      {
-        displayModeBar: false,
-        responsive: true,
-      },
-    );
-  }, [data, width]);
+  const config = {
+    responsive: true,
+    displayModeBar: false,
+    hovermode: 'none',
+  };
 
   return (
     <>
       <div className="ttahub-bar-graph maxh-mobile-lg overflow-y-scroll" ref={parentRef}>
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div className="ttahub-bar-graph--bars-top" tabIndex={0}>
           <span className="sr-only">Use the arrow keys to scroll graph</span>
-          <div ref={plot} />
+          <Plot
+            data={[trace]}
+            layout={layout}
+            config={config}
+          />
         </div>
       </div>
       <div className="height-5 width-full">
-        <div ref={bottomAxis} />
+        <BottomAxis
+          data={[{ mode: 'bar' }]}
+          layout={{
+            width,
+            height: 40,
+            margin: {
+              l: 320,
+              t: 0,
+              r: 0,
+            },
+            yaxis: { tickmode: 'array', tickvals: [] },
+            xaxis: {
+              range,
+            },
+          }}
+          config={{
+            displayModeBar: false,
+            responsive: true,
+          }}
+        />
       </div>
     </>
   );

diff --git a/frontend/src/widgets/TopicFrequencyGraph.js b/frontend/src/widgets/TopicFrequencyGraph.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import Plotly from 'plotly.js-strict-dist-min';
+import Plotly from 'plotly.js-basic-dist';
 import { Grid } from '@trussworks/react-uswds';
 import withWidgetData from './withWidgetData';
 import Container from '../components/Container';

diff --git a/frontend/src/widgets/TotalHrsAndRecipientGraph.js b/frontend/src/widgets/TotalHrsAndRecipientGraph.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import Plotly from 'plotly.js-strict-dist-min';
+import Plotly from 'plotly.js-basic-dist';
 import { Grid } from '@trussworks/react-uswds';
 import { DECIMAL_BASE } from '@ttahub/common';
 import withWidgetData from './withWidgetData';

diff --git a/frontend/src/widgets/VBarGraph.js b/frontend/src/widgets/VBarGraph.js
@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from '@trussworks/react-uswds';
-import Plotly from 'plotly.js-strict-dist-min';
+// https://github.com/plotly/react-plotly.js/issues/135#issuecomment-501398125
+import Plotly from 'plotly.js-basic-dist';
+import createPlotlyComponent from 'react-plotly.js/factory';
 import colors from '../colors';
 import Container from '../components/Container';
 import AccessibleWidgetData from './AccessibleWidgetData';
@@ -10,6 +12,8 @@ import WidgetH2 from '../components/WidgetH2';
 import useSize from '../hooks/useSize';
 import './VBarGraph.css';
 
+const Plot = createPlotlyComponent(Plotly);
+
 function VBarGraph({
   data,
   yAxisLabel,
@@ -19,9 +23,8 @@ function VBarGraph({
   loading,
   loadingLabel,
 }) {
+  const [plot, updatePlot] = useState({});
   const bars = useRef(null);
-  const plot = useRef(null);
-
   const [showAccessibleData, updateShowAccessibleData] = useState(false);
   // toggle the data table
   function toggleAccessibleData() {
@@ -95,7 +98,13 @@ function VBarGraph({
       hovermode: 'none',
     };
 
-    Plotly.newPlot(plot.current, [trace], layout, { displayModeBar: false, hovermode: 'none', responsive: true });
+    updatePlot({
+      data: [trace],
+      layout,
+      config: {
+        responsive: true, displayModeBar: false, hovermode: 'none',
+      },
+    });
   }, [data, xAxisLabel, size, yAxisLabel]);
 
   const tableData = data.map((row) => ({
@@ -147,7 +156,12 @@ function VBarGraph({
         : (
           <>
             <div className="display-flex flex-align-center position-relative">
-              <div ref={plot} />
+              <Plot
+                data={plot.data}
+                layout={plot.layout}
+                config={plot.config}
+              />
+
             </div>
           </>
         )}