@buildcanada/charts 0.3.7 → 0.3.8

package/dist/grapher/tooltip/Tooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/tooltip/Tooltip.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { computed, action, makeObservable } from \"mobx\"\nimport { observer } from \"mobx-react\"\nimport { faInfoCircle } from \"@fortawesome/free-solid-svg-icons\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport classnames from \"classnames\"\nimport { match } from \"ts-pattern\"\nimport {\n    Bounds,\n    GrapherTooltipAnchor,\n    stripOuterParentheses,\n} from \"../../utils/index.js\"\nimport {\n    TooltipProps,\n    TooltipManager,\n    TooltipContainerProps,\n    TooltipContext,\n    TooltipFooterIcon,\n} from \"./TooltipProps.js\"\nimport { SignificanceIcon } from \"./TooltipContents.js\"\n\nexport * from \"./TooltipContents.js\"\nexport { TooltipState } from \"./TooltipState.js\"\n\nexport class TooltipCard extends React.Component<\n    TooltipProps & TooltipContainerProps\n> {\n    private base = React.createRef<HTMLDivElement>()\n    private bounds: Bounds | undefined = undefined\n\n    private updateBounds(): void {\n        if (this.base.current) {\n            this.bounds = Bounds.fromElement(this.base.current)\n        }\n    }\n\n    private get tooltipStyle(): React.CSSProperties {\n        const { bounds } = this\n        const {\n            containerBounds,\n            anchor,\n            x = 0,\n            y = 0,\n            offsetX = 0,\n            offsetY = 0,\n        } = this.props\n        const isPinnedToBottom = anchor === GrapherTooltipAnchor.bottom\n\n        const style = { ...this.props.style }\n\n        // if container dimensions are given, we make sure the tooltip\n        // is positioned within the container bounds\n        if (\n            containerBounds?.width &&\n            containerBounds.height &&\n            !isPinnedToBottom\n        ) {\n            let adjustedOffsetY = offsetY\n            let adjustedOffsetX = offsetX\n\n            if (this.props.offsetYDirection === \"upward\") {\n                adjustedOffsetY = -offsetY - (bounds?.height ?? 0)\n            }\n\n            if (\n                this.props.offsetXDirection === \"left\" &&\n                x > (bounds?.width ?? 0)\n            ) {\n                adjustedOffsetX = -offsetX - (bounds?.width ?? 0)\n            }\n\n            // Ensure tooltip remains inside chart\n            let left = x + adjustedOffsetX\n            let top = y + adjustedOffsetY\n            if (bounds) {\n                if (left + bounds.width > containerBounds?.width)\n                    left -= bounds.width + 2 * adjustedOffsetX // flip left\n                if (top + bounds.height * 0.75 > containerBounds.height)\n                    top -= bounds.height + 2 * adjustedOffsetY // flip upwards eventually...\n                if (top + bounds.height > containerBounds.height)\n                    top = containerBounds.height - bounds.height // ...but first pin at bottom\n\n                if (left < 0) left = 0 // pin on left\n                if (top < 0) top = 0 // pin at top\n            }\n\n            style.position = \"absolute\"\n            style.left = left\n            style.top = top\n        }\n\n        // ignore the given width and max-width if the tooltip position is fixed\n        // since we want to use the full width of the screen in that case\n        if (isPinnedToBottom && (style.width || style.maxWidth)) {\n            style.width = style.maxWidth = undefined\n        }\n\n        return style\n    }\n\n    override componentDidMount(): void {\n        this.updateBounds()\n    }\n\n    override componentDidUpdate(): void {\n        this.updateBounds()\n    }\n\n    override render(): React.ReactElement {\n        let {\n            id,\n            title,\n            titleAnnotation,\n            subtitle,\n            subtitleFormat,\n            footer,\n            dissolve,\n            children,\n            anchor,\n        } = this.props\n        const isPinnedToBottom = anchor === GrapherTooltipAnchor.bottom\n\n        // add a preposition to unit-based subtitles\n        const hasHeader = title !== undefined || subtitle !== undefined\n        if (!!subtitle && subtitleFormat === \"unit\") {\n            const unit = subtitle.toString()\n            const preposition = !unit.match(/^(per|in|\\() /i) ? \"in \" : \"\"\n            subtitle = preposition + stripOuterParentheses(unit)\n        }\n\n        // flag the year in the header and add note in footer (if necessary)\n        const timeNotice = !!subtitle && subtitleFormat === \"notice\"\n\n        // style the box differently if just displaying title/subtitle\n        const plain = hasHeader && !children\n\n        // skip transition delay if requested\n        const immediate = dissolve === \"immediate\"\n\n        return (\n            <TooltipContext.Provider value={{ anchor }}>\n                <div\n                    className={classnames(\"tooltip-container\", {\n                        \"fixed-bottom\": isPinnedToBottom,\n                    })}\n                >\n                    <div\n                        ref={this.base}\n                        id={id?.toString()}\n                        role=\"tooltip\"\n                        className={classnames(\"Tooltip\", {\n                            plain,\n                            dissolve,\n                            immediate,\n                        })}\n                        style={this.tooltipStyle}\n                    >\n                        {hasHeader && (\n                            <div className=\"frontmatter\">\n                                {title && (\n                                    <div className=\"title\">\n                                        {title}{\" \"}\n                                        <span className=\"annotation\">\n                                            {titleAnnotation}\n                                        </span>\n                                    </div>\n                                )}\n                                {subtitle && (\n                                    <div className=\"subtitle\">\n                                        {timeNotice && (\n                                            <TooltipIcon\n                                                icon={TooltipFooterIcon.Notice}\n                                            />\n                                        )}\n                                        <span>{subtitle}</span>\n                                    </div>\n                                )}\n                            </div>\n                        )}\n                        <div className=\"content-and-endmatter\">\n                            {children && (\n                                <div className=\"content\">{children}</div>\n                            )}\n                            {footer && footer.length > 0 && (\n                                <div\n                                    className={classnames(\"endmatter\", {\n                                        \"multiple-lines\": footer.length > 1,\n                                    })}\n                                >\n                                    {footer?.map(({ icon, text }) => (\n                                        <div\n                                            key={text}\n                                            className={classnames(\"line\", {\n                                                \"icon-sig\":\n                                                    icon ===\n                                                    TooltipFooterIcon.Significance,\n                                                \"no-icon\":\n                                                    icon ===\n                                                    TooltipFooterIcon.None,\n                                            })}\n                                        >\n                                            <TooltipIcon icon={icon} />\n                                            <p>{text}</p>\n                                        </div>\n                                    ))}\n                                </div>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </TooltipContext.Provider>\n        )\n    }\n}\n\ninterface ManagedTooltipContainerProps extends TooltipContainerProps {\n    tooltipManager: TooltipManager\n}\n\n@observer\nexport class TooltipContainer extends React.Component<ManagedTooltipContainerProps> {\n    constructor(props: ManagedTooltipContainerProps) {\n        super(props)\n        makeObservable(this)\n    }\n\n    @computed private get tooltip(): TooltipProps | undefined {\n        const { tooltip } = this.props.tooltipManager\n        return tooltip?.get()\n    }\n\n    override render(): React.ReactElement | null {\n        const { props, tooltip } = this\n        if (!tooltip) return null\n        return <TooltipCard {...props} {...tooltip} />\n    }\n}\n\ninterface ManagedTooltipProps extends TooltipProps {\n    tooltipManager: TooltipManager\n}\n\n@observer\nexport class Tooltip extends React.Component<ManagedTooltipProps> {\n    constructor(props: ManagedTooltipProps) {\n        super(props)\n        makeObservable(this)\n    }\n\n    override componentDidMount(): void {\n        this.connectTooltipToContainer()\n    }\n\n    @action.bound private connectTooltipToContainer(): void {\n        this.props.tooltipManager.tooltip?.set(this.props)\n    }\n\n    @action.bound private removeToolTipFromContainer(): void {\n        this.props.tooltipManager.tooltip?.set(undefined)\n    }\n\n    override componentDidUpdate(): void {\n        this.connectTooltipToContainer()\n    }\n\n    override componentWillUnmount(): void {\n        this.removeToolTipFromContainer()\n    }\n\n    override render(): null {\n        return null\n    }\n}\n\nfunction TooltipIcon({\n    icon,\n}: {\n    icon: TooltipFooterIcon\n}): React.ReactElement | null {\n    return match(icon)\n        .with(TooltipFooterIcon.Notice, () => (\n            <FontAwesomeIcon className=\"icon\" icon={faInfoCircle} />\n        ))\n        .with(TooltipFooterIcon.Stripes, () => (\n            <div className=\"stripes icon\"></div>\n        ))\n        .with(TooltipFooterIcon.Significance, () => (\n            <div className=\"icon\">\n                <SignificanceIcon />\n            </div>\n        ))\n        .with(TooltipFooterIcon.None, () => null)\n        .exhaustive()\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/grapher/tooltip/TooltipContents.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { TooltipValueProps, TooltipValueRangeProps, TooltipTableProps } from "./TooltipProps.js";
+import { CoreColumn } from "../../core-table/index.js";
+type TooltipValue = number | string | undefined;
+export declare const NO_DATA_COLOR = "#999";
+export declare function TooltipValue({ label, unit, value, color, originalTime, isProjection, labelVariant, isRoundedToSignificantFigures, showSignificanceSuperscript, }: TooltipValueProps): React.ReactElement;
+export declare function TooltipValueRange({ label, unit, values, colors, originalTimes, trend, labelVariant, isRoundedToSignificantFigures, showSignificanceSuperscript, }: TooltipValueRangeProps): React.ReactElement | null;
+export declare function TooltipTable({ columns, rows, totals, }: TooltipTableProps): React.ReactElement | null;
+export declare function SignificanceIcon({ asSuperscript, }: {
+    asSuperscript?: boolean;
+}): React.ReactElement;
+export declare function makeTooltipToleranceNotice(targetYear: string, { plural }?: {
+    plural: boolean;
+}): string;
+export declare function makeTooltipRoundingNotice(numSignificantFigures: number[], { plural }?: {
+    plural: boolean;
+}): string;
+export declare function toTooltipTableColumns(columns: CoreColumn | CoreColumn[]): TooltipTableProps["columns"];
+export declare function formatTooltipRangeValues(values: TooltipValue[], column: CoreColumn): [string, string];
+export {};
+//# sourceMappingURL=TooltipContents.d.ts.map

