@buildcanada/charts 0.3.6 → 0.3.8

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/captionedChart/StaticChartRasterizer.tsx"],
+  "sourcesContent": ["import { sleep } from \"../../utils/index.js\"\n\nexport const EMBEDDED_FONTS_CSS = \"/fonts/embedded.css\"\nexport const IMPORT_FONTS_REGEX = /@import url\\([^)]*?fonts\\.css\\)/\n\nexport interface GrapherExport {\n    url: string\n    blob: Blob\n    svgUrl: string\n    svgBlob: Blob\n}\n\nexport type GrapherRasterizeFn = (options: {\n    includeDetails: boolean\n}) => Promise<GrapherExport>\n\nexport class StaticChartRasterizer {\n    svg: string\n    width: number\n    height: number\n    format: string\n    canvas: Promise<HTMLCanvasElement>\n    density = 4 // overscaling factor for bitmap generation\n    embeddedFonts = \"\"\n\n    constructor(\n        svg: string,\n        width: number,\n        height: number,\n        format = \"image/png\"\n    ) {\n        this.svg = svg\n        this.width = width\n        this.height = height\n        this.format = format\n\n        // The canvas used for rendering is locked behind a promise that won't resolve\n        // until the embedded fonts css has been loaded and the font faces initialized\n        const canvasElt = document.createElement(\"canvas\")\n        this.canvas = new Promise((resolve) => {\n            fetch(EMBEDDED_FONTS_CSS)\n                .then(async (data) => {\n                    this.embeddedFonts = await data.text()\n                    await this.preloadFonts(canvasElt)\n                    resolve(canvasElt)\n                })\n                .catch((err) => {\n                    console.error(JSON.stringify(err))\n                    resolve(canvasElt)\n                })\n        })\n    }\n\n    private async preloadFonts(canvas: HTMLCanvasElement): Promise<void> {\n        // Even though the font data is inlined in the font-face definitions, the browser may not\n        // have fully loaded the fonts by the time it tries to render to canvas (in which case any\n        // text drawn in non-loaded fonts will simply be invisible). This method will block rendering\n        // for up to ~3.25s (with decelerating polling) or until it verifies that all the fonts in\n        // the `faces` array are ready for use, whichever comes first.\n        const MAX_RETRIES = 10,\n            RETRY_DELAY_MS = 100\n\n        const faces = [\n            { font: \"40px Lato\", offset: 17 },\n            { font: \"bold 40px Lato\", offset: 17 },\n            { font: \"600 75px 'Playfair Display'\", offset: 27 },\n        ]\n\n        for (let retry = 0; retry < MAX_RETRIES; retry++) {\n            const ctx = canvas.getContext(\"2d\", {\n                alpha: false,\n                willReadFrequently: true, // optimizes frequent calls to `getImageData` below\n            })!\n            const outcomes: boolean[] = []\n\n            for (const { font, offset } of faces) {\n                // draw a bullet character that's big enough to fill the entire 10\u00D710 canvas\n                const testBlob = blobFromSVG(\n                        `<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" style=\"font:${font};\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\">\n                         <defs><style>${this.embeddedFonts}</style></defs>\n                         <text x=\"5.0\" y=\"${offset}.0\" text-anchor=\"middle\" fill=\"white\">\u2022</text>\n                         </svg>`\n                    ),\n                    testUrl = await urlFromBlob(testBlob),\n                    testImage = await imageFromUrl(testUrl)\n\n                canvas.width = 10\n                canvas.height = 10\n                ctx.drawImage(testImage, 0, 0)\n\n                // ensure that all the pixels have been painted opaque white; if the font hasn't loaded yet,\n                // nothing will be drawn and the pixels will all be transparent black\n                const pixels = ctx.getImageData(0, 0, 10, 10)?.data ?? [],\n                    didDraw = pixels.length && pixels.every((ch) => ch === 255)\n                outcomes.push(!!didDraw)\n            }\n\n            // check that all the fonts rendered correctly and exit if so\n            if (outcomes.every((result) => result)) return\n\n            // otherwise, keep retrying until we reach the time limit\n            console.warn(\n                \"preloading fonts...\",\n                faces.filter((_f, i) => !outcomes[i]).map((f) => f.font)\n            )\n            await sleep(RETRY_DELAY_MS + (retry * RETRY_DELAY_MS) / 2)\n        }\n\n        // if the function didn't return from within the loop, the embedded fonts aren't usable\n        // so don't try to insert them when rendering the chart\n        this.embeddedFonts = \"\"\n    }\n\n    async render(): Promise<GrapherExport> {\n        // await the canvas before doing anything else to make sure .preloadFonts() has completed\n        const canvas = await this.canvas,\n            ctx = canvas.getContext(\"2d\", { alpha: false })!\n\n        // create an Image object using the chart's svg, but with embedded fonts swapped in for\n        // its external `fonts.css` stylesheet\n        const svgImage = await imageFromUrl(\n            await urlFromBlob(\n                blobFromSVG(\n                    this.svg.replace(IMPORT_FONTS_REGEX, this.embeddedFonts)\n                )\n            )\n        )\n\n        // render the bitmap version\n        const { width, height, density, format } = this\n        canvas.width = width * density\n        canvas.height = height * density\n        ctx.imageSmoothingEnabled = false\n        ctx.setTransform(density, 0, 0, density, 0, 0)\n        ctx.drawImage(svgImage, 0, 0)\n\n        // package the svg version\n        const svgBlob = blobFromSVG(this.svg),\n            svgUrl = await urlFromBlob(svgBlob)\n\n        return new Promise((res, rej) => {\n            try {\n                const url = canvas.toDataURL(format)\n                canvas.toBlob((blob) => {\n                    if (blob) res({ url, blob, svgUrl, svgBlob })\n                    else rej(new Error(\"Failed to generate bitmap blob\"))\n                })\n            } catch (err) {\n                rej(err)\n            }\n        })\n    }\n}\n\n//\n// Format converters\n//\n\nconst blobFromSVG = (svg: string): Blob =>\n    new Blob([svg], { type: \"image/svg+xml;charset=utf-8\" })\n\nconst urlFromBlob = (blob: Blob): Promise<string> =>\n    new Promise((res, rej) => {\n        const reader = new FileReader()\n        reader.onload = (ev: any): void => {\n            res(ev.target.result as string)\n        }\n        reader.onerror = rej\n        reader.readAsDataURL(blob)\n    })\n\nconst imageFromUrl = (url: string): Promise<HTMLImageElement> =>\n    new Promise((res, rej) => {\n        const image = new Image()\n        image.onload = (): void => res(image)\n        image.onerror = rej\n        image.src = url\n    })\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/grapher/chart/Chart.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { GrapherState } from "../core/GrapherState.js";
+export declare class Chart extends React.Component<{
+    manager: GrapherState;
+}> {
+    constructor(props: {
+        manager: GrapherState;
+    });
+    private get manager();
+    private get isCaptioned();
+    private renderInteractive;
+    private renderStatic;
+    render(): React.ReactElement;
+}
+//# sourceMappingURL=Chart.d.ts.map

package/dist/grapher/chart/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/grapher/chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAKtD,qBACa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC;IACvC,OAAO,EAAE,YAAY,CAAA;CACxB,CAAC;gBACc,KAAK,EAAE;QAAE,OAAO,EAAE,YAAY,CAAA;KAAE;IAKlC,OAAO,KAAK,OAAO,GAE5B;IAES,OAAO,KAAK,WAAW,GAEhC;IAED,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,YAAY;IAgBX,MAAM,IAAI,KAAK,CAAC,YAAY;CAKxC"}

package/dist/grapher/chart/Chart.js

@@ -0,0 +1,72 @@
+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 React from "react";
+import { computed, makeObservable } from "mobx";
+import { observer } from "mobx-react";
+import {
+  CaptionedChart,
+  StaticCaptionedChart
+} from "../captionedChart/CaptionedChart.js";
+import { ChartAreaContent } from "./ChartAreaContent.js";
+import { StaticChartWrapper } from "./StaticChartWrapper.js";
+import { GrapherVariant } from "../../types/index.js";
+let Chart = class extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get isCaptioned() {
+    return this.manager.variant === GrapherVariant.Default;
+  }
+  renderInteractive() {
+    return this.isCaptioned ? /* @__PURE__ */ React.createElement(CaptionedChart, { manager: this.manager }) : /* @__PURE__ */ React.createElement(
+      ChartAreaContent,
+      {
+        manager: this.manager,
+        bounds: this.manager.chartAreaBounds
+      }
+    );
+  }
+  renderStatic() {
+    return this.isCaptioned ? /* @__PURE__ */ React.createElement(StaticCaptionedChart, { manager: this.manager }) : /* @__PURE__ */ React.createElement(
+      StaticChartWrapper,
+      {
+        manager: this.manager,
+        bounds: this.manager.chartAreaBounds
+      },
+      /* @__PURE__ */ React.createElement(
+        ChartAreaContent,
+        {
+          manager: this.manager,
+          bounds: this.manager.chartAreaBounds
+        }
+      )
+    );
+  }
+  render() {
+    return this.manager.isStatic ? this.renderStatic() : this.renderInteractive();
+  }
+};
+__decorateClass([
+  computed
+], Chart.prototype, "manager", 1);
+__decorateClass([
+  computed
+], Chart.prototype, "isCaptioned", 1);
+Chart = __decorateClass([
+  observer
+], Chart);
+export {
+  Chart
+};

