@buildcanada/charts 0.1.0

package/src/grapher/stackedCharts/StackedAreaChartThumbnail.tsx

@@ -0,0 +1,215 @@
+import * as _ from "lodash-es"
+import React from "react"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { ChartInterface } from "../chart/ChartInterface"
+import { StackedAreaChartState } from "./StackedAreaChartState.js"
+import { type StackedAreaChartProps } from "./StackedAreaChart.js"
+import { Bounds, excludeUndefined } from "../../utils/index.js"
+import {
+    BASE_FONT_SIZE,
+    DEFAULT_GRAPHER_BOUNDS,
+    GRAPHER_FONT_SCALE_12,
+} from "../core/GrapherConstants"
+import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
+import { ChartManager } from "../chart/ChartManager"
+import { AxisConfig, AxisManager } from "../axis/AxisConfig"
+import {
+    HorizontalAxisComponent,
+    VerticalAxisZeroLine,
+} from "../axis/AxisViews"
+import { StackedAreas } from "./StackedAreas"
+import {
+    InitialVerticalLabelsSeries,
+    VerticalLabelsState,
+} from "../verticalLabels/VerticalLabelsState"
+import { VerticalLabels } from "../verticalLabels/VerticalLabels"
+import { resolveCollision } from "./StackedUtils"
+import { NoDataModal } from "../noDataModal/NoDataModal"
+
+const LEGEND_PADDING = 4
+
+@observer
+export class StackedAreaChartThumbnail
+    extends React.Component<StackedAreaChartProps>
+    implements ChartInterface, AxisManager
+{
+    constructor(props: StackedAreaChartProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get chartState(): StackedAreaChartState {
+        return this.props.chartState
+    }
+
+    @computed get manager(): ChartManager {
+        return this.chartState.manager
+    }
+
+    @computed get fontSize(): number {
+        return this.manager.fontSize ?? BASE_FONT_SIZE
+    }
+
+    @computed private get bounds(): Bounds {
+        return this.props.bounds ?? DEFAULT_GRAPHER_BOUNDS
+    }
+
+    @computed private get innerBounds(): Bounds {
+        return this.bounds.padRight(this.paddedLabelsWidth)
+    }
+
+    @computed private get xAxisConfig(): AxisConfig {
+        const { xAxisConfig } = this.manager
+        const custom = { hideGridlines: true, labelPadding: 0 }
+        return new AxisConfig({ ...custom, ...xAxisConfig }, this)
+    }
+
+    @computed private get yAxisConfig(): AxisConfig {
+        const { yAxisConfig } = this.manager
+        const custom = { nice: true, hideAxis: true }
+        return new AxisConfig({ ...custom, ...yAxisConfig }, this)
+    }
+
+    @computed private get horizontalAxisPart(): HorizontalAxis {
+        return this.chartState.toHorizontalAxis(this.xAxisConfig)
+    }
+
+    @computed private get verticalAxisPart(): VerticalAxis {
+        return this.chartState.toVerticalAxis(this.yAxisConfig)
+    }
+
+    @computed private get dualAxis(): DualAxis {
+        const { horizontalAxisPart, verticalAxisPart } = this
+        return new DualAxis({
+            bounds: this.innerBounds,
+            horizontalAxis: horizontalAxisPart,
+            verticalAxis: verticalAxisPart,
+        })
+    }
+
+    @computed get xAxis(): HorizontalAxis {
+        return this.dualAxis.horizontalAxis
+    }
+
+    @computed get yAxis(): VerticalAxis {
+        return this.dualAxis.verticalAxis
+    }
+
+    @computed private get labelFontSize(): number {
+        return Math.floor(GRAPHER_FONT_SCALE_12 * this.fontSize)
+    }
+
+    // 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 labelsRange(): [number, number] {
+        const {
+            horizontalAxisPart,
+            manager: { chartAreaPadding = 0 },
+        } = this
+
+        return this.bounds
+            .expand({
+                top: chartAreaPadding,
+                bottom: chartAreaPadding + horizontalAxisPart.height,
+            })
+            .yRange()
+    }
+
+    @computed private get verticalLabelsState():
+        | VerticalLabelsState
+        | undefined {
+        if (
+            !this.manager.showLegend ||
+            this.manager.isDisplayedAlongsideComplementaryTable
+        )
+            return undefined
+
+        const series = excludeUndefined(
+            this.chartState.series.map((series, seriesIndex) => {
+                const { seriesName, color, focus } = series
+
+                // Don't label background series
+                if (focus?.background) return undefined
+
+                const value = this.chartState.midpoints[seriesIndex]
+
+                const yPosition = this.outerBoundsVerticalAxis.place(value)
+                const label = seriesName
+
+                return { series, seriesName, value, label, yPosition, color }
+            })
+        )
+
+        return new VerticalLabelsState(series, {
+            fontSize: this.labelFontSize,
+            fontWeight: 500,
+            maxWidth: 0.25 * this.bounds.width,
+            yRange: this.labelsRange,
+            resolveCollision: (
+                s1: InitialVerticalLabelsSeries,
+                s2: InitialVerticalLabelsSeries
+            ): InitialVerticalLabelsSeries => {
+                const series1 = this.chartState.seriesByName.get(s1.seriesName)
+                const series2 = this.chartState.seriesByName.get(s2.seriesName)
+
+                if (!series1 || !series2) return s1 // no preference
+
+                const picked = resolveCollision(series1, series2)
+                if (picked?.seriesName === s1.seriesName) return s1
+                if (picked?.seriesName === s2.seriesName) return s2
+
+                return s1 // no preference
+            },
+        })
+    }
+
+    @computed private get labelsWidth(): number {
+        return this.verticalLabelsState?.width ?? 0
+    }
+
+    @computed private get paddedLabelsWidth(): number {
+        return this.labelsWidth ? this.labelsWidth + LEGEND_PADDING : 0
+    }
+
+    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
+                />
+                <StackedAreas
+                    dualAxis={this.dualAxis}
+                    seriesArr={this.chartState.series}
+                />
+                {this.verticalLabelsState && (
+                    <VerticalLabels
+                        state={this.verticalLabelsState}
+                        yAxis={this.dualAxis.verticalAxis}
+                        x={this.innerBounds.right + LEGEND_PADDING}
+                    />
+                )}
+            </>
+        )
+    }
+}

