🔨 (grapher) remove WorldMap from ChartTypeNames

adminSiteClient/ColorSchemeDropdown.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { computed, action } from "mobx"
 import Select from "react-select"
-import { ChartTypeName } from "@ourworldindata/types"
+import { GrapherChartOrMapType } from "@ourworldindata/types"
 import {
     ColorScheme,
     getColorSchemeForChartType,
@@ -21,7 +21,7 @@ interface ColorSchemeDropdownProps {
     value?: string
     gradientColorCount: number
     invertedColorScheme: boolean
-    chartType: ChartTypeName
+    chartType: GrapherChartOrMapType
     onChange: (selected: ColorSchemeOption) => void
     onBlur?: () => void
 }

adminSiteClient/EditorBasicTab.tsx

@@ -400,9 +400,7 @@ export class EditorBasicTab<
     render() {
         const { editor } = this.props
         const { grapher } = editor
-        const allChartTypes = Object.keys(ChartTypeName).filter(
-            (chartType) => chartType !== ChartTypeName.WorldMap
-        )
+        const allChartTypes = Object.keys(ChartTypeName)
 
         const isIndicatorChart = isIndicatorChartEditorInstance(editor)
 

adminSiteClient/EditorColorScaleSection.tsx

@@ -7,7 +7,7 @@ import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons"
 import {
     ColorSchemeName,
     BinningStrategy,
-    ChartTypeName,
+    GrapherChartOrMapType,
     Color,
 } from "@ourworldindata/types"
 import {
@@ -43,7 +43,7 @@ interface EditorColorScaleSectionFeatures {
 @observer
 export class EditorColorScaleSection extends React.Component<{
     scale: ColorScale
-    chartType: ChartTypeName
+    chartType: GrapherChartOrMapType
     features: EditorColorScaleSectionFeatures
     showLineChartColors: boolean
     onChange?: () => void
@@ -132,7 +132,7 @@ class ColorLegendSection extends React.Component<{
 @observer
 class ColorsSection extends React.Component<{
     scale: ColorScale
-    chartType: ChartTypeName
+    chartType: GrapherChartOrMapType
     showLineChartColors: boolean
     onChange?: () => void
 }> {

adminSiteClient/EditorMapTab.tsx

@@ -1,7 +1,7 @@
 import {
-    ChartTypeName,
     GrapherInterface,
     MapProjectionName,
+    GRAPHER_MAP_TYPE,
 } from "@ourworldindata/types"
 import {
     ChartDimension,
@@ -202,7 +202,7 @@ export class EditorMapTab<
                         <TimelineSection mapConfig={mapConfig} />
                         <EditorColorScaleSection
                             scale={colorScale}
-                            chartType={ChartTypeName.WorldMap}
+                            chartType={GRAPHER_MAP_TYPE}
                             showLineChartColors={false}
                             features={{
                                 visualScaling: true,

adminSiteClient/GrapherConfigGridEditor.tsx

@@ -44,7 +44,7 @@ import { BaseEditorComponent, HotColumn, HotTable } from "@handsontable/react"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 import Handsontable from "handsontable"
-import { ChartTypeName } from "@ourworldindata/types"
+import { ChartTypeName, GRAPHER_MAP_TYPE } from "@ourworldindata/types"
 import {
     Grapher,
     GrapherProgrammaticInterface,
@@ -488,7 +488,7 @@ export class GrapherConfigGridEditor extends React.Component<GrapherConfigGridEd
                     return colorScale ? (
                         <EditorColorScaleSection
                             scale={colorScale}
-                            chartType={ChartTypeName.WorldMap}
+                            chartType={GRAPHER_MAP_TYPE}
                             features={{
                                 visualScaling: true,
                                 legendDescription: false,

adminSiteServer/testPageRouter.tsx

@@ -31,6 +31,7 @@ import {
     GrapherTabOption,
     StackMode,
     parseChartConfig,
+    GRAPHER_MAP_TYPE,
 } from "@ourworldindata/types"
 import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.js"
 import { GIT_CMS_DIR } from "../gitCms/GitCmsConstants.js"
@@ -148,7 +149,7 @@ async function propsFromQueryParams(
     let tab = params.tab
 
     if (params.type) {
-        if (params.type === ChartTypeName.WorldMap) {
+        if (params.type === GRAPHER_MAP_TYPE) {
             query = query.andWhereRaw(`cc.full->>"$.hasMapTab" = "true"`)
             tab = tab || GrapherTabOption.map
         } else {

devTools/svgTester/chart-configurations.ts

@@ -88,7 +88,6 @@ const VIEW_MATRIX_BY_CHART_TYPE: Record<ChartTypeName, ViewMatrix> = {
         facet: facetOptions,
         uniformYAxis: booleanOptions,
     },
-    [ChartTypeName.WorldMap]: {},
 }
 
 // the above view matrix is used to generate all possible combinations of query params
@@ -129,7 +128,6 @@ const EXCLUDE_VIEWS_BY_CHART_TYPE: Record<
         // sharing an axis only makes sense if a chart is faceted
         { facet: FacetStrategy.none, uniformYAxis: Boolean.true },
     ],
-    [ChartTypeName.WorldMap]: [],
 }
 
 export const queryStringsByChartType = Object.fromEntries(

devTools/svgTester/dump-chart-ids.ts

@@ -5,7 +5,7 @@ import parseArgs from "minimist"
 
 import { TransactionCloseMode, knexReadonlyTransaction } from "../../db/db.js"
 import { getMostViewedGrapherIdsByChartType } from "../../db/model/Chart.js"
-import { CHART_TYPES } from "./utils.js"
+import { allChartTypes } from "./utils.js"
 
 const DEFAULT_OUT_FILE = "../owid-grapher-svgs/most-viewed-charts.txt"
 const CHART_COUNT_PER_TYPE = 25
@@ -15,7 +15,7 @@ async function main(parsedArgs: parseArgs.ParsedArgs) {
         const outFile = parsedArgs["o"] ?? DEFAULT_OUT_FILE
 
         const chartIds = await knexReadonlyTransaction(async (trx) => {
-            const promises = CHART_TYPES.flatMap((chartType) =>
+            const promises = allChartTypes.flatMap((chartType) =>
                 getMostViewedGrapherIdsByChartType(
                     trx,
                     chartType,

devTools/svgTester/utils.ts

@@ -26,10 +26,7 @@ import { getHeapStatistics } from "v8"
 import { queryStringsByChartType } from "./chart-configurations.js"
 import * as d3 from "d3"
 
-// ignore WorldMaps
-export const CHART_TYPES = Object.values(ChartTypeName).filter(
-    (chartType) => chartType !== ChartTypeName.WorldMap
-)
+export const allChartTypes = Object.values(ChartTypeName)
 
 // the owid-grapher-svgs repo is usually cloned as a sibling to the owid-grapher repo
 export const DEFAULT_CONFIGS_DIR = "../owid-grapher-svgs/configs"
@@ -303,14 +300,14 @@ export async function findValidChartIds(
 export function validateChartTypes(chartTypes: string[]): ChartTypeName[] {
     const validChartTypes = chartTypes.filter(
         (chartType): chartType is ChartTypeName =>
-            CHART_TYPES.includes(chartType as any)
+            allChartTypes.includes(chartType as any)
     )
     const invalidChartTypes = chartTypes.filter(
-        (chartType) => !CHART_TYPES.includes(chartType as any)
+        (chartType) => !allChartTypes.includes(chartType as any)
     )
     if (invalidChartTypes.length) {
         console.warn(
-            `Invalid chart types given: ${invalidChartTypes}. Valid chart types are: ${CHART_TYPES}`
+            `Invalid chart types given: ${invalidChartTypes}. Valid chart types are: ${allChartTypes}`
         )
     }
     return _.uniq(validChartTypes)

packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx

@@ -35,10 +35,11 @@ import {
     EntityName,
     ChartTypeName,
     FacetStrategy,
-    GrapherTabOption,
     RelatedQuestionsConfig,
     Color,
     GrapherTabName,
+    GRAPHER_MAP_TYPE,
+    GrapherChartOrMapType,
 } from "@ourworldindata/types"
 import { DataTable, DataTableManager } from "../dataTable/DataTable"
 import {
@@ -200,10 +201,10 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         return !this.manager.isOnMapTab && hasStrategy
     }
 
-    @computed get activeChartType(): ChartTypeName | undefined {
+    @computed get activeChartOrMapType(): GrapherChartOrMapType | undefined {
         const { manager } = this
         if (manager.isOnTableTab) return undefined
-        if (manager.isOnMapTab) return ChartTypeName.WorldMap
+        if (manager.isOnMapTab) return GRAPHER_MAP_TYPE
         if (manager.isOnChartTab) {
             return manager.isLineChartThatTurnedIntoDiscreteBar
                 ? ChartTypeName.DiscreteBar
@@ -213,20 +214,21 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
     }
 
     renderChart(): React.ReactElement | void {
-        const { manager, activeChartType } = this
+        const { manager, activeChartOrMapType } = this
 
-        if (!activeChartType) return
+        if (!activeChartOrMapType) return
 
         const bounds = this.boundsForChartArea
         const ChartClass =
-            ChartComponentClassMap.get(activeChartType) ?? DefaultChartClass
+            ChartComponentClassMap.get(activeChartOrMapType) ??
+            DefaultChartClass
 
         // Todo: make FacetChart a chart type name?
-        if (this.isFaceted)
+        if (this.isFaceted && activeChartOrMapType !== GRAPHER_MAP_TYPE)
             return (
                 <FacetChart
                     bounds={bounds}
-                    chartTypeName={activeChartType}
+                    chartTypeName={activeChartOrMapType}
                     manager={manager}
                 />
             )
@@ -235,7 +237,7 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
             <ChartClass
                 bounds={bounds}
                 manager={manager}
-                containerElement={activeChartType}
+                containerElement={activeChartOrMapType}
             />
         )
     }

packages/@ourworldindata/grapher/src/chart/ChartTypeMap.tsx

@@ -4,7 +4,11 @@ import { LineChart } from "../lineCharts/LineChart"
 import { StackedAreaChart } from "../stackedCharts/StackedAreaChart"
 import { DiscreteBarChart } from "../barCharts/DiscreteBarChart"
 import { StackedBarChart } from "../stackedCharts/StackedBarChart"
-import { ChartTypeName } from "@ourworldindata/types"
+import {
+    ChartTypeName,
+    GrapherChartOrMapType,
+    GRAPHER_MAP_TYPE,
+} from "@ourworldindata/types"
 import { MapChart } from "../mapCharts/MapChart"
 import { ChartInterface } from "./ChartInterface"
 import { ChartManager } from "./ChartManager"
@@ -24,7 +28,7 @@ interface ChartComponentClass extends ComponentClass<ChartComponentProps> {
 }
 
 export const ChartComponentClassMap = new Map<
-    ChartTypeName,
+    GrapherChartOrMapType,
     ChartComponentClass
 >([
     [ChartTypeName.DiscreteBar, DiscreteBarChart],
@@ -35,7 +39,7 @@ export const ChartComponentClassMap = new Map<
     [ChartTypeName.StackedDiscreteBar, StackedDiscreteBarChart],
     [ChartTypeName.ScatterPlot, ScatterPlotChart],
     [ChartTypeName.Marimekko, MarimekkoChart],
-    [ChartTypeName.WorldMap, MapChart],
+    [GRAPHER_MAP_TYPE, MapChart],
 ])
 
 export const DefaultChartClass = LineChart as ChartComponentClass

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

@@ -6,10 +6,14 @@ import {
     ChartTypeName,
     ColorSchemeInterface,
     ColorSchemeName,
+    GRAPHER_MAP_TYPE,
+    GrapherChartOrMapType,
 } from "@ourworldindata/types"
 import { getColorBrewerScheme } from "./ColorBrewerSchemes.js"
 
-function getPreferredSchemesByType(type: ChartTypeName): ColorSchemeName[] {
+function getPreferredSchemesByType(
+    type: GrapherChartOrMapType
+): ColorSchemeName[] {
     // This function could also be a Map<ChartTypeName, ColorName[]> but
     // by doing it as a function usign ts-pattern.match we get compile
     // time safety that all enum cases in ChartTypeName are always handled here
@@ -84,7 +88,7 @@ function getPreferredSchemesByType(type: ChartTypeName): ColorSchemeName[] {
             ColorSchemeName.SingleColorGradientDustyCoral,
             ColorSchemeName.SingleColorGradientDarkCopper,
         ])
-        .with(ChartTypeName.WorldMap, () => [
+        .with(GRAPHER_MAP_TYPE, () => [
             ColorSchemeName.BinaryMapPaletteA,
             ColorSchemeName.BinaryMapPaletteB,
             ColorSchemeName.BinaryMapPaletteC,

packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx

@@ -107,7 +107,4 @@ export const chartIcons: Record<ChartTypeName, React.ReactElement> = {
             </g>
         </svg>
     ),
-
-    // world map (will never be invoked but included for completeness)
-    [ChartTypeName.WorldMap]: <FontAwesomeIcon icon={faEarthAmericas} />,
 }

packages/@ourworldindata/types/src/dbTypes/ChartConfigs.ts

@@ -11,7 +11,7 @@ export interface DbInsertChartConfig {
     full: JsonString
     fullMd5?: Base64String
     slug?: string | null
-    chartType?: ChartTypeName | null // TODO: exclude WorldMap
+    chartType?: ChartTypeName | null
     createdAt?: Date
     updatedAt?: Date | null
 }

packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts

@@ -119,6 +119,10 @@ export enum ToleranceStrategy {
     backwards = "backwards",
     forwards = "forwards",
 }
+
+export const GRAPHER_MAP_TYPE = "WorldMap"
+type GrapherMapType = typeof GRAPHER_MAP_TYPE
+
 export enum ChartTypeName {
     LineChart = "LineChart",
     ScatterPlot = "ScatterPlot",
@@ -128,10 +132,10 @@ export enum ChartTypeName {
     SlopeChart = "SlopeChart",
     StackedBar = "StackedBar",
     Marimekko = "Marimekko",
-    // special map type that can't be selected by authors
-    WorldMap = "WorldMap",
 }
 
+export type GrapherChartOrMapType = ChartTypeName | GrapherMapType
+
 export enum AxisMinMaxValueStr {
     auto = "auto",
 }

packages/@ourworldindata/types/src/index.ts

@@ -75,6 +75,8 @@ export {
     ColorSchemeName,
     colorScaleConfigDefaults,
     ChartTypeName,
+    type GrapherChartOrMapType,
+    GRAPHER_MAP_TYPE,
     GrapherTabOption,
     GrapherTabName,
     GrapherTabQueryParam,