@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/controls/ShareMenu.js

@@ -0,0 +1,261 @@
+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 { observer } from "mobx-react";
+import * as React from "react";
+import { computed, action, makeObservable } from "mobx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCode,
+  faShareAlt,
+  faLink,
+  faEdit,
+  faPanorama,
+  faImage
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  canWriteToClipboard,
+  copyToClipboard,
+  isAndroid,
+  isIOS
+} from "../../utils/index.js";
+import { GrapherModal } from "../core/GrapherConstants.js";
+import { isTargetOutsideElement } from "../chart/ChartUtils.js";
+const getShareData = (manager) => {
+  if (!manager.canonicalUrl) return void 0;
+  return {
+    title: manager.currentTitle ?? "",
+    url: manager.canonicalUrl
+  };
+};
+const canUseShareApi = (manager) => {
+  const shareData = getShareData(manager);
+  if (!shareData) return false;
+  return "share" in navigator && "canShare" in navigator && navigator.canShare(shareData);
+};
+const shouldShareUsingShareApi = (manager) => (isAndroid() || isIOS()) && canUseShareApi(manager);
+const shareUsingShareApi = async (manager) => {
+  if (!navigator.share) return;
+  const shareData = getShareData(manager);
+  if (!shareData) return;
+  try {
+    await navigator.share(shareData);
+  } catch (err) {
+    console.error("couldn't share using navigator.share", err);
+  }
+};
+let ShareMenu = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.menuRef = React.createRef();
+    makeObservable(this);
+    this.state = {
+      canWriteToClipboard: false,
+      copiedLink: false,
+      copiedPng: false
+    };
+  }
+  static shouldShow(manager) {
+    const test = new ShareMenu({ manager });
+    return test.showShareMenu;
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get title() {
+    return this.manager.currentTitle ?? "";
+  }
+  get showShareMenu() {
+    return !!this.canonicalUrl || !!this.manager.editUrl;
+  }
+  get canonicalUrl() {
+    return this.manager.canonicalUrl;
+  }
+  dismiss() {
+    this.props.onDismiss?.();
+  }
+  onClickSomewhere(e) {
+    if (this.menuRef.current && e.target && isTargetOutsideElement(e.target, this.menuRef.current)) {
+      this.dismiss();
+    }
+  }
+  componentDidMount() {
+    document.addEventListener("click", this.onClickSomewhere);
+    void canWriteToClipboard().then(
+      (canWriteToClipboard2) => this.setState({ canWriteToClipboard: canWriteToClipboard2 })
+    );
+  }
+  componentWillUnmount() {
+    document.removeEventListener("click", this.onClickSomewhere);
+  }
+  onEmbed(e) {
+    const { canonicalUrl, manager } = this;
+    if (!canonicalUrl) return;
+    manager.activeModal = GrapherModal.Embed;
+    this.dismiss();
+    e.stopPropagation();
+  }
+  async onNavigatorShare() {
+    await shareUsingShareApi(this.manager);
+  }
+  async onCopyUrl() {
+    if (!this.canonicalUrl) return;
+    try {
+      this.setState({ copiedLink: false, copiedPng: false });
+      const success = await copyToClipboard(this.canonicalUrl);
+      if (success) {
+        this.setState({ copiedLink: true, copiedPng: false });
+      } else {
+        console.error("Failed to copy link to clipboard");
+      }
+    } catch (err) {
+      console.error(
+        "couldn't copy to clipboard using navigator.clipboard",
+        err
+      );
+    }
+  }
+  async onCopyPng() {
+    const { manager } = this;
+    try {
+      this.setState({ copiedLink: false, copiedPng: false });
+      const rasterizePromise = manager.rasterize({
+        // Don't include DoDs in the static export when copying PNG to clipboard
+        includeDetails: false
+      });
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "image/png": rasterizePromise.then(({ blob }) => blob)
+        })
+      ]);
+      this.setState({ copiedLink: false, copiedPng: true });
+    } catch (err) {
+      console.error("couldn't copy PNG to clipboard", err);
+    }
+  }
+  get canUseShareApi() {
+    return canUseShareApi(this.manager);
+  }
+  get showCopyPngButton() {
+    return this.state.canWriteToClipboard;
+  }
+  render() {
+    const { canUseShareApi: canUseShareApi2, manager, showCopyPngButton } = this;
+    const { editUrl, createNarrativeChartUrl } = manager;
+    const width = 200;
+    const right = this.props.right ?? 0;
+    const style = {
+      width,
+      right: Math.max(-width * 0.5, -right)
+    };
+    return /* @__PURE__ */ React.createElement("div", { className: "ShareMenu", ref: this.menuRef, style }, /* @__PURE__ */ React.createElement("h2", null, "Share"), this.canonicalUrl && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        className: "embed",
+        title: "Embed this interactive visualization in another HTML document, e.g. a blog post or website",
+        "data-track-note": "chart_share_embed",
+        onClick: this.onEmbed
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { className: "icon", icon: faCode }),
+      "Embed this chart"
+    ), canUseShareApi2 && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        title: "Share this visualization with an app on your device",
+        "data-track-note": "chart_share_navigator",
+        onClick: this.onNavigatorShare
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { className: "icon", icon: faShareAlt }),
+      "Share via\u2026"
+    ), showCopyPngButton && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        title: "Copy an image of this chart to the clipboard",
+        "data-track-note": "chart_share_copy_png",
+        onClick: this.onCopyPng
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { className: "icon", icon: faImage }),
+      this.state.copiedPng ? "Chart copied!" : "Copy chart as image"
+    ), this.state.canWriteToClipboard && this.canonicalUrl && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        title: "Copy a link to this chart to the clipboard",
+        "data-track-note": "chart_share_copylink",
+        onClick: this.onCopyUrl
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { className: "icon", icon: faLink }),
+      this.state.copiedLink ? "Link copied!" : "Copy link to chart"
+    ), editUrl && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        title: "Edit chart",
+        href: editUrl,
+        target: "_blank",
+        rel: "noopener"
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { className: "icon", icon: faEdit }),
+      "Edit"
+    ), createNarrativeChartUrl && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        title: "Create a narrative chart",
+        href: createNarrativeChartUrl,
+        target: "_blank",
+        rel: "noopener"
+      },
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { className: "icon", icon: faPanorama }),
+      "Create narrative chart"
+    ));
+  }
+};
+__decorateClass([
+  computed
+], ShareMenu.prototype, "manager", 1);
+__decorateClass([
+  computed
+], ShareMenu.prototype, "title", 1);
+__decorateClass([
+  computed
+], ShareMenu.prototype, "showShareMenu", 1);
+__decorateClass([
+  computed
+], ShareMenu.prototype, "canonicalUrl", 1);
+__decorateClass([
+  action.bound
+], ShareMenu.prototype, "dismiss", 1);
+__decorateClass([
+  action.bound
+], ShareMenu.prototype, "onClickSomewhere", 1);
+__decorateClass([
+  action.bound
+], ShareMenu.prototype, "onEmbed", 1);
+__decorateClass([
+  action.bound
+], ShareMenu.prototype, "onNavigatorShare", 1);
+__decorateClass([
+  action.bound
+], ShareMenu.prototype, "onCopyUrl", 1);
+__decorateClass([
+  action.bound
+], ShareMenu.prototype, "onCopyPng", 1);
+__decorateClass([
+  computed
+], ShareMenu.prototype, "canUseShareApi", 1);
+__decorateClass([
+  computed
+], ShareMenu.prototype, "showCopyPngButton", 1);
+ShareMenu = __decorateClass([
+  observer
+], ShareMenu);
+export {
+  ShareMenu,
+  shareUsingShareApi,
+  shouldShareUsingShareApi
+};

