🔨 (grapher) refactor chart type name and tab name types

owid · Nov 14, 2024 · ebd77e7 · ebd77e7
1 parent 0e68874
commit ebd77e7
Show file tree

Hide file tree

Showing 58 changed files with 523 additions and 460 deletions.
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/EditorBasicTab.tsx b/adminSiteClient/EditorBasicTab.tsx
@@ -9,9 +9,11 @@ import {
 } from "mobx"
 import { observer } from "mobx-react"
 import {
-    ChartTypeName,
+    GRAPHER_CHART_TYPES,
     EntitySelectionMode,
     StackMode,
+    ALL_GRAPHER_CHART_TYPES,
+    GrapherChartType,
 } from "@ourworldindata/types"
 import {
     DimensionSlot,
@@ -359,7 +361,7 @@ export class EditorBasicTab<
     @action.bound onChartTypeChange(value: string) {
         const { grapher } = this.props.editor
 
-        const newChartType = value as ChartTypeName
+        const newChartType = value as GrapherChartType
         grapher.chartTypes = [newChartType]
 
         if (grapher.isMarimekko) {
@@ -400,7 +402,6 @@ export class EditorBasicTab<
     render() {
         const { editor } = this.props
         const { grapher } = editor
-        const allChartTypes = Object.keys(ChartTypeName)
 
         const isIndicatorChart = isIndicatorChartEditorInstance(editor)
 
@@ -412,7 +413,7 @@ export class EditorBasicTab<
                     <SelectField
                         value={grapher.chartType}
                         onValue={this.onChartTypeChange}
-                        options={allChartTypes.map((key) => ({
+                        options={ALL_GRAPHER_CHART_TYPES.map((key) => ({
                             value: key,
                             label: startCase(key),
                         }))}
@@ -423,7 +424,7 @@ export class EditorBasicTab<
                             value={grapher.hasChartTab}
                             onValue={(shouldHaveChartTab) =>
                                 (grapher.chartTypes = shouldHaveChartTab
-                                    ? [ChartTypeName.LineChart]
+                                    ? [GRAPHER_CHART_TYPES.LineChart]
                                     : [])
                             }
                         />

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/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, GRAPHER_MAP_TYPE } from "@ourworldindata/types"
+import { GRAPHER_CHART_TYPES, GRAPHER_MAP_TYPE } from "@ourworldindata/types"
 import {
     Grapher,
     GrapherProgrammaticInterface,
@@ -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,15 +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"
@@ -102,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
@@ -151,7 +152,7 @@ async function propsFromQueryParams(
     if (params.type) {
         if (params.type === GRAPHER_MAP_TYPE) {
             query = query.andWhereRaw(`cc.full->>"$.hasMapTab" = "true"`)
-            tab = tab || GrapherTabOption.map
+            tab = tab || GRAPHER_TAB_OPTIONS.map
         } else {
             if (params.type === "LineChart") {
                 query = query.andWhereRaw(`cc.chartType = "LineChart"`)
@@ -160,34 +161,34 @@ async function propsFromQueryParams(
                     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) {
@@ -197,7 +198,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) {
@@ -237,9 +238,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 }>(

diff --git a/db/model/Gdoc/GdocBase.ts b/db/model/Gdoc/GdocBase.ts
@@ -19,7 +19,7 @@ import {
     OwidGdocMinimalPostInterface,
     urlToSlug,
     grabMetadataForGdocLinkedIndicator,
-    GrapherTabOption,
+    GRAPHER_TAB_OPTIONS,
     DbInsertPostGdocLink,
     DbPlainTag,
     formatDate,
@@ -934,7 +934,7 @@ export async function makeGrapherLinkedChart(
     const resolvedSlug = config.slug ?? ""
     const resolvedTitle = config.title ?? ""
     const resolvedUrl = `${BAKED_GRAPHER_URL}/${resolvedSlug}`
-    const tab = config.tab ?? GrapherTabOption.chart
+    const tab = config.tab ?? GRAPHER_TAB_OPTIONS.chart
     const datapageIndicator = await getVariableOfDatapageIfApplicable(config)
     return {
         configType: ChartConfigType.Grapher,

diff --git a/db/model/Variable.ts b/db/model/Variable.ts
@@ -23,7 +23,7 @@ import {
     OwidVariableMixedData,
     OwidVariableWithSourceAndDimension,
     OwidVariableId,
-    ChartTypeName,
+    GRAPHER_CHART_TYPES,
     DimensionProperty,
     GrapherInterface,
     DbRawVariable,
@@ -880,7 +880,7 @@ export async function getVariableOfDatapageIfApplicable(
     // showing a data page.
     if (
         yVariableIds.length === 1 &&
-        (!grapher.chartTypes?.includes(ChartTypeName.ScatterPlot) ||
+        (!grapher.chartTypes?.includes(GRAPHER_CHART_TYPES.ScatterPlot) ||
             xVariableIds.length === 0)
     ) {
         const variableId = yVariableIds[0]

diff --git a/devTools/graphersToGit/tasks.ts b/devTools/graphersToGit/tasks.ts
@@ -2,7 +2,7 @@
 
 import { CoreTable } from "@ourworldindata/core-table"
 import {
-    ChartTypeName,
+    GRAPHER_CHART_TYPES,
     ColorScaleConfig,
     Grapher,
     GrapherProgrammaticInterface,
@@ -173,7 +173,7 @@ const dumpComplexSelections = async () => {
                 : 0
         return {
             grapherId: config.id,
-            type: config.type ?? ChartTypeName.LineChart,
+            type: config.type ?? GRAPHER_CHART_TYPES.LineChart,
             url: `https://ourworldindata.org/grapher/${config.slug}`,
             dimensionVariableCount,
             selectionVariableCount,