diff --git a/adminSiteClient/TestIndexPage.tsx b/adminSiteClient/TestIndexPage.tsx
index f8a2ccf4864..69753bd433d 100644
--- a/adminSiteClient/TestIndexPage.tsx
+++ b/adminSiteClient/TestIndexPage.tsx
@@ -171,6 +171,16 @@ export class TestIndexPage extends React.Component {
Embed Variants
+
+
+
+ Color Schemes
+
+
Test Explorer Embeds
diff --git a/adminSiteServer/testPageRouter.tsx b/adminSiteServer/testPageRouter.tsx
index 5163d3cf385..55b1c17edcf 100644
--- a/adminSiteServer/testPageRouter.tsx
+++ b/adminSiteServer/testPageRouter.tsx
@@ -5,6 +5,7 @@ import React from "react"
import { renderToHtmlPage, expectInt } from "../serverUtils/serverUtil.js"
import {
+ getChartConfigById,
getChartConfigBySlug,
getChartVariableData,
} from "../db/model/Chart.js"
@@ -25,6 +26,7 @@ import { grapherToSVG } from "../baker/GrapherImageBaker.js"
import {
ChartTypeName,
ChartsTableName,
+ ColorSchemeName,
DbRawChart,
EntitySelectionMode,
GrapherTabOption,
@@ -35,6 +37,11 @@ import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.
import { GIT_CMS_DIR } from "../gitCms/GitCmsConstants.js"
import { ExplorerChartCreationMode } from "../explorer/ExplorerConstants.js"
import { getPlainRouteWithROTransaction } from "./plainRouterHelpers.js"
+import {
+ ColorScheme,
+ ColorSchemes,
+ GrapherProgrammaticInterface,
+} from "@ourworldindata/grapher"
const IS_LIVE = ADMIN_BASE_URL === "https://owid.cloud"
const DEFAULT_COMPARISON_URL = "https://ourworldindata.org"
@@ -108,6 +115,7 @@ interface EmbedTestPageQueryParams {
readonly datasetIds?: string
readonly namespace?: string
readonly namespaces?: string
+ readonly allColorSchemes?: string
}
interface ExplorerTestPageQueryParams {
@@ -635,6 +643,88 @@ function EmbedVariantsTestPage(
)
}
+function ColorSchemesTestPage(props: {
+ slug: string
+ tab: GrapherTabOption | undefined
+}) {
+ const style = `
+ html, body {
+ height: 100%;
+ margin: 0;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ }
+
+ figure, iframe {
+ border: 0;
+ flex: 1;
+ height: 550px;
+ margin: 10px;
+ }
+
+ .row {
+ padding: 10px;
+ margin: 0;
+ border-bottom: 1px solid #ddd;
+ }
+
+ .side-by-side {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ }
+
+ h3 {
+ margin: 0;
+ }
+ `
+ return (
+
+
+
+ Test Color schemes
+
+
+
+ {Object.keys(ColorSchemeName).map((colorSchemeKey) => {
+ const scheme = ColorSchemes.get(
+ colorSchemeKey as ColorSchemeName
+ )
+ const overrideColorScale = {
+ baseColorScheme: colorSchemeKey as ColorSchemeName,
+ }
+ const overrideConfig: Partial =
+ {
+ baseColorScheme: colorSchemeKey as ColorSchemeName,
+ colorScale: overrideColorScale,
+ map: { colorScale: overrideColorScale } as any,
+ tab: props.tab,
+ }
+ return (
+
+
+ {scheme.name} ({colorSchemeKey})
+
+
+
+
+