🐛 (data table) small improvements (#3888)

* 🐛 (data table) remove unnecessary separator in column header * ✨ (data table) hide change columns for non-numerical data
owid · Aug 21, 2024 · cb88001 · cb88001
1 parent a2b5b74
commit cb88001
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts
@@ -247,7 +247,8 @@ export abstract class AbstractCoreColumn<JS_TYPE extends PrimitiveType> {
     }
 
     @imemo get unit(): string | undefined {
-        return this.display?.unit ?? this.def.unit
+        const unit = this.display?.unit ?? this.def.unit
+        return unit?.trim()
     }
 
     @imemo get shortUnit(): string | undefined {

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx
@@ -789,15 +789,18 @@ export class DataTable extends React.Component<{
         targetTimes: number[]
         targetTimeMode: TargetTimeMode
     }): DimensionColumn[] {
-        // Inject delta columns if we have start & end values to compare in the table.
-        // One column for absolute difference, another for % difference.
+        // Inject delta columns if the data is numerical and 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 = {} } = sourceColumn.display ?? {}
-            if (!tableDisplay.hideAbsoluteChange)
-                deltaColumns.push({ key: RangeValueKey.delta })
-            if (!tableDisplay.hideRelativeChange)
-                deltaColumns.push({ key: RangeValueKey.deltaRatio })
+        if (sourceColumn.hasNumberFormatting) {
+            if (targetTimeMode === TargetTimeMode.range) {
+                const { tableDisplay = {} } = sourceColumn.display ?? {}
+                if (!tableDisplay.hideAbsoluteChange)
+                    deltaColumns.push({ key: RangeValueKey.delta })
+                if (!tableDisplay.hideRelativeChange)
+                    deltaColumns.push({ key: RangeValueKey.deltaRatio })
+            }
         }
 
         const valueColumns = targetTimes.map((targetTime, index) => ({