@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/legend/HorizontalColorLegends.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/legend/HorizontalColorLegends.tsx"],
+  "sourcesContent": ["import * as _ from \"lodash-es\"\nimport * as React from \"react\"\nimport * as R from \"remeda\"\nimport { computed, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport {\n    dyFromAlign,\n    removeAllWhitespace,\n    Bounds,\n    HorizontalAlign,\n    VerticalAlign,\n    makeIdForHumanConsumption,\n} from \"../../utils/index.js\"\nimport { TextWrap } from \"../../components/index.js\"\nimport {\n    ColorScaleBin,\n    NumericBin,\n    CategoricalBin,\n} from \"../color/ColorScaleBin.js\"\nimport {\n    BASE_FONT_SIZE,\n    GRAPHER_FONT_SCALE_12,\n    GRAPHER_FONT_SCALE_12_8,\n    GRAPHER_FONT_SCALE_14,\n} from \"../core/GrapherConstants.js\"\nimport { darkenColorForLine } from \"../color/ColorUtils.js\"\nimport {\n    LegendInteractionState,\n    LegendStyleConfig,\n    LegendTextStyle,\n    LegendMarkerStyle,\n} from \"../legend/LegendInteractionState.js\"\nimport { GRAPHER_DARK_TEXT } from \"../color/ColorConstants.js\"\n\nexport interface PositionedBin {\n    x: number\n    width: number\n    bin: ColorScaleBin\n}\n\ninterface NumericLabel {\n    text: string\n    fontSize: number\n    bounds: Bounds\n    priority?: boolean\n    hidden: boolean\n    raised: boolean\n    bin: ColorScaleBin\n}\n\ninterface CategoricalMark {\n    x: number\n    y: number\n    rectSize: number\n    width: number\n    label: {\n        text: string\n        bounds: Bounds\n        fontSize: number\n    }\n    bin: CategoricalBin\n}\n\ninterface MarkLine {\n    totalWidth: number\n    marks: CategoricalMark[]\n}\n\n// TODO unify properties across categorical & numeric legend.\n// This would make multiple legends per chart less convenient (only used in Map), but we shouldn't\n// be using multiple anyway \u2013 instead the numeric should also handle categorical bins too.\nexport interface HorizontalColorLegendManager {\n    fontSize?: number\n    legendX?: number\n    legendAlign?: HorizontalAlign\n    legendTitle?: string\n    categoryLegendY?: number\n    numericLegendY?: number\n    legendWidth?: number\n    legendMaxWidth?: number\n    legendHeight?: number\n    legendTickSize?: number\n    legendCursor?: \"pointer\" | \"default\"\n    categoricalLegendData?: CategoricalBin[]\n    numericLegendData?: ColorScaleBin[]\n    numericBinSize?: number\n    onLegendMouseEnter?: (d: ColorScaleBin) => void\n    onLegendMouseLeave?: () => void\n    onLegendMouseOver?: (d: ColorScaleBin) => void\n    onLegendClick?: (d: ColorScaleBin) => void\n    isStatic?: boolean\n    getLegendBinState?: (bin: ColorScaleBin) => LegendInteractionState\n    legendStyleConfig?: LegendStyleConfig\n    categoricalLegendStyleConfig?: LegendStyleConfig\n    numericLegendStyleConfig?: LegendStyleConfig\n}\n\nconst DEFAULT_NUMERIC_BIN_SIZE = 10\nconst DEFAULT_NUMERIC_BIN_STROKE = \"#333\"\nconst DEFAULT_NUMERIC_BIN_STROKE_WIDTH = 0.3\nconst DEFAULT_TEXT_COLOR = \"#111\"\nconst DEFAULT_TICK_SIZE = 3\n\nconst CATEGORICAL_BIN_MIN_WIDTH = 20\nconst SPACE_BETWEEN_CATEGORICAL_BINS = 7\nconst MINIMUM_LABEL_DISTANCE = 5\n\nexport abstract class HorizontalColorLegend extends React.Component<{\n    manager: HorizontalColorLegendManager\n}> {\n    constructor(props: { manager: HorizontalColorLegendManager }) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed protected get manager(): HorizontalColorLegendManager {\n        return this.props.manager\n    }\n\n    @computed protected get legendX(): number {\n        return this.manager.legendX ?? 0\n    }\n\n    @computed protected get categoryLegendY(): number {\n        return this.manager.categoryLegendY ?? 0\n    }\n\n    @computed protected get numericLegendY(): number {\n        return this.manager.numericLegendY ?? 0\n    }\n\n    @computed protected get legendMaxWidth(): number | undefined {\n        return this.manager.legendMaxWidth\n    }\n\n    @computed protected get legendHeight(): number {\n        return this.manager.legendHeight ?? 200\n    }\n\n    @computed protected get legendAlign(): HorizontalAlign {\n        // Assume center alignment if none specified, for backwards-compatibility\n        return this.manager.legendAlign ?? HorizontalAlign.center\n    }\n\n    @computed protected get fontSize(): number {\n        return this.manager.fontSize ?? BASE_FONT_SIZE\n    }\n\n    @computed protected get legendTickSize(): number {\n        return this.manager.legendTickSize ?? DEFAULT_TICK_SIZE\n    }\n\n    protected getBinState(bin: ColorScaleBin): LegendInteractionState {\n        return (\n            this.manager.getLegendBinState?.(bin) ??\n            LegendInteractionState.Default\n        )\n    }\n\n    abstract get height(): number\n    abstract get width(): number\n}\n\n@observer\nexport class HorizontalNumericColorLegend extends HorizontalColorLegend {\n    base = React.createRef<SVGGElement>()\n\n    constructor(props: { manager: HorizontalColorLegendManager }) {\n        super(props)\n\n        makeObservable(this)\n    }\n\n    @computed private get numericLegendData(): ColorScaleBin[] {\n        return this.manager.numericLegendData ?? []\n    }\n\n    @computed private get visibleBins(): ColorScaleBin[] {\n        return this.numericLegendData.filter((bin) => !bin.isHidden)\n    }\n\n    @computed private get numericBins(): NumericBin[] {\n        return this.visibleBins.filter(\n            (bin): bin is NumericBin => bin instanceof NumericBin\n        )\n    }\n\n    @computed private get numericBinSize(): number {\n        return this.props.manager.numericBinSize ?? DEFAULT_NUMERIC_BIN_SIZE\n    }\n\n    @computed private get tickFontSize(): number {\n        return GRAPHER_FONT_SCALE_12 * this.fontSize\n    }\n\n    @computed private get itemMargin(): number {\n        return Math.round(this.fontSize * 1.125)\n    }\n\n    @computed private get maxWidth(): number {\n        return this.manager.legendMaxWidth ?? this.manager.legendWidth ?? 200\n    }\n\n    private getTickLabelWidth(label: string): number {\n        return Bounds.forText(label, {\n            fontSize: this.tickFontSize,\n        }).width\n    }\n\n    private getCategoricalBinWidth(bin: ColorScaleBin): number {\n        return Math.max(\n            this.getTickLabelWidth(bin.text),\n            CATEGORICAL_BIN_MIN_WIDTH\n        )\n    }\n\n    @computed private get totalCategoricalWidth(): number {\n        const { visibleBins, itemMargin } = this\n        const widths = visibleBins.map((bin) =>\n            bin instanceof CategoricalBin && !bin.isHidden\n                ? this.getCategoricalBinWidth(bin) + itemMargin\n                : 0\n        )\n        return _.sum(widths)\n    }\n\n    @computed private get isAutoWidth(): boolean {\n        return (\n            this.manager.legendWidth === undefined &&\n            this.manager.legendMaxWidth !== undefined\n        )\n    }\n\n    private getNumericLabelMinWidth(bin: NumericBin): number {\n        if (bin.text) {\n            const tickLabelWidth = this.getTickLabelWidth(bin.text)\n            return tickLabelWidth + MINIMUM_LABEL_DISTANCE\n        } else {\n            const combinedLabelWidths = _.sum(\n                [bin.minText, bin.maxText].map(\n                    (text) =>\n                        // because labels are center-aligned, only half the label space is required\n                        this.getTickLabelWidth(text) / 2\n                )\n            )\n            return combinedLabelWidths + MINIMUM_LABEL_DISTANCE * 2\n        }\n    }\n\n    // Overstretched legends don't look good.\n    // If the manager provides `legendMaxWidth`, then we calculate an _ideal_ width for the legend.\n    @computed private get idealNumericWidth(): number {\n        const binCount = this.numericBins.length\n        const spaceRequirements = this.numericBins.map((bin) => ({\n            labelSpace: this.getNumericLabelMinWidth(bin),\n        }))\n        // Make sure the legend is big enough to avoid overlapping labels (including `raisedMode`)\n\n        // Try to keep the minimum close to the size of the \"No data\" bin,\n        // so they look visually balanced somewhat.\n        const minBinWidth = this.fontSize * 3.25\n        const maxBinWidth =\n            _.max(\n                spaceRequirements.map(({ labelSpace }) =>\n                    Math.max(labelSpace, minBinWidth)\n                )\n            ) ?? 0\n        return Math.round(maxBinWidth * binCount)\n    }\n\n    @computed get width(): number {\n        if (this.isAutoWidth) {\n            return Math.min(\n                this.maxWidth,\n                this.legendTitleWidth +\n                    this.totalCategoricalWidth +\n                    this.idealNumericWidth\n            )\n        } else {\n            return this.maxWidth\n        }\n    }\n\n    @computed private get availableNumericWidth(): number {\n        return this.width - this.totalCategoricalWidth - this.legendTitleWidth\n    }\n\n    // Since we calculate the width automatically in some cases (when `isAutoWidth` is true),\n    // we need to shift X to align the legend horizontally (`legendAlign`).\n    @computed private get x(): number {\n        const { width, maxWidth, legendAlign, legendX } = this\n        const widthDiff = maxWidth - width\n        if (legendAlign === HorizontalAlign.center) {\n            return legendX + widthDiff / 2\n        } else if (legendAlign === HorizontalAlign.right) {\n            return legendX + widthDiff\n        } else {\n            return legendX // left align\n        }\n    }\n\n    @computed private get positionedBins(): PositionedBin[] {\n        const {\n            availableNumericWidth,\n            visibleBins,\n            numericBins,\n            legendTitleWidth,\n            x,\n        } = this\n\n        let xOffset = x + legendTitleWidth\n        let prevBin: ColorScaleBin | undefined\n\n        return visibleBins.map((bin, index) => {\n            const isFirst = index === 0\n            let width: number = this.getCategoricalBinWidth(bin)\n            let marginLeft: number = isFirst ? 0 : this.itemMargin\n\n            if (bin instanceof NumericBin) {\n                width = availableNumericWidth / numericBins.length\n\n                // Don't add any margin between numeric bins\n                if (prevBin instanceof NumericBin) {\n                    marginLeft = 0\n                }\n            }\n\n            const x = xOffset + marginLeft\n            xOffset = x + width\n            prevBin = bin\n\n            return {\n                x,\n                width,\n                bin,\n            }\n        })\n    }\n\n    @computed private get legendTitleFontSize(): number {\n        return this.fontSize * GRAPHER_FONT_SCALE_14\n    }\n\n    @computed private get legendTitle(): TextWrap | undefined {\n        const { legendTitle } = this.manager\n        return legendTitle\n            ? new TextWrap({\n                  text: legendTitle,\n                  fontSize: this.legendTitleFontSize,\n                  fontWeight: 700,\n                  maxWidth: this.maxWidth / 3,\n                  lineHeight: 1,\n              })\n            : undefined\n    }\n\n    @computed private get legendTitleWidth(): number {\n        return this.legendTitle ? this.legendTitle.width + this.itemMargin : 0\n    }\n\n    @computed private get numericLabels(): NumericLabel[] {\n        const { numericBinSize, positionedBins, tickFontSize } = this\n\n        const makeBoundaryLabel = (\n            bin: PositionedBin,\n            minOrMax: \"min\" | \"max\",\n            text: string\n        ): NumericLabel => {\n            const labelBounds = Bounds.forText(text, { fontSize: tickFontSize })\n            const x =\n                bin.x +\n                (minOrMax === \"min\" ? 0 : bin.width) -\n                labelBounds.width / 2\n            const y = -numericBinSize - labelBounds.height - this.legendTickSize\n\n            return {\n                text: text,\n                fontSize: tickFontSize,\n                bounds: labelBounds.set({ x: x, y: y }),\n                hidden: false,\n                raised: false,\n                bin: bin.bin,\n            }\n        }\n\n        const makeRangeLabel = (bin: PositionedBin): NumericLabel => {\n            const labelBounds = Bounds.forText(bin.bin.text, {\n                fontSize: tickFontSize,\n            })\n            const x = bin.x + bin.width / 2 - labelBounds.width / 2\n            const y = -numericBinSize - labelBounds.height - this.legendTickSize\n\n            return {\n                text: bin.bin.text,\n                fontSize: tickFontSize,\n                bounds: labelBounds.set({ x: x, y: y }),\n                priority: true,\n                hidden: false,\n                raised: false,\n                bin: bin.bin,\n            }\n        }\n\n        let labels: NumericLabel[] = []\n        for (const bin of positionedBins) {\n            if (bin.bin.text) labels.push(makeRangeLabel(bin))\n            else if (bin.bin instanceof NumericBin) {\n                if (bin.bin.minText)\n                    labels.push(makeBoundaryLabel(bin, \"min\", bin.bin.minText))\n                if (bin === R.last(positionedBins) && bin.bin.maxText)\n                    labels.push(makeBoundaryLabel(bin, \"max\", bin.bin.maxText))\n            }\n        }\n\n        for (let index = 0; index < labels.length; index++) {\n            const l1 = labels[index]\n            if (l1.hidden) continue\n\n            for (let j = index + 1; j < labels.length; j++) {\n                const l2 = labels[j]\n                if (\n                    l1.bounds.right + MINIMUM_LABEL_DISTANCE >\n                        l2.bounds.centerX ||\n                    (l2.bounds.left - MINIMUM_LABEL_DISTANCE <\n                        l1.bounds.centerX &&\n                        !l2.priority)\n                )\n                    l2.hidden = true\n            }\n        }\n\n        labels = labels.filter((label) => !label.hidden)\n\n        // If labels overlap, first we try alternating raised labels\n        let raisedMode = false\n        for (let index = 1; index < labels.length; index++) {\n            const l1 = labels[index - 1],\n                l2 = labels[index]\n            if (l1.bounds.right + MINIMUM_LABEL_DISTANCE > l2.bounds.left) {\n                raisedMode = true\n                break\n            }\n        }\n\n        if (raisedMode) {\n            for (let index = 1; index < labels.length; index++) {\n                const label = labels[index]\n                if (index % 2 !== 0) {\n                    label.bounds = label.bounds.set({\n                        y: label.bounds.y - label.bounds.height - 1,\n                    })\n                    label.raised = true\n                }\n            }\n        }\n\n        return labels\n    }\n\n    @computed get height(): number {\n        return Math.abs(\n            _.min(this.numericLabels.map((label) => label.bounds.y)) ?? 0\n        )\n    }\n\n    @computed private get legendStyleConfig(): LegendStyleConfig | undefined {\n        return (\n            this.manager.numericLegendStyleConfig ??\n            this.manager.legendStyleConfig\n        )\n    }\n\n    private getTextStyleConfig(bin: ColorScaleBin): LegendTextStyle {\n        const state = this.getBinState(bin)\n        const styleConfig = this.legendStyleConfig?.text\n        const defaultStyle = styleConfig?.default\n        const currentStyle = styleConfig?.[state]\n        return { color: GRAPHER_DARK_TEXT, ...defaultStyle, ...currentStyle }\n    }\n\n    private getMarkerStyleConfig(bin: ColorScaleBin): LegendMarkerStyle {\n        const state = this.getBinState(bin)\n        const styleConfig = this.legendStyleConfig?.marker\n        const defaultStyle = styleConfig?.default\n        const current = styleConfig?.[state]\n        return {\n            fill: bin.color,\n            stroke: DEFAULT_NUMERIC_BIN_STROKE,\n            strokeWidth: DEFAULT_NUMERIC_BIN_STROKE_WIDTH,\n            ...defaultStyle,\n            ...current,\n        }\n    }\n\n    override render(): React.ReactElement {\n        const { numericLabels, numericBinSize, positionedBins, height } = this\n\n        const bottomY = this.numericLegendY + height\n\n        const textColor =\n            this.legendStyleConfig?.text?.default?.color ?? DEFAULT_TEXT_COLOR\n\n        return (\n            <g\n                ref={this.base}\n                id={makeIdForHumanConsumption(\"numeric-color-legend\")}\n                className=\"numericColorLegend\"\n            >\n                <g id={makeIdForHumanConsumption(\"lines\")}>\n                    {numericLabels.map((label, index) => {\n                        const style = this.getMarkerStyleConfig(label.bin)\n                        return (\n                            <line\n                                key={index}\n                                id={makeIdForHumanConsumption(label.text)}\n                                x1={label.bounds.x + label.bounds.width / 2}\n                                y1={bottomY - numericBinSize}\n                                x2={label.bounds.x + label.bounds.width / 2}\n                                y2={\n                                    bottomY +\n                                    label.bounds.y +\n                                    label.bounds.height\n                                }\n                                // if we use a light color for stroke (e.g. white), we want it to stay\n                                // \"invisible\", except for raised labels, where we want *some* contrast.\n                                stroke={\n                                    label.raised && style.stroke\n                                        ? darkenColorForLine(style.stroke)\n                                        : style.stroke\n                                }\n                                strokeWidth={style.strokeWidth}\n                            />\n                        )\n                    })}\n                </g>\n                <g id={makeIdForHumanConsumption(\"swatches\")}>\n                    {_.sortBy(\n                        positionedBins.map((positionedBin, index) => {\n                            const bin = positionedBin.bin\n                            const style = this.getMarkerStyleConfig(bin)\n\n                            const fill = bin.patternRef\n                                ? `url(#${bin.patternRef})`\n                                : style.fill\n\n                            return (\n                                <NumericBinRect\n                                    key={index}\n                                    x={positionedBin.x}\n                                    y={bottomY - numericBinSize}\n                                    width={positionedBin.width}\n                                    height={numericBinSize}\n                                    fill={fill}\n                                    stroke={style.stroke}\n                                    strokeWidth={style.strokeWidth}\n                                    opacity={style.opacity}\n                                    isOpenLeft={\n                                        bin instanceof NumericBin\n                                            ? bin.props.isOpenLeft\n                                            : false\n                                    }\n                                    isOpenRight={\n                                        bin instanceof NumericBin\n                                            ? bin.props.isOpenRight\n                                            : false\n                                    }\n                                    onMouseEnter={() => {\n                                        this.manager.onLegendMouseEnter?.(bin)\n                                        this.manager.onLegendMouseOver?.(bin)\n                                    }}\n                                    onMouseLeave={() =>\n                                        this.manager.onLegendMouseLeave?.()\n                                    }\n                                />\n                            )\n                        }),\n                        (rect) => rect.props[\"strokeWidth\"]\n                    )}\n                </g>\n                <g id={makeIdForHumanConsumption(\"labels\")}>\n                    {numericLabels.map((label, index) => {\n                        const style = this.getTextStyleConfig(label.bin)\n                        return (\n                            <text\n                                key={index}\n                                x={label.bounds.x}\n                                y={bottomY + label.bounds.y}\n                                // we can't use dominant-baseline to do proper alignment since our svg-to-png library Sharp\n                                // doesn't support that (https://github.com/lovell/sharp/issues/1996), so we'll have to make\n                                // do with some rough positioning.\n                                dy={dyFromAlign(VerticalAlign.bottom)}\n                                fontSize={label.fontSize}\n                                style={{ fill: style.color, ...style }}\n                            >\n                                {label.text}\n                            </text>\n                        )\n                    })}\n                </g>\n                {this.legendTitle?.renderSVG(\n                    this.x,\n                    // Align legend title baseline with bottom of color bins\n                    this.numericLegendY +\n                        height -\n                        this.legendTitle.height +\n                        this.legendTitleFontSize * 0.2,\n                    { textProps: { fill: textColor } }\n                )}\n            </g>\n        )\n    }\n}\n\ninterface NumericBinRectProps extends React.SVGAttributes<SVGElement> {\n    x: number\n    y: number\n    width: number\n    height: number\n    isOpenLeft?: boolean\n    isOpenRight?: boolean\n}\n\n/** The width of the arrowhead for open-ended bins (left or right) */\nconst ARROW_SIZE = 5\n\nconst NumericBinRect = (props: NumericBinRectProps) => {\n    const { isOpenLeft, isOpenRight, x, y, width, height, ...restProps } = props\n    if (isOpenRight) {\n        const a = ARROW_SIZE\n        const w = width - a\n        const d = removeAllWhitespace(`\n            M ${x}, ${y}\n            l ${w}, 0\n            l ${a}, ${height / 2}\n            l ${-a}, ${height / 2}\n            l ${-w}, 0\n            z\n        `)\n        return <path d={d} {...restProps} />\n    } else if (isOpenLeft) {\n        const a = ARROW_SIZE\n        const w = width - a\n        const d = removeAllWhitespace(`\n            M ${x + a}, ${y}\n            l ${w}, 0\n            l 0, ${height}\n            l ${-w}, 0\n            l ${-a}, ${-height / 2}\n            z\n        `)\n        return <path d={d} {...restProps} />\n    } else {\n        return <rect x={x} y={y} width={width} height={height} {...restProps} />\n    }\n}\n\n@observer\nexport class HorizontalCategoricalColorLegend extends HorizontalColorLegend {\n    private rectPadding = 5\n    private markPadding = 5\n\n    constructor(props: { manager: HorizontalColorLegendManager }) {\n        super(props)\n\n        makeObservable(this)\n    }\n\n    @computed get width(): number {\n        return this.manager.legendWidth ?? this.manager.legendMaxWidth ?? 200\n    }\n\n    @computed private get categoricalLegendData(): CategoricalBin[] {\n        return this.manager.categoricalLegendData ?? []\n    }\n\n    @computed private get visibleCategoricalBins(): CategoricalBin[] {\n        return this.categoricalLegendData.filter((bin) => !bin.isHidden)\n    }\n\n    @computed private get markLines(): MarkLine[] {\n        const fontSize = this.fontSize * GRAPHER_FONT_SCALE_12_8\n        const rectSize = this.fontSize * 0.75\n\n        const lines: MarkLine[] = []\n        let marks: CategoricalMark[] = []\n        let xOffset = 0\n        let yOffset = 0\n        this.visibleCategoricalBins.forEach((bin) => {\n            const labelBounds = Bounds.forText(bin.text, { fontSize })\n            const markWidth =\n                rectSize +\n                this.rectPadding +\n                labelBounds.width +\n                this.markPadding\n\n            if (xOffset + markWidth > this.width && marks.length > 0) {\n                lines.push({\n                    totalWidth: xOffset - this.markPadding,\n                    marks: marks,\n                })\n                marks = []\n                xOffset = 0\n                yOffset += rectSize + this.rectPadding\n            }\n\n            const markX = xOffset\n            const markY = yOffset\n\n            const label = {\n                text: bin.text,\n                bounds: labelBounds.set({\n                    x: markX + rectSize + this.rectPadding,\n                    y: markY + rectSize / 2,\n                }),\n                fontSize,\n            }\n\n            marks.push({\n                x: markX,\n                y: markY,\n                width: markWidth,\n                rectSize,\n                label,\n                bin,\n            })\n\n            xOffset += markWidth + SPACE_BETWEEN_CATEGORICAL_BINS\n        })\n\n        if (marks.length > 0)\n            lines.push({ totalWidth: xOffset - this.markPadding, marks: marks })\n\n        return lines\n    }\n\n    @computed private get contentWidth(): number {\n        return _.max(this.markLines.map((l) => l.totalWidth)) as number\n    }\n\n    @computed private get containerWidth(): number {\n        return this.width ?? this.contentWidth\n    }\n\n    @computed private get marks(): CategoricalMark[] {\n        const lines = this.markLines\n        const align = this.legendAlign\n        const width = this.containerWidth\n\n        // Center each line\n        lines.forEach((line) => {\n            // TODO abstract this\n            const xShift =\n                align === HorizontalAlign.center\n                    ? (width - line.totalWidth) / 2\n                    : align === HorizontalAlign.right\n                      ? width - line.totalWidth\n                      : 0\n            line.marks.forEach((mark) => {\n                mark.x += xShift\n                mark.label.bounds = mark.label.bounds.set({\n                    x: mark.label.bounds.x + xShift,\n                })\n            })\n        })\n\n        return lines.flatMap((l) => l.marks)\n    }\n\n    @computed get height(): number {\n        return _.max(this.marks.map((mark) => mark.y + mark.rectSize)) ?? 0\n    }\n\n    @computed private get legendStyleConfig(): LegendStyleConfig | undefined {\n        return (\n            this.manager.categoricalLegendStyleConfig ??\n            this.manager.legendStyleConfig\n        )\n    }\n\n    private getTextStyleConfig(bin: ColorScaleBin): LegendTextStyle {\n        const state = this.getBinState(bin)\n        const styleConfig = this.legendStyleConfig?.text\n        const defaultStyle = styleConfig?.default\n        const currentStyle = styleConfig?.[state]\n        return { color: GRAPHER_DARK_TEXT, ...defaultStyle, ...currentStyle }\n    }\n\n    protected getMarkerStyleConfig(bin: ColorScaleBin): LegendMarkerStyle {\n        const state = this.getBinState(bin)\n        const styleConfig = this.legendStyleConfig?.marker\n        const defaultStyle = styleConfig?.default\n        const currentStyle = styleConfig?.[state]\n        return {\n            fill: bin.color,\n            strokeWidth: 0.4,\n            ...defaultStyle,\n            ...currentStyle,\n        }\n    }\n\n    renderLabels(): React.ReactElement {\n        const { marks } = this\n\n        return (\n            <g id={makeIdForHumanConsumption(\"labels\")}>\n                {marks.map((mark, index) => {\n                    const style = this.getTextStyleConfig(mark.bin)\n\n                    return (\n                        <text\n                            key={`${mark.label}-${index}`}\n                            x={this.legendX + mark.label.bounds.x}\n                            y={this.categoryLegendY + mark.label.bounds.y}\n                            // we can't use dominant-baseline to do proper alignment since our svg-to-png library Sharp\n                            // doesn't support that (https://github.com/lovell/sharp/issues/1996), so we'll have to make\n                            // do with some rough positioning.\n                            dy={dyFromAlign(VerticalAlign.middle)}\n                            fontSize={mark.label.fontSize}\n                            fontWeight={style.fontWeight}\n                            style={{ fill: style.color, ...style }}\n                        >\n                            {mark.label.text}\n                        </text>\n                    )\n                })}\n            </g>\n        )\n    }\n\n    renderSwatches(): React.ReactElement {\n        const { marks } = this\n\n        return (\n            <g id={makeIdForHumanConsumption(\"swatches\")}>\n                {marks.map((mark, index) => {\n                    const style = this.getMarkerStyleConfig(mark.bin)\n\n                    const fill = mark.bin.patternRef\n                        ? `url(#${mark.bin.patternRef})`\n                        : style.fill\n\n                    return (\n                        <rect\n                            id={makeIdForHumanConsumption(mark.label.text)}\n                            key={`${mark.label}-${index}`}\n                            x={this.legendX + mark.x}\n                            y={this.categoryLegendY + mark.y}\n                            width={mark.rectSize}\n                            height={mark.rectSize}\n                            style={{ ...style, fill }}\n                        />\n                    )\n                })}\n            </g>\n        )\n    }\n\n    renderInteractiveElements(): React.ReactElement {\n        const { manager, marks } = this\n\n        return (\n            <g>\n                {marks.map((mark, index) => {\n                    const mouseEnter = (): void =>\n                        manager.onLegendMouseEnter\n                            ? manager.onLegendMouseEnter(mark.bin)\n                            : undefined\n                    const mouseOver = (): void =>\n                        manager.onLegendMouseOver\n                            ? manager.onLegendMouseOver(mark.bin)\n                            : undefined\n                    const mouseLeave = (): void =>\n                        manager.onLegendMouseLeave\n                            ? manager.onLegendMouseLeave()\n                            : undefined\n                    const click = manager.onLegendClick\n                        ? (): void => manager.onLegendClick?.(mark.bin)\n                        : undefined\n\n                    return (\n                        <g\n                            key={`${mark.label}-${index}`}\n                            onMouseEnter={mouseEnter}\n                            onMouseOver={mouseOver}\n                            onMouseLeave={mouseLeave}\n                            onClick={click}\n                            style={{ cursor: manager.legendCursor }}\n                        >\n                            {/* for hover interaction */}\n                            <rect\n                                x={this.legendX + mark.x}\n                                y={\n                                    this.categoryLegendY +\n                                    mark.y -\n                                    this.rectPadding / 2\n                                }\n                                height={mark.rectSize + this.rectPadding}\n                                width={\n                                    mark.width + SPACE_BETWEEN_CATEGORICAL_BINS\n                                }\n                                fill=\"#fff\"\n                                opacity={0}\n                            />\n                        </g>\n                    )\n                })}\n            </g>\n        )\n    }\n\n    override render(): React.ReactElement {\n        return (\n            <g\n                id={makeIdForHumanConsumption(\"categorical-color-legend\")}\n                className=\"categoricalColorLegend\"\n            >\n                {this.renderSwatches()}\n                {this.renderLabels()}\n                {!this.manager.isStatic && this.renderInteractiveElements()}\n            </g>\n        )\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["x"]
+}