package/src/grapher/stackedCharts/StackedAreas.tsx

@@ -0,0 +1,223 @@
+import * as _ from "lodash-es"
+import * as React from "react"
+import {
+    pointsToPath,
+    makeSafeForCSS,
+    Time,
+    lastOfNonEmptyArray,
+    makeIdForHumanConsumption,
+    bind,
+} from "../../utils/index.js"
+import { computed, makeObservable } from "mobx"
+import { SeriesName } from "../../types/index.js"
+import { observer } from "mobx-react"
+import { DualAxis } from "../axis/Axis"
+import { rgb } from "d3-color"
+import {
+    AREA_OPACITY,
+    BORDER_OPACITY,
+    BORDER_WIDTH,
+    StackedPlacedPoint,
+    StackedPlacedSeries,
+    StackedPoint,
+    StackedSeries,
+} from "./StackedConstants"
+
+interface AreasProps extends React.SVGAttributes<SVGGElement> {
+    dualAxis: DualAxis
+    seriesArr: readonly StackedSeries<Time>[]
+    hoveredSeriesName?: SeriesName
+    onAreaMouseEnter?: (seriesName: SeriesName) => void
+    onAreaMouseLeave?: () => void
+}
+
+@observer
+export class StackedAreas extends React.Component<AreasProps> {
+    constructor(props: AreasProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @bind placePoint(point: StackedPoint<number>): StackedPlacedPoint {
+        const { dualAxis } = this.props
+        const { horizontalAxis, verticalAxis } = dualAxis
+        return [
+            horizontalAxis.place(point.position),
+            verticalAxis.place(point.value + point.valueOffset),
+        ]
+    }
+
+    // This places a whole series, but the points only represent the top of the area.
+    // Later steps are necessary to display them as a filled area.
+    @bind placeSeries(
+        series: StackedSeries<number>
+    ): Array<StackedPlacedPoint> {
+        const { dualAxis } = this.props
+        const { horizontalAxis, verticalAxis } = dualAxis
+
+        if (series.points.length > 1) {
+            return series.points.map(this.placePoint)
+        } else if (series.points.length === 1) {
+            // We only have one point, so make it so it stretches out over the whole x axis range
+            // There are two cases here that we need to consider:
+            // (1) In unfaceted charts, the x domain will be a single year, so we need to ensure that the area stretches
+            //     out over the full range of the x axis.
+            // (2) In faceted charts, the x domain may span multiple years, so we need to ensure that the area stretches
+            //     out only over year - 0.5 to year + 0.5, additionally making sure we don't put points outside the x range.
+            //
+            // -@marcelgerber, 2023-04-24
+            const point = series.points[0]
+            const y = verticalAxis.place(point.value + point.valueOffset)
+            const singleValueXDomain =
+                horizontalAxis.domain[0] === horizontalAxis.domain[1]
+
+            if (singleValueXDomain) {
+                // Case (1)
+                return [
+                    [horizontalAxis.range[0], y],
+                    [horizontalAxis.range[1], y],
+                ]
+            } else {
+                // Case (2)
+                const leftX = Math.max(
+                    horizontalAxis.place(point.position - 0.5),
+                    horizontalAxis.range[0]
+                )
+                const rightX = Math.min(
+                    horizontalAxis.place(point.position + 0.5),
+                    horizontalAxis.range[1]
+                )
+
+                return [
+                    [leftX, y],
+                    [rightX, y],
+                ]
+            }
+        } else return []
+    }
+
+    @computed get placedSeriesArr(): StackedPlacedSeries<number>[] {
+        const { seriesArr } = this.props
+        return seriesArr
+            .filter((series) => !series.isAllZeros)
+            .map((series) => ({
+                ...series,
+                placedPoints: this.placeSeries(series),
+            }))
+    }
+
+    @computed get isHoverModeActive(): boolean {
+        return this.props.hoveredSeriesName !== undefined
+    }
+
+    @computed get isFocusModeActive(): boolean {
+        return this.props.seriesArr.some((series) => series.focus?.active)
+    }
+
+    @computed private get areas(): React.ReactElement[] {
+        const { placedSeriesArr } = this
+        const { dualAxis, hoveredSeriesName } = this.props
+        const { verticalAxis } = dualAxis
+
+        return placedSeriesArr.map((series, index) => {
+            const { placedPoints } = series
+            let prevPoints: Array<StackedPlacedPoint>
+            if (index > 0) {
+                prevPoints = placedSeriesArr[index - 1].placedPoints
+            } else {
+                prevPoints = [
+                    [
+                        placedPoints[0][0], // placed x coord of first (= leftmost) point in chart
+                        verticalAxis.range[0],
+                    ],
+                    [
+                        lastOfNonEmptyArray(placedPoints)[0], // placed x coord of last (= rightmost) point in chart
+                        verticalAxis.range[0],
+                    ],
+                ]
+            }
+            const points = [...placedPoints, ...prevPoints.toReversed()]
+            const opacity =
+                !this.isHoverModeActive && !this.isFocusModeActive
+                    ? AREA_OPACITY.DEFAULT // normal opacity
+                    : hoveredSeriesName === series.seriesName ||
+                        series.focus?.active
+                      ? AREA_OPACITY.FOCUS // hovered or focused
+                      : AREA_OPACITY.MUTE // background
+
+            return (
+                <path
+                    id={makeIdForHumanConsumption(series.seriesName)}
+                    className={makeSafeForCSS(series.seriesName) + "-area"}
+                    key={series.seriesName + "-area"}
+                    strokeLinecap="round"
+                    d={pointsToPath(points)}
+                    fill={series.color}
+                    fillOpacity={opacity}
+                    clipPath={this.props.clipPath}
+                    onMouseEnter={(): void => {
+                        this.props.onAreaMouseEnter?.(series.seriesName)
+                    }}
+                    onMouseLeave={(): void => {
+                        this.props.onAreaMouseLeave?.()
+                    }}
+                />
+            )
+        })
+    }
+
+    @computed private get borders(): React.ReactElement[] {
+        const { placedSeriesArr } = this
+        const { hoveredSeriesName } = this.props
+
+        return placedSeriesArr.map((placedSeries) => {
+            const opacity =
+                !this.isHoverModeActive && !this.isFocusModeActive
+                    ? BORDER_OPACITY.DEFAULT // normal opacity
+                    : hoveredSeriesName === placedSeries.seriesName ||
+                        placedSeries.focus?.active
+                      ? BORDER_OPACITY.FOCUS // hovered or focused
+                      : BORDER_OPACITY.MUTE // background
+            const strokeWidth =
+                hoveredSeriesName === placedSeries.seriesName ||
+                placedSeries.focus?.active
+                    ? BORDER_WIDTH.FOCUS
+                    : BORDER_WIDTH.DEFAULT
+
+            return (
+                <path
+                    id={makeIdForHumanConsumption(placedSeries.seriesName)}
+                    className={
+                        makeSafeForCSS(placedSeries.seriesName) + "-border"
+                    }
+                    key={placedSeries.seriesName + "-border"}
+                    strokeLinecap="round"
+                    d={pointsToPath(placedSeries.placedPoints)}
+                    stroke={rgb(placedSeries.color).darker(0.5).toString()}
+                    strokeOpacity={opacity}
+                    strokeWidth={strokeWidth}
+                    fill="none"
+                    clipPath={this.props.clipPath}
+                    onMouseEnter={(): void => {
+                        this.props.onAreaMouseEnter?.(placedSeries.seriesName)
+                    }}
+                    onMouseLeave={(): void => {
+                        this.props.onAreaMouseLeave?.()
+                    }}
+                />
+            )
+        })
+    }
+
+    override render(): React.ReactElement {
+        return (
+            <g
+                className="Areas"
+                id={makeIdForHumanConsumption("stacked-areas")}
+            >
+                <g id={makeIdForHumanConsumption("areas")}>{this.areas}</g>
+                <g id={makeIdForHumanConsumption("borders")}>{this.borders}</g>
+            </g>
+        )
+    }
+}