@buildcanada/charts 0.1.0

package/src/grapher/stackedCharts/StackedUtils.ts

@@ -0,0 +1,142 @@
+import * as R from "remeda"
+import * as _ from "lodash-es"
+import {
+    sortNumeric,
+    isArrayOfNumbers,
+    findGreatestCommonDivisorOfArray,
+    rollingMap,
+    omitUndefinedValues,
+    AxisConfigInterface,
+} from "../../utils/index.js"
+import { StackedPointPositionType, StackedSeries } from "./StackedConstants"
+import { StackedBarChartState } from "./StackedBarChartState.js"
+
+// This method shift up the Y Values of a Series with Points in place.
+export const stackSeries = <PositionType extends StackedPointPositionType>(
+    seriesArr: readonly StackedSeries<PositionType>[]
+): readonly StackedSeries<PositionType>[] => {
+    seriesArr.forEach((series, seriesIndex) => {
+        if (!seriesIndex) return // The first series does not need to be shifted
+        series.points.forEach((point, pointIndex) => {
+            const pointBelowThisOne =
+                seriesArr[seriesIndex - 1].points[pointIndex]
+            point.valueOffset =
+                pointBelowThisOne.value + pointBelowThisOne.valueOffset
+        })
+    })
+    return seriesArr
+}
+
+// This method shifts up positive y values and shifts down negative y values of a Series with Points in place.
+export const stackSeriesInBothDirections = <
+    PositionType extends StackedPointPositionType,
+>(
+    seriesArr: readonly StackedSeries<PositionType>[]
+): readonly StackedSeries<PositionType>[] => {
+    seriesArr.forEach((series, seriesIndex) => {
+        if (!seriesIndex) return // The first series does not need to be shifted
+        series.points.forEach((point, pointIndex) => {
+            const pointsBelowThisOne = seriesArr
+                .slice(0, seriesIndex)
+                .map((s) => s.points[pointIndex])
+            const pointBelowThisOne =
+                point.value < 0
+                    ? pointsBelowThisOne.findLast((p) => p.value < 0)
+                    : pointsBelowThisOne.findLast((p) => p.value >= 0)
+            point.valueOffset = pointBelowThisOne
+                ? pointBelowThisOne.value + pointBelowThisOne.valueOffset
+                : 0
+        })
+    })
+    return seriesArr
+}
+
+// Makes sure that values are evenly spaced
+export function withUniformSpacing(values: number[]): number[] {
+    const deltas = rollingMap(values, (a, b) => b - a)
+    const gcd = findGreatestCommonDivisorOfArray(deltas)
+    if (gcd === null) return values
+    return _.range(values[0], values[values.length - 1] + gcd, gcd)
+}
+
+// Adds a Y = 0 value for each missing x value (where X is usually Time)
+export const withMissingValuesAsZeroes = <
+    PositionType extends StackedPointPositionType,
+>(
+    seriesArr: readonly StackedSeries<PositionType>[],
+    { enforceUniformSpacing = false }: { enforceUniformSpacing?: boolean } = {}
+): StackedSeries<PositionType>[] => {
+    let allXValuesSorted = sortNumeric(
+        _.uniq(
+            seriesArr
+                .flatMap((series) => series.points)
+                .map((point) => point.position)
+        )
+    )
+
+    if (enforceUniformSpacing && isArrayOfNumbers(allXValuesSorted)) {
+        allXValuesSorted = withUniformSpacing(
+            allXValuesSorted
+        ) as PositionType[]
+    }
+
+    return seriesArr.map((series) => {
+        const pointsByPosition = _.keyBy(series.points, "position")
+        return {
+            ...series,
+            points: allXValuesSorted.map((position) => {
+                const point = pointsByPosition[position]
+                const value = point?.value ?? 0
+                const time = point?.time ?? 0
+                return omitUndefinedValues({
+                    time,
+                    position,
+                    value,
+                    valueOffset: 0,
+                    interpolated: point?.interpolated,
+                    fake: !point || !!point.interpolated,
+                    color: point?.color,
+                })
+            }),
+        }
+    })
+}
+
+export function resolveCollision(
+    s1: StackedSeries<number>,
+    s2: StackedSeries<number>
+): StackedSeries<number> | undefined {
+    // Early return if one series is all zeroes
+    if (s1.isAllZeros && !s2.isAllZeros) return s2
+    if (s2.isAllZeros && !s1.isAllZeros) return s1
+
+    // Prefer series with a higher maximum value
+    const yMax1 = _.maxBy(s1.points, (p) => p.value)?.value ?? 0
+    const yMax2 = _.maxBy(s2.points, (p) => p.value)?.value ?? 0
+    if (yMax1 > yMax2) return s1
+    if (yMax2 > yMax1) return s2
+
+    // Prefer series with a higher last value
+    const yLast1 = R.last(s1.points)?.value ?? 0
+    const yLast2 = R.last(s2.points)?.value ?? 0
+    if (yLast1 > yLast2) return s1
+    if (yLast2 > yLast1) return s2
+
+    // Prefer series with a higher total area
+    const area1 = _.sumBy(s1.points, (p) => p.value)
+    const area2 = _.sumBy(s2.points, (p) => p.value)
+    if (area1 > area2) return s1
+    if (area2 > area1) return s2
+
+    return undefined // no preference
+}
+
+export function getXAxisConfigDefaultsForStackedBar(
+    chartState: StackedBarChartState
+): AxisConfigInterface {
+    return {
+        hideGridlines: true,
+        domainValues: chartState.xValues,
+        ticks: chartState.xValues.map((value) => ({ value, priority: 2 })),
+    }
+}

