@buildcanada/charts 0.1.0

package/src/utils/Bounds.ts

@@ -0,0 +1,439 @@
+import * as _ from "lodash-es"
+import { PointVector } from "./PointVector.js"
+import pixelWidth from "string-pixel-width"
+import {
+    Box,
+    GridParameters,
+    Position,
+    PositionMap,
+} from "../types/index.js"
+
+// Important utility class for all visualizations
+// Since we want to be able to render charts headlessly and functionally, we
+// can't rely on the DOM to do these calculations for us, and instead must
+// calculate using geometry and first principles
+
+type PadObject = PositionMap<number>
+
+export interface GridBounds {
+    col: number
+    row: number
+    cellEdges: Set<Position>
+    bounds: Bounds
+}
+
+export enum FontFamily {
+    "andale mono" = "andale mono",
+    "arial" = "arial",
+    "avenir next" = "avenir next",
+    "avenir" = "avenir",
+    "comic sans ms" = "comic sans ms",
+    "courier new" = "courier new",
+    "georgia" = "georgia",
+    "impact" = "impact",
+    "open sans" = "open sans",
+    "tahoma" = "tahoma",
+    "times new roman" = "times new roman",
+    "trebuchet ms" = "trebuchet ms",
+    "verdana" = "verdana",
+    "webdings" = "webdings",
+}
+
+export class Bounds {
+    static ctx: CanvasRenderingContext2D
+
+    static fromProps(props: Box): Bounds {
+        const { x, y, width, height } = props
+        return new Bounds(x, y, width, height)
+    }
+
+    static fromBBox(bbox: Box): Bounds {
+        return this.fromProps(bbox)
+    }
+
+    static fromRect(rect: ClientRect): Bounds {
+        return new Bounds(rect.left, rect.top, rect.width, rect.height)
+    }
+
+    static fromElement(el: HTMLElement): Bounds {
+        return Bounds.fromRect(el.getBoundingClientRect())
+    }
+
+    static fromCorners(p1: PointVector, p2: PointVector): Bounds {
+        const x1 = Math.min(p1.x, p2.x)
+        const x2 = Math.max(p1.x, p2.x)
+        const y1 = Math.min(p1.y, p2.y)
+        const y2 = Math.max(p1.y, p2.y)
+
+        return new Bounds(x1, y1, x2 - x1, y2 - y1)
+    }
+
+    // Merge a collection of bounding boxes into a single encompassing Bounds
+    static merge(boundsList: Bounds[]): Bounds {
+        let x1 = Infinity,
+            y1 = Infinity,
+            x2 = -Infinity,
+            y2 = -Infinity
+        for (const b of boundsList) {
+            x1 = Math.min(x1, b.x)
+            y1 = Math.min(y1, b.y)
+            x2 = Math.max(x2, b.x + b.width)
+            y2 = Math.max(y2, b.y + b.height)
+        }
+        return Bounds.fromCorners(
+            new PointVector(x1, y1),
+            new PointVector(x2, y2)
+        )
+    }
+
+    static empty(): Bounds {
+        return new Bounds(0, 0, 0, 0)
+    }
+
+    static forText(
+        str: string = "",
+        {
+            x = 0,
+            y = 0,
+            fontSize = 16,
+            fontWeight = 400,
+            fontFamily = FontFamily.arial,
+            isItalic = false,
+        }: {
+            x?: number
+            y?: number
+            fontSize?: number
+            fontWeight?: number
+            fontFamily?: FontFamily
+            isItalic?: boolean
+        } = {}
+    ): Bounds {
+        // Collapse contiguous spaces into one
+        str = str.replace(/ +/g, " ")
+
+        const isBold = fontWeight >= 600
+
+        const height = fontSize
+        let bounds = new Bounds(x, y - height, 0, height)
+        if (str) {
+            // pixelWidth uses a precomputed character width table to quickly give a
+            // rough estimate of string width based on characters in a string - it is probably not
+            // worth caching further
+            const width = pixelWidth(str, {
+                font: fontFamily,
+                size: fontSize,
+                bold: isBold,
+                italic: isItalic,
+            })
+            bounds = bounds.set({ width })
+        }
+
+        return bounds
+    }
+
+    readonly x: number
+    readonly y: number
+    readonly width: number
+    readonly height: number
+
+    constructor(x: number, y: number, width: number, height: number) {
+        this.x = x
+        this.y = y
+        this.width = Math.max(width, 0)
+        this.height = Math.max(height, 0)
+    }
+
+    get left(): number {
+        return this.x
+    }
+    get top(): number {
+        return this.y
+    }
+    get right(): number {
+        return this.x + this.width
+    }
+    get bottom(): number {
+        return this.y + this.height
+    }
+    get centerX(): number {
+        return this.x + this.width / 2
+    }
+    get centerY(): number {
+        return this.y + this.height / 2
+    }
+    get centerPos(): PointVector {
+        return new PointVector(this.centerX, this.centerY)
+    }
+    get area(): number {
+        return this.width * this.height
+    }
+
+    get topLeft(): PointVector {
+        return new PointVector(this.left, this.top)
+    }
+    get topRight(): PointVector {
+        return new PointVector(this.right, this.top)
+    }
+    get bottomLeft(): PointVector {
+        return new PointVector(this.left, this.bottom)
+    }
+    get bottomRight(): PointVector {
+        return new PointVector(this.right, this.bottom)
+    }
+
+    padLeft(amount: number): Bounds {
+        return new Bounds(
+            this.x + amount,
+            this.y,
+            this.width - amount,
+            this.height
+        )
+    }
+
+    padRight(amount: number): Bounds {
+        return new Bounds(this.x, this.y, this.width - amount, this.height)
+    }
+
+    padBottom(amount: number): Bounds {
+        return new Bounds(this.x, this.y, this.width, this.height - amount)
+    }
+
+    padTop(amount: number): Bounds {
+        return new Bounds(
+            this.x,
+            this.y + amount,
+            this.width,
+            this.height - amount
+        )
+    }
+
+    padWidth(amount: number): Bounds {
+        return new Bounds(
+            this.x + amount,
+            this.y,
+            this.width - amount * 2,
+            this.height
+        )
+    }
+
+    padHeight(amount: number): Bounds {
+        return new Bounds(
+            this.x,
+            this.y + amount,
+            this.width,
+            this.height - amount * 2
+        )
+    }
+
+    fromLeft(amount: number): Bounds {
+        return this.padRight(this.width - amount)
+    }
+
+    fromBottom(amount: number): Bounds {
+        return this.padTop(this.height - amount)
+    }
+
+    pad(amount: number | PadObject): Bounds {
+        if (_.isNumber(amount)) {
+            return new Bounds(
+                this.x + amount,
+                this.y + amount,
+                this.width - amount * 2,
+                this.height - amount * 2
+            )
+        }
+        return this.padTop(amount.top ?? 0)
+            .padRight(amount.right ?? 0)
+            .padBottom(amount.bottom ?? 0)
+            .padLeft(amount.left ?? 0)
+    }
+
+    expand(amount: number | PadObject): Bounds {
+        if (_.isNumber(amount)) return this.pad(-amount)
+        return this.pad(
+            _.mapValues(amount, (v) => (v !== undefined ? -v : undefined))
+        )
+    }
+
+    set(props: {
+        x?: number
+        y?: number
+        width?: number
+        height?: number
+    }): Bounds {
+        return Bounds.fromProps({ ...this, ...props })
+    }
+
+    scale(scale: number): Bounds {
+        return new Bounds(
+            this.x * scale,
+            this.y * scale,
+            this.width * scale,
+            this.height * scale
+        )
+    }
+
+    intersects(otherBounds: Bounds): boolean {
+        const r2 = otherBounds
+        return !(
+            r2.left > this.right ||
+            r2.right < this.left ||
+            r2.top > this.bottom ||
+            r2.bottom < this.top
+        )
+    }
+
+    hasVerticalOverlap(otherBounds: Bounds): boolean {
+        const r2 = otherBounds
+        return !(r2.top > this.bottom || r2.bottom < this.top)
+    }
+
+    hasHorizontalOverlap(otherBounds: Bounds): boolean {
+        const r2 = otherBounds
+        return !(r2.left > this.right || r2.right < this.left)
+    }
+
+    lines(): PointVector[][] {
+        return [
+            [this.topLeft, this.topRight],
+            [this.topRight, this.bottomRight],
+            [this.bottomRight, this.bottomLeft],
+            [this.bottomLeft, this.topLeft],
+        ]
+    }
+
+    boundedPoint(p: PointVector): PointVector {
+        return new PointVector(
+            Math.max(Math.min(p.x, this.right), this.left),
+            Math.max(Math.min(p.y, this.bottom), this.top)
+        )
+    }
+
+    containsPoint(x: number, y: number): boolean {
+        return (
+            x >= this.left &&
+            x <= this.right &&
+            y >= this.top &&
+            y <= this.bottom
+        )
+    }
+
+    contains(p: PointVector): boolean {
+        return this.containsPoint(p.x, p.y)
+    }
+
+    encloses(bounds: Bounds): boolean {
+        return (
+            this.containsPoint(bounds.left, bounds.top) &&
+            this.containsPoint(bounds.left, bounds.bottom) &&
+            this.containsPoint(bounds.right, bounds.top) &&
+            this.containsPoint(bounds.right, bounds.bottom)
+        )
+    }
+
+    toCSS(): { left: string; top: string; width: string; height: string } {
+        return {
+            left: `${this.left}px`,
+            top: `${this.top}px`,
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+        }
+    }
+
+    toProps(): { x: number; y: number; width: number; height: number } {
+        return { x: this.x, y: this.y, width: this.width, height: this.height }
+    }
+
+    toArray(): [[number, number], [number, number]] {
+        return [
+            [this.left, this.top],
+            [this.right, this.bottom],
+        ]
+    }
+
+    xRange(): [number, number] {
+        return [this.left, this.right]
+    }
+
+    grid(
+        gridParams: GridParameters,
+        padding: SplitBoundsPadding = {}
+    ): GridBounds[] {
+        const { columns, rows, count } = gridParams
+        const { columnPadding = 0, rowPadding = 0, outerPadding = 0 } = padding
+
+        const contentWidth =
+            this.width - columnPadding * (columns - 1) - outerPadding * 2
+        const contentHeight =
+            this.height - rowPadding * (rows - 1) - outerPadding * 2
+        const boxWidth = Math.floor(contentWidth / columns)
+        const boxHeight = Math.floor(contentHeight / rows)
+
+        const hasCell = (row: number, col: number): boolean => {
+            if (row < 0 || row >= rows) return false
+            if (col < 0 || col >= columns) return false
+            const index = row * columns + col
+            if (index >= count) return false
+            return true
+        }
+
+        const grid = _.range(0, count).map((index: number) => {
+            const col = index % columns
+            const row = Math.floor(index / columns)
+
+            // edges around the existing cells
+            const cellEdges = new Set<Position>()
+            if (!hasCell(row, col - 1)) cellEdges.add(Position.left)
+            if (!hasCell(row, col + 1)) cellEdges.add(Position.right)
+            if (!hasCell(row - 1, col)) cellEdges.add(Position.top)
+            if (!hasCell(row + 1, col)) cellEdges.add(Position.bottom)
+
+            return {
+                row,
+                col,
+                cellEdges,
+                bounds: new Bounds(
+                    this.x + outerPadding + col * (boxWidth + columnPadding),
+                    this.y + outerPadding + row * (boxHeight + rowPadding),
+                    boxWidth,
+                    boxHeight
+                ),
+            }
+        })
+
+        return grid
+    }
+
+    yRange(): [number, number] {
+        return [this.bottom, this.top]
+    }
+
+    equals(bounds: Bounds): boolean {
+        return (
+            this.x === bounds.x &&
+            this.y === bounds.y &&
+            this.width === bounds.width &&
+            this.height === bounds.height
+        )
+    }
+
+    // Calculate squared distance between a given point and the closest border of the bounds
+    // If the point is within the bounds, returns 0
+    private distanceToPointSq(p: PointVector): number {
+        if (this.contains(p)) return 0
+
+        const cx = Math.max(Math.min(p.x, this.x + this.width), this.x)
+        const cy = Math.max(Math.min(p.y, this.y + this.height), this.y)
+        return (p.x - cx) * (p.x - cx) + (p.y - cy) * (p.y - cy)
+    }
+
+    distanceToPoint(p: PointVector): number {
+        return Math.sqrt(this.distanceToPointSq(p))
+    }
+}
+
+export interface SplitBoundsPadding {
+    columnPadding?: number
+    rowPadding?: number
+    outerPadding?: number
+}