package/dist/grapher/tooltip/TooltipContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContents.d.ts","sourceRoot":"","sources":["../../../src/grapher/tooltip/TooltipContents.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EACH,iBAAiB,EACjB,sBAAsB,EAEtB,iBAAiB,EAEpB,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAEtD,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;AAE/C,eAAO,MAAM,aAAa,SAAS,CAAA;AAEnC,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,YAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,GAC9B,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAyBxC;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,MAAM,EACN,aAAa,EACb,KAAK,EACL,YAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,GAC9B,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAmCpD;AAiDD,wBAAgB,YAAY,CAAC,EACzB,OAAO,EACP,IAAI,EACJ,MAAW,GACd,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAuI/C;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,aAAqB,GACxB,EAAE;IACC,aAAa,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,KAAK,CAAC,YAAY,CAWrB;AAED,wBAAgB,0BAA0B,CACtC,UAAU,EAAE,MAAM,EAClB,EAAE,MAAM,EAAE,GAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAsB,GACpD,MAAM,CAGR;AAED,wBAAgB,yBAAyB,CACrC,qBAAqB,EAAE,MAAM,EAAE,EAC/B,EAAE,MAAM,EAAE,GAAE;IAAE,MAAM,EAAE,OAAO,CAAA;CAAqB,GACnD,MAAM,CAWR;AAED,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,UAAU,GAAG,UAAU,EAAE,GACnC,iBAAiB,CAAC,SAAS,CAAC,CAQ9B;AAED,wBAAgB,wBAAwB,CACpC,MAAM,EAAE,YAAY,EAAE,EACtB,MAAM,EAAE,UAAU,GACnB,CAAC,MAAM,EAAE,MAAM,CAAC,CAsBlB"}

package/dist/grapher/tooltip/TooltipContents.js

