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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 6x 6x 6x 3x 3x 3x 6x 6x 6x 6x 6x 6x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 6x 6x 6x 6x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x | import * as React from "react"
import ReactDOM from "react-dom"
import { useState, useEffect, useRef } from "react"
import { MultiEmbedderSingleton } from "../../site/multiembedder/MultiEmbedder"
import { RelatedChart } from "../../clientUtils/owidTypes"
const RELATED_CHARTS_CLASS_NAME = "related-charts"
export const RelatedCharts = ({ charts }: { charts: RelatedChart[] }) => {
const refChartContainer = useRef<HTMLDivElement>(null)
const [currentChart, setCurrentChart] = useState<RelatedChart>(charts[0])
useEffect(() => {
if (refChartContainer.current)
// Track newly injected <figure> elements in embedder
MultiEmbedderSingleton.observeFigures(refChartContainer.current)
}, [currentChart])
return (
<div className={RELATED_CHARTS_CLASS_NAME}>
<div className="wp-block-columns is-style-sticky-right">
<div className="wp-block-column">
<ul>
{charts.map((chart) => (
<li
className={
currentChart &&
currentChart.slug === chart.slug
? "active"
: ""
}
key={chart.slug}
>
<a
href={`/grapher/${chart.slug}`}
onClick={(event) => {
// Allow opening charts in new tab/window with ⌘+CLICK
if (
!event.metaKey &&
!event.shiftKey &&
!event.ctrlKey
) {
setCurrentChart({
title: chart.title,
slug: chart.slug,
})
event.preventDefault()
}
}}
>
{chart.title}
</a>
{chart.variantName ? (
<span className="variantName">
{chart.variantName}
</span>
) : null}
</li>
))}
</ul>
</div>
<div
className="wp-block-column"
id="all-charts-preview"
ref={refChartContainer}
>
<figure
// Use unique `key` to force React to re-render tree
key={currentChart.slug}
data-grapher-src={`/grapher/${currentChart.slug}`}
/>
</div>
</div>
</div>
)
}
export const runRelatedCharts = (charts: RelatedChart[]) => {
const relatedChartsEl = document.querySelector<HTMLElement>(
`.${RELATED_CHARTS_CLASS_NAME}`
)
if (relatedChartsEl) {
const relatedChartsWrapper = relatedChartsEl.parentElement
ReactDOM.hydrate(
<RelatedCharts charts={charts} />,
relatedChartsWrapper
)
}
}
|