package/dist/grapher/controls/ShareMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/ShareMenu.tsx"],
+  "sourcesContent": ["import { observer } from \"mobx-react\"\nimport * as React from \"react\"\nimport { computed, action, makeObservable } from \"mobx\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport {\n    faCode,\n    faShareAlt,\n    faLink,\n    faEdit,\n    faPanorama,\n    faImage,\n} from \"@fortawesome/free-solid-svg-icons\"\nimport {\n    canWriteToClipboard,\n    copyToClipboard,\n    isAndroid,\n    isIOS,\n} from \"../../utils/index.js\"\nimport { GrapherModal } from \"../core/GrapherConstants.js\"\nimport { isTargetOutsideElement } from \"../chart/ChartUtils.js\"\nimport { GrapherRasterizeFn } from \"../captionedChart/StaticChartRasterizer.js\"\n\nexport interface ShareMenuManager {\n    slug?: string\n    currentTitle?: string\n    canonicalUrl?: string\n    editUrl?: string\n    createNarrativeChartUrl?: string\n    activeModal?: GrapherModal\n    rasterize: GrapherRasterizeFn\n}\n\ninterface ShareMenuProps {\n    manager: ShareMenuManager\n    onDismiss?: () => void\n    right?: number\n}\n\ninterface ShareMenuState {\n    canWriteToClipboard: boolean\n    copiedLink: boolean\n    copiedPng: boolean\n}\n\ntype ShareApiManager = Pick<ShareMenuManager, \"canonicalUrl\" | \"currentTitle\">\n\nconst getShareData = (manager: ShareApiManager): ShareData | undefined => {\n    if (!manager.canonicalUrl) return undefined\n\n    return {\n        title: manager.currentTitle ?? \"\",\n        url: manager.canonicalUrl,\n    }\n}\n\nconst canUseShareApi = (manager: ShareApiManager): boolean => {\n    const shareData = getShareData(manager)\n    if (!shareData) return false\n\n    return (\n        \"share\" in navigator &&\n        \"canShare\" in navigator &&\n        navigator.canShare(shareData)\n    )\n}\n\n// On mobile OSs, the system-level share API does a way better job of providing\n// relevant options to the user than our own <ShareMenu> does - for example,\n// quick access to messaging apps, the user's frequent contacts, etc.\n// So, on Android and iOS, we want to just show the system-level share dialog\n// immediately when the user clicks the share button, rather than showing our\n// own menu.\n// See # legacy issue 3446\n// -@marcelgerber, 2024-04-24\nexport const shouldShareUsingShareApi = (manager: ShareApiManager): boolean =>\n    (isAndroid() || isIOS()) && canUseShareApi(manager)\n\nexport const shareUsingShareApi = async (\n    manager: ShareApiManager\n): Promise<void> => {\n    if (!navigator.share) return\n\n    const shareData = getShareData(manager)\n    if (!shareData) return\n\n    try {\n        await navigator.share(shareData)\n    } catch (err) {\n        console.error(\"couldn't share using navigator.share\", err)\n    }\n}\n\n@observer\nexport class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {\n    private menuRef = React.createRef<HTMLDivElement>()\n\n    constructor(props: ShareMenuProps) {\n        super(props)\n\n        makeObservable(this)\n\n        this.state = {\n            canWriteToClipboard: false,\n            copiedLink: false,\n            copiedPng: false,\n        }\n    }\n\n    static shouldShow(manager: ShareMenuManager): boolean {\n        const test = new ShareMenu({ manager })\n        return test.showShareMenu\n    }\n\n    @computed get manager(): ShareMenuManager {\n        return this.props.manager\n    }\n\n    @computed get title(): string {\n        return this.manager.currentTitle ?? \"\"\n    }\n\n    @computed get showShareMenu(): boolean {\n        return !!this.canonicalUrl || !!this.manager.editUrl\n    }\n\n    @computed get canonicalUrl(): string | undefined {\n        return this.manager.canonicalUrl\n    }\n\n    @action.bound dismiss(): void {\n        this.props.onDismiss?.()\n    }\n\n    @action.bound onClickSomewhere(e: Event): void {\n        if (\n            this.menuRef.current &&\n            e.target &&\n            isTargetOutsideElement(e.target, this.menuRef.current)\n        ) {\n            this.dismiss()\n        }\n    }\n\n    override componentDidMount(): void {\n        document.addEventListener(\"click\", this.onClickSomewhere)\n        void canWriteToClipboard().then((canWriteToClipboard) =>\n            this.setState({ canWriteToClipboard })\n        )\n    }\n\n    override componentWillUnmount(): void {\n        document.removeEventListener(\"click\", this.onClickSomewhere)\n    }\n\n    @action.bound onEmbed(e: React.MouseEvent): void {\n        const { canonicalUrl, manager } = this\n        if (!canonicalUrl) return\n        manager.activeModal = GrapherModal.Embed\n        this.dismiss()\n        e.stopPropagation()\n    }\n\n    @action.bound async onNavigatorShare(): Promise<void> {\n        await shareUsingShareApi(this.manager)\n    }\n\n    @action.bound async onCopyUrl(): Promise<void> {\n        if (!this.canonicalUrl) return\n\n        try {\n            this.setState({ copiedLink: false, copiedPng: false })\n            const success = await copyToClipboard(this.canonicalUrl)\n            if (success) {\n                this.setState({ copiedLink: true, copiedPng: false })\n            } else {\n                console.error(\"Failed to copy link to clipboard\")\n            }\n        } catch (err) {\n            console.error(\n                \"couldn't copy to clipboard using navigator.clipboard\",\n                err\n            )\n        }\n    }\n\n    @action.bound async onCopyPng(): Promise<void> {\n        const { manager } = this\n\n        try {\n            this.setState({ copiedLink: false, copiedPng: false })\n\n            const rasterizePromise = manager.rasterize({\n                // Don't include DoDs in the static export when copying PNG to clipboard\n                includeDetails: false,\n            })\n\n            // Safari needs the clipboard.write call to happen without a delay after the user interaction,\n            // so it's important that we pass a promise to ClipboardItem, not await the rasterization first\n            // see https://stackoverflow.com/a/68241516/10670163\n            await navigator.clipboard.write([\n                new ClipboardItem({\n                    \"image/png\": rasterizePromise.then(({ blob }) => blob),\n                }),\n            ])\n\n            this.setState({ copiedLink: false, copiedPng: true })\n        } catch (err) {\n            console.error(\"couldn't copy PNG to clipboard\", err)\n        }\n    }\n\n    @computed get canUseShareApi(): boolean {\n        return canUseShareApi(this.manager)\n    }\n\n    @computed get showCopyPngButton(): boolean {\n        return this.state.canWriteToClipboard\n    }\n\n    override render(): React.ReactElement {\n        const { canUseShareApi, manager, showCopyPngButton } = this\n        const { editUrl, createNarrativeChartUrl } = manager\n\n        const width = 200\n        const right = this.props.right ?? 0\n        const style: React.CSSProperties = {\n            width,\n            right: Math.max(-width * 0.5, -right),\n        }\n\n        return (\n            <div className=\"ShareMenu\" ref={this.menuRef} style={style}>\n                <h2>Share</h2>\n                {this.canonicalUrl && (\n                    <a\n                        className=\"embed\"\n                        title=\"Embed this interactive visualization in another HTML document, e.g. a blog post or website\"\n                        data-track-note=\"chart_share_embed\"\n                        onClick={this.onEmbed}\n                    >\n                        <FontAwesomeIcon className=\"icon\" icon={faCode} />\n                        Embed this chart\n                    </a>\n                )}\n                {canUseShareApi && (\n                    <a\n                        title=\"Share this visualization with an app on your device\"\n                        data-track-note=\"chart_share_navigator\"\n                        onClick={this.onNavigatorShare}\n                    >\n                        <FontAwesomeIcon className=\"icon\" icon={faShareAlt} />\n                        Share via&hellip;\n                    </a>\n                )}\n                {showCopyPngButton && (\n                    <a\n                        title=\"Copy an image of this chart to the clipboard\"\n                        data-track-note=\"chart_share_copy_png\"\n                        onClick={this.onCopyPng}\n                    >\n                        <FontAwesomeIcon className=\"icon\" icon={faImage} />\n                        {this.state.copiedPng\n                            ? \"Chart copied!\"\n                            : \"Copy chart as image\"}\n                    </a>\n                )}\n                {this.state.canWriteToClipboard && this.canonicalUrl && (\n                    <a\n                        title=\"Copy a link to this chart to the clipboard\"\n                        data-track-note=\"chart_share_copylink\"\n                        onClick={this.onCopyUrl}\n                    >\n                        <FontAwesomeIcon className=\"icon\" icon={faLink} />\n                        {this.state.copiedLink\n                            ? \"Link copied!\"\n                            : \"Copy link to chart\"}\n                    </a>\n                )}\n                {editUrl && (\n                    <a\n                        title=\"Edit chart\"\n                        href={editUrl}\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                    >\n                        <FontAwesomeIcon className=\"icon\" icon={faEdit} />\n                        Edit\n                    </a>\n                )}\n                {createNarrativeChartUrl && (\n                    <a\n                        title=\"Create a narrative chart\"\n                        href={createNarrativeChartUrl}\n                        target=\"_blank\"\n                        rel=\"noopener\"\n                    >\n                        <FontAwesomeIcon className=\"icon\" icon={faPanorama} />\n                        Create narrative chart\n                    </a>\n                )}\n            </div>\n        )\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["canWriteToClipboard", "canUseShareApi"]
+}