@@ -0,0 +1,232 @@
+import * as _ from "lodash-es";
+import * as React from "react";
+import classnames from "classnames";
+import { NO_DATA_LABEL } from "../color/ColorScale.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faInfoCircle, faS } from "@fortawesome/free-solid-svg-icons";
+import { formatInlineList, GrapherTooltipAnchor } from "../../utils/index.js";
+import { GrapherTrendArrow } from "../../components/index.js";
+import {
+  TooltipContext
+} from "./TooltipProps.js";
+import { makeAxisLabel } from "../chart/ChartUtils.js";
+import * as R from "remeda";
+const NO_DATA_COLOR = "#999";
+function TooltipValue({
+  label,
+  unit,
+  value,
+  color,
+  originalTime,
+  isProjection,
+  labelVariant = "label+unit",
+  isRoundedToSignificantFigures,
+  showSignificanceSuperscript
+}) {
+  const displayValue = value || NO_DATA_LABEL;
+  const displayColor = displayValue === NO_DATA_LABEL ? NO_DATA_COLOR : color;
+  const showSuperscript = showSignificanceSuperscript && isRoundedToSignificantFigures;
+  const superscript = showSuperscript ? /* @__PURE__ */ React.createElement(SignificanceIcon, { asSuperscript: true }) : null;
+  return /* @__PURE__ */ React.createElement(
+    Variable,
+    {
+      label,
+      unit,
+      color: displayColor,
+      isProjection,
+      originalTimes: originalTime ? [originalTime] : void 0,
+      labelVariant
+    },
+    /* @__PURE__ */ React.createElement("span", null, displayValue, superscript)
+  );
+}
+function TooltipValueRange({
+  label,
+  unit,
+  values,
+  colors,
+  originalTimes,
+  trend,
+  labelVariant = "label+unit",
+  isRoundedToSignificantFigures,
+  showSignificanceSuperscript
+}) {
+  const [firstTerm, lastTerm] = values;
+  if (firstTerm === void 0 && lastTerm === void 0) return null;
+  const showSuperscript = showSignificanceSuperscript && isRoundedToSignificantFigures;
+  const superscript = showSuperscript ? /* @__PURE__ */ React.createElement(SignificanceIcon, { asSuperscript: true }) : null;
+  return /* @__PURE__ */ React.createElement(
+    Variable,
+    {
+      label,
+      unit,
+      originalTimes,
+      labelVariant
+    },
+    /* @__PURE__ */ React.createElement("span", { className: "range" }, /* @__PURE__ */ React.createElement("span", { className: "term" }, /* @__PURE__ */ React.createElement("span", { style: { color: colors?.[0] } }, firstTerm), !lastTerm && superscript), trend && /* @__PURE__ */ React.createElement(GrapherTrendArrow, { direction: trend, isColored: !colors }), lastTerm && /* @__PURE__ */ React.createElement("span", { className: "term" }, /* @__PURE__ */ React.createElement("span", { style: { color: colors?.[1] } }, lastTerm), superscript))
+  );
+}
+function Variable({
+  label,
+  unit,
+  children,
+  color,
+  originalTimes,
+  isProjection,
+  labelVariant = "label+unit"
+}) {
+  const { mainLabel: columnName, unit: formattedUnit } = makeAxisLabel({
+    label: label || "",
+    displayUnit: unit
+  });
+  const displayOriginalTimes = _.uniq((originalTimes ?? []).filter((t) => t !== void 0)).join(
+    "\u2013"
+  ) || null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classnames("variable", {
+        "variable--no-name": labelVariant === "unit-only"
+      })
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "definition" }, columnName && /* @__PURE__ */ React.createElement("span", { className: "name" }, columnName), formattedUnit && formattedUnit.length > 1 && /* @__PURE__ */ React.createElement("span", { className: "unit" }, formattedUnit), isProjection && /* @__PURE__ */ React.createElement("span", { className: "projection" }, "projected data")),
+    /* @__PURE__ */ React.createElement("div", { className: "values", style: { color } }, children, displayOriginalTimes && /* @__PURE__ */ React.createElement("span", { className: "time-notice" }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faInfoCircle }), displayOriginalTimes))
+  );
+}
+function TooltipTable({
+  columns,
+  rows,
+  totals = []
+}) {
+  const context = React.useContext(TooltipContext);
+  const focal = rows.some((row) => row.focused);
+  const swatched = rows.some((row) => row.swatch);
+  const tooEmpty = rows.length < 2 || totals.every((value) => value === void 0) || rows.some(({ values }) => values.every((value) => value === void 0));
+  const tooTrivial = R.zip(columns, totals).every(
+    ([column, total]) => !!column?.formatValue(total).match(/^100(\.0+)?%/)
+  );
+  const showTotals = totals && !(tooEmpty || tooTrivial);
+  const showTotalsAtTop = context?.anchor === GrapherTooltipAnchor.bottom;
+  const totalsCells = R.zip(columns, totals).map(([column, total]) => /* @__PURE__ */ React.createElement("td", { key: column?.label, className: "series-value" }, column && total !== void 0 ? column.formatValue(total) : null));
+  return /* @__PURE__ */ React.createElement("table", { className: classnames("series-list", { focal, swatched }) }, columns.length > 1 && /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { className: "series-color" }), /* @__PURE__ */ React.createElement("td", { className: "series-name" }), columns.map((column) => /* @__PURE__ */ React.createElement("td", { className: "series-value", key: column.label }, column.label)))), /* @__PURE__ */ React.createElement("tbody", null, showTotals && showTotalsAtTop && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: "total--top" }, /* @__PURE__ */ React.createElement("td", { className: "series-color" }), /* @__PURE__ */ React.createElement("td", { className: "series-name" }, "Total"), totalsCells), /* @__PURE__ */ React.createElement("tr", { className: "spacer" })), rows.map((row) => {
+    const {
+      name,
+      focused,
+      blurred,
+      striped,
+      annotation,
+      values,
+      originalTime,
+      swatch = {}
+    } = row;
+    const {
+      color: swatchColor = "transparent",
+      opacity: swatchOpacity = 1
+    } = swatch;
+    const [_m, seriesName, seriesParenthetical] = name.trim().match(/^(.*?)(\([^()]*\))?$/) ?? [];
+    return /* @__PURE__ */ React.createElement(
+      "tr",
+      {
+        key: name,
+        className: classnames({
+          focused,
+          blurred,
+          striped
+        })
+      },
+      /* @__PURE__ */ React.createElement("td", { className: "series-color" }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "swatch",
+          style: {
+            backgroundColor: swatchColor,
+            opacity: swatchOpacity
+          }
+        }
+      )),
+      /* @__PURE__ */ React.createElement("td", { className: "series-name" }, seriesName, seriesParenthetical && /* @__PURE__ */ React.createElement("span", { className: "parenthetical" }, seriesParenthetical), annotation && /* @__PURE__ */ React.createElement("span", { className: "annotation" }, annotation)),
+      R.zip(columns, values).map(([column, value]) => {
+        const missing = value === void 0;
+        return column ? /* @__PURE__ */ React.createElement(
+          "td",
+          {
+            key: column.label,
+            className: classnames("series-value", {
+              missing
+            })
+          },
+          !missing && column.formatValue(value)
+        ) : null;
+      }),
+      originalTime && /* @__PURE__ */ React.createElement("td", { className: "time-notice" }, /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faInfoCircle }), " ", originalTime)
+    );
+  }), showTotals && !showTotalsAtTop && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: "spacer" }), /* @__PURE__ */ React.createElement("tr", { className: "total" }, /* @__PURE__ */ React.createElement("td", { className: "series-color" }), /* @__PURE__ */ React.createElement("td", { className: "series-name" }, "Total"), totalsCells))));
+}
+function SignificanceIcon({
+  asSuperscript = false
+}) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classnames("icon-circled-s", {
+        "as-superscript": asSuperscript
+      })
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "circle" }),
+    /* @__PURE__ */ React.createElement(FontAwesomeIcon, { icon: faS })
+  );
+}
+function makeTooltipToleranceNotice(targetYear, { plural } = { plural: false }) {
+  const dataPoint = plural ? "data points" : "data point";
+  return `Data not available for ${targetYear}. Showing closest available ${dataPoint} instead`;
+}
+function makeTooltipRoundingNotice(numSignificantFigures, { plural } = { plural: true }) {
+  const uniqueNumSigFigs = _.uniq(numSignificantFigures);
+  const formattedNumSigFigs = formatInlineList(
+    _.sortBy(uniqueNumSigFigs),
+    "or"
+  );
+  const values = plural ? "Values" : "Value";
+  const are = plural ? "are" : "is";
+  const figures = formattedNumSigFigs === "1" ? "figure" : "figures";
+  return `${values} ${are} rounded to ${formattedNumSigFigs} significant ${figures}`;
+}
+function toTooltipTableColumns(columns) {
+  const columnsArray = Array.isArray(columns) ? columns : [columns];
+  return columnsArray.map((column) => ({
+    label: column.displayName,
+    formatValue: (value) => column.formatValueShort(value, { trailingZeroes: true })
+  }));
+}
+function formatTooltipRangeValues(values, column) {
+  const formatTooltipValueShort = (value) => formatTooltipValue(value, (value2) => column.formatValueShort(value2));
+  const formatTooltipValueShortWithAbbreviations = (value) => formatTooltipValue(
+    value,
+    (value2) => column.formatValueShortWithAbbreviations(value2)
+  );
+  const [firstValue, lastValue] = values.map(
+    (v) => formatTooltipValueShort(v)
+  );
+  const [firstTerm, lastTerm] = (
+    // TODO: would be nicer to actually measure the typeset text but we would need to
+    // add Lato's metrics to the `string-pixel-width` module to use Bounds.forText
+    _.sum([firstValue?.length, lastValue?.length]) > 20 ? values.map((v) => formatTooltipValueShortWithAbbreviations(v)) : [firstValue, lastValue]
+  );
+  return [firstTerm, lastTerm];
+}
+function formatTooltipValue(value, formatValue) {
+  if (value === void 0) return NO_DATA_LABEL;
+  if (typeof value === "string") return value;
+  return formatValue(value);
+}
+export {
+  NO_DATA_COLOR,
+  SignificanceIcon,
+  TooltipTable,
+  TooltipValue,
+  TooltipValueRange,
+  formatTooltipRangeValues,
+  makeTooltipRoundingNotice,
+  makeTooltipToleranceNotice,
+  toTooltipTableColumns
+};

