@buildcanada/charts 0.1.0

package/src/grapher/lineCharts/LineChartThumbnail.tsx

@@ -0,0 +1,437 @@
+import React from "react"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import * as _ from "lodash-es"
+import { Bounds, SeriesName } from "../../utils/index.js"
+import { ChartInterface } from "../chart/ChartInterface"
+import { LineChartState } from "./LineChartState"
+import { LineChartProps } from "./LineChart.js"
+import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
+import {
+    LineChartManager,
+    PlacedLineChartSeries,
+    PlacedPoint,
+    RenderLineChartSeries,
+} from "./LineChartConstants"
+import {
+    BASE_FONT_SIZE,
+    DEFAULT_GRAPHER_BOUNDS,
+    GRAPHER_FONT_SCALE_12,
+} from "../core/GrapherConstants"
+import { AxisConfig, AxisManager } from "../axis/AxisConfig"
+import { Lines } from "./Lines"
+import {
+    getYAxisConfigDefaults,
+    toPlacedLineChartSeries,
+    toRenderLineChartSeries,
+} from "./LineChartHelpers"
+import {
+    HorizontalAxisComponent,
+    VerticalAxisZeroLine,
+} from "../axis/AxisViews"
+import {
+    InitialVerticalLabelsSeries,
+    VerticalLabelsState,
+} from "../verticalLabels/VerticalLabelsState"
+import { VerticalLabels } from "../verticalLabels/VerticalLabels"
+import { darkenColorForLine } from "../color/ColorUtils.js"
+import { NoDataModal } from "../noDataModal/NoDataModal"
+
+const DOT_RADIUS = 4
+const SPACE_BETWEEN_DOT_AND_LABEL = 4
+
+const LABEL_PADDING = DOT_RADIUS + SPACE_BETWEEN_DOT_AND_LABEL
+
+@observer
+export class LineChartThumbnail
+    extends React.Component<LineChartProps>
+    implements ChartInterface, AxisManager
+{
+    constructor(props: LineChartProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get chartState(): LineChartState {
+        return this.props.chartState
+    }
+
+    @computed private get manager(): LineChartManager {
+        return this.chartState.manager
+    }
+
+    @computed private get bounds(): Bounds {
+        return this.props.bounds ?? DEFAULT_GRAPHER_BOUNDS
+    }
+
+    @computed private get innerBounds(): Bounds {
+        return this.bounds
+            .padRight(this.paddedEndLabelsWidth)
+            .padLeft(this.paddedStartLabelsWidth)
+    }
+
+    @computed get fontSize(): number {
+        return this.manager.fontSize ?? BASE_FONT_SIZE
+    }
+
+    @computed get yAxisConfig(): AxisConfig {
+        const { yAxisConfig } = this.manager
+        const defaults = getYAxisConfigDefaults(yAxisConfig)
+        const custom = { hideAxis: true }
+        return new AxisConfig({ ...defaults, ...custom, ...yAxisConfig }, this)
+    }
+
+    @computed private get xAxisConfig(): AxisConfig {
+        const { xAxisConfig } = this.manager
+        const custom = { labelPadding: 0 }
+        return new AxisConfig({ ...custom, ...xAxisConfig }, this)
+    }
+
+    @computed private get horizontalAxisPart(): HorizontalAxis {
+        return this.chartState.toHorizontalAxis(this.xAxisConfig)
+    }
+
+    @computed private get verticalAxisPart(): VerticalAxis {
+        return this.chartState.toVerticalAxis(this.yAxisConfig)
+    }
+
+    @computed get dualAxis(): DualAxis {
+        return new DualAxis({
+            bounds: this.innerBounds,
+            verticalAxis: this.verticalAxisPart,
+            horizontalAxis: this.horizontalAxisPart,
+        })
+    }
+
+    @computed get xAxis(): HorizontalAxis {
+        return this.dualAxis.horizontalAxis
+    }
+
+    @computed get yAxis(): VerticalAxis {
+        return this.dualAxis.verticalAxis
+    }
+
+    @computed get placedSeries(): PlacedLineChartSeries[] {
+        return toPlacedLineChartSeries(this.chartState.series, {
+            chartState: this.chartState,
+            dualAxis: this.dualAxis,
+        })
+    }
+
+    @computed private get renderSeries(): RenderLineChartSeries[] {
+        return toRenderLineChartSeries(this.placedSeries, {
+            isFocusModeActive: this.chartState.isFocusModeActive,
+        })
+    }
+
+    /** Start points displayed as dots */
+    @computed private get visibleStartPoints(): PlacedPoint[] {
+        return this.renderSeries
+            .filter(
+                (series) =>
+                    this.visibleStartLabels.has(series.seriesName) &&
+                    // Only show start points for historical series, not projected ones
+                    !series.isProjection
+            )
+            .map((series) => _.minBy(series.placedPoints, (point) => point.x))
+            .filter((point) => point !== undefined)
+    }
+
+    /** End points displayed as dots */
+    @computed private get visibleEndPoints(): PlacedPoint[] {
+        return this.renderSeries
+            .filter(
+                (series) =>
+                    this.visibleEndLabels.has(series.seriesName) &&
+                    // When projected series exist in the chart, only show end dots
+                    // for the projected series. Otherwise, show end dots for all series
+                    (!this.hasProjectedSeries || series.isProjection)
+            )
+            .map((series) => _.maxBy(series.placedPoints, (point) => point.x))
+            .filter((point) => point !== undefined)
+    }
+
+    // Same as dualAxis.verticalAxis, but doesn't depend on innerBounds
+    @computed get outerBoundsVerticalAxis(): VerticalAxis {
+        const yAxis = this.verticalAxisPart.clone()
+        yAxis.range = this.bounds.yRange()
+        return yAxis
+    }
+
+    @computed private get labelFontSize(): number {
+        return Math.floor(GRAPHER_FONT_SCALE_12 * this.fontSize)
+    }
+
+    private formatLabel(value: number): string {
+        return this.chartState.formatColumn.formatValueShortWithAbbreviations(
+            value
+        )
+    }
+
+    @computed private get hasProjectedSeries(): boolean {
+        return this.chartState.series.some((series) => !!series.isProjection)
+    }
+
+    @computed private get labelsRange(): [number, number] {
+        const {
+            horizontalAxisPart,
+            manager: { chartAreaPadding = 0 },
+        } = this
+
+        return this.bounds
+            .expand({
+                top: chartAreaPadding,
+                bottom: chartAreaPadding + horizontalAxisPart.height,
+            })
+            .yRange()
+    }
+
+    @computed private get endLabelsState(): VerticalLabelsState | undefined {
+        if (!this.manager.showLegend) return undefined
+
+        let labelCandidateSeries = this.chartState.series
+
+        // If there is a projected series, only show the labels for the projected ones
+        if (this.hasProjectedSeries)
+            labelCandidateSeries = labelCandidateSeries.filter(
+                (series) => series.isProjection
+            )
+
+        // If any series is focused, only show the labels for the focused ones
+        if (this.chartState.isFocusModeActive)
+            labelCandidateSeries = labelCandidateSeries.filter(
+                (series) => series.focus.active
+            )
+
+        const endPointBySeriesName = new Map(
+            labelCandidateSeries.map((series) => [
+                series.seriesName,
+                _.maxBy(series.points, (point) => point.x),
+            ])
+        )
+
+        const series = labelCandidateSeries.map((series) => {
+            const { seriesName } = series
+
+            const endPoint = endPointBySeriesName.get(series.seriesName)
+            const value = endPoint?.y ?? 0
+
+            const yPosition = this.outerBoundsVerticalAxis.place(value)
+            const label = this.formatLabel(value)
+
+            const color = this.chartState.hasColorScale
+                ? darkenColorForLine(
+                      this.chartState.getColorScaleColor(endPoint?.colorValue)
+                  )
+                : series.color
+
+            const labelSeries = { seriesName, value, label, yPosition, color }
+
+            return { ...labelSeries, point: endPoint }
+        })
+
+        return new VerticalLabelsState(series, {
+            fontSize: this.labelFontSize,
+            fontWeight: 500,
+            yRange: this.labelsRange,
+            minSpacing: 2,
+            resolveCollision: (
+                s1: InitialVerticalLabelsSeries,
+                s2: InitialVerticalLabelsSeries
+            ): InitialVerticalLabelsSeries => {
+                const endPoint1 = endPointBySeriesName.get(s1.seriesName)
+                const endPoint2 = endPointBySeriesName.get(s2.seriesName)
+
+                const x1 = endPoint1?.x ?? 0
+                const x2 = endPoint2?.x ?? 0
+
+                // Prefer the series with the larger x value
+                if (x1 > x2) return s1
+                if (x2 > x1) return s2
+
+                return s1 // no preference
+            },
+        })
+    }
+
+    @computed private get startLabelsState(): VerticalLabelsState | undefined {
+        if (!this.manager.showLegend) return undefined
+
+        const showEntityNames =
+            !this.manager.isDisplayedAlongsideComplementaryTable
+
+        let labelCandidateSeries = this.chartState.series
+
+        // If there is a projected series, only show the labels for the historical ones
+        if (this.hasProjectedSeries)
+            labelCandidateSeries = labelCandidateSeries.filter(
+                (series) => !series.isProjection
+            )
+
+        // If any series is focused, only show the labels for the focused ones
+        if (this.chartState.isFocusModeActive)
+            labelCandidateSeries = labelCandidateSeries.filter(
+                (series) => series.focus.active
+            )
+
+        const startPointBySeriesName = new Map(
+            labelCandidateSeries.map((series) => [
+                series.seriesName,
+                _.minBy(series.points, (point) => point.x),
+            ])
+        )
+
+        const series = labelCandidateSeries
+            .map((series) => {
+                const { seriesName } = series
+
+                // Don't show start label if there is only a single point
+                if (series.points.length < 2) return undefined
+
+                const startPoint = startPointBySeriesName.get(series.seriesName)
+                const value = startPoint?.y ?? 0
+
+                const yPosition = this.outerBoundsVerticalAxis.place(value)
+                const label = showEntityNames
+                    ? seriesName
+                    : this.formatLabel(value)
+
+                const color = this.chartState.hasColorScale
+                    ? darkenColorForLine(
+                          this.chartState.getColorScaleColor(
+                              startPoint?.colorValue
+                          )
+                      )
+                    : series.color
+
+                const labelSeries = {
+                    seriesName,
+                    value,
+                    label,
+                    yPosition,
+                    color,
+                }
+                return { ...labelSeries, point: startPoint }
+            })
+            .filter((series) => series !== undefined)
+
+        return new VerticalLabelsState(series, {
+            fontSize: this.labelFontSize,
+            fontWeight: 500,
+            maxWidth: showEntityNames ? 0.25 * this.bounds.width : undefined,
+            minSpacing: showEntityNames ? 5 : 2,
+            yRange: this.labelsRange,
+            resolveCollision: (
+                s1: InitialVerticalLabelsSeries,
+                s2: InitialVerticalLabelsSeries
+            ): InitialVerticalLabelsSeries => {
+                // Prefer to label series that have an end label
+                if (this.visibleEndLabels.has(s1.seriesName)) return s1
+                if (this.visibleEndLabels.has(s2.seriesName)) return s2
+
+                const startPoint1 = startPointBySeriesName.get(s1.seriesName)
+                const startPoint2 = startPointBySeriesName.get(s2.seriesName)
+
+                const x1 = startPoint1?.x ?? 0
+                const x2 = startPoint2?.x ?? 0
+
+                // Prefer the series with the larger x value
+                if (x1 > x2) return s1
+                if (x2 > x1) return s2
+
+                return s1 // no preference
+            },
+        })
+    }
+
+    @computed private get endLabelsWidth(): number {
+        return this.endLabelsState?.width ?? 0
+    }
+
+    @computed private get startLabelsWidth(): number {
+        return this.startLabelsState?.width ?? 0
+    }
+
+    @computed private get paddedEndLabelsWidth(): number {
+        return this.endLabelsWidth > 0 ? this.endLabelsWidth + LABEL_PADDING : 0
+    }
+
+    @computed private get paddedStartLabelsWidth(): number {
+        return this.startLabelsWidth > 0
+            ? this.startLabelsWidth + LABEL_PADDING
+            : 0
+    }
+
+    @computed private get visibleStartLabels(): Set<SeriesName> {
+        return new Set(
+            this.startLabelsState?.series.map((series) => series.seriesName)
+        )
+    }
+
+    @computed private get visibleEndLabels(): Set<SeriesName> {
+        return new Set(
+            this.endLabelsState?.series.map((series) => series.seriesName)
+        )
+    }
+
+    override render(): React.ReactElement {
+        if (this.chartState.errorInfo.reason)
+            return (
+                <NoDataModal
+                    manager={this.manager}
+                    bounds={this.props.bounds}
+                    message={this.chartState.errorInfo.reason}
+                />
+            )
+
+        return (
+            <>
+                <VerticalAxisZeroLine
+                    verticalAxis={this.dualAxis.verticalAxis}
+                    bounds={this.dualAxis.innerBounds}
+                />
+                <HorizontalAxisComponent
+                    axis={this.dualAxis.horizontalAxis}
+                    bounds={this.dualAxis.bounds}
+                    showEndpointsOnly
+                />
+                <Lines
+                    series={this.renderSeries}
+                    dualAxis={this.dualAxis}
+                    multiColor={this.chartState.hasColorScale}
+                    hidePoints
+                    lineStrokeWidth={1.5}
+                    lineOutlineWidth={0}
+                    isStatic={this.manager.isStatic}
+                />
+                {this.visibleStartPoints.map((point, index) => (
+                    <Dot key={index} point={point} />
+                ))}
+                {this.visibleEndPoints.map((point, index) => (
+                    <Dot key={index} point={point} />
+                ))}
+                {this.startLabelsState && (
+                    <VerticalLabels
+                        state={this.startLabelsState}
+                        yAxis={this.dualAxis.verticalAxis}
+                        x={this.innerBounds.left - LABEL_PADDING}
+                        xAnchor="end"
+                    />
+                )}
+                {this.endLabelsState && (
+                    <VerticalLabels
+                        state={this.endLabelsState}
+                        yAxis={this.dualAxis.verticalAxis}
+                        x={this.innerBounds.right + LABEL_PADDING}
+                    />
+                )}
+            </>
+        )
+    }
+}
+
+function Dot({ point }: { point: PlacedPoint }): React.ReactElement | null {
+    return (
+        <circle cx={point.x} cy={point.y} r={DOT_RADIUS} fill={point.color} />
+    )
+}

package/src/grapher/lineCharts/Lines.tsx

@@ -0,0 +1,258 @@
+import * as _ from "lodash-es"
+import React from "react"
+import {
+    Bounds,
+    PointVector,
+    makeIdForHumanConsumption,
+    pointsToPath,
+} from "../../utils/index.js"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { GRAPHER_OPACITY_MUTE } from "../core/GrapherConstants"
+import {
+    DEFAULT_LINE_COLOR,
+    DEFAULT_LINE_OUTLINE_WIDTH,
+    DEFAULT_MARKER_RADIUS,
+    DEFAULT_STROKE_WIDTH,
+    LinesProps,
+    PlacedLineChartSeries,
+    RenderLineChartSeries,
+} from "./LineChartConstants"
+import { getSeriesKey } from "../chart/ChartUtils"
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants"
+import { MultiColorPolyline } from "../scatterCharts/MultiColorPolyline"
+
+@observer
+export class Lines extends React.Component<LinesProps> {
+    constructor(props: LinesProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get bounds(): Bounds {
+        const { horizontalAxis, verticalAxis } = this.props.dualAxis
+        return Bounds.fromCorners(
+            new PointVector(horizontalAxis.range[0], verticalAxis.range[0]),
+            new PointVector(horizontalAxis.range[1], verticalAxis.range[1])
+        )
+    }
+
+    @computed private get markerRadius(): number {
+        return this.props.markerRadius ?? DEFAULT_MARKER_RADIUS
+    }
+
+    @computed private get strokeWidth(): number {
+        return this.props.lineStrokeWidth ?? DEFAULT_STROKE_WIDTH
+    }
+
+    @computed private get outlineWidth(): number {
+        return this.props.lineOutlineWidth ?? DEFAULT_LINE_OUTLINE_WIDTH
+    }
+
+    @computed private get outlineColor(): string {
+        return this.props.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT
+    }
+
+    // Don't display point markers if there are very many of them for performance reasons
+    // Note that we're using circle elements instead of marker-mid because marker performance in Safari 10 is very poor for some reason
+    @computed private get hasMarkers(): boolean {
+        if (this.props.hidePoints) return false
+        const totalPoints = _.sum(
+            this.props.series
+                .filter((series) => this.seriesHasMarkers(series))
+                .map((series) => series.placedPoints.length)
+        )
+        return totalPoints < 500
+    }
+
+    @computed private get hasMarkersOnlySeries(): boolean {
+        return this.props.series.some((series) => series.plotMarkersOnly)
+    }
+
+    private seriesHasMarkers(series: RenderLineChartSeries): boolean {
+        if (
+            series.hover.background ||
+            series.isProjection ||
+            // if the series has a line, but there is another one that hasn't, then
+            // don't show markers since the plotted line is likely a smoothed version
+            (this.hasMarkersOnlySeries && !series.plotMarkersOnly)
+        )
+            return false
+        return !series.focus.background || series.hover.active
+    }
+
+    private seriesIsInForeground(series: RenderLineChartSeries): boolean {
+        return (
+            series.hover.active ||
+            series.focus.active ||
+            (series.focus.idle && series.hover.idle)
+        )
+    }
+
+    private renderLine(
+        series: RenderLineChartSeries
+    ): React.ReactElement | undefined {
+        if (series.plotMarkersOnly) return
+        const { isProjection } = series
+
+        const isInForeground = this.seriesIsInForeground(series)
+
+        const color = series.placedPoints[0]?.color ?? DEFAULT_LINE_COLOR
+
+        const strokeDasharray = isProjection ? "2,3" : undefined
+        const strokeWidth = isInForeground
+            ? this.strokeWidth
+            : 0.66 * this.strokeWidth
+        const strokeOpacity = isInForeground ? 1 : GRAPHER_OPACITY_MUTE
+
+        const showOutline = isInForeground
+        const outlineColor = this.outlineColor
+        const outlineWidth = strokeWidth + this.outlineWidth * 2
+
+        const outline = (
+            <LinePath
+                id={makeIdForHumanConsumption("outline", series.displayName)}
+                placedPoints={series.placedPoints}
+                stroke={outlineColor}
+                strokeWidth={outlineWidth.toFixed(1)}
+            />
+        )
+
+        const line = this.props.multiColor ? (
+            <MultiColorPolyline
+                id={makeIdForHumanConsumption("line", series.seriesName)}
+                points={series.placedPoints}
+                strokeLinejoin="round"
+                strokeWidth={strokeWidth.toFixed(1)}
+                strokeDasharray={strokeDasharray}
+                strokeOpacity={strokeOpacity}
+            />
+        ) : (
+            <LinePath
+                id={makeIdForHumanConsumption("line", series.seriesName)}
+                placedPoints={series.placedPoints}
+                stroke={color}
+                strokeWidth={strokeWidth.toFixed(1)}
+                strokeOpacity={strokeOpacity}
+                strokeDasharray={strokeDasharray}
+            />
+        )
+
+        return (
+            <>
+                {showOutline && outline}
+                {line}
+            </>
+        )
+    }
+
+    private renderLineMarkers(
+        series: RenderLineChartSeries
+    ): React.ReactElement | undefined {
+        const { horizontalAxis } = this.props.dualAxis
+
+        const forceMarkers =
+            // If the series only contains one point, then we will always want to
+            // show a marker/circle because we can't draw a line.
+            series.placedPoints.length === 1 ||
+            // If no line is plotted, we'll always want to show markers
+            series.plotMarkersOnly
+
+        // check if we should hide markers on the chart and series level
+        const hideMarkers = !this.hasMarkers || !this.seriesHasMarkers(series)
+
+        if (hideMarkers && !forceMarkers) return
+
+        const opacity = this.seriesIsInForeground(series)
+            ? 1
+            : GRAPHER_OPACITY_MUTE
+
+        const outlineColor = series.plotMarkersOnly
+            ? this.outlineColor
+            : undefined
+        const outlineWidth = series.plotMarkersOnly
+            ? this.outlineWidth
+            : undefined
+
+        return (
+            <g id={makeIdForHumanConsumption("datapoints", series.displayName)}>
+                {series.placedPoints.map((value, index) => (
+                    <circle
+                        id={makeIdForHumanConsumption(
+                            horizontalAxis.formatTick(value.time)
+                        )}
+                        key={index}
+                        cx={value.x}
+                        cy={value.y}
+                        r={this.markerRadius}
+                        fill={value.color}
+                        stroke={outlineColor}
+                        strokeWidth={outlineWidth}
+                        opacity={opacity}
+                    />
+                ))}
+            </g>
+        )
+    }
+
+    private renderLines(): React.ReactElement {
+        return (
+            <>
+                {this.props.series.map((series, index) => (
+                    <React.Fragment key={getSeriesKey(series, index)}>
+                        {this.renderLine(series)}
+                        {this.renderLineMarkers(series)}
+                    </React.Fragment>
+                ))}
+            </>
+        )
+    }
+
+    private renderStatic(): React.ReactElement {
+        return (
+            <g id={makeIdForHumanConsumption("lines")}>{this.renderLines()}</g>
+        )
+    }
+
+    private renderInteractive(): React.ReactElement {
+        const { bounds } = this
+        return (
+            <g className="Lines">
+                <rect
+                    x={Math.round(bounds.x)}
+                    y={Math.round(bounds.y)}
+                    width={Math.round(bounds.width)}
+                    height={Math.round(bounds.height)}
+                    fill="rgba(255,255,255,0)"
+                    opacity={0}
+                />
+                {this.renderLines()}
+            </g>
+        )
+    }
+
+    override render(): React.ReactElement {
+        return this.props.isStatic
+            ? this.renderStatic()
+            : this.renderInteractive()
+    }
+}
+
+interface LinePathProps extends React.SVGProps<SVGPathElement> {
+    placedPoints: PlacedLineChartSeries["placedPoints"]
+}
+
+function LinePath(props: LinePathProps): React.ReactElement {
+    const { placedPoints, ...pathProps } = props
+    const coords = placedPoints.map(({ x, y }) => [x, y] as [number, number])
+    return (
+        <path
+            fill="none"
+            strokeLinecap="butt"
+            strokeLinejoin="round"
+            stroke={DEFAULT_LINE_COLOR}
+            {...pathProps}
+            d={pointsToPath(coords)}
+        />
+    )
+}