Repository: dhsc-govuk/FingertipsNext
Pull request #500: Bugfix/dhscft 648 error bar visibility
Author: login: stuc-bjss
Created: 2025-04-23T10:19:56Z | Merged: 2025-04-23T10:58:39Z

# Description

Jira ticket: [DHSCFT-648](https://bjss-enterprise.atlassian.net/browse/DHSCFT-648)

## Changes

- Link React state and high charts events click
- Involves ugly mutation of HighCharts config options object
- Create a link between errorBars and their respective data series
- Brings state management of show/high CI bars into the Line chart component



Diff:
diff --git a/frontend/fingertips-frontend/components/molecules/Inequalities/InequalitiesTrend/index.tsx b/frontend/fingertips-frontend/components/molecules/Inequalities/InequalitiesTrend/index.tsx
index 9899ebe34..8a383a7d8 100644
--- a/frontend/fingertips-frontend/components/molecules/Inequalities/InequalitiesTrend/index.tsx
+++ b/frontend/fingertips-frontend/components/molecules/Inequalities/InequalitiesTrend/index.tsx
@@ -13,7 +13,6 @@ import {
   SearchStateManager,
   SearchStateParams,
 } from '@/lib/searchStateManager';
-import { useState } from 'react';
 import {
   generateInequalitiesLineChartOptions,
   getDynamicKeys,
@@ -33,10 +32,10 @@ import {
 } from '@/components/organisms/Inequalities/inequalitiesHelpers';
 import {
   AreaTypeLabelEnum,
+  createTooltipHTML,
   determineAreaCodes,
   determineHealthDataForArea,
   getTooltipContent,
-  createTooltipHTML,
   seriesDataWithoutGroup,
 } from '@/lib/chartHelpers/chartHelpers';
 import { ChartSelectArea } from '../../ChartSelectArea';
@@ -67,11 +66,6 @@ export function InequalitiesTrend({
   benchmarkComparisonMethod,
   dataSource,
 }: Readonly<InequalitiesTrendProps>) {
-  const [
-    showInequalitiesLineChartConfidenceIntervals,
-    setShowInequalitiesLineChartConfidenceIntervals,
-  ] = useState<boolean>(false);
-
   const stateManager = SearchStateManager.initialise(searchState);
   const {
     [SearchParams.GroupSelected]: selectedGroupCode,
@@ -186,7 +180,7 @@ export function InequalitiesTrend({
       lineChartData,
       dynamicKeys,
       type,
-      showInequalitiesLineChartConfidenceIntervals,
+      true,
       generateInequalitiesLineChartTooltipForPoint,
       {
         areasSelected: areaCodes,
@@ -222,12 +216,6 @@ export function InequalitiesTrend({
             content: (
               <LineChart
                 lineChartOptions={inequalitiesLineChartOptions}
-                showConfidenceIntervalsData={
-                  showInequalitiesLineChartConfidenceIntervals
-                }
-                setShowConfidenceIntervalsData={
-                  setShowInequalitiesLineChartConfidenceIntervals
-                }
                 variant={LineChartVariant.Inequalities}
               />
             ),
diff --git a/frontend/fingertips-frontend/components/organisms/Inequalities/inequalitiesHelpers.ts b/frontend/fingertips-frontend/components/organisms/Inequalities/inequalitiesHelpers.ts
index 64a2d439b..8b3c90cad 100644
--- a/frontend/fingertips-frontend/components/organisms/Inequalities/inequalitiesHelpers.ts
+++ b/frontend/fingertips-frontend/components/organisms/Inequalities/inequalitiesHelpers.ts
@@ -238,7 +238,7 @@ export const generateInequalitiesLineChartSeriesData = (
 
       const confidenceIntervalSeries: Highcharts.SeriesOptionsType =
         generateConfidenceIntervalSeries(
-          chartData.areaName,
+          key,
           chartData.rowData.map((data) => [
             data.period,
             data.inequalities[key]?.lower,
diff --git a/frontend/fingertips-frontend/components/organisms/LineChart/index.tsx b/frontend/fingertips-frontend/components/organisms/LineChart/index.tsx
index f2f24c18d..6490326dd 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChart/index.tsx
+++ b/frontend/fingertips-frontend/components/organisms/LineChart/index.tsx
@@ -4,30 +4,35 @@ import Highcharts from 'highcharts';
 import { HighchartsReact } from 'highcharts-react-official';
 import { ConfidenceIntervalCheckbox } from '@/components/molecules/ConfidenceIntervalCheckbox';
 import { useEffect, useState } from 'react';
-import { LineChartVariant } from './lineChartHelpers';
+import { addShowHideLinkedSeries, LineChartVariant } from './lineChartHelpers';
 import { loadHighchartsModules } from '@/lib/chartHelpers/chartHelpers';
 
 interface LineChartProps {
   lineChartOptions: Highcharts.Options;
-  showConfidenceIntervalsData: boolean;
-  setShowConfidenceIntervalsData: (checked: boolean) => void;
   variant: LineChartVariant;
 }
 
 export function LineChart({
   lineChartOptions,
-  showConfidenceIntervalsData,
-  setShowConfidenceIntervalsData,
   variant,
 }: Readonly<LineChartProps>) {
+  const [showConfidenceIntervalsData, setShowConfidenceIntervalsData] =
+    useState(false);
+  const [visibility, setVisibility] = useState<Record<string, boolean>>({});
   const [options, setOptions] = useState<Highcharts.Options>();
 
+  addShowHideLinkedSeries(
+    lineChartOptions,
+    showConfidenceIntervalsData,
+    visibility,
+    setVisibility
+  );
+
   useEffect(() => {
     void loadHighchartsModules(() => {
       setOptions(lineChartOptions);
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showConfidenceIntervalsData]);
+  }, [lineChartOptions]);
 
   if (!options) {
     return null;
diff --git a/frontend/fingertips-frontend/components/organisms/LineChart/lineChart.test.tsx b/frontend/fingertips-frontend/components/organisms/LineChart/lineChart.test.tsx
index b21c18382..9e1461304 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChart/lineChart.test.tsx
+++ b/frontend/fingertips-frontend/components/organisms/LineChart/lineChart.test.tsx
@@ -1,36 +1,85 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { LineChart } from '@/components/organisms/LineChart/index';
 import { expect } from '@jest/globals';
 import { lineChartDefaultOptions, LineChartVariant } from './lineChartHelpers';
 
-it('should render the Highcharts react component with passed parameters within the LineChart component', async () => {
-  render(
-    <LineChart
-      lineChartOptions={lineChartDefaultOptions}
-      showConfidenceIntervalsData={false}
-      setShowConfidenceIntervalsData={jest.fn()}
-      variant={LineChartVariant.Standard}
-    />
-  );
-
-  const highcharts = await screen.findByTestId(
-    'highcharts-react-component-lineChart'
-  );
-
-  await waitFor(() => {
-    expect(highcharts).toBeInTheDocument();
+const mockSeries = [
+  {
+    color: '#F46A25',
+    custom: { areaCode: 'A1425' },
+    data: [
+      [2004, 278.29134],
+      [2006, 703.420759],
+    ],
+    name: 'North FooBar',
+    type: 'line',
+    marker: {
+      symbol: 'arc',
+    },
+  },
+  {
+    color: '#B1B4B6',
+    data: [
+      [2004, 441.69151, 578.32766],
+      [2006, 441.69151, 578.32766],
+    ],
+    name: 'North FooBar',
+    linkedTo: 'North FooBar',
+    type: 'errorbar',
+    visible: true,
+    lineWidth: 2,
+    whiskerLength: '20%',
+  },
+];
+
+describe('LineChart', () => {
+  it('should render the Highcharts react component with passed parameters within the LineChart component', async () => {
+    act(() => {
+      render(
+        <LineChart
+          lineChartOptions={lineChartDefaultOptions}
+          variant={LineChartVariant.Standard}
+        />
+      );
+    });
+
+    const highcharts = await screen.findByTestId(
+      'highcharts-react-component-lineChart'
+    );
+
+    await waitFor(() => {
+      expect(highcharts).toBeInTheDocument();
+    });
   });
-});
 
-it('should validate the checkbox is checked when passed the correct parameter of lineChart', async () => {
-  render(
-    <LineChart
-      lineChartOptions={lineChartDefaultOptions}
-      showConfidenceIntervalsData={true}
-      setShowConfidenceIntervalsData={jest.fn()}
-      variant={LineChartVariant.Standard}
-    />
-  );
-
-  expect(await screen.findByRole('checkbox')).toBeChecked();
+  it('should mutate the lineChartOptions object to add visibility event functions', async () => {
+    const lineChartOptions = JSON.parse(
+      JSON.stringify(lineChartDefaultOptions)
+    );
+    lineChartOptions.series = mockSeries;
+    act(() => {
+      render(
+        <LineChart
+          lineChartOptions={lineChartOptions}
+          variant={LineChartVariant.Standard}
+        />
+      );
+    });
+    const highcharts = await screen.findByTestId(
+      'highcharts-react-component-lineChart'
+    );
+
+    const checkBox = screen.getByRole('checkbox');
+    expect(checkBox).toBeInTheDocument();
+    expect(checkBox).not.toBeChecked();
+
+    await waitFor(() => {
+      expect(highcharts).toBeInTheDocument();
+    });
+
+    expect(lineChartOptions.series[0].events).toBeDefined();
+    expect(lineChartOptions.series[0].events.show).toBeDefined();
+    expect(lineChartOptions.series[0].events.hide).toBeDefined();
+    expect(lineChartOptions.series[1].visible).toBeFalsy();
+  });
 });
diff --git a/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.test.ts b/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.test.ts
index 2e6c52a7e..f6c59d659 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.test.ts
+++ b/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.test.ts
@@ -1,12 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { SeriesLineOptions, SymbolKeyValue } from 'highcharts';
 import {
+  SeriesLineOptions,
+  SeriesOptionsType,
+  SymbolKeyValue,
+} from 'highcharts';
+import {
+  addShowHideLinkedSeries,
   generateSeriesData,
   generateStandardLineChartOptions,
 } from './lineChartHelpers';
 import { GovukColours } from '@/lib/styleHelpers/colours';
 import { mockIndicatorData, mockBenchmarkData, mockParentData } from './mocks';
 import { areaCodeForEngland } from '@/lib/chartHelpers/constants';
+import { Dispatch, SetStateAction } from 'react';
 
 const symbols: SymbolKeyValue[] = ['arc', 'circle', 'diamond'];
 
@@ -269,6 +275,7 @@ describe('generateSeriesData', () => {
           [2004, 441.69151, 578.32766],
         ],
         name: 'North FooBar',
+        linkedTo: 'North FooBar',
         type: 'errorbar',
         visible: true,
         lineWidth: 2,
@@ -368,3 +375,85 @@ describe('generateStandardLineChartOptions', () => {
     ).toMatchSnapshot();
   });
 });
+
+describe('addShowHideLinkedSeries', () => {
+  let generatedSeriesData: SeriesOptionsType[];
+  let setVisibility: Dispatch<SetStateAction<Record<string, boolean>>>;
+
+  beforeEach(() => {
+    generatedSeriesData = generateSeriesData(
+      [mockIndicatorData[0]],
+      symbols,
+      chartColours,
+      undefined,
+      undefined,
+      true
+    );
+
+    setVisibility = jest.fn() as Dispatch<
+      SetStateAction<Record<string, boolean>>
+    >;
+  });
+
+  it('should add add show and hide functions which call setVisibility (state)', () => {
+    addShowHideLinkedSeries(
+      { series: generatedSeriesData },
+      false,
+      {},
+      setVisibility
+    );
+
+    const [first] = generatedSeriesData;
+    if ('events' in first) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      first.events.show({});
+    }
+    expect(setVisibility).toBeCalledTimes(1);
+    expect(setVisibility).toBeCalledWith({ 'North FooBar': true });
+
+    if ('events' in first) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      first.events.hide({});
+    }
+    expect(setVisibility).toBeCalledTimes(2);
+    expect(setVisibility).toBeCalledWith({ 'North FooBar': false });
+  });
+
+  it('should set the initial visibility of linkedTo series to false', () => {
+    addShowHideLinkedSeries(
+      { series: generatedSeriesData },
+      false,
+      {},
+      setVisibility
+    );
+
+    expect(generatedSeriesData[0]).not.toHaveProperty('visible');
+    expect(generatedSeriesData[1]).toHaveProperty('visible', false);
+  });
+
+  it('should set the visibility of linkedTo series to false if true in state but showConfidenceIntervalsData is false', () => {
+    addShowHideLinkedSeries(
+      { series: generatedSeriesData },
+      false,
+      { 'North FooBar': true },
+      setVisibility
+    );
+
+    expect(generatedSeriesData[0]).not.toHaveProperty('visible');
+    expect(generatedSeriesData[1]).toHaveProperty('visible', false);
+  });
+
+  it('should set the visibility of linkedTo series to true if set in state and showConfidenceIntervalsData is true', () => {
+    addShowHideLinkedSeries(
+      { series: generatedSeriesData },
+      true,
+      { 'North FooBar': true },
+      setVisibility
+    );
+
+    expect(generatedSeriesData[0]).not.toHaveProperty('visible');
+    expect(generatedSeriesData[1]).toHaveProperty('visible', true);
+  });
+});
diff --git a/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts b/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts
index f71e0b50c..906f4f193 100644
--- a/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts
+++ b/frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.ts
@@ -18,6 +18,7 @@ import {
 import { formatNumber } from '@/lib/numberFormatter';
 import { pointFormatterHelper } from '@/lib/chartHelpers/pointFormatterHelper';
 import { areaCodeForEngland } from '@/lib/chartHelpers/constants';
+import { Dispatch, SetStateAction } from 'react';
 
 export enum LineChartVariant {
   Standard = 'standard',
@@ -328,3 +329,31 @@ export function generateStandardLineChartOptions(
     },
   };
 }
+
+// MUTATES the lineChartOptions add functions to series events
+// that call a React state change and set the visibility of
+// linkedTo series to match that set in the state.
+// Normally we'd avoid mutation, but HighCharts seems to work well this way
+// and this is a simple way to connect React state with HighCharts events
+export const addShowHideLinkedSeries = (
+  lineChartOptions: Highcharts.Options,
+  showConfidenceIntervalsData: boolean,
+  visibility: Record<string, boolean>,
+  setVisibility: Dispatch<SetStateAction<Record<string, boolean>>>
+) => {
+  lineChartOptions?.series?.forEach((series) => {
+    series.events ??= {};
+    if ('linkedTo' in series && series.linkedTo) {
+      series.visible =
+        showConfidenceIntervalsData && visibility[series.linkedTo];
+    }
+    series.events.show = function () {
+      const id = series.id ?? series.name;
+      setVisibility({ ...visibility, [id as string]: true });
+    };
+    series.events.hide = function () {
+      const id = series.id ?? series.name;
+      setVisibility({ ...visibility, [id as string]: false });
+    };
+  });
+};
diff --git a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx
index b1b1bd2ca..a4589f664 100644
--- a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx
+++ b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorOneAreaViewPlots/index.tsx
@@ -21,7 +21,6 @@ import {
   generateStandardLineChartOptions,
   LineChartVariant,
 } from '@/components/organisms/LineChart/lineChartHelpers';
-import { useState } from 'react';
 import { getAllDataWithoutInequalities } from '@/components/organisms/Inequalities/inequalitiesHelpers';
 import { DataSource } from '@/components/atoms/DataSource/DataSource';
 import { FormatValueAsNumber } from '@/lib/chartHelpers/labelFormatters';
@@ -51,10 +50,6 @@ export function OneIndicatorOneAreaViewPlots({
   const polarity = indicatorData.polarity as IndicatorPolarity;
   const benchmarkComparisonMethod =
     indicatorData.benchmarkMethod as BenchmarkComparisonMethod;
-  const [
-    showStandardLineChartConfidenceIntervalsData,
-    setShowStandardLineChartConfidenceIntervalsData,
-  ] = useState<boolean>(false);
 
   const healthIndicatorData = indicatorData?.areaHealthData ?? [];
   const dataWithoutEnglandOrGroup = seriesDataWithoutEnglandOrGroup(
@@ -89,7 +84,7 @@ export function OneIndicatorOneAreaViewPlots({
 
   const lineChartOptions: Highcharts.Options = generateStandardLineChartOptions(
     areaDataWithoutInequalities,
-    showStandardLineChartConfidenceIntervalsData,
+    true,
     {
       benchmarkData: englandBenchmarkWithoutInequalities,
       benchmarkComparisonMethod: benchmarkComparisonMethod,
@@ -101,6 +96,7 @@ export function OneIndicatorOneAreaViewPlots({
       accessibilityLabel: 'A line chart showing healthcare data',
     }
   );
+
   return (
     <section data-testid="oneIndicatorOneAreaViewPlot-component">
       {shouldLineChartBeShown(
@@ -118,12 +114,6 @@ export function OneIndicatorOneAreaViewPlots({
                 content: (
                   <LineChart
                     lineChartOptions={lineChartOptions}
-                    showConfidenceIntervalsData={
-                      showStandardLineChartConfidenceIntervalsData
-                    }
-                    setShowConfidenceIntervalsData={
-                      setShowStandardLineChartConfidenceIntervalsData
-                    }
                     variant={LineChartVariant.Standard}
                   />
                 ),
diff --git a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx
index 67bc650e4..eb6e9b699 100644
--- a/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx
+++ b/frontend/fingertips-frontend/components/viewPlots/OneIndicatorTwoOrMoreAreasViewPlots/index.tsx
@@ -15,7 +15,7 @@ import {
   generateStandardLineChartOptions,
   LineChartVariant,
 } from '@/components/organisms/LineChart/lineChartHelpers';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useSearchState } from '@/context/SearchStateContext';
 import { BenchmarkComparisonMethod } from '@/generated-sources/ft-api-client/models/BenchmarkComparisonMethod';
 import {
@@ -56,8 +56,6 @@ export function OneIndicatorTwoOrMoreAreasViewPlots({
     indicatorDataAllAreas?.areaHealthData ?? [];
 
   const { benchmarkMethod, polarity } = indicatorData;
-  const [showConfidenceIntervalsData, setShowConfidenceIntervalsData] =
-    useState<boolean>(false);
 
   const dataWithoutEnglandOrGroup = seriesDataWithoutEnglandOrGroup(
     healthIndicatorData,
@@ -91,7 +89,7 @@ export function OneIndicatorTwoOrMoreAreasViewPlots({
 
   const lineChartOptions: Highcharts.Options = generateStandardLineChartOptions(
     dataWithoutEnglandOrGroup,
-    showConfidenceIntervalsData,
+    true,
     {
       benchmarkData: englandBenchmarkData,
       benchmarkComparisonMethod: indicatorData.benchmarkMethod,
@@ -118,10 +116,6 @@ export function OneIndicatorTwoOrMoreAreasViewPlots({
                 content: (
                   <LineChart
                     lineChartOptions={lineChartOptions}
-                    showConfidenceIntervalsData={showConfidenceIntervalsData}
-                    setShowConfidenceIntervalsData={
-                      setShowConfidenceIntervalsData
-                    }
                     variant={LineChartVariant.Standard}
                   />
                 ),
diff --git a/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts b/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
index cc2523f2a..23e72faa6 100644
--- a/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
+++ b/frontend/fingertips-frontend/lib/chartHelpers/chartHelpers.ts
@@ -174,6 +174,7 @@ export function generateConfidenceIntervalSeries(
   return {
     type: 'errorbar',
     name: areaName,
+    linkedTo: areaName,
     data: data,
     visible: showConfidenceIntervalsData,
     color: optionalParams?.color ?? GovukColours.MidGrey,


Reviews:
user: login: MonkeyDate
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T10:44:11Z
user: login: stuc-bjss
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T10:46:06Z
user: login: MonkeyDate
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T10:49:12Z
user: login: dlzhry2
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T10:58:43Z
user: login: dlzhry2
body: Looks good.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T10:59:26Z

Review comments:
diff_hunk: @@ -186,7 +180,7 @@ export function InequalitiesTrend({
       lineChartData,
       dynamicKeys,
       type,
-      showInequalitiesLineChartConfidenceIntervals,
+      true,
path: frontend/fingertips-frontend/components/molecules/Inequalities/InequalitiesTrend/index.tsx
user: login: MonkeyDate
body: why is this now always true?
created_at: 2025-04-23T10:44:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -186,7 +180,7 @@ export function InequalitiesTrend({
       lineChartData,
       dynamicKeys,
       type,
-      showInequalitiesLineChartConfidenceIntervals,
+      true,
path: frontend/fingertips-frontend/components/molecules/Inequalities/InequalitiesTrend/index.tsx
user: login: stuc-bjss
body: because the decision to show or hide those error bars happens within the line chart component, and so they have to be generated in the first place.
created_at: 2025-04-23T10:46:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -368,3 +375,85 @@ describe('generateStandardLineChartOptions', () => {
     ).toMatchSnapshot();
   });
 });
+
+describe('addShowHideLinkedSeries', () => {
+  let generatedSeriesData: SeriesOptionsType[];
+  let setVisibility: Dispatch<SetStateAction<Record<string, boolean>>>;
+
+  beforeEach(() => {
+    generatedSeriesData = generateSeriesData(
+      [mockIndicatorData[0]],
+      symbols,
+      chartColours,
+      undefined,
+      undefined,
+      true
+    );
+
+    setVisibility = jest.fn() as Dispatch<
+      SetStateAction<Record<string, boolean>>
+    >;
+  });
+
+  it('should add add show and hide functions which call setVisibility (state)', () => {
path: frontend/fingertips-frontend/components/organisms/LineChart/lineChartHelpers.test.ts
user: login: dlzhry2
body: ```suggestion
  it('should add show and hide functions which call setVisibility (state)', () => {
```
created_at: 2025-04-23T10:58:43Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-04-23T10:37:20Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=500) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=500&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=dhsc-govuk_FingertipsNext&pullRequest=500&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=dhsc-govuk_FingertipsNext&pullRequest=500&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=500&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=dhsc-govuk_FingertipsNext&pullRequest=500&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=dhsc-govuk_FingertipsNext&pullRequest=500)


author_association: NONE