@buildcanada/charts 0.1.0

package/src/grapher/scatterCharts/ConnectedScatterLegend.tsx

@@ -0,0 +1,143 @@
+import * as React from "react"
+import { computed, makeObservable } from "mobx"
+import { Triangle } from "./Triangle"
+import { TextWrap } from "../../components/index.js"
+import { BASE_FONT_SIZE } from "../core/GrapherConstants"
+import { makeIdForHumanConsumption } from "../../utils/index.js"
+import * as _ from "lodash-es"
+
+export interface ConnectedScatterLegendManager {
+    sidebarWidth: number
+    displayStartTime: string
+    displayEndTime: string
+    fontSize?: number
+    compareEndPointsOnly?: boolean
+}
+
+export class ConnectedScatterLegend {
+    manager: ConnectedScatterLegendManager
+    constructor(manager: ConnectedScatterLegendManager) {
+        makeObservable(this)
+        this.manager = manager
+    }
+
+    @computed get fontSize(): number {
+        return 0.7 * (this.manager.fontSize ?? BASE_FONT_SIZE)
+    }
+    @computed get fontColor(): string {
+        return "#333"
+    }
+    @computed get maxLabelWidth(): number {
+        return this.manager.sidebarWidth / 3
+    }
+
+    @computed get startLabel(): TextWrap {
+        const { manager, maxLabelWidth, fontSize } = this
+        return new TextWrap({
+            text: manager.displayStartTime,
+            fontSize,
+            maxWidth: maxLabelWidth,
+            lineHeight: 1,
+        })
+    }
+
+    @computed get endLabel(): TextWrap {
+        const { manager, maxLabelWidth, fontSize } = this
+        return new TextWrap({
+            text: manager.displayEndTime,
+            fontSize,
+            maxWidth: maxLabelWidth,
+            lineHeight: 1,
+        })
+    }
+
+    @computed get width(): number {
+        return this.manager.sidebarWidth
+    }
+
+    @computed get height(): number {
+        return Math.max(this.startLabel.height, this.endLabel.height)
+    }
+
+    render(
+        targetX: number,
+        targetY: number,
+        renderOptions: React.SVGAttributes<SVGGElement> = {}
+    ): React.ReactElement {
+        const { manager, startLabel, endLabel, fontColor } = this
+
+        const lineLeft = targetX + startLabel.width + 5
+        const lineRight = targetX + manager.sidebarWidth - endLabel.width - 5
+        const lineY = targetY + this.height / 2 - 0.5
+
+        return (
+            <g
+                id={makeIdForHumanConsumption("arrow-legend")}
+                className="ConnectedScatterLegend"
+                {...renderOptions}
+            >
+                <rect
+                    x={targetX}
+                    y={targetY}
+                    width={this.width}
+                    height={this.height}
+                    fill="#fff"
+                    opacity={0}
+                />
+                {startLabel.renderSVG(targetX, targetY, {
+                    textProps: { fill: fontColor },
+                })}
+                {endLabel.renderSVG(
+                    targetX + manager.sidebarWidth - endLabel.width,
+                    targetY,
+                    { textProps: { fill: fontColor } }
+                )}
+                <line
+                    x1={lineLeft}
+                    y1={lineY}
+                    x2={lineRight}
+                    y2={lineY}
+                    stroke="#666"
+                    strokeWidth={1}
+                />
+                <circle
+                    cx={lineLeft}
+                    cy={lineY}
+                    r={2}
+                    fill="#666"
+                    stroke="#ccc"
+                    strokeWidth={0.2}
+                />
+                {!manager.compareEndPointsOnly && (
+                    <React.Fragment>
+                        <circle
+                            cx={lineLeft + (lineRight - lineLeft) / 3}
+                            cy={lineY}
+                            r={2}
+                            fill="#666"
+                            stroke="#ccc"
+                            strokeWidth={0.2}
+                        />
+                        <circle
+                            cx={lineLeft + (2 * (lineRight - lineLeft)) / 3}
+                            cy={lineY}
+                            r={2}
+                            fill="#666"
+                            stroke="#ccc"
+                            strokeWidth={0.2}
+                        />
+                    </React.Fragment>
+                )}
+                <Triangle
+                    cx={lineRight}
+                    cy={lineY}
+                    r={3}
+                    rotation={90}
+                    fill="#666"
+                    stroke="#ccc"
+                    strokeWidth={0.2}
+                />
+            </g>
+        )
+    }
+}

package/src/grapher/scatterCharts/MultiColorPolyline.tsx

