DATAP-1533 stacked area chart class to functional (#537)

* initial implementation

* Fixed issue with updateTooltip, so that it doesn't need (and render) with tooltip date

* Removed old files for StackedAreaChart class component

* Added unit test for basic code coverage

* added comment to explain addition of dataClone variable

---------

Co-authored-by: cdhenley219 <[email protected]>

Author: cdmh219

src/components/Charts/LineChart/LineChart.spec.js

@@ -69,7 +69,9 @@ describe('component: LineChart', () => {
       lens: 'Overview',
     };
 
-    const view = {};
+    const view = {
+      isPrintMode: false,
+    };
 
     renderComponent(query, trends, view);
 

src/components/Charts/StackedAreaChart.js

@@ -0,0 +1,128 @@
+import './StackedAreaChart.less';
+import * as d3 from 'd3';
+import { stackedArea } from 'britecharts';
+import { useEffect, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import * as colors from '../../../constants/colors';
+import {
+  getLastDate,
+  pruneIncompleteStackedAreaInterval,
+  isStackedAreaDataEmpty,
+} from '../../../utils/chart';
+import { updateTrendsTooltip } from '../../../actions/trends';
+import { debounce } from '../../../utils';
+import {
+  selectTrendsResultsDateRangeArea,
+  selectTrendsColorMap,
+} from '../../../reducers/trends/selectors';
+import {
+  selectQueryDateReceivedMin,
+  selectQueryDateReceivedMax,
+  selectQueryDateInterval,
+  selectQueryLens,
+} from '../../../reducers/query/selectors';
+import { selectViewIsPrintMode } from '../../../reducers/view/selectors';
+import { ChartWrapper } from '../ChartWrapper/ChartWrapper';
+
+export const StackedAreaChart = () => {
+  const dispatch = useDispatch();
+
+  const colorMap = useSelector(selectTrendsColorMap);
+  const data = useSelector(selectTrendsResultsDateRangeArea);
+  const from = useSelector(selectQueryDateReceivedMin);
+  const to = useSelector(selectQueryDateReceivedMax);
+  const lens = useSelector(selectQueryLens);
+  const interval = useSelector(selectQueryDateInterval);
+  const isPrintMode = useSelector(selectViewIsPrintMode);
+
+  const showTooltip = lens !== 'Overview';
+
+  const filteredData = useMemo(() => {
+    const dateRange = { from, to };
+    return pruneIncompleteStackedAreaInterval(data, dateRange, interval);
+  }, [data, from, to, interval]);
+
+  const isDataEmpty = isStackedAreaDataEmpty(filteredData);
+
+  useEffect(() => {
+    const dateRange = { from, to };
+    const chartID = '#stacked-area-chart';
+    const chartSelector = chartID + ' .stacked-area';
+    const container = d3.select(chartID);
+
+    if (!container.node() || isDataEmpty) {
+      return;
+    }
+
+    const tooltipUpdated = (selectedState) => {
+      dispatch(updateTrendsTooltip(selectedState));
+    };
+
+    const updateTooltip = (point) => {
+      tooltipUpdated({
+        date: point.date,
+        dateRange,
+        interval,
+        values: point.values,
+      });
+    };
+
+    d3.select(chartSelector).remove();
+
+    const width = isPrintMode
+      ? 550
+      : container.node().getBoundingClientRect().width;
+
+    const colorData = filteredData.filter((item) => item.name !== 'Other');
+    const colorScheme = [...new Set(colorData.map((item) => item.name))].map(
+      (obj) => colorMap[obj],
+    );
+    colorScheme.push(colors.DataLens[10]);
+
+    const stackedAreaChart = stackedArea();
+
+    stackedAreaChart
+      .margin({ left: 70, right: 10, top: 10, bottom: 40 })
+      .areaCurve('linear')
+      .initializeVerticalMarker(true)
+      .isAnimated(false)
+      .tooltipThreshold(1)
+      .grid('horizontal')
+      .aspectRatio(0.5)
+      .width(width)
+      .dateLabel('date')
+      .colorSchema(colorScheme)
+      .on('customMouseMove', debounce(updateTooltip, 200));
+
+    container.datum(filteredData).call(stackedAreaChart);
+
+    const config = {
+      dateRange,
+      interval,
+    };
+
+    tooltipUpdated(getLastDate(filteredData, config));
+
+    return () => {
+      d3.select(chartSelector).remove();
+      container.datum([]);
+    };
+  }, [
+    colorMap,
+    from,
+    to,
+    dispatch,
+    filteredData,
+    interval,
+    isPrintMode,
+    isDataEmpty,
+  ]);
+
+  return (
+    <ChartWrapper
+      hasKey={showTooltip}
+      domId="stacked-area-chart"
+      isEmpty={isDataEmpty}
+    />
+  );
+};

src/components/Charts/StackedAreaChart/StackedAreaChart.js

@@ -0,0 +1,75 @@
+import { testRender as render, screen } from '../../../testUtils/test-utils';
+import * as d3 from 'd3';
+import { merge } from '../../../testUtils/functionHelpers';
+import { buildFluentMock } from '../__fixtures__/buildFluentMock';
+import { StackedAreaChart } from './StackedAreaChart';
+import { defaultTrends } from '../../../reducers/trends/trends';
+import { defaultQuery } from '../../../reducers/query/query';
+import { defaultView } from '../../../reducers/view/view';
+
+const renderComponent = (queryState, trendsState, viewState) => {
+  merge(queryState, defaultQuery);
+  merge(trendsState, defaultTrends);
+  merge(viewState, defaultView);
+
+  const data = {
+    query: queryState,
+    trends: trendsState,
+    view: viewState,
+  };
+
+  render(<StackedAreaChart />, {
+    preloadedState: data,
+  });
+};
+
+jest.mock('d3');
+describe('component::StackedAreaChart', () => {
+  beforeEach(() => {
+    const fakeD3 = buildFluentMock({ height: 50 });
+    // how we add our own implementation of d3
+    // override this so it doesn't crash. we test implementation elsewhere.
+    jest.spyOn(d3, 'select').mockImplementation(fakeD3);
+    jest.spyOn(d3, 'selectAll').mockImplementation(fakeD3);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render chart with data as expected', () => {
+    const trends = {
+      colorMap: {
+        Other: '#345',
+        foo: '#fff',
+        bar: '#eee',
+      },
+      results: {
+        dateRangeArea: [
+          { date: '2024-05-01T00:00:00.000Z', value: 225171, name: 'Other' },
+          { date: '2024-06-01T00:00:00.000Z', value: 225171, name: 'Other' },
+          { date: '2024-07-01T00:00:00.000Z', value: 225171, name: 'Other' },
+          { date: '2024-08-01T00:00:00.000Z', value: 198483, name: 'Other' },
+        ],
+      },
+      tooltip: false,
+    };
+
+    const query = {
+      dateInterval: 'Month',
+      date_received_max: new Date('2024-01-02T07:00:00.000Z'),
+      date_received_min: new Date('2024-12-02T08:00:00.000Z'),
+      lens: 'Overview',
+    };
+
+    const view = {
+      isPrintMode: false,
+      width: 1000,
+    };
+
+    renderComponent(query, trends, view);
+
+    expect(screen.getByText('Complaints')).toBeInTheDocument();
+    expect(screen.getByText('Date received by the CFPB')).toBeInTheDocument();
+  });
+});

src/components/Charts/StackedAreaChart.less src/components/Charts/StackedAreaChart/StackedAreaChart.less

@@ -24,7 +24,7 @@ import React from 'react';
 import { RowChart } from '../Charts/RowChart/RowChart';
 import Select from '../RefineBar/Select';
 import { Separator } from '../RefineBar/Separator';
-import StackedAreaChart from '../Charts/StackedAreaChart';
+import { StackedAreaChart } from '../Charts/StackedAreaChart/StackedAreaChart';
 import { TabbedNavigation } from '../TabbedNavigation';
 import { TrendDepthToggle } from './TrendDepthToggle';
 import { trendsDateWarningDismissed } from '../../actions/view';