From 20b25907e878664fa4ac640b6d72d2b3f6ff2435 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 14 Nov 2024 12:24:59 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20(grapher)=20remove=20WorldMap=20?= =?UTF-8?q?from=20ChartTypeNames?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- adminSiteClient/ColorSchemeDropdown.tsx | 4 ++-- adminSiteClient/EditorBasicTab.tsx | 6 +----- adminSiteClient/EditorColorScaleSection.tsx | 6 +++--- adminSiteClient/EditorMapTab.tsx | 4 ++-- adminSiteClient/GrapherConfigGridEditor.tsx | 4 ++-- adminSiteServer/testPageRouter.tsx | 3 ++- devTools/svgTester/chart-configurations.ts | 2 -- devTools/svgTester/dump-chart-ids.ts | 4 ++-- devTools/svgTester/utils.ts | 11 ++++------- .../src/captionedChart/CaptionedChart.tsx | 17 ++++++++++------- .../grapher/src/chart/ChartTypeMap.tsx | 10 +++++++--- .../grapher/src/color/ColorSchemes.ts | 8 ++++++-- .../grapher/src/controls/ChartIcons.tsx | 3 --- .../types/src/dbTypes/ChartConfigs.ts | 2 +- .../types/src/grapherTypes/GrapherTypes.ts | 8 ++++++-- packages/@ourworldindata/types/src/index.ts | 2 ++ 16 files changed, 50 insertions(+), 44 deletions(-) diff --git a/adminSiteClient/ColorSchemeDropdown.tsx b/adminSiteClient/ColorSchemeDropdown.tsx index bb10e8ca5dc..b4f0b0df570 100644 --- 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 index d484ef7842a..4435c7ce5bb 100644 --- a/adminSiteClient/EditorBasicTab.tsx +++ b/adminSiteClient/EditorBasicTab.tsx @@ -403,11 +403,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 = Object.keys(ChartTypeName).map((key) => ({ value: key, label: startCase(key), })) diff --git a/adminSiteClient/EditorColorScaleSection.tsx b/adminSiteClient/EditorColorScaleSection.tsx index b04e6ea07b6..fe6753d1276 100644 --- 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/EditorMapTab.tsx b/adminSiteClient/EditorMapTab.tsx index c743e691ff2..51d5b2b689f 100644 --- 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< >"$.hasMapTab" = "true"`) tab = tab || GrapherTabOption.map } else { diff --git a/devTools/svgTester/chart-configurations.ts b/devTools/svgTester/chart-configurations.ts index 03a82a5f1c7..8b2841bdc4c 100644 --- a/devTools/svgTester/chart-configurations.ts +++ b/devTools/svgTester/chart-configurations.ts @@ -88,7 +88,6 @@ const VIEW_MATRIX_BY_CHART_TYPE: Record = { 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( diff --git a/devTools/svgTester/dump-chart-ids.ts b/devTools/svgTester/dump-chart-ids.ts index e824f5898f9..c712903ad35 100644 --- a/devTools/svgTester/dump-chart-ids.ts +++ b/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, diff --git a/devTools/svgTester/utils.ts b/devTools/svgTester/utils.ts index 724a41a0492..21ac9162b4a 100644 --- a/devTools/svgTester/utils.ts +++ b/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) diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx index 7e5b8482a13..f05f19167f8 100644 --- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx +++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx @@ -39,6 +39,8 @@ import { RelatedQuestionsConfig, Color, GrapherTabName, + GRAPHER_MAP_TYPE, + GrapherChartOrMapType, } from "@ourworldindata/types" import { DataTable, DataTableManager } from "../dataTable/DataTable" import { @@ -189,10 +191,10 @@ export class CaptionedChart extends React.Component { 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 @@ -202,20 +204,21 @@ export class CaptionedChart extends React.Component { } renderChart(): React.ReactElement | void { - const { manager, activeChartType, containerElement } = this + const { manager, activeChartOrMapType, containerElement } = 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 ( ) diff --git a/packages/@ourworldindata/grapher/src/chart/ChartTypeMap.tsx b/packages/@ourworldindata/grapher/src/chart/ChartTypeMap.tsx index 5f8fa7bd974..2647d98ff82 100644 --- a/packages/@ourworldindata/grapher/src/chart/ChartTypeMap.tsx +++ b/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 { } 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 diff --git a/packages/@ourworldindata/grapher/src/color/ColorSchemes.ts b/packages/@ourworldindata/grapher/src/color/ColorSchemes.ts index ab213d91406..376a1829055 100644 --- a/packages/@ourworldindata/grapher/src/color/ColorSchemes.ts +++ b/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 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, diff --git a/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx b/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx index 605c2f7fd7f..980c055edbf 100644 --- a/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx +++ b/packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx @@ -107,7 +107,4 @@ export const chartIcons: Record = { ), - - // world map (will never be invoked but included for completeness) - [ChartTypeName.WorldMap]: , } diff --git a/packages/@ourworldindata/types/src/dbTypes/ChartConfigs.ts b/packages/@ourworldindata/types/src/dbTypes/ChartConfigs.ts index d6ad7227811..b6a6e29b936 100644 --- a/packages/@ourworldindata/types/src/dbTypes/ChartConfigs.ts +++ b/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 } diff --git a/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts b/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts index 3a7a1c23b43..914703c59f1 100644 --- a/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts +++ b/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", } diff --git a/packages/@ourworldindata/types/src/index.ts b/packages/@ourworldindata/types/src/index.ts index 347263145cf..51f67a647fe 100644 --- a/packages/@ourworldindata/types/src/index.ts +++ b/packages/@ourworldindata/types/src/index.ts @@ -74,6 +74,8 @@ export { type ColorScaleConfigInterface, ColorSchemeName, ChartTypeName, + type GrapherChartOrMapType, + GRAPHER_MAP_TYPE, GrapherTabOption, GrapherTabName, GrapherTabQueryParam,