package/dist/grapher/legend/LegendInteractionState.d.ts

@@ -0,0 +1,37 @@
+import { Color } from "../../types/index.js";
+/**
+ * Represents the visual state of a legend item
+ */
+export declare enum LegendInteractionState {
+    /** No interaction, default state */
+    Default = "default",
+    /** Bin is de-emphasized (e.g. when another bin is hovered) */
+    Muted = "muted",
+    /** Bin is highlighted (e.g. when hovered) */
+    Focused = "focused"
+}
+/**
+ * Visual styling for legend label text in a particular state.
+ */
+export interface LegendTextStyle {
+    opacity?: number;
+    fontWeight?: number;
+    color?: Color;
+}
+/**
+ * Visual styling for legend marker/rect in a particular state.
+ */
+export interface LegendMarkerStyle {
+    opacity?: number;
+    fill?: Color;
+    strokeWidth?: number;
+    stroke?: Color;
+}
+/**
+ * Complete style configuration for all possible legend item states.
+ */
+export interface LegendStyleConfig {
+    text?: Partial<Record<LegendInteractionState, LegendTextStyle>>;
+    marker?: Partial<Record<LegendInteractionState, LegendMarkerStyle>>;
+}
+//# sourceMappingURL=LegendInteractionState.d.ts.map

