@buildcanada/charts 0.1.0

package/src/components/ExpandableToggle/ExpandableToggle.scss

@@ -0,0 +1,123 @@
+details.ExpandableToggle {
+    --title: var(--expandable-toggle-title, currentColor);
+    --border: var(--expandable-toggle-border, #d0dae3);
+    --content: var(--expandable-toggle-content, #{$blue-60});
+
+    --button: var(--expandable-toggle-button, #{$blue-90});
+    --button-hover: var(--expandable-toggle-button-hover, #{$blue-60});
+
+    --title-size: var(--expandable-toggle-title-size, 1rem);
+    --content-size: var(--expandable-toggle-content-size, 0.875rem);
+
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+
+    // Hide the default expand/collapse icons of the <summary> element
+    .ExpandableToggle__container {
+        list-style: none;
+        &::marker,
+        &::-webkit-details-marker {
+            display: none;
+        }
+    }
+
+    .ExpandableToggle__button {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        padding: 16px 0;
+        color: var(--button);
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        text-align: left;
+
+        &:hover {
+            color: var(--button-hover);
+        }
+
+        .ExpandableToggle__title {
+            @include h4-semibold;
+            margin: 0;
+            color: var(--title);
+            font-size: var(--title-size);
+
+            &:hover {
+                color: var(--button-hover);
+            }
+        }
+
+        .ExpandableToggle__icon {
+            font-size: 0.75em;
+            margin: 0 12px;
+        }
+    }
+
+    .ExpandableToggle__content,
+    .ExpandableToggle__teaser {
+        height: 0;
+        overflow: hidden;
+        color: var(--content);
+
+        @include body-3-medium;
+        font-size: var(--content-size);
+
+        .article-block__text,
+        .article-block__list,
+        .article-block__html,
+        .article-block__numbered-list,
+        p {
+            @include body-3-medium;
+            font-size: var(--content-size);
+        }
+
+        > *:first-child {
+            margin-top: 0;
+        }
+
+        > *:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+details.ExpandableToggle--stacked {
+    border-bottom: none;
+}
+
+details.ExpandableToggle--teaser .ExpandableToggle__button,
+.ExpandableToggle[open] .ExpandableToggle__button {
+    padding-bottom: 8px;
+}
+
+details.ExpandableToggle--teaser .ExpandableToggle__teaser {
+    display: block;
+    height: 96px;
+    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent);
+}
+
+details.ExpandableToggle[open] .ExpandableToggle__teaser {
+    display: none;
+}
+
+details.ExpandableToggle[open] .ExpandableToggle__content {
+    padding-bottom: 16px;
+    height: auto;
+    -webkit-mask-image: none;
+}
+
+// Show the correct icon based on the state of the details element
+details.ExpandableToggle .ExpandableToggle__icon--expand {
+    display: block;
+}
+details.ExpandableToggle[open] .ExpandableToggle__icon--expand {
+    display: none;
+}
+
+details.ExpandableToggle .ExpandableToggle__icon--collapse {
+    display: none;
+}
+details.ExpandableToggle[open] .ExpandableToggle__icon--collapse {
+    display: block;
+}

package/src/components/ExpandableToggle/ExpandableToggle.tsx

@@ -0,0 +1,60 @@
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import type { ReactNode } from "react"
+import cx from "classnames"
+
+export const ExpandableToggle = ({
+    label,
+    content,
+    alwaysVisibleDescription,
+    isExpandedDefault = false,
+    isStacked = false,
+    hasTeaser = false,
+}: {
+    label: string
+    content?: ReactNode
+    alwaysVisibleDescription?: ReactNode
+    isExpandedDefault?: boolean
+    isStacked?: boolean
+    hasTeaser?: boolean
+}) => (
+    <details
+        className={cx("ExpandableToggle", {
+            "ExpandableToggle--stacked": isStacked,
+            "ExpandableToggle--teaser": hasTeaser,
+        })}
+        open={isExpandedDefault}
+    >
+        <summary className="ExpandableToggle__container">
+            <div className="ExpandableToggle__button">
+                <div>
+                    <h4 className="ExpandableToggle__title">{label}</h4>
+                    {alwaysVisibleDescription && (
+                        <div className="ExpandableToggle__description">
+                            {alwaysVisibleDescription}
+                        </div>
+                    )}
+                </div>
+
+                {/* We show both the opened and closed icons, and use CSS to hide/show them based on the state */}
+                <FontAwesomeIcon
+                    className="ExpandableToggle__icon ExpandableToggle__icon--expand"
+                    icon={faPlus}
+                />
+                <FontAwesomeIcon
+                    className="ExpandableToggle__icon ExpandableToggle__icon--collapse"
+                    icon={faMinus}
+                />
+            </div>
+
+            {/* If there is a teaser, we need to place the content element inside the summary so it is visible even when the details element is closed.
+            Also, make it inert so it isn't included in the browser Cmd-F search - instead, the browser will auto-expand it when searching for content that's currently collapsed */}
+            {hasTeaser && (
+                <div className="ExpandableToggle__teaser" inert>
+                    {content}
+                </div>
+            )}
+        </summary>
+        <div className="ExpandableToggle__content">{content}</div>
+    </details>
+)

package/src/components/GrapherTabIcon.tsx

@@ -0,0 +1,156 @@
+import * as React from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import {
+    faChartBar,
+    faChartColumn,
+    faChartLine,
+    faEarthAmericas,
+    faTable,
+} from "@fortawesome/free-solid-svg-icons"
+import {
+    GRAPHER_CHART_TYPES,
+    GRAPHER_TAB_NAMES,
+    GrapherChartType,
+    GrapherTabName,
+} from "../types/index.js"
+
+export function GrapherTabIcon({
+    tab,
+    isLineChartThatTurnedIntoDiscreteBar,
+}: {
+    tab: GrapherTabName
+    isLineChartThatTurnedIntoDiscreteBar?: boolean
+}): React.ReactElement {
+    switch (tab) {
+        case GRAPHER_TAB_NAMES.Table:
+            return <FontAwesomeIcon className="GrapherTabIcon" icon={faTable} />
+        case GRAPHER_TAB_NAMES.WorldMap:
+            return (
+                <FontAwesomeIcon
+                    className="GrapherTabIcon"
+                    icon={faEarthAmericas}
+                />
+            )
+        default: {
+            const chartIcon =
+                tab === GRAPHER_TAB_NAMES.LineChart &&
+                isLineChartThatTurnedIntoDiscreteBar
+                    ? chartIcons[GRAPHER_CHART_TYPES.DiscreteBar]
+                    : chartIcons[tab]
+            return chartIcon
+        }
+    }
+}
+
+const chartIcons: Record<GrapherChartType, React.ReactElement> = {
+    // line chart
+    [GRAPHER_CHART_TYPES.LineChart]: (
+        <FontAwesomeIcon className="GrapherTabIcon" icon={faChartLine} />
+    ),
+
+    // bar charts
+    [GRAPHER_CHART_TYPES.DiscreteBar]: (
+        <FontAwesomeIcon className="GrapherTabIcon" icon={faChartColumn} />
+    ),
+    [GRAPHER_CHART_TYPES.StackedBar]: (
+        <FontAwesomeIcon className="GrapherTabIcon" icon={faChartColumn} />
+    ),
+    [GRAPHER_CHART_TYPES.StackedDiscreteBar]: (
+        <FontAwesomeIcon className="GrapherTabIcon" icon={faChartBar} />
+    ),
+
+    // scatter
+    [GRAPHER_CHART_TYPES.ScatterPlot]: (
+        <svg
+            className="GrapherTabIcon custom-icon scatter"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+        >
+            <g clipPath="url(#a)">
+                <path
+                    fill="currentColor"
+                    fillRule="evenodd"
+                    d="M13.2 14h-10A1.2 1.2 0 0 1 2 12.8v-10a.8.8 0 1 1 1.6 0V12c0 .22.18.4.4.4h9.2a.8.8 0 0 1 0 1.6Zm-.16-10a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm-1.36 3.6a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm-3.76 2a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm1.04-4.8a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Z"
+                    clipRule="evenodd"
+                />
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#fff" d="M0 0h16v16H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    ),
+
+    // marimekko
+    [GRAPHER_CHART_TYPES.Marimekko]: (
+        <svg
+            className="GrapherTabIcon custom-icon marimekko"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+        >
+            <g clipPath="url(#a)">
+                <path
+                    fill="currentColor"
+                    stroke="currentColor"
+                    strokeWidth=".1"
+                    d="M13.5 1.45h-11A1.051 1.051 0 0 0 1.45 2.5v11a1.051 1.051 0 0 0 1.05 1.05h11a1.051 1.051 0 0 0 1.05-1.05v-11a1.051 1.051 0 0 0-1.05-1.05Zm-.05 3.5h-2.9v-2.4h2.9v2.4Zm-4-1h-2.9v-1.4h2.9v1.4Zm0 1.1v3.9h-2.9v-3.9h2.9Zm-4 5.9h-2.9v-4.9h2.9v4.9Zm1.1-.9h2.9v3.4h-2.9v-3.4Zm4-4h2.9v1.9h-2.9v-1.9Zm-5.1-3.5v2.4h-2.9v-2.4h2.9Zm-2.9 9.5h2.9v1.4h-2.9v-1.4Zm8 1.4v-4.4h2.9v4.4h-2.9Z"
+                />
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#fff" d="M0 0h16v16H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    ),
+
+    // stacked area
+    [GRAPHER_CHART_TYPES.StackedArea]: (
+        <svg
+            className="GrapherTabIcon custom-icon stacked-area"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+        >
+            <g
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.6"
+            >
+                <path d="M1 12.458V1.542L5.764 4.06l7.145-2.52v10.917H1Z" />
+                <path d="m1 9.481 4.764-1.985 7.145 1.191" />
+            </g>
+        </svg>
+    ),
+
+    // slope chart
+    [GRAPHER_CHART_TYPES.SlopeChart]: (
+        <svg
+            className="GrapherTabIcon custom-icon slope"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+        >
+            <g
+                stroke="currentColor"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            >
+                <path d="M2 2.30005V13.5667" />
+                <path d="M14 2.30005V13.5667" />
+                <path d="M2 3.30005L14 12.3" />
+                <path d="M2 11L14 12" />
+                <path d="M14 4.30005L2 9.30005" />
+            </g>
+        </svg>
+    ),
+}

package/src/components/GrapherTrendArrow.scss

@@ -0,0 +1,16 @@
+.GrapherTrendArrow {
+    $grey: #787878;
+    $red: #cc3b55;
+    $green: #2c8465;
+
+    fill: $grey;
+    &.colored.up path {
+        fill: $green;
+    }
+    &.colored.down path {
+        fill: $red;
+    }
+    &.colored.right path {
+        fill: $grey;
+    }
+}

package/src/components/GrapherTrendArrow.tsx

@@ -0,0 +1,30 @@
+import cx from "classnames"
+import { GrapherTrendArrowDirection } from "../types/index.js"
+
+const ARROW_PATHS = {
+    up: "m14,0H5c-.552,0-1,.448-1,1s.448,1,1,1h6.586L.29303,13.29297l1.41394,1.414L13,3.41394v6.58606c0,.552.448,1,1,1s1-.448,1-1V1c0-.552-.448-1-1-1Z",
+    down: "m14,4c-.552,0-1,.448-1,1v6.586L1.56049.14648.14655,1.56042l11.43958,11.43958h-6.58612c-.552,0-1,.448-1,1s.448,1,1,1h9c.552,0,1-.448,1-1V5c0-.552-.448-1-1-1Z",
+    right: "m19.59198,6.82422L13.22803.46021c-.39105-.39099-1.02405-.39099-1.414,0-.39105.39001-.39105,1.02405,0,1.414l4.65698,4.65704H.5v2h15.97101l-4.65698,4.65698c-.39105.39001-.39105,1.02399,0,1.414.38995.39099,1.02295.39099,1.414,0l6.36395-6.36401c.39001-.39001.39001-1.02399,0-1.414Z",
+} as const
+
+export function GrapherTrendArrow({
+    direction,
+    isColored = true,
+    className,
+}: {
+    direction: GrapherTrendArrowDirection
+    isColored?: boolean
+    className?: string
+}): React.ReactElement {
+    return (
+        <svg
+            className={cx("GrapherTrendArrow", direction, className, {
+                colored: isColored,
+            })}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={`0 0 ${direction === "right" ? 20 : 15} 15`}
+        >
+            <path d={ARROW_PATHS[direction]} />
+        </svg>
+    )
+}

package/src/components/Halo/Halo.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { Color } from "../../types/index.js"
+
+interface HaloProps {
+    id: string
+    children: React.ReactElement<React.HTMLAttributes<HTMLElement>>
+    show?: boolean
+    outlineWidth: number
+    outlineColor?: Color
+    style?: React.CSSProperties
+}
+
+const defaultHaloStyle: React.CSSProperties = {
+    fill: "#fff",
+    stroke: "#fff",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    userSelect: "none",
+}
+
+export function Halo(props: HaloProps): React.ReactElement {
+    const show = props.show ?? true
+    if (!show) return props.children
+
+    const defaultStyle = {
+        ...defaultHaloStyle,
+        strokeWidth: props.outlineWidth,
+        fill: props.outlineColor ?? defaultHaloStyle.fill,
+        stroke: props.outlineColor ?? defaultHaloStyle.stroke,
+    }
+    const halo = React.cloneElement(props.children, {
+        id: props.id,
+        style: {
+            ...defaultStyle,
+            ...props.style,
+        },
+    })
+    return (
+        <React.Fragment key={props.id}>
+            {halo}
+            {props.children}
+        </React.Fragment>
+    )
+}

package/src/components/LabeledSwitch/LabeledSwitch.scss

@@ -0,0 +1,109 @@
+@use "sass:color";
+
+$light-fill: $gray-30;
+$active-fill: $blue-20;
+
+$active-switch: $blue-50;
+
+$medium: 400;
+$lato: $sans-serif-font-stack;
+
+// on/off switch with label written to the right
+.labeled-switch {
+    // keep in sync with TableFilterToggle.tsx
+    // where the width of a labeled switch is calculated
+
+    display: flex;
+    color: $gray-70;
+    font: $medium 13px/16px $lato;
+    letter-spacing: 0.01em;
+
+    position: relative;
+    margin: 8px 0;
+    -webkit-user-select: none;
+    user-select: none;
+
+    label {
+        color: $gray-80;
+        padding-left: 35px;
+        white-space: nowrap;
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        svg {
+            color: $gray-60;
+            height: 13px;
+            padding: 0 0.333em;
+        }
+    }
+
+    .labeled-switch-subtitle {
+        // only show subtitle in settings menu, otherwise use icon + tooltip
+        display: none;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        left: 0;
+    }
+
+    .outer {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: " ";
+        width: 29px;
+        height: 16px;
+        background: $light-fill;
+        border-radius: 8px;
+        pointer-events: none;
+        .inner {
+            position: relative;
+            content: " ";
+            width: 10px;
+            height: 10px;
+            background: $gray-70;
+            border-radius: 5px;
+            top: 3px;
+            left: 3px;
+            pointer-events: none;
+            transition: transform 333ms;
+        }
+    }
+
+    &:hover {
+        .outer .inner {
+            background: $gray-80;
+        }
+    }
+
+    input:focus-visible + .outer {
+        outline: 2px solid $controls-color;
+    }
+
+    input:checked + .outer {
+        background: $active-fill;
+        .inner {
+            background: $active-switch;
+            transform: translate(13px, 0);
+        }
+    }
+    &:hover input:checked + .outer .inner {
+        background: color.adjust($active-switch, $lightness: -13%);
+    }
+
+    &.labeled-switch--is-disabled {
+        opacity: 0.5;
+        label {
+            cursor: default;
+        }
+        &:hover {
+            .inner {
+                background: $gray-70;
+            }
+        }
+    }
+}

package/src/components/LabeledSwitch/LabeledSwitch.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
+import cx from "classnames"
+import { Tippy } from "../../utils/index.js"
+
+export const LabeledSwitch = ({
+    className,
+    label,
+    value,
+    tooltip,
+    tracking,
+    disabled,
+    onToggle,
+}: {
+    value?: boolean
+    label?: string
+    tooltip?: string
+    tracking?: string
+    onToggle: () => any
+    className?: string
+    disabled?: boolean
+}): React.ReactElement => {
+    return (
+        <div
+            className={cx(
+                {
+                    "labeled-switch": true,
+                    "labeled-switch--is-disabled": disabled,
+                },
+                className
+            )}
+        >
+            <label>
+                <input
+                    type="checkbox"
+                    checked={value}
+                    disabled={disabled}
+                    onChange={onToggle}
+                    data-track-note={tracking}
+                />
+                <div data-track-note="" className="outer">
+                    <div className="inner"></div>
+                </div>
+                {label}
+                {tooltip && (
+                    <Tippy
+                        content={tooltip}
+                        theme="grapher-explanation"
+                        placement="top"
+                        maxWidth={338}
+                    >
+                        <FontAwesomeIcon icon={faInfoCircle} />
+                    </Tippy>
+                )}
+            </label>
+            {tooltip && (
+                <div className="labeled-switch-subtitle">{tooltip}</div>
+            )}
+        </div>
+    )
+}