package/dist/grapher/tooltip/TooltipContents.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/tooltip/TooltipContents.tsx"],
+  "sourcesContent": ["import * as _ from \"lodash-es\"\nimport * as React from \"react\"\nimport classnames from \"classnames\"\nimport { NO_DATA_LABEL } from \"../color/ColorScale.js\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { faInfoCircle, faS } from \"@fortawesome/free-solid-svg-icons\"\nimport { formatInlineList, GrapherTooltipAnchor } from \"../../utils/index.js\"\nimport { GrapherTrendArrow } from \"../../components/index.js\"\nimport {\n    TooltipValueProps,\n    TooltipValueRangeProps,\n    TooltipContext,\n    TooltipTableProps,\n    TooltipVariableProps,\n} from \"./TooltipProps.js\"\nimport { makeAxisLabel } from \"../chart/ChartUtils.js\"\nimport * as R from \"remeda\"\nimport { CoreColumn } from \"../../core-table/index.js\"\n\ntype TooltipValue = number | string | undefined\n\nexport const NO_DATA_COLOR = \"#999\"\n\nexport function TooltipValue({\n    label,\n    unit,\n    value,\n    color,\n    originalTime,\n    isProjection,\n    labelVariant = \"label+unit\",\n    isRoundedToSignificantFigures,\n    showSignificanceSuperscript,\n}: TooltipValueProps): React.ReactElement {\n    const displayValue = value || NO_DATA_LABEL\n    const displayColor = displayValue === NO_DATA_LABEL ? NO_DATA_COLOR : color\n\n    const showSuperscript =\n        showSignificanceSuperscript && isRoundedToSignificantFigures\n    const superscript = showSuperscript ? (\n        <SignificanceIcon asSuperscript={true} />\n    ) : null\n\n    return (\n        <Variable\n            label={label}\n            unit={unit}\n            color={displayColor}\n            isProjection={isProjection}\n            originalTimes={originalTime ? [originalTime] : undefined}\n            labelVariant={labelVariant}\n        >\n            <span>\n                {displayValue}\n                {superscript}\n            </span>\n        </Variable>\n    )\n}\n\nexport function TooltipValueRange({\n    label,\n    unit,\n    values,\n    colors,\n    originalTimes,\n    trend,\n    labelVariant = \"label+unit\",\n    isRoundedToSignificantFigures,\n    showSignificanceSuperscript,\n}: TooltipValueRangeProps): React.ReactElement | null {\n    const [firstTerm, lastTerm] = values\n\n    if (firstTerm === undefined && lastTerm === undefined) return null\n\n    const showSuperscript =\n        showSignificanceSuperscript && isRoundedToSignificantFigures\n    const superscript = showSuperscript ? (\n        <SignificanceIcon asSuperscript={true} />\n    ) : null\n\n    return (\n        <Variable\n            label={label}\n            unit={unit}\n            originalTimes={originalTimes}\n            labelVariant={labelVariant}\n        >\n            <span className=\"range\">\n                <span className=\"term\">\n                    <span style={{ color: colors?.[0] }}>{firstTerm}</span>\n                    {!lastTerm && superscript}\n                </span>\n                {trend && (\n                    <GrapherTrendArrow direction={trend} isColored={!colors} />\n                )}\n                {lastTerm && (\n                    <span className=\"term\">\n                        <span style={{ color: colors?.[1] }}>{lastTerm}</span>\n                        {superscript}\n                    </span>\n                )}\n            </span>\n        </Variable>\n    )\n}\n\nfunction Variable({\n    label,\n    unit,\n    children,\n    color,\n    originalTimes,\n    isProjection,\n    labelVariant = \"label+unit\",\n}: TooltipVariableProps): React.ReactElement {\n    const { mainLabel: columnName, unit: formattedUnit } = makeAxisLabel({\n        label: label || \"\",\n        displayUnit: unit,\n    })\n\n    const displayOriginalTimes =\n        _.uniq((originalTimes ?? []).filter((t) => t !== undefined)).join(\n            \"\\u2013\"\n        ) || null\n\n    return (\n        <div\n            className={classnames(\"variable\", {\n                \"variable--no-name\": labelVariant === \"unit-only\",\n            })}\n        >\n            <div className=\"definition\">\n                {columnName && <span className=\"name\">{columnName}</span>}\n                {formattedUnit && formattedUnit.length > 1 && (\n                    <span className=\"unit\">{formattedUnit}</span>\n                )}\n                {isProjection && (\n                    <span className=\"projection\">projected data</span>\n                )}\n            </div>\n            <div className=\"values\" style={{ color }}>\n                {children}\n                {displayOriginalTimes && (\n                    <span className=\"time-notice\">\n                        <FontAwesomeIcon icon={faInfoCircle} />\n                        {displayOriginalTimes}\n                    </span>\n                )}\n            </div>\n        </div>\n    )\n}\n\nexport function TooltipTable({\n    columns,\n    rows,\n    totals = [],\n}: TooltipTableProps): React.ReactElement | null {\n    const context = React.useContext(TooltipContext)\n    const focal = rows.some((row) => row.focused)\n    const swatched = rows.some((row) => row.swatch)\n\n    const tooEmpty =\n        rows.length < 2 ||\n        totals.every((value) => value === undefined) ||\n        rows.some(({ values }) => values.every((value) => value === undefined))\n    const tooTrivial = R.zip(columns, totals).every(\n        ([column, total]) => !!column?.formatValue(total).match(/^100(\\.0+)?%/)\n    )\n    const showTotals = totals && !(tooEmpty || tooTrivial)\n\n    // if the tooltip is pinned to the bottom, show the total at the top,\n    // so that it's always visible even if the tooltip is scrollable\n    const showTotalsAtTop = context?.anchor === GrapherTooltipAnchor.bottom\n\n    const totalsCells = R.zip(columns, totals).map(([column, total]) => (\n        <td key={column?.label} className=\"series-value\">\n            {column && total !== undefined ? column.formatValue(total) : null}\n        </td>\n    ))\n\n    return (\n        <table className={classnames(\"series-list\", { focal, swatched })}>\n            {columns.length > 1 && (\n                <thead>\n                    <tr>\n                        <td className=\"series-color\"></td>\n                        <td className=\"series-name\"></td>\n                        {columns.map((column) => (\n                            <td className=\"series-value\" key={column.label}>\n                                {column.label}\n                            </td>\n                        ))}\n                    </tr>\n                </thead>\n            )}\n            <tbody>\n                {showTotals && showTotalsAtTop && (\n                    <>\n                        <tr className=\"total--top\">\n                            <td className=\"series-color\"></td>\n                            <td className=\"series-name\">Total</td>\n                            {totalsCells}\n                        </tr>\n                        <tr className=\"spacer\"></tr>\n                    </>\n                )}\n                {rows.map((row) => {\n                    const {\n                        name,\n                        focused,\n                        blurred,\n                        striped,\n                        annotation,\n                        values,\n                        originalTime,\n                        swatch = {},\n                    } = row\n                    const {\n                        color: swatchColor = \"transparent\",\n                        opacity: swatchOpacity = 1,\n                    } = swatch\n\n                    const [_m, seriesName, seriesParenthetical] =\n                        name.trim().match(/^(.*?)(\\([^()]*\\))?$/) ?? []\n\n                    return (\n                        <tr\n                            key={name}\n                            className={classnames({\n                                focused,\n                                blurred,\n                                striped,\n                            })}\n                        >\n                            <td className=\"series-color\">\n                                <div\n                                    className=\"swatch\"\n                                    style={{\n                                        backgroundColor: swatchColor,\n                                        opacity: swatchOpacity,\n                                    }}\n                                />\n                            </td>\n                            <td className=\"series-name\">\n                                {seriesName}\n                                {seriesParenthetical && (\n                                    <span className=\"parenthetical\">\n                                        {seriesParenthetical}\n                                    </span>\n                                )}\n                                {annotation && (\n                                    <span className=\"annotation\">\n                                        {annotation}\n                                    </span>\n                                )}\n                            </td>\n                            {R.zip(columns, values).map(([column, value]) => {\n                                const missing = value === undefined\n                                return column ? (\n                                    <td\n                                        key={column.label}\n                                        className={classnames(\"series-value\", {\n                                            missing,\n                                        })}\n                                    >\n                                        {!missing && column.formatValue(value)}\n                                    </td>\n                                ) : null\n                            })}\n                            {originalTime && (\n                                <td className=\"time-notice\">\n                                    <FontAwesomeIcon icon={faInfoCircle} />{\" \"}\n                                    {originalTime}\n                                </td>\n                            )}\n                        </tr>\n                    )\n                })}\n                {showTotals && !showTotalsAtTop && (\n                    <>\n                        <tr className=\"spacer\"></tr>\n                        <tr className=\"total\">\n                            <td className=\"series-color\"></td>\n                            <td className=\"series-name\">Total</td>\n                            {totalsCells}\n                        </tr>\n                    </>\n                )}\n            </tbody>\n        </table>\n    )\n}\n\nexport function SignificanceIcon({\n    asSuperscript = false,\n}: {\n    asSuperscript?: boolean\n}): React.ReactElement {\n    return (\n        <div\n            className={classnames(\"icon-circled-s\", {\n                \"as-superscript\": asSuperscript,\n            })}\n        >\n            <div className=\"circle\" />\n            <FontAwesomeIcon icon={faS} />\n        </div>\n    )\n}\n\nexport function makeTooltipToleranceNotice(\n    targetYear: string,\n    { plural }: { plural: boolean } = { plural: false }\n): string {\n    const dataPoint = plural ? \"data points\" : \"data point\"\n    return `Data not available for ${targetYear}. Showing closest available ${dataPoint} instead`\n}\n\nexport function makeTooltipRoundingNotice(\n    numSignificantFigures: number[],\n    { plural }: { plural: boolean } = { plural: true }\n): string {\n    const uniqueNumSigFigs = _.uniq(numSignificantFigures)\n    const formattedNumSigFigs = formatInlineList(\n        _.sortBy(uniqueNumSigFigs),\n        \"or\"\n    )\n\n    const values = plural ? \"Values\" : \"Value\"\n    const are = plural ? \"are\" : \"is\"\n    const figures = formattedNumSigFigs === \"1\" ? \"figure\" : \"figures\"\n    return `${values} ${are} rounded to ${formattedNumSigFigs} significant ${figures}`\n}\n\nexport function toTooltipTableColumns(\n    columns: CoreColumn | CoreColumn[]\n): TooltipTableProps[\"columns\"] {\n    const columnsArray = Array.isArray(columns) ? columns : [columns]\n\n    return columnsArray.map((column) => ({\n        label: column.displayName,\n        formatValue: (value) =>\n            column.formatValueShort(value, { trailingZeroes: true }),\n    }))\n}\n\nexport function formatTooltipRangeValues(\n    values: TooltipValue[],\n    column: CoreColumn\n): [string, string] {\n    const formatTooltipValueShort = (value: TooltipValue): string =>\n        formatTooltipValue(value, (value) => column.formatValueShort(value))\n    const formatTooltipValueShortWithAbbreviations = (\n        value: TooltipValue\n    ): string =>\n        formatTooltipValue(value, (value) =>\n            column.formatValueShortWithAbbreviations(value)\n        )\n\n    const [firstValue, lastValue] = values.map((v) =>\n        formatTooltipValueShort(v)\n    )\n\n    const [firstTerm, lastTerm] =\n        // TODO: would be nicer to actually measure the typeset text but we would need to\n        // add Lato's metrics to the `string-pixel-width` module to use Bounds.forText\n        _.sum([firstValue?.length, lastValue?.length]) > 20\n            ? values.map((v) => formatTooltipValueShortWithAbbreviations(v))\n            : [firstValue, lastValue]\n\n    return [firstTerm, lastTerm]\n}\n\nfunction formatTooltipValue(\n    value: TooltipValue,\n    formatValue: (value: number) => string\n): string {\n    if (value === undefined) return NO_DATA_LABEL\n    if (typeof value === \"string\") return value\n    return formatValue(value)\n}\n"],
+  "mappings": "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",
+  "names": ["value"]
+}