package/dist/grapher/legend/LegendInteractionState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegendInteractionState.d.ts","sourceRoot":"","sources":["../../../src/grapher/legend/LegendInteractionState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAE5C;;GAEG;AACH,oBAAY,sBAAsB;IAC9B,oCAAoC;IACpC,OAAO,YAAY;IACnB,8DAA8D;IAC9D,KAAK,UAAU;IACf,6CAA6C;IAC7C,OAAO,YAAY;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,KAAK,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,sBAAsB,EAAE,eAAe,CAAC,CAAC,CAAA;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC,CAAA;CACtE"}

package/dist/grapher/legend/LegendInteractionState.js

@@ -0,0 +1,9 @@
+var LegendInteractionState = /* @__PURE__ */ ((LegendInteractionState2) => {
+  LegendInteractionState2["Default"] = "default";
+  LegendInteractionState2["Muted"] = "muted";
+  LegendInteractionState2["Focused"] = "focused";
+  return LegendInteractionState2;
+})(LegendInteractionState || {});
+export {
+  LegendInteractionState
+};

package/dist/grapher/legend/LegendInteractionState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/legend/LegendInteractionState.ts"],
+  "sourcesContent": ["import { Color } from \"../../types/index.js\"\n\n/**\n * Represents the visual state of a legend item\n */\nexport enum LegendInteractionState {\n    /** No interaction, default state */\n    Default = \"default\",\n    /** Bin is de-emphasized (e.g. when another bin is hovered) */\n    Muted = \"muted\",\n    /** Bin is highlighted (e.g. when hovered) */\n    Focused = \"focused\",\n}\n\n/**\n * Visual styling for legend label text in a particular state.\n */\nexport interface LegendTextStyle {\n    opacity?: number\n    fontWeight?: number\n    color?: Color\n}\n\n/**\n * Visual styling for legend marker/rect in a particular state.\n */\nexport interface LegendMarkerStyle {\n    opacity?: number\n    fill?: Color\n    strokeWidth?: number\n    stroke?: Color\n}\n\n/**\n * Complete style configuration for all possible legend item states.\n */\nexport interface LegendStyleConfig {\n    text?: Partial<Record<LegendInteractionState, LegendTextStyle>>\n    marker?: Partial<Record<LegendInteractionState, LegendMarkerStyle>>\n}\n"],
+  "mappings": "AAKO,IAAK,yBAAL,kBAAKA,4BAAL;AAEH,EAAAA,wBAAA,aAAU;AAEV,EAAAA,wBAAA,WAAQ;AAER,EAAAA,wBAAA,aAAU;AANF,SAAAA;AAAA,GAAA;",
+  "names": ["LegendInteractionState"]
+}