package/dist/grapher/controls/SortIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { SortOrder } from "../../types/index.js";
+export declare function SortIcon(props: {
+    type?: "text" | "numeric";
+    isActiveIcon?: boolean;
+    order: SortOrder;
+}): React.ReactElement;
+//# sourceMappingURL=SortIcon.d.ts.map

package/dist/grapher/controls/SortIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortIcon.d.ts","sourceRoot":"","sources":["../../../src/grapher/controls/SortIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAEhD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC5B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,KAAK,EAAE,SAAS,CAAA;CACnB,GAAG,KAAK,CAAC,YAAY,CAsBrB"}

package/dist/grapher/controls/SortIcon.js

@@ -0,0 +1,29 @@
+import * as React from "react";
+import classnames from "classnames";
+import {
+  faSortAlphaUpAlt,
+  faSortAlphaDown,
+  faSortAmountUpAlt,
+  faSortAmountDown
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { SortOrder } from "../../types/index.js";
+function SortIcon(props) {
+  const type = props.type ?? "numeric";
+  const isActiveIcon = props.isActiveIcon ?? false;
+  let faIcon;
+  if (type === "text")
+    faIcon = props.order === SortOrder.desc ? faSortAlphaUpAlt : faSortAlphaDown;
+  else
+    faIcon = props.order === SortOrder.desc ? faSortAmountDown : faSortAmountUpAlt;
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: classnames({ "sort-icon": true, active: isActiveIcon })
+    },
+    /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faIcon })
+  );
+}
+export {
+  SortIcon
+};

