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 117 118 119 120 121 122 123 | 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 { Head } from "./Head"
import { SiteHeader } from "./SiteHeader"
import { SiteFooter } from "./SiteFooter"
import { ChartListItemVariant } from "./ChartListItemVariant"
import * as lodash from "lodash"
import { TableOfContents } from "./TableOfContents"
import { slugify } from "../clientUtils/Util"
export interface ChartIndexItem {
id: number
title: string
slug: string
variantName?: string
tags: { id: number; name: string }[]
}
export interface TagWithCharts {
id: number
name: string
charts: ChartIndexItem[]
}
export const ChartsIndexPage = (props: {
chartItems: ChartIndexItem[]
baseUrl: string
}) => {
const { chartItems, baseUrl } = props
const allTags = lodash.sortBy(
lodash.uniqBy(
lodash.flatten(chartItems.map((item) => item.tags)),
(tag) => tag.id
),
(tag) => tag.name
) as TagWithCharts[]
for (const chartItem of chartItems) {
for (const tag of allTags) {
if (tag.charts === undefined) tag.charts = []
if (chartItem.tags.some((t) => t.id === tag.id))
tag.charts.push(chartItem)
}
}
// Sort the charts in each tag
for (const tag of allTags) {
tag.charts = lodash.sortBy(tag.charts, (c) => c.title.trim())
}
const pageTitle = "Charts"
const tocEntries = allTags.map((t) => {
return {
isSubheading: true,
slug: slugify(t.name),
text: t.name,
}
})
return (
<html>
<Head
canonicalUrl={`${baseUrl}/charts`}
pageTitle="Charts"
pageDesc="All of the interactive charts on Our World in Data."
baseUrl={baseUrl}
/>
<body className="ChartsIndexPage">
<SiteHeader baseUrl={baseUrl} />
<main>
<div className="page with-sidebar">
<div className="content-wrapper">
<TableOfContents
headings={tocEntries}
pageTitle={pageTitle}
/>
<div className="offset-content">
<div className="content">
<header className="chartsHeader">
<input
type="search"
className="chartsSearchInput"
placeholder="Filter interactive charts by title"
autoFocus
/>
</header>
{allTags.map((t) => (
<section key={t.id}>
<h2 id={slugify(t.name)}>
{t.name}
</h2>
<ul>
{t.charts.map((c) => (
<ChartListItemVariant
key={c.slug}
chart={c}
/>
))}
</ul>
</section>
))}
</div>
</div>
</div>
</div>
</main>
<SiteFooter baseUrl={baseUrl} />
<script
dangerouslySetInnerHTML={{
__html: `
window.runChartsIndexPage()
runTableOfContents(${JSON.stringify({
headings: tocEntries,
pageTitle,
})})`,
}}
/>
</body>
</html>
)
}
|