@milaboratories/miplots4 1.0.126 → 1.0.128

package/dist/scatterplot/components/ChartAxisTitles.js

@@ -0,0 +1,56 @@
+import { j as l } from "../../node_modules/react/jsx-runtime.js";
+import { r as j } from "../../_virtual/index.js";
+import { BLACK as y } from "../../constants.js";
+import { MIN_PADDING as i, TITLE_LINE as e } from "../constants.js";
+function a(t, o) {
+  return typeof t == "string" ? t : o.length ? o[0].data[t.value] : "";
+}
+const k = j.memo(({
+  debug: t,
+  width: o,
+  height: r,
+  dimensions: s,
+  xAxis: m,
+  yAxis: d,
+  dotsData: p
+}) => {
+  const { padding: n } = s, { dots: f } = p, u = a(m.title, f), T = a(d.title, f), c = s.chartEdgeSides.includes("left"), x = s.chartEdgeSides.includes("bottom");
+  return (x || c) && /* @__PURE__ */ l.jsxs("g", { dominantBaseline: "central", textAnchor: "middle", fontWeight: "500", fontSize: "14px", fill: y, children: [
+    x && /* @__PURE__ */ l.jsx("text", { x: o / 2, y: r + n.bottom - i - e / 2, children: u }),
+    t && x && /* @__PURE__ */ l.jsx(
+      "rect",
+      {
+        x: "0",
+        y: r + n.bottom - i - e,
+        width: o,
+        height: e,
+        fill: "none",
+        stroke: "black"
+      }
+    ),
+    c && /* @__PURE__ */ l.jsx(
+      "text",
+      {
+        x: -n.left + i + e / 2,
+        y: r / 2,
+        transform: `rotate(-90,${-n.left + i + e / 2},${r / 2})`,
+        children: T
+      }
+    ),
+    t && c && /* @__PURE__ */ l.jsx(
+      "rect",
+      {
+        x: -n.left + i,
+        y: "0",
+        width: e,
+        height: r,
+        fill: "none",
+        stroke: "black"
+      }
+    )
+  ] });
+});
+export {
+  k as ChartAxisTitles
+};
+//# sourceMappingURL=ChartAxisTitles.js.map

