@buildcanada/charts 0.1.0

package/src/grapher/stackedCharts/StackedDiscreteBarChart.tsx

@@ -0,0 +1,270 @@
+import * as _ from "lodash-es"
+import React from "react"
+import * as R from "remeda"
+import {
+    Bounds,
+    Time,
+    HorizontalAlign,
+    EntityName,
+    getRelativeMouse,
+    exposeInstanceOnWindow,
+} from "../../utils/index.js"
+import { action, computed, makeObservable, observable } from "mobx"
+import { observer } from "mobx-react"
+import { SeriesName } from "../../types/index.js"
+import {
+    BASE_FONT_SIZE,
+    DEFAULT_GRAPHER_BOUNDS,
+} from "../core/GrapherConstants"
+import { NoDataModal } from "../noDataModal/NoDataModal"
+import { ChartInterface } from "../chart/ChartInterface"
+import { ChartManager } from "../chart/ChartManager"
+import { TooltipState } from "../tooltip/Tooltip"
+import {
+    LEGEND_STYLE_FOR_STACKED_CHARTS,
+    StackedSeries,
+} from "./StackedConstants"
+import {
+    HorizontalCategoricalColorLegend,
+    HorizontalColorLegendManager,
+} from "../legend/HorizontalColorLegends"
+import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
+import { LegendInteractionState } from "../legend/LegendInteractionState"
+import { StackedDiscreteBarChartState } from "./StackedDiscreteBarChartState"
+import { ChartComponentProps } from "../chart/ChartTypeMap.js"
+import { StackedDiscreteBars } from "./StackedDiscreteBars"
+
+export interface StackedDiscreteBarChartManager extends ChartManager {
+    endTime?: Time
+    hideTotalValueLabel?: boolean
+}
+
+type StackedDiscreteBarChartProps =
+    ChartComponentProps<StackedDiscreteBarChartState>
+
+@observer
+export class StackedDiscreteBarChart
+    extends React.Component<StackedDiscreteBarChartProps>
+    implements ChartInterface, HorizontalColorLegendManager
+{
+    base = React.createRef<SVGGElement>()
+
+    constructor(props: StackedDiscreteBarChartProps) {
+        super(props)
+
+        makeObservable(this, {
+            focusSeriesName: observable,
+            tooltipState: observable,
+        })
+    }
+
+    focusSeriesName: SeriesName | undefined = undefined
+
+    @computed get chartState(): StackedDiscreteBarChartState {
+        return this.props.chartState
+    }
+
+    @computed private get manager(): StackedDiscreteBarChartManager {
+        return this.chartState.manager
+    }
+
+    @computed private get bounds(): Bounds {
+        // bottom padding avoids axis labels to be cut off at some resolutions
+        return (this.props.bounds ?? DEFAULT_GRAPHER_BOUNDS)
+            .padRight(10)
+            .padBottom(2)
+    }
+
+    @computed private get baseFontSize(): number {
+        return this.manager.fontSize ?? BASE_FONT_SIZE
+    }
+
+    @computed get isStatic(): boolean {
+        return this.manager.isStatic ?? false
+    }
+
+    @computed private get showLegend(): boolean {
+        return (
+            !!this.manager.showLegend &&
+            !this.manager.isDisplayedAlongsideComplementaryTable
+        )
+    }
+
+    @computed private get boundsWithoutLegend(): Bounds {
+        return this.bounds.padTop(
+            this.showLegend && this.legend.height > 0
+                ? this.legend.height + this.legendPaddingTop
+                : 0
+        )
+    }
+
+    // legend props
+
+    @computed private get legendPaddingTop(): number {
+        return 0.5 * this.baseFontSize
+    }
+
+    @computed get legendX(): number {
+        return this.bounds.x
+    }
+
+    @computed get categoryLegendY(): number {
+        return this.bounds.top
+    }
+
+    @computed get legendWidth(): number {
+        return this.bounds.width
+    }
+
+    @computed get legendAlign(): HorizontalAlign {
+        return HorizontalAlign.left
+    }
+
+    @computed get fontSize(): number {
+        return this.baseFontSize
+    }
+
+    @computed private get legendBins(): CategoricalBin[] {
+        return this.series.map((series, index) => {
+            return new CategoricalBin({
+                index,
+                value: series.seriesName,
+                label: series.seriesName,
+                color: series.color,
+            })
+        })
+    }
+
+    @computed get categoricalLegendData(): CategoricalBin[] {
+        return this.showLegend ? this.legendBins : []
+    }
+
+    getLegendBinState(bin: ColorScaleBin): LegendInteractionState {
+        const { focusSeriesName } = this
+
+        // If nothing is focused, all items are active
+        if (!focusSeriesName) {
+            return LegendInteractionState.Default
+        }
+
+        // Check if this bin contains the focused series
+        const isFocused = bin.contains(focusSeriesName)
+        return isFocused
+            ? LegendInteractionState.Focused
+            : LegendInteractionState.Muted
+    }
+
+    legendStyleConfig = LEGEND_STYLE_FOR_STACKED_CHARTS
+
+    @computed get externalLegend(): HorizontalColorLegendManager | undefined {
+        if (!this.showLegend) {
+            return {
+                categoricalLegendData: this.legendBins,
+                legendStyleConfig: this.legendStyleConfig,
+            }
+        }
+        return undefined
+    }
+
+    @action.bound onLegendMouseOver(bin: ColorScaleBin): void {
+        this.focusSeriesName = R.first(
+            this.series
+                .map((s) => s.seriesName)
+                .filter((name) => bin.contains(name))
+        )
+    }
+
+    @action.bound onLegendMouseLeave(): void {
+        this.focusSeriesName = undefined
+    }
+
+    @computed private get legend(): HorizontalCategoricalColorLegend {
+        return new HorizontalCategoricalColorLegend({ manager: this })
+    }
+
+    tooltipState = new TooltipState<{
+        entityName: string
+        seriesName?: string
+    }>()
+
+    @action.bound private onMouseMove(ev: React.MouseEvent): void {
+        const ref = this.manager.base?.current
+        if (ref) {
+            this.tooltipState.position = getRelativeMouse(ref, ev)
+        }
+    }
+
+    override render(): React.ReactElement {
+        if (this.chartState.errorInfo.reason)
+            return (
+                <NoDataModal
+                    manager={this.manager}
+                    bounds={this.bounds}
+                    message={this.chartState.errorInfo.reason}
+                />
+            )
+
+        return this.manager.isStatic
+            ? this.renderStatic()
+            : this.renderInteractive()
+    }
+
+    private renderLegend(): React.ReactElement | undefined {
+        if (!this.showLegend) return
+        return <HorizontalCategoricalColorLegend manager={this} />
+    }
+
+    private renderStatic(): React.ReactElement {
+        return (
+            <>
+                {this.renderLegend()}
+                <StackedDiscreteBars
+                    chartState={this.chartState}
+                    bounds={this.boundsWithoutLegend}
+                    tooltipState={this.tooltipState}
+                    focusSeriesName={this.focusSeriesName}
+                />
+            </>
+        )
+    }
+
+    private renderInteractive(): React.ReactElement {
+        const { bounds } = this
+
+        // needs to be referenced here, otherwise it's not updated in the renderRow function
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this.focusSeriesName
+
+        return (
+            <g
+                ref={this.base}
+                className="StackedDiscreteBarChart"
+                onMouseMove={this.onMouseMove}
+            >
+                <rect
+                    x={bounds.left}
+                    y={bounds.top}
+                    width={bounds.width}
+                    height={bounds.height}
+                    opacity={0}
+                    fill="rgba(255,255,255,0)"
+                />
+                {this.renderLegend()}
+                <StackedDiscreteBars
+                    chartState={this.chartState}
+                    bounds={this.boundsWithoutLegend}
+                    tooltipState={this.tooltipState}
+                    focusSeriesName={this.focusSeriesName}
+                />
+            </g>
+        )
+    }
+
+    @computed private get series(): readonly StackedSeries<EntityName>[] {
+        return this.chartState.series
+    }
+
+    override componentDidMount(): void {
+        exposeInstanceOnWindow(this)
+    }
+}

