From f09f246016ff485f9cf2177025b870459324af8c Mon Sep 17 00:00:00 2001 From: Jaroslaw Michalski Date: Mon, 2 Oct 2023 18:06:45 +0100 Subject: [PATCH 1/2] add code to hide/show selected data Headline numbers are filteres by the extra attributes. If they math areaName and areaType then the data is shown, otherwise it's hidden, unless there's no areaName, then it's also shown (to keep compatibility with older layout files). --- .../HeadlineNumbers/HeadlineNumbers.js | 36 +++++++++++++++---- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/HeadlineNumbers/HeadlineNumbers.js b/src/components/HeadlineNumbers/HeadlineNumbers.js index 1cbdce7f3..641503f9a 100644 --- a/src/components/HeadlineNumbers/HeadlineNumbers.js +++ b/src/components/HeadlineNumbers/HeadlineNumbers.js @@ -2,6 +2,8 @@ import React from "react"; +import { getParamValueFor } from "common/utils"; + import type { Props } from "./HeadlineNumbers.types"; import ValueBox from "components/ValueBox"; @@ -12,18 +14,40 @@ import type { ComponentType } from "react"; const HeadlineNumbers: ComponentType = ({ params, headlineNumbers=[] }) => { + const + areaType = getParamValueFor( + params, + "areaType", + "overview" + ).toLowerCase(), + areaName = getParamValueFor( + params, + "areaName", + "United Kingdom" + ).toLowerCase(); + + const getValueBox = (item, index) => { + return <> + { + (item?.areaName == null || (item?.areaName.toLowerCase() === areaName && item?.areaType.toLowerCase() === areaType)) + ? + : null + } + + } + + console.log("headline numbers:", headlineNumbers) + return Latest available data { - headlineNumbers?.map((item, index) => - - ) ?? null + headlineNumbers?.map((item, index) => getValueBox(item, index)) ?? null } From 2cf0c23ea129e8968587e7ce85f2cb902df599b8 Mon Sep 17 00:00:00 2001 From: Jaroslaw Michalski Date: Tue, 3 Oct 2023 11:29:07 +0100 Subject: [PATCH 2/2] add locationAware attribute to headlineNumbers Code changes to use the new attribute to show/hide headline numbers for a region --- src/common/utils/utils.js | 35 ++++++++++++++++ src/components/Card/Card.js | 40 +------------------ .../HeadlineNumbers/HeadlineNumbers.js | 16 +------- 3 files changed, 39 insertions(+), 52 deletions(-) diff --git a/src/common/utils/utils.js b/src/common/utils/utils.js index b6e5d50c7..aef18c138 100644 --- a/src/common/utils/utils.js +++ b/src/common/utils/utils.js @@ -5,6 +5,7 @@ import type { ParsedParams } from "./utils.types"; import type { RGB } from "components/MapTable/MapTable.types"; import { generateUrl } from "hooks/useApi"; import Path from "assets/paths.json"; +import type IsIncludedTypeProps from 'components/Card/Card.types'; export const sort = (a, b) => { @@ -192,6 +193,40 @@ export const getParamValueFor = (params: Array, keyName: string, d }; // getParamValueFor +export const isAreaIncluded = ({ params, locationAware={} }: IsIncludedTypeProps): boolean => { + if ( !Object.keys(locationAware).length ) + return true; + + const + areaType = getParamValueFor( + params, + "areaType", + "overview" + ).toLowerCase(), + areaName = getParamValueFor( + params, + "areaName", + "United Kingdom" + ).toLowerCase(), + includedAreaType = locationAware?.included?.areaType ?? [], + includedAreaName = locationAware?.included?.areaName ?? [], + excludedAreaType = locationAware?.excluded?.areaType ?? [], + excludedAreaName = locationAware?.excluded?.areaName ?? [], + hasExclusion = excludedAreaType.length > 0 && !(excludedAreaName.length > 0), + isExcluded = ( + excludedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 || + excludedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1 + ), + isIncluded = ( + includedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 || + includedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1 + ); + + return !hasExclusion ? isIncluded : !isExcluded + +}; // isAreaIncluded + + export const firstObjWithMax = ( arr: Array<{[string|number]: [string|number|null]}>, key: ([string|number]) => [string|number|null] ) => { const maxValue = max(arr, key); diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js index b03024e3d..2ecb0f76f 100644 --- a/src/components/Card/Card.js +++ b/src/components/Card/Card.js @@ -3,7 +3,7 @@ import React, { useState, useEffect, lazy, Suspense } from 'react'; import { Link } from "react-router-dom"; -import { fieldToStructure, getParamValueFor, heading2id } from "common/utils"; +import { fieldToStructure, heading2id, isAreaIncluded } from "common/utils"; import usePrevious from "hooks/usePrevious"; import TabLinkContainer from "components/TabLink"; import { Radio } from "components/GovUk"; @@ -27,7 +27,6 @@ import { ShareRow } from './Card.styles'; -import type { IsIncludedTypeProps, Props } from './Card.types'; import type { ComponentType } from 'react'; import DownloadIcon from "assets/icon-download.svg"; @@ -152,41 +151,6 @@ const NoTabCard: ComponentType<*> = ({ cardType, ...props }) => { }; // NoTabCards -const isIncluded = ({ params, locationAware={} }: IsIncludedTypeProps): boolean => { - - if ( !Object.keys(locationAware).length ) - return true; - - const - areaType = getParamValueFor( - params, - "areaType", - "overview" - ).toLowerCase(), - areaName = getParamValueFor( - params, - "areaName", - "United Kingdom" - ).toLowerCase(), - includedAreaType = locationAware?.included?.areaType ?? [], - includedAreaName = locationAware?.included?.areaName ?? [], - excludedAreaType = locationAware?.excluded?.areaType ?? [], - excludedAreaName = locationAware?.excluded?.areaName ?? [], - hasExclusion = excludedAreaType.length > 0 && !(excludedAreaName.length > 0), - isExcluded = ( - excludedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 || - excludedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1 - ), - isIncluded = ( - includedAreaType.map(value => value.toLowerCase()).indexOf(areaType) > -1 || - includedAreaName.map(value => value.toLowerCase()).indexOf(areaName) > -1 - ); - - return !hasExclusion ? isIncluded : !isExcluded - -}; // isIncluded - - const CardContent = ({ tabs: singleOptionTabs=null, cardType, download=[], params, options=null, heading, fullWidth, abstract=null, ...props }) => { @@ -284,7 +248,7 @@ const CardContent = ({ tabs: singleOptionTabs=null, cardType, download=[], param ...customProps?.[cardType] ?? {} }; - if ( !isIncluded(cardProps) ) + if ( !isAreaIncluded(cardProps) ) return null; return diff --git a/src/components/HeadlineNumbers/HeadlineNumbers.js b/src/components/HeadlineNumbers/HeadlineNumbers.js index 641503f9a..d12d5514f 100644 --- a/src/components/HeadlineNumbers/HeadlineNumbers.js +++ b/src/components/HeadlineNumbers/HeadlineNumbers.js @@ -2,7 +2,7 @@ import React from "react"; -import { getParamValueFor } from "common/utils"; +import { getParamValueFor, isAreaIncluded } from "common/utils"; import type { Props } from "./HeadlineNumbers.types"; import ValueBox from "components/ValueBox"; @@ -14,22 +14,10 @@ import type { ComponentType } from "react"; const HeadlineNumbers: ComponentType = ({ params, headlineNumbers=[] }) => { - const - areaType = getParamValueFor( - params, - "areaType", - "overview" - ).toLowerCase(), - areaName = getParamValueFor( - params, - "areaName", - "United Kingdom" - ).toLowerCase(); - const getValueBox = (item, index) => { return <> { - (item?.areaName == null || (item?.areaName.toLowerCase() === areaName && item?.areaType.toLowerCase() === areaType)) + isAreaIncluded({params, ...item}) ?