package/dist/grapher/controls/SortIcon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/SortIcon.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport classnames from \"classnames\"\nimport { IconDefinition } from \"@fortawesome/fontawesome-svg-core/index\"\nimport {\n    faSortAlphaUpAlt,\n    faSortAlphaDown,\n    faSortAmountUpAlt,\n    faSortAmountDown,\n} from \"@fortawesome/free-solid-svg-icons\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { SortOrder } from \"../../types/index.js\"\n\nexport function SortIcon(props: {\n    type?: \"text\" | \"numeric\"\n    isActiveIcon?: boolean\n    order: SortOrder\n}): React.ReactElement {\n    const type = props.type ?? \"numeric\"\n    const isActiveIcon = props.isActiveIcon ?? false\n\n    let faIcon: IconDefinition\n\n    if (type === \"text\")\n        faIcon =\n            props.order === SortOrder.desc ? faSortAlphaUpAlt : faSortAlphaDown\n    else\n        faIcon =\n            props.order === SortOrder.desc\n                ? faSortAmountDown\n                : faSortAmountUpAlt\n\n    return (\n        <span\n            className={classnames({ \"sort-icon\": true, active: isActiveIcon })}\n        >\n            <FontAwesomeIcon icon={faIcon} />\n        </span>\n    )\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AAEvB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,uBAAuB;AAChC,SAAS,iBAAiB;AAEnB,SAAS,SAAS,OAIF;AACnB,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,eAAe,MAAM,gBAAgB;AAE3C,MAAI;AAEJ,MAAI,SAAS;AACT,aACI,MAAM,UAAU,UAAU,OAAO,mBAAmB;AAAA;AAExD,aACI,MAAM,UAAU,UAAU,OACpB,mBACA;AAEd,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW,WAAW,EAAE,aAAa,MAAM,QAAQ,aAAa,CAAC;AAAA;AAAA,IAEjE,oCAAC,mBAAgB,MAAM,QAAQ;AAAA,EACnC;AAER;",
+  "names": []
+}

