@buildcanada/charts 0.1.0

package/src/components/OverlayHeader.scss

@@ -0,0 +1,18 @@
+.overlay-header {
+    --padding: var(--modal-padding, 16px);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--padding) var(--padding) 16px;
+
+    .title {
+        @include grapher_h5-black-caps;
+        color: $light-text;
+    }
+
+    .close-button {
+        margin-left: 8px;
+        flex-shrink: 0;
+    }
+}

package/src/components/OverlayHeader.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import cx from "classnames"
+import { CloseButton } from "./closeButton/CloseButton.js"
+
+export function OverlayHeader({
+    title,
+    onTitleClick,
+    onDismiss,
+    className,
+}: {
+    title: string
+    onTitleClick?: () => void
+    onDismiss?: () => void
+    className?: string
+}): React.ReactElement {
+    return (
+        <div className={cx("overlay-header", className)}>
+            <h2
+                className={cx("title", {
+                    clickable: !!onTitleClick,
+                })}
+                onClick={onTitleClick}
+            >
+                {title}
+            </h2>
+            {onDismiss && <CloseButton onClick={onDismiss} />}
+        </div>
+    )
+}

package/src/components/RadioButton.scss

@@ -0,0 +1,69 @@
+@use "sass:math";
+
+.radio {
+    $radio-size: 16px;
+
+    $light-stroke: $gray-30;
+    $hover-stroke: $blue-30;
+    $active-fill: $blue-50;
+
+    position: relative;
+
+    label {
+        margin: 0; // style leak in admin
+        cursor: pointer;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+        pointer-events: none;
+    }
+
+    .outer {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: $radio-size;
+        height: $radio-size;
+
+        background: white;
+        pointer-events: none;
+        border-radius: 50%;
+        border: 1px solid $light-stroke;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .inner {
+            width: math.div($radio-size, 2);
+            height: math.div($radio-size, 2);
+            background-color: $active-fill;
+            border-radius: 50%;
+        }
+    }
+
+    input:focus-visible + .outer {
+        outline: 2px solid $controls-color;
+    }
+
+    input:checked + .outer {
+        border-color: $hover-stroke;
+    }
+
+    .label {
+        @include grapher_label-2-regular;
+        padding-left: $radio-size + 8px;
+        cursor: pointer;
+        user-select: none;
+        color: $dark-text;
+    }
+
+    &:hover {
+        input:not(:checked) + .outer {
+            border-color: $hover-stroke;
+        }
+    }
+}

package/src/components/RadioButton.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import cx from "classnames"
+
+export const RadioButton = ({
+    className,
+    checked,
+    onChange,
+    label,
+    group,
+    disabled,
+    id,
+    "data-test": testHook,
+}: {
+    className?: string
+    checked: boolean
+    onChange: React.ChangeEventHandler<HTMLInputElement>
+    label: React.ReactNode
+    group?: string
+    disabled?: boolean
+    id?: string
+    "data-test"?: string
+}) => {
+    return (
+        <div className={cx("radio", className)}>
+            <label>
+                <input
+                    type="radio"
+                    id={id}
+                    data-test={testHook}
+                    disabled={disabled}
+                    name={group}
+                    checked={checked}
+                    onChange={onChange}
+                />
+                <div className="outer">
+                    {checked && <div className="inner" />}
+                </div>
+                <div className="label">{label}</div>
+            </label>
+        </div>
+    )
+}

