@buildcanada/charts 0.1.0

package/src/grapher/controls/ContentSwitchers.tsx

@@ -0,0 +1,238 @@
+import * as React from "react"
+import { action, computed, observable, makeObservable } from "mobx"
+import cx from "classnames"
+import { observer } from "mobx-react"
+import { GrapherTabName } from "../../types/index.js"
+import { TabItem, Tabs } from "../tabs/Tabs.js"
+import { makeLabelForGrapherTab } from "../chart/ChartTabs"
+import { Menu, MenuItem, Popover } from "react-aria-components"
+import { GrapherTabIcon } from "../../components/index.js"
+
+export interface ContentSwitchersManager {
+    availableTabs?: GrapherTabName[]
+    activeTab?: GrapherTabName
+    hasMultipleChartTypes?: boolean
+    setTab: (tab: GrapherTabName) => void
+    onTabChange: (oldTab: GrapherTabName, newTab: GrapherTabName) => void
+    isMedium?: boolean
+}
+
+const OVERFLOW_MENU_KEY = "More"
+
+const MAX_VISIBLE_TABS = 4
+const MAX_VISIBLE_TABS_BEFORE_OVERFLOW = 3
+
+type TabKey = GrapherTabName | typeof OVERFLOW_MENU_KEY
+
+@observer
+export class ContentSwitchers extends React.Component<{
+    manager: ContentSwitchersManager
+}> {
+    constructor(props: { manager: ContentSwitchersManager }) {
+        super(props)
+
+        makeObservable<ContentSwitchers, "isOverflowMenuOpen">(this, {
+            isOverflowMenuOpen: observable,
+        })
+    }
+
+    static shouldShow(manager: ContentSwitchersManager): boolean {
+        const test = new ContentSwitchers({ manager })
+        return test.shouldShow
+    }
+
+    private isOverflowMenuOpen = false
+    private overflowButtonRef = React.createRef<HTMLButtonElement>()
+
+    @computed private get manager(): ContentSwitchersManager {
+        return this.props.manager
+    }
+
+    @computed private get hasMultipleChartTypes(): boolean {
+        return !!this.manager.hasMultipleChartTypes
+    }
+
+    @computed private get availableTabs(): GrapherTabName[] {
+        return this.manager.availableTabs || []
+    }
+
+    @computed private get shouldShow(): boolean {
+        return this.availableTabs.length > 1
+    }
+
+    @computed private get visibleTabs(): GrapherTabName[] {
+        const { activeTab, availableTabs } = this
+
+        // If there are four or fewer tabs, show all of them
+        if (availableTabs.length <= MAX_VISIBLE_TABS) {
+            return availableTabs
+        }
+
+        // Otherwise, only show the first 3 tabs
+        const visibleTabs = availableTabs.slice(
+            0,
+            MAX_VISIBLE_TABS_BEFORE_OVERFLOW
+        )
+
+        // If the active tab is not visible, replace the last visible tab with it
+        if (!visibleTabs.includes(activeTab)) {
+            visibleTabs[visibleTabs.length - 1] = activeTab
+        }
+
+        return visibleTabs
+    }
+
+    @computed private get hiddenTabs(): GrapherTabName[] {
+        return this.availableTabs.filter(
+            (tab) => !this.visibleTabs.includes(tab)
+        )
+    }
+
+    @computed private get activeTab(): GrapherTabName {
+        return this.manager.activeTab ?? this.availableTabs[0]
+    }
+
+    @computed private get selectedTabKey(): TabKey {
+        return this.isOverflowMenuOpen ? OVERFLOW_MENU_KEY : this.activeTab
+    }
+
+    @computed private get tabItems(): TabItem<TabKey>[] {
+        const { hasMultipleChartTypes } = this
+
+        const visibleTabItems: TabItem<TabKey>[] = this.visibleTabs.map(
+            (tab) => ({
+                key: tab,
+                element: (
+                    <TabContent
+                        key={tab}
+                        tab={tab}
+                        hasMultipleChartTypes={hasMultipleChartTypes}
+                    />
+                ),
+                buttonProps: {
+                    className: cx({ active: tab === this.activeTab }),
+                    dataTrackNote: "chart_click_" + tab,
+                    ariaLabel: makeLabelForGrapherTab(tab, {
+                        useGenericChartLabel: !hasMultipleChartTypes,
+                    }),
+                },
+            })
+        )
+
+        // Add overflow menu button if there are hidden tabs
+        if (this.hiddenTabs.length > 0) {
+            visibleTabItems.push({
+                key: OVERFLOW_MENU_KEY,
+                element: <>+&#8202;{this.hiddenTabs.length}</>,
+                buttonProps: {
+                    className: "ContentSwitchers__OverflowMenuButton",
+                    ariaLabel: "Show more chart types",
+                    ref: this.overflowButtonRef,
+                },
+            })
+        }
+
+        return visibleTabItems
+    }
+
+    @action.bound private setTab(selectedTab: GrapherTabName): void {
+        const oldTab = this.manager.activeTab
+        const newTab = selectedTab
+        this.manager.setTab(newTab)
+        this.manager.onTabChange?.(oldTab!, newTab)
+    }
+
+    @action.bound private showOverflowMenu(): void {
+        this.isOverflowMenuOpen = true
+    }
+
+    @action.bound private hideOverflowMenu(): void {
+        this.isOverflowMenuOpen = false
+    }
+
+    @action.bound private onTabChange(selectedKey: TabKey): void {
+        if (selectedKey === OVERFLOW_MENU_KEY) {
+            this.showOverflowMenu()
+        } else {
+            this.setTab(selectedKey as GrapherTabName)
+            this.hideOverflowMenu()
+        }
+    }
+
+    @action.bound private onOverflowMenuSelect(tab: GrapherTabName): void {
+        this.setTab(tab)
+        this.hideOverflowMenu()
+    }
+
+    private renderOverflowMenu(): React.ReactElement {
+        const { hasMultipleChartTypes } = this
+
+        return (
+            <Popover
+                className="ContentSwitchers__OverflowMenu"
+                placement="bottom"
+                triggerRef={this.overflowButtonRef}
+                isOpen={this.isOverflowMenuOpen}
+                onOpenChange={(isOpen) => {
+                    if (!isOpen) this.hideOverflowMenu()
+                    else this.showOverflowMenu()
+                }}
+            >
+                <Menu
+                    onAction={(key) =>
+                        this.onOverflowMenuSelect(key as GrapherTabName)
+                    }
+                >
+                    {this.hiddenTabs.map((tab) => (
+                        <MenuItem
+                            key={tab}
+                            id={tab}
+                            className="ContentSwitchers__OverflowMenuItem"
+                        >
+                            <TabContent
+                                tab={tab}
+                                hasMultipleChartTypes={hasMultipleChartTypes}
+                            />
+                        </MenuItem>
+                    ))}
+                </Menu>
+            </Popover>
+        )
+    }
+
+    override render(): React.ReactElement | null {
+        if (!this.shouldShow) return null
+
+        return (
+            <div className="ContentSwitchers__Container">
+                <Tabs
+                    variant="slim"
+                    className="ContentSwitchers"
+                    items={this.tabItems}
+                    selectedKey={this.selectedTabKey}
+                    onChange={this.onTabChange}
+                />
+                {this.renderOverflowMenu()}
+            </div>
+        )
+    }
+}
+
+function TabContent({
+    tab,
+    hasMultipleChartTypes,
+}: {
+    tab: GrapherTabName
+    hasMultipleChartTypes?: boolean
+}): React.ReactElement {
+    return (
+        <span>
+            <GrapherTabIcon tab={tab} />
+            <span className="label">
+                {makeLabelForGrapherTab(tab, {
+                    useGenericChartLabel: !hasMultipleChartTypes,
+                })}
+            </span>
+        </span>
+    )
+}

