Merge pull request #4890 from wri/feat/FLAG-1100

FLAG-1100: update data version and update CustomTick component to not render hyphen
wri · Nov 26, 2024 · 978623c · 978623c
2 parents 286ae60 + 489c1d9
commit 978623c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/components/charts/horizontal-bar-chart/custom-tick-component.jsx b/components/charts/horizontal-bar-chart/custom-tick-component.jsx
@@ -22,19 +22,13 @@ const CustomTick = ({ x, y, index, yAxisDotFill, data, settings }) => {
       <text x="8" y="-16" textAnchor="start" fontSize="12px" fill="#555555">
         {extLink ? (
           <a href={path.href} target="_blank" rel="noopener noreferrer">
-            {region}
-            {' '}
-            -
-            {formatNumber({ num: total, unit: '%' })}
+            {region}: {formatNumber({ num: total, unit: '%' })}
             {index === 0 ? ' are plantations' : ''}
           </a>
         ) : (
           <Link {...path}>
             <a>
-              {region}
-              {' '}
-              -
-              {formatNumber({ num: total, unit: '%' })}
+              {region}: {formatNumber({ num: total, unit: '%' })}
               {index === 0 ? ' are plantations' : ''}
             </a>
           </Link>

diff --git a/components/widgets/land-cover/ranked-plantations/index.js b/components/widgets/land-cover/ranked-plantations/index.js
@@ -55,11 +55,15 @@ export default {
   },
   getData: (params) =>
     all([
-      getExtentGrouped(params),
+      getExtentGrouped({
+        ...params,
+        version: 'v20240815',
+      }),
       getAreaIntersectionGrouped({
         ...params,
         forestType: 'plantations',
         summary: true,
+        version: 'v20240815',
       }),
     ]).then(
       spread((extentGrouped, plantationsExtentResponse) => {
@@ -78,12 +82,17 @@ export default {
       })
     ),
   getDataURL: (params) => [
-    getExtentGrouped({ ...params, download: true }),
+    getExtentGrouped({
+      ...params,
+      download: true,
+      version: 'v20240815',
+    }),
     getAreaIntersectionGrouped({
       ...params,
       forestType: 'plantations',
       download: true,
       summary: true,
+      version: 'v20240815',
     }),
   ],
   getWidgetProps,

diff --git a/components/widgets/land-cover/ranked-plantations/selectors.js b/components/widgets/land-cover/ranked-plantations/selectors.js
@@ -52,11 +52,14 @@ export const parseData = createSelector(
       const totalArea = regionExtent && regionExtent.total_area;
       plantationKeys.forEach((key) => {
         const labelFromKey =
-          regionGroup && regionGroup.find((p) => p.plantations === key);
+          regionGroup &&
+          regionGroup.find(
+            (p) => p.plantations.toLowerCase() === key.toLowerCase()
+          );
         const pExtent = labelFromKey && labelFromKey.intersection_area;
         const pPercentage = (pExtent / totalRegionPlantations) * 100;
-        yKeys[key] = pPercentage || 0;
-        yKeys[`${key} label`] = key;
+        yKeys[key.toLowerCase()] = pPercentage || 0;
+        yKeys[`${key.toLowerCase()} label`] = key.toLowerCase();
       });
 
       return {
@@ -83,12 +86,12 @@ export const parseConfig = createSelector(
       colors: colorsByType,
       unit: '%',
       xKey: 'region',
-      yKeys: dataKeys,
+      yKeys: dataKeys.map((item) => item.toLowerCase()),
       yAxisDotFill: '#d4d4d4',
       tooltip: dataKeys.map((item) => ({
-        key: item,
+        key: item.toLowerCase(),
         label: item,
-        color: colorsByType[item],
+        color: colorsByType[item.toLowerCase()],
         unitFormat: (value) => formatNumber({ num: value, unit: '%' }),
       })),
     };