EES-5759 handle empty charts

src/explore-education-statistics-common/src/modules/charts/components/CustomTooltip.tsx

@@ -51,7 +51,7 @@ const CustomTooltip = ({
         {tooltipLabel}
       </p>
 
-      {!!payload.length && (
+      {payload && !!payload.length && (
         <ul className={styles.itemList} data-testid="chartTooltip-items">
           {getPayloadOrder()?.map((item, index) => {
             const dataKey =

src/explore-education-statistics-common/src/modules/charts/components/HorizontalBarBlock.tsx

@@ -111,6 +111,10 @@ const HorizontalBarBlock = ({
   const chartHasNegativeValues =
     (parseNumber(minorDomainTicks.domain?.[0]) ?? 0) < 0;
 
+  if (!chartData.length) {
+    return <p className="govuk-!-margin-top-5">No data to display.</p>;
+  }
+
   return (
     <ChartContainer
       height={height || 300}

src/explore-education-statistics-common/src/modules/charts/components/LineChartBlock.tsx

@@ -105,6 +105,10 @@ const LineChartBlock = ({
   const chartHasNegativeValues =
     (parseNumber(minorDomainTicks.domain?.[0]) ?? 0) < 0;
 
+  if (!chartData.length) {
+    return <p className="govuk-!-margin-top-5">No data to display.</p>;
+  }
+
   return (
     <ChartContainer
       height={height || 300}

src/explore-education-statistics-common/src/modules/charts/components/VerticalBarBlock.tsx

@@ -163,6 +163,10 @@ const VerticalBarBlock = ({
     resizeTicks(containerWidth);
   }, 300);
 
+  if (!chartData.length) {
+    return <p className="govuk-!-margin-top-5">No data to display.</p>;
+  }
+
   return (
     <ChartContainer
       height={height || 300}

src/explore-education-statistics-common/src/modules/charts/components/__tests__/HorizontalBarBlock.test.tsx

@@ -1,6 +1,8 @@
 import {
   testChartConfiguration,
   testChartTableData,
+  testEmptyChartConfiguration,
+  testEmptyChartTableData,
 } from '@common/modules/charts/components/__tests__/__data__/testChartData';
 import { expectTicks } from '@common/modules/charts/components/__tests__/testUtils';
 import HorizontalBarBlock from '@common/modules/charts/components/HorizontalBarBlock';
@@ -65,6 +67,27 @@ describe('HorizontalBarBlock', () => {
     });
   });
 
+  test('does not render the chart if there is no chart data', async () => {
+    const emptyFullTable = mapFullTable(testEmptyChartTableData);
+    const emptyChartProps: VerticalBarProps = {
+      ...testEmptyChartConfiguration,
+      legend: testEmptyChartConfiguration.legend as LegendConfiguration,
+      axes: testEmptyChartConfiguration.axes as VerticalBarProps['axes'],
+      meta: emptyFullTable.subjectMeta,
+      data: emptyFullTable.results,
+      dataLabelPosition: 'inside',
+    };
+    const { container } = render(<HorizontalBarBlock {...emptyChartProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('No data to display.')).toBeInTheDocument();
+    });
+
+    expect(
+      container.querySelector('.recharts-wrapper'),
+    ).not.toBeInTheDocument();
+  });
+
   test('major axis can be hidden', () => {
     const { container } = render(
       <HorizontalBarBlock

src/explore-education-statistics-common/src/modules/charts/components/__tests__/LineChartBlock.test.tsx

@@ -1,6 +1,8 @@
 import {
   testChartConfiguration,
   testChartTableData,
+  testEmptyChartConfiguration,
+  testEmptyChartTableData,
 } from '@common/modules/charts/components/__tests__/__data__/testChartData';
 import { expectTicks } from '@common/modules/charts/components/__tests__/testUtils';
 import LineChartBlock, {
@@ -64,6 +66,27 @@ describe('LineChartBlock', () => {
     });
   });
 
+  test('does not render the chart if there is no chart data', async () => {
+    const emptyFullTable = mapFullTable(testEmptyChartTableData);
+    const emptyChartProps: LineChartProps = {
+      ...testEmptyChartConfiguration,
+      legend: testEmptyChartConfiguration.legend as LegendConfiguration,
+      axes: testEmptyChartConfiguration.axes as LineChartProps['axes'],
+      meta: emptyFullTable.subjectMeta,
+      data: emptyFullTable.results,
+      dataLabelPosition: 'above',
+    };
+    const { container } = render(<LineChartBlock {...emptyChartProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('No data to display.')).toBeInTheDocument();
+    });
+
+    expect(
+      container.querySelector('.recharts-wrapper'),
+    ).not.toBeInTheDocument();
+  });
+
   test('major axis can be hidden', () => {
     const { container } = render(
       <LineChartBlock

src/explore-education-statistics-common/src/modules/charts/components/__tests__/VerticalBarBlock.test.tsx

@@ -1,6 +1,8 @@
 import {
   testChartConfiguration,
   testChartTableData,
+  testEmptyChartConfiguration,
+  testEmptyChartTableData,
 } from '@common/modules/charts/components/__tests__/__data__/testChartData';
 import { expectTicks } from '@common/modules/charts/components/__tests__/testUtils';
 import VerticalBarBlock, {
@@ -66,6 +68,27 @@ describe('VerticalBarBlock', () => {
     });
   });
 
+  test('does not render the chart if there is no chart data', async () => {
+    const emptyFullTable = mapFullTable(testEmptyChartTableData);
+    const emptyChartProps: VerticalBarProps = {
+      ...testEmptyChartConfiguration,
+      legend: testEmptyChartConfiguration.legend as LegendConfiguration,
+      axes: testEmptyChartConfiguration.axes as VerticalBarProps['axes'],
+      meta: emptyFullTable.subjectMeta,
+      data: emptyFullTable.results,
+      dataLabelPosition: 'outside',
+    };
+    const { container } = render(<VerticalBarBlock {...emptyChartProps} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('No data to display.')).toBeInTheDocument();
+    });
+
+    expect(
+      container.querySelector('.recharts-wrapper'),
+    ).not.toBeInTheDocument();
+  });
+
   test('major axis can be hidden', () => {
     const { container } = render(
       <VerticalBarBlock

src/explore-education-statistics-common/src/modules/charts/components/__tests__/__data__/testChartData.ts

@@ -238,3 +238,113 @@ export const testChartTableData: TableDataResponse = {
     },
   ],
 };
+
+export const testEmptyChartConfiguration: Chart = {
+  legend: {
+    position: 'top',
+    items: [
+      {
+        dataSet: {
+          indicator: 'indicator-1-id',
+          filters: [],
+        },
+        label: 'Indicator 1',
+        colour: '#4763a5',
+      },
+    ],
+  },
+  axes: {
+    major: {
+      type: 'major',
+      groupBy: 'timePeriod',
+      sortAsc: true,
+      referenceLines: [],
+      dataSets: [
+        {
+          indicator: 'indicator-1-id',
+          filters: [],
+          location: {
+            level: 'localAuthority',
+            value: 'la-1',
+          },
+        },
+      ],
+      visible: true,
+      size: 50,
+      showGrid: true,
+      tickConfig: 'default',
+    },
+    minor: {
+      type: 'major',
+      groupBy: 'timePeriod',
+      referenceLines: [],
+      dataSets: [],
+      sortAsc: true,
+      visible: true,
+      size: 50,
+      showGrid: true,
+      min: 0,
+      tickConfig: 'default',
+    },
+  },
+  type: 'line',
+  title: 'Emptychart',
+  alt: 'Some alt text',
+  height: 300,
+  width: 600,
+};
+
+export const testEmptyChartTableData: TableDataResponse = {
+  subjectMeta: {
+    filters: {},
+    footnotes: [],
+    indicators: [
+      {
+        label: 'Indicator 1',
+        unit: '',
+        value: 'indicator-1-id',
+        name: 'indicator-1',
+      },
+    ],
+    locations: {
+      localAuthority: [
+        { id: 'la-1-id', label: 'LA 1', value: 'la-1' },
+        { id: 'la-2-id', label: 'LA 2', value: 'la-2' },
+      ],
+    },
+    boundaryLevels: [
+      {
+        id: 1,
+        label:
+          'Countries December 2017 Ultra Generalised Clipped Boundaries in UK',
+      },
+    ],
+    publicationName: 'Pupil absence in schools in England',
+    subjectName: 'Absence by characteristic',
+    timePeriodRange: [
+      { code: 'AY', label: '2020/21', year: 2020 },
+      { code: 'AY', label: '2021/22', year: 2021 },
+    ],
+    geoJsonAvailable: true,
+  },
+  results: [
+    {
+      filters: [],
+      geographicLevel: 'localAuthority',
+      locationId: 'la-1-id',
+      measures: {
+        'indicator-1-id': '1',
+      },
+      timePeriod: '2020_AY',
+    },
+    {
+      filters: [],
+      geographicLevel: 'localAuthority',
+      locationId: 'la-2-id',
+      measures: {
+        'indicator-1-id': '2',
+      },
+      timePeriod: '2021_AY',
+    },
+  ],
+};