package/dist/grapher/tooltip/TooltipProps.d.ts

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { GrapherTooltipAnchor, GrapherTrendArrowDirection } from "../../utils/index.js";
+import { IObservableValue } from "mobx";
+export interface TooltipManager {
+    tooltip?: IObservableValue<TooltipProps | undefined>;
+}
+/**
+ * Controls the fade transition behavior for tooltips.
+ * - "delayed": Good for charts with gaps between targetable areas
+ * - "immediate": Better if the tooltip is displayed for all points in the chart's bounds
+ * - "none": Disables the fade transition altogether
+ */
+export type TooltipFadeMode = "delayed" | "immediate" | "none";
+export declare enum TooltipFooterIcon {
+    Notice = "notice",
+    Stripes = "stripes",
+    Significance = "significance",
+    None = "none"
+}
+export interface FooterItem {
+    icon: TooltipFooterIcon;
+    text: string;
+}
+export interface TooltipProps {
+    id: number | string;
+    x?: number;
+    y?: number;
+    offsetX?: number;
+    offsetY?: number;
+    offsetXDirection?: "left" | "right";
+    offsetYDirection?: "upward" | "downward";
+    title?: string | number;
+    titleAnnotation?: string;
+    subtitle?: string | number;
+    subtitleFormat?: "notice" | "unit";
+    footer?: FooterItem[];
+    style?: React.CSSProperties;
+    dissolve?: TooltipFadeMode;
+    children?: React.ReactNode;
+    dismiss?: () => void;
+}
+export interface TooltipValueProps {
+    label?: string;
+    unit?: string;
+    value?: string;
+    color?: string;
+    isProjection?: boolean;
+    originalTime?: string;
+    isRoundedToSignificantFigures?: boolean;
+    showSignificanceSuperscript?: boolean;
+    labelVariant?: "label+unit" | "unit-only";
+}
+export interface TooltipValueRangeProps {
+    label?: string;
+    unit?: string;
+    values: [string | undefined, string | undefined];
+    trend?: GrapherTrendArrowDirection;
+    colors?: string[];
+    originalTimes?: (string | undefined)[];
+    isRoundedToSignificantFigures?: boolean;
+    showSignificanceSuperscript?: boolean;
+    labelVariant?: "label+unit" | "unit-only";
+}
+export interface TooltipTableProps {
+    columns: TooltipTableColumn[];
+    rows: TooltipTableRow[];
+    totals?: (number | undefined)[];
+}
+interface TooltipTableColumn {
+    label: string;
+    formatValue: (value: unknown) => string;
+}
+interface TooltipTableRow {
+    name: string;
+    annotation?: string;
+    swatch?: {
+        color?: string;
+        opacity?: number;
+    };
+    focused?: boolean;
+    blurred?: boolean;
+    striped?: boolean;
+    originalTime?: string;
+    values: (string | number | undefined)[];
+}
+export interface TooltipVariableProps {
+    label?: string;
+    unit?: string;
+    color?: string;
+    isProjection?: boolean;
+    originalTimes?: (string | undefined)[];
+    labelVariant?: "label+unit" | "unit-only";
+    children?: React.ReactNode;
+}
+export interface TooltipTableData {
+    value: number;
+    fake?: boolean;
+}
+export interface TooltipContainerProps {
+    containerBounds?: {
+        width: number;
+        height: number;
+    };
+    anchor?: GrapherTooltipAnchor;
+}
+export declare const TooltipContext: React.Context<Pick<TooltipContainerProps, "anchor">>;
+export {};
+//# sourceMappingURL=TooltipProps.d.ts.map

