@buildcanada/charts 0.1.0

package/src/grapher/controls/ShareMenu.tsx

@@ -0,0 +1,304 @@
+import { observer } from "mobx-react"
+import * as React from "react"
+import { computed, action, makeObservable } from "mobx"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import {
+    faCode,
+    faShareAlt,
+    faLink,
+    faEdit,
+    faPanorama,
+    faImage,
+} from "@fortawesome/free-solid-svg-icons"
+import {
+    canWriteToClipboard,
+    copyToClipboard,
+    isAndroid,
+    isIOS,
+} from "../../utils/index.js"
+import { GrapherModal } from "../core/GrapherConstants"
+import { isTargetOutsideElement } from "../chart/ChartUtils.js"
+import { GrapherRasterizeFn } from "../captionedChart/StaticChartRasterizer.js"
+
+export interface ShareMenuManager {
+    slug?: string
+    currentTitle?: string
+    canonicalUrl?: string
+    editUrl?: string
+    createNarrativeChartUrl?: string
+    activeModal?: GrapherModal
+    rasterize: GrapherRasterizeFn
+}
+
+interface ShareMenuProps {
+    manager: ShareMenuManager
+    onDismiss?: () => void
+    right?: number
+}
+
+interface ShareMenuState {
+    canWriteToClipboard: boolean
+    copiedLink: boolean
+    copiedPng: boolean
+}
+
+type ShareApiManager = Pick<ShareMenuManager, "canonicalUrl" | "currentTitle">
+
+const getShareData = (manager: ShareApiManager): ShareData | undefined => {
+    if (!manager.canonicalUrl) return undefined
+
+    return {
+        title: manager.currentTitle ?? "",
+        url: manager.canonicalUrl,
+    }
+}
+
+const canUseShareApi = (manager: ShareApiManager): boolean => {
+    const shareData = getShareData(manager)
+    if (!shareData) return false
+
+    return (
+        "share" in navigator &&
+        "canShare" in navigator &&
+        navigator.canShare(shareData)
+    )
+}
+
+// On mobile OSs, the system-level share API does a way better job of providing
+// relevant options to the user than our own <ShareMenu> does - for example,
+// quick access to messaging apps, the user's frequent contacts, etc.
+// So, on Android and iOS, we want to just show the system-level share dialog
+// immediately when the user clicks the share button, rather than showing our
+// own menu.
+// See https://github.com/owid/owid-grapher/issues/3446
+// -@marcelgerber, 2024-04-24
+export const shouldShareUsingShareApi = (manager: ShareApiManager): boolean =>
+    (isAndroid() || isIOS()) && canUseShareApi(manager)
+
+export const shareUsingShareApi = async (
+    manager: ShareApiManager
+): Promise<void> => {
+    if (!navigator.share) return
+
+    const shareData = getShareData(manager)
+    if (!shareData) return
+
+    try {
+        await navigator.share(shareData)
+    } catch (err) {
+        console.error("couldn't share using navigator.share", err)
+    }
+}
+
+@observer
+export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
+    private menuRef = React.createRef<HTMLDivElement>()
+
+    constructor(props: ShareMenuProps) {
+        super(props)
+
+        makeObservable(this)
+
+        this.state = {
+            canWriteToClipboard: false,
+            copiedLink: false,
+            copiedPng: false,
+        }
+    }
+
+    static shouldShow(manager: ShareMenuManager): boolean {
+        const test = new ShareMenu({ manager })
+        return test.showShareMenu
+    }
+
+    @computed get manager(): ShareMenuManager {
+        return this.props.manager
+    }
+
+    @computed get title(): string {
+        return this.manager.currentTitle ?? ""
+    }
+
+    @computed get showShareMenu(): boolean {
+        return !!this.canonicalUrl || !!this.manager.editUrl
+    }
+
+    @computed get canonicalUrl(): string | undefined {
+        return this.manager.canonicalUrl
+    }
+
+    @action.bound dismiss(): void {
+        this.props.onDismiss?.()
+    }
+
+    @action.bound onClickSomewhere(e: Event): void {
+        if (
+            this.menuRef.current &&
+            e.target &&
+            isTargetOutsideElement(e.target, this.menuRef.current)
+        ) {
+            this.dismiss()
+        }
+    }
+
+    override componentDidMount(): void {
+        document.addEventListener("click", this.onClickSomewhere)
+        void canWriteToClipboard().then((canWriteToClipboard) =>
+            this.setState({ canWriteToClipboard })
+        )
+    }
+
+    override componentWillUnmount(): void {
+        document.removeEventListener("click", this.onClickSomewhere)
+    }
+
+    @action.bound onEmbed(e: React.MouseEvent): void {
+        const { canonicalUrl, manager } = this
+        if (!canonicalUrl) return
+        manager.activeModal = GrapherModal.Embed
+        this.dismiss()
+        e.stopPropagation()
+    }
+
+    @action.bound async onNavigatorShare(): Promise<void> {
+        await shareUsingShareApi(this.manager)
+    }
+
+    @action.bound async onCopyUrl(): Promise<void> {
+        if (!this.canonicalUrl) return
+
+        try {
+            this.setState({ copiedLink: false, copiedPng: false })
+            const success = await copyToClipboard(this.canonicalUrl)
+            if (success) {
+                this.setState({ copiedLink: true, copiedPng: false })
+            } else {
+                console.error("Failed to copy link to clipboard")
+            }
+        } catch (err) {
+            console.error(
+                "couldn't copy to clipboard using navigator.clipboard",
+                err
+            )
+        }
+    }
+
+    @action.bound async onCopyPng(): Promise<void> {
+        const { manager } = this
+
+        try {
+            this.setState({ copiedLink: false, copiedPng: false })
+
+            const rasterizePromise = manager.rasterize({
+                // Don't include DoDs in the static export when copying PNG to clipboard
+                includeDetails: false,
+            })
+
+            // Safari needs the clipboard.write call to happen without a delay after the user interaction,
+            // so it's important that we pass a promise to ClipboardItem, not await the rasterization first
+            // see https://stackoverflow.com/a/68241516/10670163
+            await navigator.clipboard.write([
+                new ClipboardItem({
+                    "image/png": rasterizePromise.then(({ blob }) => blob),
+                }),
+            ])
+
+            this.setState({ copiedLink: false, copiedPng: true })
+        } catch (err) {
+            console.error("couldn't copy PNG to clipboard", err)
+        }
+    }
+
+    @computed get canUseShareApi(): boolean {
+        return canUseShareApi(this.manager)
+    }
+
+    @computed get showCopyPngButton(): boolean {
+        return this.state.canWriteToClipboard
+    }
+
+    override render(): React.ReactElement {
+        const { canUseShareApi, manager, showCopyPngButton } = this
+        const { editUrl, createNarrativeChartUrl } = manager
+
+        const width = 200
+        const right = this.props.right ?? 0
+        const style: React.CSSProperties = {
+            width,
+            right: Math.max(-width * 0.5, -right),
+        }
+
+        return (
+            <div className="ShareMenu" ref={this.menuRef} style={style}>
+                <h2>Share</h2>
+                {this.canonicalUrl && (
+                    <a
+                        className="embed"
+                        title="Embed this interactive visualization in another HTML document, e.g. a blog post or website"
+                        data-track-note="chart_share_embed"
+                        onClick={this.onEmbed}
+                    >
+                        <FontAwesomeIcon className="icon" icon={faCode} />
+                        Embed this chart
+                    </a>
+                )}
+                {canUseShareApi && (
+                    <a
+                        title="Share this visualization with an app on your device"
+                        data-track-note="chart_share_navigator"
+                        onClick={this.onNavigatorShare}
+                    >
+                        <FontAwesomeIcon className="icon" icon={faShareAlt} />
+                        Share via&hellip;
+                    </a>
+                )}
+                {showCopyPngButton && (
+                    <a
+                        title="Copy an image of this chart to the clipboard"
+                        data-track-note="chart_share_copy_png"
+                        onClick={this.onCopyPng}
+                    >
+                        <FontAwesomeIcon className="icon" icon={faImage} />
+                        {this.state.copiedPng
+                            ? "Chart copied!"
+                            : "Copy chart as image"}
+                    </a>
+                )}
+                {this.state.canWriteToClipboard && this.canonicalUrl && (
+                    <a
+                        title="Copy a link to this chart to the clipboard"
+                        data-track-note="chart_share_copylink"
+                        onClick={this.onCopyUrl}
+                    >
+                        <FontAwesomeIcon className="icon" icon={faLink} />
+                        {this.state.copiedLink
+                            ? "Link copied!"
+                            : "Copy link to chart"}
+                    </a>
+                )}
+                {editUrl && (
+                    <a
+                        title="Edit chart"
+                        href={editUrl}
+                        target="_blank"
+                        rel="noopener"
+                    >
+                        <FontAwesomeIcon className="icon" icon={faEdit} />
+                        Edit
+                    </a>
+                )}
+                {createNarrativeChartUrl && (
+                    <a
+                        title="Create a narrative chart"
+                        href={createNarrativeChartUrl}
+                        target="_blank"
+                        rel="noopener"
+                    >
+                        <FontAwesomeIcon className="icon" icon={faPanorama} />
+                        Create narrative chart
+                    </a>
+                )}
+            </div>
+        )
+    }
+}

