@buildcanada/charts 0.1.0

package/src/grapher/controls/SearchField.tsx

@@ -0,0 +1,63 @@
+import {
+    faCircleXmark,
+    faMagnifyingGlass,
+} from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import * as React from "react"
+import { forwardRef } from "react"
+import cx from "classnames"
+import { isTouchDevice } from "../../utils/index.js"
+
+export const SearchField = forwardRef<
+    HTMLInputElement,
+    {
+        className?: string
+        value: string
+        placeholder: string
+        trackNote: string
+        onChange: (value: string) => void
+        onClear: () => void
+        onKeyDown?: (event: KeyboardEvent) => void
+    }
+>(function SearchField(
+    { className, value, placeholder, trackNote, onChange, onClear, onKeyDown },
+    ref
+): React.ReactElement {
+    return (
+        <div
+            className={cx(className, "grapher-search-field", {
+                "grapher-search-field--empty": !value,
+            })}
+        >
+            <FontAwesomeIcon className="search-icon" icon={faMagnifyingGlass} />
+            <input
+                ref={ref}
+                type="search"
+                value={value}
+                onChange={(event) => onChange(event.currentTarget.value)}
+                onKeyDown={(event) => onKeyDown?.(event.nativeEvent)}
+                data-track-note={trackNote}
+                aria-label={placeholder}
+                // prevent auto-zoom on ios
+                style={{ fontSize: isTouchDevice() ? 16 : undefined }}
+            />
+            {/* We don't use the input's built-in placeholder because
+                we want the input text and placeholder text to have different
+                font sizes, which isn't well-supported across browsers.
+                The input text needs to be 16px to prevent auto-zoom on iOS,
+                but the placeholder text should have a smaller font size. */}
+            {!value && (
+                <span className="search-placeholder">{placeholder}</span>
+            )}
+            {value && (
+                <button
+                    type="button"
+                    className="clear"
+                    onClick={() => onClear()}
+                >
+                    <FontAwesomeIcon icon={faCircleXmark} />
+                </button>
+            )}
+        </div>
+    )
+})

package/src/grapher/controls/SettingsMenu.scss