package/dist/grapher/tooltip/TooltipProps.d.ts.map

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

package/dist/grapher/tooltip/TooltipProps.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+var TooltipFooterIcon = /* @__PURE__ */ ((TooltipFooterIcon2) => {
+  TooltipFooterIcon2["Notice"] = "notice";
+  TooltipFooterIcon2["Stripes"] = "stripes";
+  TooltipFooterIcon2["Significance"] = "significance";
+  TooltipFooterIcon2["None"] = "none";
+  return TooltipFooterIcon2;
+})(TooltipFooterIcon || {});
+const TooltipContext = React.createContext({});
+export {
+  TooltipContext,
+  TooltipFooterIcon
+};

package/dist/grapher/tooltip/TooltipProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/tooltip/TooltipProps.ts"],
+  "sourcesContent": ["import * as React from \"react\"\nimport {\n    GrapherTooltipAnchor,\n    GrapherTrendArrowDirection,\n} from \"../../utils/index.js\"\nimport { IObservableValue } from \"mobx\"\n\nexport interface TooltipManager {\n    // We can't pass the property directly because we need it to be observable\n    tooltip?: IObservableValue<TooltipProps | undefined>\n}\n\n/**\n * Controls the fade transition behavior for tooltips.\n * - \"delayed\": Good for charts with gaps between targetable areas\n * - \"immediate\": Better if the tooltip is displayed for all points in the chart's bounds\n * - \"none\": Disables the fade transition altogether\n */\nexport type TooltipFadeMode = \"delayed\" | \"immediate\" | \"none\"\n\nexport enum TooltipFooterIcon {\n    Notice = \"notice\",\n    Stripes = \"stripes\",\n    Significance = \"significance\",\n    None = \"none\",\n}\n\nexport interface FooterItem {\n    icon: TooltipFooterIcon\n    text: string\n}\n\nexport interface TooltipProps {\n    id: number | string\n    x?: number\n    y?: number\n    offsetX?: number\n    offsetY?: number\n    offsetXDirection?: \"left\" | \"right\"\n    offsetYDirection?: \"upward\" | \"downward\"\n    title?: string | number // header text\n    titleAnnotation?: string // rendered next to the title, but muted\n    subtitle?: string | number // header deck\n    subtitleFormat?: \"notice\" | \"unit\" // optional postprocessing for subtitle\n    footer?: FooterItem[]\n    style?: React.CSSProperties // css overrides (particularly width/maxWidth)\n    dissolve?: TooltipFadeMode // flag that the tooltip should begin fading out\n    children?: React.ReactNode\n    dismiss?: () => void\n}\n\nexport interface TooltipValueProps {\n    label?: string\n    unit?: string\n    value?: string\n    color?: string\n    isProjection?: boolean\n    originalTime?: string // actual year data was drawn from (when \u2260 target year)\n    isRoundedToSignificantFigures?: boolean\n    showSignificanceSuperscript?: boolean // show significance-s superscript if applicable\n    labelVariant?: \"label+unit\" | \"unit-only\"\n}\n\nexport interface TooltipValueRangeProps {\n    label?: string\n    unit?: string\n    values: [string | undefined, string | undefined]\n    trend?: GrapherTrendArrowDirection\n    colors?: string[] // value colors, matched by indices\n    originalTimes?: (string | undefined)[] // actual year data was drawn from (when \u2260 target year)\n    isRoundedToSignificantFigures?: boolean\n    showSignificanceSuperscript?: boolean // show significance-s superscript if applicable\n    labelVariant?: \"label+unit\" | \"unit-only\"\n}\n\nexport interface TooltipTableProps {\n    columns: TooltipTableColumn[]\n    rows: TooltipTableRow[]\n    totals?: (number | undefined)[]\n}\n\ninterface TooltipTableColumn {\n    label: string\n    formatValue: (value: unknown) => string\n}\n\ninterface TooltipTableRow {\n    name: string\n    annotation?: string\n    swatch?: {\n        color?: string // css color string for the series's swatch\n        opacity?: number\n    }\n    focused?: boolean // highlighted (based on hovered series in chart)\n    blurred?: boolean // greyed out (typically due to missing data)\n    striped?: boolean // use textured swatch (to show data is extrapolated)\n    originalTime?: string // actual year data was drawn (when \u2260 target year)\n    values: (string | number | undefined)[]\n}\n\nexport interface TooltipVariableProps {\n    label?: string\n    unit?: string\n    color?: string\n    isProjection?: boolean\n    originalTimes?: (string | undefined)[]\n    labelVariant?: \"label+unit\" | \"unit-only\"\n    children?: React.ReactNode\n}\n\nexport interface TooltipTableData {\n    value: number\n    fake?: boolean\n}\n\nexport interface TooltipContainerProps {\n    containerBounds?: { width: number; height: number }\n    anchor?: GrapherTooltipAnchor\n}\n\nexport const TooltipContext = React.createContext<\n    Pick<TooltipContainerProps, \"anchor\">\n>({})\n"],
+  "mappings": "AAAA,YAAY,WAAW;AAoBhB,IAAK,oBAAL,kBAAKA,uBAAL;AACH,EAAAA,mBAAA,YAAS;AACT,EAAAA,mBAAA,aAAU;AACV,EAAAA,mBAAA,kBAAe;AACf,EAAAA,mBAAA,UAAO;AAJC,SAAAA;AAAA,GAAA;AAoGL,MAAM,iBAAiB,MAAM,cAElC,CAAC,CAAC;",
+  "names": ["TooltipFooterIcon"]
+}

