@buildcanada/charts 0.1.0

package/src/explorer/ExplorerConstants.ts

@@ -0,0 +1,85 @@
+import { SortOrder, GrapherQueryParams } from "../types/index.js"
+import { ColumnSlug, SerializedGridProgram } from "../utils/index.js"
+
+export enum ExplorerControlType {
+    Radio = "Radio",
+    Checkbox = "Checkbox",
+    Dropdown = "Dropdown",
+}
+
+export enum ExplorerChartCreationMode {
+    FromGrapherId = "FromGrapherId",
+    FromVariableIds = "FromVariableIds",
+    FromExplorerTableColumnSlugs = "FromExplorerTableColumnSlugs",
+}
+
+export const DefaultNewExplorerSlug = "new"
+
+export const ExplorerControlTypeRegex = new RegExp(
+    " (" + Object.values(ExplorerControlType).join("|") + ")$"
+)
+
+export interface ExplorerChoice {
+    title: string
+    displayTitle?: string
+    options: ExplorerChoiceOption[]
+    value: string
+    type: ExplorerControlType
+}
+
+export interface ExplorerChoiceOption {
+    label: string
+    available: boolean
+    value: string
+    checked?: boolean
+}
+
+export type ChoiceName = string
+export type ChoiceValue = string
+
+export interface ExplorerChoiceParams {
+    [choiceName: string]: ChoiceValue
+}
+
+export interface ChoiceMap {
+    [choiceName: string]: ChoiceValue[]
+}
+
+/** Query params available in all explorers */
+export interface ExplorerStandardQueryParams extends GrapherQueryParams {
+    pickerSort?: SortOrder
+    pickerMetric?: ColumnSlug
+    hideControls?: string
+}
+
+export type ExplorerFullQueryParams = ExplorerStandardQueryParams &
+    ExplorerChoiceParams
+
+export const UNSAVED_EXPLORER_DRAFT = "UNSAVED_EXPLORER_DRAFT"
+export const UNSAVED_EXPLORER_PREVIEW_QUERYPARAMS =
+    "UNSAVED_EXPLORER_PREVIEW_QUERYPARAMS"
+
+export const EMBEDDED_EXPLORER_DELIMITER = "\n//EMBEDDED_EXPLORER\n"
+export const EXPLORER_CONSTANTS_DELIMITER = "\n//EXPLORER_CONSTANTS\n"
+export const EMBEDDED_EXPLORER_GRAPHER_CONFIGS =
+    "\n//EMBEDDED_EXPLORER_GRAPHER_CONFIGS\n"
+export const EMBEDDED_EXPLORER_PARTIAL_GRAPHER_CONFIGS =
+    "\n//EMBEDDED_PARTIAL_EXPLORER_GRAPHER_CONFIGS\n"
+
+export const EXPLORER_EMBEDDED_FIGURE_SELECTOR = "data-explorer-src"
+
+export const ExplorerContainerId = "ExplorerContainer"
+
+export const GetAllExplorersRoute = "allExplorers.json"
+
+export const GetAllExplorersTagsRoute = "allExplorersTags.json"
+
+export const EXPLORERS_ROUTE_FOLDER = "explorers" // Url path: http://owid.org/{explorers}
+export const EXPLORERS_GIT_CMS_FOLDER = "explorers" // Disk path: /home/owid/git-content/{explorers}
+export const EXPLORERS_PREVIEW_ROUTE = `${EXPLORERS_ROUTE_FOLDER}/preview`
+
+export interface ExplorersRouteResponse {
+    success: boolean
+    errorMessage?: string
+    explorers: SerializedGridProgram[]
+}

package/src/explorer/ExplorerControls.scss