package/dist/grapher/legend/VerticalColorLegend.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { ColorScaleBin } from "../color/ColorScaleBin.js";
+import { LegendInteractionState, LegendStyleConfig } from "../legend/LegendInteractionState.js";
+export interface VerticalColorLegendManager {
+    maxLegendWidth?: number;
+    fontSize?: number;
+    categoricalLegendData: ColorScaleBin[];
+    legendTitle?: string;
+    onLegendMouseOver?: (bin: ColorScaleBin) => void;
+    onLegendClick?: (bin: ColorScaleBin) => void;
+    onLegendMouseLeave?: () => void;
+    legendX?: number;
+    legendY?: number;
+    isStatic?: boolean;
+    getLegendBinState?: (bin: ColorScaleBin) => LegendInteractionState;
+    legendStyleConfig?: LegendStyleConfig;
+    categoricalLegendStyleConfig?: LegendStyleConfig;
+}
+export declare class VerticalColorLegend extends React.Component<{
+    manager: VerticalColorLegendManager;
+}> {
+    constructor(props: {
+        manager: VerticalColorLegendManager;
+    });
+    get manager(): VerticalColorLegendManager;
+    private get maxLegendWidth();
+    private get fontSize();
+    private get rectSize();
+    private rectPadding;
+    private lineHeight;
+    private get title();
+    private get titleHeight();
+    private get series();
+    get width(): number;
+    get height(): number;
+    get legendX(): number;
+    get legendY(): number;
+    private get legendStyleConfig();
+    private getBinState;
+    private getTextStyleConfig;
+    private getMarkerStyleConfig;
+    renderLabels(): React.ReactElement;
+    renderSwatches(): React.ReactElement;
+    renderInteractiveElements(): React.ReactElement;
+    render(): React.ReactElement;
+}
+//# sourceMappingURL=VerticalColorLegend.d.ts.map