package/dist/grapher/tooltip/TooltipState.d.ts

@@ -0,0 +1,22 @@
+import { PointVector } from "../../utils/index.js";
+import { TooltipFadeMode } from "./TooltipProps.js";
+interface TooltipStateArgs {
+    fade?: TooltipFadeMode;
+}
+export declare class PlainTooltipState<T> {
+    position: PointVector;
+    protected _target: T | undefined;
+    protected _timer: number | undefined;
+    protected _fade: TooltipFadeMode;
+    constructor({ fade }?: TooltipStateArgs);
+    get target(): T | undefined;
+    set target(newTarget: T | null);
+    get fading(): TooltipFadeMode | undefined;
+    protected setTarget(newTarget: T | null): void;
+    protected resetTarget(): void;
+}
+export declare class TooltipState<T> extends PlainTooltipState<T> {
+    constructor(args?: TooltipStateArgs);
+}
+export {};
+//# sourceMappingURL=TooltipState.d.ts.map

package/dist/grapher/tooltip/TooltipState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipState.d.ts","sourceRoot":"","sources":["../../../src/grapher/tooltip/TooltipState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAInD,UAAU,gBAAgB;IACtB,IAAI,CAAC,EAAE,eAAe,CAAA;CACzB;AAED,qBAAa,iBAAiB,CAAC,CAAC;IAC5B,QAAQ,cAAwB;IAEhC,SAAS,CAAC,OAAO,EAAE,CAAC,GAAG,SAAS,CAAY;IAC5C,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAChD,SAAS,CAAC,KAAK,EAAE,eAAe,CAAA;gBAEpB,EAAE,IAAI,EAAE,GAAE,gBAAqB;IAI3C,IAAI,MAAM,IAAI,CAAC,GAAG,SAAS,CAE1B;IAED,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,EAE7B;IAED,IAAI,MAAM,IAAI,eAAe,GAAG,SAAS,CAGxC;IAED,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI;IAkB9C,SAAS,CAAC,WAAW,IAAI,IAAI;CAIhC;AAED,qBAAa,YAAY,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;gBACzC,IAAI,CAAC,EAAE,gBAAgB;CAqBtC"}

package/dist/grapher/tooltip/TooltipState.js

@@ -0,0 +1,58 @@
+import { observable, computed, action, makeObservable } from "mobx";
+import { PointVector } from "../../utils/index.js";
+const TOOLTIP_FADE_DURATION = 400;
+class PlainTooltipState {
+  constructor({ fade } = {}) {
+    this.position = new PointVector(0, 0);
+    this._target = void 0;
+    this._timer = void 0;
+    this._fade = fade ?? "delayed";
+  }
+  get target() {
+    return this._target;
+  }
+  set target(newTarget) {
+    this.setTarget(newTarget);
+  }
+  get fading() {
+    return !!this._timer && !!this._target ? this._fade : void 0;
+  }
+  setTarget(newTarget) {
+    clearTimeout(this._timer);
+    if (newTarget === null) {
+      const speed = { delayed: 1, immediate: 0.5, none: 0 }[this._fade];
+      this._timer = window.setTimeout(
+        () => this.resetTarget(),
+        speed * TOOLTIP_FADE_DURATION
+      );
+    } else {
+      this._target = newTarget;
+      this._timer = void 0;
+    }
+  }
+  resetTarget() {
+    this._target = void 0;
+    this._timer = void 0;
+  }
+}
+class TooltipState extends PlainTooltipState {
+  constructor(args) {
+    super(args);
+    makeObservable(this, {
+      // observables
+      position: observable,
+      _target: observable,
+      _timer: observable,
+      // computed (getters)
+      target: computed,
+      fading: computed,
+      // actions
+      setTarget: action.bound,
+      resetTarget: action.bound
+    });
+  }
+}
+export {
+  PlainTooltipState,
+  TooltipState
+};