@@ -0,0 +1,191 @@
+$light-stroke: $gray-20;
+$dark-stroke: #2d2d2d;
+$active-stroke: $blue-30;
+
+$light-fill: $gray-30;
+$active-fill: $blue-20;
+$hover-fill: $gray-10;
+$selected-fill: #c7ced7;
+
+$active-switch: $blue-50;
+
+$medium: 400;
+$bold: 700;
+$lato: $sans-serif-font-stack;
+
+$indent: 15px;
+$control-row-height: 32px;
+
+@at-root .GrapherSettingsPopover {
+    background: white;
+    border-radius: 4px;
+    box-shadow: 0px 4px 23px 4px #0000000f;
+    z-index: $zindex-controls-popup;
+    overflow-y: auto;
+
+    // Sticky header with title and close button
+    .GrapherSettingsPopover__Header {
+        background: white;
+        margin: 0;
+        padding: 9px 15px 3px 15px;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        .overlay-header {
+            padding: 0;
+        }
+    }
+
+    .GrapherSettingsPopover__Content {
+        //
+        // shared button coloring & behaviors
+        //
+        button {
+            display: flex;
+            align-items: center;
+            color: $light-text;
+            background: white;
+            border: 1px solid $light-stroke;
+            font: $medium 13px/16px $lato;
+            letter-spacing: 0.01em;
+            border-radius: 4px;
+            padding: 7px;
+            height: 40px;
+
+            &:hover {
+                background: $hover-fill;
+                cursor: pointer;
+
+                &:not(.active) {
+                    color: $dark-text;
+                }
+            }
+
+            &.active,
+            &:active {
+                background: $active-fill;
+                border: 1px solid $active-fill;
+            }
+
+            &.active {
+                cursor: default;
+                color: $active-text;
+            }
+        }
+
+        //
+        // each titled block of control widgets (with optional info-circle + tooltip)
+        //
+        section {
+            font: $medium 14px/1.2 $lato;
+            color: $light-text;
+            padding: 1em 0;
+            margin: 0 $indent;
+
+            .config-name {
+                font: $bold 14px/1.2 $lato;
+                color: $dark-text;
+                list-style: none;
+
+                svg {
+                    color: $gray-60;
+                    height: 13px;
+                    padding: 0 0.333em;
+                }
+            }
+
+            .labeled-switch .labeled-switch-subtitle,
+            .config-subtitle {
+                font-size: 13px;
+                margin: 5px 0;
+            }
+
+            .config-toggle {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                padding: 0.5em 0;
+            }
+
+            & + section {
+                border-top: 1px solid $light-stroke;
+            }
+        }
+
+        //
+        // resuable widgets
+        //
+        section {
+            // left/right pairs of options
+            .config-toggle {
+                label {
+                    flex-basis: 100%;
+                    color: $dark-text;
+                    margin-bottom: 0.5em;
+                }
+                button {
+                    width: calc(50% - 5px);
+                    padding: 7px 16px;
+                }
+            }
+
+            // on/off switch with label written to the right
+            .labeled-switch {
+                margin: 14px 0;
+                display: block;
+            }
+
+            // vertical list of options (for selecting faceting mode)
+            .config-list {
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                padding: 7px 0;
+                button {
+                    width: 100%;
+
+                    .faceting-icon {
+                        display: flex;
+                        flex-wrap: wrap;
+                        width: 34px;
+                        height: 24px;
+                        justify-content: space-between;
+                        margin-right: 8px;
+                        span {
+                            // the round-rects that make up the grid
+                            display: inline-block;
+                            width: 100%;
+                            height: 100%;
+                            border-radius: 2px;
+                            background: $light-stroke;
+                        }
+                    }
+
+                    &.entity span {
+                        width: 10px;
+                        height: 10px;
+                    }
+
+                    &.metric span {
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 5px;
+                    }
+
+                    &.active span {
+                        background: $blue-30;
+                    }
+
+                    &:hover:not(.active) span {
+                        background: $light-fill;
+                    }
+
+                    &:active:not(.active) span {
+                        background: $light-text;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/grapher/controls/SettingsMenu.tsx

@@ -0,0 +1,399 @@
+import * as React from "react"
+import { computed, action, observable, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import classnames from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faGear } from "@fortawesome/free-solid-svg-icons"
+import {
+    DialogTrigger,
+    Popover,
+    Dialog,
+    Heading,
+    Button,
+} from "react-aria-components"
+import {
+    EntityName,
+    GRAPHER_CHART_TYPES,
+    FacetStrategy,
+    GrapherChartType,
+} from "../../types/index.js"
+import { OverlayHeader } from "../../components/index.js"
+import { SelectionArray } from "../selection/SelectionArray"
+import { ChartDimension } from "../chart/ChartDimension"
+import { makeSelectionArray } from "../chart/ChartUtils.js"
+import { AxisConfig } from "../axis/AxisConfig"
+
+import { AxisScaleToggle } from "./settings/AxisScaleToggle"
+import { AbsRelToggle, AbsRelToggleManager } from "./settings/AbsRelToggle"
+import { ZoomToggle, ZoomToggleManager } from "./settings/ZoomToggle"
+import {
+    FacetStrategySelector,
+    FacetStrategySelectionManager,
+} from "./settings/FacetStrategySelector"
+import {
+    FacetYDomainToggle,
+    FacetYDomainToggleManager,
+} from "./settings/FacetYDomainToggle"
+import {
+    NoDataAreaToggle,
+    NoDataAreaToggleManager,
+} from "./settings/NoDataAreaToggle"
+import { GRAPHER_SETTINGS_CLASS } from "../core/GrapherConstants"
+
+const {
+    LineChart,
+    ScatterPlot,
+    StackedArea,
+    StackedDiscreteBar,
+    StackedBar,
+    Marimekko,
+    SlopeChart,
+} = GRAPHER_CHART_TYPES
+
+export interface SettingsMenuManager
+    extends AbsRelToggleManager,
+        NoDataAreaToggleManager,
+        FacetYDomainToggleManager,
+        ZoomToggleManager,
+        FacetStrategySelectionManager {
+    // ArchieML directives
+    hideFacetControl?: boolean
+    hideRelativeToggle?: boolean
+    hideEntityControls?: boolean
+
+    // chart state
+    activeChartType?: GrapherChartType
+    isRelativeMode?: boolean
+    selection?: SelectionArray | EntityName[]
+    canChangeAddOrHighlightEntities?: boolean
+    filledDimensions: ChartDimension[]
+    xColumnSlug?: string
+    xOverrideTime?: number
+    hasTimeline?: boolean
+    canToggleRelativeMode: boolean
+    isOnChartTab?: boolean
+
+    // linear/log scales
+    yAxis: AxisConfig
+    xAxis: AxisConfig
+
+    // TODO: show intermediate scatterplot points
+    compareEndPointsOnly?: boolean
+}
+
+interface SettingsMenuProps {
+    manager: SettingsMenuManager
+    popoverMaxWidth?: number
+    popoverMaxHeight?: number
+}
+
+@observer
+export class SettingsMenu extends React.Component<SettingsMenuProps> {
+    private active: boolean = false
+
+    constructor(props: SettingsMenuProps) {
+        super(props)
+
+        makeObservable<SettingsMenu, "active">(this, { active: observable.ref })
+    }
+
+    static shouldShow(manager: SettingsMenuManager): boolean {
+        const test = new SettingsMenu({ manager })
+        return test.showSettingsMenuToggle
+    }
+
+    @computed get chartType(): GrapherChartType {
+        return this.manager.activeChartType ?? GRAPHER_CHART_TYPES.LineChart
+    }
+
+    @computed get showYScaleToggle(): boolean | undefined {
+        if (this.manager.isRelativeMode) return false
+        if (
+            [
+                GRAPHER_CHART_TYPES.StackedArea,
+                GRAPHER_CHART_TYPES.StackedBar,
+                GRAPHER_CHART_TYPES.DiscreteBar,
+                GRAPHER_CHART_TYPES.StackedDiscreteBar,
+                GRAPHER_CHART_TYPES.Marimekko,
+            ].includes(this.chartType as any)
+        )
+            return false // We currently do not have these charts with log scale
+        return this.manager.yAxis.canChangeScaleType
+    }
+
+    @computed private get showXScaleToggle(): boolean | undefined {
+        if (this.manager.isRelativeMode) return false
+        return this.manager.xAxis.canChangeScaleType
+    }
+
+    @computed private get showFacetYDomainToggle(): boolean {
+        // don't offer to make the y range relative if the range is discrete
+        return (
+            this.manager.facetStrategy !== FacetStrategy.none &&
+            this.chartType !== StackedDiscreteBar
+        )
+    }
+
+    @computed get showZoomToggle(): boolean {
+        return (
+            this.chartType === ScatterPlot && this.selectionArray.hasSelection
+        )
+    }
+
+    @computed get showNoDataAreaToggle(): boolean {
+        return (
+            this.chartType === Marimekko &&
+            this.manager.xColumnSlug !== undefined
+        )
+    }
+
+    @computed private get showAbsRelToggle(): boolean {
+        const { canToggleRelativeMode, hasTimeline, xOverrideTime } =
+            this.manager
+        if (!canToggleRelativeMode) return false
+        if (this.chartType === ScatterPlot)
+            return xOverrideTime === undefined && !!hasTimeline
+        return [
+            StackedArea,
+            StackedBar,
+            StackedDiscreteBar,
+            ScatterPlot,
+            LineChart,
+            Marimekko,
+            SlopeChart,
+        ].includes(this.chartType as any)
+    }
+
+    @computed private get showFacetControl(): boolean {
+        const {
+            filledDimensions,
+            availableFacetStrategies,
+            hideFacetControl,
+            isOnChartTab,
+        } = this.manager
+
+        // if there's no choice to be made, don't display a lone button
+        if (availableFacetStrategies.length <= 1) return false
+
+        // heuristic: if the chart doesn't make sense unfaceted, then it probably
+        // also makes sense to let the user switch between entity/metric facets
+        if (!availableFacetStrategies.includes(FacetStrategy.none)) return true
+
+        const showFacetControlChartType = [
+            StackedArea,
+            StackedBar,
+            StackedDiscreteBar,
+            LineChart,
+            SlopeChart,
+        ].includes(this.chartType as any)
+
+        const hasProjection = filledDimensions.some(
+            (dim) => dim.display.isProjection
+        )
+
+        return (
+            showFacetControlChartType &&
+            !hideFacetControl &&
+            !hasProjection &&
+            !!isOnChartTab
+        )
+    }
+
+    @computed private get showSettingsMenuToggle(): boolean {
+        if (!this.manager.isOnChartTab) return false
+
+        return !!(
+            this.showYScaleToggle ||
+            this.showXScaleToggle ||
+            this.showFacetYDomainToggle ||
+            this.showZoomToggle ||
+            this.showNoDataAreaToggle ||
+            this.showFacetControl ||
+            this.showAbsRelToggle
+        )
+
+        // TODO: add a showCompareEndPointsOnlyToggle to complement compareEndPointsOnly
+    }
+
+    @action.bound private toggleVisibility(open?: boolean): void {
+        this.active = open ?? !this.active
+    }
+
+    @computed private get manager(): SettingsMenuManager {
+        return this.props.manager
+    }
+
+    @computed private get chartTypeLabel(): string {
+        return this.chartType.replace(/([A-Z])/g, " $1")
+    }
+
+    @computed private get selectionArray(): SelectionArray {
+        return makeSelectionArray(this.manager.selection)
+    }
+
+    @computed private get menuContentsChart(): React.ReactElement {
+        const {
+            manager,
+            showYScaleToggle,
+            showXScaleToggle,
+            showZoomToggle,
+            showNoDataAreaToggle,
+            showFacetControl,
+            showFacetYDomainToggle,
+            showAbsRelToggle,
+        } = this
+
+        const {
+            yAxis,
+            xAxis,
+            // compareEndPointsOnly,
+            filledDimensions,
+            isOnChartTab,
+        } = manager
+
+        const yLabel =
+                filledDimensions.find((d: ChartDimension) => d.property === "y")
+                    ?.display.name ?? "Y axis",
+            xLabel =
+                filledDimensions.find((d: ChartDimension) => d.property === "x")
+                    ?.display.name ?? "X axis",
+            omitLoneAxisLabel =
+                showYScaleToggle && !showXScaleToggle && yLabel === "Y axis"
+
+        return (
+            <>
+                <SettingsGroup
+                    title="Chart view"
+                    active={
+                        isOnChartTab &&
+                        (showAbsRelToggle ||
+                            showZoomToggle ||
+                            showNoDataAreaToggle ||
+                            showFacetControl ||
+                            showFacetYDomainToggle)
+                    }
+                >
+                    {showFacetControl && (
+                        <FacetStrategySelector manager={manager} />
+                    )}
+                    {showFacetYDomainToggle && (
+                        <FacetYDomainToggle manager={manager} />
+                    )}
+                    {showAbsRelToggle && <AbsRelToggle manager={manager} />}
+                    {showNoDataAreaToggle && (
+                        <NoDataAreaToggle manager={manager} />
+                    )}
+                    {showZoomToggle && <ZoomToggle manager={manager} />}
+                </SettingsGroup>
+                <SettingsGroup
+                    title="Axis scale"
+                    active={
+                        isOnChartTab && (showYScaleToggle || showXScaleToggle)
+                    }
+                >
+                    {showYScaleToggle && (
+                        <AxisScaleToggle
+                            axis={yAxis!}
+                            subtitle={omitLoneAxisLabel ? "" : yLabel}
+                        />
+                    )}
+                    {showXScaleToggle && (
+                        <AxisScaleToggle axis={xAxis!} subtitle={xLabel} />
+                    )}
+                    <div className="config-subtitle">
+                        A linear scale evenly spaces values, where each
+                        increment represents a consistent change. A logarithmic
+                        scale uses multiples of the starting value, with each
+                        increment representing the same percentage increase.
+                    </div>
+                </SettingsGroup>
+            </>
+        )
+    }
+
+    @computed private get menuTitle(): string {
+        const { chartTypeLabel } = this
+        return `${chartTypeLabel} settings`
+    }
+
+    private renderSettingsButtonAndPopup(): React.ReactElement {
+        const { active } = this
+
+        return (
+            <div className="settings-menu">
+                <DialogTrigger
+                    isOpen={this.active}
+                    onOpenChange={this.toggleVisibility}
+                >
+                    <Button
+                        className={classnames("menu-toggle", { active })}
+                        data-track-note="chart_settings_menu_toggle"
+                        aria-label="Chart settings"
+                    >
+                        <FontAwesomeIcon icon={faGear} />
+                        <span className="label"> Settings</span>
+                    </Button>
+                    <Popover
+                        className={GRAPHER_SETTINGS_CLASS}
+                        placement="bottom end"
+                        style={{
+                            maxWidth: this.props.popoverMaxWidth,
+                            maxHeight: this.props.popoverMaxHeight,
+                        }}
+                    >
+                        <Dialog>
+                            <Heading
+                                slot="title"
+                                className="GrapherSettingsPopover__Header"
+                            >
+                                <OverlayHeader
+                                    title={this.menuTitle}
+                                    onDismiss={() =>
+                                        this.toggleVisibility(false)
+                                    }
+                                />
+                            </Heading>
+                            <div className="GrapherSettingsPopover__Content">
+                                {this.menuContentsChart}
+                            </div>
+                        </Dialog>
+                    </Popover>
+                </DialogTrigger>
+            </div>
+        )
+    }
+
+    override render(): React.ReactElement | null {
+        const {
+            manager: { isOnChartTab },
+            showSettingsMenuToggle,
+        } = this
+
+        return isOnChartTab && showSettingsMenuToggle
+            ? this.renderSettingsButtonAndPopup()
+            : null
+    }
+}
+
+interface SettingsGroupProps {
+    title: string
+    subtitle?: string
+    active?: boolean
+    children?: React.ReactNode
+}
+
+@observer
+class SettingsGroup extends React.Component<SettingsGroupProps> {
+    override render(): React.ReactElement | null {
+        const { active, title, subtitle, children } = this.props
+        if (!active) return null
+
+        return (
+            <section>
+                <div className="config-name">{title}</div>
+                {subtitle && <div className="config-subtitle">{subtitle}</div>}
+                {children}
+            </section>
+        )
+    }
+}

package/src/grapher/controls/ShareMenu.scss

@@ -0,0 +1,58 @@
+$zindex-ControlsFooterMenu: 3;
+$zindex-ControlsFooter: 2;
+
+// hide the button that opens the embed menu on mobile
+&.GrapherComponentNarrow .ShareMenu .embed {
+    display: none;
+}
+
+.ShareMenu {
+    $hover-fill: $gray-10;
+    $active-fill: $blue-20;
+
+    position: absolute;
+    bottom: $timelineHeight + 8px;
+    text-align: left;
+    background: #fff;
+    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
+    padding: 4px 0;
+    z-index: $zindex-ControlsFooterMenu;
+    border-radius: 4px;
+
+    h2 {
+        font-family: $sans-serif-font-stack;
+        margin: 0;
+        font-size: 12px;
+        font-weight: 700;
+        color: $light-text;
+        height: 28px;
+        line-height: 28px;
+        padding: 0 16px;
+    }
+
+    a {
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        text-align: left;
+        color: $dark-text;
+        text-decoration: none;
+        white-space: normal;
+        padding: 12px 16px;
+        letter-spacing: 0.01em;
+
+        &:hover {
+            background-color: $hover-fill;
+        }
+
+        &:active {
+            background-color: $active-fill;
+            color: $active-text;
+        }
+
+        > .icon {
+            margin-right: 6px;
+            flex: 0 0 16px;
+        }
+    }
+}