🚧 wip chart book

site/gdocs/components/ArticleBlock.tsx

@@ -35,6 +35,7 @@ import { AllCharts } from "./AllCharts.js"
 import Video from "./Video.js"
 import { Table } from "./Table.js"
 import KeyIndicator from "./KeyIndicator.js"
+import ChartBook from "./ChartBook.js"
 
 export type Container =
     | "default"
@@ -58,6 +59,7 @@ const layouts: { [key in Container]: Layouts} = {
         ["all-charts"]: "col-start-2 span-cols-12",
         ["aside-left"]: "col-start-2 span-cols-3 span-md-cols-10 col-md-start-3",
         ["aside-right"]: "col-start-11 span-cols-3 span-md-cols-10 col-md-start-3",
+        ["chart-book"]: "col-start-2 span-cols-12",
         ["chart-story"]: "col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
         ["chart"]: "col-start-4 span-cols-8 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
         ["default"]: "col-start-5 span-cols-6 col-md-start-3 span-md-cols-10 span-sm-cols-12 col-sm-start-2",
@@ -628,19 +630,9 @@ export default function ArticleBlock({
         .with({ type: "key-indicator" }, (block) => (
             <KeyIndicator className={getLayout("key-indicator")} d={block} />
         ))
-        .with({ type: "chart-book" }, (block) => {
-            return (
-                <>
-                    {block.blocks.map((keyIndicatorBlock) => (
-                        <KeyIndicator
-                            key={keyIndicatorBlock.datapageUrl}
-                            className={getLayout("key-indicator")}
-                            d={keyIndicatorBlock}
-                        />
-                    ))}
-                </>
-            )
-        })
+        .with({ type: "chart-book" }, (block) => (
+            <ChartBook className={getLayout("chart-book")} d={block} />
+        ))
         .exhaustive()
 
     return (

site/gdocs/components/ChartBook.scss

@@ -0,0 +1,74 @@
+.chart-book {
+    $padding: 24px;
+    $icon-width: 24px;
+
+    margin: 0 (-$padding);
+
+    .chart-book__header {
+        padding: $padding;
+    }
+
+    .indicator-row {
+        background-color: whitesmoke;
+    }
+
+    .indicator-row + .indicator-row {
+        margin-top: 4px;
+    }
+
+    .indicator-row__header {
+        padding: $padding;
+    }
+
+    .indicator-row__content {
+        padding: 0 $padding;
+    }
+
+    .indicator-row__content > .spacer {
+        width: 100%;
+        height: $padding;
+    }
+
+    .indicator-row__header {
+        position: relative;
+    }
+
+    .indicator-row__header > * {
+        text-align: left;
+    }
+
+    .indicator-row__header > *:nth-last-child(2) {
+        margin-right: $icon-width;
+    }
+
+    .indicator-row__header > *:last-child {
+        position: absolute;
+        width: $icon-width;
+        top: $padding;
+        right: $padding;
+        text-align: right;
+    }
+
+    .indicator-row__content {
+        overflow: hidden;
+        transition: max-height 1s ease-in 1s; // TODO
+        height: auto;
+        max-height: 1.5 * $grapher-height; // TODO
+    }
+
+    .indicator-row__content.collapsed {
+        transition: max-height 1s ease-out;
+        max-height: 0;
+    }
+
+    .indicator-row__content h3 {
+        margin-top: 0;
+    }
+
+    button {
+        border: 0;
+        padding: 0;
+        cursor: pointer;
+        background-color: transparent;
+    }
+}

site/gdocs/components/ChartBook.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from "react"
+import cx from "classnames"
+import {
+    EnrichedBlockChartBook,
+    EnrichedBlockKeyIndicator,
+    EnrichedBlockText,
+} from "@ourworldindata/types"
+import { urlToSlug } from "@ourworldindata/utils"
+import Chart from "./Chart.js"
+import Paragraph from "./Paragraph.js"
+
+export default function ChartBook({
+    d,
+    className,
+}: {
+    d: EnrichedBlockChartBook
+    className?: string
+}) {
+    const slugs = d.blocks.map((b: EnrichedBlockKeyIndicator) =>
+        urlToSlug(b.datapageUrl)
+    )
+
+    const [isOpen, setOpen] = useState<Record<string, boolean>>({
+        ...makeDefault(slugs),
+        [slugs[0]]: true, // the first block is open by default
+    })
+
+    return (
+        <div className={cx("chart-book", className)}>
+            <div className="chart-book__header grid grid-cols-12">
+                <div className="col-start-1 span-cols-3">Indicator name</div>
+                <div className="col-start-4 span-cols-3">Source</div>
+                <div className="col-start-7 span-cols-2">Date range</div>
+                <div className="col-start-9 span-cols-2">Unit</div>
+                <div className="col-start-11 span-cols-2">Last updated</div>
+            </div>
+            <div className="chart-book__rows">
+                {d.blocks.map((block: EnrichedBlockKeyIndicator) => {
+                    const slug = urlToSlug(block.datapageUrl)
+                    return (
+                        <div className="indicator-row" key={slug}>
+                            <button
+                                className="indicator-row__header grid grid-cols-12"
+                                onClick={() => {
+                                    if (isOpen[slug]) {
+                                        // close block, leave others as they are
+                                        setOpen({
+                                            ...isOpen,
+                                            [slug]: false,
+                                        })
+                                    } else {
+                                        // open block, close all others
+                                        setOpen({
+                                            ...makeDefault(slugs),
+                                            [slug]: true,
+                                        })
+                                    }
+                                }}
+                            >
+                                <div className="col-start-1 span-cols-3">
+                                    Share of population living in extreme
+                                    poverty
+                                </div>
+                                <div className="col-start-4 span-cols-3">
+                                    World Bank and Inequality Platform
+                                </div>
+                                <div className="col-start-7 span-cols-2">
+                                    1967-2021
+                                </div>
+                                <div className="col-start-9 span-cols-2">%</div>
+                                <div className="col-start-11 span-cols-2">
+                                    May 5, 2021
+                                </div>
+                                <div className="icon">-</div>
+                            </button>
+                            <div
+                                className={cx(
+                                    "indicator-row__content grid grid-cols-12",
+                                    {
+                                        collapsed: !isOpen[slug],
+                                    }
+                                )}
+                            >
+                                <div className="col-start-1 span-cols-5">
+                                    {/* which heading level is appropriate here? */}
+                                    <h3>Some title</h3>
+                                    {block.blurb.map(
+                                        (
+                                            textBlock: EnrichedBlockText,
+                                            i: number
+                                        ) => (
+                                            <Paragraph d={textBlock} key={i} />
+                                        )
+                                    )}
+                                </div>
+                                <Chart
+                                    className="col-start-6 span-cols-7 margin-0"
+                                    d={{
+                                        url: block.datapageUrl,
+                                        type: "chart",
+                                        parseErrors: [],
+                                    }}
+                                />
+                                <div className="spacer"></div>
+                            </div>
+                        </div>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
+
+const makeDefault = (slugs: string[], defaultValue = false) =>
+    Object.fromEntries(slugs.map((s) => [s, defaultValue]))

site/owid.scss

@@ -94,6 +94,7 @@
 @import "./gdocs/components/AdditionalCharts.scss";
 @import "./gdocs/components/ResearchAndWriting.scss";
 @import "./gdocs/components/Chart.scss";
+@import "./gdocs/components/ChartBook.scss";
 @import "./DataPage.scss";
 @import "./DataPageContent.scss";
 @import "./detailsOnDemand.scss";