package/dist/grapher/tooltip/TooltipState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/grapher/tooltip/TooltipState.ts"],
+  "sourcesContent": ["import { observable, computed, action, makeObservable } from \"mobx\"\nimport { PointVector } from \"../../utils/index.js\"\nimport { TooltipFadeMode } from \"./TooltipProps.js\"\n\nconst TOOLTIP_FADE_DURATION = 400 // $fade-time + $fade-delay in scss\n\ninterface TooltipStateArgs {\n    fade?: TooltipFadeMode\n}\n\nexport class PlainTooltipState<T> {\n    position = new PointVector(0, 0)\n\n    protected _target: T | undefined = undefined\n    protected _timer: number | undefined = undefined\n    protected _fade: TooltipFadeMode\n\n    constructor({ fade }: TooltipStateArgs = {}) {\n        this._fade = fade ?? \"delayed\"\n    }\n\n    get target(): T | undefined {\n        return this._target\n    }\n\n    set target(newTarget: T | null) {\n        this.setTarget(newTarget)\n    }\n\n    get fading(): TooltipFadeMode | undefined {\n        // returns \"delayed\"|\"immediate\" during the timeout after clearing the target\n        return !!this._timer && !!this._target ? this._fade : undefined\n    }\n\n    protected setTarget(newTarget: T | null): void {\n        // delay clearing the target (and hiding the tooltip) for a bit to prevent\n        // flicker when frobbing between neighboring elements and allow an opacity\n        // transition to smoothly fade the tooltip out\n        clearTimeout(this._timer)\n\n        if (newTarget === null) {\n            const speed = { delayed: 1, immediate: 0.5, none: 0 }[this._fade]\n            this._timer = window.setTimeout(\n                () => this.resetTarget(),\n                speed * TOOLTIP_FADE_DURATION\n            )\n        } else {\n            this._target = newTarget\n            this._timer = undefined\n        }\n    }\n\n    protected resetTarget(): void {\n        this._target = undefined\n        this._timer = undefined\n    }\n}\n\nexport class TooltipState<T> extends PlainTooltipState<T> {\n    constructor(args?: TooltipStateArgs) {\n        super(args)\n\n        makeObservable<\n            this,\n            \"_target\" | \"_timer\" | \"setTarget\" | \"resetTarget\"\n        >(this, {\n            // observables\n            position: observable,\n            _target: observable,\n            _timer: observable,\n\n            // computed (getters)\n            target: computed,\n            fading: computed,\n\n            // actions\n            setTarget: action.bound,\n            resetTarget: action.bound,\n        })\n    }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY,UAAU,QAAQ,sBAAsB;AAC7D,SAAS,mBAAmB;AAG5B,MAAM,wBAAwB;AAMvB,MAAM,kBAAqB;AAAA,EAO9B,YAAY,EAAE,KAAK,IAAsB,CAAC,GAAG;AAN7C,oBAAW,IAAI,YAAY,GAAG,CAAC;AAE/B,SAAU,UAAyB;AACnC,SAAU,SAA6B;AAInC,SAAK,QAAQ,QAAQ;AAAA,EACzB;AAAA,EAEA,IAAI,SAAwB;AACxB,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAI,OAAO,WAAqB;AAC5B,SAAK,UAAU,SAAS;AAAA,EAC5B;AAAA,EAEA,IAAI,SAAsC;AAEtC,WAAO,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,KAAK,UAAU,KAAK,QAAQ;AAAA,EAC1D;AAAA,EAEU,UAAU,WAA2B;AAI3C,iBAAa,KAAK,MAAM;AAExB,QAAI,cAAc,MAAM;AACpB,YAAM,QAAQ,EAAE,SAAS,GAAG,WAAW,KAAK,MAAM,EAAE,EAAE,KAAK,KAAK;AAChE,WAAK,SAAS,OAAO;AAAA,QACjB,MAAM,KAAK,YAAY;AAAA,QACvB,QAAQ;AAAA,MACZ;AAAA,IACJ,OAAO;AACH,WAAK,UAAU;AACf,WAAK,SAAS;AAAA,IAClB;AAAA,EACJ;AAAA,EAEU,cAAoB;AAC1B,SAAK,UAAU;AACf,SAAK,SAAS;AAAA,EAClB;AACJ;AAEO,MAAM,qBAAwB,kBAAqB;AAAA,EACtD,YAAY,MAAyB;AACjC,UAAM,IAAI;AAEV,mBAGE,MAAM;AAAA;AAAA,MAEJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA;AAAA,MAGR,QAAQ;AAAA,MACR,QAAQ;AAAA;AAAA,MAGR,WAAW,OAAO;AAAA,MAClB,aAAa,OAAO;AAAA,IACxB,CAAC;AAAA,EACL;AACJ;",
+  "names": []
+}

package/dist/grapher/verticalLabels/VerticalLabels.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { VerticalAxis } from "../axis/Axis.js";
+import { VerticalLabelsState } from "./VerticalLabelsState.js";
+export declare function VerticalLabels({ state, yAxis, x, xAnchor, }: {
+    state: VerticalLabelsState;
+    yAxis: VerticalAxis;
+    x?: number;
+    xAnchor?: "start" | "end";
+}): React.ReactElement;
+//# sourceMappingURL=VerticalLabels.d.ts.map

package/dist/grapher/verticalLabels/VerticalLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalLabels.d.ts","sourceRoot":"","sources":["../../../src/grapher/verticalLabels/VerticalLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAG9D,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,CAAK,EACL,OAAiB,GACpB,EAAE;IACC,KAAK,EAAE,mBAAmB,CAAA;IAC1B,KAAK,EAAE,YAAY,CAAA;IACnB,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAC5B,GAAG,KAAK,CAAC,YAAY,CAerB"}

package/dist/grapher/verticalLabels/VerticalLabels.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { darkenColorForText } from "../color/ColorUtils.js";
+function VerticalLabels({
+  state,
+  yAxis,
+  x = 0,
+  xAnchor = "start"
+}) {
+  return /* @__PURE__ */ React.createElement("g", null, state.series.map((series) => /* @__PURE__ */ React.createElement(React.Fragment, { key: series.yPosition }, series.textWrap.renderSVG(x, yAxis.place(series.value), {
+    textProps: {
+      textAnchor: xAnchor,
+      fill: darkenColorForText(series.color)
+    }
+  }))));
+}
+export {
+  VerticalLabels
+};