package/src/components/SimpleMarkdownText.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import Markdown, {
+    type Options as MarkdownOptions,
+    type Components as MarkdownComponents,
+} from "react-markdown"
+import { remarkPlainLinks } from "./markdown/remarkPlainLinks.js"
+import { visit } from "unist-util-visit"
+import type { Plugin } from "unified"
+import type { Root } from "hast"
+
+type SimpleMarkdownTextProps = {
+    text: string
+    useParagraphs?: boolean // by default, text is wrapped in <p> tags
+}
+
+const transformDodLinks: Plugin<[], Root> = () => {
+    return function (tree) {
+        visit(tree, "element", function (node) {
+            if (node.tagName === "a")
+                if (
+                    node.properties &&
+                    typeof node.properties.href === "string" &&
+                    node.properties.href.startsWith("#dod:")
+                ) {
+                    // use a regex to split the #dod: part from the term of the href. Use a named capture group
+                    // to capture the term
+                    const match = node.properties.href.match(/#dod:(?<term>.+)/)
+                    if (match) {
+                        node.tagName = "span"
+                        node.properties.class = "dod-span"
+                        node.properties["data-id"] = match.groups?.term
+                        node.properties["aria-expanded"] = "false"
+                        node.properties["tabindex"] = 0
+                        delete node.properties.href
+                    }
+                }
+        })
+    }
+}
+
+// NOTE: We currently don't need to render markdown in React. We should be able
+// to render it only during baking/on the server and pass the HTML as string.
+// This way we could reduce the bundle size by not including a markdown library
+// and improve performance.
+export class SimpleMarkdownText extends React.Component<SimpleMarkdownTextProps> {
+    get useParagraphs(): boolean {
+        return this.props.useParagraphs ?? true
+    }
+
+    get markdownCustomComponents(): MarkdownComponents | undefined {
+        if (!this.useParagraphs) {
+            // "unwrap" the text by rendering <p /> as a react fragment
+            return {
+                p: ({ children }) => (
+                    <React.Fragment>{children}</React.Fragment>
+                ),
+            }
+        }
+
+        return undefined
+    }
+
+    override render(): React.ReactElement | null {
+        const options: Omit<MarkdownOptions, "children"> = {
+            rehypePlugins: [transformDodLinks],
+            remarkPlugins: [remarkPlainLinks],
+            components: this.markdownCustomComponents,
+        }
+        return <Markdown {...options}>{this.props.text}</Markdown>
+    }
+}
+
+// TODO: remove this component once all backported indicators
+// etc have switched from HTML to markdown for their sources
+export const HtmlOrSimpleMarkdownText = (props: {
+    text: string
+}): React.ReactElement => {
+    // check the text for closing a, li or p tags. If
+    // one is found, render using dangerouslySetInnerHTML,
+    // otherwise use SimpleMarkdownText
+    const { text } = props
+    const htmlRegex = /<\/(a|li|p)>/
+    const match = text.match(htmlRegex)
+    if (match) {
+        return <span dangerouslySetInnerHTML={{ __html: text }} />
+    } else {
+        return <SimpleMarkdownText text={text} />
+    }
+}

package/src/components/TextInput.scss

@@ -0,0 +1,17 @@
+.text-input {
+    @include body-3-medium;
+    padding: 8px 16px;
+    color: $blue-90;
+    border: 1px solid $blue-20;
+    border-radius: 0;
+    height: 40px;
+
+    &:focus {
+        outline: none;
+        border: 1px solid $blue-40;
+    }
+
+    &::placeholder {
+        color: $blue-40;
+    }
+}

package/src/components/TextInput.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { forwardRef } from "react"
+import cx from "classnames"
+
+export type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string
+}
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+    function TextInput({ className, ...props }: TextInputProps, ref) {
+        return (
+            <input
+                className={cx("text-input", className)}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)

package/src/components/TextWrap/TextWrap.tsx

@@ -0,0 +1,361 @@
+import * as _ from "lodash-es"
+import * as R from "remeda"
+import {
+    stripHTML,
+    Bounds,
+    FontFamily,
+    VerticalAlign,
+} from "../../utils/index.js"
+import { computed, makeObservable } from "mobx"
+import * as React from "react"
+import { Fragment, joinFragments, splitIntoFragments } from "./TextWrapUtils"
+import { match } from "ts-pattern"
+
+declare type FontSize = number
+
+interface TextWrapProps {
+    text: string
+    maxWidth: number
+    lineHeight?: number
+    fontSize: FontSize
+    fontWeight?: number
+    separators?: string[]
+    rawHtml?: boolean
+    verticalAlign?: VerticalAlign
+}
+
+interface WrapLine {
+    text: string
+    width: number
+    height: number
+}
+
+interface OpenHtmlTag {
+    tag: string // e.g. "a" for an <a> tag, or "span" for a <span> tag
+    fullTag: string // e.g. "<a href='https://ourworldindata.org'>"
+}
+
+interface SVGRenderProps {
+    textProps?: React.SVGProps<SVGTextElement>
+    id?: string
+}
+
+const HTML_OPENING_CLOSING_TAG_REGEX = /<(\/?)([A-Za-z]+)( [^<>]*)?>/g
+
+function startsWithNewline(text: string): boolean {
+    return /^\n/.test(text)
+}
+
+/**
+ * Shortens text to fit within a target width using binary search.
+ * Returns the longest substring that fits within the target width.
+ */
+export const shortenForTargetWidth = (
+    text: string,
+    targetWidth: number,
+    fontSettings: {
+        fontSize?: number
+        fontWeight?: number
+        fontFamily?: FontFamily
+    } = {}
+): string => {
+    // Use binary search to find the largest substring that fits within the target width
+    let low = 0
+    let high = text.length
+    while (low <= high) {
+        const mid = (high + low) >> 1
+        const bounds = Bounds.forText(text.slice(0, mid), fontSettings)
+        if (bounds.width < targetWidth) {
+            low = mid + 1
+        } else {
+            high = mid - 1
+        }
+    }
+    return text.slice(0, low - 1)
+}
+
+/** Shortens text to fit within the target width and appends an ellipsis (…) */
+export const shortenWithEllipsis = (
+    text: string,
+    targetWidth: number,
+    fontSettings: {
+        fontSize?: number
+        fontWeight?: number
+        fontFamily?: FontFamily
+    } = {}
+): string => {
+    const ellipsis = "…"
+    const ellipsisWidth = Bounds.forText(ellipsis, fontSettings).width
+    const truncatedText = shortenForTargetWidth(
+        text,
+        targetWidth - ellipsisWidth,
+        fontSettings
+    )
+    return `${truncatedText}${ellipsis}`
+}
+
+export class TextWrap {
+    props: TextWrapProps
+    constructor(props: TextWrapProps) {
+        makeObservable(this)
+        this.props = props
+    }
+
+    @computed get maxWidth(): number {
+        return this.props.maxWidth ?? Infinity
+    }
+    @computed get lineHeight(): number {
+        return this.props.lineHeight ?? 1.1
+    }
+    @computed get fontSize(): FontSize {
+        return this.props.fontSize ?? 1
+    }
+    @computed get fontWeight(): number | undefined {
+        return this.props.fontWeight
+    }
+    @computed get verticalAlign(): VerticalAlign {
+        return this.props.verticalAlign ?? VerticalAlign.bottom
+    }
+    @computed get text(): string {
+        return this.props.text
+    }
+    @computed get separators(): string[] {
+        return this.props.separators ?? [" "]
+    }
+
+    // We need to take care that HTML tags are not split across lines.
+    // Instead, we want every line to have opening and closing tags for all tags that appear.
+    // This is so we don't produce invalid HTML.
+    processHtmlTags(lines: WrapLine[]): WrapLine[] {
+        const currentlyOpenTags: OpenHtmlTag[] = []
+        for (const line of lines) {
+            // Prepend any still-open tags to the start of the line
+            const prependOpenTags = currentlyOpenTags
+                .map((t) => t.fullTag)
+                .join("")
+
+            const tagMatches = line.text.matchAll(
+                HTML_OPENING_CLOSING_TAG_REGEX
+            )
+            for (const tag of tagMatches) {
+                const isOpeningTag = tag[1] !== "/"
+                if (isOpeningTag) {
+                    currentlyOpenTags.push({
+                        tag: tag[2],
+                        fullTag: tag[0],
+                    })
+                } else {
+                    if (
+                        !currentlyOpenTags.length ||
+                        currentlyOpenTags.at(-1)?.tag !== tag[2]
+                    ) {
+                        throw new Error(
+                            "TextWrap: Opening and closing HTML tags do not match"
+                        )
+                    }
+                    currentlyOpenTags.pop()
+                }
+            }
+
+            // Append any unclosed tags to the end of the line
+            const appendCloseTags = currentlyOpenTags
+                .toReversed()
+                .map((t) => `</${t.tag}>`)
+                .join("")
+            line.text = prependOpenTags + line.text + appendCloseTags
+        }
+        return lines
+    }
+
+    @computed get lines(): WrapLine[] {
+        const { text, separators, maxWidth, fontSize, fontWeight } = this
+
+        // Prepend spaces so that the string is also split before newline characters
+        // See startsWithNewline
+        const fragments = splitIntoFragments(
+            text.replace(/\n/g, " \n"),
+            separators
+        )
+
+        const lines: WrapLine[] = []
+
+        let line: Fragment[] = []
+        let lineBounds = Bounds.empty()
+
+        fragments.forEach((fragment) => {
+            const nextLine = line.concat([fragment])
+
+            // Strip HTML if a raw string is passed
+            const text = this.props.rawHtml
+                ? stripHTML(joinFragments(nextLine))
+                : joinFragments(nextLine)
+
+            const nextBounds = Bounds.forText(text, {
+                fontSize,
+                fontWeight,
+            })
+
+            if (
+                startsWithNewline(fragment.text) ||
+                (nextBounds.width + 10 > maxWidth && line.length >= 1)
+            ) {
+                // Introduce a newline _before_ this word
+                lines.push({
+                    text: joinFragments(line),
+                    width: lineBounds.width,
+                    height: lineBounds.height,
+                })
+                // ... and start a new line with this word (with a potential leading newline stripped)
+                const wordWithoutNewline = fragment.text.replace(/^\n/, "")
+                line = [
+                    {
+                        text: wordWithoutNewline,
+                        separator: fragment.separator,
+                    },
+                ]
+                lineBounds = Bounds.forText(wordWithoutNewline, {
+                    fontSize,
+                    fontWeight,
+                })
+            } else {
+                line = nextLine
+                lineBounds = nextBounds
+            }
+        })
+
+        // Push the last line
+        if (line.length > 0)
+            lines.push({
+                text: joinFragments(line),
+                width: lineBounds.width,
+                height: lineBounds.height,
+            })
+
+        // Process HTML to ensure that each opening tag has a matching closing tag _in each line_
+        if (this.props.rawHtml) return this.processHtmlTags(lines)
+        else return lines
+    }
+
+    @computed get lineCount(): number {
+        return this.lines.length
+    }
+
+    @computed get singleLineHeight(): number {
+        return this.fontSize * this.lineHeight
+    }
+
+    @computed get height(): number {
+        if (this.lineCount === 0) return 0
+        return this.lineCount * this.singleLineHeight
+    }
+
+    @computed get width(): number {
+        return _.max(this.lines.map((l) => l.width)) ?? 0
+    }
+
+    @computed get lastLineWidth(): number {
+        return R.last(this.lines)?.width ?? 0
+    }
+
+    @computed get htmlStyle(): any {
+        const { fontSize, fontWeight, lineHeight } = this
+        return {
+            fontSize: fontSize.toFixed(2) + "px",
+            fontWeight: fontWeight,
+            lineHeight: lineHeight,
+            overflowY: "visible",
+        }
+    }
+
+    getPositionForSvgRendering(x: number, y: number): [number, number] {
+        const { lines, fontSize, lineHeight, height, verticalAlign } = this
+
+        // Magic number set through experimentation.
+        // The HTML and SVG renderers need to position lines identically.
+        // This number was tweaked until the overlaid HTML and SVG outputs
+        // overlap.
+        const HEIGHT_CORRECTION_FACTOR = 0.74
+
+        const textHeight = _.max(lines.map((line) => line.height)) ?? 0
+        const correctedTextHeight = textHeight * HEIGHT_CORRECTION_FACTOR
+        const containerHeight = lineHeight * fontSize
+        const correctedY =
+            y + (containerHeight - (containerHeight - correctedTextHeight) / 2)
+
+        const renderY = match(verticalAlign)
+            .with(VerticalAlign.top, () => correctedY - height)
+            .with(VerticalAlign.middle, () => correctedY - height / 2)
+            .with(VerticalAlign.bottom, () => correctedY)
+            .exhaustive()
+
+        return [x, renderY]
+    }
+
+    renderHTML(): React.ReactElement | null {
+        const { props, lines } = this
+
+        if (lines.length === 0) return null
+
+        return (
+            <span>
+                {lines.map((line, index) => {
+                    const content = props.rawHtml ? (
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: line.text,
+                            }}
+                        />
+                    ) : (
+                        <span>{line.text}</span>
+                    )
+                    return (
+                        <React.Fragment key={index}>
+                            {content}
+                            <br />
+                        </React.Fragment>
+                    )
+                })}
+            </span>
+        )
+    }
+
+    renderSVG(x: number, y: number, options: SVGRenderProps = {}) {
+        const { props, lines, fontSize, fontWeight } = this
+
+        if (lines.length === 0) return <></>
+
+        const [renderX, renderY] = this.getPositionForSvgRendering(x, y)
+
+        return (
+            <text
+                id={options.id}
+                fontSize={fontSize.toFixed(2)}
+                fontWeight={fontWeight}
+                x={renderX.toFixed(1)}
+                y={renderY.toFixed(1)}
+                {...options.textProps}
+            >
+                {lines.map((line, i) => {
+                    const x = renderX
+                    const y = renderY + this.singleLineHeight * i
+
+                    if (props.rawHtml)
+                        return (
+                            <tspan
+                                key={i}
+                                x={x}
+                                y={y}
+                                dangerouslySetInnerHTML={{ __html: line.text }}
+                            />
+                        )
+                    else
+                        return (
+                            <tspan key={i} x={x} y={y}>
+                                {line.text}
+                            </tspan>
+                        )
+                })}
+            </text>
+        )
+    }
+}

package/src/components/TextWrap/TextWrapUtils.ts

@@ -0,0 +1,32 @@
+import * as _ from "lodash-es"
+
+export type Fragment = {
+    text: string
+    separator: string
+}
+
+export function splitIntoFragments(
+    text: string,
+    separators = [" "]
+): Fragment[] {
+    if (_.isEmpty(text)) return []
+    const fragments: Fragment[] = []
+    let currText = ""
+    for (const char of text) {
+        if (separators.includes(char)) {
+            fragments.push({ text: currText, separator: char })
+            currText = ""
+        } else {
+            currText += char
+        }
+    }
+    fragments.push({ text: currText, separator: "" })
+    return fragments
+}
+
+export function joinFragments(fragments: Fragment[]): string {
+    return fragments
+        .map(({ text, separator }) => text + separator)
+        .join("")
+        .trim()
+}