package/dist/scatterplot/components/ChartAxisTitles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartAxisTitles.js","sources":["../../../src/scatterplot/components/ChartAxisTitles.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { BLACK } from '../../constants';\nimport type { ColumnName } from '../../types';\nimport { MIN_PADDING, TITLE_LINE } from '../constants';\nimport type { Dot, GroupedDots } from '../dots';\nimport type { ScatterplotSettingsImpl } from '../ScatterplotSettingsImpl';\nimport type {\n    ChartDimensionsData\n} from './types';\n\ninterface Props {\n    debug?: boolean;\n    width: number;\n    height: number;\n    dimensions: ChartDimensionsData;\n    xAxis: ScatterplotSettingsImpl['chartSettings']['xAxis'];\n    yAxis: ScatterplotSettingsImpl['chartSettings']['yAxis'];\n    dotsData: GroupedDots[keyof GroupedDots];\n}\n\nfunction getTitle(title: string | ColumnName, dots: Dot[]): string {\n    if (typeof title === 'string') {\n        return title;\n    }\n    if (!dots.length) {\n        return '';\n    }\n    return dots[0].data[title.value] as string;\n}\n\nexport const ChartAxisTitles = memo(({\n    debug,\n    width,\n    height,\n    dimensions,\n    xAxis,\n    yAxis,\n    dotsData,\n}: Props) =>{\n    const {padding} = dimensions;\n    const {dots} = dotsData;\n    const xTitle = getTitle(xAxis.title, dots);\n    const yTitle = getTitle(yAxis.title, dots);\n\n    const needLeftAxisTitle = dimensions.chartEdgeSides.includes('left');\n    const needBottomAxisTitle = dimensions.chartEdgeSides.includes('bottom');\n\n    return (needBottomAxisTitle || needLeftAxisTitle) && (\n         <g dominantBaseline=\"central\" textAnchor=\"middle\" fontWeight=\"500\" fontSize=\"14px\" fill={BLACK}>\n            {needBottomAxisTitle && (\n                <text x={width / 2} y={height + padding.bottom - MIN_PADDING - TITLE_LINE / 2}>\n                    {xTitle}\n                </text>\n            )}\n            {debug && needBottomAxisTitle && (\n                <rect\n                    x=\"0\"\n                    y={height + padding.bottom - MIN_PADDING - TITLE_LINE}\n                    width={width}\n                    height={TITLE_LINE}\n                    fill=\"none\"\n                    stroke=\"black\"\n                />\n            )}\n            {needLeftAxisTitle && (\n                <text\n                    x={-padding.left + MIN_PADDING + TITLE_LINE / 2}\n                    y={height / 2}\n                    transform={`rotate(-90,${-padding.left + MIN_PADDING + TITLE_LINE / 2},${height / 2})`}\n                >\n                    {yTitle}\n                </text>\n            )}\n            {debug && needLeftAxisTitle && (\n                <rect\n                    x={-padding.left + MIN_PADDING}\n                    y=\"0\"\n                    width={TITLE_LINE}\n                    height={height}\n                    fill=\"none\"\n                    stroke=\"black\"\n                />\n            )}\n        </g>\n    );\n});"],"names":["getTitle","title","dots","ChartAxisTitles","memo","debug","width","height","dimensions","xAxis","yAxis","dotsData","padding","xTitle","yTitle","needLeftAxisTitle","needBottomAxisTitle","jsxs","BLACK","jsx","MIN_PADDING","TITLE_LINE"],"mappings":";;;;AAoBA,SAASA,EAASC,GAA4BC,GAAqB;AAC/D,SAAI,OAAOD,KAAU,WACVA,IAENC,EAAK,SAGHA,EAAK,CAAC,EAAE,KAAKD,EAAM,KAAK,IAFpB;AAGf;AAEO,MAAME,IAAkBC,EAAAA,KAAK,CAAC;AAAA,EACjC,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACJ,MAAY;AACR,QAAM,EAAC,SAAAC,MAAWJ,GACZ,EAAC,MAAAN,MAAQS,GACTE,IAASb,EAASS,EAAM,OAAOP,CAAI,GACnCY,IAASd,EAASU,EAAM,OAAOR,CAAI,GAEnCa,IAAoBP,EAAW,eAAe,SAAS,MAAM,GAC7DQ,IAAsBR,EAAW,eAAe,SAAS,QAAQ;AAEvE,UAAQQ,KAAuBD,MAC1BE,gBAAAA,EAAAA,KAAC,KAAA,EAAE,kBAAiB,WAAU,YAAW,UAAS,YAAW,OAAM,UAAS,QAAO,MAAMC,GACrF,UAAA;AAAA,IAAAF,KACGG,gBAAAA,EAAAA,IAAC,QAAA,EAAK,GAAGb,IAAQ,GAAG,GAAGC,IAASK,EAAQ,SAASQ,IAAcC,IAAa,GACvE,UAAAR,GACL;AAAA,IAEHR,KAASW,KACNG,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,GAAGZ,IAASK,EAAQ,SAASQ,IAAcC;AAAA,QAC3C,OAAAf;AAAA,QACA,QAAQe;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGdN,KACGI,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAG,CAACP,EAAQ,OAAOQ,IAAcC,IAAa;AAAA,QAC9C,GAAGd,IAAS;AAAA,QACZ,WAAW,cAAc,CAACK,EAAQ,OAAOQ,IAAcC,IAAa,CAAC,IAAId,IAAS,CAAC;AAAA,QAElF,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRT,KAASU,KACNI,gBAAAA,EAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAG,CAACP,EAAQ,OAAOQ;AAAA,QACnB,GAAE;AAAA,QACF,OAAOC;AAAA,QACP,QAAAd;AAAA,QACA,MAAK;AAAA,QACL,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GAER;AAER,CAAC;"}

package/dist/scatterplot/components/ChartFacetTitle.d.ts

@@ -0,0 +1,11 @@
+import { FrameType } from '../../types';
+import { ChartDimensionsData } from './types';
+interface ChartProps {
+    width: number;
+    dimensions: ChartDimensionsData;
+    frameType: FrameType;
+    facetTitle: string[];
+}
+export declare const ChartFacetTitle: import('react').MemoExoticComponent<({ width, dimensions, frameType, facetTitle, }: ChartProps) => 0 | import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=ChartFacetTitle.d.ts.map

package/dist/scatterplot/components/ChartFacetTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartFacetTitle.d.ts","sourceRoot":"","sources":["../../../src/scatterplot/components/ChartFacetTitle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,KAAK,EACR,mBAAmB,EACtB,MAAM,SAAS,CAAC;AAEjB,UAAU,UAAU;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,mBAAmB,CAAC;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,sFAKzB,UAAU,iDA6BX,CAAC"}

package/dist/scatterplot/components/ChartFacetTitle.js

@@ -0,0 +1,37 @@
+import { j as r } from "../../node_modules/react/jsx-runtime.js";
+import { r as f } from "../../_virtual/index.js";
+import { BLACK as p } from "../../constants.js";
+import { FACET_TITLE_LINE as e } from "../constants.js";
+const j = f.memo(({
+  width: n,
+  dimensions: i,
+  frameType: m,
+  facetTitle: o
+}) => {
+  const { padding: t } = i;
+  return o.length && /* @__PURE__ */ r.jsxs("g", { children: [
+    m === "full" && /* @__PURE__ */ r.jsx("rect", { x: "0", y: -t.top, height: t.top, width: n, fill: "#F7F8FA", stroke: p }),
+    o.map((l, s) => {
+      const x = o.length, c = (t.top - e * x) / 2;
+      return /* @__PURE__ */ r.jsx(
+        "text",
+        {
+          fontSize: "14px",
+          fontWeight: "500",
+          fill: p,
+          x: n / 2,
+          dy: c + e / 2 - t.top,
+          y: s * e,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: l
+        },
+        s
+      );
+    })
+  ] });
+});
+export {
+  j as ChartFacetTitle
+};
+//# sourceMappingURL=ChartFacetTitle.js.map

package/dist/scatterplot/components/ChartFacetTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartFacetTitle.js","sources":["../../../src/scatterplot/components/ChartFacetTitle.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { BLACK } from '../../constants';\nimport type { FrameType } from '../../types';\nimport { FACET_TITLE_LINE } from '../constants';\nimport type {\n    ChartDimensionsData\n} from './types';\n\ninterface ChartProps {\n    width: number;\n    dimensions: ChartDimensionsData;\n    frameType: FrameType;\n    facetTitle: string[];\n}\n\nexport const ChartFacetTitle = memo(({\n    width,\n    dimensions,\n    frameType,\n    facetTitle,\n}: ChartProps) => {\n    const {padding} = dimensions;\n\n    return facetTitle.length && (\n        <g>\n            {frameType === 'full' && (\n                <rect x=\"0\" y={-padding.top} height={padding.top} width={width} fill=\"#F7F8FA\" stroke={BLACK} />\n            )}\n            {facetTitle.map((titleLine, idx) => {\n                const linesCount = facetTitle.length;\n                const topOffset = (padding.top - FACET_TITLE_LINE * linesCount) / 2;\n                return (\n                    <text\n                        key={idx}\n                        fontSize=\"14px\"\n                        fontWeight=\"500\"\n                        fill={BLACK}\n                        x={width / 2}\n                        dy={topOffset + FACET_TITLE_LINE / 2 - padding.top}\n                        y={idx * FACET_TITLE_LINE}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"central\"\n                    >\n                        {titleLine}\n                    </text>\n                );\n            })}\n        </g>\n    );\n});"],"names":["ChartFacetTitle","memo","width","dimensions","frameType","facetTitle","padding","jsxs","jsx","BLACK","titleLine","idx","linesCount","topOffset","FACET_TITLE_LINE"],"mappings":";;;;AAeO,MAAMA,IAAkBC,EAAAA,KAAK,CAAC;AAAA,EACjC,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACJ,MAAkB;AACd,QAAM,EAAC,SAAAC,MAAWH;AAElB,SAAOE,EAAW,UACdE,gBAAAA,EAAAA,KAAC,KAAA,EACI,UAAA;AAAA,IAAAH,MAAc,UACXI,gBAAAA,EAAAA,IAAC,QAAA,EAAK,GAAE,KAAI,GAAG,CAACF,EAAQ,KAAK,QAAQA,EAAQ,KAAK,OAAAJ,GAAc,MAAK,WAAU,QAAQO,GAAO;AAAA,IAEjGJ,EAAW,IAAI,CAACK,GAAWC,MAAQ;AAChC,YAAMC,IAAaP,EAAW,QACxBQ,KAAaP,EAAQ,MAAMQ,IAAmBF,KAAc;AAClE,aACIJ,gBAAAA,EAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEG,UAAS;AAAA,UACT,YAAW;AAAA,UACX,MAAMC;AAAA,UACN,GAAGP,IAAQ;AAAA,UACX,IAAIW,IAAYC,IAAmB,IAAIR,EAAQ;AAAA,UAC/C,GAAGK,IAAMG;AAAA,UACT,YAAW;AAAA,UACX,kBAAiB;AAAA,UAEhB,UAAAJ;AAAA,QAAA;AAAA,QAVIC;AAAA,MAAA;AAAA,IAajB,CAAC;AAAA,EAAA,GACL;AAER,CAAC;"}

package/dist/scatterplot/components/ChartLayersData.d.ts

@@ -0,0 +1,39 @@
+import { Dot, GroupedDots } from '../dots';
+import { ScatterplotLayerData } from '../getLayersData';
+import { Label } from '../utils/getVisibleLabels';
+import { AesGetters, ChartScales } from './types';
+interface Props {
+    width: number;
+    height: number;
+    scales: ChartScales;
+    dotsData: GroupedDots[keyof GroupedDots];
+    layersData: ScatterplotLayerData[];
+    aesGetters: AesGetters;
+    onMouseEnterDot?: (dot: Dot) => void;
+    onMouseLeaveDot?: (dot: Dot) => void;
+}
+export declare const ChartLayersData: import('react').MemoExoticComponent<({ width, height, scales, dotsData, layersData, aesGetters, onMouseEnterDot, onMouseLeaveDot, }: Props) => (import("react/jsx-runtime").JSX.Element | undefined)[]>;
+export declare const ChartLayerDots: import('react').MemoExoticComponent<({ width, height, scales, dotsData, layersData, aesGetters, onMouseEnterDot, onMouseLeaveDot, }: Props) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChartCurveLayer: import('react').MemoExoticComponent<({ layer, scales, aesGetters, }: {
+    layer: ScatterplotLayerData;
+    scales: ChartScales;
+    aesGetters: AesGetters;
+}) => import("react/jsx-runtime").JSX.Element[] | undefined>;
+export declare const ChartDots: import('react').MemoExoticComponent<({ scales, dotsData, aesGetters, onMouseEnter, onMouseLeave, }: Pick<Props, "scales" | "dotsData" | "aesGetters"> & {
+    onMouseEnter?: (dot: Dot) => void;
+    onMouseLeave?: (dot: Dot) => void;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const ChartDot: ({ dot, scales, aesGetters, onMouseEnter, onMouseLeave, }: {
+    dot: Dot;
+    scales: ChartScales;
+    aesGetters: AesGetters;
+    onMouseEnter?: (dot: Dot) => void;
+    onMouseLeave?: (dot: Dot) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartLabels: import('react').MemoExoticComponent<({ labels, onMouseEnter, onMouseLeave, }: {
+    labels: Label[];
+    onMouseEnter: (dot: Dot) => void;
+    onMouseLeave: (dot: Dot) => void;
+}) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=ChartLayersData.d.ts.map

package/dist/scatterplot/components/ChartLayersData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLayersData.d.ts","sourceRoot":"","sources":["../../../src/scatterplot/components/ChartLayersData.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,EAAiB,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,KAAK,EACR,UAAU,EACV,WAAW,EACd,MAAM,SAAS,CAAC;AAIjB,UAAU,KAAK;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC;IACzC,UAAU,EAAE,oBAAoB,EAAE,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,uIASzB,KAAK,6DAyBN,CAAC;AAEH,eAAO,MAAM,cAAc,uIASxB,KAAK,6CAmEN,CAAC;AAEH,eAAO,MAAM,eAAe,uEAIzB;IACC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;CAC1B,2DAiCC,CAAC;AAEH,eAAO,MAAM,SAAS,sGAMnB,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAC,GAAG;IACnD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC,6CAeC,CAAC;AAEH,eAAO,MAAM,QAAQ,GAAK,0DAMvB;IACC,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC,4CAaC,CAAC;AAEH,eAAO,MAAM,WAAW,gFAIrB;IACC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC,GAAG,EAAE,GAAG,KAAM,IAAI,CAAC;IAClC,YAAY,EAAE,CAAC,GAAG,EAAE,GAAG,KAAM,IAAI,CAAC;CACrC,6CAiCC,CAAC"}

package/dist/scatterplot/components/ChartLayersData.js

@@ -0,0 +1,250 @@
+import { j as a } from "../../node_modules/react/jsx-runtime.js";
+import { r as p } from "../../_virtual/index.js";
+import { getLineShape as g } from "../../utils/getLineShape.js";
+import { getPointShape as u } from "../../utils/getPointShape.js";
+import { TextMeasurer as C } from "../../utils/TextMeasurer.js";
+import { getFilteredLabels as j } from "../utils/getVisibleLabels.js";
+import k from "../../node_modules/d3-shape/src/line.js";
+import v from "../../node_modules/d3-shape/src/curve/basis.js";
+const l = 3, Y = p.memo(({
+  width: t,
+  height: r,
+  scales: n,
+  dotsData: e,
+  layersData: i,
+  aesGetters: o,
+  onMouseEnterDot: d,
+  onMouseLeaveDot: s
+}) => i.map((m, x) => {
+  if (m.type === "dots")
+    return /* @__PURE__ */ a.jsx(
+      $,
+      {
+        width: t,
+        height: r,
+        scales: n,
+        dotsData: e,
+        layersData: i,
+        aesGetters: o,
+        onMouseEnterDot: d,
+        onMouseLeaveDot: s
+      },
+      m.type + x
+    );
+  if (m.type === "curve")
+    return /* @__PURE__ */ a.jsx(
+      B,
+      {
+        layer: m,
+        scales: n,
+        aesGetters: o
+      },
+      m.type + x
+    );
+})), $ = p.memo(({
+  width: t,
+  height: r,
+  scales: n,
+  dotsData: e,
+  layersData: i,
+  aesGetters: o,
+  onMouseEnterDot: d,
+  onMouseLeaveDot: s
+}) => {
+  const { dots: m } = e, [x, c] = p.useState(null), [f, y] = p.useState(
+    () => S(
+      m,
+      n,
+      o,
+      i.find((h) => h.type === "dots")
+    )
+  ), [b, L] = p.useState(
+    () => j(f, t, r, l, l)
+  );
+  return p.useEffect(() => {
+    y(
+      S(
+        m,
+        n,
+        o,
+        i.find((h) => h.type === "dots")
+      )
+    );
+  }, [m, n, o, i]), p.useEffect(() => {
+    const h = j(f, t, r);
+    L(h);
+  }, [f, t, r]), /* @__PURE__ */ a.jsxs("g", { children: [
+    /* @__PURE__ */ a.jsx(
+      D,
+      {
+        scales: n,
+        dotsData: e,
+        aesGetters: o,
+        onMouseEnter: d,
+        onMouseLeave: s
+      }
+    ),
+    /* @__PURE__ */ a.jsx(
+      F,
+      {
+        labels: b,
+        onMouseEnter: (h) => c(h),
+        onMouseLeave: () => c(null)
+      }
+    ),
+    x && /* @__PURE__ */ a.jsxs(
+      "g",
+      {
+        transform: `translate(${n.x(x.x)},${n.y(x.y)})`,
+        children: [
+          u(
+            o.dotShape(x.data),
+            o.dotSize(x.data) + 1,
+            "white",
+            "white"
+          ),
+          u(
+            o.dotShape(x.data),
+            o.dotSize(x.data),
+            o.dotColor(x.data)
+          )
+        ]
+      },
+      "activeDot"
+    )
+  ] });
+}), B = p.memo(({
+  layer: t,
+  scales: r,
+  aesGetters: n
+}) => {
+  if (t.type === "curve" && !t.info.smoothing)
+    return t.geoms.map((e, i) => /* @__PURE__ */ a.jsx("g", { children: /* @__PURE__ */ a.jsx(
+      "polyline",
+      {
+        points: e.dots.map((o) => `${r.x(o.x)},${r.y(o.y)}`).join(" "),
+        fill: "none",
+        stroke: n.lineColor(e.data),
+        strokeWidth: t.info.aes.lineWidth,
+        strokeDasharray: g(t.info.aes.lineShape)
+      }
+    ) }, i));
+  if (t.type === "curve" && t.info.smoothing)
+    return t.geoms.map((e, i) => /* @__PURE__ */ a.jsx("g", { children: /* @__PURE__ */ a.jsx(
+      "path",
+      {
+        d: k().curve(v).x((o) => r.x(o.x)).y((o) => r.y(o.y))(e.dots) ?? "",
+        fill: "none",
+        stroke: n.lineColor(e.data),
+        strokeWidth: t.info.aes.lineWidth,
+        strokeDasharray: g(t.info.aes.lineShape)
+      }
+    ) }, i));
+}), D = p.memo(({
+  scales: t,
+  dotsData: r,
+  aesGetters: n,
+  onMouseEnter: e,
+  onMouseLeave: i
+}) => {
+  const { dots: o } = r;
+  return /* @__PURE__ */ a.jsx(a.Fragment, { children: o.map((d, s) => /* @__PURE__ */ a.jsx(
+    E,
+    {
+      dot: d,
+      scales: t,
+      aesGetters: n,
+      onMouseEnter: e,
+      onMouseLeave: i
+    },
+    s
+  )) });
+}), E = ({
+  dot: t,
+  scales: r,
+  aesGetters: n,
+  onMouseEnter: e,
+  onMouseLeave: i
+}) => /* @__PURE__ */ a.jsx(
+  "g",
+  {
+    transform: `translate(${r.x(t.x)},${r.y(t.y)})`,
+    opacity: t.dimmed ? 0.3 : 1,
+    onMouseOver: () => e == null ? void 0 : e(t),
+    onMouseLeave: () => i == null ? void 0 : i(t),
+    children: u(
+      n.dotShape(t.data),
+      n.dotSize(t.data),
+      n.dotColor(t.data)
+    )
+  }
+), F = p.memo(({
+  labels: t,
+  onMouseEnter: r,
+  onMouseLeave: n
+}) => /* @__PURE__ */ a.jsx(a.Fragment, { children: t.map((e, i) => {
+  const { name: o, height: d, bbox: s, width: m } = e;
+  return /* @__PURE__ */ a.jsxs("g", { transform: `translate(${s.minX},${s.minY})`, children: [
+    /* @__PURE__ */ a.jsx(
+      "rect",
+      {
+        x: "0",
+        y: "0",
+        width: m,
+        height: d,
+        fill: "transparent",
+        stroke: "none",
+        onMouseEnter: () => r(e.dot),
+        onMouseLeave: () => n(e.dot)
+      }
+    ),
+    /* @__PURE__ */ a.jsx(
+      "text",
+      {
+        x: 0,
+        y: d / 2,
+        stroke: "white",
+        strokeWidth: 2,
+        paintOrder: "stroke",
+        style: { pointerEvents: "none" },
+        fontFamily: "Manrope",
+        fontSize: "16px",
+        dominantBaseline: "middle",
+        children: o
+      }
+    )
+  ] }, i);
+}) })), w = new C("16px Manrope");
+function S(t, r, n, e) {
+  if (!e)
+    return [];
+  const i = [];
+  for (const o of t) {
+    const d = o.label;
+    if (!d)
+      continue;
+    const s = w.getTextMetrics(String(d));
+    i.push({
+      name: String(d),
+      width: (s == null ? void 0 : s.width) ?? 0,
+      height: ((s == null ? void 0 : s.actualBoundingBoxAscent) ?? 0) + ((s == null ? void 0 : s.actualBoundingBoxDescent) ?? 0),
+      x: r.x(o.x),
+      y: r.y(o.y),
+      xPosition: "right",
+      yPosition: "middle",
+      bbox: { minX: 0, maxX: 0, minY: 0, maxY: 0 },
+      dot: o,
+      padding: n.dotSize(o.data) + l
+    });
+  }
+  return i;
+}
+export {
+  B as ChartCurveLayer,
+  E as ChartDot,
+  D as ChartDots,
+  F as ChartLabels,
+  $ as ChartLayerDots,
+  Y as ChartLayersData
+};
+//# sourceMappingURL=ChartLayersData.js.map

package/dist/scatterplot/components/ChartLayersData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLayersData.js","sources":["../../../src/scatterplot/components/ChartLayersData.tsx"],"sourcesContent":["import { curveBasis, line } from 'd3-shape';\nimport { memo, useEffect, useState } from 'react';\nimport { getLineShape } from '../../utils/getLineShape';\nimport { getPointShape } from '../../utils/getPointShape';\nimport { TextMeasurer } from '../../utils/TextMeasurer';\nimport type { Dot, GroupedDots } from '../dots';\nimport type { DotsLayerData, ScatterplotLayerData } from '../getLayersData';\nimport type { Label } from '../utils/getVisibleLabels';\nimport { getFilteredLabels } from '../utils/getVisibleLabels';\nimport type {\n    AesGetters,\n    ChartScales\n} from './types';\n\nconst LABEL_OFFSET = 3;\n\ninterface Props {\n    width: number;\n    height: number;\n    scales: ChartScales;\n    dotsData: GroupedDots[keyof GroupedDots];\n    layersData: ScatterplotLayerData[];\n    aesGetters: AesGetters;\n    onMouseEnterDot?: (dot: Dot) => void;\n    onMouseLeaveDot?: (dot: Dot) => void;\n}\n\nexport const ChartLayersData = memo(({\n    width,\n    height,\n    scales,\n    dotsData,\n    layersData,\n    aesGetters,\n    onMouseEnterDot,\n    onMouseLeaveDot,\n}: Props) => {\n    return layersData.map((layer, idx) => {\n        if (layer.type === 'dots') {\n            return <ChartLayerDots\n                key={layer.type + idx}\n                width={width}\n                height={height}\n                scales={scales}\n                dotsData={dotsData}\n                layersData={layersData}\n                aesGetters={aesGetters}\n                onMouseEnterDot={onMouseEnterDot}\n                onMouseLeaveDot={onMouseLeaveDot}\n            />;\n        }\n\n        if (layer.type === 'curve') {\n            return <ChartCurveLayer\n                key={layer.type + idx}\n                layer={layer}\n                scales={scales}\n                aesGetters={aesGetters}\n            />;\n        }\n    });\n});\n\nexport const ChartLayerDots = memo(({\n    width,\n    height,\n    scales,\n    dotsData,\n    layersData,\n    aesGetters,\n    onMouseEnterDot,\n    onMouseLeaveDot,\n}: Props) => {\n    const {dots} = dotsData;\n\n    const [activeDot, setActiveDot] = useState<Dot | null>(null);\n\n    const [allLabels, setAllLabels] = useState<Label[]>(() =>\n        getAllPossibleLabels(\n            dots,\n            scales,\n            aesGetters,\n            layersData.find(layer => layer.type === 'dots') as DotsLayerData | undefined\n        )\n    );\n    const [labels, setLabels] = useState<Label[]>(() =>\n        getFilteredLabels(allLabels, width, height, LABEL_OFFSET, LABEL_OFFSET)\n    );\n\n    useEffect(() => {\n        setAllLabels(\n            getAllPossibleLabels(\n                dots,\n                scales,\n                aesGetters,\n                layersData.find(layer => layer.type === 'dots') as DotsLayerData | undefined\n            )\n        );\n    }, [dots, scales, aesGetters, layersData]);\n\n    useEffect(() => {\n        const filteredLabels = getFilteredLabels(allLabels, width, height);\n        setLabels(filteredLabels);\n    }, [allLabels, width, height]);\n\n    return (\n        <g>\n            <ChartDots\n                scales={scales}\n                dotsData={dotsData}\n                aesGetters={aesGetters}\n                onMouseEnter={onMouseEnterDot}\n                onMouseLeave={onMouseLeaveDot}\n            />\n            <ChartLabels\n                labels={labels}\n                onMouseEnter={dot => setActiveDot(dot)}\n                onMouseLeave={() => setActiveDot(null)}\n            />\n            {activeDot && (\n                <g\n                    key=\"activeDot\"\n                    transform={`translate(${scales.x(activeDot.x)},${scales.y(activeDot.y)})`}\n                >\n                    {getPointShape(\n                        aesGetters.dotShape(activeDot.data),\n                        aesGetters.dotSize(activeDot.data) + 1,\n                        'white',\n                        'white'\n                    )}\n                    {getPointShape(\n                        aesGetters.dotShape(activeDot.data),\n                        aesGetters.dotSize(activeDot.data),\n                        aesGetters.dotColor(activeDot.data)\n                    )}\n                </g>\n            )}\n        </g>\n    );\n});\n\nexport const ChartCurveLayer = memo(({\n    layer,\n    scales,\n    aesGetters,\n}: {\n    layer: ScatterplotLayerData;\n    scales: ChartScales;\n    aesGetters: AesGetters;\n}) => {\n    if (layer.type === 'curve' && !layer.info.smoothing) {\n        return layer.geoms.map((curve, idx) => (\n            <g key={idx}>\n                <polyline\n                    points={curve.dots.map(d => `${scales.x(d.x)},${scales.y(d.y)}`).join(' ')}\n                    fill=\"none\"\n                    stroke={aesGetters.lineColor(curve.data)}\n                    strokeWidth={layer.info.aes.lineWidth}\n                    strokeDasharray={getLineShape(layer.info.aes.lineShape)}\n                />\n            </g>\n        ));\n    }\n\n    if (layer.type === 'curve' && layer.info.smoothing) {\n        return layer.geoms.map((curve, idx) => (\n            <g key={idx}>\n                <path\n                    d={\n                        line<Dot>()\n                            .curve(curveBasis)\n                            .x((d: Dot) => scales.x(d.x))\n                            .y((d: Dot) => scales.y(d.y))(curve.dots) ?? ''\n                    }\n                    fill=\"none\"\n                    stroke={aesGetters.lineColor(curve.data)}\n                    strokeWidth={layer.info.aes.lineWidth}\n                    strokeDasharray={getLineShape(layer.info.aes.lineShape)}\n                />\n            </g>\n        ));\n    }\n});\n\nexport const ChartDots = memo(({\n    scales,\n    dotsData,\n    aesGetters,\n    onMouseEnter,\n    onMouseLeave,\n}: Pick<Props, 'scales' | 'dotsData' | 'aesGetters'> & {\n    onMouseEnter?: (dot: Dot) => void;\n    onMouseLeave?: (dot: Dot) => void;\n}) => {\n    const {dots} = dotsData;\n\n    return (<>\n        {dots.map((dot, idx) => {\n            return <ChartDot\n                key={idx}\n                dot={dot}\n                scales={scales}\n                aesGetters={aesGetters}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n            />;\n        })}\n    </>);\n});\n\nexport const ChartDot = (({\n    dot,\n    scales,\n    aesGetters,\n    onMouseEnter,\n    onMouseLeave,\n}: {\n    dot: Dot;\n    scales: ChartScales;\n    aesGetters: AesGetters;\n    onMouseEnter?: (dot: Dot) => void;\n    onMouseLeave?: (dot: Dot) => void;\n}) => {\n    return (<g\n        transform={`translate(${scales.x(dot.x)},${scales.y(dot.y)})`}\n        opacity={dot.dimmed ? 0.3 : 1}\n        onMouseOver={() => onMouseEnter?.(dot)}\n        onMouseLeave={() => onMouseLeave?.(dot)}\n    >\n        {getPointShape(\n            aesGetters.dotShape(dot.data),\n            aesGetters.dotSize(dot.data),\n            aesGetters.dotColor(dot.data)\n        )}\n    </g>);\n});\n\nexport const ChartLabels = memo(({\n    labels,\n    onMouseEnter,\n    onMouseLeave,\n}: {\n    labels: Label[];\n    onMouseEnter: (dot: Dot ) => void;\n    onMouseLeave: (dot: Dot ) => void;\n}) => {\n    return (<>\n        {labels.map((label, idx) => {\n            const {name, height, bbox, width} = label;\n            return (\n                <g key={idx} transform={`translate(${bbox.minX},${bbox.minY})`}>\n                    <rect\n                        x=\"0\"\n                        y=\"0\"\n                        width={width}\n                        height={height}\n                        fill=\"transparent\"\n                        stroke=\"none\"\n                        onMouseEnter={() => onMouseEnter(label.dot)}\n                        onMouseLeave={() => onMouseLeave(label.dot)}\n                    />\n                    <text\n                        x={0}\n                        y={height / 2}\n                        stroke=\"white\"\n                        strokeWidth={2}\n                        paintOrder=\"stroke\"\n                        style={{pointerEvents: 'none'}}\n                        fontFamily=\"Manrope\"\n                        fontSize=\"16px\"\n                        dominantBaseline=\"middle\"\n                    >\n                        {name}\n                    </text>\n                </g>\n            );\n        })}\n    </>);\n});\n\nconst textMeasurer = new TextMeasurer('16px Manrope');\nfunction getAllPossibleLabels(dots: Dot[], scales: ChartScales, aesGetters: AesGetters, layer?: DotsLayerData) {\n    if (!layer) {\n        return [];\n    }\n    const labels: Label[] = [];\n    for (const dot of dots) {\n        const text = dot.label;\n        if (!text) {\n            continue;\n        }\n        const metrics = textMeasurer.getTextMetrics(String(text));\n        labels.push({\n            name: String(text),\n            width: metrics?.width ?? 0,\n            height: (metrics?.actualBoundingBoxAscent ?? 0) + (metrics?.actualBoundingBoxDescent ?? 0),\n            x: scales.x(dot.x),\n            y: scales.y(dot.y),\n            xPosition: 'right',\n            yPosition: 'middle',\n            bbox: {minX: 0, maxX: 0, minY: 0, maxY: 0},\n            dot,\n            padding: aesGetters.dotSize(dot.data) + LABEL_OFFSET,\n        } as Label);\n    }\n    return labels;\n}"],"names":["LABEL_OFFSET","ChartLayersData","memo","width","height","scales","dotsData","layersData","aesGetters","onMouseEnterDot","onMouseLeaveDot","layer","idx","jsx","ChartLayerDots","ChartCurveLayer","dots","activeDot","setActiveDot","useState","allLabels","setAllLabels","getAllPossibleLabels","labels","setLabels","getFilteredLabels","useEffect","filteredLabels","ChartDots","ChartLabels","dot","jsxs","getPointShape","curve","d","getLineShape","line","curveBasis","onMouseEnter","onMouseLeave","Fragment","ChartDot","label","name","bbox","textMeasurer","TextMeasurer","text","metrics"],"mappings":"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"}

package/dist/scatterplot/components/ChartTooltip.d.ts

@@ -0,0 +1,18 @@
+import { TooltipsData } from '../../common/Tooltip';
+import { ColumnName } from '../../types';
+import { Dot } from '../dots';
+import { ScatterplotSettingsImpl } from '../ScatterplotSettingsImpl';
+import { AesGetters, ChartDimensionsData, ChartScales, ChartSizes, Margins } from './types';
+interface Props {
+    tooltipsData: TooltipsData<Dot>;
+    dimensions: undefined | ChartDimensionsData;
+    scales: undefined | ChartScales;
+    keyColumn: ColumnName;
+    margins: Margins;
+    chartSizes: ChartSizes;
+    tooltips: ScatterplotSettingsImpl['chartSettings']['tooltips'];
+    aesGetters: AesGetters;
+}
+export declare const ChartTooltip: import('react').MemoExoticComponent<({ tooltipsData, tooltips, keyColumn, chartSizes, dimensions, scales, aesGetters, }: Props) => import("react/jsx-runtime").JSX.Element | null>;
+export {};
+//# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/scatterplot/components/ChartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/scatterplot/components/ChartTooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,OAAO,KAAK,EACR,UAAU,EACV,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,OAAO,EACV,MAAM,SAAS,CAAC;AAEjB,UAAU,KAAK;IACX,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAChC,UAAU,EAAE,SAAS,GAAG,mBAAmB,CAAC;IAC5C,MAAM,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,SAAS,EAAE,UAAU,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC,UAAU,CAAC,CAAC;IAC/D,UAAU,EAAE,UAAU,CAAC;CAC1B;AAID,eAAO,MAAM,YAAY,2HAQtB,KAAK,oDA4CN,CAAC"}

package/dist/scatterplot/components/ChartTooltip.js

@@ -0,0 +1,58 @@
+import { j as a } from "../../node_modules/react/jsx-runtime.js";
+import { r as x } from "../../_virtual/index.js";
+import { Tooltip as n } from "../../common/Tooltip.js";
+import { numberFormat as u } from "../../utils/numberFormat.js";
+import { ChartDot as p } from "./ChartLayersData.js";
+const b = { left: 0, right: 0, top: 0, bottom: 0 }, T = x.memo(({
+  tooltipsData: e,
+  tooltips: l,
+  keyColumn: c,
+  chartSizes: o,
+  dimensions: t,
+  scales: r,
+  aesGetters: h
+}) => {
+  const f = t == null ? void 0 : t.padding, g = x.useMemo(() => !t || !r || !f ? b : {
+    left: t.left + f.left,
+    right: o.totalWidth - (t.left + f.left),
+    top: t.top + f.top,
+    bottom: o.totalHeight - (t.top + f.top)
+  }, [t, f, o]);
+  return !t || !r || !f || !e.selectedData || !l.show ? null : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    e.fixed && /* @__PURE__ */ a.jsxs("g", { transform: `translate(${t.left + f.left}, ${t.top + f.top})`, children: [
+      /* @__PURE__ */ a.jsx("rect", { width: o.chartWidth, height: o.chartHeight, fill: "rgba(255, 255, 255, 0.8)" }),
+      /* @__PURE__ */ a.jsx(
+        p,
+        {
+          dot: e.selectedData,
+          scales: r,
+          aesGetters: h
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a.jsx(
+      n,
+      {
+        content: $(e.selectedData, c, l == null ? void 0 : l.content),
+        x: r.x(e.selectedData.x),
+        y: r.y(e.selectedData.y),
+        active: !0,
+        sideDistances: g,
+        fixed: e.fixed,
+        onClose: e.onClose,
+        container: null
+      }
+    )
+  ] });
+});
+function $(e, l, c = []) {
+  const o = e.data, t = [`x: ${u(e.x)}`, `y: ${u(e.y)}`];
+  l.label && t.unshift(`${l.label}: ${o[l.label]}`);
+  for (const r of c)
+    t.push(`${r.label}: ${o[r.valueLabels ?? r.value]}`);
+  return t;
+}
+export {
+  T as ChartTooltip
+};
+//# sourceMappingURL=ChartTooltip.js.map

package/dist/scatterplot/components/ChartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.js","sources":["../../../src/scatterplot/components/ChartTooltip.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport type { ColumnName } from '../../types';\nimport { numberFormat } from '../../utils/numberFormat';\nimport type { Dot } from '../dots';\nimport type { ScatterplotSettingsImpl } from '../ScatterplotSettingsImpl';\nimport { ChartDot } from './ChartLayersData';\nimport type {\n    AesGetters,\n    ChartDimensionsData,\n    ChartScales,\n    ChartSizes,\n    Margins\n} from './types';\n\ninterface Props {\n    tooltipsData: TooltipsData<Dot>;\n    dimensions: undefined | ChartDimensionsData;\n    scales: undefined | ChartScales;\n    keyColumn: ColumnName;\n    margins: Margins;\n    chartSizes: ChartSizes;\n    tooltips: ScatterplotSettingsImpl['chartSettings']['tooltips'];\n    aesGetters: AesGetters;\n}\n\nconst ZERO_SIDE_DISTANCES = { left: 0, right: 0, top: 0, bottom: 0 };\n\nexport const ChartTooltip = memo(({\n    tooltipsData,\n    tooltips,\n    keyColumn,\n    chartSizes,\n    dimensions,\n    scales,\n    aesGetters,\n}: Props) => {\n    const padding = dimensions?.padding;\n\n    const sideDistances = useMemo(() => {\n        if (!dimensions || !scales || !padding) {\n            return ZERO_SIDE_DISTANCES;\n        }\n\n        return ({\n            left: dimensions.left + padding.left,\n            right: chartSizes.totalWidth - (dimensions.left + padding.left),\n            top: dimensions.top + padding.top,\n            bottom: chartSizes.totalHeight - (dimensions.top + padding.top),\n        });\n    }, [dimensions, padding, chartSizes]);\n\n    if (!dimensions || !scales || !padding || !tooltipsData.selectedData || !tooltips.show) {\n        return null;\n    }\n\n    return (\n        <>\n            {tooltipsData.fixed && \n                <g transform={`translate(${dimensions.left + padding.left}, ${dimensions.top + padding.top})`}>\n                    <rect width={chartSizes.chartWidth} height={chartSizes.chartHeight} fill=\"rgba(255, 255, 255, 0.8)\"/>\n                    <ChartDot\n                        dot={tooltipsData.selectedData}\n                        scales={scales}\n                        aesGetters={aesGetters}\n                    />\n                </g>\n            }\n            <Tooltip\n                content={getTooltipContent(tooltipsData.selectedData, keyColumn, tooltips?.content)}\n                x={scales.x(tooltipsData.selectedData.x)}\n                y={scales.y(tooltipsData.selectedData.y)}\n                active\n                sideDistances={sideDistances}\n                fixed={tooltipsData.fixed}\n                onClose={tooltipsData.onClose}\n                container={null}\n            />\n        </>\n    );\n});\n\nfunction getTooltipContent(dot: Dot, keyColumn: ColumnName, columnsList: ColumnName[] = []) {\n    const row = dot.data;\n    const lines = [`x: ${numberFormat(dot.x)}`, `y: ${numberFormat(dot.y)}`];\n    if (keyColumn.label) {\n        lines.unshift(`${keyColumn.label}: ${row[keyColumn.label]}`);\n    }\n    for (const column of columnsList) {\n        lines.push(`${column.label}: ${row[column.valueLabels ?? column.value]}`);\n    }\n    return lines;\n}\n"],"names":["ZERO_SIDE_DISTANCES","ChartTooltip","memo","tooltipsData","tooltips","keyColumn","chartSizes","dimensions","scales","aesGetters","padding","sideDistances","useMemo","jsxs","Fragment","jsx","ChartDot","Tooltip","getTooltipContent","dot","columnsList","row","lines","numberFormat","column"],"mappings":";;;;;AA2BA,MAAMA,IAAsB,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,EAAA,GAEpDC,IAAeC,EAAAA,KAAK,CAAC;AAAA,EAC9B,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AACJ,MAAa;AACT,QAAMC,IAAUH,KAAA,gBAAAA,EAAY,SAEtBI,IAAgBC,EAAAA,QAAQ,MACtB,CAACL,KAAc,CAACC,KAAU,CAACE,IACpBV,IAGH;AAAA,IACJ,MAAMO,EAAW,OAAOG,EAAQ;AAAA,IAChC,OAAOJ,EAAW,cAAcC,EAAW,OAAOG,EAAQ;AAAA,IAC1D,KAAKH,EAAW,MAAMG,EAAQ;AAAA,IAC9B,QAAQJ,EAAW,eAAeC,EAAW,MAAMG,EAAQ;AAAA,EAAA,GAEhE,CAACH,GAAYG,GAASJ,CAAU,CAAC;AAEpC,SAAI,CAACC,KAAc,CAACC,KAAU,CAACE,KAAW,CAACP,EAAa,gBAAgB,CAACC,EAAS,OACvE,OAIPS,gBAAAA,EAAAA,KAAAC,YAAA,EACK,UAAA;AAAA,IAAAX,EAAa,SACVU,gBAAAA,EAAAA,KAAC,KAAA,EAAE,WAAW,aAAaN,EAAW,OAAOG,EAAQ,IAAI,KAAKH,EAAW,MAAMG,EAAQ,GAAG,KACtF,UAAA;AAAA,MAAAK,gBAAAA,EAAAA,IAAC,QAAA,EAAK,OAAOT,EAAW,YAAY,QAAQA,EAAW,aAAa,MAAK,2BAAA,CAA0B;AAAA,MACnGS,gBAAAA,EAAAA;AAAAA,QAACC;AAAA,QAAA;AAAA,UACG,KAAKb,EAAa;AAAA,UAClB,QAAAK;AAAA,UACA,YAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,GACJ;AAAA,IAEJM,gBAAAA,EAAAA;AAAAA,MAACE;AAAA,MAAA;AAAA,QACG,SAASC,EAAkBf,EAAa,cAAcE,GAAWD,KAAA,gBAAAA,EAAU,OAAO;AAAA,QAClF,GAAGI,EAAO,EAAEL,EAAa,aAAa,CAAC;AAAA,QACvC,GAAGK,EAAO,EAAEL,EAAa,aAAa,CAAC;AAAA,QACvC,QAAM;AAAA,QACN,eAAAQ;AAAA,QACA,OAAOR,EAAa;AAAA,QACpB,SAASA,EAAa;AAAA,QACtB,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACJ;AAER,CAAC;AAED,SAASe,EAAkBC,GAAUd,GAAuBe,IAA4B,CAAA,GAAI;AACxF,QAAMC,IAAMF,EAAI,MACVG,IAAQ,CAAC,MAAMC,EAAaJ,EAAI,CAAC,CAAC,IAAI,MAAMI,EAAaJ,EAAI,CAAC,CAAC,EAAE;AACvE,EAAId,EAAU,SACViB,EAAM,QAAQ,GAAGjB,EAAU,KAAK,KAAKgB,EAAIhB,EAAU,KAAK,CAAC,EAAE;AAE/D,aAAWmB,KAAUJ;AACjB,IAAAE,EAAM,KAAK,GAAGE,EAAO,KAAK,KAAKH,EAAIG,EAAO,eAAeA,EAAO,KAAK,CAAC,EAAE;AAE5E,SAAOF;AACX;"}

package/dist/scatterplot/components/ChartTrendsData.d.ts

@@ -0,0 +1,11 @@
+import { TrendsData } from '../linearRegression';
+import { AesGetters, ChartScales } from './types';
+interface Props {
+    trendsData: TrendsData[keyof TrendsData] | null;
+    width: number;
+    scales: ChartScales;
+    aesGetters: AesGetters;
+}
+export declare const ChartTrendsData: import('react').MemoExoticComponent<({ width, scales, trendsData, aesGetters, }: Props) => (import("react/jsx-runtime").JSX.Element | null)[] | null>;
+export {};
+//# sourceMappingURL=ChartTrendsData.d.ts.map

package/dist/scatterplot/components/ChartTrendsData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTrendsData.d.ts","sourceRoot":"","sources":["../../../src/scatterplot/components/ChartTrendsData.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EACR,UAAU,EACV,WAAW,EACd,MAAM,SAAS,CAAC;AAEjB,UAAU,KAAK;IACX,UAAU,EAAE,UAAU,CAAC,MAAM,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,mFAKzB,KAAK,+DAgCN,CAAC"}

package/dist/scatterplot/components/ChartTrendsData.js

@@ -0,0 +1,65 @@
+import { j as n } from "../../node_modules/react/jsx-runtime.js";
+import $ from "../../node_modules/lodash/lodash.js";
+import { r as g } from "../../_virtual/index.js";
+import { numberFormat as i } from "../../utils/numberFormat.js";
+const b = g.memo(({
+  width: r,
+  scales: e,
+  trendsData: t,
+  aesGetters: o
+}) => t && t.map(({ predict: l, getArea: a, data: d, bounded: h, xBounds: j, stats: y }, c) => {
+  const [p, f] = h ? j : e.x.domain(), u = (f - p) / 15, x = l(p), m = l(f);
+  if (isNaN(x) || isNaN(m))
+    return null;
+  const s = o.trendColor(d);
+  return /* @__PURE__ */ n.jsxs("g", { children: [
+    /* @__PURE__ */ n.jsx("text", { y: c * 20 + 20, fill: s, x: r - 8, textAnchor: "end", children: F(y) }),
+    /* @__PURE__ */ n.jsx(
+      "path",
+      {
+        d: a(e.x, e.y, $.range(p, f + u / 2, u)),
+        fill: s,
+        opacity: 0.2
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      "line",
+      {
+        x1: e.x(p),
+        x2: e.x(f),
+        y1: e.y(x),
+        y2: e.y(m),
+        stroke: s
+      }
+    )
+  ] }, c);
+}));
+function C(r) {
+  return typeof r.r2 > "u" ? null : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx("tspan", { children: "R" }),
+    /* @__PURE__ */ n.jsx("tspan", { fontSize: "10px", dy: "-8", children: "2" }),
+    /* @__PURE__ */ n.jsx("tspan", { dy: "8", children: ` = ${i(r.r2)}` })
+  ] });
+}
+function E(r) {
+  return typeof r.pValue > "u" ? null : /* @__PURE__ */ n.jsx("tspan", { children: `p-value = ${i(r.pValue)}` });
+}
+function N(r) {
+  if (typeof r.coefficients > "u")
+    return null;
+  const { slope: e, slopeError: t, intercept: o, interceptError: l } = r.coefficients;
+  return /* @__PURE__ */ n.jsx("tspan", { children: /* @__PURE__ */ n.jsx("tspan", { children: `slope = ${i(e)} ± ${i(t)}, intercept = ${i(o)} ± ${i(l)}` }) });
+}
+function F(r) {
+  const e = [C(r), E(r), N(r)].filter(
+    (t) => t !== null
+  );
+  return /* @__PURE__ */ n.jsx(n.Fragment, { children: e.map((t, o) => /* @__PURE__ */ n.jsxs("tspan", { children: [
+    t,
+    /* @__PURE__ */ n.jsx("tspan", { children: o < e.length - 1 && ", " })
+  ] }, o)) });
+}
+export {
+  b as ChartTrendsData
+};
+//# sourceMappingURL=ChartTrendsData.js.map