Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import urljoin from "url-join"
import { GrapherInterface } from "../grapher/core/GrapherInterface"
import { SiteHeader } from "./SiteHeader"
import { SiteFooter } from "./SiteFooter"
import { Head } from "./Head"
import { PostReference, PostRow, RelatedChart } from "../clientUtils/owidTypes"
import { ChartListItemVariant } from "./ChartListItemVariant"
import { LoadingIndicator } from "../grapher/loadingIndicator/LoadingIndicator"
import { IFrameDetector } from "./IframeDetector"
import { serializeJSONForHTML } from "../clientUtils/serializers"
import { GRAPHER_PAGE_BODY_CLASS } from "../grapher/core/GrapherConstants"
import { uniq } from "../clientUtils/Util"
import { RelatedArticles } from "./RelatedArticles/RelatedArticles"
export const GrapherPage = (props: {
grapher: GrapherInterface
post?: PostRow
relatedCharts?: RelatedChart[]
relatedArticles?: PostReference[]
baseUrl: string
baseGrapherUrl: string
}) => {
const { grapher, relatedCharts, relatedArticles, baseGrapherUrl, baseUrl } =
props
const pageTitle = grapher.title
const pageDesc =
grapher.subtitle ||
"An interactive visualization from Our World in Data."
const canonicalUrl = urljoin(baseGrapherUrl, grapher.slug as string)
const imageUrl = urljoin(
baseGrapherUrl,
"exports",
`${grapher.slug}.png?v=${grapher.version}`
)
const script = `const jsonConfig = ${serializeJSONForHTML(grapher)}
window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
const variableIds = uniq(grapher.dimensions!.map((d) => d.variableId))
return (
<html>
<Head
canonicalUrl={canonicalUrl}
pageTitle={pageTitle}
pageDesc={pageDesc}
imageUrl={imageUrl}
baseUrl={baseUrl}
>
<meta property="og:image:width" content="850" />
<meta property="og:image:height" content="600" />
<IFrameDetector />
<noscript>
<style>{`
figure { display: none !important; }
`}</style>
</noscript>
<link
rel="preload"
href={`/grapher/data/variables/${variableIds.join(
"+"
)}.json?v=${grapher.version}`}
as="fetch"
crossOrigin="anonymous"
/>
</Head>
<body className={GRAPHER_PAGE_BODY_CLASS}>
<SiteHeader baseUrl={baseUrl} />
<main>
<figure data-grapher-src={`/grapher/${grapher.slug}`}>
<LoadingIndicator />
</figure>
<noscript id="fallback">
<img
src={`${baseGrapherUrl}/exports/${grapher.slug}.svg`}
/>
<p>Interactive visualization requires JavaScript</p>
</noscript>
{((relatedArticles && relatedArticles.length != 0) ||
(relatedCharts && relatedCharts.length != 0)) && (
<div className="related-research-data">
<h2>All our related research and data</h2>
{relatedArticles && relatedArticles.length != 0 && (
<RelatedArticles articles={relatedArticles} />
)}
{relatedCharts && relatedCharts.length !== 0 && (
<>
<h3>Charts</h3>
<ul>
{relatedCharts
.filter(
(chartItem) =>
chartItem.slug !==
grapher.slug
)
.map((c) => (
<ChartListItemVariant
key={c.slug}
chart={c}
/>
))}
</ul>
</>
)}
</div>
)}
</main>
<SiteFooter baseUrl={baseUrl} />
<script dangerouslySetInnerHTML={{ __html: script }} />
</body>
</html>
)
}
|