feat(web): Chart number box - Add configuration so we can determine w…

…ithin the CMS if the value should be rounded or not (#15078) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Jun 4, 2024 · ee1be2d · ee1be2d
1 parent 4b117e0
commit ee1be2d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/apps/web/components/Charts/v2/renderers/ChartNumberBox/ChartNumberBox.tsx b/apps/web/components/Charts/v2/renderers/ChartNumberBox/ChartNumberBox.tsx
@@ -86,6 +86,8 @@ export const ChartNumberBox = ({ slice }: ChartNumberBoxRendererProps) => {
     return <p>{messages[activeLocale].noDataForChart}</p>
   }
 
+  const reduceAndRoundValue = slice.reduceAndRoundValue ?? true
+
   return (
     <div
       role="group"
@@ -97,7 +99,7 @@ export const ChartNumberBox = ({ slice }: ChartNumberBoxRendererProps) => {
       })}
     >
       {boxData.map((data, index) => {
-        // We assume that the data that key that is provided is a valid number
+        // We assume that the data behind the key that is provided is a valid number
         const comparisonValue = queryResult.data?.[data.sourceDataIndex]?.[
           data.sourceDataKey
         ] as number
@@ -109,14 +111,22 @@ export const ChartNumberBox = ({ slice }: ChartNumberBoxRendererProps) => {
 
         const ariaValue =
           data.valueType === 'number'
-            ? formatValueForPresentation(activeLocale, mostRecentValue)
+            ? formatValueForPresentation(
+                activeLocale,
+                mostRecentValue,
+                reduceAndRoundValue,
+              )
             : formatNumberBoxPercentageForPresentation(
                 index === 0 ? mostRecentValue : change - 1,
               )
 
         const displayedValue =
           data.valueType === 'number'
-            ? formatValueForPresentation(activeLocale, mostRecentValue)
+            ? formatValueForPresentation(
+                activeLocale,
+                mostRecentValue,
+                reduceAndRoundValue,
+              )
             : formatNumberBoxPercentageForPresentation(
                 index === 0 ? mostRecentValue : Math.abs(change - 1),
               )

diff --git a/apps/web/screens/queries/fragments.ts b/apps/web/screens/queries/fragments.ts
@@ -846,6 +846,7 @@ export const slices = gql`
     displayChangeMonthOverMonth
     displayChangeYearOverYear
     numberBoxDate
+    reduceAndRoundValue
   }
 
   fragment GenericListFields on GenericList {

diff --git a/libs/cms/src/lib/generated/contentfulTypes.d.ts b/libs/cms/src/lib/generated/contentfulTypes.d.ts
@@ -661,6 +661,9 @@ export interface IChartNumberBoxFields {
 
   /** Date */
   numberBoxDate?: string | undefined
+
+  /** Reduce and round value */
+  reduceAndRoundValue?: boolean | undefined
 }
 
 /** A standalone component to display a value for a data key and optionally how it has evolved over a period of time. */

diff --git a/libs/cms/src/lib/models/chartNumberBox.model.ts b/libs/cms/src/lib/models/chartNumberBox.model.ts
@@ -30,6 +30,9 @@ export class ChartNumberBox {
 
   @Field({ nullable: true })
   numberBoxDate?: string
+
+  @Field({ nullable: true })
+  reduceAndRoundValue?: boolean
 }
 
 export const mapChartNumberBox = ({
@@ -48,5 +51,6 @@ export const mapChartNumberBox = ({
       'displayChangeYearOverYear',
     ]),
     numberBoxDate: fields.numberBoxDate ?? undefined,
+    reduceAndRoundValue: fields.reduceAndRoundValue ?? true,
   }
 }