@buildcanada/charts 0.3.6 → 0.3.8

package/dist/grapher/footer/Footer.js

@@ -0,0 +1,605 @@
+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 React from "react";
+import { observable, computed, action, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import {
+  Bounds,
+  getRelativeMouse,
+  makeIdForHumanConsumption,
+  Url
+} from "../../utils/index.js";
+import {
+  DATAPAGE_ABOUT_THIS_DATA_SECTION_ID,
+  MarkdownTextWrap,
+  TextWrap
+} from "../../components/index.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { ActionButtons } from "../controls/ActionButtons.js";
+import {
+  BASE_FONT_SIZE,
+  DEFAULT_GRAPHER_BOUNDS,
+  GRAPHER_FOOTER_CLASS,
+  GRAPHER_FRAME_PADDING_HORIZONTAL,
+  GrapherModal
+} from "../core/GrapherConstants.js";
+import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants.js";
+const ESTIMATED_ACTION_BUTTONS_WIDTH = 400;
+const ACTION_BUTTONS_HEIGHT = 32;
+const HORIZONTAL_PADDING = 8;
+const _AbstractFooter = class _AbstractFooter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.verticalPadding = 4;
+    this.base = React.createRef();
+    this.tooltipTarget = void 0;
+    makeObservable(this, {
+      tooltipTarget: observable.ref
+    });
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get maxWidth() {
+    return this.props.maxWidth ?? DEFAULT_GRAPHER_BOUNDS.width;
+  }
+  get useBaseFontSize() {
+    return !!this.manager.useBaseFontSize;
+  }
+  get baseFontSize() {
+    return this.manager.fontSize ?? BASE_FONT_SIZE;
+  }
+  get hideOriginUrl() {
+    return !!this.manager.hideOriginUrl;
+  }
+  get sourcesLine() {
+    return this.manager.sourcesLine?.replace(/\r\n|\n|\r/g, "") ?? "";
+  }
+  get sourcesText() {
+    return `Data source: ${this.sourcesLine} - Learn more about this data`;
+  }
+  get noteText() {
+    return this.manager.note ? `Note: ${this.manager.note}` : "";
+  }
+  get markdownNoteText() {
+    return this.manager.note ? `**Note:** ${this.manager.note}` : "";
+  }
+  get licenseText() {
+    const branding = this.manager.branding;
+    if (this.manager.hasLegacyLogo) {
+      return branding?.licenseText ?? "CC BY";
+    }
+    return branding?.poweredByText ?? "Powered by Build Canada Charts";
+  }
+  get licenseUrl() {
+    const branding = this.manager.branding;
+    if (this.manager.hasLegacyLogo) {
+      return branding?.licenseUrl ?? "https://creativecommons.org/licenses/by/4.0/";
+    }
+    return branding?.poweredByUrl ?? "";
+  }
+  get originUrlWithProtocol() {
+    return this.manager.originUrlWithProtocol ?? "http://localhost";
+  }
+  get finalUrl() {
+    const originUrl = this.originUrlWithProtocol;
+    const url = Url.fromURL(originUrl);
+    return url.originAndPath ?? "";
+  }
+  get correctedUrlText() {
+    const originUrl = this.originUrlWithProtocol;
+    if (!originUrl || !originUrl.toLowerCase().match(/^https?:\/\/./))
+      return void 0;
+    const url = Url.fromURL(originUrl);
+    return url.originAndPath?.replace(/^https?:\/\//, "").replace(/\/$/, "");
+  }
+  static constructLicenseAndOriginUrlText(urlText, licenseText) {
+    if (!urlText) return licenseText;
+    return [urlText, licenseText].join(" | ");
+  }
+  get finalUrlText() {
+    const { correctedUrlText, licenseText, fontSize, maxWidth } = this;
+    if (this.hideOriginUrl) return void 0;
+    if (!correctedUrlText) return void 0;
+    const licenseAndOriginUrlText = _AbstractFooter.constructLicenseAndOriginUrlText(
+      correctedUrlText,
+      licenseText
+    );
+    const licenseAndOriginUrlWidth = Bounds.forText(
+      licenseAndOriginUrlText,
+      { fontSize }
+    ).width;
+    if (licenseAndOriginUrlWidth + HORIZONTAL_PADDING > maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH)
+      return void 0;
+    return correctedUrlText;
+  }
+  get licenseAndOriginUrlText() {
+    const { finalUrlText, licenseText } = this;
+    return _AbstractFooter.constructLicenseAndOriginUrlText(
+      finalUrlText,
+      licenseText
+    );
+  }
+  get lineHeight() {
+    return this.manager.isSmall ? 1.1 : 1.2;
+  }
+  get fontSize() {
+    if (this.useBaseFontSize) {
+      return 11 / BASE_FONT_SIZE * this.baseFontSize;
+    }
+    return this.manager.isMedium ? 11 : 12;
+  }
+  get sourcesFontSize() {
+    if (this.useBaseFontSize) {
+      return 12 / BASE_FONT_SIZE * this.baseFontSize;
+    }
+    return this.manager.isSmall ? 12 : 13;
+  }
+  get showNote() {
+    return !this.manager.hideNote && !!this.noteText;
+  }
+  get useFullWidthSources() {
+    const { showNote, sourcesFontSize, maxWidth, sourcesText } = this;
+    if (showNote) return true;
+    const sourcesWidth = Bounds.forText(sourcesText, {
+      fontSize: sourcesFontSize
+    }).width;
+    return sourcesWidth > 2 * (maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH);
+  }
+  get useFullWidthNote() {
+    const { fontSize, maxWidth, noteText } = this;
+    const noteWidth = Bounds.forText(noteText, { fontSize }).width;
+    return noteWidth > 2 * (maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH);
+  }
+  get sourcesMaxWidth() {
+    if (this.useFullWidthSources) return this.maxWidth;
+    return this.maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH - HORIZONTAL_PADDING;
+  }
+  get noteMaxWidth() {
+    if (this.useFullWidthNote) return this.maxWidth;
+    return this.maxWidth - ESTIMATED_ACTION_BUTTONS_WIDTH - HORIZONTAL_PADDING;
+  }
+  get licenseAndOriginUrlMaxWidth() {
+    return this.maxWidth;
+  }
+  get showLicenseNextToSources() {
+    const {
+      useFullWidthSources,
+      maxWidth,
+      sources,
+      licenseAndOriginUrl,
+      note
+    } = this;
+    if (!useFullWidthSources) return false;
+    if (this.useFullWidthNote || note.htmlLines.length <= 1) return false;
+    return sources.width + HORIZONTAL_PADDING + licenseAndOriginUrl.width <= maxWidth;
+  }
+  get sources() {
+    const { lineHeight } = this;
+    return new MarkdownTextWrap({
+      text: this.sourcesText,
+      maxWidth: this.sourcesMaxWidth,
+      fontSize: this.sourcesFontSize,
+      lineHeight
+    });
+  }
+  get note() {
+    const { fontSize, lineHeight, manager } = this;
+    return new MarkdownTextWrap({
+      text: this.markdownNoteText,
+      maxWidth: this.noteMaxWidth,
+      fontSize,
+      lineHeight,
+      detailsOrderedByReference: manager.detailsOrderedByReference
+    });
+  }
+  get licenseAndOriginUrl() {
+    const { fontSize, lineHeight } = this;
+    return new TextWrap({
+      text: this.licenseAndOriginUrlText,
+      maxWidth: this.licenseAndOriginUrlMaxWidth,
+      rawHtml: true,
+      fontSize,
+      lineHeight
+    });
+  }
+  get height() {
+    return this.topContentHeight + this.bottomContentHeight;
+  }
+  onMouseMove(e) {
+    const cc = this.base.current?.querySelector(".cclogo");
+    if (cc && cc.matches(":hover")) {
+      const div = this.base.current;
+      const grapher = div.closest(".GrapherComponent");
+      if (grapher) {
+        const mouse = getRelativeMouse(grapher, e);
+        this.tooltipTarget = { x: mouse.x, y: mouse.y };
+      } else console.error("Grapher was falsy");
+    } else this.tooltipTarget = void 0;
+  }
+  componentDidMount() {
+    window.addEventListener("mousemove", this.onMouseMove);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("mousemove", this.onMouseMove);
+  }
+  renderLicense() {
+    return /* @__PURE__ */ React.createElement("div", { className: "license", style: this.licenseAndOriginUrl.htmlStyle }, this.finalUrlText && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: this.finalUrl,
+        ...this.manager.isInIFrame && {
+          target: "_blank",
+          rel: "noopener"
+        }
+      },
+      this.finalUrlText
+    ), " ", "|", " "), /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: this.manager.hasLegacyLogo ? "cclogo" : void 0,
+        href: this.licenseUrl,
+        style: { textDecoration: "none" },
+        ...this.manager.isInIFrame && {
+          target: "_blank",
+          rel: "noopener"
+        }
+      },
+      this.licenseText
+    ));
+  }
+  renderSources() {
+    const sources = new MarkdownTextWrap({
+      text: `**Data source:** ${this.sourcesLine}`,
+      maxWidth: this.sourcesMaxWidth,
+      fontSize: this.sourcesFontSize,
+      lineHeight: this.lineHeight
+    });
+    return /* @__PURE__ */ React.createElement("p", { className: "sources", style: sources.style }, sources.renderHTML(), " \u2013 ", /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: "learn-more-about-data",
+        "data-track-note": "chart_click_sources",
+        tabIndex: 0,
+        onClick: action((e) => {
+          e.stopPropagation();
+          if (this.manager.isEmbeddedInPage || this.manager.isInIFrame) {
+            this.manager.activeModal = GrapherModal.Sources;
+            return;
+          }
+          const datapageSectionId = DATAPAGE_ABOUT_THIS_DATA_SECTION_ID;
+          const sourcesElement = document.getElementById(datapageSectionId);
+          if (sourcesElement && sourcesElement.scrollIntoView) {
+            sourcesElement.scrollIntoView({
+              behavior: "smooth"
+            });
+            this.manager.isInFullScreenMode = false;
+          } else if (sourcesElement) {
+            window.location.hash = "#" + datapageSectionId;
+            this.manager.isInFullScreenMode = false;
+          } else {
+            this.manager.activeModal = GrapherModal.Sources;
+          }
+        })
+      },
+      "Learn more about this data"
+    ));
+  }
+  renderNote() {
+    return /* @__PURE__ */ React.createElement("p", { className: "note", style: this.note.style }, this.note.renderHTML());
+  }
+  renderVerticalSpace() {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: this.verticalPadding,
+          width: "100%"
+        }
+      }
+    );
+  }
+  get topContentHeight() {
+    const { sources, note } = this;
+    const renderSources = this.useFullWidthSources;
+    const renderNote = this.showNote && this.useFullWidthNote;
+    if (!renderSources && !renderNote) return 0;
+    return (renderSources ? sources.height : 0) + (renderSources && renderNote ? this.verticalPadding : 0) + (renderNote ? note.height : 0) + this.verticalPadding;
+  }
+  // renders the content above the action buttons
+  // make sure to keep this.topContentHeight in sync if you edit this method
+  renderTopContent() {
+    const renderSources = this.useFullWidthSources;
+    const renderNote = this.showNote && this.useFullWidthNote;
+    const renderLicense = this.showLicenseNextToSources;
+    if (!renderSources && !renderNote) return null;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "SourcesFooterHTMLTop" }, renderSources && /* @__PURE__ */ React.createElement("div", { className: "SourcesAndLicense" }, this.renderSources(), renderLicense && this.renderLicense()), renderSources && renderNote && this.renderVerticalSpace(), renderNote && this.renderNote()), this.renderVerticalSpace());
+  }
+  get bottomContentHeight() {
+    const { sources, note } = this;
+    const renderSources = !this.useFullWidthSources;
+    const renderNote = this.showNote && !this.useFullWidthNote;
+    const renderLicense = !this.showLicenseNextToSources;
+    const renderPadding = (renderSources || renderNote) && renderLicense;
+    const textHeight = (renderSources ? sources.height : renderNote ? note.height : 0) + (renderPadding ? this.verticalPadding : 0) + (renderLicense ? this.licenseAndOriginUrl.height : 0);
+    return Math.max(textHeight, ACTION_BUTTONS_HEIGHT);
+  }
+  // renders the action buttons and the content next to it
+  // make sure to keep this.bottomContentHeight in sync if you edit this method
+  renderBottomContent() {
+    const renderSources = !this.useFullWidthSources;
+    const renderNote = this.showNote && !this.useFullWidthNote;
+    const renderLicense = !this.showLicenseNextToSources;
+    const renderPadding = (renderSources || renderNote) && renderLicense;
+    const licenseOnly = !renderSources && !renderNote && renderLicense;
+    const noteOnly = !renderSources && renderNote && !renderLicense;
+    const style = {
+      alignItems: licenseOnly || noteOnly && this.note.htmlLines.length <= 2 ? "center" : "flex-end"
+    };
+    return /* @__PURE__ */ React.createElement("div", { className: "SourcesFooterHTMLBottom", style }, /* @__PURE__ */ React.createElement("div", null, renderSources ? this.renderSources() : renderNote ? this.renderNote() : null, renderPadding && this.renderVerticalSpace(), renderLicense && this.renderLicense()), /* @__PURE__ */ React.createElement(ActionButtons, { manager: this.manager }));
+  }
+  render() {
+    const { tooltipTarget } = this;
+    return /* @__PURE__ */ React.createElement(
+      "footer",
+      {
+        className: "SourcesFooterHTML",
+        style: {
+          padding: `0 ${GRAPHER_FRAME_PADDING_HORIZONTAL}px`
+        },
+        ref: this.base
+      },
+      this.renderTopContent(),
+      this.renderBottomContent(),
+      tooltipTarget && /* @__PURE__ */ React.createElement(
+        Tooltip,
+        {
+          id: "footer",
+          tooltipManager: this.manager,
+          x: tooltipTarget.x,
+          y: tooltipTarget.y,
+          style: {
+            textAlign: "left",
+            maxWidth: "304px",
+            whiteSpace: "inherit",
+            fontSize: "14px",
+            padding: "0",
+            lineHeight: "21px",
+            fontWeight: 400,
+            letterSpacing: "0.01em"
+          }
+        },
+        /* @__PURE__ */ React.createElement("p", null, this.manager.branding?.licenseTooltip ?? "These charts are licensed under Creative Commons; you are free to use, share, and adapt this material. Click through for more information. Please bear in mind that the underlying source data might be subject to different license terms from third-party authors.")
+      )
+    );
+  }
+};
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "manager", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "maxWidth", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "useBaseFontSize", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "baseFontSize", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "hideOriginUrl", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "sourcesLine", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "sourcesText", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "noteText", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "markdownNoteText", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "licenseText", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "licenseUrl", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "originUrlWithProtocol", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "finalUrl", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "correctedUrlText", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "finalUrlText", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "licenseAndOriginUrlText", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "lineHeight", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "fontSize", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "sourcesFontSize", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "showNote", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "useFullWidthSources", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "useFullWidthNote", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "sourcesMaxWidth", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "noteMaxWidth", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "licenseAndOriginUrlMaxWidth", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "showLicenseNextToSources", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "sources", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "note", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "licenseAndOriginUrl", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "height", 1);
+__decorateClass([
+  action.bound
+], _AbstractFooter.prototype, "onMouseMove", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "topContentHeight", 1);
+__decorateClass([
+  computed
+], _AbstractFooter.prototype, "bottomContentHeight", 1);
+let AbstractFooter = _AbstractFooter;
+let Footer = class extends AbstractFooter {
+};
+Footer = __decorateClass([
+  observer
+], Footer);
+let StaticFooter = class extends AbstractFooter {
+  constructor(props) {
+    super(props);
+    this.verticalPadding = 4.5;
+    makeObservable(this);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  componentDidMount() {
+  }
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  componentWillUnmount() {
+  }
+  get hideOriginUrl() {
+    return !!this.manager.hideOriginUrl || !!this.manager.isStaticAndSmall;
+  }
+  get textColor() {
+    return GRAPHER_LIGHT_TEXT;
+  }
+  get showLicenseNextToSources() {
+    return this.maxWidth - this.sources.width - HORIZONTAL_PADDING > this.licenseAndOriginUrl.width;
+  }
+  get finalUrlText() {
+    const { correctedUrlText, licenseText, fontSize, maxWidth } = this;
+    if (this.hideOriginUrl) return void 0;
+    if (!correctedUrlText) return void 0;
+    const licenseAndOriginUrlText = Footer.constructLicenseAndOriginUrlText(
+      correctedUrlText,
+      licenseText
+    );
+    const licenseAndOriginUrlWidth = Bounds.forText(
+      licenseAndOriginUrlText,
+      { fontSize }
+    ).width;
+    if (licenseAndOriginUrlWidth > maxWidth) return void 0;
+    return correctedUrlText;
+  }
+  get licenseAndOriginUrlText() {
+    const { finalUrl, finalUrlText, licenseText, licenseUrl, textColor } = this;
+    const linkStyle = `fill: ${textColor};`;
+    const targetAttr = this.manager.isInIFrame ? ' target="_blank" rel="noopener"' : "";
+    const licenseSvg = `<a style="${linkStyle}" href="${licenseUrl}"${targetAttr}>${licenseText}</a>`;
+    if (!finalUrlText) return licenseSvg;
+    const originUrlSvg = `<a style="${linkStyle}" href="${finalUrl}"${targetAttr}>${finalUrlText}</a>`;
+    return [originUrlSvg, licenseSvg].join(" | ");
+  }
+  get sourcesText() {
+    return `**Data source:** ${this.sourcesLine}`;
+  }
+  get fontSize() {
+    if (this.manager.isStaticAndSmall) return 14;
+    return this.useBaseFontSize ? Math.round(13 / BASE_FONT_SIZE * this.baseFontSize) : 13;
+  }
+  get sourcesFontSize() {
+    return this.fontSize;
+  }
+  get sourcesMaxWidth() {
+    return this.maxWidth;
+  }
+  get noteMaxWidth() {
+    return this.maxWidth;
+  }
+  get licenseAndOriginUrlMaxWidth() {
+    return this.maxWidth;
+  }
+  get height() {
+    return this.sources.height + (this.showNote ? this.note.height + this.verticalPadding : 0) + (this.showLicenseNextToSources ? 0 : this.licenseAndOriginUrl.height + this.verticalPadding);
+  }
+  render() {
+    const {
+      sources,
+      note,
+      licenseAndOriginUrl,
+      showLicenseNextToSources,
+      maxWidth
+    } = this;
+    const { targetX, targetY } = this.props;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption(GRAPHER_FOOTER_CLASS),
+        className: "SourcesFooter",
+        style: { fill: this.textColor }
+      },
+      sources.renderSVG(targetX, targetY, {
+        id: makeIdForHumanConsumption("sources")
+      }),
+      this.showNote && note.renderSVG(
+        targetX,
+        targetY + sources.height + this.verticalPadding,
+        {
+          id: makeIdForHumanConsumption("note"),
+          detailsMarker: this.manager.detailsMarkerInSvg
+        }
+      ),
+      showLicenseNextToSources ? licenseAndOriginUrl.renderSVG(
+        targetX + maxWidth - licenseAndOriginUrl.width,
+        targetY,
+        { id: makeIdForHumanConsumption("origin-url") }
+      ) : licenseAndOriginUrl.renderSVG(
+        targetX,
+        targetY + sources.height + (this.showNote ? note.height + this.verticalPadding : 0) + this.verticalPadding,
+        { id: makeIdForHumanConsumption("origin-url") }
+      )
+    );
+  }
+};
+__decorateClass([
+  computed
+], StaticFooter.prototype, "textColor", 1);
+StaticFooter = __decorateClass([
+  observer
+], StaticFooter);
+export {
+  Footer,
+  StaticFooter
+};