🎉 (admin) allow to hide change columns

owid · Jan 15, 2024 · 86d1183 · 86d1183
1 parent c2bbf4e
commit 86d1183
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 24 deletions.
diff --git a/adminSiteClient/DimensionCard.tsx b/adminSiteClient/DimensionCard.tsx
@@ -49,8 +49,7 @@ export class DimensionCard extends React.Component<{
     }
 
     private get tableDisplaySettings() {
-        const { tableDisplay } = this.props.dimension.display
-        if (!tableDisplay) return
+        const { tableDisplay = {} } = this.props.dimension.display
         return (
             <React.Fragment>
                 <hr className="ui divider" />
@@ -59,6 +58,9 @@ export class DimensionCard extends React.Component<{
                     label="Hide absolute change column"
                     value={!!tableDisplay.hideAbsoluteChange}
                     onValue={(value) => {
+                        if (!this.props.dimension.display.tableDisplay) {
+                            this.props.dimension.display.tableDisplay = {}
+                        }
                         tableDisplay.hideAbsoluteChange = value
                         this.onChange()
                     }}
@@ -67,6 +69,9 @@ export class DimensionCard extends React.Component<{
                     label="Hide relative change column"
                     value={!!tableDisplay.hideRelativeChange}
                     onValue={(value) => {
+                        if (!this.props.dimension.display.tableDisplay) {
+                            this.props.dimension.display.tableDisplay = {}
+                        }
                         tableDisplay.hideRelativeChange = value
                         this.onChange()
                     }}

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
@@ -727,21 +727,22 @@ export class DataTable extends React.Component<{
                     ? TargetTimeMode.point
                     : TargetTimeMode.range
 
-            const prelimValuesByEntity = this.preliminaryDimensionValues(
+            const prelimValuesByEntity = this.preliminaryDimensionValues({
                 sourceColumn,
-                targetTimes
-            )
+                targetTimes,
+            })
 
-            const valueByEntity = this.dataValuesFromPreliminaryValues(
+            const valueByEntity = this.dataValuesFromPreliminaryValues({
                 prelimValuesByEntity,
+                sourceColumn,
                 targetTimeMode,
-                sourceColumn
-            )
+            })
 
-            const columns: DimensionColumn[] = this.dimensionColumns(
+            const columns: DimensionColumn[] = this.dimensionColumns({
+                sourceColumn,
                 targetTimes,
-                targetTimeMode
-            )
+                targetTimeMode,
+            })
 
             return {
                 columns,
@@ -751,18 +752,23 @@ export class DataTable extends React.Component<{
         })
     }
 
-    private dimensionColumns(
-        targetTimes: number[],
+    private dimensionColumns({
+        sourceColumn,
+        targetTimes,
+        targetTimeMode,
+    }: {
+        sourceColumn: CoreColumn
+        targetTimes: number[]
         targetTimeMode: TargetTimeMode
-    ): DimensionColumn[] {
+    }): DimensionColumn[] {
         // Inject delta columns if we have start & end values to compare in the table.
         // One column for absolute difference, another for % difference.
         const deltaColumns: DimensionColumn[] = []
         if (targetTimeMode === TargetTimeMode.range) {
-            const tableDisplay = {} as any
-            if (!tableDisplay?.hideAbsoluteChange)
+            const { tableDisplay = {} } = sourceColumn.display ?? {}
+            if (!tableDisplay.hideAbsoluteChange)
                 deltaColumns.push({ key: RangeValueKey.delta })
-            if (!tableDisplay?.hideRelativeChange)
+            if (!tableDisplay.hideRelativeChange)
                 deltaColumns.push({ key: RangeValueKey.deltaRatio })
         }
 
@@ -779,22 +785,29 @@ export class DataTable extends React.Component<{
         return [...valueColumns, ...deltaColumns]
     }
 
-    private preliminaryDimensionValues(
-        sourceColumn: CoreColumn,
+    private preliminaryDimensionValues({
+        sourceColumn,
+        targetTimes,
+    }: {
+        sourceColumn: CoreColumn
         targetTimes: number[]
-    ): Map<string, (DataValue | undefined)[]> {
+    }): Map<string, (DataValue | undefined)[]> {
         return valuesByEntityAtTimes(
             sourceColumn.valueByEntityNameAndOriginalTime,
             targetTimes,
             sourceColumn.tolerance
         )
     }
 
-    private dataValuesFromPreliminaryValues(
-        prelimValuesByEntity: Map<string, (DataValue | undefined)[]>,
-        targetTimeMode: TargetTimeMode,
+    private dataValuesFromPreliminaryValues({
+        prelimValuesByEntity,
+        targetTimeMode,
+        sourceColumn,
+    }: {
+        prelimValuesByEntity: Map<string, (DataValue | undefined)[]>
+        targetTimeMode: TargetTimeMode
         sourceColumn: CoreColumn
-    ): Map<string, DimensionValue> {
+    }): Map<string, DimensionValue> {
         return es6mapValues(prelimValuesByEntity, (dvs) => {
             // There is always a column, but not always a data value (in the delta column the
             // value needs to be calculated)