package/src/utils/BrowserUtils.ts

@@ -0,0 +1,12 @@
+export const isAndroid = (): boolean => {
+    return /Android/i.test(navigator.userAgent)
+}
+
+export const isIOS = (): boolean => {
+    return (
+        /iPhone|iPad|iPod/.test(navigator.userAgent) ||
+        // iPadOS 13+ reports itself as Macintosh, see https://stackoverflow.com/a/9039885
+        (navigator.userAgent.includes("Intel Mac OS X") &&
+            navigator.maxTouchPoints > 1)
+    )
+}

package/src/utils/FuzzySearch.ts

@@ -0,0 +1,74 @@
+import { PrimitiveType } from "../types/index.js"
+import * as _ from "lodash-es"
+import fuzzysort from "fuzzysort"
+
+export class FuzzySearch<T> {
+    strings: Fuzzysort.Prepared[]
+    datamap: Record<string, T[]>
+    uniqByFn: ((obj: T) => PrimitiveType) | undefined
+    opts: Fuzzysort.Options | undefined
+
+    private constructor(
+        datamap: Record<string, T[]>,
+        uniqByFn?: (obj: T) => PrimitiveType,
+        opts?: Fuzzysort.Options
+    ) {
+        const rawStrings = Object.keys(datamap)
+        this.strings = rawStrings.map((s) => fuzzysort.prepare(s))
+        this.datamap = datamap
+        this.uniqByFn = uniqByFn
+        this.opts = opts
+    }
+
+    static withKey<T>(
+        data: T[],
+        keyFn: (obj: T) => string,
+        opts?: Fuzzysort.Options
+    ): FuzzySearch<T> {
+        const datamap = _.groupBy(data, keyFn)
+        return new FuzzySearch(datamap, undefined, opts)
+    }
+
+    // Allows for multiple keys per object, e.g. aliases:
+    // [
+    //     { name: "Netherlands", "keys": ["Netherlands", "Nederland"] },
+    //     { name: "Spain", "keys": ["Spain", "España"] },
+    // ]
+    static withKeyArray<T>(
+        data: T[],
+        keysFn: (obj: T) => string[],
+        uniqByFn?: (obj: T) => PrimitiveType,
+        opts?: Fuzzysort.Options
+    ): FuzzySearch<T> {
+        const datamap: Record<string, T[]> = {}
+        data.forEach((d) => {
+            keysFn(d).forEach((key) => {
+                if (!datamap[key]) datamap[key] = [d]
+                else datamap[key].push(d)
+            })
+        })
+        return new FuzzySearch(datamap, uniqByFn, opts)
+    }
+
+    search(input: string): T[] {
+        const results = fuzzysort
+            .go(input, this.strings, this.opts)
+            .flatMap((result) => this.datamap[result.target])
+
+        if (this.uniqByFn) {
+            return _.uniqBy(results, this.uniqByFn)
+        }
+        return results
+    }
+
+    searchResults(input: string): Fuzzysort.Results {
+        return fuzzysort.go(input, this.strings, this.opts)
+    }
+
+    single(input: string, target: string): Fuzzysort.Result | null {
+        return fuzzysort.single(input, target)
+    }
+}
+
+type FuzzySearchResult = Fuzzysort.Result
+export { type FuzzySearchResult }

