@buildcanada/charts 0.1.0

package/src/grapher/stackedCharts/MarimekkoChartThumbnail.tsx

@@ -0,0 +1,168 @@
+import React from "react"
+import * as _ from "lodash-es"
+import { computed, makeObservable } from "mobx"
+import { observer } from "mobx-react"
+import { ChartInterface } from "../chart/ChartInterface"
+import { MarimekkoChartState } from "./MarimekkoChartState"
+import { type MarimekkoChartProps } from "./MarimekkoChart.js"
+import { MarimekkoChartManager, PlacedItem } from "./MarimekkoChartConstants"
+import { Bounds } from "../../utils/index.js"
+import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
+import { AxisConfig } from "../axis/AxisConfig"
+import {
+    BASE_FONT_SIZE,
+    DEFAULT_GRAPHER_BOUNDS,
+    GRAPHER_FONT_SCALE_12,
+} from "../core/GrapherConstants"
+import { MarimekkoBars } from "./MarimekkoBars"
+import { DualAxisComponent } from "../axis/AxisViews"
+import { toPlacedMarimekkoItems } from "./MarimekkoChartHelpers"
+import { MarimekkoInternalLabels } from "./MarimekkoInternalLabels"
+import { NoDataModal } from "../noDataModal/NoDataModal"
+
+const LABEL_PADDING = 4
+
+@observer
+export class MarimekkoChartThumbnail
+    extends React.Component<MarimekkoChartProps>
+    implements ChartInterface
+{
+    constructor(props: MarimekkoChartProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get chartState(): MarimekkoChartState {
+        return this.props.chartState
+    }
+
+    @computed get manager(): MarimekkoChartManager {
+        return this.chartState.manager
+    }
+
+    @computed get bounds(): Bounds {
+        return this.props.bounds ?? DEFAULT_GRAPHER_BOUNDS
+    }
+
+    @computed get innerBounds(): Bounds {
+        return (
+            this.bounds
+                // Allow internal labels to eat into the thumbnail padding
+                .padTop(this.labelHeight ? this.labelHeight - 6 : 0)
+                // Add some bottom padding since the y-axis tick labels are
+                // center-aligned and eat into the thumbnail padding
+                .padBottom(this.shouldShowVerticalAxis ? 6 : 0)
+        )
+    }
+
+    @computed get fontSize(): number {
+        return this.manager.fontSize ?? BASE_FONT_SIZE
+    }
+
+    @computed get labelFontSize(): number {
+        return Math.floor(GRAPHER_FONT_SCALE_12 * this.fontSize)
+    }
+
+    @computed get labelHeight(): number {
+        return this.shouldShowLabels ? this.labelFontSize + LABEL_PADDING : 0
+    }
+
+    @computed private get shouldShowVerticalAxis(): boolean {
+        return !!this.manager.isDisplayedAlongsideComplementaryTable
+    }
+
+    @computed private get yAxisConfig(): AxisConfig {
+        const { yAxisConfig } = this.manager
+        const custom = {
+            hideGridlines: true,
+            hideAxis: !this.shouldShowVerticalAxis,
+        }
+        return new AxisConfig({ ...yAxisConfig, ...custom }, this)
+    }
+
+    @computed private get xAxisConfig(): AxisConfig {
+        const { xAxisConfig } = this.manager
+        const custom = { hideAxis: true, hideGridlines: true }
+        return new AxisConfig({ ...xAxisConfig, ...custom }, this)
+    }
+
+    @computed private get verticalAxisPart(): VerticalAxis {
+        return this.chartState.toVerticalAxis(this.yAxisConfig)
+    }
+
+    @computed private get horizontalAxisPart(): HorizontalAxis {
+        return this.chartState.toHorizontalAxis(this.xAxisConfig)
+    }
+
+    @computed private 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 placedItems(): PlacedItem[] {
+        return toPlacedMarimekkoItems(this.chartState, {
+            dualAxis: this.dualAxis,
+        })
+    }
+
+    @computed private get placedItemsMap(): Map<string, PlacedItem> {
+        return new Map(this.placedItems.map((item) => [item.entityName, item]))
+    }
+
+    @computed private get shouldShowLabels(): boolean {
+        return this.chartState.isFocusModeActive
+    }
+
+    @computed private get labelledItems(): PlacedItem[] {
+        if (!this.shouldShowLabels) return []
+        return this.chartState.focusArray.seriesNames
+            .map((entityName) => this.placedItemsMap.get(entityName))
+            .filter((item) => item !== undefined)
+    }
+
+    override render(): React.ReactElement {
+        if (this.chartState.errorInfo.reason)
+            return (
+                <NoDataModal
+                    manager={this.manager}
+                    bounds={this.props.bounds}
+                    message={this.chartState.errorInfo.reason}
+                />
+            )
+
+        return (
+            <g>
+                <DualAxisComponent dualAxis={this.dualAxis} showEndpointsOnly />
+                <MarimekkoBars
+                    dualAxis={this.dualAxis}
+                    placedItems={this.placedItems}
+                    fontSize={this.fontSize}
+                    x0={this.chartState.x0}
+                    y0={this.chartState.y0}
+                    selectionArray={this.chartState.selectionArray}
+                    selectedItems={this.chartState.selectedItems}
+                    isFocusModeActive={this.chartState.isFocusModeActive}
+                />
+                <MarimekkoInternalLabels
+                    items={this.labelledItems}
+                    dualAxis={this.dualAxis}
+                    x0={this.chartState.x0}
+                    y0={this.chartState.y0}
+                    fontSize={this.labelFontSize}
+                    labelPadding={LABEL_PADDING}
+                />
+            </g>
+        )
+    }
+}

package/src/grapher/stackedCharts/MarimekkoInternalLabels.tsx

@@ -0,0 +1,124 @@
+import * as React from "react"
+import { observer } from "mobx-react"
+import * as _ from "lodash-es"
+import * as R from "remeda"
+import { computed, makeObservable } from "mobx"
+import { Bar, BarShape, PlacedItem } from "./MarimekkoChartConstants"
+import { DualAxis } from "../axis/Axis"
+import { Bounds } from "../../utils/index.js"
+import { Halo } from "../../components/index.js"
+
+interface MarimekkoInternalLabelsProps {
+    items: PlacedItem[]
+    dualAxis: DualAxis
+    x0: number
+    y0: number
+    fontSize: number
+    labelPadding: number
+}
+
+interface PlacedLabel {
+    bounds: Bounds
+    label: string
+    color: string
+}
+
+@observer
+export class MarimekkoInternalLabels extends React.Component<MarimekkoInternalLabelsProps> {
+    constructor(props: MarimekkoInternalLabelsProps) {
+        super(props)
+        makeObservable(this)
+    }
+
+    @computed get sortedItems(): PlacedItem[] {
+        return _.sortBy(
+            this.props.items,
+            (item) => item.xPoint?.value ?? item.xPosition
+        )
+    }
+
+    @computed get placedLabels(): PlacedLabel[] {
+        return this.sortedItems
+            .map((item) => {
+                const bar: Bar | undefined = item.bars[0]
+                if (bar === undefined) return undefined
+
+                const x =
+                    this.props.dualAxis.horizontalAxis.place(this.props.x0) +
+                    item.xPosition
+
+                const barY =
+                    bar === undefined
+                        ? this.props.dualAxis.verticalAxis.place(
+                              this.props.y0
+                          ) -
+                          (Bounds.forText("no data").height + 10)
+                        : this.props.dualAxis.verticalAxis.place(
+                              bar.yPoint.value
+                          )
+                const y = barY - this.props.labelPadding
+
+                const label = item.shortEntityName ?? item.entityName
+                const bounds = Bounds.forText(label, {
+                    fontSize: this.props.fontSize,
+                }).set({ x, y })
+
+                const color =
+                    item.entityColor?.color ??
+                    (bar.kind === BarShape.Bar ? bar.color : "#555")
+
+                return { bounds, label, color }
+            })
+            .filter((label) => label !== undefined)
+    }
+
+    @computed get visibleLabels(): PlacedLabel[] {
+        const placedLabels = this.placedLabels.map((series) => ({
+            ...series,
+            // Hide label if it doesn't fit within the chart area
+            isHidden:
+                series.bounds.x + series.bounds.width >
+                this.props.dualAxis.innerBounds.right,
+        }))
+
+        // Hide overlapping labels
+        for (let i = 0; i < placedLabels.length; i++) {
+            const s1 = placedLabels[i]
+            if (s1.isHidden) continue
+
+            for (let j = i + 1; j < placedLabels.length; j++) {
+                const s2 = placedLabels[j]
+                if (s2.isHidden) continue
+
+                if (s1.bounds.intersects(s2.bounds)) {
+                    s2.isHidden = true
+                }
+            }
+        }
+
+        return placedLabels
+            .filter((label) => !label.isHidden)
+            .map((series) => R.omit(series, ["isHidden"]))
+    }
+
+    override render(): React.ReactElement | null {
+        if (!this.visibleLabels.length) return null
+
+        return (
+            <g>
+                {this.visibleLabels.map(({ label, bounds, color }) => (
+                    <Halo key={label} id={label} outlineWidth={2}>
+                        <text
+                            x={bounds.x}
+                            y={bounds.y}
+                            fontSize={this.props.fontSize}
+                            fill={color}
+                        >
+                            {label}
+                        </text>
+                    </Halo>
+                ))}
+            </g>
+        )
+    }
+}