Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(admin): add test page for color schemes #3860

Merged
merged 1 commit into from
Aug 7, 2024
Merged

feat(admin): add test page for color schemes #3860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions adminSiteClient/TestIndexPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,16 @@ export class TestIndexPage extends React.Component {
Embed Variants
</Link>
</li>

<li>
<Link
native
target="_blank"
to="/test/colorSchemes?slug=life-expectancy&tab=map"
>
Color Schemes
</Link>
</li>
</ul>

<h2>Test Explorer Embeds</h2>
Expand Down
108 changes: 108 additions & 0 deletions adminSiteServer/testPageRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import { renderToHtmlPage, expectInt } from "../serverUtils/serverUtil.js"
import {
getChartConfigById,

Check warning on line 8 in adminSiteServer/testPageRouter.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'getChartConfigById' is defined but never used. Allowed unused vars must match /^_/u

Check warning on line 8 in adminSiteServer/testPageRouter.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'getChartConfigById' is defined but never used. Allowed unused vars must match /^_/u
getChartConfigBySlug,
getChartVariableData,
} from "../db/model/Chart.js"
Expand All @@ -25,6 +26,7 @@
import {
ChartTypeName,
ChartsTableName,
ColorSchemeName,
DbRawChart,
EntitySelectionMode,
GrapherTabOption,
Expand All @@ -35,6 +37,11 @@
import { GIT_CMS_DIR } from "../gitCms/GitCmsConstants.js"
import { ExplorerChartCreationMode } from "../explorer/ExplorerConstants.js"
import { getPlainRouteWithROTransaction } from "./plainRouterHelpers.js"
import {
ColorScheme,

Check warning on line 41 in adminSiteServer/testPageRouter.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'ColorScheme' is defined but never used. Allowed unused vars must match /^_/u

Check warning on line 41 in adminSiteServer/testPageRouter.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'ColorScheme' is defined but never used. Allowed unused vars must match /^_/u
ColorSchemes,
GrapherProgrammaticInterface,
} from "@ourworldindata/grapher"

const IS_LIVE = ADMIN_BASE_URL === "https://owid.cloud"
const DEFAULT_COMPARISON_URL = "https://ourworldindata.org"
Expand Down Expand Up @@ -108,6 +115,7 @@
readonly datasetIds?: string
readonly namespace?: string
readonly namespaces?: string
readonly allColorSchemes?: string
}

interface ExplorerTestPageQueryParams {
Expand Down Expand Up @@ -635,6 +643,88 @@
)
}

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 (
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<title>Test Color schemes</title>
<style dangerouslySetInnerHTML={{ __html: style }} />
</head>
<body>
{Object.keys(ColorSchemeName).map((colorSchemeKey) => {
const scheme = ColorSchemes.get(
colorSchemeKey as ColorSchemeName
)
const overrideColorScale = {
baseColorScheme: colorSchemeKey as ColorSchemeName,
}
const overrideConfig: Partial<GrapherProgrammaticInterface> =
{
baseColorScheme: colorSchemeKey as ColorSchemeName,
colorScale: overrideColorScale,
map: { colorScale: overrideColorScale } as any,
tab: props.tab,
}
return (
<div key={colorSchemeKey} className="row">
<h3>
{scheme.name} ({colorSchemeKey})
</h3>
<div className="side-by-side">
<figure
data-grapher-src={`${BAKED_GRAPHER_URL}/${props.slug}`}
data-grapher-config={JSON.stringify(
overrideConfig
)}
/>
</div>
</div>
)
})}
<script src={`${BAKED_BASE_URL}/assets/embedCharts.js`} />
</body>
</html>
)
}

getPlainRouteWithROTransaction(
testPageRouter,
"/previews",
Expand Down Expand Up @@ -671,6 +761,24 @@
}
)

getPlainRouteWithROTransaction(
testPageRouter,
"/colorSchemes",
async (req, res, _trx) => {
const slug = req.query.slug as string | undefined
const tab = req.query.tab as GrapherTabOption | undefined

if (!slug) {
res.send("No slug provided")
return
}

res.send(
renderToHtmlPage(<ColorSchemesTestPage slug={slug} tab={tab} />)
)
}
)

getPlainRouteWithROTransaction(
testPageRouter,
"/:slug.svg",
Expand Down
Loading