@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/captionedChart/CaptionedChart.js

@@ -0,0 +1,409 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import * as _ from "lodash-es";
+import * as React from "react";
+import { computed, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import {
+  Bounds,
+  exposeInstanceOnWindow,
+  makeIdForHumanConsumption
+} from "../../utils/index.js";
+import { LoadingIndicator } from "../../components/index.js";
+import { Header, StaticHeader } from "../header/Header.js";
+import { Footer, StaticFooter } from "../footer/Footer.js";
+import {
+  STATIC_EXPORT_DETAIL_SPACING,
+  GRAPHER_FRAME_PADDING_VERTICAL,
+  GRAPHER_FRAME_PADDING_HORIZONTAL,
+  DEFAULT_GRAPHER_BOUNDS
+} from "../core/GrapherConstants.js";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  TimelineComponent,
+  TIMELINE_HEIGHT
+} from "../timeline/TimelineComponent.js";
+import {
+  ControlsRow
+} from "../controls/controlsRow/ControlsRow.js";
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants.js";
+import { ChartAreaContent } from "../chart/ChartAreaContent.js";
+import { getChartSvgProps } from "../chart/ChartUtils.js";
+import { StaticChartWrapper } from "../chart/StaticChartWrapper.js";
+const CONTROLS_ROW_HEIGHT = 32;
+class AbstractCaptionedChart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.framePaddingHorizontal = GRAPHER_FRAME_PADDING_HORIZONTAL;
+    this.framePaddingVertical = GRAPHER_FRAME_PADDING_VERTICAL;
+    makeObservable(this);
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get maxWidth() {
+    return this.props.maxWidth ?? this.bounds.width - 2 * this.framePaddingHorizontal;
+  }
+  get verticalPadding() {
+    return this.manager.isSmall ? 8 : this.manager.isMedium ? 12 : 16;
+  }
+  get verticalPaddingSmall() {
+    if (this.manager.isOnMapTab) return 4;
+    return this.manager.isMedium ? 8 : 16;
+  }
+  get header() {
+    return new Header({
+      manager: this.manager,
+      maxWidth: this.maxWidth
+    });
+  }
+  get footer() {
+    return new Footer({
+      manager: this.manager,
+      maxWidth: this.maxWidth
+    });
+  }
+  get bounds() {
+    const bounds = this.props.bounds ?? this.manager.captionedChartBounds ?? DEFAULT_GRAPHER_BOUNDS;
+    return bounds.padRight(2).padBottom(2);
+  }
+  get boundsForChartArea() {
+    const { bounds, chartHeight } = this;
+    return new Bounds(0, 0, bounds.width, chartHeight);
+  }
+  componentDidMount() {
+    exposeInstanceOnWindow(this, "captionedChart");
+  }
+  get selectionArray() {
+    return this.manager.selection;
+  }
+  get showRelatedQuestion() {
+    return !!this.manager.showRelatedQuestion;
+  }
+  get relatedQuestionHeight() {
+    if (!this.showRelatedQuestion) return 0;
+    return this.manager.isMedium ? 24 : 28;
+  }
+  get showControlsRow() {
+    return ControlsRow.shouldShow(this.manager);
+  }
+  get settingsPopoverMaxWidth() {
+    const availableWidth = this.bounds.width - 2 * this.framePaddingHorizontal;
+    return Math.min(300, Math.floor(availableWidth));
+  }
+  get settingsPopoverMaxHeight() {
+    const availableHeight = this.bounds.height - 2 * this.framePaddingVertical - this.headerHeightWithPadding - this.controlsRowHeightWithPadding;
+    return Math.floor(availableHeight);
+  }
+  renderControlsRow() {
+    return /* @__PURE__ */ React.createElement(
+      ControlsRow,
+      {
+        manager: this.manager,
+        maxWidth: this.maxWidth,
+        popoverMaxWidth: this.settingsPopoverMaxWidth,
+        popoverMaxHeight: this.settingsPopoverMaxHeight
+      }
+    );
+  }
+  renderRelatedQuestion() {
+    const { relatedQuestions } = this.manager;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "relatedQuestion",
+        style: {
+          width: this.bounds.width,
+          height: this.relatedQuestionHeight,
+          padding: `0 ${this.framePaddingHorizontal}px`
+        }
+      },
+      "Related:\xA0",
+      /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: relatedQuestions[0].url,
+          target: "_blank",
+          rel: "noopener",
+          "data-track-note": "chart_click_related"
+        },
+        relatedQuestions[0].text
+      ),
+      /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faExternalLinkAlt })
+    );
+  }
+  renderLoadingIndicator() {
+    return /* @__PURE__ */ React.createElement(
+      LoadingIndicator,
+      {
+        title: this.manager.whatAreWeWaitingFor,
+        bounds: this.bounds
+      }
+    );
+  }
+  renderTimeline() {
+    return /* @__PURE__ */ React.createElement(
+      TimelineComponent,
+      {
+        timelineController: this.manager.timelineController,
+        maxWidth: this.maxWidth
+      }
+    );
+  }
+  get headerHeightWithPadding() {
+    return this.header.height + this.verticalPadding;
+  }
+  get footerHeightWithPadding() {
+    return this.footer.height + this.verticalPadding;
+  }
+  get controlsRowHeightWithPadding() {
+    return this.showControlsRow ? CONTROLS_ROW_HEIGHT + this.verticalPaddingSmall : 0;
+  }
+  get timelineHeightWithPadding() {
+    return this.manager.hasTimeline ? TIMELINE_HEIGHT + this.verticalPaddingSmall : 0;
+  }
+  get relatedQuestionHeightWithPadding() {
+    return this.showRelatedQuestion ? this.relatedQuestionHeight - this.framePaddingVertical * 0.25 : 0;
+  }
+  get chartHeight() {
+    return Math.floor(
+      this.bounds.height - 2 * this.framePaddingVertical - this.headerHeightWithPadding - this.controlsRowHeightWithPadding - this.timelineHeightWithPadding - this.footerHeightWithPadding - this.relatedQuestionHeightWithPadding
+    );
+  }
+  // make sure to keep this.chartHeight in sync if you edit the render function
+  render() {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "CaptionedChart",
+        style: {
+          backgroundColor: this.backgroundColor
+        }
+      },
+      /* @__PURE__ */ React.createElement(Header, { manager: this.manager, maxWidth: this.maxWidth }),
+      /* @__PURE__ */ React.createElement(VerticalSpace, { height: this.verticalPadding }),
+      this.manager.isReady ? /* @__PURE__ */ React.createElement(React.Fragment, null, this.showControlsRow && this.renderControlsRow(), this.showControlsRow && /* @__PURE__ */ React.createElement(VerticalSpace, { height: this.verticalPaddingSmall }), /* @__PURE__ */ React.createElement(
+        ChartAreaContent,
+        {
+          manager: this.manager,
+          bounds: this.boundsForChartArea,
+          padWidth: GRAPHER_FRAME_PADDING_HORIZONTAL
+        }
+      ), this.manager.hasTimeline && /* @__PURE__ */ React.createElement(VerticalSpace, { height: this.verticalPaddingSmall }), this.manager.hasTimeline && this.renderTimeline(), /* @__PURE__ */ React.createElement(VerticalSpace, { height: this.verticalPadding }), /* @__PURE__ */ React.createElement(
+        Footer,
+        {
+          manager: this.manager,
+          maxWidth: this.maxWidth
+        }
+      ), this.showRelatedQuestion && this.renderRelatedQuestion()) : this.renderLoadingIndicator()
+    );
+  }
+  get backgroundColor() {
+    return this.manager.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT;
+  }
+  get svgProps() {
+    return getChartSvgProps(this.manager);
+  }
+}
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "manager", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "maxWidth", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "verticalPadding", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "verticalPaddingSmall", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "header", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "footer", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "bounds", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "boundsForChartArea", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "selectionArray", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "showRelatedQuestion", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "relatedQuestionHeight", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "showControlsRow", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "settingsPopoverMaxWidth", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "settingsPopoverMaxHeight", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "headerHeightWithPadding", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "footerHeightWithPadding", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "controlsRowHeightWithPadding", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "timelineHeightWithPadding", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "relatedQuestionHeightWithPadding", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "chartHeight", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "backgroundColor", 1);
+__decorateClass([
+  computed
+], AbstractCaptionedChart.prototype, "svgProps", 1);
+let CaptionedChart = class extends AbstractCaptionedChart {
+};
+CaptionedChart = __decorateClass([
+  observer
+], CaptionedChart);
+let StaticCaptionedChart = class extends AbstractCaptionedChart {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  get svgBounds() {
+    return this.manager.staticBoundsWithDetails ?? this.bounds;
+  }
+  /** Bounds without details */
+  get bounds() {
+    return this.props.bounds ?? this.manager.staticBounds ?? DEFAULT_GRAPHER_BOUNDS;
+  }
+  get innerBounds() {
+    return this.bounds.padWidth(this.framePaddingHorizontal).padHeight(this.framePaddingVertical);
+  }
+  /** Bounds of the chart area (without header and footer) */
+  get boundsForChartArea() {
+    return this.innerBounds.padTop(this.staticHeader.height).padBottom(this.staticFooter.height + this.verticalPadding).padTop(this.manager.isOnMapTab ? 0 : this.verticalPadding);
+  }
+  get staticFooter() {
+    return new StaticFooter({
+      manager: this.manager,
+      maxWidth: this.maxWidth,
+      targetX: this.innerBounds.x,
+      targetY: this.innerBounds.bottom - this.footer.height
+    });
+  }
+  get staticHeader() {
+    return new StaticHeader({
+      manager: this.manager,
+      maxWidth: this.maxWidth,
+      targetX: this.innerBounds.x,
+      targetY: this.innerBounds.y
+    });
+  }
+  renderSVGDetails() {
+    let yOffset = 0;
+    let previousOffset = 0;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "line",
+      {
+        id: makeIdForHumanConsumption("separator-line"),
+        x1: this.framePaddingHorizontal,
+        y1: this.bounds.height,
+        x2: this.boundsForChartArea.width + this.framePaddingHorizontal,
+        y2: this.bounds.height,
+        stroke: "#e7e7e7"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption("details"),
+        transform: `translate(15, ${// + padding below the grey line
+        this.bounds.height + this.framePaddingVertical})`
+      },
+      this.manager.detailRenderers.map((detail, i) => {
+        previousOffset = yOffset;
+        yOffset += detail.height + STATIC_EXPORT_DETAIL_SPACING;
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, detail.renderSVG(0, previousOffset));
+      })
+    ));
+  }
+  render() {
+    const { innerBounds, manager, maxWidth } = this;
+    const includeDetailsInStaticExport = manager.shouldIncludeDetailsInStaticExport && !_.isEmpty(this.manager.detailRenderers);
+    return /* @__PURE__ */ React.createElement(StaticChartWrapper, { manager: this.manager, bounds: this.svgBounds }, /* @__PURE__ */ React.createElement(
+      StaticHeader,
+      {
+        manager,
+        maxWidth,
+        targetX: innerBounds.x,
+        targetY: innerBounds.y
+      }
+    ), /* @__PURE__ */ React.createElement(
+      ChartAreaContent,
+      {
+        manager: this.manager,
+        bounds: this.boundsForChartArea
+      }
+    ), /* @__PURE__ */ React.createElement(
+      StaticFooter,
+      {
+        manager,
+        maxWidth,
+        targetX: innerBounds.x,
+        targetY: innerBounds.bottom - this.staticFooter.height
+      }
+    ), includeDetailsInStaticExport && this.renderSVGDetails());
+  }
+};
+__decorateClass([
+  computed
+], StaticCaptionedChart.prototype, "svgBounds", 1);
+__decorateClass([
+  computed
+], StaticCaptionedChart.prototype, "innerBounds", 1);
+__decorateClass([
+  computed
+], StaticCaptionedChart.prototype, "staticFooter", 1);
+__decorateClass([
+  computed
+], StaticCaptionedChart.prototype, "staticHeader", 1);
+StaticCaptionedChart = __decorateClass([
+  observer
+], StaticCaptionedChart);
+function VerticalSpace({ height }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "VerticalSpace",
+      style: {
+        height,
+        width: "100%"
+      }
+    }
+  );
+}
+export {
+  CONTROLS_ROW_HEIGHT,
+  CaptionedChart,
+  StaticCaptionedChart
+};