package/dist/grapher/chart/Chart.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/chart/Chart.tsx"],
+  "sourcesContent": ["import React from \"react\"\nimport { computed, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport {\n    CaptionedChart,\n    StaticCaptionedChart,\n} from \"../captionedChart/CaptionedChart.js\"\nimport { GrapherState } from \"../core/GrapherState.js\"\nimport { ChartAreaContent } from \"./ChartAreaContent.js\"\nimport { StaticChartWrapper } from \"./StaticChartWrapper.js\"\nimport { GrapherVariant } from \"../../types/index.js\"\n\n@observer\nexport class Chart extends React.Component<{\n    manager: GrapherState\n}> {\n    constructor(props: { manager: GrapherState }) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed private get manager(): GrapherState {\n        return this.props.manager\n    }\n\n    @computed private get isCaptioned(): boolean {\n        return this.manager.variant === GrapherVariant.Default\n    }\n\n    private renderInteractive(): React.ReactElement {\n        return this.isCaptioned ? (\n            <CaptionedChart manager={this.manager} />\n        ) : (\n            <ChartAreaContent\n                manager={this.manager}\n                bounds={this.manager.chartAreaBounds}\n            />\n        )\n    }\n\n    private renderStatic(): React.ReactElement {\n        return this.isCaptioned ? (\n            <StaticCaptionedChart manager={this.manager} />\n        ) : (\n            <StaticChartWrapper\n                manager={this.manager}\n                bounds={this.manager.chartAreaBounds}\n            >\n                <ChartAreaContent\n                    manager={this.manager}\n                    bounds={this.manager.chartAreaBounds}\n                />\n            </StaticChartWrapper>\n        )\n    }\n\n    override render(): React.ReactElement {\n        return this.manager.isStatic\n            ? this.renderStatic()\n            : this.renderInteractive()\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;AAAA,OAAO,WAAW;AAClB,SAAS,UAAU,sBAAsB;AACzC,SAAS,gBAAgB;AACzB;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAGxB,IAAM,QAAN,cAAoB,MAAM,UAE9B;AAAA,EACC,YAAY,OAAkC;AAC1C,UAAM,KAAK;AACX,mBAAe,IAAI;AAAA,EACvB;AAAA,EAEU,IAAY,UAAwB;AAC1C,WAAO,KAAK,MAAM;AAAA,EACtB;AAAA,EAEU,IAAY,cAAuB;AACzC,WAAO,KAAK,QAAQ,YAAY,eAAe;AAAA,EACnD;AAAA,EAEQ,oBAAwC;AAC5C,WAAO,KAAK,cACR,oCAAC,kBAAe,SAAS,KAAK,SAAS,IAEvC;AAAA,MAAC;AAAA;AAAA,QACG,SAAS,KAAK;AAAA,QACd,QAAQ,KAAK,QAAQ;AAAA;AAAA,IACzB;AAAA,EAER;AAAA,EAEQ,eAAmC;AACvC,WAAO,KAAK,cACR,oCAAC,wBAAqB,SAAS,KAAK,SAAS,IAE7C;AAAA,MAAC;AAAA;AAAA,QACG,SAAS,KAAK;AAAA,QACd,QAAQ,KAAK,QAAQ;AAAA;AAAA,MAErB;AAAA,QAAC;AAAA;AAAA,UACG,SAAS,KAAK;AAAA,UACd,QAAQ,KAAK,QAAQ;AAAA;AAAA,MACzB;AAAA,IACJ;AAAA,EAER;AAAA,EAES,SAA6B;AAClC,WAAO,KAAK,QAAQ,WACd,KAAK,aAAa,IAClB,KAAK,kBAAkB;AAAA,EACjC;AACJ;AAxC0B;AAAA,EAArB;AAAA,GARQ,MAQa;AAIA;AAAA,EAArB;AAAA,GAZQ,MAYa;AAZb,QAAN;AAAA,EADN;AAAA,GACY;",
+  "names": []
+}