package/dist/grapher/controls/VerticalScrollContainer.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+type VerticalScrollContainerProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    scrollingShadows?: boolean;
+    scrollLock?: boolean;
+    contentsId?: string;
+};
+export declare const VerticalScrollContainer: React.ForwardRefExoticComponent<Omit<VerticalScrollContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=VerticalScrollContainer.d.ts.map

package/dist/grapher/controls/VerticalScrollContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalScrollContainer.d.ts","sourceRoot":"","sources":["../../../src/grapher/controls/VerticalScrollContainer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,4BAA4B,GAAG,KAAK,CAAC,iBAAiB,CACvD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc,CACjB,GAAG;IACA,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAwBD,eAAO,MAAM,uBAAuB,kHAqEnC,CAAA"}

package/dist/grapher/controls/VerticalScrollContainer.js

@@ -0,0 +1,192 @@
+import { useEffect, useState } from "react";
+import * as React from "react";
+import classnames from "classnames";
+function useCombinedRefs(...refs) {
+  const targetRef = React.useRef(null);
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(targetRef.current || null);
+      } else {
+        ref.current = targetRef.current || null;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+}
+const VerticalScrollContainer = React.forwardRef(
+  function VerticalScrollContainer2(props, ref) {
+    let {
+      scrollingShadows,
+      className,
+      children,
+      contentsId,
+      style,
+      scrollLock,
+      ...rest
+    } = props;
+    scrollingShadows ??= true;
+    const scrollContainerRef = useCombinedRefs(ref);
+    const [scrollTop, scrollBottom] = useScrollBounds(
+      scrollContainerRef,
+      contentsId
+    );
+    useScrollLock(scrollContainerRef, {
+      enable: scrollLock,
+      doNotLockIfNoScroll: true
+    });
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "VerticalScrollContainerShadows",
+        style: {
+          position: "relative",
+          height: "100%"
+        }
+      },
+      scrollingShadows && /* @__PURE__ */ React.createElement(
+        ScrollingShadow,
+        {
+          direction: "down",
+          size: 10,
+          opacity: getShadowOpacity(0.15, 80, scrollTop)
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classnames(className, "VerticalScrollContainer"),
+          style: {
+            overflowY: "auto",
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            ...style
+          },
+          ref: scrollContainerRef,
+          ...rest
+        },
+        children
+      ),
+      scrollingShadows && /* @__PURE__ */ React.createElement(
+        ScrollingShadow,
+        {
+          direction: "up",
+          size: 10,
+          opacity: getShadowOpacity(0.15, 80, scrollBottom)
+        }
+      )
+    );
+  }
+);
+function getShadowOpacity(maxOpacity, maxDistance, scrollDistance) {
+  const distance = scrollDistance !== void 0 ? Math.min(scrollDistance, maxDistance) : 0;
+  return distance / maxDistance * maxOpacity;
+}
+const ScrollingShadow = (props) => {
+  const background = `linear-gradient(
+        to ${props.direction === "up" ? "bottom" : "top"},
+        hsla(0, 0%, 0%, 0) 0%,
+        hsla(0, 0%, 0%, 0.104) 25.8%,
+        hsla(0, 0%, 0%, 0.45) 60.9%,
+        hsla(0, 0%, 0%, 0.825) 88.7%,
+        hsl(0, 0%, 0%) 100%
+    )`;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        [props.direction === "up" ? "bottom" : "top"]: 0,
+        height: `${props.size}px`,
+        background,
+        opacity: props.opacity,
+        pointerEvents: "none",
+        zIndex: 2
+      }
+    }
+  );
+};
+function useScrollBounds(ref, contentsId) {
+  const [scrollTop, onScrollTop] = useState(void 0);
+  const [scrollBottom, onScrollBottom] = useState(
+    void 0
+  );
+  useEffect(() => {
+    const el = ref.current;
+    if (el) {
+      let onScroll = function() {
+        const { scrollTop: scrollTop2, scrollHeight, offsetHeight } = el;
+        onScrollTop(scrollTop2);
+        onScrollBottom(scrollHeight - offsetHeight - scrollTop2);
+        pendingUpdate = false;
+      };
+      let pendingUpdate = false;
+      onScroll();
+      const onScrollThrottled = () => {
+        if (!pendingUpdate) {
+          window.requestAnimationFrame(onScroll);
+          pendingUpdate = true;
+        }
+      };
+      el.addEventListener("scroll", onScrollThrottled);
+      return () => {
+        el.removeEventListener("scroll", onScrollThrottled);
+      };
+    }
+    return;
+  }, [contentsId, ref]);
+  return [scrollTop, scrollBottom];
+}
+function useScrollLock(ref, opts) {
+  useEffect(() => {
+    const el = ref.current;
+    const options = {
+      doNotLockIfNoScroll: false,
+      enable: true,
+      ...opts
+    };
+    if (options.enable && el) {
+      let onWheel = function(ev) {
+        const el2 = ref.current;
+        if (el2) {
+          let prevent = function() {
+            ev.stopPropagation();
+            ev.preventDefault();
+          };
+          const delta = ev.deltaY;
+          const up = delta < 0;
+          const { scrollTop, scrollHeight, offsetHeight } = el2;
+          if (options.doNotLockIfNoScroll && scrollHeight <= offsetHeight) {
+            return;
+          }
+          if (!up && delta > scrollHeight - offsetHeight - scrollTop) {
+            el2.scrollTop = scrollHeight;
+            return prevent();
+          } else if (up && -delta > scrollTop) {
+            el2.scrollTop = 0;
+            return prevent();
+          }
+        }
+      };
+      el.addEventListener("wheel", onWheel, {
+        // We need to be in non-passive mode to be able to cancel the event
+        passive: false
+      });
+      return () => {
+        if (el) {
+          el.removeEventListener("wheel", onWheel);
+        }
+      };
+    }
+    return;
+  }, [opts, ref]);
+}
+export {
+  VerticalScrollContainer
+};