@@ -0,0 +1,129 @@
+import * as React from "react"
+import * as R from "remeda"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+
+interface MultiColorPolylinePoint {
+    x: number
+    y: number
+    color: string
+}
+
+interface Point {
+    x: number
+    y: number
+}
+
+interface Segment {
+    points: Point[]
+    color: string
+}
+
+function getMidpoint(a: Point, b: Point): Point {
+    return {
+        x: (a.x + b.x) / 2,
+        y: (a.y + b.y) / 2,
+    }
+}
+
+function toPoint(point: MultiColorPolylinePoint): Point {
+    return {
+        x: point.x,
+        y: point.y,
+    }
+}
+
+export function getSegmentsFromPoints(
+    points: MultiColorPolylinePoint[]
+): Segment[] {
+    const segments: Segment[] = []
+    points.forEach((currentPoint) => {
+        const currentSegment = R.last(segments)
+        if (currentSegment === undefined) {
+            segments.push({
+                points: [toPoint(currentPoint)],
+                color: currentPoint.color,
+            })
+        } else if (currentSegment.color === currentPoint.color) {
+            currentSegment.points.push(toPoint(currentPoint))
+        } else {
+            const midPoint = getMidpoint(
+                R.last(currentSegment.points)!,
+                currentPoint
+            )
+            currentSegment.points.push(midPoint)
+            segments.push({
+                points: [midPoint, toPoint(currentPoint)],
+                color: currentPoint.color,
+            })
+        }
+    })
+    return segments
+}
+
+function toSvgPoints(points: Point[]): string {
+    // TODO round to 1 decimal place to decrease SVG size?
+    return points.map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ")
+}
+
+type MultiColorPolylineProps = Omit<
+    React.SVGProps<SVGPolylineElement>,
+    "fill" | "stroke" | "points" | "strokeLinecap"
+> & {
+    points: MultiColorPolylinePoint[]
+}
+
+// The current approach constructs multiple polylines and joins them together at midpoints.
+// Joining at midpoints allows clean miter joints, since we're joining two lines at an identical
+// angle.
+//
+// The benefit of this approach is that it generalises to work in most cases. Where it breaks:
+// - When a color transition happening at a midpoint is misleading.
+// - stroke-dasharray isn't handled well because the pattern restarts on every new line. This could
+//   be improved by specifying a `stroke-dashoffset` automatically.
+//   We can approximate the line length pretty well without rendering:
+//   https://observablehq.com/@danielgavrilov/does-gettotallength-of-polyline-path-equal-the-sum-of-coord
+//
+// Alternative approaches considered:
+// - Single line, color by gradient: this works if the line is monotonically increasing in one axis
+//   (X or Y), but otherwise doesn't (a spiral for example doesn't work).
+// - Compute meter joints ourselves (https://bl.ocks.org/mbostock/4163057): this results in the most
+//   accurate output, but is most complex & slow.
+//
+@observer
+export class MultiColorPolyline extends React.Component<MultiColorPolylineProps> {
+    constructor(props: MultiColorPolylineProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get segments(): Segment[] {
+        return getSegmentsFromPoints(this.props.points)
+    }
+
+    override render(): React.ReactElement {
+        const { markerStart, markerMid, markerEnd, ...polylineProps } =
+            this.props
+        return (
+            <g id={this.props.id}>
+                {this.segments.map((group, index) => (
+                    <polyline
+                        {...polylineProps}
+                        key={index}
+                        points={toSvgPoints(group.points)}
+                        stroke={group.color}
+                        fill="none"
+                        strokeLinecap="butt" // `butt` allows us to have clean miter joints
+                        markerStart={index === 0 ? markerStart : undefined}
+                        markerMid={markerMid}
+                        markerEnd={
+                            index === this.segments.length - 1
+                                ? markerEnd
+                                : undefined
+                        }
+                    />
+                ))}
+            </g>
+        )
+    }
+}

package/src/grapher/scatterCharts/NoDataSection.scss

@@ -0,0 +1,14 @@
+.NoDataSection {
+    .heading {
+        @include grapher_h5-black-caps;
+        margin-bottom: 0.25em;
+    }
+
+    .body {
+        @include grapher_label-2-regular;
+
+        li {
+            margin-bottom: 0.15em;
+        }
+    }
+}

package/src/grapher/scatterCharts/NoDataSection.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Bounds, HorizontalAlign } from "../../utils/index.js"
+import {
+    GRAPHER_FONT_SCALE_11,
+    GRAPHER_FONT_SCALE_12,
+} from "../core/GrapherConstants"
+import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
+
+export function NoDataSection({
+    seriesNames,
+    bounds,
+    align = HorizontalAlign.left,
+    baseFontSize = 16,
+}: {
+    seriesNames: string[]
+    bounds: Bounds
+    align?: HorizontalAlign
+    baseFontSize?: number
+}): React.ReactElement {
+    {
+        const displayedNames = seriesNames.slice(0, 5)
+        const remaining = Math.max(
+            0,
+            seriesNames.length - displayedNames.length
+        )
+
+        const headingFontsize = GRAPHER_FONT_SCALE_11 * baseFontSize
+        const bodyFontsize = GRAPHER_FONT_SCALE_12 * baseFontSize
+
+        return (
+            <foreignObject
+                className="NoDataSection"
+                {...bounds.toProps()}
+                style={{
+                    textAlign:
+                        align === HorizontalAlign.right ? "right" : "left",
+                    color: GRAPHER_LIGHT_TEXT,
+                }}
+            >
+                <div className="heading" style={{ fontSize: headingFontsize }}>
+                    No data
+                </div>
+                <div className="body" style={{ fontSize: bodyFontsize }}>
+                    <ul>
+                        {displayedNames.map((entityName) => (
+                            <li key={entityName}>{entityName}</li>
+                        ))}
+                    </ul>
+                    {remaining > 0 && (
+                        <div>& {remaining === 1 ? "one" : remaining} more</div>
+                    )}
+                </div>
+            </foreignObject>
+        )
+    }
+}