package/dist/grapher/chart/ChartAreaContent.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { Bounds } from "../../utils/index.js";
+import { CaptionedChartManager } from "../captionedChart/CaptionedChart.js";
+interface ChartAreaContentProps {
+    manager: CaptionedChartManager;
+    bounds: Bounds;
+    padWidth?: number;
+}
+export declare class ChartAreaContent extends React.Component<ChartAreaContentProps> {
+    constructor(props: ChartAreaContentProps);
+    private get manager();
+    private get bounds();
+    private get activeChartOrMapType();
+    private renderNoDataPattern;
+    private get chartState();
+    private renderLoadingIndicatorIntoSvg;
+    private renderReadyChartOrMap;
+    private renderChartOrMap;
+    private renderDataTable;
+    renderStatic(): React.ReactElement | null;
+    renderInteractive(): React.ReactElement | null;
+    render(): React.ReactElement | null;
+}
+export {};
+//# sourceMappingURL=ChartAreaContent.d.ts.map

package/dist/grapher/chart/ChartAreaContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAreaContent.d.ts","sourceRoot":"","sources":["../../../src/grapher/chart/ChartAreaContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EACH,MAAM,EAIT,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAS3E,UAAU,qBAAqB;IAC3B,OAAO,EAAE,qBAAqB,CAAA;IAC9B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,qBACa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;gBAC5D,KAAK,EAAE,qBAAqB;IAK9B,OAAO,KAAK,OAAO,GAE5B;IAES,OAAO,KAAK,MAAM,GAE3B;IAES,OAAO,KAAK,oBAAoB,GAQzC;IAED,OAAO,CAAC,mBAAmB;IAQjB,OAAO,KAAK,UAAU,GAG/B;IAED,OAAO,CAAC,6BAA6B;IAQrC,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,gBAAgB;IA0BxB,OAAO,CAAC,eAAe;IAmBvB,YAAY,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI;IAezC,iBAAiB,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI;IAMrC,MAAM,IAAI,KAAK,CAAC,YAAY,GAAG,IAAI;CAK/C"}

package/dist/grapher/chart/ChartAreaContent.js

