🔨 (tooltip) get rid of mobx warning

owid · Nov 14, 2024 · 452dd61 · 452dd61
1 parent 1a76b25
commit 452dd61
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 37 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -724,10 +724,10 @@ export class LineChart
                                 )
                               : series.color
 
-                        const values = [
+                        const values = excludeUndefined([
                             point?.y,
                             point?.colorValue as undefined | number,
-                        ]
+                        ])
 
                         return {
                             name,

diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx
@@ -12,7 +12,6 @@ import {
     sortBy,
     formatInlineList,
     GrapherTooltipAnchor,
-    ensureEqualLength,
 } from "@ourworldindata/utils"
 import {
     TooltipTableProps,
@@ -270,29 +269,24 @@ export class TooltipTable extends React.Component<TooltipTableProps> {
                                         </span>
                                     )}
                                 </td>
-                                {/* ensure arrays of equal length are zipped to
-                                    avoid a mobx warning about accessing elements
-                                    that are out of bounds */}
-                                {zip(...ensureEqualLength(columns, values)).map(
-                                    ([column, value]) => {
-                                        const missing = value === undefined
-                                        return column ? (
-                                            <td
-                                                key={column.slug}
-                                                className={classnames(
-                                                    "series-value",
-                                                    { missing }
+                                {zip(columns, values).map(([column, value]) => {
+                                    const missing = value === undefined
+                                    return column ? (
+                                        <td
+                                            key={column.slug}
+                                            className={classnames(
+                                                "series-value",
+                                                { missing }
+                                            )}
+                                        >
+                                            {!missing &&
+                                                column.formatValueShort(
+                                                    value,
+                                                    format
                                                 )}
-                                            >
-                                                {!missing &&
-                                                    column.formatValueShort(
-                                                        value,
-                                                        format
-                                                    )}
-                                            </td>
-                                        ) : null
-                                    }
-                                )}
+                                        </td>
+                                    ) : null
+                                })}
                                 {notice && (
                                     <td className="time-notice">
                                         <FontAwesomeIcon icon={faInfoCircle} />{" "}

diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
@@ -2000,14 +2000,3 @@ export function getPaginationPageNumbers(
 
     return pageNumbers
 }
-
-export function ensureEqualLength<T, U>(
-    arr1: T[],
-    arr2: U[]
-): [(T | undefined)[], (U | undefined)[]] {
-    const length = Math.max(arr1.length, arr2.length)
-    return [
-        [...arr1, ...new Array(length - arr1.length).fill(undefined)],
-        [...arr2, ...new Array(length - arr2.length).fill(undefined)],
-    ]
-}
diff --git a/packages/@ourworldindata/utils/src/index.ts b/packages/@ourworldindata/utils/src/index.ts
@@ -124,7 +124,6 @@ export {
     formatInlineList,
     lazy,
     getParentVariableIdFromChartConfig,
-    ensureEqualLength,
 } from "./Util.js"
 
 export {