package/src/grapher/stackedCharts/StackedDiscreteBarChartState.ts

@@ -0,0 +1,296 @@
+import * as _ from "lodash-es"
+import { computed, makeObservable } from "mobx"
+import { ChartState } from "../chart/ChartInterface"
+import { StackedDiscreteBarChartManager } from "./StackedDiscreteBarChart"
+import { CoreColumn, OwidTable } from "../../core-table/index.js"
+import {
+    ChartErrorInfo,
+    ColorSchemeName,
+    EntityName,
+    FacetStrategy,
+    MissingDataStrategy,
+    SortBy,
+    SortConfig,
+    SortOrder,
+} from "../../types/index.js"
+import {
+    autoDetectYColumnSlugs,
+    getDefaultFailMessage,
+    getShortNameForEntity,
+    makeSelectionArray,
+} from "../chart/ChartUtils"
+import { SelectionArray } from "../selection/SelectionArray"
+import { Item, StackedSeries } from "./StackedConstants"
+import {
+    stackSeriesInBothDirections,
+    withMissingValuesAsZeroes,
+} from "./StackedUtils"
+import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner"
+import { ColorScheme } from "../color/ColorScheme"
+import { ColorSchemes } from "../color/ColorSchemes"
+import { excludeUndefined } from "../../utils/index.js"
+import { FocusArray } from "../focus/FocusArray"
+
+export class StackedDiscreteBarChartState implements ChartState {
+    manager: StackedDiscreteBarChartManager
+
+    constructor({ manager }: { manager: StackedDiscreteBarChartManager }) {
+        this.manager = manager
+        makeObservable(this)
+    }
+
+    @computed get inputTable(): OwidTable {
+        return this.manager.table
+    }
+
+    @computed get transformedTable(): OwidTable {
+        return (
+            this.manager.transformedTable ??
+            this.transformTable(this.inputTable)
+        )
+    }
+
+    transformTable(table: OwidTable): OwidTable {
+        if (!this.yColumnSlugs.length) return table
+
+        table = table.filterByEntityNames(
+            this.selectionArray.selectedEntityNames
+        )
+
+        // TODO: remove this filter once we don't have mixed type columns in datasets
+        table = table.replaceNonNumericCellsWithErrorValues(this.yColumnSlugs)
+
+        table = table.dropRowsWithErrorValuesForAllColumns(this.yColumnSlugs)
+
+        this.yColumnSlugs.forEach((slug) => {
+            table = table.interpolateColumnWithTolerance(slug)
+        })
+
+        table = this.applyMissingDataStrategy(table)
+
+        if (this.manager.isRelativeMode) {
+            table = table
+                .replaceNegativeCellsWithErrorValues(this.yColumnSlugs)
+                .toPercentageFromEachColumnForEachEntityAndTime(
+                    this.yColumnSlugs
+                )
+
+            // Apply missing data strategy _again_ because we might've introduced new error values just now
+            table = this.applyMissingDataStrategy(table)
+        }
+
+        return table
+    }
+
+    transformTableForSelection(table: OwidTable): OwidTable {
+        table = table
+            .replaceNonNumericCellsWithErrorValues(this.yColumnSlugs)
+            .replaceNegativeCellsWithErrorValues(this.yColumnSlugs)
+            .dropRowsWithErrorValuesForAllColumns(this.yColumnSlugs)
+
+        table = this.applyMissingDataStrategy(table)
+
+        return table
+    }
+
+    private applyMissingDataStrategy(table: OwidTable): OwidTable {
+        // We want to remove all rows with missing data for at least one column if:
+        // - MissingDataStrategy is explicitly set to hide, or
+        // - We are in relative mode and MissingDataStrategy is not explicitly set to show:
+        //     If we are showing relative mode, we want to drop all rows that are missing data for
+        //     any column, because otherwise the displayed data will be misleading in that it may
+        //     suggest patterns that are not actually present.
+        //     see https://github.com/owid/owid-grapher/issues/2860
+
+        const shouldRemoveRows =
+            this.missingDataStrategy === MissingDataStrategy.hide ||
+            (this.manager.isRelativeMode &&
+                this.missingDataStrategy !== MissingDataStrategy.show)
+        if (shouldRemoveRows) {
+            // If MissingDataStrategy is explicitly set to hide, drop rows (= times) where one of
+            // the y columns has no data
+            return table.dropRowsWithErrorValuesForAnyColumn(this.yColumnSlugs)
+        }
+
+        // Otherwise, don't apply any special treatment
+        return table
+    }
+
+    @computed get selectionArray(): SelectionArray {
+        return makeSelectionArray(this.manager.selection)
+    }
+
+    @computed get focusArray(): FocusArray {
+        return this.manager.focusArray ?? new FocusArray()
+    }
+
+    @computed get isFocusModeActive(): boolean {
+        return this.focusArray.hasFocusedSeries
+    }
+
+    @computed get missingDataStrategy(): MissingDataStrategy {
+        return this.manager.missingDataStrategy || MissingDataStrategy.auto
+    }
+
+    @computed get yColumnSlugs(): string[] {
+        return this.manager.yColumnSlugs ?? autoDetectYColumnSlugs(this.manager)
+    }
+
+    @computed get yColumns(): CoreColumn[] {
+        return this.transformedTable.getColumns(this.yColumnSlugs)
+    }
+
+    @computed get formatColumn(): CoreColumn {
+        return this.yColumns[0]
+    }
+
+    @computed get sortColumnSlug(): string | undefined {
+        return this.sortConfig.sortColumnSlug
+    }
+
+    @computed get sortColumn(): CoreColumn | undefined {
+        return this.sortColumnSlug
+            ? this.transformedTable.getColumns([this.sortColumnSlug])[0]
+            : undefined
+    }
+
+    @computed get sortConfig(): SortConfig {
+        return this.manager.sortConfig ?? {}
+    }
+
+    @computed get colorScheme(): ColorScheme {
+        return (
+            (this.manager.baseColorScheme
+                ? ColorSchemes.get(this.manager.baseColorScheme)
+                : null) ?? ColorSchemes.get(ColorSchemeName["owid-distinct"])
+        )
+    }
+
+    @computed get categoricalColorAssigner(): CategoricalColorAssigner {
+        const seriesCount = this.yColumns.length
+        return new CategoricalColorAssigner({
+            colorScheme: this.colorScheme,
+            invertColorScheme: this.manager.invertColorScheme,
+            colorMap: this.inputTable.columnDisplayNameToColorMap,
+            autoColorMapCache: this.manager.seriesColorMap,
+            numColorsInUse: seriesCount,
+        })
+    }
+
+    @computed get unstackedSeries(): StackedSeries<EntityName>[] {
+        return (
+            this.yColumns
+                .map((col) => {
+                    return {
+                        seriesName: col.displayName,
+                        columnSlug: col.slug,
+                        color: this.categoricalColorAssigner.assign(
+                            col.displayName
+                        ),
+                        points: col.owidRows.map((row) => ({
+                            time: row.originalTime,
+                            position: row.entityName,
+                            value: row.value,
+                            valueOffset: 0,
+                        })),
+                    }
+                })
+                // Do not plot columns without data
+                .filter((series) => series.points.length > 0)
+        )
+    }
+
+    @computed get series(): readonly StackedSeries<EntityName>[] {
+        return stackSeriesInBothDirections(
+            withMissingValuesAsZeroes(this.unstackedSeries)
+        )
+    }
+
+    @computed get items(): readonly Item[] {
+        const entityNames = this.selectionArray.selectedEntityNames
+        const items = entityNames
+            .map((entityName) => {
+                let totalValue = 0
+                const bars = excludeUndefined(
+                    this.series.map((series) => {
+                        const point = series.points.find(
+                            (point) => point.position === entityName
+                        )
+                        if (!point) return undefined
+                        totalValue += point.value
+                        return {
+                            point,
+                            columnSlug: series.columnSlug!,
+                            color: series.color,
+                            seriesName: series.seriesName,
+                        }
+                    })
+                )
+
+                return {
+                    entityName,
+                    shortEntityName: getShortNameForEntity(entityName),
+                    bars,
+                    totalValue,
+                    focus: this.focusArray.state(entityName),
+                }
+            })
+            .filter((item) => item.bars.length)
+
+        return items
+    }
+
+    @computed get sortedItems(): readonly Item[] {
+        let sortByFunc: (item: Item) => number | string | undefined
+        switch (this.sortConfig.sortBy) {
+            case SortBy.custom:
+                sortByFunc = (): undefined => undefined
+                break
+            case SortBy.entityName:
+                sortByFunc = (item: Item): string => item.entityName
+                break
+            case SortBy.column: {
+                const owidRowsByEntityName =
+                    this.sortColumn?.owidRowsByEntityName
+                sortByFunc = (item: Item): number => {
+                    const rows = owidRowsByEntityName?.get(item.entityName)
+                    return rows?.[0]?.value ?? 0
+                }
+                break
+            }
+            default:
+            case SortBy.total:
+                sortByFunc = (item: Item): number => item.totalValue
+        }
+        const sortedItems = _.sortBy(this.items, sortByFunc)
+        const sortOrder = this.sortConfig.sortOrder ?? SortOrder.desc
+        if (sortOrder === SortOrder.desc) return sortedItems.toReversed()
+        else return sortedItems
+    }
+
+    @computed get availableFacetStrategies(): FacetStrategy[] {
+        const strategies = [FacetStrategy.none]
+
+        if (this.yColumns.length > 1) strategies.push(FacetStrategy.metric)
+
+        return strategies
+    }
+
+    @computed get errorInfo(): ChartErrorInfo {
+        const column = this.yColumns[0]
+
+        if (!column) return { reason: "No column to chart" }
+
+        const message = getDefaultFailMessage(this.manager)
+        if (message) return { reason: message }
+
+        const { entityTypePlural = "entities" } = this.manager
+
+        // TODO is it better to use .series for this check?
+        return this.yColumns.every((col) => col.isEmpty)
+            ? {
+                  reason: `No data for the selected ${entityTypePlural}`,
+              }
+            : { reason: "" }
+    }
+}

package/src/grapher/stackedCharts/StackedDiscreteBarChartThumbnail.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { ChartInterface } from "../chart/ChartInterface"
+import { StackedDiscreteBarChartState } from "./StackedDiscreteBarChartState"
+import { ChartComponentProps } from "../chart/ChartTypeMap.js"
+import { StackedDiscreteBars } from "./StackedDiscreteBars"
+
+@observer
+export class StackedDiscreteBarChartThumbnail
+    extends React.Component<ChartComponentProps<StackedDiscreteBarChartState>>
+    implements ChartInterface
+{
+    constructor(props: ChartComponentProps<StackedDiscreteBarChartState>) {
+        super(props)
+        // Ensure that the component is observable
+        makeObservable(this)
+    }
+
+    @computed get chartState(): StackedDiscreteBarChartState {
+        return this.props.chartState
+    }
+
+    override render(): React.ReactElement {
+        return <StackedDiscreteBars {...this.props} />
+    }
+}