package/dist/grapher/controls/VerticalScrollContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/controls/VerticalScrollContainer.tsx"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport { useEffect, useState } from \"react\"\n\nimport * as React from \"react\"\nimport classnames from \"classnames\"\n\ntype VerticalScrollContainerProps = React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n> & {\n    scrollingShadows?: boolean\n    scrollLock?: boolean\n    contentsId?: string\n}\n\ntype ReactRef<T> =\n    | ((instance: T | null) => void)\n    | React.MutableRefObject<T | null>\n    | null\n\nfunction useCombinedRefs<T>(...refs: ReactRef<T>[]): React.RefObject<T | null> {\n    const targetRef = React.useRef<T>(null)\n\n    React.useEffect(() => {\n        refs.forEach((ref) => {\n            if (!ref) return\n            if (typeof ref === \"function\") {\n                ref(targetRef.current || null)\n            } else {\n                ref.current = targetRef.current || null\n            }\n        })\n    }, [refs])\n\n    return targetRef\n}\n\nexport const VerticalScrollContainer = React.forwardRef(\n    function VerticalScrollContainer(\n        props: VerticalScrollContainerProps,\n        ref: ReactRef<HTMLDivElement>\n    ) {\n        let {\n            scrollingShadows,\n            className,\n            children,\n            contentsId,\n            style,\n            scrollLock,\n            ...rest\n        } = props\n\n        scrollingShadows ??= true\n\n        const scrollContainerRef = useCombinedRefs<HTMLDivElement>(ref)\n        const [scrollTop, scrollBottom] = useScrollBounds(\n            scrollContainerRef,\n            contentsId\n        )\n\n        useScrollLock(scrollContainerRef, {\n            enable: scrollLock,\n            doNotLockIfNoScroll: true,\n        })\n\n        return (\n            <div\n                className=\"VerticalScrollContainerShadows\"\n                style={{\n                    position: \"relative\",\n                    height: \"100%\",\n                }}\n            >\n                {scrollingShadows && (\n                    <ScrollingShadow\n                        direction=\"down\"\n                        size={10}\n                        opacity={getShadowOpacity(0.15, 80, scrollTop)}\n                    />\n                )}\n                <div\n                    className={classnames(className, \"VerticalScrollContainer\")}\n                    style={{\n                        overflowY: \"auto\",\n                        position: \"absolute\",\n                        top: 0,\n                        right: 0,\n                        bottom: 0,\n                        left: 0,\n                        ...style,\n                    }}\n                    ref={scrollContainerRef}\n                    {...rest}\n                >\n                    {children}\n                </div>\n                {scrollingShadows && (\n                    <ScrollingShadow\n                        direction=\"up\"\n                        size={10}\n                        opacity={getShadowOpacity(0.15, 80, scrollBottom)}\n                    />\n                )}\n            </div>\n        )\n    }\n)\n\nfunction getShadowOpacity(\n    maxOpacity: number,\n    maxDistance: number,\n    scrollDistance: number | undefined\n): number {\n    const distance =\n        scrollDistance !== undefined ? Math.min(scrollDistance, maxDistance) : 0\n    return (distance / maxDistance) * maxOpacity\n}\n\nconst ScrollingShadow = (props: {\n    direction: \"up\" | \"down\"\n    size: number\n    opacity: number\n}): React.ReactElement => {\n    // \"Eased\" gradient\n    // https://larsenwork.com/easing-gradients/\n    const background = `linear-gradient(\n        to ${props.direction === \"up\" ? \"bottom\" : \"top\"},\n        hsla(0, 0%, 0%, 0) 0%,\n        hsla(0, 0%, 0%, 0.104) 25.8%,\n        hsla(0, 0%, 0%, 0.45) 60.9%,\n        hsla(0, 0%, 0%, 0.825) 88.7%,\n        hsl(0, 0%, 0%) 100%\n    )`\n    return (\n        <div\n            style={{\n                position: \"absolute\",\n                left: 0,\n                right: 0,\n                [props.direction === \"up\" ? \"bottom\" : \"top\"]: 0,\n                height: `${props.size}px`,\n                background: background,\n                opacity: props.opacity,\n                pointerEvents: \"none\",\n                zIndex: 2,\n            }}\n        />\n    )\n}\n\n/**\n * A throttled function that returns the available scrollTop and scrollBottom\n * @param ref\n * @param contentsId when this string changes, it's a signal that the contents have re-rendered and\n * the height has likely changed.\n */\nfunction useScrollBounds<ElementType extends HTMLElement>(\n    ref: React.RefObject<ElementType | null>,\n    contentsId?: string\n): [number | undefined, number | undefined] {\n    const [scrollTop, onScrollTop] = useState<number | undefined>(undefined)\n    const [scrollBottom, onScrollBottom] = useState<number | undefined>(\n        undefined\n    )\n\n    useEffect(() => {\n        const el = ref.current!\n        if (el) {\n            let pendingUpdate = false\n\n            function onScroll(): void {\n                const { scrollTop, scrollHeight, offsetHeight } = el\n                onScrollTop(scrollTop)\n                onScrollBottom(scrollHeight - offsetHeight - scrollTop)\n                pendingUpdate = false\n            }\n            onScroll() // execute for first time to setState\n\n            const onScrollThrottled = (): void => {\n                if (!pendingUpdate) {\n                    window.requestAnimationFrame(onScroll)\n                    pendingUpdate = true\n                }\n            }\n\n            el.addEventListener(\"scroll\", onScrollThrottled)\n            return (): void => {\n                el.removeEventListener(\"scroll\", onScrollThrottled)\n            }\n        }\n        return\n    }, [contentsId, ref])\n\n    return [scrollTop, scrollBottom]\n}\n\ninterface ScrollLockOptions {\n    enable: boolean\n    doNotLockIfNoScroll: boolean\n}\n\n/**\n * React hook to prevent scroll events propagating to parent element.\n * @param ref the ReactRef of the scrolling container\n */\nfunction useScrollLock<ElementType extends HTMLElement>(\n    ref: React.RefObject<ElementType | null>,\n    opts?: Partial<ScrollLockOptions>\n): void {\n    useEffect(() => {\n        const el = ref.current\n        const options: ScrollLockOptions = {\n            doNotLockIfNoScroll: false,\n            enable: true,\n            ...opts,\n        }\n        if (options.enable && el) {\n            function onWheel(ev: WheelEvent): void {\n                const el = ref.current\n                if (el) {\n                    const delta = ev.deltaY\n                    const up = delta < 0\n                    const { scrollTop, scrollHeight, offsetHeight } = el\n\n                    if (\n                        options.doNotLockIfNoScroll &&\n                        scrollHeight <= offsetHeight\n                    ) {\n                        return\n                    }\n\n                    function prevent(): void {\n                        ev.stopPropagation()\n                        ev.preventDefault()\n                    }\n\n                    if (\n                        !up &&\n                        delta > scrollHeight - offsetHeight - scrollTop\n                    ) {\n                        // Scrolling down, but this will take us past the bottom.\n                        el.scrollTop = scrollHeight\n                        return prevent()\n                    } else if (up && -delta > scrollTop) {\n                        // Scrolling up, but this will take us past the top.\n                        el.scrollTop = 0\n                        return prevent()\n                    }\n                }\n            }\n            el.addEventListener(\"wheel\", onWheel as any, {\n                // We need to be in non-passive mode to be able to cancel the event\n                passive: false,\n            })\n            return (): void => {\n                if (el) {\n                    el.removeEventListener(\"wheel\", onWheel as any)\n                }\n            }\n        }\n        return\n    }, [opts, ref])\n}\n"],
+  "mappings": "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",
+  "names": ["VerticalScrollContainer", "scrollTop", "el"]
+}