package/dist/grapher/legend/VerticalColorLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalColorLegend.d.ts","sourceRoot":"","sources":["../../../src/grapher/legend/VerticalColorLegend.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,EAAE,aAAa,EAAc,MAAM,2BAA2B,CAAA;AAErE,OAAO,EACH,sBAAsB,EACtB,iBAAiB,EAGpB,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,0BAA0B;IACvC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qBAAqB,EAAE,aAAa,EAAE,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAA;IAChD,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,sBAAsB,CAAA;IAClE,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,4BAA4B,CAAC,EAAE,iBAAiB,CAAA;CACnD;AAUD,qBACa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC;IACrD,OAAO,EAAE,0BAA0B,CAAA;CACtC,CAAC;gBACc,KAAK,EAAE;QAAE,OAAO,EAAE,0BAA0B,CAAA;KAAE;IAK1D,IAAc,OAAO,IAAI,0BAA0B,CAElD;IAES,OAAO,KAAK,cAAc,GAEnC;IAES,OAAO,KAAK,QAAQ,GAI7B;IACS,OAAO,KAAK,QAAQ,GAE7B;IAED,OAAO,CAAC,WAAW,CAAI;IACvB,OAAO,CAAC,UAAU,CAAI;IAEZ,OAAO,KAAK,KAAK,GAS1B;IAES,OAAO,KAAK,WAAW,GAGhC;IAES,OAAO,KAAK,MAAM,GAqC3B;IAED,IAAc,KAAK,IAAI,MAAM,CAI5B;IAED,IAAc,MAAM,IAAI,MAAM,CAM7B;IAED,IAAc,OAAO,IAAI,MAAM,CAE9B;IAED,IAAc,OAAO,IAAI,MAAM,CAE9B;IAES,OAAO,KAAK,iBAAiB,GAKtC;IAED,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,oBAAoB;IAQ5B,YAAY,IAAI,KAAK,CAAC,YAAY;IAuBlC,cAAc,IAAI,KAAK,CAAC,YAAY;IA6BpC,yBAAyB,IAAI,KAAK,CAAC,YAAY;IA6CtC,MAAM,IAAI,KAAK,CAAC,YAAY;CAkBxC"}

