DATAP-1611 Made Chart Error Notification Full-Width (#563)

* Moved chart error notification to outside of the main chart wrapper, so that it can have full-width

* Updated margin for error notifications in general, and specialized ones in Trends Panel

* update dist

---------

Co-authored-by: Chanel Henley <[email protected]>
Co-authored-by: Richard Dinh <[email protected]>

src/components/Charts/ChartWrapper/ChartWrapper.js

@@ -1,23 +1,17 @@
 import './ChartWrapper.scss';
-import { ErrorBlock } from '../../Warnings/Error';
 import PropTypes from 'prop-types';
 
-export const ChartWrapper = ({ domId, hasKey, isEmpty }) => (
+export const ChartWrapper = ({ domId, hasKey }) => (
   <section className={`${hasKey ? 'ext-tooltip' : ''}`}>
-    {isEmpty ? (
-      <ErrorBlock text="Cannot display chart. Adjust your date range or date interval." />
-    ) : (
-      <div className="chart-wrapper">
-        <p className="y-axis-label">Complaints</p>
-        <div id={domId} />
-        <p className="x-axis-label">Date received by the CFPB</p>
-      </div>
-    )}
+    <div className="chart-wrapper">
+      <p className="y-axis-label">Complaints</p>
+      <div id={domId} />
+      <p className="x-axis-label">Date received by the CFPB</p>
+    </div>
   </section>
 );
 
 ChartWrapper.propTypes = {
   domId: PropTypes.string.isRequired,
   hasKey: PropTypes.bool.isRequired,
-  isEmpty: PropTypes.bool.isRequired,
 };

src/components/Charts/ChartWrapper/ChartWrapper.spec.js

@@ -6,13 +6,6 @@ describe('ChartWrapper', () => {
     render(<ChartWrapper hasKey={hasKey} isEmpty={isEmpty} domId={domId} />);
   };
 
-  test('It renders warning when empty', () => {
-    renderComponent({ hasKey: false, isEmpty: true, domId: 'some-id' });
-    expect(screen.getByRole('alert')).toHaveTextContent(
-      'Cannot display chart. Adjust your date range or date interval',
-    );
-  });
-
   test('It renders wrapper with data', () => {
     renderComponent({ hasKey: false, isEmpty: false, domId: 'some-id' });
     const text = screen.getByText('Date received by the CFPB');

src/components/Charts/LineChart/LineChart.js

@@ -27,6 +27,7 @@ import {
   selectQueryDateInterval,
 } from '../../../reducers/query/selectors';
 import { ChartWrapper } from '../ChartWrapper/ChartWrapper';
+import { ErrorBlock } from '../../Warnings/Error';
 
 export const LineChart = () => {
   const dispatch = useDispatch();
@@ -41,11 +42,14 @@ export const LineChart = () => {
   const width = useSelector(selectViewWidth);
 
   const hasTooltip = lens !== 'Overview';
+
   const processData = useMemo(() => {
     const dateRange = { from: dateFrom, to: dateTo };
     return pruneIncompleteLineInterval(areaData, dateRange, interval);
   }, [areaData, dateFrom, dateTo, interval]);
 
+  const isDataEmpty = isLineDataEmpty(processData);
+
   useEffect(() => {
     const dateRange = { from: dateFrom, to: dateTo };
     const chartID = '#line-chart';
@@ -148,11 +152,15 @@ export const LineChart = () => {
     width,
   ]);
 
+  if (isDataEmpty) {
+    return (
+      <ErrorBlock text="Cannot display chart. Adjust your date range or date interval." />
+    );
+  }
+
   return (
-    <ChartWrapper
-      hasKey={hasTooltip}
-      domId="line-chart"
-      isEmpty={isLineDataEmpty(processData)}
-    />
+    <section className="chart">
+      <ChartWrapper hasKey={hasTooltip} domId="line-chart" />
+    </section>
   );
 };

src/components/Charts/StackedAreaChart/StackedAreaChart.js

@@ -26,6 +26,7 @@ import {
   selectViewWidth,
 } from '../../../reducers/view/selectors';
 import { ChartWrapper } from '../ChartWrapper/ChartWrapper';
+import { ErrorBlock } from '../../Warnings/Error';
 
 export const StackedAreaChart = () => {
   const dispatch = useDispatch();
@@ -152,11 +153,15 @@ export const StackedAreaChart = () => {
     width,
   ]);
 
+  if (isDataEmpty) {
+    return (
+      <ErrorBlock text="Cannot display chart. Adjust your date range or date interval." />
+    );
+  }
+
   return (
-    <ChartWrapper
-      hasKey={showTooltip}
-      domId="stacked-area-chart"
-      isEmpty={isDataEmpty}
-    />
+    <section className="chart">
+      <ChartWrapper hasKey={showTooltip} domId="stacked-area-chart" />
+    </section>
   );
 };

src/components/Trends/TrendsPanel/TrendsPanel.js

@@ -295,10 +295,10 @@ export const TrendsPanel = () => {
             </strong>
           </div>
           <div className="layout-row">
-            <section className="chart">
+            <>
               {chartType === 'line' && <LineChart />}
               {chartType === 'area' && <StackedAreaChart />}
-            </section>
+            </>
             {!hasOverview && <ExternalTooltip />}
           </div>
         </>

src/components/Trends/TrendsPanel/TrendsPanel.scss

@@ -320,6 +320,13 @@
       margin-bottom: $gutter-normal;
     }
 
+    .m-notification {
+      width: 100%;
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
     @media screen and (min-width: $layout-breakpoint-tablet-min) and (max-width: $layout-breakpoint-tablet-max) {
       padding-left: 20px;
     }

src/components/Warnings/Error.js

@@ -1,5 +1,6 @@
 import getIcon from '../iconMap';
 import PropTypes from 'prop-types';
+import './Error.scss';
 
 export const ErrorBlock = ({ text }) => (
   <div

src/components/Warnings/Error.scss

@@ -0,0 +1,5 @@
+.error {
+    &.m-notification {
+       margin: 10px;
+    }
+}