package/src/grapher/controls/SortIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import classnames from "classnames"
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core/index"
+import {
+    faSortAlphaUpAlt,
+    faSortAlphaDown,
+    faSortAmountUpAlt,
+    faSortAmountDown,
+} from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { SortOrder } from "../../types/index.js"
+
+export function SortIcon(props: {
+    type?: "text" | "numeric"
+    isActiveIcon?: boolean
+    order: SortOrder
+}): React.ReactElement {
+    const type = props.type ?? "numeric"
+    const isActiveIcon = props.isActiveIcon ?? false
+
+    let faIcon: IconDefinition
+
+    if (type === "text")
+        faIcon =
+            props.order === SortOrder.desc ? faSortAlphaUpAlt : faSortAlphaDown
+    else
+        faIcon =
+            props.order === SortOrder.desc
+                ? faSortAmountDown
+                : faSortAmountUpAlt
+
+    return (
+        <span
+            className={classnames({ "sort-icon": true, active: isActiveIcon })}
+        >
+            <FontAwesomeIcon icon={faIcon} />
+        </span>
+    )
+}

package/src/grapher/controls/VerticalScrollContainer.tsx

@@ -0,0 +1,263 @@
+/* eslint-disable react/prop-types */
+import { useEffect, useState } from "react"
+
+import * as React from "react"
+import classnames from "classnames"
+
+type VerticalScrollContainerProps = React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    scrollingShadows?: boolean
+    scrollLock?: boolean
+    contentsId?: string
+}
+
+type ReactRef<T> =
+    | ((instance: T | null) => void)
+    | React.MutableRefObject<T | null>
+    | null
+
+function useCombinedRefs<T>(...refs: ReactRef<T>[]): React.RefObject<T | null> {
+    const targetRef = React.useRef<T>(null)
+
+    React.useEffect(() => {
+        refs.forEach((ref) => {
+            if (!ref) return
+            if (typeof ref === "function") {
+                ref(targetRef.current || null)
+            } else {
+                ref.current = targetRef.current || null
+            }
+        })
+    }, [refs])
+
+    return targetRef
+}
+
+export const VerticalScrollContainer = React.forwardRef(
+    function VerticalScrollContainer(
+        props: VerticalScrollContainerProps,
+        ref: ReactRef<HTMLDivElement>
+    ) {
+        let {
+            scrollingShadows,
+            className,
+            children,
+            contentsId,
+            style,
+            scrollLock,
+            ...rest
+        } = props
+
+        scrollingShadows ??= true
+
+        const scrollContainerRef = useCombinedRefs<HTMLDivElement>(ref)
+        const [scrollTop, scrollBottom] = useScrollBounds(
+            scrollContainerRef,
+            contentsId
+        )
+
+        useScrollLock(scrollContainerRef, {
+            enable: scrollLock,
+            doNotLockIfNoScroll: true,
+        })
+
+        return (
+            <div
+                className="VerticalScrollContainerShadows"
+                style={{
+                    position: "relative",
+                    height: "100%",
+                }}
+            >
+                {scrollingShadows && (
+                    <ScrollingShadow
+                        direction="down"
+                        size={10}
+                        opacity={getShadowOpacity(0.15, 80, scrollTop)}
+                    />
+                )}
+                <div
+                    className={classnames(className, "VerticalScrollContainer")}
+                    style={{
+                        overflowY: "auto",
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0,
+                        ...style,
+                    }}
+                    ref={scrollContainerRef}
+                    {...rest}
+                >
+                    {children}
+                </div>
+                {scrollingShadows && (
+                    <ScrollingShadow
+                        direction="up"
+                        size={10}
+                        opacity={getShadowOpacity(0.15, 80, scrollBottom)}
+                    />
+                )}
+            </div>
+        )
+    }
+)
+
+function getShadowOpacity(
+    maxOpacity: number,
+    maxDistance: number,
+    scrollDistance: number | undefined
+): number {
+    const distance =
+        scrollDistance !== undefined ? Math.min(scrollDistance, maxDistance) : 0
+    return (distance / maxDistance) * maxOpacity
+}
+
+const ScrollingShadow = (props: {
+    direction: "up" | "down"
+    size: number
+    opacity: number
+}): React.ReactElement => {
+    // "Eased" gradient
+    // https://larsenwork.com/easing-gradients/
+    const background = `linear-gradient(
+        to ${props.direction === "up" ? "bottom" : "top"},
+        hsla(0, 0%, 0%, 0) 0%,
+        hsla(0, 0%, 0%, 0.104) 25.8%,
+        hsla(0, 0%, 0%, 0.45) 60.9%,
+        hsla(0, 0%, 0%, 0.825) 88.7%,
+        hsl(0, 0%, 0%) 100%
+    )`
+    return (
+        <div
+            style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                [props.direction === "up" ? "bottom" : "top"]: 0,
+                height: `${props.size}px`,
+                background: background,
+                opacity: props.opacity,
+                pointerEvents: "none",
+                zIndex: 2,
+            }}
+        />
+    )
+}
+
+/**
+ * A throttled function that returns the available scrollTop and scrollBottom
+ * @param ref
+ * @param contentsId when this string changes, it's a signal that the contents have re-rendered and
+ * the height has likely changed.
+ */
+function useScrollBounds<ElementType extends HTMLElement>(
+    ref: React.RefObject<ElementType | null>,
+    contentsId?: string
+): [number | undefined, number | undefined] {
+    const [scrollTop, onScrollTop] = useState<number | undefined>(undefined)
+    const [scrollBottom, onScrollBottom] = useState<number | undefined>(
+        undefined
+    )
+
+    useEffect(() => {
+        const el = ref.current!
+        if (el) {
+            let pendingUpdate = false
+
+            function onScroll(): void {
+                const { scrollTop, scrollHeight, offsetHeight } = el
+                onScrollTop(scrollTop)
+                onScrollBottom(scrollHeight - offsetHeight - scrollTop)
+                pendingUpdate = false
+            }
+            onScroll() // execute for first time to setState
+
+            const onScrollThrottled = (): void => {
+                if (!pendingUpdate) {
+                    window.requestAnimationFrame(onScroll)
+                    pendingUpdate = true
+                }
+            }
+
+            el.addEventListener("scroll", onScrollThrottled)
+            return (): void => {
+                el.removeEventListener("scroll", onScrollThrottled)
+            }
+        }
+        return
+    }, [contentsId, ref])
+
+    return [scrollTop, scrollBottom]
+}
+
+interface ScrollLockOptions {
+    enable: boolean
+    doNotLockIfNoScroll: boolean
+}
+
+/**
+ * React hook to prevent scroll events propagating to parent element.
+ * @param ref the ReactRef of the scrolling container
+ */
+function useScrollLock<ElementType extends HTMLElement>(
+    ref: React.RefObject<ElementType | null>,
+    opts?: Partial<ScrollLockOptions>
+): void {
+    useEffect(() => {
+        const el = ref.current
+        const options: ScrollLockOptions = {
+            doNotLockIfNoScroll: false,
+            enable: true,
+            ...opts,
+        }
+        if (options.enable && el) {
+            function onWheel(ev: WheelEvent): void {
+                const el = ref.current
+                if (el) {
+                    const delta = ev.deltaY
+                    const up = delta < 0
+                    const { scrollTop, scrollHeight, offsetHeight } = el
+
+                    if (
+                        options.doNotLockIfNoScroll &&
+                        scrollHeight <= offsetHeight
+                    ) {
+                        return
+                    }
+
+                    function prevent(): void {
+                        ev.stopPropagation()
+                        ev.preventDefault()
+                    }
+
+                    if (
+                        !up &&
+                        delta > scrollHeight - offsetHeight - scrollTop
+                    ) {
+                        // Scrolling down, but this will take us past the bottom.
+                        el.scrollTop = scrollHeight
+                        return prevent()
+                    } else if (up && -delta > scrollTop) {
+                        // Scrolling up, but this will take us past the top.
+                        el.scrollTop = 0
+                        return prevent()
+                    }
+                }
+            }
+            el.addEventListener("wheel", onWheel as any, {
+                // We need to be in non-passive mode to be able to cancel the event
+                passive: false,
+            })
+            return (): void => {
+                if (el) {
+                    el.removeEventListener("wheel", onWheel as any)
+                }
+            }
+        }
+        return
+    }, [opts, ref])
+}