package/dist/grapher/legend/VerticalColorLegend.js

@@ -0,0 +1,245 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as _ from "lodash-es";
+import * as React from "react";
+import { makeIdForHumanConsumption } from "../../utils/index.js";
+import { TextWrap } from "../../components/index.js";
+import { computed, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import {
+  GRAPHER_FONT_SCALE_11_2,
+  BASE_FONT_SIZE
+} from "../core/GrapherConstants.js";
+import { NumericBin } from "../color/ColorScaleBin.js";
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants.js";
+import {
+  LegendInteractionState
+} from "../legend/LegendInteractionState.js";
+let VerticalColorLegend = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.rectPadding = 5;
+    this.lineHeight = 5;
+    makeObservable(this);
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get maxLegendWidth() {
+    return this.manager.maxLegendWidth ?? 100;
+  }
+  get fontSize() {
+    return GRAPHER_FONT_SCALE_11_2 * (this.manager.fontSize ?? BASE_FONT_SIZE);
+  }
+  get rectSize() {
+    return Math.round(this.fontSize / 1.4);
+  }
+  get title() {
+    if (!this.manager.legendTitle) return void 0;
+    return new TextWrap({
+      maxWidth: this.maxLegendWidth,
+      fontSize: this.fontSize,
+      fontWeight: 700,
+      lineHeight: 1,
+      text: this.manager.legendTitle
+    });
+  }
+  get titleHeight() {
+    if (!this.title) return 0;
+    return this.title.height + 5;
+  }
+  get series() {
+    const {
+      manager,
+      fontSize,
+      rectSize,
+      rectPadding,
+      titleHeight,
+      lineHeight
+    } = this;
+    let runningYOffset = titleHeight;
+    return manager.categoricalLegendData.map((bin) => {
+      let label = bin.text;
+      if (!label && bin instanceof NumericBin && bin.minText && bin.maxText) {
+        label = `${bin.minText} \u2013 ${bin.maxText}`;
+      }
+      const textWrap = new TextWrap({
+        maxWidth: this.maxLegendWidth,
+        fontSize,
+        lineHeight: 1,
+        text: label
+      });
+      const width = rectSize + rectPadding + textWrap.width;
+      const height = Math.max(textWrap.height, rectSize);
+      const yOffset = runningYOffset;
+      runningYOffset += height + lineHeight;
+      return { bin, textWrap, width, height, yOffset };
+    });
+  }
+  get width() {
+    const widths = this.series.map((series) => series.width);
+    if (this.title) widths.push(this.title.width);
+    return _.max(widths) ?? 0;
+  }
+  get height() {
+    return this.titleHeight + _.sum(this.series.map((series) => series.height)) + this.lineHeight * this.series.length;
+  }
+  get legendX() {
+    return this.manager.legendX ?? 0;
+  }
+  get legendY() {
+    return this.manager.legendY ?? 0;
+  }
+  get legendStyleConfig() {
+    return this.manager.categoricalLegendStyleConfig ?? this.manager.legendStyleConfig;
+  }
+  getBinState(bin) {
+    return this.manager.getLegendBinState?.(bin) ?? LegendInteractionState.Default;
+  }
+  getTextStyleConfig(bin) {
+    const state = this.getBinState(bin);
+    const styleConfig = this.legendStyleConfig?.text;
+    const defaultStyle = styleConfig?.default;
+    const currentStyle = styleConfig?.[state];
+    return { color: GRAPHER_DARK_TEXT, ...defaultStyle, ...currentStyle };
+  }
+  getMarkerStyleConfig(bin) {
+    const state = this.getBinState(bin);
+    const styleConfig = this.legendStyleConfig?.marker;
+    const defaultStyle = styleConfig?.default;
+    const currentStyle = styleConfig?.[state];
+    return { fill: bin.color, ...defaultStyle, ...currentStyle };
+  }
+  renderLabels() {
+    const { series, rectSize, rectPadding } = this;
+    return /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("labels") }, series.map((series2) => {
+      const style = this.getTextStyleConfig(series2.bin);
+      const textX = this.legendX + rectSize + rectPadding;
+      const textY = this.legendY + series2.yOffset;
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: series2.textWrap.text }, series2.textWrap.renderSVG(textX, textY, {
+        textProps: { fill: style.color, ...style }
+      }));
+    }));
+  }
+  renderSwatches() {
+    const { series, rectSize, rectPadding } = this;
+    return /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("swatches") }, series.map((series2) => {
+      const style = this.getMarkerStyleConfig(series2.bin);
+      const textX = this.legendX + rectSize + rectPadding;
+      const textY = this.legendY + series2.yOffset;
+      const renderedTextPosition = series2.textWrap.getPositionForSvgRendering(textX, textY);
+      return /* @__PURE__ */ React.createElement(
+        "rect",
+        {
+          id: makeIdForHumanConsumption(series2.textWrap.text),
+          key: series2.textWrap.text,
+          x: this.legendX,
+          y: renderedTextPosition[1] - rectSize,
+          width: rectSize,
+          height: rectSize,
+          style
+        }
+      );
+    }));
+  }
+  renderInteractiveElements() {
+    const { series, manager, lineHeight } = this;
+    const { onLegendClick, onLegendMouseOver, onLegendMouseLeave } = manager;
+    return /* @__PURE__ */ React.createElement("g", null, series.map((series2) => {
+      const label = series2.textWrap.text;
+      const mouseOver = onLegendMouseOver ? () => onLegendMouseOver(series2.bin) : void 0;
+      const mouseLeave = onLegendMouseLeave || void 0;
+      const click = onLegendClick ? () => onLegendClick(series2.bin) : void 0;
+      const cursor = click ? "pointer" : "default";
+      return /* @__PURE__ */ React.createElement(
+        "g",
+        {
+          key: label,
+          className: "legendMark",
+          onMouseOver: mouseOver,
+          onMouseLeave: mouseLeave,
+          onClick: click,
+          style: { cursor }
+        },
+        /* @__PURE__ */ React.createElement(
+          "rect",
+          {
+            x: this.legendX,
+            y: this.legendY + series2.yOffset - lineHeight / 2,
+            width: series2.width,
+            height: series2.height + lineHeight,
+            fill: "#fff",
+            fillOpacity: 0
+          }
+        )
+      );
+    }));
+  }
+  render() {
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption("vertical-color-legend"),
+        className: "ScatterColorLegend clickable"
+      },
+      this.title && this.title.renderSVG(this.legendX, this.legendY, {
+        textProps: {
+          fontWeight: 700
+        }
+      }),
+      this.renderLabels(),
+      this.renderSwatches(),
+      !this.manager.isStatic && this.renderInteractiveElements()
+    );
+  }
+};
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "manager", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "maxLegendWidth", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "fontSize", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "rectSize", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "title", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "titleHeight", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "series", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "width", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "height", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "legendX", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "legendY", 1);
+__decorateClass([
+  computed
+], VerticalColorLegend.prototype, "legendStyleConfig", 1);
+VerticalColorLegend = __decorateClass([
+  observer
+], VerticalColorLegend);
+export {
+  VerticalColorLegend
+};

