@buildcanada/charts 0.1.0

package/src/grapher/controls/controlsRow/ControlsRow.tsx

@@ -0,0 +1,168 @@
+import { Component } from "react"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+
+import { Bounds } from "../../../utils/index.js"
+
+import { ContentSwitchers, ContentSwitchersManager } from "../ContentSwitchers"
+import {
+    EntitySelectionToggle,
+    EntitySelectionManager,
+} from "../EntitySelectionToggle"
+import {
+    MapRegionDropdown,
+    MapRegionDropdownManager,
+} from "../MapRegionDropdown"
+import { SettingsMenu, SettingsMenuManager } from "../SettingsMenu"
+import { GRAPHER_FRAME_PADDING_HORIZONTAL } from "../../core/GrapherConstants"
+import { MapResetButton, MapResetButtonManager } from "../MapResetButton"
+import {
+    DataTableFilterDropdown,
+    DataTableFilterDropdownManager,
+} from "../DataTableFilterDropdown"
+import {
+    DataTableSearchField,
+    DataTableSearchFieldManager,
+} from "../DataTableSearchField"
+import {
+    MapZoomToSelectionButton,
+    MapZoomToSelectionButtonManager,
+} from "../MapZoomToSelectionButton"
+import { MapZoomDropdown, MapZoomDropdownManager } from "../MapZoomDropdown"
+
+export interface ControlsRowManager
+    extends ContentSwitchersManager,
+        EntitySelectionManager,
+        SettingsMenuManager,
+        MapRegionDropdownManager,
+        MapResetButtonManager,
+        MapZoomToSelectionButtonManager,
+        MapZoomDropdownManager,
+        DataTableFilterDropdownManager,
+        DataTableSearchFieldManager {
+    sidePanelBounds?: Bounds
+    isSmall?: boolean
+}
+
+interface ControlsRowProps {
+    manager: ControlsRowManager
+    maxWidth?: number
+    popoverMaxWidth?: number
+    popoverMaxHeight?: number
+}
+
+@observer
+export class ControlsRow extends Component<ControlsRowProps> {
+    private framePaddingHorizontal = GRAPHER_FRAME_PADDING_HORIZONTAL
+
+    constructor(props: ControlsRowProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    static shouldShow(manager: ControlsRowManager): boolean {
+        const test = new ControlsRow({ manager })
+        return test.showControlsRow
+    }
+
+    @computed private get manager(): ControlsRowManager {
+        return this.props.manager
+    }
+
+    @computed private get showControlsRow(): boolean {
+        return (
+            ContentSwitchers.shouldShow(this.manager) ||
+            SettingsMenu.shouldShow(this.manager) ||
+            EntitySelectionToggle.shouldShow(this.manager) ||
+            // Map controls
+            MapRegionDropdown.shouldShow(this.manager) ||
+            MapZoomDropdown.shouldShow(this.manager) ||
+            MapZoomToSelectionButton.shouldShow(this.manager) ||
+            MapResetButton.shouldShow(this.manager, "resetZoom") ||
+            MapResetButton.shouldShow(this.manager, "resetView") ||
+            // Table controls
+            DataTableFilterDropdown.shouldShow(this.manager) ||
+            DataTableSearchField.shouldShow(this.manager)
+        )
+    }
+
+    private renderChartControls(): React.ReactElement {
+        return (
+            <div className="controls chart-controls">
+                <EntitySelectionToggle manager={this.manager} />
+                <SettingsMenu
+                    manager={this.manager}
+                    popoverMaxWidth={this.props.popoverMaxWidth}
+                    popoverMaxHeight={this.props.popoverMaxHeight}
+                />
+            </div>
+        )
+    }
+
+    private renderTableControls(): React.ReactElement {
+        return (
+            <div className="controls table-controls">
+                <DataTableFilterDropdown manager={this.manager} />
+                <DataTableSearchField manager={this.manager} />
+            </div>
+        )
+    }
+
+    private renderMapControls(): React.ReactElement {
+        return (
+            <div className="controls map-controls">
+                {this.manager.isMapSelectionEnabled
+                    ? this.renderMapControlsForDesktop()
+                    : this.renderMapControlsForMobile()}
+            </div>
+        )
+    }
+
+    private renderMapControlsForDesktop(): React.ReactElement {
+        return (
+            <>
+                <MapResetButton manager={this.manager} action="resetZoom" />
+                <MapZoomToSelectionButton manager={this.manager} />
+                <MapResetButton manager={this.manager} action="resetView" />
+                <MapRegionDropdown manager={this.manager} />
+                <EntitySelectionToggle manager={this.manager} />
+            </>
+        )
+    }
+
+    private renderMapControlsForMobile(): React.ReactElement {
+        const shouldShowResetZoomButton = MapResetButton.shouldShow(
+            this.manager,
+            "resetZoom"
+        )
+
+        if (shouldShowResetZoomButton)
+            return <MapResetButton manager={this.manager} action="resetZoom" />
+
+        return this.manager.isFaceted ? (
+            <MapRegionDropdown manager={this.manager} />
+        ) : (
+            <MapZoomDropdown manager={this.manager} />
+        )
+    }
+
+    override render(): React.ReactElement {
+        return (
+            <nav
+                className="controlsRow"
+                style={{ padding: `0 ${this.framePaddingHorizontal}px` }}
+            >
+                <div>
+                    <ContentSwitchers manager={this.manager} />
+                </div>
+                <div className="controls">
+                    {this.manager.isOnMapTab
+                        ? this.renderMapControls()
+                        : this.manager.isOnTableTab
+                          ? this.renderTableControls()
+                          : this.renderChartControls()}
+                </div>
+            </nav>
+        )
+    }
+}

package/src/grapher/controls/dropdown-icons.scss

@@ -0,0 +1,4 @@
+$menu-caret-up: "data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOCA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC40NjA5MzggMy43MzQzOEwzLjQzNzUgMC43MzQzNzVDMy42MDE1NiAwLjU5Mzc1IDMuNzg5MDYgMC41IDQgMC41QzQuMTg3NSAwLjUgNC4zNzUgMC41OTM3NSA0LjUxNTYyIDAuNzM0Mzc1TDcuNDkyMTkgMy43MzQzOEM3LjcwMzEyIDMuOTQ1MzEgNy43NzM0NCA0LjI3MzQ0IDcuNjU2MjUgNC41NTQ2OUM3LjUzOTA2IDQuODM1OTQgNy4yODEyNSA1IDYuOTc2NTYgNUgxQzAuNjk1MzEyIDUgMC40MTQwNjIgNC44MzU5NCAwLjI5Njg3NSA0LjU1NDY5QzAuMTc5Njg4IDQuMjczNDQgMC4yNSAzLjk0NTMxIDAuNDYwOTM4IDMuNzM0MzhaIiBmaWxsPSIjNUI1QjVCIi8+Cjwvc3ZnPg==";
+$menu-caret-down: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOCA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNy41MTU2MiAxLjI4OTA2TDQuNTM5MDYgNC4yODkwNkM0LjM3NSA0LjQyOTY5IDQuMTg3NSA0LjUgNCA0LjVDMy43ODkwNiA0LjUgMy42MDE1NiA0LjQyOTY5IDMuNDYwOTQgNC4yODkwNkwwLjQ4NDM3NSAxLjI4OTA2QzAuMjUgMS4wNzgxMiAwLjE3OTY4OCAwLjc1IDAuMjk2ODc1IDAuNDY4NzVDMC40MTQwNjIgMC4xODc1IDAuNjk1MzEyIDAgMSAwSDYuOTc2NTZDNy4yODEyNSAwIDcuNTM5MDYgMC4xODc1IDcuNjU2MjUgMC40Njg3NUM3Ljc3MzQ0IDAuNzUgNy43MjY1NiAxLjA3ODEyIDcuNTE1NjIgMS4yODkwNloiIGZpbGw9IiM1QjVCNUIiLz4KPC9zdmc+Cg==";
+$clear: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aAogICAgZD0iTTI1NiA1MTJBMjU2IDI1NiAwIDEgMCAyNTYgMGEyNTYgMjU2IDAgMSAwIDAgNTEyek0xNzUgMTc1YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwbDQ3IDQ3IDQ3LTQ3YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwczkuNCAyNC42IDAgMzMuOWwtNDcgNDcgNDcgNDdjOS40IDkuNCA5LjQgMjQuNiAwIDMzLjlzLTI0LjYgOS40LTMzLjkgMGwtNDctNDctNDcgNDdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwcy05LjQtMjQuNiAwLTMzLjlsNDctNDctNDctNDdjLTkuNC05LjQtOS40LTI0LjYgMC0zMy45eiIKICAgIGZpbGw9IiM4NTg1ODUiCiAgLz4KPC9zdmc+Cg==";
+$clear-hover: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aAogICAgZD0iTTI1NiA1MTJBMjU2IDI1NiAwIDEgMCAyNTYgMGEyNTYgMjU2IDAgMSAwIDAgNTEyek0xNzUgMTc1YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwbDQ3IDQ3IDQ3LTQ3YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwczkuNCAyNC42IDAgMzMuOWwtNDcgNDcgNDcgNDdjOS40IDkuNCA5LjQgMjQuNiAwIDMzLjlzLTI0LjYgOS40LTMzLjkgMGwtNDctNDctNDcgNDdjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwcy05LjQtMjQuNiAwLTMzLjlsNDctNDctNDctNDdjLTkuNC05LjQtOS40LTI0LjYgMC0zMy45eiIKICAgIGZpbGw9IiM1YjViNWIiCiAgLz4KPC9zdmc+Cg==";

package/src/grapher/controls/entityPicker/EntityPicker.scss

@@ -0,0 +1,255 @@
+$chart-border-radius: 2px;
+// Match chart styles
+$chart-box-shadow:
+    rgba(0, 0, 0, 0.1) 0px 0px 2px 0px,
+    rgba(0, 0, 0, 0.25) 0px 2px 2px 0px;
+$zindex-dropdown: 100;
+
+.EntityListContainer {
+    flex: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.EntityList {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-shadow: $chart-box-shadow;
+    border-radius: $chart-border-radius;
+    background-color: #fff;
+    margin-top: 10px;
+
+    &.isDropdown {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: $zindex-dropdown;
+    }
+}
+
+.ClearSelectionButton {
+    color: $controls-color;
+    font-size: 13px;
+    line-height: 16px;
+    text-align: center;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.EntitySearchResults {
+    overflow-y: scroll;
+}
+
+.EntityPicker {
+    display: flex;
+    flex-direction: column;
+}
+
+.MetricSettings {
+    display: flex;
+    align-items: center;
+    margin: 10px 0 0;
+
+    .mainLabel {
+        flex: 0;
+        white-space: nowrap;
+        font-size: 14px;
+        color: $blue-90;
+        margin-right: 8px;
+    }
+
+    .metricDropdown {
+        flex: 1;
+    }
+
+    .sort {
+        margin-left: 8px;
+        flex: 0;
+        cursor: pointer;
+    }
+}
+
+.EntityPickerOption {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    line-height: 1.3;
+    border-bottom: 1px solid $blue-20;
+    font-size: 15px;
+    cursor: pointer;
+    color: $text-color;
+    background-color: $blue-10;
+    user-select: none;
+    position: relative;
+
+    &.selected {
+        background-color: #fff;
+        font-weight: bold;
+        z-index: 1;
+    }
+
+    &.most-recently-selected {
+        z-index: 2;
+    }
+
+    &.focused {
+        background-color: $gray-10;
+    }
+
+    .input-container {
+        flex: 0;
+        margin-right: 6px;
+        align-items: center;
+
+        input {
+            pointer-events: none;
+        }
+    }
+
+    .info-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .labels-container {
+        flex: 1;
+        display: flex;
+        align-items: center;
+    }
+
+    .name {
+        flex: 1;
+    }
+
+    mark {
+        font-weight: 700;
+        background-color: #f9eec6;
+        border-radius: 2px;
+    }
+
+    .color-marker-container {
+        position: absolute;
+        top: 10px;
+        left: 0;
+        bottom: 11px;
+        display: flex;
+        align-items: center;
+    }
+
+    .color-marker {
+        width: 5px;
+        height: 100%;
+    }
+
+    .metric {
+        flex: 0;
+        font-size: 14px;
+        font-weight: 400;
+        color: $blue-50;
+        text-align: right;
+    }
+
+    .plot {
+        position: absolute;
+        left: 0;
+        right: 5px;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    .bar {
+        height: 100%;
+        background-color: rgba($oxford-blue, 0.03);
+        border-right: 1px solid rgba($oxford-blue, 0.05);
+    }
+
+    &.selected .bar {
+        background-color: rgba($oxford-blue, 0.05);
+        border-right: 1px solid rgba($oxford-blue, 0.07);
+    }
+}
+
+.MissingData {
+    opacity: 0.4;
+}
+
+.EntityPickerSearchInput {
+    flex: 0;
+    position: relative;
+    color: $blue-90;
+
+    .input-field {
+        width: 100%;
+        border: none;
+        background-color: #fff;
+        border-radius: 3px;
+        border: none;
+        box-shadow: $light-shadow;
+        padding: 11px 10px;
+        padding-left: 2em;
+        outline: none;
+        color: inherit;
+        font-weight: 700;
+        position: relative;
+        z-index: 1;
+
+        // Mobile Safari ignores box-shadow if we don't reset the appearance.
+        -webkit-appearance: none;
+
+        &::placeholder {
+            color: inherit;
+            transition: opacity 150ms ease;
+        }
+        &:focus::placeholder {
+            opacity: 0.25;
+        }
+
+        &.with-done-button {
+            padding-right: 4em;
+        }
+    }
+
+    .search-icon {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 10px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        pointer-events: none;
+        z-index: 2;
+    }
+
+    .done {
+        position: absolute;
+        top: 0;
+        right: 6px;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        z-index: 2;
+
+        button {
+            background-color: $oxford-blue;
+            padding: 8px 12px;
+            font-size: 14px;
+            color: white;
+            border-radius: 3px;
+            border: none;
+        }
+    }
+}
+
+.mobile-explorer {
+    .EntityList {
+        min-height: 150px;
+        height: 35vh;
+    }
+}