@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/mapCharts/MapChart.js

@@ -0,0 +1,653 @@
+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 {
+  getRelativeMouse,
+  guid,
+  exposeInstanceOnWindow,
+  HorizontalAlign
+} from "../../utils/index.js";
+import { observable, computed, action, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import {
+  HorizontalCategoricalColorLegend,
+  HorizontalNumericColorLegend
+} from "../legend/HorizontalColorLegends.js";
+import { select } from "d3-selection";
+import { easeCubic } from "d3-ease";
+import { MapTooltip } from "./MapTooltip.js";
+import { TooltipState } from "../tooltip/Tooltip.js";
+import {
+  DEFAULT_STROKE_COLOR,
+  HOVER_STROKE_COLOR,
+  HOVER_STROKE_WIDTH,
+  MAP_CHART_CLASSNAME,
+  PROJECTED_DATA_LEGEND_COLOR
+} from "./MapChartConstants.js";
+import {
+  BASE_FONT_SIZE,
+  DEFAULT_GRAPHER_BOUNDS,
+  GRAPHER_MAX_TOOLTIP_WIDTH,
+  Patterns
+} from "../core/GrapherConstants.js";
+import {
+  CategoricalBin,
+  isCategoricalBin,
+  isNoDataBin,
+  isNumericBin,
+  isProjectedDataBin,
+  NumericBin
+} from "../color/ColorScaleBin.js";
+import {
+  LegendInteractionState
+} from "../legend/LegendInteractionState.js";
+import {
+  GrapherVariant,
+  MapRegionName
+} from "../../types/index.js";
+import { makeClipPath } from "../chart/ChartUtils.js";
+import { NoDataModal } from "../noDataModal/NoDataModal.js";
+import { Component, createRef } from "react";
+import { ChoroplethMap } from "./ChoroplethMap.js";
+import { ChoroplethGlobe } from "./ChoroplethGlobe.js";
+import { GlobeController } from "./GlobeController.js";
+import { match } from "ts-pattern";
+import { makeProjectedDataPatternId } from "./MapComponents.js";
+import { InteractionState } from "../interaction/InteractionState.js";
+const PADDING_BETWEEN_MAP_AND_LEGEND = 8;
+const PADDING_BELOW_MAP_LEGEND = 4;
+const PADDING_BETWEEN_MAP_LEGENDS = 4;
+const MAP_LEGEND_MAX_WIDTH_RATIO = 0.95;
+let MapChart = class extends Component {
+  constructor(props) {
+    super(props);
+    /**
+     * The currently hovered map bracket.
+     *
+     * Hovering a map bracket highlights all countries within that bracket on the map.
+     */
+    this.hoverBracket = void 0;
+    this.tooltipState = new TooltipState();
+    this.base = createRef();
+    this.legendStyleConfig = {
+      marker: {
+        default: { stroke: DEFAULT_STROKE_COLOR },
+        focused: {
+          stroke: HOVER_STROKE_COLOR,
+          strokeWidth: HOVER_STROKE_WIDTH
+        }
+      }
+    };
+    makeObservable(this, {
+      hoverBracket: observable,
+      tooltipState: observable
+    });
+  }
+  get chartState() {
+    return this.props.chartState;
+  }
+  get selectionArray() {
+    return this.chartState.selectionArray;
+  }
+  get mapColumn() {
+    return this.chartState.mapColumn;
+  }
+  get mapColumnSlug() {
+    return this.chartState.mapColumnSlug;
+  }
+  get mapColumnInfo() {
+    return this.chartState.mapColumnInfo;
+  }
+  get hasProjectedData() {
+    return this.mapColumnInfo.type !== "historical";
+  }
+  get targetTime() {
+    return this.chartState.targetTime;
+  }
+  get bounds() {
+    return this.props.bounds ?? DEFAULT_GRAPHER_BOUNDS;
+  }
+  get choroplethData() {
+    return this.chartState.seriesMap;
+  }
+  onMapMouseOver(feature) {
+    if (feature.id !== void 0) {
+      const featureId = feature.id;
+      this.mapConfig.hoverCountry = featureId;
+      this.tooltipState.target = { featureId };
+      this.manager.logGrapherInteractionEvent?.(
+        "map_country_hover",
+        featureId
+      );
+    }
+  }
+  onMapMouseMove(ev) {
+    const ref = this.manager?.base?.current;
+    if (ref) {
+      this.tooltipState.position = getRelativeMouse(ref, ev);
+    }
+  }
+  onMapMouseLeave() {
+    this.mapConfig.hoverCountry = void 0;
+    this.tooltipState.target = null;
+  }
+  get manager() {
+    return this.chartState.manager;
+  }
+  get globeController() {
+    return this.manager.globeController ?? new GlobeController(this);
+  }
+  get mapViewport() {
+    return this.manager.mapViewport;
+  }
+  get isFaceted() {
+    return this.manager.isFaceted;
+  }
+  get isMapSelectionEnabled() {
+    return !!this.manager.isMapSelectionEnabled;
+  }
+  componentWillUnmount() {
+    this.onMapMouseLeave();
+    this.onLegendMouseLeave();
+    document.removeEventListener("keydown", this.onDocumentKeyDown);
+  }
+  onLegendMouseEnter(bracket) {
+    this.manager.logGrapherInteractionEvent?.(
+      "map_legend_hover",
+      bracket.label
+    );
+  }
+  onLegendMouseOver(bracket) {
+    this.hoverBracket = bracket;
+  }
+  onLegendMouseLeave() {
+    this.hoverBracket = void 0;
+  }
+  get mapConfig() {
+    return this.chartState.mapConfig;
+  }
+  onRegionChange(value) {
+    this.mapConfig.region = value;
+  }
+  get colorScale() {
+    return this.chartState.colorScale;
+  }
+  onDocumentKeyDown(e) {
+    if (e.key === "Escape" && this.mapConfig.globe.isActive) {
+      this.globeController.hideGlobe();
+      this.globeController.resetGlobe();
+      this.mapConfig.region = MapRegionName.World;
+    }
+  }
+  get externalLegend() {
+    const {
+      numericLegendData,
+      categoricalLegendData,
+      legendMaxWidth,
+      legendStyleConfig
+    } = this;
+    if (this.manager.showLegend) return void 0;
+    return {
+      numericLegendData,
+      categoricalLegendData,
+      legendMaxWidth,
+      legendStyleConfig
+    };
+  }
+  get disableIntroAnimation() {
+    if (this.mapColumnInfo.type !== "historical") return true;
+    return !!this.manager.disableIntroAnimation;
+  }
+  componentDidMount() {
+    if (!this.disableIntroAnimation) {
+      select(this.base.current).selectAll(`.${MAP_CHART_CLASSNAME} path`).attr("data-fill", function() {
+        return this.getAttribute("fill");
+      }).attr("fill", this.colorScale.noDataColor).transition().duration(500).ease(easeCubic).attr("fill", function() {
+        return this.getAttribute("data-fill");
+      }).attr("data-fill", function() {
+        return this.getAttribute("fill");
+      });
+    }
+    exposeInstanceOnWindow(this);
+    document.addEventListener("keydown", this.onDocumentKeyDown);
+  }
+  get legendData() {
+    return this.colorScale.legendBins.filter((bin) => !bin.isHidden);
+  }
+  get hoverValue() {
+    if (!this.mapConfig.hoverCountry) return void 0;
+    const series = this.choroplethData.get(this.mapConfig.hoverCountry);
+    if (!series) return "No data";
+    return series.value;
+  }
+  isHovered(featureId) {
+    const { mapConfig, hoverBracket } = this;
+    const { externalLegendHoverBin } = this.manager;
+    if (mapConfig.globe.focusCountry === featureId) return true;
+    if (mapConfig.hoverCountry === featureId) return true;
+    const series = this.choroplethData.get(featureId);
+    if (hoverBracket?.contains(series?.value, {
+      isProjection: series?.isProjection
+    }))
+      return true;
+    if (externalLegendHoverBin?.contains(series?.value)) return true;
+    return false;
+  }
+  isSelected(featureId) {
+    return this.selectionArray.selectedSet.has(featureId);
+  }
+  getHoverState(featureId) {
+    const isHovered = this.isHovered(featureId);
+    const isHoverModeActive = !!(this.hoverBracket || this.manager.externalLegendHoverBin);
+    return new InteractionState(isHovered, isHoverModeActive);
+  }
+  get fontSize() {
+    return this.manager.fontSize ?? BASE_FONT_SIZE;
+  }
+  get choroplethMapBounds() {
+    return this.bounds.padBottom(
+      this.legendHeight ? this.legendHeight + PADDING_BETWEEN_MAP_AND_LEGEND + PADDING_BELOW_MAP_LEGEND : 0
+    );
+  }
+  get region() {
+    return this.mapConfig.region;
+  }
+  get shouldAddProjectionPatternToLegendBins() {
+    return match(this.mapColumnInfo).with({ type: "historical" }, () => false).with({ type: "projected" }, () => true).with(
+      { type: "historical+projected" },
+      (info) => (
+        // Only add a pattern to the legend bins if _all_ values are projections.
+        // If there is even a single non-projected (historical) value, the legend
+        // should use solid colors.
+        this.chartState.transformedTable.get(info.slugForIsProjectionColumn).values.every((value) => value === true)
+      )
+    ).exhaustive();
+  }
+  maybeAddPatternRefToBin(bin) {
+    if (isNoDataBin(bin))
+      return new CategoricalBin({
+        ...bin.props,
+        patternRef: Patterns.noDataPattern
+      });
+    if (isProjectedDataBin(bin)) {
+      const patternRef = makeProjectedDataPatternId(
+        PROJECTED_DATA_LEGEND_COLOR,
+        { forLegend: true }
+      );
+      return new CategoricalBin({ ...bin.props, patternRef });
+    }
+    if (this.shouldAddProjectionPatternToLegendBins) {
+      const patternRef = makeProjectedDataPatternId(bin.color, {
+        forLegend: true
+      });
+      return bin instanceof CategoricalBin ? new CategoricalBin({ ...bin.props, patternRef }) : new NumericBin({ ...bin.props, patternRef });
+    }
+    return bin;
+  }
+  get numericLegendData() {
+    const hasNoDataBin = this.legendData.some((bin) => isNoDataBin(bin));
+    if (this.hasCategoricalLegendData || !hasNoDataBin)
+      return this.legendData.filter((bin) => isNumericBin(bin)).map((bin) => this.maybeAddPatternRefToBin(bin));
+    const bins = this.legendData.filter((bin) => isNumericBin(bin) || isNoDataBin(bin)).map((bin) => this.maybeAddPatternRefToBin(bin));
+    return [bins[bins.length - 1], ...bins.slice(0, -1)];
+  }
+  get numMembersPerCategoricalBinByIndex() {
+    const { chartState, legendData } = this;
+    return new Map(
+      legendData.filter((bin) => isCategoricalBin(bin)).map((bin) => {
+        const memberCount = chartState.series.filter(
+          (series) => bin.contains(series.value)
+        ).length;
+        return [bin.index, memberCount];
+      })
+    );
+  }
+  get categoricalLegendData() {
+    let categoricalLegendData = this.legendData.filter((bin) => isCategoricalBin(bin)).map((bin) => this.maybeAddPatternRefToBin(bin));
+    if (this.isStatic && this.manager.variant === GrapherVariant.Thumbnail) {
+      categoricalLegendData = categoricalLegendData.filter((bin) => {
+        const memberCount = this.numMembersPerCategoricalBinByIndex.get(bin.index) ?? 0;
+        return isNoDataBin(bin) || isProjectedDataBin(bin) || memberCount > 0;
+      });
+    }
+    return categoricalLegendData;
+  }
+  get hasCategoricalLegendData() {
+    return this.categoricalLegendData.length > 1;
+  }
+  get binColors() {
+    return this.legendData.map((bin) => bin.color);
+  }
+  get numericHoverBracket() {
+    const { hoverBracket, hoverValue, numericLegendData } = this;
+    const { externalLegendHoverBin } = this.manager;
+    if (hoverBracket) return hoverBracket;
+    if (hoverValue !== void 0)
+      return numericLegendData.find((bin) => bin.contains(hoverValue));
+    return externalLegendHoverBin;
+  }
+  get categoricalHoverBracket() {
+    const { hoverBracket, hoverValue, categoricalLegendData } = this;
+    if (hoverBracket && hoverBracket instanceof CategoricalBin)
+      return hoverBracket;
+    if (hoverValue !== void 0)
+      return categoricalLegendData.find((bin) => bin.contains(hoverValue));
+    return void 0;
+  }
+  getLegendBinState(bin) {
+    if (!this.categoricalHoverBracket && !this.numericHoverBracket)
+      return LegendInteractionState.Default;
+    if (this.categoricalHoverBracket && bin.equals(this.categoricalHoverBracket)) {
+      return LegendInteractionState.Focused;
+    }
+    if (this.numericHoverBracket && bin.equals(this.numericHoverBracket)) {
+      return LegendInteractionState.Focused;
+    }
+    return LegendInteractionState.Muted;
+  }
+  get legendMaxWidth() {
+    return this.bounds.width * MAP_LEGEND_MAX_WIDTH_RATIO;
+  }
+  get legendX() {
+    return this.bounds.x + (this.bounds.width - this.legendMaxWidth) / 2;
+  }
+  get legendHeight() {
+    return this.categoryLegendHeight + this.numericLegendHeight;
+  }
+  get numericLegendHeight() {
+    return this.numericLegend ? this.numericLegend.height : 0;
+  }
+  get categoryLegendHeight() {
+    return this.categoryLegend ? this.categoryLegend.height : 0;
+  }
+  get categoryLegend() {
+    if (this.manager.isDisplayedAlongsideComplementaryTable)
+      return void 0;
+    return this.manager.showLegend && this.categoricalLegendData.length > 1 ? new HorizontalCategoricalColorLegend({ manager: this }) : void 0;
+  }
+  get numericLegend() {
+    if (this.manager.isDisplayedAlongsideComplementaryTable)
+      return void 0;
+    return this.manager.showLegend && this.numericLegendData.length > 1 ? new HorizontalNumericColorLegend({ manager: this }) : void 0;
+  }
+  get categoryLegendY() {
+    if (!this.categoryLegend) return 0;
+    return this.bounds.bottom - this.categoryLegend.height - PADDING_BELOW_MAP_LEGEND;
+  }
+  get legendAlign() {
+    return HorizontalAlign.center;
+  }
+  get numericLegendY() {
+    if (!this.numericLegend) return 0;
+    return this.bounds.bottom - this.numericLegendHeight - PADDING_BELOW_MAP_LEGEND - // If present, the category legend is placed below the numeric legend
+    (this.categoryLegend ? this.categoryLegendHeight + PADDING_BETWEEN_MAP_LEGENDS : 0);
+  }
+  get hoverColors() {
+    if (!this.hoverBracket) return void 0;
+    return [this.hoverBracket.color];
+  }
+  get isStatic() {
+    return this.manager.isStatic ?? false;
+  }
+  get renderUid() {
+    return guid();
+  }
+  get clipPath() {
+    return makeClipPath({
+      renderUid: this.renderUid,
+      box: this.choroplethMapBounds
+    });
+  }
+  get numericBinSize() {
+    return 0.625 * this.fontSize;
+  }
+  renderMapLegend() {
+    const { numericLegend, categoryLegend } = this;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, numericLegend && /* @__PURE__ */ React.createElement(HorizontalNumericColorLegend, { manager: this }), categoryLegend && /* @__PURE__ */ React.createElement(HorizontalCategoricalColorLegend, { manager: this }));
+  }
+  renderMapOrGlobe({ clipping = true } = {}) {
+    const mapOrGlobe = this.mapConfig.globe.isActive ? /* @__PURE__ */ React.createElement(ChoroplethGlobe, { manager: this }) : /* @__PURE__ */ React.createElement(ChoroplethMap, { manager: this });
+    if (!clipping) return mapOrGlobe;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, this.clipPath.element, /* @__PURE__ */ React.createElement("g", { clipPath: this.clipPath.id }, mapOrGlobe));
+  }
+  renderStatic() {
+    const clipping = this.mapConfig.globe.isActive || this.region !== MapRegionName.World;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderMapOrGlobe({ clipping }), this.renderMapLegend());
+  }
+  renderInteractive() {
+    const { tooltipState } = this;
+    let sparklineWidth;
+    if (this.manager.shouldPinTooltipToBottom) {
+      const windowWidth = window?.innerWidth ?? 240;
+      sparklineWidth = Math.min(
+        GRAPHER_MAX_TOOLTIP_WIDTH,
+        windowWidth - 8
+      );
+    }
+    const tooltipCountry = tooltipState.target?.featureId ?? // show a pinned-to-the-bottom tooltip when focused on a country
+    (this.manager.shouldPinTooltipToBottom ? this.mapConfig.globe.focusCountry : void 0);
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        ref: this.base,
+        className: MAP_CHART_CLASSNAME,
+        onMouseMove: this.onMapMouseMove
+      },
+      this.renderMapOrGlobe(),
+      this.renderMapLegend(),
+      tooltipCountry && /* @__PURE__ */ React.createElement(
+        MapTooltip,
+        {
+          mapColumnSlug: this.mapColumnSlug,
+          mapColumnInfo: this.mapColumnInfo,
+          entityName: tooltipCountry,
+          position: tooltipState.position,
+          fading: tooltipState.fading,
+          timeSeriesTable: this.chartState.inputTable,
+          formatValueForTooltip: this.chartState.formatValueForTooltip,
+          manager: this.manager,
+          lineColorScale: this.colorScale,
+          targetTime: this.targetTime,
+          targetTimes: this.manager.highlightedTimesInTooltip,
+          sparklineWidth,
+          dismissTooltip: action(() => {
+            this.mapConfig.hoverCountry = void 0;
+            this.tooltipState.target = null;
+            this.globeController.dismissCountryFocus();
+          })
+        }
+      )
+    );
+  }
+  render() {
+    if (this.chartState.errorInfo.reason)
+      return /* @__PURE__ */ React.createElement(
+        NoDataModal,
+        {
+          manager: this.manager,
+          bounds: this.props.bounds,
+          message: this.chartState.errorInfo.reason
+        }
+      );
+    return this.isStatic ? this.renderStatic() : this.renderInteractive();
+  }
+};
+__decorateClass([
+  computed
+], MapChart.prototype, "chartState", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "selectionArray", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "mapColumn", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "mapColumnSlug", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "mapColumnInfo", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "hasProjectedData", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "targetTime", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "bounds", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "choroplethData", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onMapMouseOver", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onMapMouseMove", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onMapMouseLeave", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "manager", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "globeController", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "mapViewport", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "isFaceted", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "isMapSelectionEnabled", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onLegendMouseEnter", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onLegendMouseOver", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onLegendMouseLeave", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "mapConfig", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onRegionChange", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "colorScale", 1);
+__decorateClass([
+  action.bound
+], MapChart.prototype, "onDocumentKeyDown", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "externalLegend", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "disableIntroAnimation", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "legendData", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "hoverValue", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "fontSize", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "choroplethMapBounds", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "region", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "shouldAddProjectionPatternToLegendBins", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "numericLegendData", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "numMembersPerCategoricalBinByIndex", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "categoricalLegendData", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "hasCategoricalLegendData", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "binColors", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "numericHoverBracket", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "categoricalHoverBracket", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "legendMaxWidth", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "legendX", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "legendHeight", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "numericLegendHeight", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "categoryLegendHeight", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "categoryLegend", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "numericLegend", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "categoryLegendY", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "legendAlign", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "numericLegendY", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "hoverColors", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "isStatic", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "renderUid", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "clipPath", 1);
+__decorateClass([
+  computed
+], MapChart.prototype, "numericBinSize", 1);
+MapChart = __decorateClass([
+  observer
+], MapChart);
+export {
+  MAP_LEGEND_MAX_WIDTH_RATIO,
+  MapChart,
+  PADDING_BELOW_MAP_LEGEND,
+  PADDING_BETWEEN_MAP_AND_LEGEND,
+  PADDING_BETWEEN_MAP_LEGENDS
+};