@buildcanada/charts 0.1.0

package/src/grapher/modal/EmbedModal.scss

@@ -0,0 +1,40 @@
+.embed-modal-content {
+    color: $dark-text;
+
+    // necessary for scrolling
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    > * {
+        flex-shrink: 0;
+    }
+
+    .scrollable {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        padding: 0 var(--modal-padding) var(--modal-padding);
+        width: 100%;
+    }
+
+    p {
+        margin-bottom: 16px;
+    }
+
+    .embed-modal--options {
+        display: flex;
+        gap: 32px;
+        flex-direction: column;
+    }
+
+    .embed-modal--option-title {
+        color: $gray-80;
+    }
+
+    .embed-modal--option-description {
+        color: $gray-70;
+    }
+}
+
+.embed-modal-hide-controls {
+    margin-top: 16px;
+}

package/src/grapher/modal/EmbedModal.tsx

@@ -0,0 +1,160 @@
+import { observer } from "mobx-react"
+import * as React from "react"
+import { computed, action, makeObservable } from "mobx"
+import { Bounds, Url } from "../../utils/index.js"
+import { Modal } from "./Modal"
+import {
+    Checkbox,
+    CodeSnippet,
+    OverlayHeader,
+} from "../../components/index.js"
+import { DEFAULT_GRAPHER_BOUNDS, GrapherModal } from "../core/GrapherConstants"
+
+export interface EmbedModalManager {
+    embedUrl?: string
+    embedArchivedUrl?: string
+    activeModal?: GrapherModal
+    canHideExternalControlsInEmbed: boolean
+    hideExternalControlsInEmbedUrl: boolean
+    setHideExternalControlsInEmbedUrl: (value: boolean) => void
+    frameBounds?: Bounds
+}
+
+interface EmbedModalProps {
+    manager: EmbedModalManager
+}
+
+interface EmbedOptions {
+    title: string
+    description: React.ReactElement
+    url: string
+}
+
+@observer
+export class EmbedModal extends React.Component<EmbedModalProps> {
+    constructor(props: EmbedModalProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get manager(): EmbedModalManager {
+        return this.props.manager
+    }
+
+    @computed private get frameBounds(): Bounds {
+        return this.manager.frameBounds ?? DEFAULT_GRAPHER_BOUNDS
+    }
+
+    @computed private get modalBounds(): Bounds {
+        const maxWidth = 940
+        const padWidth = Math.max(16, (this.frameBounds.width - maxWidth) / 2)
+        return this.frameBounds.padHeight(16).padWidth(padWidth)
+    }
+
+    @computed private get embedOptions(): EmbedOptions[] {
+        const { embedUrl, embedArchivedUrl } = this.manager
+
+        const opts: EmbedOptions[] = []
+
+        // We only check origins (domain + port) because:
+        // - Query params are not relevant
+        // - We use the /latest/ path prefix as an alias for the latest version
+        //   of the chart, which is not the same as the canonical URL
+        // - Archive and live versions live on a different domain
+        const areEmbedAndArchivedOriginsSame =
+            Url.fromURL(this.manager.embedUrl ?? "").origin ===
+            Url.fromURL(this.manager.embedArchivedUrl ?? "").origin
+
+        if (embedUrl && !areEmbedAndArchivedOriginsSame) {
+            opts.push({
+                title: "Chart with data updates",
+                description: (
+                    <span>
+                        To embed a version of this chart that will{" "}
+                        <strong>update</strong> when we update the data on our
+                        site, paste this code into an HTML page:
+                    </span>
+                ),
+                url: embedUrl,
+            })
+        }
+        if (embedArchivedUrl) {
+            opts.push({
+                title: "Archived chart without data updates",
+                description: (
+                    <span>
+                        To embed this specific version of the chart that will{" "}
+                        <strong>not update</strong> when we update the data on
+                        our site, paste this code into an HTML page:
+                    </span>
+                ),
+                url: embedArchivedUrl,
+            })
+        }
+        return opts
+    }
+
+    private codeSnippetForUrl(url: string): string {
+        return `<iframe src="${url}" loading="lazy" style="width: 100%; height: 600px; border: 0px none;" allow="web-share; clipboard-write"></iframe>`
+    }
+
+    @action.bound private onDismiss(): void {
+        this.manager.activeModal = undefined
+    }
+
+    override render() {
+        const { embedOptions } = this
+
+        if (!embedOptions.length) return null
+        return (
+            <Modal
+                bounds={this.modalBounds}
+                alignVertical="bottom"
+                onDismiss={this.onDismiss}
+            >
+                <div
+                    className="embed-modal-content"
+                    style={{ maxHeight: this.modalBounds.height }}
+                >
+                    <OverlayHeader title="Embed" onDismiss={this.onDismiss} />
+                    <div className="scrollable">
+                        <div className="embed-modal--options">
+                            {embedOptions.map((option) => (
+                                <div
+                                    key={option.title}
+                                    className="embed-modal--option"
+                                >
+                                    <h3 className="grapher_body-2-semibold embed-modal--option-title">
+                                        {option.title}
+                                    </h3>
+                                    <p className="grapher_label-1-medium embed-modal--option-description">
+                                        {option.description}
+                                    </p>
+                                    <CodeSnippet
+                                        code={this.codeSnippetForUrl(
+                                            option.url
+                                        )}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                        {this.manager.canHideExternalControlsInEmbed && (
+                            <Checkbox
+                                className="embed-modal-hide-controls"
+                                label="Hide controls"
+                                checked={
+                                    this.manager.hideExternalControlsInEmbedUrl
+                                }
+                                onChange={(event) =>
+                                    this.manager.setHideExternalControlsInEmbedUrl(
+                                        event.target.checked
+                                    )
+                                }
+                            />
+                        )}
+                    </div>
+                </div>
+            </Modal>
+        )
+    }
+}

package/src/grapher/modal/EntitySelectorModal.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { observer } from "mobx-react"
+import { computed, action, makeObservable } from "mobx"
+import { Bounds } from "../../utils/index.js"
+import { Modal } from "./Modal"
+import {
+    EntitySelector,
+    EntitySelectorManager,
+} from "../entitySelector/EntitySelector"
+import { DEFAULT_GRAPHER_BOUNDS } from "../core/GrapherConstants"
+
+export interface EntitySelectorModalManager extends EntitySelectorManager {
+    isEntitySelectorModalOrDrawerOpen?: boolean
+    frameBounds?: Bounds
+}
+
+@observer
+export class EntitySelectorModal extends React.Component<{
+    manager: EntitySelectorModalManager
+}> {
+    constructor(props: { manager: EntitySelectorModalManager }) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed private get manager(): EntitySelectorModalManager {
+        return this.props.manager
+    }
+
+    @computed private get frameBounds(): Bounds {
+        return this.manager.frameBounds ?? DEFAULT_GRAPHER_BOUNDS
+    }
+
+    @computed private get modalBounds(): Bounds {
+        const maxWidth = 366
+        const padWidth = Math.max(16, (this.frameBounds.width - maxWidth) / 2)
+        return this.frameBounds.padHeight(16).padWidth(padWidth)
+    }
+
+    @action.bound onDismiss(): void {
+        this.manager.isEntitySelectorModalOrDrawerOpen = false
+    }
+
+    override render(): React.ReactElement {
+        return (
+            <Modal
+                onDismiss={this.onDismiss}
+                bounds={this.modalBounds}
+                isHeightFixed={true}
+            >
+                <EntitySelector
+                    manager={this.manager}
+                    onDismiss={this.onDismiss}
+                    autoFocus={true}
+                />
+            </Modal>
+        )
+    }
+}

package/src/grapher/modal/Modal.scss

@@ -0,0 +1,31 @@
+.modal-overlay {
+    --modal-padding: 24px;
+
+    position: absolute;
+
+    // -1px to hide the frame border
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: $zindex-modal;
+
+    .modal-wrapper {
+        position: relative;
+        height: 100%;
+
+        .modal-content {
+            position: absolute;
+            border-radius: 4px;
+            background: #fff;
+            box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
+            min-height: 150px;
+        }
+    }
+}
+
+&.GrapherComponentNarrow .modal-overlay {
+    --modal-padding: 16px;
+}

package/src/grapher/modal/Modal.tsx

@@ -0,0 +1,90 @@
+import * as React from "react"
+import { Bounds, bind } from "../../utils/index.js"
+import {
+    isElementInteractive,
+    isTargetOutsideElement,
+} from "../chart/ChartUtils"
+
+export class Modal extends React.Component<{
+    bounds: Bounds
+    onDismiss: () => void
+    children?: React.ReactNode
+    isHeightFixed?: boolean // by default, the modal height is not fixed but fits to the content
+    alignVertical?: "top" | "center" | "bottom"
+}> {
+    contentRef = React.createRef<HTMLDivElement>()
+
+    private get bounds(): Bounds {
+        return this.props.bounds
+    }
+
+    private get isHeightFixed(): boolean {
+        return this.props.isHeightFixed ?? false
+    }
+
+    private get alignVertical(): "top" | "center" | "bottom" {
+        return this.props.alignVertical ?? "center"
+    }
+
+    @bind onDocumentClick(e: MouseEvent): void {
+        if (
+            this.contentRef?.current &&
+            isTargetOutsideElement(e.target!, this.contentRef.current) &&
+            // clicking on an interactive element should not dismiss the modal
+            // (this is especially important for the suggested chart review tool)
+            !isElementInteractive(e.target as HTMLElement)
+        )
+            this.props.onDismiss()
+    }
+
+    @bind onDocumentKeyDown(e: KeyboardEvent): void {
+        if (e.key === "Escape") this.props.onDismiss()
+    }
+
+    override componentDidMount(): void {
+        document.addEventListener("click", this.onDocumentClick)
+        document.addEventListener("keydown", this.onDocumentKeyDown)
+    }
+
+    override componentWillUnmount(): void {
+        document.removeEventListener("click", this.onDocumentClick)
+        document.removeEventListener("keydown", this.onDocumentKeyDown)
+    }
+
+    override render(): React.ReactElement {
+        const { bounds } = this
+
+        const contentStyle: React.CSSProperties = {
+            left: bounds.left,
+            width: bounds.width,
+            maxHeight: bounds.height,
+        }
+
+        if (this.isHeightFixed) {
+            contentStyle.height = bounds.height
+        }
+
+        if (this.alignVertical === "bottom") {
+            contentStyle.bottom = bounds.y
+        } else if (this.alignVertical === "top") {
+            contentStyle.top = bounds.y
+        } else {
+            contentStyle.top = "50%"
+            contentStyle.transform = "translateY(-50%)"
+        }
+
+        return (
+            <div className="modal-overlay">
+                <div className="modal-wrapper">
+                    <div
+                        className="modal-content"
+                        style={contentStyle}
+                        ref={this.contentRef}
+                    >
+                        {this.props.children}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

package/src/grapher/modal/ModalHeader.scss

@@ -0,0 +1,12 @@
+.modal-header {
+    --padding: var(--modal-padding, 16px);
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--padding) var(--padding) 16px;
+
+    button {
+        margin-left: 8px;
+    }
+}

package/src/grapher/modal/ModalHeader.tsx

@@ -0,0 +1,16 @@
+import { CloseButton } from "../../components/index.js"
+
+export function ModalHeader({
+    title,
+    onDismiss,
+}: {
+    title: string
+    onDismiss?: () => void
+}) {
+    return (
+        <div className="modal-header">
+            <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
+            {onDismiss && <CloseButton onClick={onDismiss} />}
+        </div>
+    )
+}

package/src/grapher/modal/SourcesDescriptions.scss

@@ -0,0 +1,87 @@
+.sources-descriptions {
+    margin-top: 24px;
+
+    .sources-description-key {
+        background-color: $gray-10;
+        margin: 24px 0;
+        padding: 24px;
+
+        &__title {
+            @include h2-semibold;
+            font-size: 20px;
+            color: $dark-text;
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        &__content,
+        &__content ul {
+            @include body-2-regular;
+            font-size: 14px;
+            font-weight: 500;
+            color: $dark-text;
+            margin: 0;
+        }
+
+        &__content ul {
+            margin-left: 1em;
+            li {
+                margin-bottom: 1em;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        &__learn-more {
+            @include body-3-medium;
+            display: inline-block;
+            margin-top: 16px;
+            text-decoration: underline;
+            text-underline-offset: 4px;
+            color: $dark-text;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            &:visited {
+                color: $dark-text;
+            }
+
+            svg {
+                font-size: 0.75em;
+                margin-left: 12px;
+                display: inline-block;
+                transform: rotate(-90deg);
+            }
+        }
+    }
+
+    .expandable-info-blocks {
+        p {
+            margin: 0;
+
+            + p {
+                margin-top: 8px;
+            }
+        }
+        ol,
+        ul {
+            padding: 0;
+            margin-left: 1em;
+
+            li {
+                margin-top: 0.5em;
+                margin-bottom: 0.5em;
+                margin-left: 1em;
+            }
+        }
+    }
+
+    a {
+        @include owid-link-60;
+        color: inherit;
+    }
+}

package/src/grapher/modal/SourcesDescriptions.tsx

@@ -0,0 +1,89 @@
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import {
+    ExpandableToggle,
+    HtmlOrSimpleMarkdownText,
+    SimpleMarkdownText,
+} from "../../components/index.js"
+
+interface SourcesDescriptionsProps {
+    descriptionShort?: string
+    descriptionKey?: string[]
+    descriptionFromProducer?: string
+    attributionShort?: string
+    additionalInfo?: string
+    hasFaqEntries: boolean
+    isEmbeddedInADataPage?: boolean // true by default
+}
+
+export const SourcesDescriptions = (props: SourcesDescriptionsProps) => {
+    const isEmbeddedInADataPage = props.isEmbeddedInADataPage ?? true
+    return (
+        <div className="sources-descriptions">
+            {props.descriptionKey && props.descriptionKey.length > 0 && (
+                <div className="sources-description-key">
+                    <h3 className="sources-description-key__title">
+                        What you should know about this data
+                    </h3>
+                    <div className="sources-description-key__content">
+                        {props.descriptionKey.length === 1 ? (
+                            <SimpleMarkdownText
+                                text={props.descriptionKey[0].trim()}
+                            />
+                        ) : (
+                            <ul>
+                                {props.descriptionKey.map((text, i) => (
+                                    <li key={i}>
+                                        <SimpleMarkdownText
+                                            text={text.trim()}
+                                            useParagraphs={false}
+                                        />{" "}
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+                    {isEmbeddedInADataPage && props.hasFaqEntries && (
+                        <a
+                            className="sources-description-key__learn-more"
+                            href="#faqs"
+                        >
+                            Learn more in the FAQs
+                            <FontAwesomeIcon icon={faArrowDown} />
+                        </a>
+                    )}
+                </div>
+            )}
+            <div className="expandable-info-blocks">
+                {props.descriptionFromProducer && (
+                    <ExpandableToggle
+                        label={
+                            props.attributionShort
+                                ? `How is this data described by its producer - ${props.attributionShort}?`
+                                : "How is this data described by its producer?"
+                        }
+                        content={
+                            <SimpleMarkdownText
+                                text={props.descriptionFromProducer.trim()}
+                            />
+                        }
+                        isExpandedDefault={
+                            !(props.descriptionShort || props.descriptionKey)
+                        }
+                        isStacked={!!props.additionalInfo}
+                    />
+                )}
+                {props.additionalInfo && (
+                    <ExpandableToggle
+                        label="Additional information about this data"
+                        content={
+                            <HtmlOrSimpleMarkdownText
+                                text={props.additionalInfo.trim()}
+                            />
+                        }
+                    />
+                )}
+            </div>
+        </div>
+    )
+}

package/src/grapher/modal/SourcesKeyDataTable.scss

@@ -0,0 +1,49 @@
+.sources-key-data-table {
+    margin-top: 16px;
+
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+
+    .key-data {
+        @include label-2-medium;
+        font-size: 13px;
+
+        &__title {
+            margin-bottom: 4px;
+            color: $light-text;
+        }
+
+        &__content {
+            color: $dark-text;
+        }
+
+        &--span {
+            grid-column: 1 / -1;
+        }
+
+        a {
+            text-underline-offset: 2px;
+        }
+    }
+
+    a {
+        color: inherit;
+        text-decoration: underline;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+}
+
+&.GrapherComponentSemiNarrow .sources-key-data-table {
+    .key-data {
+        grid-column: 1 / -1;
+    }
+
+    .key-data__title {
+        margin-right: 0;
+        margin-bottom: 4px;
+    }
+}