@milaboratories/miplots4 1.0.129 → 1.0.131

package/dist/scatterplot/components/ChartLayersData.js

@@ -1,204 +1,189 @@
-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(({
+import { j as s } from "../../node_modules/react/jsx-runtime.js";
+import { r as c } from "../../_virtual/index.js";
+import { getLineShape as L } from "../../utils/getLineShape.js";
+import { getPointShape as l } from "../../utils/getPointShape.js";
+import { TextMeasurer as C } from "../../utils/TextMeasurer/TextMeasurer.js";
+import { getLabelMinX as k, getLabelMinY as v, createLabelPositioner as M } from "../utils/getVisibleLabels.js";
+import D from "../../node_modules/d3-shape/src/line.js";
+import $ from "../../node_modules/d3-shape/src/curve/basis.js";
+const w = 3, _ = c.memo(({
   width: t,
-  height: r,
-  scales: n,
-  dotsData: e,
-  layersData: i,
-  aesGetters: o,
+  height: e,
+  scales: i,
+  dotsData: o,
+  layersData: r,
+  aesGetters: n,
   onMouseEnterDot: d,
-  onMouseLeaveDot: s
-}) => i.map((m, x) => {
+  onMouseLeaveDot: p
+}) => r.map((m, x) => {
   if (m.type === "dots")
-    return /* @__PURE__ */ a.jsx(
-      $,
+    return /* @__PURE__ */ s.jsx(
+      B,
       {
         width: t,
-        height: r,
-        scales: n,
-        dotsData: e,
-        layersData: i,
-        aesGetters: o,
+        height: e,
+        scales: i,
+        dotsData: o,
+        layersData: r,
+        aesGetters: n,
         onMouseEnterDot: d,
-        onMouseLeaveDot: s
+        onMouseLeaveDot: p
       },
       m.type + x
     );
   if (m.type === "curve")
-    return /* @__PURE__ */ a.jsx(
-      B,
+    return /* @__PURE__ */ s.jsx(
+      b,
       {
         layer: m,
-        scales: n,
-        aesGetters: o
+        scales: i,
+        aesGetters: n
       },
       m.type + x
     );
-})), $ = p.memo(({
+})), B = c.memo(({
   width: t,
-  height: r,
-  scales: n,
-  dotsData: e,
-  layersData: i,
-  aesGetters: o,
+  height: e,
+  scales: i,
+  dotsData: o,
+  layersData: r,
+  aesGetters: n,
   onMouseEnterDot: d,
-  onMouseLeaveDot: s
+  onMouseLeaveDot: p
 }) => {
-  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,
+  const { dots: m } = o, [x, u] = c.useState(null), h = c.useMemo(() => r.findIndex((a) => a.type === "dots") !== -1, [r]), f = c.useMemo(() => h ? W(
+    m,
+    i,
+    t,
+    e,
+    n
+  ) : [], [m, i.x, i.y, t, e, n, h]);
+  return /* @__PURE__ */ s.jsxs("g", { children: [
+    /* @__PURE__ */ s.jsx(
+      z,
       {
-        scales: n,
-        dotsData: e,
-        aesGetters: o,
+        scales: i,
+        dotsData: o,
+        aesGetters: n,
         onMouseEnter: d,
-        onMouseLeave: s
+        onMouseLeave: p
       }
     ),
-    /* @__PURE__ */ a.jsx(
-      F,
+    /* @__PURE__ */ s.jsx(
+      P,
       {
-        labels: b,
-        onMouseEnter: (h) => c(h),
-        onMouseLeave: () => c(null)
+        labels: f,
+        onMouseEnter: (a) => u(a),
+        onMouseLeave: () => u(null)
       }
     ),
-    x && /* @__PURE__ */ a.jsxs(
+    x && /* @__PURE__ */ s.jsxs(
       "g",
       {
-        transform: `translate(${n.x(x.x)},${n.y(x.y)})`,
+        transform: `translate(${i.x(x.x)},${i.y(x.y)})`,
         children: [
-          u(
-            o.dotShape(x.data),
-            o.dotSize(x.data) + 1,
+          l(
+            n.dotShape(x.idx),
+            n.dotSize(x.idx) + 1,
             "white",
             "white"
           ),
-          u(
-            o.dotShape(x.data),
-            o.dotSize(x.data),
-            o.dotColor(x.data)
+          l(
+            n.dotShape(x.idx),
+            n.dotSize(x.idx),
+            n.dotColor(x.idx)
           )
         ]
       },
       "activeDot"
     )
   ] });
-}), B = p.memo(({
+}), b = c.memo(({
   layer: t,
-  scales: r,
-  aesGetters: n
+  scales: e,
+  aesGetters: i
 }) => {
   if (t.type === "curve" && !t.info.smoothing)
-    return t.geoms.map((e, i) => /* @__PURE__ */ a.jsx("g", { children: /* @__PURE__ */ a.jsx(
+    return t.geoms.map((o, r) => /* @__PURE__ */ s.jsx("g", { children: /* @__PURE__ */ s.jsx(
       "polyline",
       {
-        points: e.dots.map((o) => `${r.x(o.x)},${r.y(o.y)}`).join(" "),
+        points: o.dots.map((n) => `${e.x(n.x)},${e.y(n.y)}`).join(" "),
         fill: "none",
-        stroke: n.lineColor(e.data),
+        stroke: i.lineColor(o.dots[0].idx),
         strokeWidth: t.info.aes.lineWidth,
-        strokeDasharray: g(t.info.aes.lineShape)
+        strokeDasharray: L(t.info.aes.lineShape)
       }
-    ) }, i));
+    ) }, r));
   if (t.type === "curve" && t.info.smoothing)
-    return t.geoms.map((e, i) => /* @__PURE__ */ a.jsx("g", { children: /* @__PURE__ */ a.jsx(
+    return t.geoms.map((o, r) => /* @__PURE__ */ s.jsx("g", { children: /* @__PURE__ */ s.jsx(
       "path",
       {
-        d: k().curve(v).x((o) => r.x(o.x)).y((o) => r.y(o.y))(e.dots) ?? "",
+        d: D().curve($).x((n) => e.x(n.x)).y((n) => e.y(n.y))(o.dots) ?? "",
         fill: "none",
-        stroke: n.lineColor(e.data),
+        stroke: i.lineColor(o.dots[0].idx),
         strokeWidth: t.info.aes.lineWidth,
-        strokeDasharray: g(t.info.aes.lineShape)
+        strokeDasharray: L(t.info.aes.lineShape)
       }
-    ) }, i));
-}), D = p.memo(({
+    ) }, r));
+}), z = c.memo(({
   scales: t,
-  dotsData: r,
-  aesGetters: n,
-  onMouseEnter: e,
-  onMouseLeave: i
+  dotsData: e,
+  aesGetters: i,
+  onMouseEnter: o,
+  onMouseLeave: r
 }) => {
-  const { dots: o } = r;
-  return /* @__PURE__ */ a.jsx(a.Fragment, { children: o.map((d, s) => /* @__PURE__ */ a.jsx(
-    E,
+  const { dots: n } = e;
+  return /* @__PURE__ */ s.jsx(s.Fragment, { children: n.map((d, p) => /* @__PURE__ */ s.jsx(
+    F,
     {
       dot: d,
       scales: t,
-      aesGetters: n,
-      onMouseEnter: e,
-      onMouseLeave: i
+      aesGetters: i,
+      onMouseEnter: o,
+      onMouseLeave: r
     },
-    s
+    p
   )) });
-}), E = ({
+}), F = ({
   dot: t,
-  scales: r,
-  aesGetters: n,
-  onMouseEnter: e,
-  onMouseLeave: i
-}) => /* @__PURE__ */ a.jsx(
+  scales: e,
+  aesGetters: i,
+  onMouseEnter: o,
+  onMouseLeave: r
+}) => /* @__PURE__ */ s.jsx(
   "g",
   {
-    transform: `translate(${r.x(t.x)},${r.y(t.y)})`,
+    transform: `translate(${e.x(t.x)},${e.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)
+    onMouseOver: () => o == null ? void 0 : o(t),
+    onMouseLeave: () => r == null ? void 0 : r(t),
+    children: l(
+      i.dotShape(t.idx),
+      i.dotSize(t.idx),
+      i.dotColor(t.idx)
     )
   }
-), F = p.memo(({
+), P = c.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(
+  onMouseEnter: e,
+  onMouseLeave: i
+}) => /* @__PURE__ */ s.jsx(s.Fragment, { children: t.map((o, r) => {
+  const { name: n, height: d, width: p } = o;
+  return /* @__PURE__ */ s.jsxs("g", { transform: `translate(${k(o)},${v(o)})`, children: [
+    /* @__PURE__ */ s.jsx(
       "rect",
       {
         x: "0",
         y: "0",
-        width: m,
+        width: p,
         height: d,
         fill: "transparent",
         stroke: "none",
-        onMouseEnter: () => r(e.dot),
-        onMouseLeave: () => n(e.dot)
+        onMouseEnter: () => e(o.dot),
+        onMouseLeave: () => i(o.dot)
       }
     ),
-    /* @__PURE__ */ a.jsx(
+    /* @__PURE__ */ s.jsx(
       "text",
       {
         x: 0,
@@ -210,41 +195,38 @@ const l = 3, Y = p.memo(({
         fontFamily: "Manrope",
         fontSize: "16px",
         dominantBaseline: "middle",
-        children: o
+        children: n
       }
     )
-  ] }, 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)
+  ] }, r);
+}) }));
+function W(t, e, i, o, r) {
+  const n = new C("16px Manrope"), d = M(i, o), p = [];
+  for (let m = 0; m < t.length; m++) {
+    const x = t[m];
+    if (x.label == null)
       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
+    const u = String(x.label), h = n.getTextMetrics(u), f = e.x(x.x), a = e.y(x.y), j = h.width, y = h.actualBoundingBoxAscent + h.actualBoundingBoxDescent, S = r.dotSize(x.idx) + w, g = d(f, a, j, y, S);
+    g && p.push({
+      x: f,
+      y: a,
+      dot: x,
+      name: u,
+      width: j,
+      height: y,
+      padding: S,
+      xPosition: g[0],
+      yPosition: g[1]
     });
   }
-  return i;
+  return p;
 }
 export {
-  B as ChartCurveLayer,
-  E as ChartDot,
-  D as ChartDots,
-  F as ChartLabels,
-  $ as ChartLayerDots,
-  Y as ChartLayersData
+  b as ChartCurveLayer,
+  F as ChartDot,
+  z as ChartDots,
+  P as ChartLabels,
+  B as ChartLayerDots,
+  _ as ChartLayersData
 };
 //# sourceMappingURL=ChartLayersData.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"ChartLayersData.js","sources":["../../../src/scatterplot/components/ChartLayersData.tsx"],"sourcesContent":["import { curveBasis, line } from 'd3-shape';\nimport { memo, useMemo, useState } from 'react';\nimport { getLineShape } from '../../utils/getLineShape';\nimport { getPointShape } from '../../utils/getPointShape';\nimport { TextMeasurer } from '../../utils/TextMeasurer/TextMeasurer';\nimport type { Dot, GroupedDots } from '../dots';\nimport type { ScatterplotLayerData } from '../getLayersData';\nimport type { Label } from '../utils/getVisibleLabels';\nimport { createLabelPositioner, getLabelMinX, getLabelMinY } 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    const hasLayerDots = useMemo(() => layersData.findIndex(layer => layer.type === 'dots') !== -1, [layersData]);\n    \n    const labels = useMemo<Label[]>(() =>{\n        if (!hasLayerDots) return [];\n        return computeLabels(\n            dots,\n            scales,\n            width,\n            height,\n            aesGetters,\n        );\n    }, [dots, scales.x, scales.y, width, height, aesGetters, hasLayerDots]);\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.idx),\n                        aesGetters.dotSize(activeDot.idx) + 1,\n                        'white',\n                        'white'\n                    )}\n                    {getPointShape(\n                        aesGetters.dotShape(activeDot.idx),\n                        aesGetters.dotSize(activeDot.idx),\n                        aesGetters.dotColor(activeDot.idx)\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.dots[0].idx)}\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.dots[0].idx)}\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.idx),\n            aesGetters.dotSize(dot.idx),\n            aesGetters.dotColor(dot.idx)\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,  width} = label;\n            return (\n                <g key={idx} transform={`translate(${getLabelMinX(label)},${getLabelMinY(label)})`}>\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\nfunction computeLabels(dots: Dot[], scales: ChartScales, chartWidth: number, chartHeight: number, aesGetters: AesGetters): Label[] {\n    const textMeasurer = new TextMeasurer('16px Manrope');\n    const getPosition = createLabelPositioner(chartWidth, chartHeight);\n    const labels: Label[] = [];\n\n    for (let i = 0; i < dots.length; i++) {\n        const dot = dots[i];\n        if (dot.label == null) {\n            continue;\n        }\n        const name = String(dot.label);\n        const metrics = textMeasurer.getTextMetrics(name);\n        const x = scales.x(dot.x);\n        const y = scales.y(dot.y);\n        const w = metrics.width;\n        const h = (metrics.actualBoundingBoxAscent) + (metrics.actualBoundingBoxDescent);\n        const p = aesGetters.dotSize(dot.idx) + LABEL_OFFSET;\n        const position = getPosition(x, y, w, h, p);\n        if (!position) {\n            continue;\n        }\n\n        labels.push({\n            x,\n            y,\n            dot,\n            name,\n            width: w,\n            height: h,\n            padding: p,\n            xPosition: position[0],\n            yPosition: position[1],\n        } satisfies Label);\n    }\n\n    return labels;\n}\n"],"names":["LABEL_OFFSET","ChartLayersData","memo","width","height","scales","dotsData","layersData","aesGetters","onMouseEnterDot","onMouseLeaveDot","layer","idx","jsx","ChartLayerDots","ChartCurveLayer","dots","activeDot","setActiveDot","useState","hasLayerDots","useMemo","labels","computeLabels","ChartDots","ChartLabels","dot","jsxs","getPointShape","curve","d","getLineShape","line","curveBasis","onMouseEnter","onMouseLeave","Fragment","ChartDot","label","name","getLabelMinX","getLabelMinY","chartWidth","chartHeight","textMeasurer","TextMeasurer","getPosition","createLabelPositioner","i","metrics","x","y","w","h","p","position"],"mappings":"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"}

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

@@ -1 +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"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/scatterplot/components/ChartTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAG1E,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,oDA6CN,CAAC"}

package/dist/scatterplot/components/ChartTooltip.js

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

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

@@ -1 +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;"}
+{"version":3,"file":"ChartTooltip.js","sources":["../../../src/scatterplot/components/ChartTooltip.tsx"],"sourcesContent":["import {format} from 'd3-format';\nimport { memo, useMemo } from 'react';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport { useDataFrame } from '../../common/useDataFrame';\nimport type { DataFrame } from '../../DataFrame';\nimport type { ColumnName } from '../../types';\nimport type { Dot } from '../dots';\nimport type { ScatterplotSettingsImpl } from '../ScatterplotSettingsImpl';\nimport {formatColumnValue} from '../utils/formatColumnValue';\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 dataFrame = useDataFrame();\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(dataFrame, tooltipsData.selectedData, 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(dataFrame: DataFrame, dot: Dot, columnsList: ColumnName[] = []) {\n    const lines: string[] = [];\n    for (const column of columnsList) {\n        const columnFormatter = column?.format ? format(column.format) : undefined;\n        lines.push(`${column.label}: ${formatColumnValue(dataFrame, dot.idx, column, columnFormatter)}`);\n    }\n    return lines;\n}\n"],"names":["ZERO_SIDE_DISTANCES","ChartTooltip","memo","tooltipsData","tooltips","keyColumn","chartSizes","dimensions","scales","aesGetters","dataFrame","useDataFrame","padding","sideDistances","useMemo","jsxs","Fragment","jsx","ChartDot","Tooltip","getTooltipContent","dot","columnsList","lines","column","columnFormatter","format","formatColumnValue"],"mappings":";;;;;;;AA8BA,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,IAAYC,EAAA,GACZC,IAAUL,KAAA,gBAAAA,EAAY,SAEtBM,IAAgBC,EAAAA,QAAQ,MACtB,CAACP,KAAc,CAACC,KAAU,CAACI,IACpBZ,IAGH;AAAA,IACJ,MAAMO,EAAW,OAAOK,EAAQ;AAAA,IAChC,OAAON,EAAW,cAAcC,EAAW,OAAOK,EAAQ;AAAA,IAC1D,KAAKL,EAAW,MAAMK,EAAQ;AAAA,IAC9B,QAAQN,EAAW,eAAeC,EAAW,MAAMK,EAAQ;AAAA,EAAA,GAEhE,CAACL,GAAYK,GAASN,CAAU,CAAC;AAEpC,SAAI,CAACC,KAAc,CAACC,KAAU,CAACI,KAAW,CAACT,EAAa,gBAAgB,CAACC,EAAS,OACvE,OAIPW,gBAAAA,EAAAA,KAAAC,YAAA,EACK,UAAA;AAAA,IAAAb,EAAa,SACVY,gBAAAA,EAAAA,KAAC,KAAA,EAAE,WAAW,aAAaR,EAAW,OAAOK,EAAQ,IAAI,KAAKL,EAAW,MAAMK,EAAQ,GAAG,KACtF,UAAA;AAAA,MAAAK,gBAAAA,EAAAA,IAAC,QAAA,EAAK,OAAOX,EAAW,YAAY,QAAQA,EAAW,aAAa,MAAK,2BAAA,CAA0B;AAAA,MACnGW,gBAAAA,EAAAA;AAAAA,QAACC;AAAA,QAAA;AAAA,UACG,KAAKf,EAAa;AAAA,UAClB,QAAAK;AAAA,UACA,YAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,GACJ;AAAA,IAEJQ,gBAAAA,EAAAA;AAAAA,MAACE;AAAA,MAAA;AAAA,QACG,SAASC,EAAkBV,GAAWP,EAAa,cAAcC,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,eAAAU;AAAA,QACA,OAAOV,EAAa;AAAA,QACpB,SAASA,EAAa;AAAA,QACtB,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACJ;AAER,CAAC;AAED,SAASiB,EAAkBV,GAAsBW,GAAUC,IAA4B,CAAA,GAAI;AACvF,QAAMC,IAAkB,CAAA;AACxB,aAAWC,KAAUF,GAAa;AAC9B,UAAMG,IAAkBD,KAAA,QAAAA,EAAQ,SAASE,EAAOF,EAAO,MAAM,IAAI;AACjE,IAAAD,EAAM,KAAK,GAAGC,EAAO,KAAK,KAAKG,EAAkBjB,GAAWW,EAAI,KAAKG,GAAQC,CAAe,CAAC,EAAE;AAAA,EACnG;AACA,SAAOF;AACX;"}