package/dist/grapher/captionedChart/CaptionedChart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/captionedChart/CaptionedChart.tsx"],
+  "sourcesContent": ["import * as _ from \"lodash-es\"\nimport * as React from \"react\"\nimport { computed, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport {\n    Bounds,\n    exposeInstanceOnWindow,\n    makeIdForHumanConsumption,\n} from \"../../utils/index.js\"\nimport { MarkdownTextWrap, LoadingIndicator } from \"../../components/index.js\"\nimport { Header, StaticHeader } from \"../header/Header.js\"\nimport { Footer, StaticFooter } from \"../footer/Footer.js\"\nimport {\n    STATIC_EXPORT_DETAIL_SPACING,\n    GRAPHER_FRAME_PADDING_VERTICAL,\n    GRAPHER_FRAME_PADDING_HORIZONTAL,\n    DEFAULT_GRAPHER_BOUNDS,\n} from \"../core/GrapherConstants.js\"\nimport { MapChartManager } from \"../mapCharts/MapChartConstants.js\"\nimport { ChartManager } from \"../chart/ChartManager.js\"\nimport { faExternalLinkAlt } from \"@fortawesome/free-solid-svg-icons\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { FooterManager } from \"../footer/FooterManager.js\"\nimport { HeaderManager } from \"../header/HeaderManager.js\"\nimport { SelectionArray } from \"../selection/SelectionArray.js\"\nimport {\n    EntityName,\n    RelatedQuestionsConfig,\n    Color,\n    GrapherTabName,\n    GrapherChartType,\n} from \"../../types/index.js\"\nimport { DataTableManager } from \"../dataTable/DataTableConstants.js\"\nimport {\n    TimelineComponent,\n    TIMELINE_HEIGHT,\n} from \"../timeline/TimelineComponent.js\"\nimport { TimelineController } from \"../timeline/TimelineController.js\"\nimport {\n    ControlsRow,\n    ControlsRowManager,\n} from \"../controls/controlsRow/ControlsRow.js\"\nimport { GRAPHER_BACKGROUND_DEFAULT } from \"../color/ColorConstants.js\"\nimport { ChartAreaContent } from \"../chart/ChartAreaContent.js\"\nimport { getChartSvgProps } from \"../chart/ChartUtils.js\"\nimport { StaticChartWrapper } from \"../chart/StaticChartWrapper.js\"\n\nexport interface CaptionedChartManager\n    extends ChartManager,\n        MapChartManager,\n        FooterManager,\n        HeaderManager,\n        DataTableManager,\n        ControlsRowManager {\n    bakedGrapherURL?: string\n    isReady?: boolean\n    whatAreWeWaitingFor?: string\n\n    // bounds\n    captionedChartBounds?: Bounds\n    sidePanelBounds?: Bounds\n    staticBounds?: Bounds\n    staticBoundsWithDetails?: Bounds\n\n    // layout & style\n    isSmall?: boolean\n    isMedium?: boolean\n    fontSize?: number\n    backgroundColor?: string\n\n    // state\n    activeTab?: GrapherTabName\n    isOnMapTab?: boolean\n    isOnTableTab?: boolean\n    activeChartType?: GrapherChartType\n    isFaceted?: boolean\n    isExportingForSocialMedia?: boolean\n    isExportingForWikimedia?: boolean\n\n    // timeline\n    hasTimeline?: boolean\n    timelineController?: TimelineController\n\n    // details on demand\n    shouldIncludeDetailsInStaticExport?: boolean\n    detailRenderers: MarkdownTextWrap[]\n\n    // related question\n    relatedQuestions?: RelatedQuestionsConfig[]\n    showRelatedQuestion?: boolean\n}\n\ninterface CaptionedChartProps {\n    manager: CaptionedChartManager\n    bounds?: Bounds\n    maxWidth?: number\n}\n\n// keep in sync with sass variables in CaptionedChart.scss\nexport const CONTROLS_ROW_HEIGHT = 32\n\nabstract class AbstractCaptionedChart extends React.Component<CaptionedChartProps> {\n    protected framePaddingHorizontal = GRAPHER_FRAME_PADDING_HORIZONTAL\n    protected framePaddingVertical = GRAPHER_FRAME_PADDING_VERTICAL\n\n    constructor(props: CaptionedChartProps) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed protected get manager(): CaptionedChartManager {\n        return this.props.manager\n    }\n\n    @computed protected get maxWidth(): number {\n        return (\n            this.props.maxWidth ??\n            this.bounds.width - 2 * this.framePaddingHorizontal\n        )\n    }\n\n    @computed protected get verticalPadding(): number {\n        return this.manager.isSmall ? 8 : this.manager.isMedium ? 12 : 16\n    }\n\n    @computed protected get verticalPaddingSmall(): number {\n        if (this.manager.isOnMapTab) return 4\n        return this.manager.isMedium ? 8 : 16\n    }\n\n    @computed protected get header(): Header {\n        return new Header({\n            manager: this.manager,\n            maxWidth: this.maxWidth,\n        })\n    }\n\n    @computed protected get footer(): Footer {\n        return new Footer({\n            manager: this.manager,\n            maxWidth: this.maxWidth,\n        })\n    }\n\n    @computed protected get bounds(): Bounds {\n        const bounds =\n            this.props.bounds ??\n            this.manager.captionedChartBounds ??\n            DEFAULT_GRAPHER_BOUNDS\n        // the padding ensures grapher's frame is not cut off\n        return bounds.padRight(2).padBottom(2)\n    }\n\n    @computed protected get boundsForChartArea(): Bounds {\n        const { bounds, chartHeight } = this\n        return new Bounds(0, 0, bounds.width, chartHeight)\n    }\n\n    override componentDidMount(): void {\n        exposeInstanceOnWindow(this, \"captionedChart\")\n    }\n\n    @computed get selectionArray(): SelectionArray | EntityName[] | undefined {\n        return this.manager.selection\n    }\n\n    @computed private get showRelatedQuestion(): boolean {\n        return !!this.manager.showRelatedQuestion\n    }\n\n    @computed get relatedQuestionHeight(): number {\n        if (!this.showRelatedQuestion) return 0\n        return this.manager.isMedium ? 24 : 28\n    }\n\n    @computed private get showControlsRow(): boolean {\n        return ControlsRow.shouldShow(this.manager)\n    }\n\n    @computed private get settingsPopoverMaxWidth(): number {\n        const availableWidth =\n            this.bounds.width - 2 * this.framePaddingHorizontal\n\n        // Ensure the popover is at most 300px wide\n        return Math.min(300, Math.floor(availableWidth))\n    }\n\n    @computed private get settingsPopoverMaxHeight(): number {\n        const availableHeight =\n            this.bounds.height -\n            2 * this.framePaddingVertical -\n            this.headerHeightWithPadding -\n            this.controlsRowHeightWithPadding\n\n        return Math.floor(availableHeight)\n    }\n\n    private renderControlsRow(): React.ReactElement {\n        return (\n            <ControlsRow\n                manager={this.manager}\n                maxWidth={this.maxWidth}\n                popoverMaxWidth={this.settingsPopoverMaxWidth}\n                popoverMaxHeight={this.settingsPopoverMaxHeight}\n            />\n        )\n    }\n\n    private renderRelatedQuestion(): React.ReactElement {\n        const { relatedQuestions } = this.manager\n        return (\n            <div\n                className=\"relatedQuestion\"\n                style={{\n                    width: this.bounds.width,\n                    height: this.relatedQuestionHeight,\n                    padding: `0 ${this.framePaddingHorizontal}px`,\n                }}\n            >\n                Related:&nbsp;\n                <a\n                    href={relatedQuestions![0].url}\n                    target=\"_blank\"\n                    rel=\"noopener\"\n                    data-track-note=\"chart_click_related\"\n                >\n                    {relatedQuestions![0].text}\n                </a>\n                <FontAwesomeIcon icon={faExternalLinkAlt} />\n            </div>\n        )\n    }\n\n    private renderLoadingIndicator(): React.ReactElement {\n        return (\n            <LoadingIndicator\n                title={this.manager.whatAreWeWaitingFor}\n                bounds={this.bounds}\n            />\n        )\n    }\n\n    private renderTimeline(): React.ReactElement {\n        return (\n            <TimelineComponent\n                timelineController={this.manager.timelineController!}\n                maxWidth={this.maxWidth}\n            />\n        )\n    }\n\n    @computed private get headerHeightWithPadding(): number {\n        return this.header.height + this.verticalPadding\n    }\n\n    @computed private get footerHeightWithPadding(): number {\n        return this.footer.height + this.verticalPadding\n    }\n\n    @computed private get controlsRowHeightWithPadding(): number {\n        return this.showControlsRow\n            ? CONTROLS_ROW_HEIGHT + this.verticalPaddingSmall\n            : 0\n    }\n\n    @computed private get timelineHeightWithPadding(): number {\n        return this.manager.hasTimeline\n            ? TIMELINE_HEIGHT + this.verticalPaddingSmall\n            : 0\n    }\n\n    @computed private get relatedQuestionHeightWithPadding(): number {\n        return this.showRelatedQuestion\n            ? this.relatedQuestionHeight - this.framePaddingVertical * 0.25\n            : 0\n    }\n\n    /**\n     * The height of the chart area is the total height of the frame minus\n     * the height of the header, footer, controls, etc.\n     */\n    @computed protected get chartHeight(): number {\n        return Math.floor(\n            this.bounds.height -\n                2 * this.framePaddingVertical -\n                this.headerHeightWithPadding -\n                this.controlsRowHeightWithPadding -\n                this.timelineHeightWithPadding -\n                this.footerHeightWithPadding -\n                this.relatedQuestionHeightWithPadding\n        )\n    }\n\n    // make sure to keep this.chartHeight in sync if you edit the render function\n    override render(): React.ReactElement {\n        // CaptionedChart renders at the very least a header, a chart, and a footer.\n        // Interactive charts also have controls above the chart area and a timeline below it.\n        // Some charts have a related question below the footer.\n        // A CaptionedChart looks like this (components in [brackets] are optional):\n        //    #1 Header\n        //            ---- vertical space\n        //    #2 [Controls]\n        //            ---- vertical space (small)\n        //    #3 Chart/Map/Table\n        //            ---- vertical space (small)\n        //    #4 [Timeline]\n        //            ---- vertical space\n        //    #5 Footer\n        //    #6 [Related question]\n        return (\n            <div\n                className=\"CaptionedChart\"\n                style={{\n                    backgroundColor: this.backgroundColor,\n                }}\n            >\n                {/* #1 Header */}\n                <Header manager={this.manager} maxWidth={this.maxWidth} />\n                <VerticalSpace height={this.verticalPadding} />\n\n                {this.manager.isReady ? (\n                    <>\n                        {/* #2 [Controls] */}\n                        {this.showControlsRow && this.renderControlsRow()}\n                        {this.showControlsRow && (\n                            <VerticalSpace height={this.verticalPaddingSmall} />\n                        )}\n\n                        {/* #3 Chart/Map/Table */}\n                        <ChartAreaContent\n                            manager={this.manager}\n                            bounds={this.boundsForChartArea}\n                            padWidth={GRAPHER_FRAME_PADDING_HORIZONTAL}\n                        />\n\n                        {/* #4 [Timeline] */}\n                        {this.manager.hasTimeline && (\n                            <VerticalSpace height={this.verticalPaddingSmall} />\n                        )}\n                        {this.manager.hasTimeline && this.renderTimeline()}\n\n                        {/* #5 Footer */}\n                        <VerticalSpace height={this.verticalPadding} />\n                        <Footer\n                            manager={this.manager}\n                            maxWidth={this.maxWidth}\n                        />\n\n                        {/* #6 [Related question] */}\n                        {this.showRelatedQuestion &&\n                            this.renderRelatedQuestion()}\n                    </>\n                ) : (\n                    this.renderLoadingIndicator()\n                )}\n            </div>\n        )\n    }\n\n    @computed protected get backgroundColor(): Color {\n        return this.manager.backgroundColor ?? GRAPHER_BACKGROUND_DEFAULT\n    }\n\n    @computed protected get svgProps(): React.SVGProps<SVGSVGElement> {\n        return getChartSvgProps(this.manager)\n    }\n}\n\n@observer\nexport class CaptionedChart extends AbstractCaptionedChart {}\n\n@observer\nexport class StaticCaptionedChart extends AbstractCaptionedChart {\n    constructor(props: CaptionedChartProps) {\n        super(props)\n        makeObservable(this)\n    }\n\n    // Bounds diagram\n    //\n    // +---------------------------+   |  |\n    // |  Padding                  |   |  |\n    // |  +--------------------+   |   |  |  |\n    // |  | Header             |   |   |  |  |\n    // |  |                    |   |   |  |  |\n    // |  | Chart area         |   |   |  |  |\n    // |  |                    |   |   |  |  |\n    // |  | Footer             |   |   |  |  | innerBounds\n    // |  +--------------------+   |   |  |\n    // |  Padding                  |   |  |\n    // +---------------------------+   |  | bounds\n    // | Details                   |   |\n    // +---------------------------+   | svgBounds\n\n    /** Bounds of the SVG element including details */\n    @computed private get svgBounds(): Bounds {\n        return this.manager.staticBoundsWithDetails ?? this.bounds\n    }\n\n    /** Bounds without details */\n    protected override get bounds(): Bounds {\n        return (\n            this.props.bounds ??\n            this.manager.staticBounds ??\n            DEFAULT_GRAPHER_BOUNDS\n        )\n    }\n\n    /** Padded bounds of the actual chart area (without whitespace around it) */\n    @computed private get innerBounds(): Bounds {\n        return this.bounds\n            .padWidth(this.framePaddingHorizontal)\n            .padHeight(this.framePaddingVertical)\n    }\n\n    /** Bounds of the chart area (without header and footer) */\n    protected override get boundsForChartArea(): Bounds {\n        return this.innerBounds\n            .padTop(this.staticHeader.height)\n            .padBottom(this.staticFooter.height + this.verticalPadding)\n            .padTop(this.manager.isOnMapTab ? 0 : this.verticalPadding)\n    }\n\n    @computed protected get staticFooter(): Footer {\n        return new StaticFooter({\n            manager: this.manager,\n            maxWidth: this.maxWidth,\n            targetX: this.innerBounds.x,\n            targetY: this.innerBounds.bottom - this.footer.height,\n        })\n    }\n\n    @computed protected get staticHeader(): Header {\n        return new StaticHeader({\n            manager: this.manager,\n            maxWidth: this.maxWidth,\n            targetX: this.innerBounds.x,\n            targetY: this.innerBounds.y,\n        })\n    }\n\n    renderSVGDetails(): React.ReactElement {\n        let yOffset = 0\n        let previousOffset = 0\n        return (\n            <>\n                <line\n                    id={makeIdForHumanConsumption(\"separator-line\")}\n                    x1={this.framePaddingHorizontal}\n                    y1={this.bounds.height}\n                    x2={\n                        this.boundsForChartArea.width +\n                        this.framePaddingHorizontal\n                    }\n                    y2={this.bounds.height}\n                    stroke=\"#e7e7e7\"\n                ></line>\n                <g\n                    id={makeIdForHumanConsumption(\"details\")}\n                    transform={`translate(15, ${\n                        // + padding below the grey line\n                        this.bounds.height + this.framePaddingVertical\n                    })`}\n                >\n                    {this.manager.detailRenderers.map((detail, i) => {\n                        previousOffset = yOffset\n                        yOffset += detail.height + STATIC_EXPORT_DETAIL_SPACING\n                        return (\n                            <React.Fragment key={i}>\n                                {detail.renderSVG(0, previousOffset)}\n                            </React.Fragment>\n                        )\n                    })}\n                </g>\n            </>\n        )\n    }\n\n    override render(): React.ReactElement {\n        const { innerBounds, manager, maxWidth } = this\n\n        const includeDetailsInStaticExport =\n            manager.shouldIncludeDetailsInStaticExport &&\n            !_.isEmpty(this.manager.detailRenderers)\n\n        return (\n            <StaticChartWrapper manager={this.manager} bounds={this.svgBounds}>\n                <StaticHeader\n                    manager={manager}\n                    maxWidth={maxWidth}\n                    targetX={innerBounds.x}\n                    targetY={innerBounds.y}\n                />\n                <ChartAreaContent\n                    manager={this.manager}\n                    bounds={this.boundsForChartArea}\n                />\n                <StaticFooter\n                    manager={manager}\n                    maxWidth={maxWidth}\n                    targetX={innerBounds.x}\n                    targetY={innerBounds.bottom - this.staticFooter.height}\n                />\n                {includeDetailsInStaticExport && this.renderSVGDetails()}\n            </StaticChartWrapper>\n        )\n    }\n}\n\n// Although a bit unconventional, adding vertical space as a <div />\n// makes margin collapsing impossible and makes it easier to track the\n// space available for the chart area (see the CaptionedChart's `chartHeight` method)\nfunction VerticalSpace({ height }: { height: number }): React.ReactElement {\n    return (\n        <div\n            className=\"VerticalSpace\"\n            style={{\n                height,\n                width: \"100%\",\n            }}\n        />\n    )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/grapher/captionedChart/Logos.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { LogoOption } from "../../types/index.js";
+interface LogoProps {
+    logo?: LogoOption;
+    isLink: boolean;
+    heightScale?: number;
+    useSmallVersion?: boolean;
+}
+export declare class Logo {
+    props: LogoProps;
+    constructor(props: LogoProps);
+    private get logo();
+    private get spec();
+    private get targetHeight();
+    private get scale();
+    get width(): number;
+    get height(): number;
+    renderSVG(targetX: number, targetY: number): React.ReactElement;
+    renderHTML(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=Logos.d.ts.map

package/dist/grapher/captionedChart/Logos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logos.d.ts","sourceRoot":"","sources":["../../../src/grapher/captionedChart/Logos.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AA6DjD,UAAU,SAAS;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,qBAAa,IAAI;IACb,KAAK,EAAE,SAAS,CAAA;gBACJ,KAAK,EAAE,SAAS;IAI5B,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,KAAK,IAAI,GAKf;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY;IAe/D,UAAU,IAAI,KAAK,CAAC,YAAY;CAanC"}

package/dist/grapher/captionedChart/Logos.js

@@ -0,0 +1,113 @@
+import * as React from "react";
+import {
+  BUILDCANADA_LOGO_SVG,
+  BUILDCANADA_WIDE_LOGO_SVG,
+  CANADASPENDS_LOGO_SVG,
+  CORE_LOGO_SVG,
+  GV_LOGO_SVG,
+  LEGACY_LOGO_SVG,
+  SMALL_LEGACY_LOGO_SVG
+} from "./LogosSVG.js";
+import { LogoOption } from "../../types/index.js";
+import { makeIdForHumanConsumption } from "../../utils/index.js";
+const logos = {
+  legacy: {
+    svg: LEGACY_LOGO_SVG,
+    width: 65,
+    height: 36,
+    targetHeight: 36
+  },
+  "core+legacy": {
+    svg: CORE_LOGO_SVG,
+    width: 102,
+    height: 37,
+    targetHeight: 36
+  },
+  "gv+legacy": {
+    svg: GV_LOGO_SVG,
+    width: 420,
+    height: 350,
+    targetHeight: 52
+  },
+  buildcanada: {
+    svg: BUILDCANADA_LOGO_SVG,
+    width: 65,
+    height: 65,
+    targetHeight: 36,
+    url: "https://buildcanada.ca"
+  },
+  "buildcanada-wide": {
+    svg: BUILDCANADA_WIDE_LOGO_SVG,
+    width: 107,
+    height: 65,
+    targetHeight: 36,
+    url: "https://buildcanada.ca"
+  },
+  canadaspends: {
+    svg: CANADASPENDS_LOGO_SVG,
+    width: 117,
+    height: 36,
+    targetHeight: 36,
+    url: "https://canadaspends.ca"
+  }
+};
+const smallLogo = {
+  svg: SMALL_LEGACY_LOGO_SVG,
+  width: 51,
+  height: 28,
+  targetHeight: 28
+};
+class Logo {
+  constructor(props) {
+    this.props = props;
+  }
+  get logo() {
+    return this.props.logo ?? LogoOption["buildcanada-wide"];
+  }
+  get spec() {
+    if (this.props.useSmallVersion && this.logo === LogoOption.legacy) {
+      return smallLogo;
+    }
+    return logos[this.logo];
+  }
+  get targetHeight() {
+    return (this.props.heightScale ?? 1) * this.spec.targetHeight;
+  }
+  get scale() {
+    return this.targetHeight / this.spec.height;
+  }
+  get width() {
+    return this.spec.width * this.scale;
+  }
+  get height() {
+    return this.spec.height * this.scale;
+  }
+  renderSVG(targetX, targetY) {
+    const { scale } = this;
+    const svg = (this.spec.svg.match(/<svg>(.*)<\/svg>/) || "")[1] || this.spec.svg;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption("logo"),
+        transform: `translate(${Math.round(
+          targetX
+        )}, ${targetY}) scale(${parseFloat(scale.toFixed(2))})`,
+        dangerouslySetInnerHTML: { __html: svg }
+      }
+    );
+  }
+  renderHTML() {
+    const { spec } = this;
+    const props = {
+      className: "logo",
+      dangerouslySetInnerHTML: { __html: spec.svg },
+      style: { height: `${this.targetHeight}px` }
+    };
+    if (this.props.isLink && spec.url)
+      return /* @__PURE__ */ React.createElement("a", { ...props, href: spec.url, target: "_blank", rel: "noopener" });
+    else return /* @__PURE__ */ React.createElement("div", { ...props });
+  }
+}
+export {
+  Logo
+};

package/dist/grapher/captionedChart/Logos.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/captionedChart/Logos.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport {\n    BUILDCANADA_LOGO_SVG,\n    BUILDCANADA_WIDE_LOGO_SVG,\n    CANADASPENDS_LOGO_SVG,\n    CORE_LOGO_SVG,\n    GV_LOGO_SVG,\n    LEGACY_LOGO_SVG,\n    SMALL_LEGACY_LOGO_SVG,\n} from \"./LogosSVG.js\"\nimport { LogoOption } from \"../../types/index.js\"\nimport { makeIdForHumanConsumption } from \"../../utils/index.js\"\n\ninterface LogoAttributes {\n    svg: string\n    width: number\n    height: number\n    targetHeight: number\n    url?: string\n}\n\nconst logos: Record<LogoOption, LogoAttributes> = {\n    legacy: {\n        svg: LEGACY_LOGO_SVG,\n        width: 65,\n        height: 36,\n        targetHeight: 36,\n    },\n    \"core+legacy\": {\n        svg: CORE_LOGO_SVG,\n        width: 102,\n        height: 37,\n        targetHeight: 36,\n    },\n    \"gv+legacy\": {\n        svg: GV_LOGO_SVG,\n        width: 420,\n        height: 350,\n        targetHeight: 52,\n    },\n    buildcanada: {\n        svg: BUILDCANADA_LOGO_SVG,\n        width: 65,\n        height: 65,\n        targetHeight: 36,\n        url: \"https://buildcanada.ca\",\n    },\n    \"buildcanada-wide\": {\n        svg: BUILDCANADA_WIDE_LOGO_SVG,\n        width: 107,\n        height: 65,\n        targetHeight: 36,\n        url: \"https://buildcanada.ca\",\n    },\n    canadaspends: {\n        svg: CANADASPENDS_LOGO_SVG,\n        width: 117,\n        height: 36,\n        targetHeight: 36,\n        url: \"https://canadaspends.ca\",\n    },\n}\n\n// legacy logo optimized for small sizes\nconst smallLogo = {\n    svg: SMALL_LEGACY_LOGO_SVG,\n    width: 51,\n    height: 28,\n    targetHeight: 28,\n}\n\ninterface LogoProps {\n    logo?: LogoOption\n    isLink: boolean\n    heightScale?: number\n    useSmallVersion?: boolean\n}\n\nexport class Logo {\n    props: LogoProps\n    constructor(props: LogoProps) {\n        this.props = props\n    }\n\n    private get logo(): LogoOption {\n        return this.props.logo ?? LogoOption[\"buildcanada-wide\"]\n    }\n\n    private get spec(): LogoAttributes {\n        if (this.props.useSmallVersion && this.logo === LogoOption.legacy) {\n            return smallLogo\n        }\n        return logos[this.logo]\n    }\n\n    private get targetHeight(): number {\n        return (this.props.heightScale ?? 1) * this.spec.targetHeight\n    }\n\n    private get scale(): number {\n        return this.targetHeight / this.spec.height\n    }\n\n    get width(): number {\n        return this.spec.width * this.scale\n    }\n    get height(): number {\n        return this.spec.height * this.scale\n    }\n\n    renderSVG(targetX: number, targetY: number): React.ReactElement {\n        const { scale } = this\n        const svg =\n            (this.spec.svg.match(/<svg>(.*)<\\/svg>/) || \"\")[1] || this.spec.svg\n        return (\n            <g\n                id={makeIdForHumanConsumption(\"logo\")}\n                transform={`translate(${Math.round(\n                    targetX\n                )}, ${targetY}) scale(${parseFloat(scale.toFixed(2))})`}\n                dangerouslySetInnerHTML={{ __html: svg }}\n            />\n        )\n    }\n\n    renderHTML(): React.ReactElement {\n        const { spec } = this\n        const props: React.HTMLAttributes<HTMLElement> = {\n            className: \"logo\",\n            dangerouslySetInnerHTML: { __html: spec.svg },\n            style: { height: `${this.targetHeight}px` },\n        }\n        if (this.props.isLink && spec.url)\n            return (\n                <a {...props} href={spec.url} target=\"_blank\" rel=\"noopener\" />\n            )\n        else return <div {...props} />\n    }\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,kBAAkB;AAC3B,SAAS,iCAAiC;AAU1C,MAAM,QAA4C;AAAA,EAC9C,QAAQ;AAAA,IACJ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACT,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACT,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,KAAK;AAAA,EACT;AAAA,EACA,oBAAoB;AAAA,IAChB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,KAAK;AAAA,EACT;AAAA,EACA,cAAc;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,KAAK;AAAA,EACT;AACJ;AAGA,MAAM,YAAY;AAAA,EACd,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAClB;AASO,MAAM,KAAK;AAAA,EAEd,YAAY,OAAkB;AAC1B,SAAK,QAAQ;AAAA,EACjB;AAAA,EAEA,IAAY,OAAmB;AAC3B,WAAO,KAAK,MAAM,QAAQ,WAAW,kBAAkB;AAAA,EAC3D;AAAA,EAEA,IAAY,OAAuB;AAC/B,QAAI,KAAK,MAAM,mBAAmB,KAAK,SAAS,WAAW,QAAQ;AAC/D,aAAO;AAAA,IACX;AACA,WAAO,MAAM,KAAK,IAAI;AAAA,EAC1B;AAAA,EAEA,IAAY,eAAuB;AAC/B,YAAQ,KAAK,MAAM,eAAe,KAAK,KAAK,KAAK;AAAA,EACrD;AAAA,EAEA,IAAY,QAAgB;AACxB,WAAO,KAAK,eAAe,KAAK,KAAK;AAAA,EACzC;AAAA,EAEA,IAAI,QAAgB;AAChB,WAAO,KAAK,KAAK,QAAQ,KAAK;AAAA,EAClC;AAAA,EACA,IAAI,SAAiB;AACjB,WAAO,KAAK,KAAK,SAAS,KAAK;AAAA,EACnC;AAAA,EAEA,UAAU,SAAiB,SAAqC;AAC5D,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,OACD,KAAK,KAAK,IAAI,MAAM,kBAAkB,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK;AACpE,WACI;AAAA,MAAC;AAAA;AAAA,QACG,IAAI,0BAA0B,MAAM;AAAA,QACpC,WAAW,aAAa,KAAK;AAAA,UACzB;AAAA,QACJ,CAAC,KAAK,OAAO,WAAW,WAAW,MAAM,QAAQ,CAAC,CAAC,CAAC;AAAA,QACpD,yBAAyB,EAAE,QAAQ,IAAI;AAAA;AAAA,IAC3C;AAAA,EAER;AAAA,EAEA,aAAiC;AAC7B,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,QAA2C;AAAA,MAC7C,WAAW;AAAA,MACX,yBAAyB,EAAE,QAAQ,KAAK,IAAI;AAAA,MAC5C,OAAO,EAAE,QAAQ,GAAG,KAAK,YAAY,KAAK;AAAA,IAC9C;AACA,QAAI,KAAK,MAAM,UAAU,KAAK;AAC1B,aACI,oCAAC,OAAG,GAAG,OAAO,MAAM,KAAK,KAAK,QAAO,UAAS,KAAI,YAAW;AAAA,QAEhE,QAAO,oCAAC,SAAK,GAAG,OAAO;AAAA,EAChC;AACJ;",
+  "names": []
+}