package/dist/grapher/legend/VerticalColorLegend.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/legend/VerticalColorLegend.tsx"],
+  "sourcesContent": ["import * as _ from \"lodash-es\"\nimport * as React from \"react\"\nimport { makeIdForHumanConsumption } from \"../../utils/index.js\"\nimport { TextWrap } from \"../../components/index.js\"\nimport { computed, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport {\n    GRAPHER_FONT_SCALE_11_2,\n    BASE_FONT_SIZE,\n} from \"../core/GrapherConstants.js\"\nimport { ColorScaleBin, NumericBin } from \"../color/ColorScaleBin.js\"\nimport { GRAPHER_DARK_TEXT } from \"../color/ColorConstants.js\"\nimport {\n    LegendInteractionState,\n    LegendStyleConfig,\n    LegendMarkerStyle,\n    LegendTextStyle,\n} from \"../legend/LegendInteractionState.js\"\n\nexport interface VerticalColorLegendManager {\n    maxLegendWidth?: number\n    fontSize?: number\n    categoricalLegendData: ColorScaleBin[]\n    legendTitle?: string\n    onLegendMouseOver?: (bin: ColorScaleBin) => void\n    onLegendClick?: (bin: ColorScaleBin) => void\n    onLegendMouseLeave?: () => void\n    legendX?: number\n    legendY?: number\n    isStatic?: boolean\n    getLegendBinState?: (bin: ColorScaleBin) => LegendInteractionState\n    legendStyleConfig?: LegendStyleConfig\n    categoricalLegendStyleConfig?: LegendStyleConfig\n}\n\ninterface SizedLegendSeries {\n    bin: ColorScaleBin\n    textWrap: TextWrap\n    width: number\n    height: number\n    yOffset: number\n}\n\n@observer\nexport class VerticalColorLegend extends React.Component<{\n    manager: VerticalColorLegendManager\n}> {\n    constructor(props: { manager: VerticalColorLegendManager }) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed get manager(): VerticalColorLegendManager {\n        return this.props.manager\n    }\n\n    @computed private get maxLegendWidth(): number {\n        return this.manager.maxLegendWidth ?? 100\n    }\n\n    @computed private get fontSize(): number {\n        return (\n            GRAPHER_FONT_SCALE_11_2 * (this.manager.fontSize ?? BASE_FONT_SIZE)\n        )\n    }\n    @computed private get rectSize(): number {\n        return Math.round(this.fontSize / 1.4)\n    }\n\n    private rectPadding = 5\n    private lineHeight = 5\n\n    @computed private get title(): TextWrap | undefined {\n        if (!this.manager.legendTitle) return undefined\n        return new TextWrap({\n            maxWidth: this.maxLegendWidth,\n            fontSize: this.fontSize,\n            fontWeight: 700,\n            lineHeight: 1,\n            text: this.manager.legendTitle,\n        })\n    }\n\n    @computed private get titleHeight(): number {\n        if (!this.title) return 0\n        return this.title.height + 5\n    }\n\n    @computed private get series(): SizedLegendSeries[] {\n        const {\n            manager,\n            fontSize,\n            rectSize,\n            rectPadding,\n            titleHeight,\n            lineHeight,\n        } = this\n\n        let runningYOffset = titleHeight\n        return manager.categoricalLegendData.map((bin) => {\n            // Get label, inferring from minText/maxText for numeric bins if needed\n            let label = bin.text\n            if (\n                !label &&\n                bin instanceof NumericBin &&\n                bin.minText &&\n                bin.maxText\n            ) {\n                label = `${bin.minText} \u2013 ${bin.maxText}`\n            }\n\n            const textWrap = new TextWrap({\n                maxWidth: this.maxLegendWidth,\n                fontSize,\n                lineHeight: 1,\n                text: label,\n            })\n            const width = rectSize + rectPadding + textWrap.width\n            const height = Math.max(textWrap.height, rectSize)\n            const yOffset = runningYOffset\n\n            runningYOffset += height + lineHeight\n\n            return { bin, textWrap, width, height, yOffset }\n        })\n    }\n\n    @computed get width(): number {\n        const widths = this.series.map((series) => series.width)\n        if (this.title) widths.push(this.title.width)\n        return _.max(widths) ?? 0\n    }\n\n    @computed get height(): number {\n        return (\n            this.titleHeight +\n            _.sum(this.series.map((series) => series.height)) +\n            this.lineHeight * this.series.length\n        )\n    }\n\n    @computed get legendX(): number {\n        return this.manager.legendX ?? 0\n    }\n\n    @computed get legendY(): number {\n        return this.manager.legendY ?? 0\n    }\n\n    @computed private get legendStyleConfig(): LegendStyleConfig | undefined {\n        return (\n            this.manager.categoricalLegendStyleConfig ??\n            this.manager.legendStyleConfig\n        )\n    }\n\n    private getBinState(bin: ColorScaleBin): LegendInteractionState {\n        return (\n            this.manager.getLegendBinState?.(bin) ??\n            LegendInteractionState.Default\n        )\n    }\n\n    private getTextStyleConfig(bin: ColorScaleBin): LegendTextStyle {\n        const state = this.getBinState(bin)\n        const styleConfig = this.legendStyleConfig?.text\n        const defaultStyle = styleConfig?.default\n        const currentStyle = styleConfig?.[state]\n        return { color: GRAPHER_DARK_TEXT, ...defaultStyle, ...currentStyle }\n    }\n\n    private getMarkerStyleConfig(bin: ColorScaleBin): LegendMarkerStyle {\n        const state = this.getBinState(bin)\n        const styleConfig = this.legendStyleConfig?.marker\n        const defaultStyle = styleConfig?.default\n        const currentStyle = styleConfig?.[state]\n        return { fill: bin.color, ...defaultStyle, ...currentStyle }\n    }\n\n    renderLabels(): React.ReactElement {\n        const { series, rectSize, rectPadding } = this\n\n        return (\n            <g id={makeIdForHumanConsumption(\"labels\")}>\n                {series.map((series) => {\n                    const style = this.getTextStyleConfig(series.bin)\n\n                    const textX = this.legendX + rectSize + rectPadding\n                    const textY = this.legendY + series.yOffset\n\n                    return (\n                        <React.Fragment key={series.textWrap.text}>\n                            {series.textWrap.renderSVG(textX, textY, {\n                                textProps: { fill: style.color, ...style },\n                            })}\n                        </React.Fragment>\n                    )\n                })}\n            </g>\n        )\n    }\n\n    renderSwatches(): React.ReactElement {\n        const { series, rectSize, rectPadding } = this\n\n        return (\n            <g id={makeIdForHumanConsumption(\"swatches\")}>\n                {series.map((series) => {\n                    const style = this.getMarkerStyleConfig(series.bin)\n\n                    const textX = this.legendX + rectSize + rectPadding\n                    const textY = this.legendY + series.yOffset\n                    const renderedTextPosition =\n                        series.textWrap.getPositionForSvgRendering(textX, textY)\n\n                    return (\n                        <rect\n                            id={makeIdForHumanConsumption(series.textWrap.text)}\n                            key={series.textWrap.text}\n                            x={this.legendX}\n                            y={renderedTextPosition[1] - rectSize}\n                            width={rectSize}\n                            height={rectSize}\n                            style={style}\n                        />\n                    )\n                })}\n            </g>\n        )\n    }\n\n    renderInteractiveElements(): React.ReactElement {\n        const { series, manager, lineHeight } = this\n        const { onLegendClick, onLegendMouseOver, onLegendMouseLeave } = manager\n        return (\n            <g>\n                {series.map((series) => {\n                    const label = series.textWrap.text\n                    const mouseOver = onLegendMouseOver\n                        ? (): void => onLegendMouseOver(series.bin)\n                        : undefined\n                    const mouseLeave = onLegendMouseLeave || undefined\n                    const click = onLegendClick\n                        ? (): void => onLegendClick(series.bin)\n                        : undefined\n\n                    const cursor = click ? \"pointer\" : \"default\"\n\n                    return (\n                        <g\n                            key={label}\n                            className=\"legendMark\"\n                            onMouseOver={mouseOver}\n                            onMouseLeave={mouseLeave}\n                            onClick={click}\n                            style={{ cursor }}\n                        >\n                            <rect\n                                x={this.legendX}\n                                y={\n                                    this.legendY +\n                                    series.yOffset -\n                                    lineHeight / 2\n                                }\n                                width={series.width}\n                                height={series.height + lineHeight}\n                                fill=\"#fff\"\n                                fillOpacity={0}\n                            />\n                        </g>\n                    )\n                })}\n            </g>\n        )\n    }\n\n    override render(): React.ReactElement {\n        return (\n            <g\n                id={makeIdForHumanConsumption(\"vertical-color-legend\")}\n                className=\"ScatterColorLegend clickable\"\n            >\n                {this.title &&\n                    this.title.renderSVG(this.legendX, this.legendY, {\n                        textProps: {\n                            fontWeight: 700,\n                        },\n                    })}\n                {this.renderLabels()}\n                {this.renderSwatches()}\n                {!this.manager.isStatic && this.renderInteractiveElements()}\n            </g>\n        )\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["series"]
+}

