@buildcanada/charts 0.1.0

package/src/grapher/stackedCharts/StackedBarChartThumbnail.tsx

@@ -0,0 +1,220 @@
+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 { StackedBarChartState } from "./StackedBarChartState.js"
+import { type StackedBarChartProps } from "./StackedBarChart.js"
+import { ChartManager } from "../chart/ChartManager"
+import {
+    BASE_FONT_SIZE,
+    DEFAULT_GRAPHER_BOUNDS,
+    GRAPHER_FONT_SCALE_12,
+} from "../core/GrapherConstants"
+import { Bounds, excludeUndefined } from "../../utils/index.js"
+import { AxisConfig, AxisManager } from "../axis/AxisConfig"
+import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
+import {
+    getXAxisConfigDefaultsForStackedBar,
+    resolveCollision,
+} from "./StackedUtils"
+import {
+    HorizontalAxisComponent,
+    VerticalAxisZeroLine,
+} from "../axis/AxisViews"
+import { StackedBars } from "./StackedBars"
+import {
+    InitialVerticalLabelsSeries,
+    VerticalLabelsState,
+} from "../verticalLabels/VerticalLabelsState"
+import { VerticalLabels } from "../verticalLabels/VerticalLabels"
+import { NoDataModal } from "../noDataModal/NoDataModal"
+
+const LEGEND_PADDING = 4
+
+@observer
+export class StackedBarChartThumbnail
+    extends React.Component<StackedBarChartProps>
+    implements ChartInterface, AxisManager
+{
+    constructor(props: StackedBarChartProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get chartState(): StackedBarChartState {
+        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 defaults = getXAxisConfigDefaultsForStackedBar(this.chartState)
+        const custom = { labelPadding: 0 }
+        return new AxisConfig({ ...custom, ...defaults, ...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
+                />
+                <StackedBars
+                    dualAxis={this.dualAxis}
+                    series={this.chartState.series}
+                    formatColumn={this.chartState.formatColumn}
+                />
+                {this.verticalLabelsState && (
+                    <VerticalLabels
+                        state={this.verticalLabelsState}
+                        yAxis={this.dualAxis.verticalAxis}
+                        x={this.innerBounds.right + LEGEND_PADDING}
+                    />
+                )}
+            </>
+        )
+    }
+}

package/src/grapher/stackedCharts/StackedBarSegment.tsx

@@ -0,0 +1,87 @@
+import * as _ from "lodash-es"
+import * as React from "react"
+import { computed, action, observable, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { Time } from "../../utils/index.js"
+import { BAR_OPACITY, StackedPoint, StackedSeries } from "./StackedConstants"
+import { VerticalAxis } from "../axis/Axis"
+
+interface StackedBarSegmentProps extends React.SVGAttributes<SVGGElement> {
+    id: string
+    bar: StackedPoint<Time>
+    series: StackedSeries<Time>
+    color: string
+    opacity: number
+    yAxis: VerticalAxis
+    xOffset: number
+    barWidth: number
+    onBarMouseOver?: (
+        bar: StackedPoint<Time>,
+        series: StackedSeries<Time>
+    ) => void
+    onBarMouseLeave?: () => void
+}
+
+@observer
+export class StackedBarSegment extends React.Component<StackedBarSegmentProps> {
+    base = React.createRef<SVGRectElement>()
+
+    constructor(props: StackedBarSegmentProps) {
+        super(props)
+
+        makeObservable(this, {
+            mouseOver: observable,
+        })
+    }
+
+    mouseOver: boolean = false
+
+    @computed get yPos(): number {
+        const { bar, yAxis } = this.props
+        // The top position of a bar
+        return bar.value < 0
+            ? yAxis.place(bar.valueOffset)
+            : yAxis.place(bar.value + bar.valueOffset)
+    }
+
+    @computed get barHeight(): number {
+        const { bar, yAxis } = this.props
+        return bar.value < 0
+            ? yAxis.place(bar.valueOffset + bar.value) - this.yPos
+            : yAxis.place(bar.valueOffset) - this.yPos
+    }
+
+    @computed get trueOpacity(): number {
+        return this.mouseOver ? BAR_OPACITY.FOCUS : this.props.opacity
+    }
+
+    @action.bound onBarMouseOver(): void {
+        this.mouseOver = true
+        this.props.onBarMouseOver?.(this.props.bar, this.props.series)
+    }
+
+    @action.bound onBarMouseLeave(): void {
+        this.mouseOver = false
+        this.props.onBarMouseLeave?.()
+    }
+
+    override render(): React.ReactElement {
+        const { color, xOffset, barWidth } = this.props
+        const { yPos, barHeight, trueOpacity } = this
+
+        return (
+            <rect
+                id={this.props.id}
+                ref={this.base}
+                x={xOffset}
+                y={yPos}
+                width={barWidth}
+                height={barHeight}
+                fill={color}
+                opacity={trueOpacity}
+                onMouseOver={this.onBarMouseOver}
+                onMouseLeave={this.onBarMouseLeave}
+            />
+        )
+    }
+}

package/src/grapher/stackedCharts/StackedBars.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { SeriesName, Time } from "../../types/index.js"
+import { DualAxis } from "../axis/Axis"
+import { BAR_OPACITY, StackedPoint, StackedSeries } from "./StackedConstants"
+import {
+    makeIdForHumanConsumption,
+    makeSafeForCSS,
+} from "../../utils/index.js"
+import { StackedBarSegment } from "./StackedBarSegment"
+import { CoreColumn } from "../../core-table/index.js"
+
+interface StackedBarsProps {
+    dualAxis: DualAxis
+    series: readonly StackedSeries<Time>[]
+    formatColumn: CoreColumn
+    hoveredSeriesNames?: SeriesName[]
+    hoveredBar?: StackedPoint<Time>
+    onBarMouseOver?: (
+        bar: StackedPoint<Time>,
+        series: StackedSeries<Time>
+    ) => void
+    onBarMouseLeave?: () => void
+}
+
+@observer
+export class StackedBars extends React.Component<StackedBarsProps> {
+    constructor(props: StackedBarsProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    override render(): React.ReactElement {
+        const {
+            dualAxis,
+            series,
+            formatColumn,
+            hoveredSeriesNames = [],
+            hoveredBar,
+            onBarMouseOver,
+            onBarMouseLeave,
+        } = this.props
+
+        const { verticalAxis, horizontalAxis } = dualAxis
+
+        const barWidth = (horizontalAxis.bandWidth ?? 0) * 0.8
+
+        return (
+            <>
+                {series.map((series, index) => {
+                    const isLegendHovered = hoveredSeriesNames.includes(
+                        series.seriesName
+                    )
+                    const opacity =
+                        (isLegendHovered || hoveredSeriesNames.length === 0) &&
+                        !series.focus?.background
+                            ? BAR_OPACITY.DEFAULT
+                            : BAR_OPACITY.MUTE
+
+                    return (
+                        <g
+                            key={index}
+                            id={makeIdForHumanConsumption(series.seriesName)}
+                            className={
+                                makeSafeForCSS(series.seriesName) + "-segments"
+                            }
+                        >
+                            {series.points.map((bar, index) => {
+                                const xPos =
+                                    horizontalAxis.place(bar.position) -
+                                    barWidth / 2
+                                const barOpacity =
+                                    bar === hoveredBar || series.focus?.active
+                                        ? BAR_OPACITY.FOCUS
+                                        : opacity
+
+                                return (
+                                    <StackedBarSegment
+                                        key={index}
+                                        id={makeIdForHumanConsumption(
+                                            formatColumn.formatTime(bar.time)
+                                        )}
+                                        bar={bar}
+                                        color={bar.color ?? series.color}
+                                        xOffset={xPos}
+                                        opacity={barOpacity}
+                                        yAxis={verticalAxis}
+                                        series={series}
+                                        onBarMouseOver={onBarMouseOver}
+                                        onBarMouseLeave={onBarMouseLeave}
+                                        barWidth={barWidth}
+                                    />
+                                )
+                            })}
+                        </g>
+                    )
+                })}
+            </>
+        )
+    }
+}

package/src/grapher/stackedCharts/StackedConstants.ts

@@ -0,0 +1,109 @@
+import {
+    Color,
+    EntityName,
+    OwidVariableRow,
+    SeriesName,
+} from "../../types/index.js"
+import { ChartSeries } from "../chart/ChartInterface"
+import {
+    GRAPHER_AREA_OPACITY_DEFAULT,
+    GRAPHER_AREA_OPACITY_FOCUS,
+    GRAPHER_AREA_OPACITY_MUTE,
+} from "../core/GrapherConstants"
+import { TextWrap } from "../../components/index.js"
+import { InteractionState } from "../interaction/InteractionState.js"
+import { LegendStyleConfig } from "../legend/LegendInteractionState"
+
+export const AREA_OPACITY = {
+    DEFAULT: GRAPHER_AREA_OPACITY_DEFAULT,
+    FOCUS: GRAPHER_AREA_OPACITY_FOCUS,
+    MUTE: GRAPHER_AREA_OPACITY_MUTE,
+} as const
+
+export const BAR_OPACITY = AREA_OPACITY
+
+export const BORDER_OPACITY = {
+    DEFAULT: 0.7,
+    FOCUS: 1,
+    MUTE: 0.3,
+} as const
+
+export const BORDER_WIDTH = {
+    DEFAULT: 0.5,
+    FOCUS: 1.5,
+} as const
+
+export const LEGEND_STYLE_FOR_STACKED_CHARTS: LegendStyleConfig = {
+    marker: {
+        default: { opacity: AREA_OPACITY.DEFAULT },
+        focused: { opacity: AREA_OPACITY.FOCUS },
+        muted: { opacity: AREA_OPACITY.MUTE },
+    },
+    text: {
+        muted: { opacity: AREA_OPACITY.MUTE },
+    },
+}
+
+export type StackedPointPositionType = string | number
+
+export type StackedPlacedPoint = [number, number]
+
+// PositionType can be categorical (e.g. country names), or ordinal (e.g. years).
+export interface StackedPoint<PositionType extends StackedPointPositionType> {
+    position: PositionType
+    value: number
+    valueOffset: number
+    time: number
+    interpolated?: boolean
+    fake?: boolean
+    color?: string
+}
+
+export interface StackedSeries<PositionType extends StackedPointPositionType>
+    extends ChartSeries {
+    points: StackedPoint<PositionType>[]
+    columnSlug?: string
+    isProjection?: boolean
+    isAllZeros?: boolean
+    shortEntityName?: string
+    focus?: InteractionState
+}
+
+export interface StackedPlacedSeries<
+    PositionType extends StackedPointPositionType,
+> extends StackedSeries<PositionType> {
+    placedPoints: Array<StackedPlacedPoint>
+}
+
+export interface StackedRawSeries<
+    PositionType extends StackedPointPositionType,
+> {
+    seriesName: SeriesName
+    isProjection?: boolean
+    rows: OwidVariableRow<PositionType>[]
+    focus: InteractionState
+    shortEntityName?: string
+}
+
+export interface Bar {
+    color: Color
+    seriesName: string
+    columnSlug: string
+    point: StackedPoint<EntityName>
+}
+
+export interface Item {
+    entityName: string
+    shortEntityName?: string
+    bars: Bar[]
+    totalValue: number
+    focus: InteractionState
+}
+
+export interface SizedItem extends Item {
+    label: TextWrap
+}
+
+export interface PlacedItem extends SizedItem {
+    yPosition: number
+}