package/dist/grapher/controls/controlsRow/ControlsRow.d.ts

@@ -0,0 +1,36 @@
+import { Component } from "react";
+import { Bounds } from "../../../utils/index.js";
+import { ContentSwitchersManager } from "../ContentSwitchers.js";
+import { EntitySelectionManager } from "../EntitySelectionToggle.js";
+import { MapRegionDropdownManager } from "../MapRegionDropdown.js";
+import { SettingsMenuManager } from "../SettingsMenu.js";
+import { MapResetButtonManager } from "../MapResetButton.js";
+import { DataTableFilterDropdownManager } from "../DataTableFilterDropdown.js";
+import { DataTableSearchFieldManager } from "../DataTableSearchField.js";
+import { MapZoomToSelectionButtonManager } from "../MapZoomToSelectionButton.js";
+import { MapZoomDropdownManager } from "../MapZoomDropdown.js";
+export interface ControlsRowManager extends ContentSwitchersManager, EntitySelectionManager, SettingsMenuManager, MapRegionDropdownManager, MapResetButtonManager, MapZoomToSelectionButtonManager, MapZoomDropdownManager, DataTableFilterDropdownManager, DataTableSearchFieldManager {
+    sidePanelBounds?: Bounds;
+    isSmall?: boolean;
+}
+interface ControlsRowProps {
+    manager: ControlsRowManager;
+    maxWidth?: number;
+    popoverMaxWidth?: number;
+    popoverMaxHeight?: number;
+}
+export declare class ControlsRow extends Component<ControlsRowProps> {
+    private framePaddingHorizontal;
+    constructor(props: ControlsRowProps);
+    static shouldShow(manager: ControlsRowManager): boolean;
+    private get manager();
+    private get showControlsRow();
+    private renderChartControls;
+    private renderTableControls;
+    private renderMapControls;
+    private renderMapControlsForDesktop;
+    private renderMapControlsForMobile;
+    render(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=ControlsRow.d.ts.map

package/dist/grapher/controls/controlsRow/ControlsRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsRow.d.ts","sourceRoot":"","sources":["../../../../src/grapher/controls/controlsRow/ControlsRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,OAAO,EAAoB,uBAAuB,EAAE,MAAM,wBAAwB,CAAA;AAClF,OAAO,EAEH,sBAAsB,EACzB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAEH,wBAAwB,EAC3B,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAgB,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAEtE,OAAO,EAAkB,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAEH,8BAA8B,EACjC,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAEH,2BAA2B,EAC9B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAEH,+BAA+B,EAClC,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAmB,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAE/E,MAAM,WAAW,kBACb,SAAQ,uBAAuB,EAC3B,sBAAsB,EACtB,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,+BAA+B,EAC/B,sBAAsB,EACtB,8BAA8B,EAC9B,2BAA2B;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,UAAU,gBAAgB;IACtB,OAAO,EAAE,kBAAkB,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,qBACa,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACxD,OAAO,CAAC,sBAAsB,CAAmC;gBAErD,KAAK,EAAE,gBAAgB;IAKnC,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO;IAK7C,OAAO,KAAK,OAAO,GAE5B;IAES,OAAO,KAAK,eAAe,GAepC;IAED,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,2BAA2B;IAYnC,OAAO,CAAC,0BAA0B;IAgBzB,MAAM,IAAI,KAAK,CAAC,YAAY;CAmBxC"}