owid · sophiamersmann · Nov 26, 2024 · Nov 14, 2024 · Nov 14, 2024
diff --git a/adminSiteClient/ChartList.tsx b/adminSiteClient/ChartList.tsx
@@ -4,9 +4,10 @@ import { runInAction, observable } from "mobx"
 import { bind } from "decko"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import {
-    ChartTypeName,
+    GrapherChartType,
     GrapherInterface,
-    GrapherTabOption,
+    GRAPHER_CHART_TYPES,
+    GRAPHER_TAB_OPTIONS,
 } from "@ourworldindata/types"
 import { startCase, DbChartTagJoin } from "@ourworldindata/utils"
 import { References, getFullReferencesCount } from "./ChartEditor.js"
@@ -24,7 +25,7 @@ export interface ChartListItem {
     tab: GrapherInterface["tab"]
     hasMapTab: GrapherInterface["hasMapTab"]
 
-    type?: ChartTypeName
+    type?: GrapherChartType
     hasChartTab: boolean
 
     lastEditedAt: string
@@ -152,11 +153,11 @@ export function showChartType(chart: ChartListItem): string {
 
     if (!chartType) return "Map"
 
-    const displayType = ChartTypeName[chartType]
-        ? startCase(ChartTypeName[chartType])
+    const displayType = GRAPHER_CHART_TYPES[chartType]
+        ? startCase(GRAPHER_CHART_TYPES[chartType])
         : "Unknown"
 
-    if (chart.tab === GrapherTabOption.map) {
+    if (chart.tab === GRAPHER_TAB_OPTIONS.map) {
         if (chart.hasChartTab) return `Map + ${displayType}`
         else return "Map"
     } else {

diff --git a/adminSiteClient/ColorSchemeDropdown.tsx b/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
 }

diff --git a/adminSiteClient/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
@@ -9,9 +9,10 @@ import {
 } from "mobx"
 import { observer } from "mobx-react"
 import {
-    ChartTypeName,
     EntitySelectionMode,
     StackMode,
+    ALL_GRAPHER_CHART_TYPES,
+    GrapherChartType,
 } from "@ourworldindata/types"
 import {
     DimensionSlot,
@@ -362,7 +363,9 @@ export class EditorBasicTab<
         const { grapher } = this.props.editor
 
         grapher.chartTypes =
-            value === this.chartTypeOptionNone ? [] : [value as ChartTypeName]
+            value === this.chartTypeOptionNone
+                ? []
+                : [value as GrapherChartType]
 
         if (grapher.isMarimekko) {
             grapher.hideRelativeToggle = false
@@ -403,11 +406,7 @@ export class EditorBasicTab<
         value: string
         label: string
     }[] {
-        const allChartTypes = Object.keys(ChartTypeName).filter(
-            (chartType) => chartType !== ChartTypeName.WorldMap
-        )
-
-        const chartTypeOptions = allChartTypes.map((key) => ({
+        const chartTypeOptions = ALL_GRAPHER_CHART_TYPES.map((key) => ({
             value: key,
             label: startCase(key),
         }))

diff --git a/adminSiteClient/EditorColorScaleSection.tsx b/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
 }> {

diff --git a/adminSiteClient/EditorCustomizeTab.tsx b/adminSiteClient/EditorCustomizeTab.tsx
@@ -6,7 +6,7 @@ import {
     ColorSchemeName,
     FacetAxisDomain,
     FacetStrategy,
-    ChartTypeName,
+    GRAPHER_CHART_TYPES,
 } from "@ourworldindata/types"
 import { Grapher } from "@ourworldindata/grapher"
 import {
@@ -161,7 +161,7 @@ export class ColorSchemeSelector extends React.Component<{
                             onBlur={this.onBlur}
                             chartType={
                                 this.props.grapher.chartType ??
-                                ChartTypeName.LineChart
+                                GRAPHER_CHART_TYPES.LineChart
                             }
                             invertedColorScheme={!!grapher.invertColorScheme}
                             additionalOptions={[
@@ -755,7 +755,9 @@ export class EditorCustomizeTab<
                 {grapher.chartInstanceExceptMap.colorScale && (
                     <EditorColorScaleSection
                         scale={grapher.chartInstanceExceptMap.colorScale}
-                        chartType={grapher.chartType ?? ChartTypeName.LineChart}
+                        chartType={
+                            grapher.chartType ?? GRAPHER_CHART_TYPES.LineChart
+                        }
                         showLineChartColors={grapher.isLineChart}
                         features={{
                             visualScaling: true,

diff --git a/adminSiteClient/EditorMapTab.tsx b/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,

diff --git a/adminSiteClient/GrapherConfigGridEditor.tsx b/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 { GRAPHER_CHART_TYPES, 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,
@@ -513,7 +513,8 @@ export class GrapherConfigGridEditor extends React.Component<GrapherConfigGridEd
                             <EditorColorScaleSection
                                 scale={colorScale}
                                 chartType={
-                                    grapher.chartType ?? ChartTypeName.LineChart
+                                    grapher.chartType ??
+                                    GRAPHER_CHART_TYPES.LineChart
                                 }
                                 features={{
                                     visualScaling: true,

diff --git a/adminSiteClient/VariableEditPage.tsx b/adminSiteClient/VariableEditPage.tsx
@@ -43,7 +43,7 @@ import { SourceList } from "./SourceList.js"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 import { Base64 } from "js-base64"
 import {
-    GrapherTabOption,
+    GRAPHER_TAB_OPTIONS,
     GrapherInterface,
     OwidVariableRoundingMode,
 } from "@ourworldindata/types"
@@ -691,13 +691,13 @@ class VariableEditor extends React.Component<{
             return {
                 ...grapherConfig,
                 hasMapTab: true,
-                tab: GrapherTabOption.map,
+                tab: GRAPHER_TAB_OPTIONS.map,
             }
         else
             return {
                 yAxis: { min: 0 },
                 map: { columnSlug: this.props.variable.id.toString() },
-                tab: GrapherTabOption.map,
+                tab: GRAPHER_TAB_OPTIONS.map,
                 hasMapTab: true,
                 dimensions: [
                     {

diff --git a/adminSiteServer/testPageRouter.tsx b/adminSiteServer/testPageRouter.tsx
@@ -23,14 +23,16 @@ import {
 } from "@ourworldindata/utils"
 import { grapherToSVG } from "../baker/GrapherImageBaker.js"
 import {
-    ChartTypeName,
     ColorSchemeName,
     DbRawChartConfig,
     DbPlainChart,
     EntitySelectionMode,
-    GrapherTabOption,
+    GRAPHER_TAB_OPTIONS,
     StackMode,
     parseChartConfig,
+    GRAPHER_MAP_TYPE,
+    GrapherTabOption,
+    GrapherChartOrMapType,
 } from "@ourworldindata/types"
 import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.js"
 import { GIT_CMS_DIR } from "../gitCms/GitCmsConstants.js"
@@ -101,7 +103,7 @@ interface EmbedTestPageQueryParams {
     readonly page?: string
     readonly random?: string
     readonly tab?: GrapherTabOption
-    readonly type?: ChartTypeName
+    readonly type?: GrapherChartOrMapType
     readonly logLinear?: string
     readonly comparisonLines?: string
     readonly stackMode?: StackMode
@@ -148,41 +150,41 @@ 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
+            tab = tab || GRAPHER_TAB_OPTIONS.map
         } else {
             query = query.andWhereRaw(`cc.chartType = :type`, {
                 type: params.type,
             })
-            tab = tab || GrapherTabOption.chart
+            tab = tab || GRAPHER_TAB_OPTIONS.chart
         }
     }
 
     if (params.logLinear) {
         query = query.andWhereRaw(
             `cc.full->>'$.yAxis.canChangeScaleType' = "true" OR cc.full->>'$.xAxis.canChangeScaleType'  = "true"`
         )
-        tab = GrapherTabOption.chart
+        tab = GRAPHER_TAB_OPTIONS.chart
     }
 
     if (params.comparisonLines) {
         query = query.andWhereRaw(
             `cc.full->'$.comparisonLines[0].yEquals' != ''`
         )
-        tab = GrapherTabOption.chart
+        tab = GRAPHER_TAB_OPTIONS.chart
     }
 
     if (params.stackMode) {
         query = query.andWhereRaw(`cc.full->'$.stackMode' = :stackMode`, {
             stackMode: params.stackMode,
         })
-        tab = GrapherTabOption.chart
+        tab = GRAPHER_TAB_OPTIONS.chart
     }
 
     if (params.relativeToggle) {
         query = query.andWhereRaw(`cc.full->>'$.hideRelativeToggle' = "false"`)
-        tab = GrapherTabOption.chart
+        tab = GRAPHER_TAB_OPTIONS.chart
     }
 
     if (params.categoricalLegend) {
@@ -192,7 +194,7 @@ async function propsFromQueryParams(
         query = query.andWhereRaw(
             `json_length(cc.full->'$.map.colorScale.customCategoryColors') > 1`
         )
-        tab = GrapherTabOption.map
+        tab = GRAPHER_TAB_OPTIONS.map
     }
 
     if (params.mixedTimeTypes) {
@@ -232,9 +234,9 @@ async function propsFromQueryParams(
         query = query.andWhereRaw(`charts.id IN (${params.ids})`)
     }
 
-    if (tab === GrapherTabOption.map) {
+    if (tab === GRAPHER_TAB_OPTIONS.map) {
         query = query.andWhereRaw(`cc.full->>"$.hasMapTab" = "true"`)
-    } else if (tab === GrapherTabOption.chart) {
+    } else if (tab === GRAPHER_TAB_OPTIONS.chart) {
         query = query.andWhereRaw(`cc.chartType IS NOT NULL`)
     }
 

diff --git a/baker/updateChartEntities.ts b/baker/updateChartEntities.ts
@@ -9,7 +9,7 @@ import {
     ChartsXEntitiesTableName,
     DbPlainChart,
     GrapherInterface,
-    GrapherTabOption,
+    GRAPHER_TAB_OPTIONS,
     MultipleOwidVariableDataDimensionsMap,
     OwidVariableDataMetadataDimensions,
     DbRawChartConfig,
@@ -97,7 +97,7 @@ const obtainAvailableEntitiesForGrapherConfig = async (
 
     // If the grapher has a chart tab, then the available entities there are the "most interesting" ones to us
     if (grapher.hasChartTab) {
-        grapher.tab = GrapherTabOption.chart
+        grapher.tab = GRAPHER_TAB_OPTIONS.chart
 
         // If the grapher allows for changing or multi-selecting entities, then let's index all entities the
         // user can choose from. Otherwise, we'll just use the default-selected entities.
@@ -112,7 +112,7 @@ const obtainAvailableEntitiesForGrapherConfig = async (
             return grapher.tableForSelection.availableEntityNames as string[]
         else return grapher.selectedEntityNames ?? []
     } else if (grapher.hasMapTab) {
-        grapher.tab = GrapherTabOption.map
+        grapher.tab = GRAPHER_TAB_OPTIONS.map
         // On a map tab, tableAfterAuthorTimelineAndActiveChartTransform contains all
         // mappable entities for which data is available
         return grapher.tableAfterAuthorTimelineAndActiveChartTransform

diff --git a/db/migration/1661264304751-MigrateSelectedData.ts b/db/migration/1661264304751-MigrateSelectedData.ts
@@ -3,7 +3,7 @@ import { MigrationInterface, QueryRunner } from "typeorm"
 
 import { entityNameById } from "./data/entityNameById.js"
 
-import { ChartTypeName } from "@ourworldindata/types"
+import { GRAPHER_CHART_TYPES, GrapherChartType } from "@ourworldindata/types"
 
 type GrapherInterface = Record<string, any>
 
@@ -85,11 +85,11 @@ export class MigrateSelectedData1661264304751 implements MigrationInterface {
                 }
             })
 
-        const migrateDimensionsTypes: ChartTypeName[] = [
-            ChartTypeName.Marimekko,
-            ChartTypeName.StackedArea,
-            ChartTypeName.StackedBar,
-            ChartTypeName.StackedDiscreteBar,
+        const migrateDimensionsTypes: GrapherChartType[] = [
+            GRAPHER_CHART_TYPES.Marimekko,
+            GRAPHER_CHART_TYPES.StackedArea,
+            GRAPHER_CHART_TYPES.StackedBar,
+            GRAPHER_CHART_TYPES.StackedDiscreteBar,
         ]
 
         // Migrate order of dimensions.

diff --git a/db/model/Chart.ts b/db/model/Chart.ts
@@ -13,7 +13,6 @@ import {
 } from "@ourworldindata/utils"
 import {
     GrapherInterface,
-    ChartTypeName,
     RelatedChart,
     DbPlainPostLink,
     DbPlainChart,
@@ -22,6 +21,7 @@ import {
     DbPlainTag,
     DbRawChartConfig,
     DbEnrichedChartConfig,
+    GrapherChartType,
 } from "@ourworldindata/types"
 import { OpenAI } from "openai"
 import {
@@ -556,7 +556,7 @@ export async function getChartVariableData(
 
 export const getMostViewedGrapherIdsByChartType = async (
     knex: db.KnexReadonlyTransaction,
-    chartType: ChartTypeName,
+    chartType: GrapherChartType,
     count = 10
 ): Promise<number[]> => {
     const ids = await db.knexRaw<{ id: number }>(