package/src/utils/MultiDimDataPageConfig.ts

@@ -0,0 +1,31 @@
+/**
+ * Stub for MultiDimDataPageConfig.
+ * Multi-dimensional data page configurations are specific to OWID's data pages.
+ */
+
+export interface MultiDimDataPageConfigRaw {
+    views?: unknown[]
+    dimensions?: unknown[]
+    [key: string]: unknown
+}
+
+export class MultiDimDataPageConfig {
+    constructor(_config: MultiDimDataPageConfigRaw) {}
+
+    static fromObject(_obj: MultiDimDataPageConfigRaw): MultiDimDataPageConfig {
+        return new MultiDimDataPageConfig(_obj)
+    }
+}
+
+export function extractMultiDimChoicesFromSearchParams(
+    _searchParams: URLSearchParams
+): Record<string, string> {
+    return {}
+}
+
+export function searchParamsToMultiDimView(
+    _searchParams: URLSearchParams,
+    _config: MultiDimDataPageConfig
+): unknown {
+    return null
+}

package/src/utils/OwidVariable.ts

@@ -0,0 +1,82 @@
+// todo: remove file
+
+import { observable, makeObservable } from "mobx"
+import {
+    Persistable,
+    updatePersistables,
+    objectWithPersistablesToObject,
+    deleteRuntimeAndUnchangedProps,
+} from "./persistable/Persistable.js"
+import {
+    OwidVariableDataTableConfigInterface,
+    OwidVariableDisplayConfigInterface,
+    OwidVariableRoundingMode,
+} from "../types/index.js"
+
+class OwidVariableDisplayConfigDefaults {
+    name: string | undefined = undefined
+    unit: string | undefined = undefined
+    shortUnit: string | undefined = undefined
+    isProjection: boolean | undefined = undefined
+    conversionFactor: number | undefined = undefined
+    roundingMode: OwidVariableRoundingMode | undefined = undefined
+    numDecimalPlaces: number | undefined = undefined
+    numSignificantFigures: number | undefined = undefined
+    tolerance: number | undefined = undefined
+    yearIsDay: boolean | undefined = undefined
+    zeroDay: string | undefined = undefined
+    entityAnnotationsMap: string | undefined = undefined
+    includeInTable: boolean | undefined = true
+    tableDisplay: OwidVariableDataTableConfigInterface | undefined = undefined
+    color: string | undefined = undefined
+    plotMarkersOnlyInLineChart: boolean | undefined = undefined
+
+    constructor() {
+        makeObservable(this, {
+            name: observable,
+            unit: observable,
+            shortUnit: observable,
+            isProjection: observable,
+            conversionFactor: observable,
+            roundingMode: observable,
+            numDecimalPlaces: observable,
+            numSignificantFigures: observable,
+            tolerance: observable,
+            yearIsDay: observable,
+            zeroDay: observable,
+            entityAnnotationsMap: observable,
+            includeInTable: observable,
+            tableDisplay: observable,
+            color: observable,
+            plotMarkersOnlyInLineChart: observable,
+        })
+    }
+}
+
+export class OwidVariableDisplayConfig
+    extends OwidVariableDisplayConfigDefaults
+    implements Persistable
+{
+    updateFromObject(obj?: Partial<OwidVariableDisplayConfigInterface>): void {
+        if (obj) updatePersistables(this, obj)
+    }
+
+    toObject(): OwidVariableDisplayConfigDefaults {
+        return deleteRuntimeAndUnchangedProps(
+            objectWithPersistablesToObject(this),
+            new OwidVariableDisplayConfigDefaults()
+        )
+    }
+
+    constructor(obj?: Partial<OwidVariableDisplayConfigInterface>) {
+        super()
+        if (obj) this.updateFromObject(obj)
+    }
+}
+
+// export interface OwidVariablesAndEntityKey {
+//     variables: {
+//         [id: string]: OwidVariableWithDataAndSource
+//     }
+//     entityKey: OwidEntityKey
+// }