🎉 (grapher) add significance rounding

adminSiteClient/DimensionCard.tsx

@@ -2,8 +2,16 @@ import React from "react"
 import { observable, computed, action } from "mobx"
 import { observer } from "mobx-react"
 import { ChartDimension } from "@ourworldindata/grapher"
+import { OwidVariableRoundingMode } from "@ourworldindata/types"
+import { startCase } from "@ourworldindata/utils"
 import { ChartEditor, DimensionErrorMessage } from "./ChartEditor.js"
-import { Toggle, BindAutoString, BindAutoFloat, ColorBox } from "./Forms.js"
+import {
+    Toggle,
+    BindAutoString,
+    BindAutoFloat,
+    ColorBox,
+    SelectField,
+} from "./Forms.js"
 import { Link } from "./Link.js"
 import {
     faChevronDown,
@@ -49,6 +57,13 @@ export class DimensionCard extends React.Component<{
         return this.props.dimension.column.def.color
     }
 
+    @computed get roundingMode(): OwidVariableRoundingMode {
+        return (
+            this.props.dimension.display.roundingMode ??
+            OwidVariableRoundingMode.decimalPlaces
+        )
+    }
+
     private get tableDisplaySettings() {
         const { tableDisplay = {} } = this.props.dimension.display
         return (
@@ -166,13 +181,49 @@ export class DimensionCard extends React.Component<{
                             auto={column.shortUnit ?? ""}
                             onBlur={this.onChange}
                         />
+                        <SelectField
+                            label="Rounding mode"
+                            value={dimension.display.roundingMode}
+                            onValue={(value) => {
+                                const roundingMode =
+                                    value as OwidVariableRoundingMode
+                                this.props.dimension.display.roundingMode =
+                                    roundingMode !==
+                                    OwidVariableRoundingMode.decimalPlaces
+                                        ? roundingMode
+                                        : undefined
+
+                                this.onChange()
+                            }}
+                            options={Object.keys(OwidVariableRoundingMode).map(
+                                (key) => ({
+                                    value: key,
+                                    label: startCase(key),
+                                })
+                            )}
+                        />
+                        {this.roundingMode ===
+                            OwidVariableRoundingMode.significantFigures && (
+                            <BindAutoFloat
+                                label="Number of significant figures"
+                                field="numSignificantFigures"
+                                store={dimension.display}
+                                auto={column.numSignificantFigures}
+                                onBlur={this.onChange}
+                            />
+                        )}
                         <BindAutoFloat
                             label="Number of decimal places"
                             field="numDecimalPlaces"
                             store={dimension.display}
                             auto={column.numDecimalPlaces}
-                            helpText={`A negative number here will round integers`}
                             onBlur={this.onChange}
+                            helpText={
+                                this.roundingMode ===
+                                OwidVariableRoundingMode.significantFigures
+                                    ? "Used in Grapher's table where values are always rounded to a fixed number of decimal places"
+                                    : undefined
+                            }
                         />
                         <BindAutoFloat
                             label="Unit conversion factor"

adminSiteClient/VariableEditPage.tsx

@@ -19,6 +19,7 @@ import {
     FieldsRow,
     BindDropdown,
     Toggle,
+    SelectField,
 } from "./Forms.js"
 import {
     OwidVariableWithDataAndSource,
@@ -31,14 +32,19 @@ import {
     OwidOrigin,
     OwidSource,
     stringifyUnknownError,
+    startCase,
 } from "@ourworldindata/utils"
 import { GrapherFigureView } from "../site/GrapherFigureView.js"
 import { ChartList, ChartListItem } from "./ChartList.js"
 import { OriginList } from "./OriginList.js"
 import { SourceList } from "./SourceList.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { Base64 } from "js-base64"
-import { GrapherTabOption, GrapherInterface } from "@ourworldindata/types"
+import {
+    GrapherTabOption,
+    GrapherInterface,
+    OwidVariableRoundingMode,
+} from "@ourworldindata/types"
 import { Grapher } from "@ourworldindata/grapher"
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
@@ -250,19 +256,42 @@ class VariableEditor extends React.Component<{ variable: VariablePageData }> {
                                         store={newVariable.display}
                                         placeholder={newVariable.shortUnit}
                                     />
+                                    <BindFloat
+                                        label="Unit conversion factor"
+                                        field="conversionFactor"
+                                        store={newVariable.display}
+                                        helpText={`Multiply all values by this amount`}
+                                    />
                                 </FieldsRow>
                                 <FieldsRow>
+                                    <SelectField
+                                        label="Rounding mode"
+                                        value={variable.display?.roundingMode}
+                                        onValue={(value) => {
+                                            const roundingMode =
+                                                value as OwidVariableRoundingMode
+                                            newVariable.display.roundingMode =
+                                                roundingMode !==
+                                                OwidVariableRoundingMode.decimalPlaces
+                                                    ? roundingMode
+                                                    : undefined
+                                        }}
+                                        options={Object.keys(
+                                            OwidVariableRoundingMode
+                                        ).map((key) => ({
+                                            value: key,
+                                            label: startCase(key),
+                                        }))}
+                                    />
                                     <BindFloat
                                         label="Number of decimal places"
                                         field="numDecimalPlaces"
                                         store={newVariable.display}
-                                        helpText={`A negative number here will round integers`}
                                     />
                                     <BindFloat
-                                        label="Unit conversion factor"
-                                        field="conversionFactor"
+                                        label="Number of significant figures"
+                                        field="numSignificantFigures"
                                         store={newVariable.display}
-                                        helpText={`Multiply all values by this amount`}
                                     />
                                 </FieldsRow>
                                 <FieldsRow>

devTools/schemaProcessor/columns.json

@@ -578,11 +578,22 @@
         "pointer": "/dimensions/0/display/unit",
         "editor": "textfield"
     },
+    {
+        "type": "string",
+        "pointer": "/dimensions/0/display/roundingMode",
+        "editor": "dropdown",
+        "enumOptions": ["decimalPlaces", "significantFigures"]
+    },
     {
         "type": "integer",
         "pointer": "/dimensions/0/display/numDecimalPlaces",
         "editor": "numeric"
     },
+    {
+        "type": "integer",
+        "pointer": "/dimensions/0/display/numSignificantFigures",
+        "editor": "numeric"
+    },
     {
         "type": "string",
         "pointer": "/dimensions/0/display/zeroDay",

packages/@ourworldindata/core-table/src/CoreTableColumns.ts

@@ -35,6 +35,7 @@ import {
     EntityName,
     OwidVariableRow,
     ErrorValue,
+    OwidVariableRoundingMode,
 } from "@ourworldindata/types"
 import { ErrorValueTypes, isNotErrorValue } from "./ErrorValues.js"
 import {
@@ -223,10 +224,28 @@ export abstract class AbstractCoreColumn<JS_TYPE extends PrimitiveType> {
         return this.originalTimeColumn.formatValue(time)
     }
 
+    @imemo get roundingMode(): OwidVariableRoundingMode {
+        return (
+            this.display?.roundingMode ?? OwidVariableRoundingMode.decimalPlaces
+        )
+    }
+
+    @imemo get roundsToFixedDecimals(): boolean {
+        return this.roundingMode === OwidVariableRoundingMode.decimalPlaces
+    }
+
+    @imemo get roundsToSignificantFigures(): boolean {
+        return this.roundingMode === OwidVariableRoundingMode.significantFigures
+    }
+
     @imemo get numDecimalPlaces(): number {
         return this.display?.numDecimalPlaces ?? 2
     }
 
+    @imemo get numSignificantFigures(): number {
+        return this.display?.numSignificantFigures ?? 3
+    }
+
     @imemo get unit(): string | undefined {
         return this.display?.unit ?? this.def.unit
     }
@@ -612,7 +631,9 @@ abstract class AbstractColumnWithNumberFormatting<
     formatValue(value: unknown, options?: TickFormattingOptions): string {
         if (isNumber(value)) {
             return formatValue(value, {
+                roundingMode: this.roundingMode,
                 numDecimalPlaces: this.numDecimalPlaces,
+                numSignificantFigures: this.numSignificantFigures,
                 ...options,
             })
         }
@@ -731,6 +752,7 @@ class IntegerColumn extends NumericColumn {
 class CurrencyColumn extends NumericColumn {
     formatValue(value: unknown, options?: TickFormattingOptions): string {
         return super.formatValue(value, {
+            roundingMode: OwidVariableRoundingMode.decimalPlaces,
             numDecimalPlaces: 0,
             unit: this.shortUnit,
             ...options,

packages/@ourworldindata/grapher/src/axis/Axis.ts

@@ -20,6 +20,7 @@ import {
     Tickmark,
     ValueRange,
     cloneDeep,
+    OwidVariableRoundingMode,
 } from "@ourworldindata/utils"
 import { AxisConfig, AxisManager } from "./AxisConfig"
 import { MarkdownTextWrap } from "@ourworldindata/components"
@@ -323,6 +324,7 @@ abstract class AbstractAxis {
     private getTickFormattingOptions(): TickFormattingOptions {
         const options: TickFormattingOptions = {
             ...this.config.tickFormattingOptions,
+            roundingMode: OwidVariableRoundingMode.decimalPlaces,
         }
 
         // The chart's tick formatting function is used by default to format axis ticks. This means

packages/@ourworldindata/grapher/src/color/ColorScale.ts

@@ -20,6 +20,7 @@ import {
     BinningStrategy,
     Color,
     CoreValueType,
+    OwidVariableRoundingMode,
 } from "@ourworldindata/types"
 import { CoreColumn } from "@ourworldindata/core-table"
 
@@ -271,10 +272,15 @@ export class ColorScale {
             const color = customNumericColors[index] ?? baseColor
             const label = customNumericLabels[index]
 
+            const roundingOptions = {
+                roundingMode: OwidVariableRoundingMode.decimalPlaces,
+            }
             const displayMin =
-                this.colorScaleColumn?.formatValueShort(min) ?? min.toString()
+                this.colorScaleColumn?.formatValueShort(min, roundingOptions) ??
+                min.toString()
             const displayMax =
-                this.colorScaleColumn?.formatValueShort(max) ?? max.toString()
+                this.colorScaleColumn?.formatValueShort(max, roundingOptions) ??
+                max.toString()
 
             const currentMin = min
             const isFirst = index === 0

packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx

@@ -13,6 +13,7 @@ import {
     Time,
     EntityName,
     OwidTableSlugs,
+    OwidVariableRoundingMode,
 } from "@ourworldindata/types"
 import {
     BlankOwidTable,
@@ -724,6 +725,7 @@ export class DataTable extends React.Component<{
         return value === undefined
             ? value
             : column.formatValueShort(value, {
+                  roundingMode: OwidVariableRoundingMode.decimalPlaces,
                   numberAbbreviation: false,
                   trailingZeroes: true,
                   useNoBreakSpace: true,

packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx

@@ -900,7 +900,8 @@ export class EntitySelector extends React.Component<{
         if (!isFiniteWithGuard(value)) return { formattedValue: "No data" }
 
         return {
-            formattedValue: displayColumn.formatValueShort(value),
+            formattedValue:
+                displayColumn.formatValueShortWithAbbreviations(value),
             width: clamp(barScale(value), 0, 1),
         }
     }

packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx

@@ -39,7 +39,13 @@ import {
     LineLegendManager,
 } from "../lineLegend/LineLegend"
 import { ComparisonLine } from "../scatterCharts/ComparisonLine"
-import { Tooltip, TooltipState, TooltipTable } from "../tooltip/Tooltip"
+import { TooltipFooterIcon } from "../tooltip/TooltipProps.js"
+import {
+    Tooltip,
+    TooltipState,
+    TooltipTable,
+    makeTooltipRoundingNotice,
+} from "../tooltip/Tooltip"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import { extent } from "d3-array"
 import {
@@ -564,9 +570,21 @@ export class LineChart
                 ? `% change since ${formatColumn.formatTime(startTime)}`
                 : unitLabel
         const subtitleFormat = subtitle === unitLabel ? "unit" : undefined
-        const footer = sortedData.some((series) => series.isProjection)
-            ? `Projected data`
+
+        const projectionNotice = sortedData.some(
+            (series) => series.isProjection
+        )
+            ? { icon: TooltipFooterIcon.stripes, text: "Projected data" }
+            : undefined
+        const roundingNotice = formatColumn.roundsToSignificantFigures
+            ? {
+                  icon: TooltipFooterIcon.none,
+                  text: makeTooltipRoundingNotice([
+                      formatColumn.numSignificantFigures,
+                  ]),
+              }
             : undefined
+        const footer = excludeUndefined([projectionNotice, roundingNotice])
 
         return (
             <Tooltip
@@ -582,7 +600,6 @@ export class LineChart
                 subtitle={subtitle}
                 subtitleFormat={subtitleFormat}
                 footer={footer}
-                footerFormat="stripes"
                 dissolve={fading}
             >
                 <TooltipTable

packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx

@@ -1,7 +1,5 @@
 import React from "react"
 import {
-    anyToString,
-    isNumber,
     Bounds,
     DEFAULT_BOUNDS,
     flatten,
@@ -325,19 +323,18 @@ export class MapChart
         this.mapConfig.projection = value
     }
 
-    @computed private get formatTooltipValue(): (d: PrimitiveType) => string {
-        const { mapConfig, mapColumn, colorScale } = this
+    @computed private get formatTooltipValueIfCustom(): (
+        d: PrimitiveType
+    ) => string | undefined {
+        const { mapConfig, colorScale } = this
 
-        return (d: PrimitiveType): string => {
-            if (mapConfig.tooltipUseCustomLabels) {
-                // Find the bin (and its label) that this value belongs to
-                const bin = colorScale.getBinForValue(d)
-                const label = bin?.label
-                if (label !== undefined && label !== "") return label
-            }
-            return isNumber(d)
-                ? mapColumn?.formatValueShort(d) ?? ""
-                : anyToString(d)
+        return (d: PrimitiveType): string | undefined => {
+            if (!mapConfig.tooltipUseCustomLabels) return undefined
+            // Find the bin (and its label) that this value belongs to
+            const bin = colorScale.getBinForValue(d)
+            const label = bin?.label
+            if (label !== undefined && label !== "") return label
+            else return undefined
         }
     }
 
@@ -620,7 +617,7 @@ export class MapChart
                     <MapTooltip
                         tooltipState={tooltipState}
                         timeSeriesTable={this.inputTable}
-                        formatValue={this.formatTooltipValue}
+                        formatValueIfCustom={this.formatTooltipValueIfCustom}
                         manager={this.manager}
                         colorScaleManager={this}
                         targetTime={this.targetTime}