package/src/grapher/controls/Controls.scss

@@ -0,0 +1,158 @@
+$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;
+
+// Buttons in the main controls row of the grapher view
+nav.controlsRow .controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+
+    button.menu-toggle {
+        font: $medium 13px/16px $lato;
+        letter-spacing: 0.01em;
+        display: flex;
+        align-items: center;
+        border: 1px solid $light-stroke;
+        border-radius: 4px;
+        padding: 7px;
+        color: $dark-text;
+        white-space: nowrap;
+
+        &:hover {
+            background: $hover-fill;
+            cursor: pointer;
+        }
+
+        &.active,
+        &:active {
+            color: $active-text;
+            background: $active-fill;
+            border: 1px solid $active-fill;
+        }
+
+        svg {
+            height: 12px;
+            margin-right: 5px;
+            vertical-align: bottom;
+        }
+
+        label:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+//
+// Make buttons narrower by omitting their text labels as the viewport gets narrower
+// use the .GrapherComponentSemiNarrow if necessary but allow container queries to
+// collapse labels in two steps on browsers that support them
+//
+// TODO: the measurement and label-hiding logic will have to move to js anyway once the
+//       number of chart buttons becomes variable and the settings button can be replaced
+//       by a single control widget ‘promoted’ from within the drawer
+//
+@at-root {
+    // collapse both the settings and entity selector labels down at the semi-narrow breakpoint
+    .GrapherComponentSemiNarrow {
+        nav.controlsRow .settings-menu button.menu-toggle {
+            min-height: $control-row-height;
+            svg {
+                margin: 0 2px;
+            }
+            .label {
+                display: none;
+            }
+        }
+        nav.controlsRow .entity-selection-menu button.menu-toggle {
+            label span {
+                display: none;
+            }
+        }
+    }
+}
+
+@container grapher (max-width:575px) {
+    // collapse the Settings toggle down to just an icon on small screens
+    nav.controlsRow .settings-menu button.menu-toggle {
+        min-height: $control-row-height;
+        svg {
+            margin: 0 2px;
+        }
+        .label {
+            display: none;
+        }
+    }
+
+    // undo the .GrapherComponentSemiNarrow hiding until next container query
+    nav.controlsRow .entity-selection-menu button.menu-toggle {
+        label span {
+            display: inline;
+        }
+    }
+}
+
+@container grapher (max-width:675px) {
+    // hide the entity name in the Edit/Select/Switch button
+    nav.controlsRow .chart-controls .entity-selection-menu button.menu-toggle {
+        label span {
+            display: none;
+        }
+    }
+}
+
+@container grapher (max-width:725px) {
+    // hide the entity name in the Edit/Select/Switch button
+    nav.controlsRow .map-controls .entity-selection-menu button.menu-toggle {
+        label span {
+            display: none;
+        }
+    }
+}
+
+@container grapher (max-width:500px) {
+    // hide labels on smaller screens
+    .ContentSwitchers .Tabs__Tab .label {
+        display: none;
+    }
+}
+
+// reduce the horizontal padding of a content switcher tab based on grapher's size
+@container grapher (max-width:725px) {
+    .ContentSwitchers .Tabs__Tab {
+        --tab-padding: 12px;
+    }
+}
+@container grapher (max-width:335px) {
+    .ContentSwitchers .Tabs__Tab {
+        --tab-padding: 8px;
+    }
+}
+
+//
+// correct for style bleeds in admin
+//
+@at-root {
+    .AdminApp {
+        nav.controlsRow .controls button.menu-toggle label {
+            margin: 0;
+        }
+        .GrapherSettingsPopover section {
+            background: none;
+        }
+    }
+}

package/src/grapher/controls/DataTableFilterDropdown.scss

@@ -0,0 +1,7 @@
+.data-table-filter-dropdown {
+    width: 194px;
+}
+
+.data-table-filter-dropdown-menu {
+    min-width: 170px;
+}

package/src/grapher/controls/DataTableFilterDropdown.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import { computed, action, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { Dropdown } from "./Dropdown"
+import { EntityName } from "../../utils/index.js"
+import { DataTableConfig } from "../dataTable/DataTableConstants"
+import { OwidTable } from "../../core-table/index.js"
+import { SelectionArray } from "../selection/SelectionArray"
+import { makeSelectionArray } from "../chart/ChartUtils"
+import {
+    EntityRegionTypeGroup,
+    entityRegionTypeLabels,
+} from "../core/EntitiesByRegionType"
+
+export interface DataTableFilterDropdownManager {
+    dataTableConfig: DataTableConfig
+    tableForDisplay: OwidTable
+    isOnTableTab?: boolean
+    dataTableSelection?: SelectionArray | EntityName[]
+    canChangeAddOrHighlightEntities?: boolean
+    shouldShowSelectionOnlyInDataTable?: boolean
+    entityRegionTypeGroups?: EntityRegionTypeGroup[]
+    isSemiNarrow?: boolean
+}
+
+interface DropdownOption {
+    label: string
+    value: DataTableConfig["filter"]
+    count: number
+    trackNote: "data_table_filter_by"
+}
+
+@observer
+export class DataTableFilterDropdown extends React.Component<{
+    manager: DataTableFilterDropdownManager
+}> {
+    constructor(props: { manager: DataTableFilterDropdownManager }) {
+        super(props)
+        makeObservable(this)
+    }
+
+    static shouldShow(manager: DataTableFilterDropdownManager): boolean {
+        const menu = new DataTableFilterDropdown({ manager })
+        return menu.shouldShow
+    }
+
+    @computed private get manager(): DataTableFilterDropdownManager {
+        return this.props.manager
+    }
+
+    @computed private get selectionArray(): SelectionArray {
+        return makeSelectionArray(this.manager.dataTableSelection)
+    }
+
+    @computed private get shouldShow(): boolean {
+        return (
+            !!this.manager.isOnTableTab &&
+            this.options.length > 1 &&
+            this.options[0].count !== this.options[1].count &&
+            !this.manager.isSemiNarrow
+        )
+    }
+
+    @computed private get availableEntityNameSet(): Set<EntityName> {
+        return this.manager.tableForDisplay.availableEntityNameSet
+    }
+
+    @action.bound private onChange(selected: DropdownOption | null): void {
+        if (selected?.value) {
+            this.manager.dataTableConfig.filter = selected.value
+            this.manager.dataTableConfig.search = ""
+        }
+    }
+
+    @computed
+    private get shouldShowSelectionOption(): boolean {
+        return (
+            !this.manager.shouldShowSelectionOnlyInDataTable &&
+            this.selectionArray.hasSelection &&
+            !!this.manager.canChangeAddOrHighlightEntities
+        )
+    }
+
+    @computed private get options(): DropdownOption[] {
+        const options: DropdownOption[] = [
+            {
+                value: "all",
+                label: "All",
+                count: this.availableEntityNameSet.size,
+                trackNote: "data_table_filter_by",
+            },
+        ]
+
+        if (this.shouldShowSelectionOption) {
+            options.push({
+                value: "selection",
+                label: "Selection",
+                count: this.selectionArray.numSelectedEntities,
+                trackNote: "data_table_filter_by",
+            })
+        }
+
+        if (this.manager.entityRegionTypeGroups) {
+            options.push(
+                ...this.manager.entityRegionTypeGroups
+                    .map(
+                        ({ regionType, entityNames }) =>
+                            ({
+                                value: regionType,
+                                label: entityRegionTypeLabels[regionType],
+                                count: entityNames.filter((entityName) =>
+                                    this.availableEntityNameSet.has(entityName)
+                                ).length,
+                                trackNote: "data_table_filter_by",
+                            }) satisfies DropdownOption
+                    )
+                    .filter(({ count }) => count > 0)
+            )
+        }
+
+        return options
+    }
+
+    @computed private get value(): DropdownOption | null {
+        const { filter } = this.props.manager.dataTableConfig
+        return (
+            this.options.find((option) => filter === option.value) ??
+            this.options[0]
+        )
+    }
+
+    override render(): React.ReactElement | null {
+        if (!this.shouldShow) return null
+
+        return (
+            <Dropdown<DropdownOption>
+                className="data-table-filter-dropdown"
+                menuClassName="data-table-filter-dropdown-menu"
+                options={this.options}
+                onChange={this.onChange}
+                value={this.value}
+                renderTriggerValue={renderFilterTriggerValue}
+                renderMenuOption={renderFilterMenuOption}
+                aria-label="Filter by"
+            />
+        )
+    }
+}
+
+function renderFilterTriggerValue(
+    option: DropdownOption | null
+): React.ReactNode | undefined {
+    if (!option) return undefined
+    return (
+        <>
+            <span className="label">Filter by: </span>
+            {option.label} <span className="detail">({option.count})</span>
+        </>
+    )
+}
+
+function renderFilterMenuOption(option: DropdownOption): React.ReactNode {
+    return (
+        <>
+            {option.label} <span className="detail">({option.count})</span>
+        </>
+    )
+}

package/src/grapher/controls/DataTableSearchField.scss

@@ -0,0 +1,3 @@
+.data-table-search-field {
+    flex: 0 1 208px;
+}

package/src/grapher/controls/DataTableSearchField.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import a from "indefinite"
+import { DataTableConfig } from "../dataTable/DataTableConstants"
+import { SearchField } from "./SearchField"
+import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants"
+import { isAggregateSource } from "../core/EntitiesByRegionType"
+import { match } from "ts-pattern"
+
+export interface DataTableSearchFieldManager {
+    dataTableConfig: DataTableConfig
+    isOnTableTab?: boolean
+    entityType?: string
+}
+
+@observer
+export class DataTableSearchField extends React.Component<{
+    manager: DataTableSearchFieldManager
+}> {
+    constructor(props: { manager: DataTableSearchFieldManager }) {
+        super(props)
+        makeObservable(this)
+    }
+
+    static shouldShow(manager: DataTableSearchFieldManager): boolean {
+        const menu = new DataTableSearchField({ manager })
+        return menu.shouldShow
+    }
+
+    @computed private get manager(): DataTableSearchFieldManager {
+        return this.props.manager
+    }
+
+    @computed private get config(): DataTableConfig {
+        return this.manager.dataTableConfig
+    }
+
+    @computed private get shouldShow(): boolean {
+        return !!this.manager.isOnTableTab
+    }
+
+    @computed private get entityType(): string {
+        return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE
+    }
+
+    @computed private get placeholderEntityType(): string {
+        if (isAggregateSource(this.config.filter)) return "region"
+
+        return match(this.config.filter)
+            .with("all", () => this.entityType)
+            .with("selection", () => this.entityType)
+            .with("countries", () => "country")
+            .with("continents", () => "continent")
+            .with("incomeGroups", () => "income group")
+            .with("historicalCountries", () => "country or region")
+            .exhaustive()
+    }
+
+    override render(): React.ReactElement | null {
+        if (!this.shouldShow) return null
+
+        return (
+            <SearchField
+                className="data-table-search-field"
+                value={this.manager.dataTableConfig.search}
+                onChange={(value) =>
+                    (this.manager.dataTableConfig.search = value)
+                }
+                onClear={() => (this.manager.dataTableConfig.search = "")}
+                trackNote="data_table_search"
+                placeholder={`Search for ${a(this.placeholderEntityType)}`}
+            />
+        )
+    }
+}