@@ -0,0 +1,156 @@
+$chart-border-radius: 2px;
+
+.ExplorerControlBar {
+    $option-color: #7a899e;
+    $selected-option-color: #243d60;
+
+    display: flex;
+    background: white;
+    border-radius: $chart-border-radius;
+    box-shadow: $light-shadow;
+    padding: 0 14px;
+
+    .ExplorerControl {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+        color: $option-color;
+        margin-right: 10px;
+
+        padding-top: 8px;
+        padding-bottom: 8px;
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        .HiddenControlHeader {
+            // Don't show hidden label in desktop but preserve space for it so options are aligned.
+            visibility: hidden;
+            height: 1.6em; // this is the line height
+            height: 1lh; // only available in very modern browsers
+        }
+
+        input {
+            margin-right: 5px;
+        }
+
+        .ControlHeader {
+            font-size: 11px;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+        }
+
+        .ControlOption {
+            line-height: 1.3;
+        }
+
+        .ControlOption + .ControlOption {
+            margin-top: 8px;
+        }
+
+        .UnavailableOption {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .SelectedOption {
+            color: $selected-option-color;
+        }
+
+        &.count {
+            width: 15%;
+        }
+    }
+}
+
+.mobile-explorer {
+    .ExplorerControlBar {
+        .mobile-button {
+            margin: 12px 0;
+            display: block;
+        }
+
+        flex-direction: column;
+        position: fixed;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        border-radius: 0;
+        padding-top: 10px;
+
+        .HiddenControlHeader {
+            // Remove hidden labels on mobile entirely
+            display: none;
+        }
+
+        &.show-controls-popup {
+            bottom: 0;
+            animation-name: slideUp;
+            animation-duration: 0.5s;
+            transition-timing-function: cubic-bezier();
+            animation-iteration-count: 1;
+            box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        &.hide-controls-popup {
+            bottom: -150%;
+            animation-name: slideDown;
+            animation-duration: 0.5s;
+            transition-timing-function: cubic-bezier();
+            animation-iteration-count: 1;
+        }
+    }
+
+    .ExplorerControl {
+        max-width: unset;
+
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-right: 0;
+
+        &.count {
+            width: unset;
+        }
+
+        .intervalDropdown {
+            width: 100%;
+        }
+    }
+
+    .ExplorerControl + .ExplorerControl {
+        padding-top: 15px;
+    }
+
+    .ExplorerDropdown {
+        width: 100%;
+    }
+}
+
+.ExplorerDropdown {
+    font-size: 13px;
+    font-weight: 400;
+    min-width: 120px;
+    max-width: min(200px, 100%);
+}
+
+@keyframes slideUp {
+    0% {
+        bottom: -150%;
+    }
+
+    100% {
+        bottom: 0;
+    }
+}
+
+@keyframes slideDown {
+    0% {
+        bottom: 0%;
+    }
+
+    100% {
+        bottom: -150%;
+    }
+}

package/src/explorer/ExplorerControls.tsx

@@ -0,0 +1,210 @@
+import { Component } from "react"
+import { Dropdown } from "../grapher/index.js"
+import { bind } from "../utils/index.js"
+import {
+    ExplorerControlType,
+    ExplorerChoiceOption,
+    ExplorerChoice,
+} from "./ExplorerConstants.js"
+import { GridBoolean } from "./gridLang/GridLangConstants.js"
+import classNames from "classnames"
+import * as R from "remeda"
+
+const AVAILABLE_OPTION_CLASS = "AvailableOption"
+const UNAVAILABLE_OPTION_CLASS = "UnavailableOption"
+const SELECTED_OPTION_CLASS = "SelectedOption"
+const EXPLORER_DROPDOWN_CLASS = "ExplorerDropdown"
+const HIDDEN_CONTROL_HEADER_CLASS = "HiddenControlHeader"
+
+export class ExplorerControlBar extends Component<{
+    isMobile?: boolean
+    showControls?: boolean
+    closeControls?: () => void
+    children: React.ReactNode
+}> {
+    override render() {
+        const { isMobile, showControls, closeControls } = this.props
+        const mobileCloseButton = isMobile ? (
+            <a
+                className="btn btn-primary mobile-button"
+                onClick={closeControls}
+            >
+                Done
+            </a>
+        ) : undefined
+
+        const showMobileControls = isMobile && showControls
+        return (
+            <form
+                className={classNames(
+                    "ExplorerControlBar",
+                    showMobileControls
+                        ? `show-controls-popup`
+                        : isMobile
+                          ? `hide-controls-popup`
+                          : false
+                )}
+            >
+                {this.props.children}
+                {mobileCloseButton}
+            </form>
+        )
+    }
+}
+
+interface ExplorerDropdownOption {
+    label: string
+    value: string
+}
+
+const ExplorerDropdown = (props: {
+    options: ExplorerDropdownOption[]
+    value: ExplorerDropdownOption
+    isMobile: boolean
+    onChange: (option: string) => void
+    ariaLabel?: string
+}) => {
+    const { options, value, isMobile, onChange, ariaLabel } = props
+    const isSearchable = !isMobile && options.length > 10
+    const dropdownOptions = options.map((option) => ({
+        label: option.label,
+        value: option.value,
+    }))
+    const selectedOption =
+        dropdownOptions.find((option) => option.value === value?.value) ?? null
+    const isDisabled = options.length < 2
+
+    return (
+        <Dropdown
+            className={EXPLORER_DROPDOWN_CLASS}
+            options={dropdownOptions}
+            value={selectedOption}
+            onChange={(option) => {
+                if (option) onChange(option.value)
+            }}
+            isDisabled={isDisabled}
+            isSearchable={isSearchable}
+            placeholder="-"
+            aria-label={ariaLabel}
+        />
+    )
+}
+
+export class ExplorerControlPanel extends Component<{
+    choice: ExplorerChoice
+    explorerSlug?: string
+    onChange?: (value: string) => void
+    isMobile: boolean
+}> {
+    private renderCheckboxOrRadio(option: ExplorerChoiceOption, index: number) {
+        const { explorerSlug, choice } = this.props
+        const { title, type, value } = choice
+        const { available, label, checked } = option
+        const isCheckbox = type === ExplorerControlType.Checkbox
+        const onChangeValue = isCheckbox
+            ? checked
+                ? GridBoolean.false
+                : GridBoolean.true
+            : option.value
+        const currentValue = isCheckbox
+            ? checked
+                ? GridBoolean.true
+                : GridBoolean.false
+            : value
+
+        return (
+            <div key={index} className="ControlOption">
+                <label
+                    className={classNames(
+                        {
+                            [SELECTED_OPTION_CLASS]: checked,
+                        },
+                        available
+                            ? AVAILABLE_OPTION_CLASS
+                            : UNAVAILABLE_OPTION_CLASS
+                    )}
+                >
+                    <input
+                        onChange={() => this.customOnChange(onChangeValue)}
+                        type={isCheckbox ? "checkbox" : "radio"}
+                        disabled={!available}
+                        name={title}
+                        checked={checked}
+                        value={currentValue}
+                        data-track-note={`${
+                            explorerSlug ?? "explorer"
+                        }_click_${title.toLowerCase()}`}
+                    />{" "}
+                    {label}
+                </label>
+            </div>
+        )
+    }
+
+    private get options() {
+        return this.props.choice.options ?? []
+    }
+
+    private renderDropdown() {
+        const options = this.options
+            .filter((option) => option.available)
+            .map((option) => {
+                return {
+                    label: option.label,
+                    value: option.value,
+                }
+            })
+        const value = options.find(
+            (option) => option.value === this.props.choice.value
+        ) ?? { label: "-", value: "-" }
+
+        return (
+            <ExplorerDropdown
+                options={options}
+                value={value}
+                isMobile={this.props.isMobile}
+                onChange={this.customOnChange}
+                ariaLabel={this.props.choice.title}
+            />
+        )
+    }
+
+    @bind private customOnChange(value: string) {
+        this.props.onChange?.(value)
+    }
+
+    private renderColumn(
+        key: string,
+        hideTitle: boolean,
+        options?: ExplorerChoiceOption[]
+    ) {
+        const { title, type, displayTitle } = this.props.choice
+        return (
+            <div key={key} className="ExplorerControl">
+                <div
+                    className={classNames("ControlHeader", {
+                        [HIDDEN_CONTROL_HEADER_CLASS]: hideTitle === true,
+                    })}
+                >
+                    {displayTitle ?? title}
+                </div>
+                {type === ExplorerControlType.Dropdown
+                    ? this.renderDropdown()
+                    : (options ?? this.options).map((option, index) =>
+                          this.renderCheckboxOrRadio(option, index)
+                      )}
+            </div>
+        )
+    }
+
+    override render() {
+        const { choice } = this.props
+        const { title, type } = choice
+        const { options } = this
+        if (type === ExplorerControlType.Radio && options.length > 4)
+            return R.chunk(options, 3).map((optionsGroup, column) =>
+                this.renderColumn(`${title}${column}`, column > 0, optionsGroup)
+            )
+        return this.renderColumn(title, type === ExplorerControlType.Checkbox)
+    }
+}