@buildcanada/charts 0.3.6 → 0.3.8

package/dist/grapher/mapCharts/ChoroplethMap.js

@@ -0,0 +1,616 @@
+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 React from "react";
+import {
+  Bounds,
+  isTouchDevice,
+  makeIdForHumanConsumption,
+  excludeUndefined,
+  MapRegionName
+} from "../../utils/index.js";
+import { computed, action, observable, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import { quadtree } from "d3-quadtree";
+import {
+  GEO_FEATURES_CLASSNAME,
+  CHOROPLETH_MAP_CLASSNAME,
+  ANNOTATION_COLOR_LIGHT,
+  ANNOTATION_COLOR_DARK,
+  PROJECTED_DATA_LEGEND_COLOR,
+  MAP_VIEWPORTS,
+  MAP_REGION_LABELS
+} from "./MapChartConstants.js";
+import { getGeoFeaturesForMap } from "./GeoFeatures.js";
+import {
+  BackgroundCountry,
+  CountryWithData,
+  CountryWithNoData,
+  ExternalValueAnnotation,
+  InternalValueAnnotation,
+  NoDataPattern,
+  ProjectedDataPattern
+} from "./MapComponents.js";
+import { Patterns } from "../core/GrapherConstants.js";
+import {
+  detectNearbyFeature,
+  getCountriesByRegion,
+  getForegroundFeatures,
+  sortFeaturesByInteractionStateAndSize
+} from "./MapHelpers.js";
+import {
+  makeInternalAnnotationForFeature,
+  makeExternalAnnotationForFeature,
+  repositionAndFilterExternalAnnotations
+} from "./MapAnnotations.js";
+import { isDarkColor } from "../color/ColorUtils.js";
+import { MapSelectionArray } from "../selection/MapSelectionArray.js";
+import { MAP_PROJECTIONS } from "./MapProjections.js";
+let ChoroplethMap = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.base = React.createRef();
+    this.hoverEnterFeature = void 0;
+    this.hoverNearbyFeature = void 0;
+    makeObservable(this, {
+      hoverEnterFeature: observable,
+      hoverNearbyFeature: observable
+    });
+  }
+  get isTouchDevice() {
+    return isTouchDevice();
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get mapConfig() {
+    return this.manager.mapConfig;
+  }
+  get bounds() {
+    return this.manager.choroplethMapBounds;
+  }
+  get selectionArray() {
+    return this.manager.selectionArray ?? new MapSelectionArray();
+  }
+  get viewport() {
+    return this.manager.mapViewport ?? MAP_VIEWPORTS[this.mapConfig.region];
+  }
+  get choroplethData() {
+    return this.manager.choroplethData;
+  }
+  get hoverFeature() {
+    return this.hoverEnterFeature || this.hoverNearbyFeature;
+  }
+  get mapBounds() {
+    const allBounds = this.features.map((feature) => feature.projBounds);
+    return Bounds.merge(allBounds);
+  }
+  get viewportScale() {
+    const { bounds, viewport, mapBounds } = this;
+    const viewportWidth = viewport.width * mapBounds.width;
+    const viewportHeight = viewport.height * mapBounds.height;
+    return Math.min(
+      bounds.width / viewportWidth,
+      bounds.height / viewportHeight
+    );
+  }
+  get viewportScaleSqrt() {
+    return Math.sqrt(this.viewportScale);
+  }
+  get matrixTransform() {
+    const { bounds, mapBounds, viewport, viewportScale } = this;
+    const mapX = mapBounds.x + 1;
+    const mapY = mapBounds.y + 1;
+    const newWidth = mapBounds.width * viewportScale;
+    const newHeight = mapBounds.height * viewportScale;
+    const boundsCenterX = bounds.left + bounds.width / 2;
+    const boundsCenterY = bounds.top + bounds.height / 2;
+    const newCenterX = mapX + (viewportScale - 1) * mapBounds.x + viewport.x * newWidth;
+    const newCenterY = mapY + (viewportScale - 1) * mapBounds.y + viewport.y * newHeight;
+    const newOffsetX = boundsCenterX - newCenterX;
+    const newOffsetY = boundsCenterY - newCenterY;
+    const matrixComponents = [
+      viewportScale,
+      0,
+      0,
+      viewportScale,
+      newOffsetX,
+      newOffsetY
+    ];
+    const matrixComponentsRounded = matrixComponents.map(
+      (c) => _.round(c, 4)
+    );
+    const matrixStr = `matrix(${matrixComponentsRounded.join(",")})`;
+    return matrixStr;
+  }
+  get features() {
+    return getGeoFeaturesForMap(this.mapConfig.region);
+  }
+  get featuresInRegion() {
+    const { features, mapConfig } = this;
+    if (mapConfig.region === MapRegionName.World) return features;
+    if (mapConfig.region === MapRegionName.Canada) return features;
+    const countriesByProjection = getCountriesByRegion(
+      MAP_REGION_LABELS[mapConfig.region]
+    );
+    if (countriesByProjection === void 0) return [];
+    return features.filter(
+      (feature) => countriesByProjection.has(feature.id)
+    );
+  }
+  get featuresById() {
+    return new Map(this.features.map((feature) => [feature.id, feature]));
+  }
+  get foregroundFeatures() {
+    return getForegroundFeatures(this.featuresInRegion, this.selectionArray);
+  }
+  get backgroundFeatures() {
+    return _.difference(this.features, this.foregroundFeatures);
+  }
+  get backgroundFeatureIdSet() {
+    return new Set(this.backgroundFeatures.map((feature) => feature.id));
+  }
+  get featuresWithData() {
+    return this.foregroundFeatures.filter(
+      (feature) => this.choroplethData.has(feature.id)
+    );
+  }
+  get sortedFeaturesWithData() {
+    return sortFeaturesByInteractionStateAndSize(this.featuresWithData, {
+      isHovered: (featureId) => this.manager.getHoverState?.(featureId)?.active ?? false,
+      isSelected: (featureId) => this.manager.isSelected?.(featureId) ?? false
+    });
+  }
+  get featuresWithNoData() {
+    return _.difference(this.foregroundFeatures, this.featuresWithData);
+  }
+  get binColors() {
+    return this.manager.binColors ?? [];
+  }
+  get quadtree() {
+    return quadtree().x((feature) => feature.projBounds.centerX).y((feature) => feature.projBounds.centerY).addAll(this.foregroundFeatures);
+  }
+  get projection() {
+    return MAP_PROJECTIONS[this.mapConfig.region];
+  }
+  get shouldShowAnnotations() {
+    return !!(this.manager.mapColumn.hasNumberFormatting && !this.mapConfig.tooltipUseCustomLabels);
+  }
+  formatAnnotationLabel(value) {
+    return this.manager.mapColumn.formatValueShortWithAbbreviations(value);
+  }
+  get annotationCandidateFeatures() {
+    if (!this.shouldShowAnnotations) return [];
+    return excludeUndefined(
+      this.mapConfig.selection.selectedCountryNamesInForeground.map(
+        (name) => this.featuresById.get(name)
+      )
+    ).filter((feature) => this.foregroundFeatures.includes(feature));
+  }
+  get annotationCandidates() {
+    return excludeUndefined(
+      this.annotationCandidateFeatures.map((feature) => {
+        const series = this.choroplethData.get(feature.id);
+        if (!series) return;
+        const labelColor = isDarkColor(series.color) ? ANNOTATION_COLOR_LIGHT : ANNOTATION_COLOR_DARK;
+        const args = {
+          feature,
+          projection: this.projection,
+          formattedValue: this.formatAnnotationLabel(series.value),
+          fontSizeScale: this.viewportScale,
+          color: labelColor
+        };
+        const internalAnnotation = makeInternalAnnotationForFeature(args);
+        if (internalAnnotation) return internalAnnotation;
+        const externalAnnotation = makeExternalAnnotationForFeature(args);
+        if (externalAnnotation) return externalAnnotation;
+        return void 0;
+      })
+    );
+  }
+  get internalAnnotations() {
+    return this.annotationCandidates.filter(
+      (annotation) => annotation.type === "internal"
+    );
+  }
+  get externalAnnotations() {
+    const { projection, backgroundFeatureIdSet } = this;
+    const annotations = this.annotationCandidates.filter(
+      (annotation) => annotation.type === "external"
+    );
+    return repositionAndFilterExternalAnnotations({
+      annotations,
+      projection,
+      backgroundFeatureIdSet
+    });
+  }
+  detectNearbyFeature(event) {
+    if (this.hoverEnterFeature || !this.base.current) return;
+    const nearbyFeature = detectNearbyFeature({
+      quadtree: this.quadtree,
+      element: this.base.current,
+      event
+    });
+    if (!nearbyFeature) {
+      this.hoverNearbyFeature = void 0;
+      this.manager.onMapMouseLeave?.();
+      return;
+    }
+    if (nearbyFeature.id !== this.hoverNearbyFeature?.id) {
+      this.hoverNearbyFeature = nearbyFeature;
+      this.manager.onMapMouseOver?.(nearbyFeature.geo);
+    }
+    return nearbyFeature;
+  }
+  onMouseMove(event) {
+    this.detectNearbyFeature(event);
+  }
+  onMouseEnter(feature) {
+    this.setHoverEnterFeature(feature);
+  }
+  onMouseLeave() {
+    if (this.isTouchDevice) return;
+    this.clearHoverEnterFeature();
+  }
+  setHoverEnterFeature(feature) {
+    if (this.hoverEnterFeature?.id === feature.id) return;
+    this.hoverEnterFeature = feature;
+    this.manager.onMapMouseOver?.(feature.geo);
+  }
+  clearHoverEnterFeature() {
+    this.hoverEnterFeature = void 0;
+    this.manager.onMapMouseLeave?.();
+  }
+  onTouchStart(feature) {
+    this.setHoverEnterFeature(feature);
+  }
+  onClick(feature) {
+    const {
+      isMapSelectionEnabled,
+      mapConfig: { selection },
+      globeController
+    } = this.manager;
+    this.setHoverEnterFeature(feature);
+    const is2dContinentActive = this.mapConfig.is2dContinentActive();
+    if (isMapSelectionEnabled) {
+      selection.toggleSelection(feature.id);
+    } else if (
+      // Don't rotate if the maps shows a continent in 2d mode
+      !is2dContinentActive && // Don't rotate if the map is faceted
+      !this.manager.isFaceted && // Don't rotate if the user is zoomed in, otherwise they can get stuck in 3D mode
+      window?.visualViewport?.scale === 1
+    ) {
+      globeController?.rotateToCountry(feature.id);
+    }
+  }
+  onDocumentClick() {
+    this.manager.globeController?.dismissCountryFocus();
+    if (this.hoverEnterFeature || this.hoverNearbyFeature) {
+      this.hoverEnterFeature = void 0;
+      this.hoverNearbyFeature = void 0;
+      this.manager.onMapMouseLeave?.();
+    }
+  }
+  renderInternalAnnotations() {
+    if (this.internalAnnotations.length === 0) return;
+    return /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("annotations-internal") }, this.internalAnnotations.map((annotation) => /* @__PURE__ */ React.createElement(
+      InternalValueAnnotation,
+      {
+        key: annotation.id,
+        annotation,
+        strokeScale: this.viewportScaleSqrt,
+        showOutline: this.choroplethData.get(annotation.id)?.isProjection
+      }
+    )));
+  }
+  renderExternalAnnotations() {
+    if (this.externalAnnotations.length === 0) return;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption("annotations-external"),
+        className: "ExternalAnnotations"
+      },
+      this.externalAnnotations.map((annotation) => /* @__PURE__ */ React.createElement(
+        ExternalValueAnnotation,
+        {
+          key: annotation.id,
+          annotation,
+          strokeScale: this.viewportScaleSqrt,
+          onMouseEnter: action(
+            (feature) => this.setHoverEnterFeature(
+              feature
+            )
+          ),
+          onMouseLeave: action(
+            () => this.clearHoverEnterFeature()
+          )
+        }
+      ))
+    );
+  }
+  renderFeaturesInBackground() {
+    if (this.backgroundFeatures.length === 0) return;
+    return /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("countries-background") }, this.backgroundFeatures.map((feature) => /* @__PURE__ */ React.createElement(BackgroundCountry, { key: feature.id, feature })));
+  }
+  renderFeaturesWithoutData() {
+    if (this.featuresWithNoData.length === 0) return;
+    const patternId = Patterns.noDataPatternForMap;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption("countries-without-data"),
+        className: "noDataFeatures"
+      },
+      /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(
+        NoDataPattern,
+        {
+          patternId,
+          scale: 1 / this.viewportScale
+        }
+      )),
+      this.featuresWithNoData.map((feature) => /* @__PURE__ */ React.createElement(
+        CountryWithNoData,
+        {
+          key: feature.id,
+          feature,
+          patternId,
+          isSelected: this.manager.isSelected?.(feature.id),
+          hover: this.manager.getHoverState?.(feature.id),
+          strokeScale: this.viewportScaleSqrt,
+          onClick: (event) => {
+            event.stopPropagation();
+            this.onClick(feature);
+          },
+          onTouchStart: () => this.onTouchStart(feature),
+          onMouseEnter: this.onMouseEnter,
+          onMouseLeave: this.onMouseLeave
+        }
+      ))
+    );
+  }
+  renderFeaturesWithData() {
+    if (this.sortedFeaturesWithData.length === 0) return;
+    return /* @__PURE__ */ React.createElement("g", { id: makeIdForHumanConsumption("countries-with-data") }, this.manager.hasProjectedData && /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(
+      ProjectedDataPattern,
+      {
+        key: PROJECTED_DATA_LEGEND_COLOR,
+        color: PROJECTED_DATA_LEGEND_COLOR,
+        forLegend: true
+      }
+    ), this.binColors.map((color, index) => /* @__PURE__ */ React.createElement(
+      ProjectedDataPattern,
+      {
+        key: `${color}-${index}`,
+        color,
+        forLegend: true
+      }
+    )), this.binColors.map((color, index) => /* @__PURE__ */ React.createElement(
+      ProjectedDataPattern,
+      {
+        key: `${color}-${index}`,
+        color,
+        scale: 1 / this.viewportScale
+      }
+    ))), this.sortedFeaturesWithData.map((feature) => {
+      const series = this.choroplethData.get(feature.id);
+      if (!series) return null;
+      return /* @__PURE__ */ React.createElement(
+        CountryWithData,
+        {
+          key: feature.id,
+          feature,
+          series,
+          isSelected: this.manager.isSelected?.(feature.id),
+          hover: this.manager.getHoverState?.(feature.id),
+          strokeScale: this.viewportScaleSqrt,
+          onClick: (event) => {
+            event.stopPropagation();
+            this.onClick(feature);
+          },
+          onTouchStart: () => this.onTouchStart(feature),
+          onMouseEnter: this.onMouseEnter,
+          onMouseLeave: this.onMouseLeave
+        }
+      );
+    }));
+  }
+  renderStatic() {
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption("map"),
+        transform: this.matrixTransform
+      },
+      this.renderFeaturesInBackground(),
+      this.renderFeaturesWithoutData(),
+      this.renderFeaturesWithData(),
+      this.renderInternalAnnotations(),
+      this.renderExternalAnnotations()
+    );
+  }
+  componentDidMount() {
+    document.addEventListener("touchstart", this.onDocumentClick, {
+      capture: true,
+      passive: true
+    });
+  }
+  componentWillUnmount() {
+    document.removeEventListener("touchstart", this.onDocumentClick, {
+      capture: true
+    });
+  }
+  renderInteractive() {
+    const { bounds, matrixTransform } = this;
+    const _cachedCentroids = this.quadtree;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        ref: this.base,
+        className: CHOROPLETH_MAP_CLASSNAME,
+        onMouseDown: (ev) => ev.preventDefault(),
+        onMouseMove: (ev) => this.onMouseMove(ev.nativeEvent),
+        onMouseLeave: this.onMouseLeave,
+        onClick: () => {
+          if (this.hoverNearbyFeature)
+            this.onClick(this.hoverNearbyFeature);
+        },
+        style: { cursor: this.hoverFeature ? "pointer" : void 0 }
+      },
+      /* @__PURE__ */ React.createElement(
+        "rect",
+        {
+          x: bounds.x,
+          y: bounds.y,
+          width: bounds.width,
+          height: bounds.height,
+          fill: "rgba(255,255,255,0)",
+          opacity: 0
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "g",
+        {
+          className: GEO_FEATURES_CLASSNAME,
+          transform: matrixTransform
+        },
+        this.renderFeaturesInBackground(),
+        this.renderFeaturesWithoutData(),
+        this.renderFeaturesWithData(),
+        this.renderInternalAnnotations(),
+        this.renderExternalAnnotations()
+      )
+    );
+  }
+  render() {
+    return this.manager.isStatic ? this.renderStatic() : this.renderInteractive();
+  }
+};
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "isTouchDevice", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "manager", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "mapConfig", 1);
+__decorateClass([
+  computed.struct
+], ChoroplethMap.prototype, "bounds", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "selectionArray", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "viewport", 1);
+__decorateClass([
+  computed.struct
+], ChoroplethMap.prototype, "choroplethData", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "hoverFeature", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "mapBounds", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "viewportScale", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "viewportScaleSqrt", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "matrixTransform", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "features", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "featuresInRegion", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "featuresById", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "foregroundFeatures", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "backgroundFeatures", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "backgroundFeatureIdSet", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "featuresWithData", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "sortedFeaturesWithData", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "featuresWithNoData", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "binColors", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "quadtree", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "projection", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "shouldShowAnnotations", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "annotationCandidateFeatures", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "annotationCandidates", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "internalAnnotations", 1);
+__decorateClass([
+  computed
+], ChoroplethMap.prototype, "externalAnnotations", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "detectNearbyFeature", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "onMouseMove", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "onMouseEnter", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "onMouseLeave", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "setHoverEnterFeature", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "clearHoverEnterFeature", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "onTouchStart", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "onClick", 1);
+__decorateClass([
+  action.bound
+], ChoroplethMap.prototype, "onDocumentClick", 1);
+ChoroplethMap = __decorateClass([
+  observer
+], ChoroplethMap);
+export {
+  ChoroplethMap
+};