package/src/grapher/tabs/Tabs.scss

@@ -0,0 +1,169 @@
+.Tabs {
+    position: relative;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    // Variant: default
+    &.Tabs--variant-default,
+    &.Tabs--variant-scroll {
+        margin: 16px 0;
+        display: flex;
+
+        .Tabs__Tab {
+            @include grapher_label-2-medium;
+            flex-shrink: 0;
+            display: inline-block;
+            margin: 0 8px 8px 0;
+            padding: 8px;
+            border: 1px solid $blue-10;
+            background: #fff;
+            color: $dark-text;
+            white-space: normal;
+            cursor: pointer;
+            text-wrap: balance;
+
+            &[data-hovered] {
+                background-color: $gray-10;
+                border-color: $gray-10;
+            }
+
+            &[data-selected] {
+                background: $accent-pale-blue;
+                border-color: $accent-pale-blue;
+                color: $blue-90;
+            }
+        }
+    }
+
+    // Variant: horizontal scroll
+    &.Tabs--variant-scroll {
+        overflow-x: auto;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+
+        $fade-out-width: 40px;
+        padding-right: $fade-out-width;
+        mask-image: linear-gradient(
+            to right,
+            black calc(100% - #{$fade-out-width}),
+            transparent 100%
+        );
+        -webkit-mask-image: linear-gradient(
+            to right,
+            black calc(100% - #{$fade-out-width}),
+            transparent 100%
+        );
+    }
+
+    // Variant: slim
+    &.Tabs--variant-slim {
+        $font-size: var(--tabs-font-size, 13px);
+        --tab-padding: 16px;
+
+        $light-stroke: $gray-20;
+
+        $hover-fill: $gray-10;
+        $active-fill: $blue-20;
+
+        $border-radius: 4px;
+        $visual-gap: 2px;
+
+        display: flex;
+        height: $controlRowHeight;
+        margin: 0;
+        padding: $visual-gap;
+        // using a box-shadow instead of a border fixes a bug
+        // where the tab items weren't centered when zoomed in or out
+        box-shadow: inset 0 0 0 1px $light-stroke;
+        border-radius: $border-radius;
+
+        .Tabs__Tab {
+            position: relative;
+
+            $height: $controlRowHeight - 2 * $visual-gap;
+
+            display: block;
+            text-transform: capitalize;
+            color: $light-text;
+            font-size: $font-size;
+            font-weight: 500;
+            height: $height;
+            line-height: $height;
+            border-radius: $border-radius - $visual-gap;
+            padding: 0 var(--tab-padding);
+            cursor: pointer;
+            letter-spacing: 0.01em;
+            white-space: nowrap;
+            user-select: none;
+            text-align: center;
+            text-overflow: ellipsis;
+            overflow: hidden;
+
+            &[data-hovered] {
+                background-color: $hover-fill;
+            }
+
+            &[data-selected] {
+                color: $active-text;
+                background-color: $active-fill;
+            }
+        }
+
+        // separators between tabs
+        .Tabs__Tab + .Tabs__Tab::before {
+            content: "";
+            display: block;
+            width: 1px;
+            height: calc(100% - 12px);
+            position: absolute;
+            top: 6px;
+            background-color: $light-stroke;
+            left: -0.5px;
+        }
+
+        // hide separators when a tab is hovered over or when a tab is active
+        .Tabs__Tab[data-selected]::before,
+        .Tabs__Tab[data-hovered]::before,
+        .Tabs__Tab[data-selected] + .Tabs__Tab::before,
+        .Tabs__Tab[data-hovered] + .Tabs__Tab::before {
+            display: none;
+        }
+    }
+
+    // Variant: stretch
+    &.Tabs--variant-stretch {
+        display: flex;
+        gap: 8px;
+
+        $hover-fill: $gray-10;
+        $active-fill: $accent-pale-blue;
+
+        .Tabs__Tab {
+            flex-grow: 1;
+            flex-shrink: 1;
+
+            @include grapher_label-2-medium;
+            display: inline-block;
+            padding: 8px;
+            border: 1px solid $blue-10;
+            background: #fff;
+            color: $dark-text;
+            cursor: pointer;
+            text-wrap: balance;
+
+            &[data-hovered] {
+                background-color: $hover-fill;
+                border-color: $hover-fill;
+            }
+
+            &[data-selected] {
+                background: $active-fill;
+                border-color: $active-fill;
+                color: $blue-90;
+            }
+        }
+    }
+}

package/src/grapher/tabs/Tabs.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import cx from "classnames"
+import { Tabs as AriaTabs, TabList, Tab } from "react-aria-components"
+
+export interface TabItem<TabKey extends string = string> {
+    key: TabKey
+    element: React.ReactElement
+    buttonProps?: {
+        className?: string
+        ariaLabel?: string
+        dataTrackNote?: string
+        ref?: React.RefObject<HTMLButtonElement | null>
+    }
+}
+
+export const Tabs = <TabKey extends string = string>({
+    items,
+    selectedKey,
+    onChange,
+    className,
+    variant = "default",
+}: {
+    items: TabItem<TabKey>[]
+    selectedKey: TabKey
+    onChange: (key: TabKey) => void
+    className?: string
+    variant?: "default" | "slim" | "stretch" | "scroll"
+}) => {
+    return (
+        <AriaTabs
+            selectedKey={selectedKey}
+            onSelectionChange={(key) => {
+                if (typeof key === "string") onChange(key as TabKey)
+            }}
+        >
+            <TabList
+                className={cx("Tabs", "Tabs--variant-" + variant, className)}
+            >
+                {items.map((item) => (
+                    <Tab
+                        key={item.key}
+                        id={item.key}
+                        data-track-note={item.buttonProps?.dataTrackNote}
+                        aria-label={item.buttonProps?.ariaLabel}
+                        className={cx("Tabs__Tab", item.buttonProps?.className)}
+                        ref={item.buttonProps?.ref}
+                    >
+                        {item.element}
+                    </Tab>
+                ))}
+            </TabList>
+        </AriaTabs>
+    )
+}

package/src/grapher/tabs/TabsWithDropdown.scss

@@ -0,0 +1,62 @@
+.TabsWithDropdown {
+    position: relative;
+
+    .TabsWithDropdown__Row {
+        display: flex;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    .TabsWithDropdown__MoreButton {
+        @include grapher_label-2-medium;
+        flex: 0 0 auto; // Fixed size
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background: $gray-10;
+        color: $gray-80;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &[data-hovered] {
+            background: $blue-20;
+        }
+
+        &[data-open] {
+            background: $accent-pale-blue;
+            color: $blue-90;
+        }
+    }
+}
+
+@at-root .TabsWithDropdown__Popover {
+    border-radius: 4px;
+    background-color: #fff;
+    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
+    max-width: 400px;
+    max-height: 400px;
+    overflow: hidden;
+
+    .TabsWithDropdown__Menu {
+        max-height: 400px;
+        overflow-y: auto;
+        padding: 4px 0;
+        outline: none;
+    }
+
+    .TabsWithDropdown__MenuItem {
+        @include grapher_label-2-regular;
+
+        padding: 8px 16px;
+        color: $gray-80;
+        cursor: pointer;
+        text-wrap: balance;
+
+        &[data-hovered],
+        &[data-focused] {
+            background-color: $gray-10;
+        }
+    }
+}

package/src/grapher/tabs/TabsWithDropdown.tsx

@@ -0,0 +1,114 @@
+import * as R from "remeda"
+import cx from "classnames"
+import { useState } from "react"
+import {
+    Button,
+    MenuTrigger,
+    Popover,
+    Menu,
+    MenuItem,
+} from "react-aria-components"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faEllipsisVertical } from "@fortawesome/free-solid-svg-icons"
+import { TabItem, Tabs } from "./Tabs"
+
+export const TabsWithDropdown = <TabKey extends string = string>({
+    items,
+    selectedKey,
+    onChange,
+    numVisibleTabs,
+    className,
+    portalContainer,
+}: {
+    items: TabItem<TabKey>[]
+    selectedKey: TabKey
+    onChange: (key: TabKey) => void
+    numVisibleTabs: number
+    className?: string
+    portalContainer?: HTMLElement
+}) => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    let visibleItems = R.take(items, numVisibleTabs)
+    let hiddenItems = items.filter(
+        (item) => !visibleItems.find((v) => v.key === item.key)
+    )
+
+    // If a hidden item is selected, swap it with the last visible item
+    const selectedHiddenItem = hiddenItems.find(
+        (item) => item.key === selectedKey
+    )
+    if (selectedHiddenItem && visibleItems.length > 0) {
+        const lastVisibleItem = visibleItems[visibleItems.length - 1]
+        visibleItems = R.pipe(
+            visibleItems,
+            R.dropLast(1),
+            R.concat([selectedHiddenItem])
+        )
+        hiddenItems = hiddenItems
+            .filter((item) => item.key !== selectedKey)
+            .concat(lastVisibleItem)
+    }
+
+    const handleSelect = (key: React.Key) => {
+        if (typeof key === "string") onChange(key as TabKey)
+        setIsOpen(false)
+    }
+
+    return (
+        <div className={cx("TabsWithDropdown", className)}>
+            <div className="TabsWithDropdown__Row">
+                <Tabs
+                    className="TabsWithDropdown__Tabs"
+                    items={visibleItems}
+                    selectedKey={selectedKey}
+                    onChange={onChange}
+                    variant="stretch"
+                />
+                {hiddenItems.length > 0 && (
+                    <MenuTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+                        <Button
+                            className="TabsWithDropdown__MoreButton"
+                            aria-label="Show more tabs"
+                            data-open={isOpen || undefined}
+                        >
+                            <FontAwesomeIcon
+                                icon={faEllipsisVertical}
+                                aria-hidden="true"
+                            />
+                            <span>More</span>
+                        </Button>
+                        <Popover
+                            className="TabsWithDropdown__Popover"
+                            placement="bottom end"
+                            UNSTABLE_portalContainer={portalContainer}
+                        >
+                            <Menu
+                                className="TabsWithDropdown__Menu"
+                                onAction={handleSelect}
+                            >
+                                {hiddenItems.map((item) => (
+                                    <MenuItem
+                                        key={item.key}
+                                        id={item.key}
+                                        className={cx(
+                                            "TabsWithDropdown__MenuItem",
+                                            item.buttonProps?.className
+                                        )}
+                                        data-track-note={
+                                            item.buttonProps?.dataTrackNote
+                                        }
+                                        aria-label={item.buttonProps?.ariaLabel}
+                                        ref={item.buttonProps?.ref}
+                                    >
+                                        {item.element}
+                                    </MenuItem>
+                                ))}
+                            </Menu>
+                        </Popover>
+                    </MenuTrigger>
+                )}
+            </div>
+        </div>
+    )
+}