@@ -0,0 +1,144 @@
+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 React from "react";
+import { observer } from "mobx-react";
+import { computed, makeObservable } from "mobx";
+import {
+  GRAPHER_MAP_TYPE,
+  makeIdForHumanConsumption
+} from "../../utils/index.js";
+import { DataTable } from "../dataTable/DataTable.js";
+import { LoadingIndicator } from "../../components/index.js";
+import { FacetChart } from "../facet/FacetChart.js";
+import { getChartSvgProps, NoDataPattern } from "./ChartUtils.js";
+import { ChartComponent, makeChartState } from "./ChartTypeMap.js";
+import { GRAPHER_CHART_AREA_CLASS } from "../core/GrapherConstants.js";
+import { FacetMap } from "../facet/FacetMap.js";
+let ChartAreaContent = class extends React.Component {
+  constructor(props) {
+    super(props);
+    makeObservable(this);
+  }
+  get manager() {
+    return this.props.manager;
+  }
+  get bounds() {
+    return this.props.bounds.padWidth(this.props.padWidth ?? 0);
+  }
+  get activeChartOrMapType() {
+    const { manager } = this;
+    if (manager.isOnTableTab) return void 0;
+    if (manager.isOnMapTab) return GRAPHER_MAP_TYPE;
+    if (manager.isOnChartTab) return manager.activeChartType;
+    return void 0;
+  }
+  renderNoDataPattern() {
+    return /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(NoDataPattern, null));
+  }
+  get chartState() {
+    if (!this.activeChartOrMapType) return void 0;
+    return makeChartState(this.activeChartOrMapType, this.manager);
+  }
+  renderLoadingIndicatorIntoSvg() {
+    return /* @__PURE__ */ React.createElement("foreignObject", { ...this.bounds.toProps() }, /* @__PURE__ */ React.createElement(LoadingIndicator, { title: this.manager.whatAreWeWaitingFor }));
+  }
+  renderReadyChartOrMap() {
+    const { bounds, manager, activeChartOrMapType, chartState } = this;
+    if (!activeChartOrMapType) return null;
+    if (manager.isFaceted)
+      return activeChartOrMapType === GRAPHER_MAP_TYPE ? /* @__PURE__ */ React.createElement(FacetMap, { bounds, manager }) : /* @__PURE__ */ React.createElement(
+        FacetChart,
+        {
+          bounds,
+          manager,
+          chartTypeName: activeChartOrMapType
+        }
+      );
+    if (!chartState) return null;
+    return /* @__PURE__ */ React.createElement(
+      ChartComponent,
+      {
+        manager,
+        chartType: activeChartOrMapType,
+        chartState,
+        variant: manager.variant,
+        bounds
+      }
+    );
+  }
+  renderChartOrMap() {
+    const { width, height } = this.props.bounds;
+    const containerStyle = {
+      position: "relative",
+      clear: "both",
+      height
+    };
+    return /* @__PURE__ */ React.createElement("div", { style: containerStyle }, /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        ...getChartSvgProps(this.manager),
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`
+      },
+      this.renderNoDataPattern(),
+      this.manager.isReady ? this.renderReadyChartOrMap() : this.renderLoadingIndicatorIntoSvg()
+    ));
+  }
+  renderDataTable() {
+    const { bounds } = this;
+    const containerStyle = {
+      position: "relative",
+      ...bounds.toCSS()
+    };
+    return /* @__PURE__ */ React.createElement("div", { className: "DataTableContainer", style: containerStyle }, this.manager.isReady ? /* @__PURE__ */ React.createElement(DataTable, { bounds, manager: this.manager }) : /* @__PURE__ */ React.createElement(
+      LoadingIndicator,
+      {
+        title: this.manager.whatAreWeWaitingFor
+      }
+    ));
+  }
+  renderStatic() {
+    if (this.manager.isOnTableTab) return null;
+    return /* @__PURE__ */ React.createElement(
+      "g",
+      {
+        id: makeIdForHumanConsumption(GRAPHER_CHART_AREA_CLASS),
+        style: { pointerEvents: "none" }
+      },
+      this.renderReadyChartOrMap()
+    );
+  }
+  renderInteractive() {
+    return this.manager.isOnTableTab ? this.renderDataTable() : this.renderChartOrMap();
+  }
+  render() {
+    return this.manager.isStatic ? this.renderStatic() : this.renderInteractive();
+  }
+};
+__decorateClass([
+  computed
+], ChartAreaContent.prototype, "manager", 1);
+__decorateClass([
+  computed
+], ChartAreaContent.prototype, "bounds", 1);
+__decorateClass([
+  computed
+], ChartAreaContent.prototype, "activeChartOrMapType", 1);
+__decorateClass([
+  computed
+], ChartAreaContent.prototype, "chartState", 1);
+ChartAreaContent = __decorateClass([
+  observer
+], ChartAreaContent);
+export {
+  ChartAreaContent
+};

package/dist/grapher/chart/ChartAreaContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/chart/ChartAreaContent.tsx"],
+  "sourcesContent": ["import React from \"react\"\nimport { observer } from \"mobx-react\"\nimport { computed, makeObservable } from \"mobx\"\nimport {\n    Bounds,\n    GRAPHER_MAP_TYPE,\n    GrapherChartOrMapType,\n    makeIdForHumanConsumption,\n} from \"../../utils/index.js\"\nimport { DataTable } from \"../dataTable/DataTable.js\"\nimport { CaptionedChartManager } from \"../captionedChart/CaptionedChart.js\"\nimport { LoadingIndicator } from \"../../components/index.js\"\nimport { FacetChart } from \"../facet/FacetChart.js\"\nimport { getChartSvgProps, NoDataPattern } from \"./ChartUtils.js\"\nimport { ChartComponent, makeChartState } from \"./ChartTypeMap.js\"\nimport { GRAPHER_CHART_AREA_CLASS } from \"../core/GrapherConstants.js\"\nimport { ChartState } from \"./ChartInterface.js\"\nimport { FacetMap } from \"../facet/FacetMap.js\"\n\ninterface ChartAreaContentProps {\n    manager: CaptionedChartManager\n    bounds: Bounds\n    padWidth?: number\n}\n\n@observer\nexport class ChartAreaContent extends React.Component<ChartAreaContentProps> {\n    constructor(props: ChartAreaContentProps) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed private get manager(): CaptionedChartManager {\n        return this.props.manager\n    }\n\n    @computed private get bounds(): Bounds {\n        return this.props.bounds.padWidth(this.props.padWidth ?? 0)\n    }\n\n    @computed private get activeChartOrMapType():\n        | GrapherChartOrMapType\n        | undefined {\n        const { manager } = this\n        if (manager.isOnTableTab) return undefined\n        if (manager.isOnMapTab) return GRAPHER_MAP_TYPE\n        if (manager.isOnChartTab) return manager.activeChartType\n        return undefined\n    }\n\n    private renderNoDataPattern(): React.ReactElement {\n        return (\n            <defs>\n                <NoDataPattern />\n            </defs>\n        )\n    }\n\n    @computed private get chartState(): ChartState | undefined {\n        if (!this.activeChartOrMapType) return undefined\n        return makeChartState(this.activeChartOrMapType, this.manager)\n    }\n\n    private renderLoadingIndicatorIntoSvg(): React.ReactElement {\n        return (\n            <foreignObject {...this.bounds.toProps()}>\n                <LoadingIndicator title={this.manager.whatAreWeWaitingFor} />\n            </foreignObject>\n        )\n    }\n\n    private renderReadyChartOrMap(): React.ReactElement | null {\n        const { bounds, manager, activeChartOrMapType, chartState } = this\n\n        if (!activeChartOrMapType) return null\n\n        if (manager.isFaceted)\n            return activeChartOrMapType === GRAPHER_MAP_TYPE ? (\n                <FacetMap bounds={bounds} manager={manager} />\n            ) : (\n                <FacetChart\n                    bounds={bounds}\n                    manager={manager}\n                    chartTypeName={activeChartOrMapType}\n                />\n            )\n\n        if (!chartState) return null\n\n        return (\n            <ChartComponent\n                manager={manager}\n                chartType={activeChartOrMapType}\n                chartState={chartState}\n                variant={manager.variant}\n                bounds={bounds}\n            />\n        )\n    }\n\n    private renderChartOrMap(): React.ReactElement {\n        const { width, height } = this.props.bounds\n\n        const containerStyle: React.CSSProperties = {\n            position: \"relative\",\n            clear: \"both\",\n            height,\n        }\n\n        return (\n            <div style={containerStyle}>\n                <svg\n                    {...getChartSvgProps(this.manager)}\n                    width={width}\n                    height={height}\n                    viewBox={`0 0 ${width} ${height}`}\n                >\n                    {this.renderNoDataPattern()}\n                    {this.manager.isReady\n                        ? this.renderReadyChartOrMap()\n                        : this.renderLoadingIndicatorIntoSvg()}\n                </svg>\n            </div>\n        )\n    }\n\n    private renderDataTable(): React.ReactElement {\n        const { bounds } = this\n        const containerStyle: React.CSSProperties = {\n            position: \"relative\",\n            ...bounds.toCSS(),\n        }\n        return (\n            <div className=\"DataTableContainer\" style={containerStyle}>\n                {this.manager.isReady ? (\n                    <DataTable bounds={bounds} manager={this.manager} />\n                ) : (\n                    <LoadingIndicator\n                        title={this.manager.whatAreWeWaitingFor}\n                    />\n                )}\n            </div>\n        )\n    }\n\n    renderStatic(): React.ReactElement | null {\n        // We cannot render a table to svg, but would rather display nothing at all to avoid issues.\n        // See # legacy issue 3283\n        if (this.manager.isOnTableTab) return null\n\n        return (\n            <g\n                id={makeIdForHumanConsumption(GRAPHER_CHART_AREA_CLASS)}\n                style={{ pointerEvents: \"none\" }}\n            >\n                {this.renderReadyChartOrMap()}\n            </g>\n        )\n    }\n\n    renderInteractive(): React.ReactElement | null {\n        return this.manager.isOnTableTab\n            ? this.renderDataTable()\n            : this.renderChartOrMap()\n    }\n\n    override render(): React.ReactElement | null {\n        return this.manager.isStatic\n            ? this.renderStatic()\n            : this.renderInteractive()\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/grapher/chart/ChartDimension.d.ts

@@ -0,0 +1,27 @@
+import { ColumnSlug, DimensionProperty, VariableId, Persistable, VariableDisplayConfig, ChartDimensionInterface, Time, ChartDimensionInterfaceWithMandatorySlug } from "../../utils/index.js";
+import { ChartsTable, CoreColumn } from "../../core-table/index.js";
+declare class ChartDimensionDefaults implements ChartDimensionInterface {
+    property: DimensionProperty;
+    variableId: VariableId;
+    display: VariableDisplayConfig;
+    targetYear: Time | undefined;
+    constructor();
+}
+export interface LegacyDimensionsManager {
+    table: ChartsTable;
+}
+export declare function getDimensionColumnSlug(variableId: VariableId, targetYear: Time | undefined): ColumnSlug;
+export declare class ChartDimension extends ChartDimensionDefaults implements Persistable, ChartDimensionInterfaceWithMandatorySlug {
+    private manager;
+    constructor(obj: ChartDimensionInterface, manager: LegacyDimensionsManager);
+    private get table();
+    updateFromObject(obj: ChartDimensionInterface): void;
+    toObject(): ChartDimensionInterface;
+    _slug: ColumnSlug | undefined;
+    get slug(): ColumnSlug;
+    set slug(value: ColumnSlug | undefined);
+    get column(): CoreColumn;
+    get columnSlug(): string;
+}
+export {};
+//# sourceMappingURL=ChartDimension.d.ts.map

package/dist/grapher/chart/ChartDimension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDimension.d.ts","sourceRoot":"","sources":["../../../src/grapher/chart/ChartDimension.ts"],"names":[],"mappings":"AAIA,OAAO,EAEH,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EAGX,qBAAqB,EACrB,uBAAuB,EACvB,IAAI,EACJ,wCAAwC,EAC3C,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAInE,cAAM,sBAAuB,YAAW,uBAAuB;IAC3D,QAAQ,EAAG,iBAAiB,CAAA;IAC5B,UAAU,EAAG,UAAU,CAAA;IAIvB,OAAO,wBAA8B;IAGrC,UAAU,EAAE,IAAI,GAAG,SAAS,CAAY;;CAU3C;AAGD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,WAAW,CAAA;CACrB;AAED,wBAAgB,sBAAsB,CAClC,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,IAAI,GAAG,SAAS,GAC7B,UAAU,CAGZ;AAED,qBAAa,cACT,SAAQ,sBACR,YAAW,WAAW,EAAE,wCAAwC;IAEhE,OAAO,CAAC,OAAO,CAAyB;gBAGpC,GAAG,EAAE,uBAAuB,EAC5B,OAAO,EAAE,uBAAuB;IAW1B,OAAO,KAAK,KAAK,GAE1B;IAED,gBAAgB,CAAC,GAAG,EAAE,uBAAuB,GAAG,IAAI;IASpD,QAAQ,IAAI,uBAAuB;IAenC,KAAK,EAAE,UAAU,GAAG,SAAS,CAAY;IAEzC,IAAc,IAAI,IAAI,UAAU,CAG/B;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,EAErC;IAED,IAAc,MAAM,IAAI,UAAU,CAEjC;IAED,IAAc,UAAU,IAAI,MAAM,CAEjC;CACJ"}

package/dist/grapher/chart/ChartDimension.js

@@ -0,0 +1,100 @@
+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 { observable, computed, makeObservable } from "mobx";
+import {
+  trimObject,
+  deleteRuntimeAndUnchangedProps,
+  updatePersistables,
+  VariableDisplayConfig
+} from "../../utils/index.js";
+class ChartDimensionDefaults {
+  constructor() {
+    // check on: malaria-deaths-comparisons and computing-efficiency
+    this.display = new VariableDisplayConfig();
+    // todo: make persistable
+    // XXX move this somewhere else, it's only used for scatter x override and Marimekko override
+    this.targetYear = void 0;
+    makeObservable(this, {
+      property: observable,
+      variableId: observable,
+      display: observable,
+      targetYear: observable
+    });
+  }
+}
+function getDimensionColumnSlug(variableId, targetYear) {
+  if (targetYear) return `${variableId}-${targetYear}`;
+  return variableId.toString();
+}
+class ChartDimension extends ChartDimensionDefaults {
+  constructor(obj, manager) {
+    super();
+    // Do not persist yet, until we migrate off VariableIds
+    this._slug = void 0;
+    makeObservable(this, {
+      _slug: observable
+    });
+    this.manager = manager;
+    if (obj) this.updateFromObject(obj);
+  }
+  get table() {
+    return this.manager.table;
+  }
+  updateFromObject(obj) {
+    if (obj.display) updatePersistables(this, { display: obj.display });
+    this.targetYear = obj.targetYear;
+    this.variableId = obj.variableId;
+    this.property = obj.property;
+    this.slug = obj.slug;
+  }
+  toObject() {
+    return trimObject(
+      deleteRuntimeAndUnchangedProps(
+        {
+          property: this.property,
+          variableId: this.variableId,
+          display: this.display,
+          targetYear: this.targetYear
+        },
+        new ChartDimensionDefaults()
+      )
+    );
+  }
+  get slug() {
+    if (this._slug) return this._slug;
+    return getDimensionColumnSlug(this.variableId, this.targetYear);
+  }
+  set slug(value) {
+    this._slug = value;
+  }
+  get column() {
+    return this.table.get(this.columnSlug);
+  }
+  get columnSlug() {
+    return this.slug ?? this.variableId.toString();
+  }
+}
+__decorateClass([
+  computed
+], ChartDimension.prototype, "table", 1);
+__decorateClass([
+  computed
+], ChartDimension.prototype, "slug", 1);
+__decorateClass([
+  computed
+], ChartDimension.prototype, "column", 1);
+__decorateClass([
+  computed
+], ChartDimension.prototype, "columnSlug", 1);
+export {
+  ChartDimension,
+  getDimensionColumnSlug
+};

package/dist/grapher/chart/ChartDimension.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/chart/ChartDimension.ts"],
+  "sourcesContent": ["// Todo: remove this.\n// Any display changes really can be computed columns. And then charts just need xColumnSlug, sizeColumnSlug, yColumnSlug (or yColumnSlugs) et cetera\n\nimport { observable, computed, makeObservable } from \"mobx\"\nimport {\n    trimObject,\n    ColumnSlug,\n    DimensionProperty,\n    VariableId,\n    Persistable,\n    deleteRuntimeAndUnchangedProps,\n    updatePersistables,\n    VariableDisplayConfig,\n    ChartDimensionInterface,\n    Time,\n    ChartDimensionInterfaceWithMandatorySlug,\n} from \"../../utils/index.js\"\nimport { ChartsTable, CoreColumn } from \"../../core-table/index.js\"\n\n// A chart \"dimension\" represents a binding between a chart\n// and a particular variable that it requests as data\nclass ChartDimensionDefaults implements ChartDimensionInterface {\n    property!: DimensionProperty\n    variableId!: VariableId\n\n    // check on: malaria-deaths-comparisons and computing-efficiency\n\n    display = new VariableDisplayConfig() // todo: make persistable\n\n    // XXX move this somewhere else, it's only used for scatter x override and Marimekko override\n    targetYear: Time | undefined = undefined\n\n    constructor() {\n        makeObservable(this, {\n            property: observable,\n            variableId: observable,\n            display: observable,\n            targetYear: observable,\n        })\n    }\n}\n\n// todo: remove when we remove dimensions\nexport interface LegacyDimensionsManager {\n    table: ChartsTable\n}\n\nexport function getDimensionColumnSlug(\n    variableId: VariableId,\n    targetYear: Time | undefined\n): ColumnSlug {\n    if (targetYear) return `${variableId}-${targetYear}`\n    return variableId.toString()\n}\n\nexport class ChartDimension\n    extends ChartDimensionDefaults\n    implements Persistable, ChartDimensionInterfaceWithMandatorySlug\n{\n    private manager: LegacyDimensionsManager\n\n    constructor(\n        obj: ChartDimensionInterface,\n        manager: LegacyDimensionsManager\n    ) {\n        super()\n\n        makeObservable(this, {\n            _slug: observable,\n        })\n        this.manager = manager\n        if (obj) this.updateFromObject(obj)\n    }\n\n    @computed private get table(): ChartsTable {\n        return this.manager.table\n    }\n\n    updateFromObject(obj: ChartDimensionInterface): void {\n        if (obj.display) updatePersistables(this, { display: obj.display })\n\n        this.targetYear = obj.targetYear\n        this.variableId = obj.variableId\n        this.property = obj.property\n        this.slug = obj.slug\n    }\n\n    toObject(): ChartDimensionInterface {\n        return trimObject(\n            deleteRuntimeAndUnchangedProps(\n                {\n                    property: this.property,\n                    variableId: this.variableId,\n                    display: this.display,\n                    targetYear: this.targetYear,\n                },\n                new ChartDimensionDefaults()\n            )\n        )\n    }\n\n    // Do not persist yet, until we migrate off VariableIds\n    _slug: ColumnSlug | undefined = undefined\n\n    @computed get slug(): ColumnSlug {\n        if (this._slug) return this._slug\n        return getDimensionColumnSlug(this.variableId, this.targetYear)\n    }\n\n    set slug(value: ColumnSlug | undefined) {\n        this._slug = value\n    }\n\n    @computed get column(): CoreColumn {\n        return this.table.get(this.columnSlug)\n    }\n\n    @computed get columnSlug(): string {\n        return this.slug ?? this.variableId.toString()\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;AAGA,SAAS,YAAY,UAAU,sBAAsB;AACrD;AAAA,EACI;AAAA,EAKA;AAAA,EACA;AAAA,EACA;AAAA,OAIG;AAKP,MAAM,uBAA0D;AAAA,EAW5D,cAAc;AALd;AAAA,mBAAU,IAAI,sBAAsB;AAGpC;AAAA;AAAA,sBAA+B;AAG3B,mBAAe,MAAM;AAAA,MACjB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,CAAC;AAAA,EACL;AACJ;AAOO,SAAS,uBACZ,YACA,YACU;AACV,MAAI,WAAY,QAAO,GAAG,UAAU,IAAI,UAAU;AAClD,SAAO,WAAW,SAAS;AAC/B;AAEO,MAAM,uBACD,uBAEZ;AAAA,EAGI,YACI,KACA,SACF;AACE,UAAM;AAqCV;AAAA,iBAAgC;AAnC5B,mBAAe,MAAM;AAAA,MACjB,OAAO;AAAA,IACX,CAAC;AACD,SAAK,UAAU;AACf,QAAI,IAAK,MAAK,iBAAiB,GAAG;AAAA,EACtC;AAAA,EAEU,IAAY,QAAqB;AACvC,WAAO,KAAK,QAAQ;AAAA,EACxB;AAAA,EAEA,iBAAiB,KAAoC;AACjD,QAAI,IAAI,QAAS,oBAAmB,MAAM,EAAE,SAAS,IAAI,QAAQ,CAAC;AAElE,SAAK,aAAa,IAAI;AACtB,SAAK,aAAa,IAAI;AACtB,SAAK,WAAW,IAAI;AACpB,SAAK,OAAO,IAAI;AAAA,EACpB;AAAA,EAEA,WAAoC;AAChC,WAAO;AAAA,MACH;AAAA,QACI;AAAA,UACI,UAAU,KAAK;AAAA,UACf,YAAY,KAAK;AAAA,UACjB,SAAS,KAAK;AAAA,UACd,YAAY,KAAK;AAAA,QACrB;AAAA,QACA,IAAI,uBAAuB;AAAA,MAC/B;AAAA,IACJ;AAAA,EACJ;AAAA,EAKU,IAAI,OAAmB;AAC7B,QAAI,KAAK,MAAO,QAAO,KAAK;AAC5B,WAAO,uBAAuB,KAAK,YAAY,KAAK,UAAU;AAAA,EAClE;AAAA,EAEA,IAAI,KAAK,OAA+B;AACpC,SAAK,QAAQ;AAAA,EACjB;AAAA,EAEU,IAAI,SAAqB;AAC/B,WAAO,KAAK,MAAM,IAAI,KAAK,UAAU;AAAA,EACzC;AAAA,EAEU,IAAI,aAAqB;AAC/B,WAAO,KAAK,QAAQ,KAAK,WAAW,SAAS;AAAA,EACjD;AACJ;AA9C0B;AAAA,EAArB;AAAA,GAnBQ,eAmBa;AA8BR;AAAA,EAAb;AAAA,GAjDQ,eAiDK;AASA;AAAA,EAAb;AAAA,GA1DQ,eA0DK;AAIA;AAAA,EAAb;AAAA,GA9DQ,eA8DK;",
+  "names": []
+}

package/dist/grapher/chart/ChartInterface.d.ts

@@ -0,0 +1,61 @@
+import { ChartsTable } from "../../core-table/index.js";
+import { FacetStrategy, SeriesName, SeriesStrategy, Color, ChartErrorInfo } from "../../types/index.js";
+import { ColorScale } from "../color/ColorScale.js";
+import { HorizontalAxis, VerticalAxis } from "../axis/Axis.js";
+import { HorizontalColorLegendManager } from "../legend/HorizontalColorLegends.js";
+import { SelectionArray } from "../selection/SelectionArray.js";
+import { FocusArray } from "../focus/FocusArray.js";
+export interface ChartSeries {
+    seriesName: SeriesName;
+    color: Color;
+}
+export type ChartTableTransformer = (inputTable: ChartsTable) => ChartsTable;
+/** Interface implemented by all chart state classes */
+export interface ChartState {
+    /** Fail message(s) to show to the user if something went wrong */
+    errorInfo: ChartErrorInfo;
+    /** ChartsTable coming into the chart */
+    inputTable: ChartsTable;
+    /** ChartsTable after the chart has transformed the input table */
+    transformedTable: ChartsTable;
+    /** Array of selected entities for the chart */
+    selectionArray?: SelectionArray;
+    /** Array of series that should be highlighted or focused */
+    focusArray?: FocusArray;
+    /** Marks that the chart will render. Not placed yet */
+    series: readonly ChartSeries[];
+    /** Strategy for handling multiple data series in the chart */
+    seriesStrategy?: SeriesStrategy;
+    /** Function to transform the input table into the format needed by the chart */
+    transformTable: ChartTableTransformer;
+    /** Optional function to transform the table specifically for the rendered data table */
+    transformTableForDisplay?: ChartTableTransformer;
+    /** Optional function to transform the table specifically for the entity selector */
+    transformTableForSelection?: ChartTableTransformer;
+    /** Color scale used to assign colors to chart elements */
+    colorScale?: ColorScale;
+    /**
+     * Available facet strategies that are supported by this chart type in its
+     * current configuration, if any. Does not necessarily contain
+     * FacetStrategy.None - there are situations where an unfaceted chart
+     * doesn't make sense.
+     */
+    availableFacetStrategies?: FacetStrategy[];
+}
+/** Interface implemented by all chart component classes */
+export interface ChartInterface {
+    chartState: ChartState;
+    yAxis?: HorizontalAxis | VerticalAxis;
+    xAxis?: HorizontalAxis | VerticalAxis;
+    /**
+     * The legend that has been hidden from the chart plot (using `manager.hideLegend`).
+     * Used to create a global legend for faceted charts.
+     */
+    externalLegend?: HorizontalColorLegendManager;
+    /**
+     * Opt-out of assigned colors and use a value-based color scheme instead.
+     * Only relevant for StackedBar charts.
+     */
+    shouldUseValueBasedColorScheme?: boolean;
+}
+//# sourceMappingURL=ChartInterface.d.ts.map

package/dist/grapher/chart/ChartInterface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartInterface.d.ts","sourceRoot":"","sources":["../../../src/grapher/chart/ChartInterface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EACH,aAAa,EACb,UAAU,EACV,cAAc,EACd,KAAK,EACL,cAAc,EACjB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAA;AAClF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAMnD,MAAM,WAAW,WAAW;IACxB,UAAU,EAAE,UAAU,CAAA;IACtB,KAAK,EAAE,KAAK,CAAA;CACf;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,UAAU,EAAE,WAAW,KAAK,WAAW,CAAA;AAE5E,uDAAuD;AACvD,MAAM,WAAW,UAAU;IACvB,kEAAkE;IAClE,SAAS,EAAE,cAAc,CAAA;IAEzB,wCAAwC;IACxC,UAAU,EAAE,WAAW,CAAA;IACvB,kEAAkE;IAClE,gBAAgB,EAAE,WAAW,CAAA;IAE7B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,UAAU,CAAA;IAEvB,uDAAuD;IACvD,MAAM,EAAE,SAAS,WAAW,EAAE,CAAA;IAC9B,8DAA8D;IAC9D,cAAc,CAAC,EAAE,cAAc,CAAA;IAE/B,gFAAgF;IAChF,cAAc,EAAE,qBAAqB,CAAA;IACrC,wFAAwF;IACxF,wBAAwB,CAAC,EAAE,qBAAqB,CAAA;IAChD,oFAAoF;IACpF,0BAA0B,CAAC,EAAE,qBAAqB,CAAA;IAElD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,UAAU,CAAA;IAEvB;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,aAAa,EAAE,CAAA;CAC7C;AAED,2DAA2D;AAC3D,MAAM,WAAW,cAAc;IAC3B,UAAU,EAAE,UAAU,CAAA;IAEtB,KAAK,CAAC,EAAE,cAAc,GAAG,YAAY,CAAA;IACrC,KAAK,CAAC,EAAE,cAAc,GAAG,YAAY,CAAA;IAErC;;;OAGG;IACH,cAAc,CAAC,EAAE,4BAA4B,CAAA;IAE7C;;;OAGG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAA;CAC3C"}

package/dist/grapher/chart/ChartInterface.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/grapher/chart/ChartManager.d.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { EntitySelectionMode, FacetStrategy, SeriesColorMap, SeriesStrategy, MissingDataStrategy, ColorScaleConfigInterface, ComparisonLineConfig, AxisConfigInterface, ColorSchemeName, EntityName, DetailsMarker, Color, GrapherVariant } from "../../types/index.js";
+import { TooltipManager } from "../tooltip/TooltipProps.js";
+import { ChartsTable, CoreColumn } from "../../core-table/index.js";
+import { SelectionArray } from "../selection/SelectionArray.js";
+import { ColumnSlug, SortConfig, TimeBound } from "../../utils/index.js";
+import { ColorScaleBin } from "../color/ColorScaleBin.js";
+import { ColorScale } from "../color/ColorScale.js";
+import { FocusArray } from "../focus/FocusArray.js";
+export interface ChartManager {
+    base?: React.RefObject<SVGGElement | HTMLDivElement | null>;
+    fontSize?: number;
+    table: ChartsTable;
+    transformedTable?: ChartsTable;
+    variant?: GrapherVariant;
+    isDisplayedAlongsideComplementaryTable?: boolean;
+    chartAreaPadding?: number;
+    isExportingToSvgOrPng?: boolean;
+    isRelativeMode?: boolean;
+    comparisonLines?: ComparisonLineConfig[];
+    showLegend?: boolean;
+    tooltip?: TooltipManager["tooltip"];
+    baseColorScheme?: ColorSchemeName;
+    invertColorScheme?: boolean;
+    compareEndPointsOnly?: boolean;
+    zoomToSelection?: boolean;
+    matchingEntitiesOnly?: boolean;
+    colorScale?: Readonly<ColorScaleConfigInterface>;
+    colorScaleColumnOverride?: CoreColumn;
+    colorScaleOverride?: ColorScale;
+    seriesColorMap?: SeriesColorMap;
+    useValueBasedColorScheme?: boolean;
+    yAxisConfig?: Readonly<AxisConfigInterface>;
+    xAxisConfig?: Readonly<AxisConfigInterface>;
+    addCountryMode?: EntitySelectionMode;
+    yColumnSlug?: ColumnSlug;
+    yColumnSlugs?: ColumnSlug[];
+    xColumnSlug?: ColumnSlug;
+    sizeColumnSlug?: ColumnSlug;
+    colorColumnSlug?: ColumnSlug;
+    categoricalColorColumnSlug?: ColumnSlug;
+    numericColorColumnSlug?: ColumnSlug;
+    selection?: SelectionArray | EntityName[];
+    entityType?: string;
+    entityTypePlural?: string;
+    focusArray?: FocusArray;
+    hidePoints?: boolean;
+    startHandleTimeBound?: TimeBound;
+    hideNoDataSection?: boolean;
+    startTime?: number;
+    endTime?: number;
+    facetStrategy?: FacetStrategy;
+    seriesStrategy?: SeriesStrategy;
+    sortConfig?: SortConfig;
+    showNoDataArea?: boolean;
+    externalLegendHoverBin?: ColorScaleBin | undefined;
+    disableIntroAnimation?: boolean;
+    missingDataStrategy?: MissingDataStrategy;
+    isNarrow?: boolean;
+    isStatic?: boolean;
+    isSemiNarrow?: boolean;
+    isStaticAndSmall?: boolean;
+    isExportingForSocialMedia?: boolean;
+    isExportingForWikimedia?: boolean;
+    backgroundColor?: Color;
+    shouldPinTooltipToBottom?: boolean;
+    detailsOrderedByReference?: string[];
+    detailsMarkerInSvg?: DetailsMarker;
+}
+//# sourceMappingURL=ChartManager.d.ts.map

package/dist/grapher/chart/ChartManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartManager.d.ts","sourceRoot":"","sources":["../../../src/grapher/chart/ChartManager.ts"],"names":[],"mappings":"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"}