@buildcanada/charts 0.3.6 → 0.3.8

package/dist/grapher/legend/HorizontalColorLegends.js

@@ -0,0 +1,755 @@
+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 * as R from "remeda";
+import { computed, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import {
+  dyFromAlign,
+  removeAllWhitespace,
+  Bounds,
+  HorizontalAlign,
+  VerticalAlign,
+  makeIdForHumanConsumption
+} from "../../utils/index.js";
+import { TextWrap } from "../../components/index.js";
+import {
+  NumericBin,
+  CategoricalBin
+} from "../color/ColorScaleBin.js";
+import {
+  BASE_FONT_SIZE,
+  GRAPHER_FONT_SCALE_12,
+  GRAPHER_FONT_SCALE_12_8,
+  GRAPHER_FONT_SCALE_14
+} from "../core/GrapherConstants.js";
+import { darkenColorForLine } from "../color/ColorUtils.js";
+import {
+  LegendInteractionState
+} from "../legend/LegendInteractionState.js";
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants.js";
+const DEFAULT_NUMERIC_BIN_SIZE = 10;
+const DEFAULT_NUMERIC_BIN_STROKE = "#333";
+const DEFAULT_NUMERIC_BIN_STROKE_WIDTH = 0.3;
+const DEFAULT_TEXT_COLOR = "#111";
+const DEFAULT_TICK_SIZE = 3;
+const CATEGORICAL_BIN_MIN_WIDTH = 20;
+const SPACE_BETWEEN_CATEGORICAL_BINS = 7;
+const MINIMUM_LABEL_DISTANCE = 5;
+class HorizontalColorLegend extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get legendX() {
+    return this.manager.legendX ?? 0;
+  }
+  get categoryLegendY() {
+    return this.manager.categoryLegendY ?? 0;
+  }
+  get numericLegendY() {
+    return this.manager.numericLegendY ?? 0;
+  }
+  get legendMaxWidth() {
+    return this.manager.legendMaxWidth;
+  }
+  get legendHeight() {
+    return this.manager.legendHeight ?? 200;
+  }
+  get legendAlign() {
+    return this.manager.legendAlign ?? HorizontalAlign.center;
+  }
+  get fontSize() {
+    return this.manager.fontSize ?? BASE_FONT_SIZE;
+  }
+  get legendTickSize() {
+    return this.manager.legendTickSize ?? DEFAULT_TICK_SIZE;
+  }
+  getBinState(bin) {
+    return this.manager.getLegendBinState?.(bin) ?? LegendInteractionState.Default;
+  }
+}
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "manager", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "legendX", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "categoryLegendY", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "numericLegendY", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "legendMaxWidth", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "legendHeight", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "legendAlign", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "fontSize", 1);
+__decorateClass([
+  computed
+], HorizontalColorLegend.prototype, "legendTickSize", 1);
+let HorizontalNumericColorLegend = class extends HorizontalColorLegend {
+  constructor(props) {
+    super(props);
+    this.base = React.createRef();
+    makeObservable(this);
+  }
+  get numericLegendData() {
+    return this.manager.numericLegendData ?? [];
+  }
+  get visibleBins() {
+    return this.numericLegendData.filter((bin) => !bin.isHidden);
+  }
+  get numericBins() {
+    return this.visibleBins.filter(
+      (bin) => bin instanceof NumericBin
+    );
+  }
+  get numericBinSize() {
+    return this.props.manager.numericBinSize ?? DEFAULT_NUMERIC_BIN_SIZE;
+  }
+  get tickFontSize() {
+    return GRAPHER_FONT_SCALE_12 * this.fontSize;
+  }
+  get itemMargin() {
+    return Math.round(this.fontSize * 1.125);
+  }
+  get maxWidth() {
+    return this.manager.legendMaxWidth ?? this.manager.legendWidth ?? 200;
+  }
+  getTickLabelWidth(label) {
+    return Bounds.forText(label, {
+      fontSize: this.tickFontSize
+    }).width;
+  }
+  getCategoricalBinWidth(bin) {
+    return Math.max(
+      this.getTickLabelWidth(bin.text),
+      CATEGORICAL_BIN_MIN_WIDTH
+    );
+  }
+  get totalCategoricalWidth() {
+    const { visibleBins, itemMargin } = this;
+    const widths = visibleBins.map(
+      (bin) => bin instanceof CategoricalBin && !bin.isHidden ? this.getCategoricalBinWidth(bin) + itemMargin : 0
+    );
+    return _.sum(widths);
+  }
+  get isAutoWidth() {
+    return this.manager.legendWidth === void 0 && this.manager.legendMaxWidth !== void 0;
+  }
+  getNumericLabelMinWidth(bin) {
+    if (bin.text) {
+      const tickLabelWidth = this.getTickLabelWidth(bin.text);
+      return tickLabelWidth + MINIMUM_LABEL_DISTANCE;
+    } else {
+      const combinedLabelWidths = _.sum(
+        [bin.minText, bin.maxText].map(
+          (text) => (
+            // because labels are center-aligned, only half the label space is required
+            this.getTickLabelWidth(text) / 2
+          )
+        )
+      );
+      return combinedLabelWidths + MINIMUM_LABEL_DISTANCE * 2;
+    }
+  }
+  get idealNumericWidth() {
+    const binCount = this.numericBins.length;
+    const spaceRequirements = this.numericBins.map((bin) => ({
+      labelSpace: this.getNumericLabelMinWidth(bin)
+    }));
+    const minBinWidth = this.fontSize * 3.25;
+    const maxBinWidth = _.max(
+      spaceRequirements.map(
+        ({ labelSpace }) => Math.max(labelSpace, minBinWidth)
+      )
+    ) ?? 0;
+    return Math.round(maxBinWidth * binCount);
+  }
+  get width() {
+    if (this.isAutoWidth) {
+      return Math.min(
+        this.maxWidth,
+        this.legendTitleWidth + this.totalCategoricalWidth + this.idealNumericWidth
+      );
+    } else {
+      return this.maxWidth;
+    }
+  }
+  get availableNumericWidth() {
+    return this.width - this.totalCategoricalWidth - this.legendTitleWidth;
+  }
+  get x() {
+    const { width, maxWidth, legendAlign, legendX } = this;
+    const widthDiff = maxWidth - width;
+    if (legendAlign === HorizontalAlign.center) {
+      return legendX + widthDiff / 2;
+    } else if (legendAlign === HorizontalAlign.right) {
+      return legendX + widthDiff;
+    } else {
+      return legendX;
+    }
+  }
+  get positionedBins() {
+    const {
+      availableNumericWidth,
+      visibleBins,
+      numericBins,
+      legendTitleWidth,
+      x
+    } = this;
+    let xOffset = x + legendTitleWidth;
+    let prevBin;
+    return visibleBins.map((bin, index) => {
+      const isFirst = index === 0;
+      let width = this.getCategoricalBinWidth(bin);
+      let marginLeft = isFirst ? 0 : this.itemMargin;
+      if (bin instanceof NumericBin) {
+        width = availableNumericWidth / numericBins.length;
+        if (prevBin instanceof NumericBin) {
+          marginLeft = 0;
+        }
+      }
+      const x2 = xOffset + marginLeft;
+      xOffset = x2 + width;
+      prevBin = bin;
+      return {
+        x: x2,
+        width,
+        bin
+      };
+    });
+  }
+  get legendTitleFontSize() {
+    return this.fontSize * GRAPHER_FONT_SCALE_14;
+  }
+  get legendTitle() {
+    const { legendTitle } = this.manager;
+    return legendTitle ? new TextWrap({
+      text: legendTitle,
+      fontSize: this.legendTitleFontSize,
+      fontWeight: 700,
+      maxWidth: this.maxWidth / 3,
+      lineHeight: 1
+    }) : void 0;
+  }
+  get legendTitleWidth() {
+    return this.legendTitle ? this.legendTitle.width + this.itemMargin : 0;
+  }
+  get numericLabels() {
+    const { numericBinSize, positionedBins, tickFontSize } = this;
+    const makeBoundaryLabel = (bin, minOrMax, text) => {
+      const labelBounds = Bounds.forText(text, { fontSize: tickFontSize });
+      const x = bin.x + (minOrMax === "min" ? 0 : bin.width) - labelBounds.width / 2;
+      const y = -numericBinSize - labelBounds.height - this.legendTickSize;
+      return {
+        text,
+        fontSize: tickFontSize,
+        bounds: labelBounds.set({ x, y }),
+        hidden: false,
+        raised: false,
+        bin: bin.bin
+      };
+    };
+    const makeRangeLabel = (bin) => {
+      const labelBounds = Bounds.forText(bin.bin.text, {
+        fontSize: tickFontSize
+      });
+      const x = bin.x + bin.width / 2 - labelBounds.width / 2;
+      const y = -numericBinSize - labelBounds.height - this.legendTickSize;
+      return {
+        text: bin.bin.text,
+        fontSize: tickFontSize,
+        bounds: labelBounds.set({ x, y }),
+        priority: true,
+        hidden: false,
+        raised: false,
+        bin: bin.bin
+      };
+    };
+    let labels = [];
+    for (const bin of positionedBins) {
+      if (bin.bin.text) labels.push(makeRangeLabel(bin));
+      else if (bin.bin instanceof NumericBin) {
+        if (bin.bin.minText)
+          labels.push(makeBoundaryLabel(bin, "min", bin.bin.minText));
+        if (bin === R.last(positionedBins) && bin.bin.maxText)
+          labels.push(makeBoundaryLabel(bin, "max", bin.bin.maxText));
+      }
+    }
+    for (let index = 0; index < labels.length; index++) {
+      const l1 = labels[index];
+      if (l1.hidden) continue;
+      for (let j = index + 1; j < labels.length; j++) {
+        const l2 = labels[j];
+        if (l1.bounds.right + MINIMUM_LABEL_DISTANCE > l2.bounds.centerX || l2.bounds.left - MINIMUM_LABEL_DISTANCE < l1.bounds.centerX && !l2.priority)
+          l2.hidden = true;
+      }
+    }
+    labels = labels.filter((label) => !label.hidden);
+    let raisedMode = false;
+    for (let index = 1; index < labels.length; index++) {
+      const l1 = labels[index - 1], l2 = labels[index];
+      if (l1.bounds.right + MINIMUM_LABEL_DISTANCE > l2.bounds.left) {
+        raisedMode = true;
+        break;
+      }
+    }
+    if (raisedMode) {
+      for (let index = 1; index < labels.length; index++) {
+        const label = labels[index];
+        if (index % 2 !== 0) {
+          label.bounds = label.bounds.set({
+            y: label.bounds.y - label.bounds.height - 1
+          });
+          label.raised = true;
+        }
+      }
+    }
+    return labels;
+  }
+  get height() {
+    return Math.abs(
+      _.min(this.numericLabels.map((label) => label.bounds.y)) ?? 0
+    );
+  }
+  get legendStyleConfig() {
+    return this.manager.numericLegendStyleConfig ?? this.manager.legendStyleConfig;
+  }
+  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 current = styleConfig?.[state];
+    return {
+      fill: bin.color,
+      stroke: DEFAULT_NUMERIC_BIN_STROKE,
+      strokeWidth: DEFAULT_NUMERIC_BIN_STROKE_WIDTH,
+      ...defaultStyle,
+      ...current
+    };
+  }
+  render() {
+    const { numericLabels, numericBinSize, positionedBins, height } = this;
+    const bottomY = this.numericLegendY + height;
+    const textColor = this.legendStyleConfig?.text?.default?.color ?? DEFAULT_TEXT_COLOR;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        ref: this.base,
+        id: makeIdForHumanConsumption("numeric-color-legend"),
+        className: "numericColorLegend"
+      },
+      /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("lines") }, numericLabels.map((label, index) => {
+        const style = this.getMarkerStyleConfig(label.bin);
+        return /* @__PURE__ */ React.createElement(
+          "line",
+          {
+            key: index,
+            id: makeIdForHumanConsumption(label.text),
+            x1: label.bounds.x + label.bounds.width / 2,
+            y1: bottomY - numericBinSize,
+            x2: label.bounds.x + label.bounds.width / 2,
+            y2: bottomY + label.bounds.y + label.bounds.height,
+            stroke: label.raised && style.stroke ? darkenColorForLine(style.stroke) : style.stroke,
+            strokeWidth: style.strokeWidth
+          }
+        );
+      })),
+      /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("swatches") }, _.sortBy(
+        positionedBins.map((positionedBin, index) => {
+          const bin = positionedBin.bin;
+          const style = this.getMarkerStyleConfig(bin);
+          const fill = bin.patternRef ? `url(#${bin.patternRef})` : style.fill;
+          return /* @__PURE__ */ React.createElement(
+            NumericBinRect,
+            {
+              key: index,
+              x: positionedBin.x,
+              y: bottomY - numericBinSize,
+              width: positionedBin.width,
+              height: numericBinSize,
+              fill,
+              stroke: style.stroke,
+              strokeWidth: style.strokeWidth,
+              opacity: style.opacity,
+              isOpenLeft: bin instanceof NumericBin ? bin.props.isOpenLeft : false,
+              isOpenRight: bin instanceof NumericBin ? bin.props.isOpenRight : false,
+              onMouseEnter: () => {
+                this.manager.onLegendMouseEnter?.(bin);
+                this.manager.onLegendMouseOver?.(bin);
+              },
+              onMouseLeave: () => this.manager.onLegendMouseLeave?.()
+            }
+          );
+        }),
+        (rect) => rect.props["strokeWidth"]
+      )),
+      /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("labels") }, numericLabels.map((label, index) => {
+        const style = this.getTextStyleConfig(label.bin);
+        return /* @__PURE__ */ React.createElement(
+          "text",
+          {
+            key: index,
+            x: label.bounds.x,
+            y: bottomY + label.bounds.y,
+            dy: dyFromAlign(VerticalAlign.bottom),
+            fontSize: label.fontSize,
+            style: { fill: style.color, ...style }
+          },
+          label.text
+        );
+      })),
+      this.legendTitle?.renderSVG(
+        this.x,
+        // Align legend title baseline with bottom of color bins
+        this.numericLegendY + height - this.legendTitle.height + this.legendTitleFontSize * 0.2,
+        { textProps: { fill: textColor } }
+      )
+    );
+  }
+};
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "numericLegendData", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "visibleBins", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "numericBins", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "numericBinSize", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "tickFontSize", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "itemMargin", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "maxWidth", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "totalCategoricalWidth", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "isAutoWidth", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "idealNumericWidth", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "width", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "availableNumericWidth", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "x", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "positionedBins", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "legendTitleFontSize", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "legendTitle", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "legendTitleWidth", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "numericLabels", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "height", 1);
+__decorateClass([
+  computed
+], HorizontalNumericColorLegend.prototype, "legendStyleConfig", 1);
+HorizontalNumericColorLegend = __decorateClass([
+  observer
+], HorizontalNumericColorLegend);
+const ARROW_SIZE = 5;
+const NumericBinRect = (props) => {
+  const { isOpenLeft, isOpenRight, x, y, width, height, ...restProps } = props;
+  if (isOpenRight) {
+    const a = ARROW_SIZE;
+    const w = width - a;
+    const d = removeAllWhitespace(`
+            M ${x}, ${y}
+            l ${w}, 0
+            l ${a}, ${height / 2}
+            l ${-a}, ${height / 2}
+            l ${-w}, 0
+            z
+        `);
+    return /* @__PURE__ */ React.createElement("path", { d, ...restProps });
+  } else if (isOpenLeft) {
+    const a = ARROW_SIZE;
+    const w = width - a;
+    const d = removeAllWhitespace(`
+            M ${x + a}, ${y}
+            l ${w}, 0
+            l 0, ${height}
+            l ${-w}, 0
+            l ${-a}, ${-height / 2}
+            z
+        `);
+    return /* @__PURE__ */ React.createElement("path", { d, ...restProps });
+  } else {
+    return /* @__PURE__ */ React.createElement("rect", { x, y, width, height, ...restProps });
+  }
+};
+let HorizontalCategoricalColorLegend = class extends HorizontalColorLegend {
+  constructor(props) {
+    super(props);
+    this.rectPadding = 5;
+    this.markPadding = 5;
+    makeObservable(this);
+  }
+  get width() {
+    return this.manager.legendWidth ?? this.manager.legendMaxWidth ?? 200;
+  }
+  get categoricalLegendData() {
+    return this.manager.categoricalLegendData ?? [];
+  }
+  get visibleCategoricalBins() {
+    return this.categoricalLegendData.filter((bin) => !bin.isHidden);
+  }
+  get markLines() {
+    const fontSize = this.fontSize * GRAPHER_FONT_SCALE_12_8;
+    const rectSize = this.fontSize * 0.75;
+    const lines = [];
+    let marks = [];
+    let xOffset = 0;
+    let yOffset = 0;
+    this.visibleCategoricalBins.forEach((bin) => {
+      const labelBounds = Bounds.forText(bin.text, { fontSize });
+      const markWidth = rectSize + this.rectPadding + labelBounds.width + this.markPadding;
+      if (xOffset + markWidth > this.width && marks.length > 0) {
+        lines.push({
+          totalWidth: xOffset - this.markPadding,
+          marks
+        });
+        marks = [];
+        xOffset = 0;
+        yOffset += rectSize + this.rectPadding;
+      }
+      const markX = xOffset;
+      const markY = yOffset;
+      const label = {
+        text: bin.text,
+        bounds: labelBounds.set({
+          x: markX + rectSize + this.rectPadding,
+          y: markY + rectSize / 2
+        }),
+        fontSize
+      };
+      marks.push({
+        x: markX,
+        y: markY,
+        width: markWidth,
+        rectSize,
+        label,
+        bin
+      });
+      xOffset += markWidth + SPACE_BETWEEN_CATEGORICAL_BINS;
+    });
+    if (marks.length > 0)
+      lines.push({ totalWidth: xOffset - this.markPadding, marks });
+    return lines;
+  }
+  get contentWidth() {
+    return _.max(this.markLines.map((l) => l.totalWidth));
+  }
+  get containerWidth() {
+    return this.width ?? this.contentWidth;
+  }
+  get marks() {
+    const lines = this.markLines;
+    const align = this.legendAlign;
+    const width = this.containerWidth;
+    lines.forEach((line) => {
+      const xShift = align === HorizontalAlign.center ? (width - line.totalWidth) / 2 : align === HorizontalAlign.right ? width - line.totalWidth : 0;
+      line.marks.forEach((mark) => {
+        mark.x += xShift;
+        mark.label.bounds = mark.label.bounds.set({
+          x: mark.label.bounds.x + xShift
+        });
+      });
+    });
+    return lines.flatMap((l) => l.marks);
+  }
+  get height() {
+    return _.max(this.marks.map((mark) => mark.y + mark.rectSize)) ?? 0;
+  }
+  get legendStyleConfig() {
+    return this.manager.categoricalLegendStyleConfig ?? this.manager.legendStyleConfig;
+  }
+  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,
+      strokeWidth: 0.4,
+      ...defaultStyle,
+      ...currentStyle
+    };
+  }
+  renderLabels() {
+    const { marks } = this;
+    return /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("labels") }, marks.map((mark, index) => {
+      const style = this.getTextStyleConfig(mark.bin);
+      return /* @__PURE__ */ React.createElement(
+        "text",
+        {
+          key: `${mark.label}-${index}`,
+          x: this.legendX + mark.label.bounds.x,
+          y: this.categoryLegendY + mark.label.bounds.y,
+          dy: dyFromAlign(VerticalAlign.middle),
+          fontSize: mark.label.fontSize,
+          fontWeight: style.fontWeight,
+          style: { fill: style.color, ...style }
+        },
+        mark.label.text
+      );
+    }));
+  }
+  renderSwatches() {
+    const { marks } = this;
+    return /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("swatches") }, marks.map((mark, index) => {
+      const style = this.getMarkerStyleConfig(mark.bin);
+      const fill = mark.bin.patternRef ? `url(#${mark.bin.patternRef})` : style.fill;
+      return /* @__PURE__ */ React.createElement(
+        "rect",
+        {
+          id: makeIdForHumanConsumption(mark.label.text),
+          key: `${mark.label}-${index}`,
+          x: this.legendX + mark.x,
+          y: this.categoryLegendY + mark.y,
+          width: mark.rectSize,
+          height: mark.rectSize,
+          style: { ...style, fill }
+        }
+      );
+    }));
+  }
+  renderInteractiveElements() {
+    const { manager, marks } = this;
+    return /* @__PURE__ */ React.createElement("g", null, marks.map((mark, index) => {
+      const mouseEnter = () => manager.onLegendMouseEnter ? manager.onLegendMouseEnter(mark.bin) : void 0;
+      const mouseOver = () => manager.onLegendMouseOver ? manager.onLegendMouseOver(mark.bin) : void 0;
+      const mouseLeave = () => manager.onLegendMouseLeave ? manager.onLegendMouseLeave() : void 0;
+      const click = manager.onLegendClick ? () => manager.onLegendClick?.(mark.bin) : void 0;
+      return /* @__PURE__ */ React.createElement(
+        "g",
+        {
+          key: `${mark.label}-${index}`,
+          onMouseEnter: mouseEnter,
+          onMouseOver: mouseOver,
+          onMouseLeave: mouseLeave,
+          onClick: click,
+          style: { cursor: manager.legendCursor }
+        },
+        /* @__PURE__ */ React.createElement(
+          "rect",
+          {
+            x: this.legendX + mark.x,
+            y: this.categoryLegendY + mark.y - this.rectPadding / 2,
+            height: mark.rectSize + this.rectPadding,
+            width: mark.width + SPACE_BETWEEN_CATEGORICAL_BINS,
+            fill: "#fff",
+            opacity: 0
+          }
+        )
+      );
+    }));
+  }
+  render() {
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption("categorical-color-legend"),
+        className: "categoricalColorLegend"
+      },
+      this.renderSwatches(),
+      this.renderLabels(),
+      !this.manager.isStatic && this.renderInteractiveElements()
+    );
+  }
+};
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "width", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "categoricalLegendData", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "visibleCategoricalBins", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "markLines", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "contentWidth", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "containerWidth", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "marks", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "height", 1);
+__decorateClass([
+  computed
+], HorizontalCategoricalColorLegend.prototype, "legendStyleConfig", 1);
+HorizontalCategoricalColorLegend = __decorateClass([
+  observer
+], HorizontalCategoricalColorLegend);
+export {
+  HorizontalCategoricalColorLegend,
+  HorizontalColorLegend,
+  HorizontalNumericColorLegend
+};