package/dist/grapher/lineCharts/LineChart.d.ts

@@ -0,0 +1,108 @@
+import React from "react";
+import { HorizontalAlign } from "../../utils/index.js";
+import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis.js";
+import { Time } from "../../types/index.js";
+import { ChartInterface } from "../chart/ChartInterface.js";
+import { LineChartSeries, PlacedLineChartSeries } from "./LineChartConstants.js";
+import { ColorScaleBin } from "../color/ColorScaleBin.js";
+import { HorizontalColorLegendManager } from "../legend/HorizontalColorLegends.js";
+import { AnnotationsMap } from "./LineChartHelpers.js";
+import { LineChartState } from "./LineChartState.js";
+import { AxisManager } from "../axis/AxisConfig.js";
+import { ChartComponentProps } from "../chart/ChartTypeMap.js";
+import { LegendStyleConfig } from "../legend/LegendInteractionState.js";
+export type LineChartProps = ChartComponentProps<LineChartState>;
+export declare class LineChart extends React.Component<LineChartProps> implements ChartInterface, HorizontalColorLegendManager, AxisManager {
+    private base;
+    constructor(props: LineChartProps);
+    get chartState(): LineChartState;
+    get isStatic(): boolean;
+    get detailsOrderedByReference(): string[];
+    get annotationsMap(): AnnotationsMap | undefined;
+    private dismissTooltip;
+    private onCursorLeave;
+    private get allValues();
+    private tooltipState;
+    private onCursorMove;
+    private get manager();
+    private get bounds();
+    private get boundsWithoutColorLegend();
+    private get maxLineLegendWidth();
+    private get lineStrokeWidth();
+    private get lineOutlineWidth();
+    private get markerRadius();
+    get activeTimes(): Time[];
+    private get activeXVerticalLines();
+    private get tooltipId();
+    private get isTooltipActive();
+    private get tooltip();
+    private defaultRightPadding;
+    private lineLegendHoveredSeriesName;
+    private hoverTimer;
+    private onLineLegendMouseOver;
+    private clearLineLegendHover;
+    private clearHighlightedSeries;
+    private onLineLegendMouseLeave;
+    private onLineLegendClick;
+    private get hoveredSeriesNames();
+    private get isHoverModeActive();
+    private get canToggleFocusMode();
+    private get hasTimeHighlights();
+    private onDocumentClick;
+    private animSelection?;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private get renderUid();
+    get fontSize(): number;
+    private get fontWeight();
+    private get hidePoints();
+    private get lineLegendX();
+    private get lineLegendY();
+    private get clipPathBounds();
+    private get clipPath();
+    private runFancyIntroAnimation;
+    private get lineLegendWidth();
+    private renderDualAxis;
+    private renderColorLegend;
+    /**
+     * Render the lines themselves and their labels
+     */
+    private renderChartElements;
+    private renderStatic;
+    private renderInteractive;
+    render(): React.ReactElement;
+    protected get yColumnSlugs(): string[];
+    private get colorColumn();
+    private get formatColumn();
+    private get hasColorScale();
+    private get hasColorLegend();
+    get legendX(): number;
+    get legendMaxWidth(): number;
+    get legendAlign(): HorizontalAlign;
+    private get colorScale();
+    get numericLegendData(): ColorScaleBin[];
+    numericBinSize: number;
+    legendTickSize: number;
+    categoricalLegendStyleConfig: LegendStyleConfig;
+    numericLegendStyleConfig: LegendStyleConfig;
+    private get numericLegend();
+    get numericLegendY(): number;
+    get legendTitle(): string | undefined;
+    get legendHeight(): number;
+    get series(): readonly LineChartSeries[];
+    private get hasMarkersOnlySeries();
+    get placedSeries(): PlacedLineChartSeries[];
+    private hoverStateForSeries;
+    private get renderSeries();
+    private get lineLegendSeries();
+    private get yAxisConfig();
+    private get xAxisConfig();
+    private get horizontalAxisPart();
+    private get verticalAxisPart();
+    private get innerBounds();
+    get dualAxis(): DualAxis;
+    get yAxis(): VerticalAxis;
+    get xAxis(): HorizontalAxis;
+    get externalLegend(): HorizontalColorLegendManager | undefined;
+}
+//# sourceMappingURL=LineChart.d.ts.map

package/dist/grapher/lineCharts/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../src/grapher/lineCharts/LineChart.tsx"],"names":[],"mappings":"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"}