@milaboratories/miplots4 1.0.176 → 1.0.178

package/dist/histogram/components/Chart.js

@@ -1,150 +1,128 @@
-import { j as t } from "../../_virtual/jsx-runtime.js";
-import { r as P } from "../../_virtual/index.js";
-import { r as Q } from "../../_virtual/index2.js";
-import { ContinuousAxis as I } from "../../common/ContinuousAxis.js";
-import { ContinuousGrid as V } from "../../common/ContinuousGrid.js";
-import { Tooltip as S } from "../../common/Tooltip.js";
-import { BLACK as v } from "../../constants.js";
-import { numberFormat as W } from "../../utils/numberFormat.js";
-import { DEFAULT_TICKS_SIZE as k, FACET_TITLE_LINE as T, TITLE_LINE as D } from "../constants.js";
-function ee(e) {
-  return typeof e == "string" ? e : e.value;
+import { BLACK as e } from "../../constants.js";
+import { numberFormat as t } from "../../utils/numberFormat.js";
+import { Tooltip as n } from "../../common/Tooltip.js";
+import { ContinuousAxis as r } from "../../common/ContinuousAxis.js";
+import { ContinuousGrid as i } from "../../common/ContinuousGrid.js";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+function l(e) {
+	return typeof e == "string" ? e : e.value;
 }
-function te(e, l) {
-  const c = [
-    `Amount: ${e.count}`,
-    `(from ${W(e.x)}, to ${W(e.x + e.width)})`
-  ];
-  return e.groupingKey !== "null" && c.push(`${l[e.groupingKey] ?? e.groupingKey}`), c;
+function u(e, n) {
+	let r = [`Amount: ${e.count}`, `(from ${t(e.x)}, to ${t(e.x + e.width)})`];
+	return e.groupingKey !== "null" && r.push(`${n[e.groupingKey] ?? e.groupingKey}`), r;
 }
-function X(e, l, c, o) {
-  return l === "vertical" ? e : e + c * o;
+function d(e, t, n, r) {
+	return t === "vertical" ? e : e + n * r;
 }
-function _(e, l, c, o) {
-  return l(c === "vertical" ? o === "straight" ? e.y.straight : e.y.reverse : e.count);
+function f(e, t, n, r) {
+	return t(n === "vertical" ? r === "straight" ? e.y.straight : e.y.reverse : e.count);
 }
-function fe({
-  facetKey: e,
-  width: l,
-  height: c,
-  dimensions: o,
-  scales: r,
-  xAxis: x,
-  yAxis: a,
-  frameType: $,
-  histogramData: j,
-  facetSettings: u,
-  captionsSizes: oe,
-  facetTitle: E,
-  layers: z,
-  aesColorGetter: M,
-  groupingDirection: K,
-  groupingStack: f,
-  groupingLabels: Y,
-  chartSizes: m,
-  margins: p,
-  tooltipsContainer: w,
-  tooltipsData: n
-}) {
-  const [C, G] = P.useState(), { padding: i } = o, H = x.showTicks ? k : 0, N = a.showTicks ? k : 0, O = o.chartEdgeSides.includes("left") || !(u != null && u.sharedY), R = o.chartEdgeSides.includes("bottom") || !(u != null && u.sharedX), U = o.chartEdgeSides.includes("bottom"), L = j.groupingKeys, Z = j.histogramByGroupingKey[L[0]].bins[0], A = r.x(Z.width) - r.x(0), g = f === "vertical" ? A : A / L.length, b = {
-    left: p.left + o.left + i.left,
-    right: m.totalWidth - (p.left + o.left + i.left),
-    top: p.top + o.top + i.top,
-    bottom: m.totalHeight - (p.top + o.top + i.top)
-  }, q = C && n.fixed, y = !1;
-  return /* @__PURE__ */ t.jsxs("g", { transform: `translate(${o.left + i.left},${o.top + i.top})`, children: [
-    y,
-    E.length && /* @__PURE__ */ t.jsxs("g", { children: [
-      $ === "full" && /* @__PURE__ */ t.jsx("rect", { x: "0", y: -i.top, height: i.top, width: l, fill: "#F7F8FA", stroke: v }),
-      E.map((s, h) => {
-        const B = E.length, d = (i.top - T * B) / 2;
-        return /* @__PURE__ */ t.jsx(
-          "text",
-          {
-            fontSize: "14px",
-            fontWeight: "500",
-            fill: v,
-            x: l / 2,
-            dy: d + T / 2 - i.top,
-            y: h * T,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s
-          },
-          h
-        );
-      })
-    ] }),
-    /* @__PURE__ */ t.jsxs("g", { dominantBaseline: "central", textAnchor: "middle", fontWeight: "500", fontSize: "14px", fill: v, children: [
-      U && x.title && /* @__PURE__ */ t.jsx("text", { x: l / 2, y: c + i.bottom - D / 2, children: ee(x.title) }),
-      y
-    ] }),
-    /* @__PURE__ */ t.jsx(
-      V,
-      {
-        width: l,
-        height: c,
-        scaleX: r.x,
-        scaleY: r.y,
-        axisX: x,
-        axisY: a,
-        frameType: $
-      }
-    ),
-    R && /* @__PURE__ */ t.jsxs("g", { transform: `translate(0,${c})`, children: [
-      /* @__PURE__ */ t.jsx(I, { scale: r.x, orient: "bottom", tickSize: H, hiddenLabels: x.hiddenLabels }),
-      y
-    ] }),
-    O && /* @__PURE__ */ t.jsxs("g", { children: [
-      /* @__PURE__ */ t.jsx(I, { scale: r.y, orient: "left", tickSize: N, hiddenLabels: a.hiddenLabels }),
-      y
-    ] }),
-    z.map((s) => L.map(
-      (h, B) => j.histogramByGroupingKey[h].bins.map((d) => {
-        const J = q && n.selectedData === d, F = /* @__PURE__ */ t.jsx(
-          "rect",
-          {
-            x: X(r.x(d.x), f, B, g),
-            y: _(d, r.y, f, K),
-            fill: d.indexes.length > 0 ? M(s.aes.fillColor, d.indexes[0], d.count) : "",
-            stroke: s.aes.lineColor,
-            width: g,
-            height: r.y(0) - r.y(d.count),
-            opacity: s.aes.opacity ?? 1,
-            onMouseOver: () => n.onMouseEnter(d, e),
-            onMouseLeave: () => n.onMouseLeave()
-          },
-          `${h}-${d.x}`
-        );
-        return J ? Q.createPortal(F, C) : F;
-      })
-    )),
-    n.fixed && /* @__PURE__ */ t.jsx("rect", { width: m.chartWidth, height: m.chartHeight, fill: "rgba(255,255,255,0.8)" }),
-    /* @__PURE__ */ t.jsx(
-      "g",
-      {
-        ref: (s) => {
-          s && !C && G(s);
-        }
-      }
-    ),
-    n.selectedData && n.currentFacet === e && /* @__PURE__ */ t.jsx(
-      S,
-      {
-        content: te(n.selectedData, Y),
-        x: X(r.x(n.selectedData.x), f, n.selectedData.groupingKeyIdx, g) + g,
-        y: _(n.selectedData, r.y, f, K) + r.y(0) - r.y(n.selectedData.count / 2),
-        offset: 0,
-        active: !0,
-        fixed: n.fixed,
-        sideDistances: b,
-        container: w,
-        onClose: n.onClose
-      }
-    )
-  ] });
+function p({ facetKey: t, width: p, height: m, dimensions: h, scales: g, xAxis: _, yAxis: v, frameType: y, histogramData: b, facetSettings: x, captionsSizes: S, facetTitle: C, layers: w, aesColorGetter: T, groupingDirection: E, groupingStack: D, groupingLabels: O, chartSizes: k, margins: A, tooltipsContainer: j, tooltipsData: M }) {
+	let [N, P] = a(), { padding: F } = h, I = _.showTicks ? 4 : 0, L = v.showTicks ? 4 : 0, R = h.chartEdgeSides.includes("left") || !x?.sharedY, z = h.chartEdgeSides.includes("bottom") || !x?.sharedX, B = h.chartEdgeSides.includes("bottom"), V = b.groupingKeys, H = b.histogramByGroupingKey[V[0]].bins[0], U = g.x(H.width) - g.x(0), W = D === "vertical" ? U : U / V.length, G = {
+		left: A.left + h.left + F.left,
+		right: k.totalWidth - (A.left + h.left + F.left),
+		top: A.top + h.top + F.top,
+		bottom: k.totalHeight - (A.top + h.top + F.top)
+	}, K = N && M.fixed;
+	return /* @__PURE__ */ s("g", {
+		transform: `translate(${h.left + F.left},${h.top + F.top})`,
+		children: [
+			!1,
+			C.length && /* @__PURE__ */ s("g", { children: [y === "full" && /* @__PURE__ */ o("rect", {
+				x: "0",
+				y: -F.top,
+				height: F.top,
+				width: p,
+				fill: "#F7F8FA",
+				stroke: "#110529"
+			}), C.map((e, t) => {
+				let n = C.length, r = (F.top - 20 * n) / 2;
+				return /* @__PURE__ */ o("text", {
+					fontSize: "14px",
+					fontWeight: "500",
+					fill: "#110529",
+					x: p / 2,
+					dy: r + 20 / 2 - F.top,
+					y: t * 20,
+					textAnchor: "middle",
+					dominantBaseline: "central",
+					children: e
+				}, t);
+			})] }),
+			/* @__PURE__ */ s("g", {
+				dominantBaseline: "central",
+				textAnchor: "middle",
+				fontWeight: "500",
+				fontSize: "14px",
+				fill: e,
+				children: [B && _.title && /* @__PURE__ */ o("text", {
+					x: p / 2,
+					y: m + F.bottom - 20 / 2,
+					children: l(_.title)
+				}), !1]
+			}),
+			/* @__PURE__ */ o(i, {
+				width: p,
+				height: m,
+				scaleX: g.x,
+				scaleY: g.y,
+				axisX: _,
+				axisY: v,
+				frameType: y
+			}),
+			z && /* @__PURE__ */ s("g", {
+				transform: `translate(0,${m})`,
+				children: [/* @__PURE__ */ o(r, {
+					scale: g.x,
+					orient: "bottom",
+					tickSize: I,
+					hiddenLabels: _.hiddenLabels
+				}), !1]
+			}),
+			R && /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o(r, {
+				scale: g.y,
+				orient: "left",
+				tickSize: L,
+				hiddenLabels: v.hiddenLabels
+			}), !1] }),
+			w.map((e) => V.map((n, r) => b.histogramByGroupingKey[n].bins.map((i) => {
+				let a = K && M.selectedData === i, s = /* @__PURE__ */ o("rect", {
+					x: d(g.x(i.x), D, r, W),
+					y: f(i, g.y, D, E),
+					fill: i.indexes.length > 0 ? T(e.aes.fillColor, i.indexes[0], i.count) : "",
+					stroke: e.aes.lineColor,
+					width: W,
+					height: g.y(0) - g.y(i.count),
+					opacity: e.aes.opacity ?? 1,
+					onMouseOver: () => M.onMouseEnter(i, t),
+					onMouseLeave: () => M.onMouseLeave()
+				}, `${n}-${i.x}`);
+				return a ? c(s, N) : s;
+			}))),
+			M.fixed && /* @__PURE__ */ o("rect", {
+				width: k.chartWidth,
+				height: k.chartHeight,
+				fill: "rgba(255,255,255,0.8)"
+			}),
+			/* @__PURE__ */ o("g", { ref: (e) => {
+				e && !N && P(e);
+			} }),
+			M.selectedData && M.currentFacet === t && /* @__PURE__ */ o(n, {
+				content: u(M.selectedData, O),
+				x: d(g.x(M.selectedData.x), D, M.selectedData.groupingKeyIdx, W) + W,
+				y: f(M.selectedData, g.y, D, E) + g.y(0) - g.y(M.selectedData.count / 2),
+				offset: 0,
+				active: !0,
+				fixed: M.fixed,
+				sideDistances: G,
+				container: j,
+				onClose: M.onClose
+			})
+		]
+	});
 }
-export {
-  fe as Chart
-};
-//# sourceMappingURL=Chart.js.map
+export { p as Chart };
+
+//# sourceMappingURL=Chart.js.map

package/dist/histogram/components/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sources":["../../../src/histogram/components/Chart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ContinuousAxis } from '../../common/ContinuousAxis';\nimport { ContinuousGrid } from '../../common/ContinuousGrid';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport { BLACK } from '../../constants';\nimport type { ColumnName, FrameType } from '../../types';\nimport { numberFormat } from '../../utils/numberFormat';\nimport { DEFAULT_TICKS_SIZE, FACET_TITLE_LINE, TICK_OFFSET, TITLE_LINE } from '../constants';\nimport type { BinData, GroupedHistogramData } from '../getHistogramData';\nimport type { HistogramLayer, HistogramSettingsImpl } from '../HistogramSettingsImpl';\nimport type {\n    AesGetter, CaptionsSizes,\n    ChartDimensionsData,\n    ChartScales,\n    ChartSizes,\n    Margins\n} from './types';\n\nfunction getAxisTitle(title: string | ColumnName): string {\n    if (typeof title === 'string') {\n        return title;\n    }\n    return title.value;\n}\nfunction getTooltipContent(bin: BinData, groupingLabels:Record<string, string>) {\n    const lines =  [\n        `Amount: ${bin.count}`,\n        `(from ${numberFormat(bin.x)}, to ${numberFormat(bin.x + bin.width)})`\n    ];\n    if (bin.groupingKey !== 'null') {\n        lines.push(`${groupingLabels[bin.groupingKey] ?? bin.groupingKey}`);\n    }\n    return lines;\n}\n\nfunction getBinX(xPx:number, groupingStack: HistogramSettingsImpl['groupingStack'], keyIdx:number, width:number) {\n    return groupingStack === 'vertical'\n        ? xPx\n        : xPx + keyIdx * width;\n}\nfunction getBinY(bin:BinData, scaleY:ChartScales['y'], groupingStack: HistogramSettingsImpl['groupingStack'], groupingDirection: HistogramSettingsImpl['groupingDirection']) {\n    return groupingStack === 'vertical'\n        ? scaleY(groupingDirection === 'straight' ? bin.y.straight : bin.y.reverse)\n        : scaleY(bin.count);\n}\ninterface ChartProps {\n    facetKey: string;\n    width: number;\n    height: number;\n    dimensions: ChartDimensionsData;\n    scales: ChartScales;\n    xAxis: HistogramSettingsImpl['chartSettings']['xAxis'];\n    yAxis: HistogramSettingsImpl['chartSettings']['yAxis'];\n    frameType: FrameType;\n    facetSettings: HistogramSettingsImpl['facetSettings'];\n    margins: Margins;\n    chartSizes: ChartSizes;\n    captionsSizes: CaptionsSizes;\n    facetTitle: string[];\n    histogramData: GroupedHistogramData;\n    layers: HistogramLayer[];\n    aesColorGetter: AesGetter;\n    groupingDirection: HistogramSettingsImpl['groupingDirection'];\n    groupingStack: HistogramSettingsImpl['groupingStack'];\n    groupingLabels: Record<string, string>;\n    tooltipsContainer?: Element;\n    tooltipsData: TooltipsData<BinData>;\n}\n\nexport function Chart({\n    facetKey,\n    width,\n    height,\n    dimensions,\n    scales,\n    xAxis,\n    yAxis,\n    frameType,\n    histogramData,\n    facetSettings,\n    captionsSizes,\n    facetTitle,\n    layers,\n    aesColorGetter,\n    groupingDirection,\n    groupingStack,\n    groupingLabels,\n    chartSizes,\n    margins,\n    tooltipsContainer,\n    tooltipsData\n}: ChartProps) {\n    const [activeElementContainer, setActiveElementContainer] = useState<SVGGElement>();\n\n    const {padding} = dimensions;\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const needLeftAxis = dimensions.chartEdgeSides.includes('left') || !facetSettings?.sharedY;\n    const needBottomAxis = dimensions.chartEdgeSides.includes('bottom') || !facetSettings?.sharedX;\n    const needBottomAxisTitle = dimensions.chartEdgeSides.includes('bottom');\n    const groupingKeys = histogramData.groupingKeys;\n\n    const firstBin = histogramData.histogramByGroupingKey[groupingKeys[0]].bins[0];\n    const binWidth = scales.x(firstBin.width) - scales.x(0);\n    const partialBinWidth = groupingStack === 'vertical' ? binWidth : binWidth / groupingKeys.length;\n\n    const sideDistances = {\n        left: margins.left + dimensions.left + padding.left,\n        right: chartSizes.totalWidth - (margins.left + dimensions.left + padding.left),\n        top: margins.top + dimensions.top + padding.top,\n        bottom: chartSizes.totalHeight - (margins.top + dimensions.top + padding.top),\n    };\n\n    const dimmedBackground = activeElementContainer && tooltipsData.fixed;\n    const debug = false;\n    return (\n        <g transform={`translate(${dimensions.left + padding.left},${dimensions.top + padding.top})`}>\n            {debug && (\n                <g fill=\"none\" stroke=\"green\" strokeWidth=\"2px\">\n                    <rect width={width} height={padding.top} x={0} y={-padding.top} />\n                    <rect width={width} height={padding.bottom} x={0} y={height} />\n                    <rect width={padding.left} height={height} x={-padding.left} y={0} />\n                    <rect width={padding.right} height={height} x={width} y={0} />\n                </g>\n            )}\n            {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            <g dominantBaseline=\"central\" textAnchor=\"middle\" fontWeight=\"500\" fontSize=\"14px\" fill={BLACK}>\n                {needBottomAxisTitle && xAxis.title && (\n                    <text x={width / 2} y={height + padding.bottom - TITLE_LINE / 2}>\n                        {getAxisTitle(xAxis.title)}\n                    </text>\n                )}\n                {debug && needBottomAxisTitle && (\n                    <rect\n                        x=\"0\"\n                        y={height + padding.bottom - TITLE_LINE}\n                        width={width}\n                        height={TITLE_LINE}\n                        fill=\"none\"\n                        stroke=\"black\"\n                    />\n                )}\n            </g>\n            <ContinuousGrid\n                width={width}\n                height={height}\n                scaleX={scales.x}\n                scaleY={scales.y}\n                axisX={xAxis}\n                axisY={yAxis}\n                frameType={frameType}\n            />\n            {needBottomAxis && (\n                <g transform={`translate(0,${height})`}>\n                    <ContinuousAxis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} hiddenLabels={xAxis.hiddenLabels} />\n                    {debug && (\n                        <rect\n                            x=\"0\"\n                            y={tickSizeX + TICK_OFFSET}\n                            width={width}\n                            height={TITLE_LINE}\n                            fill=\"none\"\n                            stroke=\"black\"\n                        />\n                    )}\n                </g>\n            )}\n            {needLeftAxis && (\n                <g>\n                    <ContinuousAxis scale={scales.y} orient=\"left\" tickSize={tickSizeY} hiddenLabels={yAxis.hiddenLabels} />\n                    {debug && (\n                        <rect\n                            x={-tickSizeY - TICK_OFFSET - captionsSizes.yAxisCaptionsWidth}\n                            y=\"0\"\n                            width={captionsSizes.yAxisCaptionsWidth}\n                            height={height}\n                            fill=\"none\"\n                            stroke=\"black\"\n                        />\n                    )}\n                </g>\n            )}\n            {layers.map(layer => groupingKeys.map((groupingKey, keyIdx) =>\n                histogramData.histogramByGroupingKey[groupingKey].bins.map((bin) => {\n                    const highlighted = dimmedBackground && tooltipsData.selectedData === bin;\n                    const binElement = (\n                        <rect\n                            key={`${groupingKey}-${bin.x}`}\n                            x={getBinX(scales.x(bin.x), groupingStack, keyIdx, partialBinWidth)}\n                            y={getBinY(bin, scales.y, groupingStack, groupingDirection)}\n                            fill={bin.indexes.length > 0 ? aesColorGetter(layer.aes.fillColor, bin.indexes[0], bin.count) : ''}\n                            stroke={layer.aes.lineColor}\n                            width={partialBinWidth}\n                            height={scales.y(0) - scales.y(bin.count)}\n                            opacity={layer.aes.opacity ?? 1}\n                            onMouseOver={() => tooltipsData.onMouseEnter(bin, facetKey)}\n                            onMouseLeave={() => tooltipsData.onMouseLeave()}\n                        />\n                    );\n                    return highlighted ? createPortal(binElement, activeElementContainer) : binElement;\n                })\n            ))}\n            {tooltipsData.fixed && <rect width={chartSizes.chartWidth} height={chartSizes.chartHeight} fill=\"rgba(255,255,255,0.8)\"/>}\n            <g ref={node => {\n                if (node && !activeElementContainer) {\n                    setActiveElementContainer(node);\n                }\n            }}\n            />\n            {tooltipsData.selectedData && tooltipsData.currentFacet === facetKey && (\n                <Tooltip\n                    content={getTooltipContent(tooltipsData.selectedData, groupingLabels)}\n                    x={getBinX(scales.x(tooltipsData.selectedData.x), groupingStack, tooltipsData.selectedData.groupingKeyIdx, partialBinWidth) + partialBinWidth}\n                    y={getBinY(tooltipsData.selectedData, scales.y, groupingStack, groupingDirection) + scales.y(0) - scales.y(tooltipsData.selectedData.count / 2)}\n                    offset={0}\n                    active\n                    fixed={tooltipsData.fixed}\n                    sideDistances={sideDistances}\n                    container={tooltipsContainer}\n                    onClose={tooltipsData.onClose}\n                />\n            )}\n        </g>\n    );\n}\n"],"names":["getAxisTitle","title","getTooltipContent","bin","groupingLabels","lines","numberFormat","getBinX","xPx","groupingStack","keyIdx","width","getBinY","scaleY","groupingDirection","Chart","facetKey","height","dimensions","scales","xAxis","yAxis","frameType","histogramData","facetSettings","captionsSizes","facetTitle","layers","aesColorGetter","chartSizes","margins","tooltipsContainer","tooltipsData","activeElementContainer","setActiveElementContainer","useState","padding","tickSizeX","DEFAULT_TICKS_SIZE","tickSizeY","needLeftAxis","needBottomAxis","needBottomAxisTitle","groupingKeys","firstBin","binWidth","partialBinWidth","sideDistances","dimmedBackground","debug","jsxs","jsx","BLACK","titleLine","idx","linesCount","topOffset","FACET_TITLE_LINE","TITLE_LINE","ContinuousGrid","ContinuousAxis","layer","groupingKey","highlighted","binElement","createPortal","node","Tooltip"],"mappings":"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"}
+{"version":3,"file":"Chart.js","names":[],"sources":["../../../src/histogram/components/Chart.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ContinuousAxis } from '../../common/ContinuousAxis';\nimport { ContinuousGrid } from '../../common/ContinuousGrid';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport { BLACK } from '../../constants';\nimport type { ColumnName, FrameType } from '../../types';\nimport { numberFormat } from '../../utils/numberFormat';\nimport { DEFAULT_TICKS_SIZE, FACET_TITLE_LINE, TICK_OFFSET, TITLE_LINE } from '../constants';\nimport type { BinData, GroupedHistogramData } from '../getHistogramData';\nimport type { HistogramLayer, HistogramSettingsImpl } from '../HistogramSettingsImpl';\nimport type {\n    AesGetter, CaptionsSizes,\n    ChartDimensionsData,\n    ChartScales,\n    ChartSizes,\n    Margins\n} from './types';\n\nfunction getAxisTitle(title: string | ColumnName): string {\n    if (typeof title === 'string') {\n        return title;\n    }\n    return title.value;\n}\nfunction getTooltipContent(bin: BinData, groupingLabels:Record<string, string>) {\n    const lines =  [\n        `Amount: ${bin.count}`,\n        `(from ${numberFormat(bin.x)}, to ${numberFormat(bin.x + bin.width)})`\n    ];\n    if (bin.groupingKey !== 'null') {\n        lines.push(`${groupingLabels[bin.groupingKey] ?? bin.groupingKey}`);\n    }\n    return lines;\n}\n\nfunction getBinX(xPx:number, groupingStack: HistogramSettingsImpl['groupingStack'], keyIdx:number, width:number) {\n    return groupingStack === 'vertical'\n        ? xPx\n        : xPx + keyIdx * width;\n}\nfunction getBinY(bin:BinData, scaleY:ChartScales['y'], groupingStack: HistogramSettingsImpl['groupingStack'], groupingDirection: HistogramSettingsImpl['groupingDirection']) {\n    return groupingStack === 'vertical'\n        ? scaleY(groupingDirection === 'straight' ? bin.y.straight : bin.y.reverse)\n        : scaleY(bin.count);\n}\ninterface ChartProps {\n    facetKey: string;\n    width: number;\n    height: number;\n    dimensions: ChartDimensionsData;\n    scales: ChartScales;\n    xAxis: HistogramSettingsImpl['chartSettings']['xAxis'];\n    yAxis: HistogramSettingsImpl['chartSettings']['yAxis'];\n    frameType: FrameType;\n    facetSettings: HistogramSettingsImpl['facetSettings'];\n    margins: Margins;\n    chartSizes: ChartSizes;\n    captionsSizes: CaptionsSizes;\n    facetTitle: string[];\n    histogramData: GroupedHistogramData;\n    layers: HistogramLayer[];\n    aesColorGetter: AesGetter;\n    groupingDirection: HistogramSettingsImpl['groupingDirection'];\n    groupingStack: HistogramSettingsImpl['groupingStack'];\n    groupingLabels: Record<string, string>;\n    tooltipsContainer?: Element;\n    tooltipsData: TooltipsData<BinData>;\n}\n\nexport function Chart({\n    facetKey,\n    width,\n    height,\n    dimensions,\n    scales,\n    xAxis,\n    yAxis,\n    frameType,\n    histogramData,\n    facetSettings,\n    captionsSizes,\n    facetTitle,\n    layers,\n    aesColorGetter,\n    groupingDirection,\n    groupingStack,\n    groupingLabels,\n    chartSizes,\n    margins,\n    tooltipsContainer,\n    tooltipsData\n}: ChartProps) {\n    const [activeElementContainer, setActiveElementContainer] = useState<SVGGElement>();\n\n    const {padding} = dimensions;\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const needLeftAxis = dimensions.chartEdgeSides.includes('left') || !facetSettings?.sharedY;\n    const needBottomAxis = dimensions.chartEdgeSides.includes('bottom') || !facetSettings?.sharedX;\n    const needBottomAxisTitle = dimensions.chartEdgeSides.includes('bottom');\n    const groupingKeys = histogramData.groupingKeys;\n\n    const firstBin = histogramData.histogramByGroupingKey[groupingKeys[0]].bins[0];\n    const binWidth = scales.x(firstBin.width) - scales.x(0);\n    const partialBinWidth = groupingStack === 'vertical' ? binWidth : binWidth / groupingKeys.length;\n\n    const sideDistances = {\n        left: margins.left + dimensions.left + padding.left,\n        right: chartSizes.totalWidth - (margins.left + dimensions.left + padding.left),\n        top: margins.top + dimensions.top + padding.top,\n        bottom: chartSizes.totalHeight - (margins.top + dimensions.top + padding.top),\n    };\n\n    const dimmedBackground = activeElementContainer && tooltipsData.fixed;\n    const debug = false;\n    return (\n        <g transform={`translate(${dimensions.left + padding.left},${dimensions.top + padding.top})`}>\n            {debug && (\n                <g fill=\"none\" stroke=\"green\" strokeWidth=\"2px\">\n                    <rect width={width} height={padding.top} x={0} y={-padding.top} />\n                    <rect width={width} height={padding.bottom} x={0} y={height} />\n                    <rect width={padding.left} height={height} x={-padding.left} y={0} />\n                    <rect width={padding.right} height={height} x={width} y={0} />\n                </g>\n            )}\n            {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            <g dominantBaseline=\"central\" textAnchor=\"middle\" fontWeight=\"500\" fontSize=\"14px\" fill={BLACK}>\n                {needBottomAxisTitle && xAxis.title && (\n                    <text x={width / 2} y={height + padding.bottom - TITLE_LINE / 2}>\n                        {getAxisTitle(xAxis.title)}\n                    </text>\n                )}\n                {debug && needBottomAxisTitle && (\n                    <rect\n                        x=\"0\"\n                        y={height + padding.bottom - TITLE_LINE}\n                        width={width}\n                        height={TITLE_LINE}\n                        fill=\"none\"\n                        stroke=\"black\"\n                    />\n                )}\n            </g>\n            <ContinuousGrid\n                width={width}\n                height={height}\n                scaleX={scales.x}\n                scaleY={scales.y}\n                axisX={xAxis}\n                axisY={yAxis}\n                frameType={frameType}\n            />\n            {needBottomAxis && (\n                <g transform={`translate(0,${height})`}>\n                    <ContinuousAxis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} hiddenLabels={xAxis.hiddenLabels} />\n                    {debug && (\n                        <rect\n                            x=\"0\"\n                            y={tickSizeX + TICK_OFFSET}\n                            width={width}\n                            height={TITLE_LINE}\n                            fill=\"none\"\n                            stroke=\"black\"\n                        />\n                    )}\n                </g>\n            )}\n            {needLeftAxis && (\n                <g>\n                    <ContinuousAxis scale={scales.y} orient=\"left\" tickSize={tickSizeY} hiddenLabels={yAxis.hiddenLabels} />\n                    {debug && (\n                        <rect\n                            x={-tickSizeY - TICK_OFFSET - captionsSizes.yAxisCaptionsWidth}\n                            y=\"0\"\n                            width={captionsSizes.yAxisCaptionsWidth}\n                            height={height}\n                            fill=\"none\"\n                            stroke=\"black\"\n                        />\n                    )}\n                </g>\n            )}\n            {layers.map(layer => groupingKeys.map((groupingKey, keyIdx) =>\n                histogramData.histogramByGroupingKey[groupingKey].bins.map((bin) => {\n                    const highlighted = dimmedBackground && tooltipsData.selectedData === bin;\n                    const binElement = (\n                        <rect\n                            key={`${groupingKey}-${bin.x}`}\n                            x={getBinX(scales.x(bin.x), groupingStack, keyIdx, partialBinWidth)}\n                            y={getBinY(bin, scales.y, groupingStack, groupingDirection)}\n                            fill={bin.indexes.length > 0 ? aesColorGetter(layer.aes.fillColor, bin.indexes[0], bin.count) : ''}\n                            stroke={layer.aes.lineColor}\n                            width={partialBinWidth}\n                            height={scales.y(0) - scales.y(bin.count)}\n                            opacity={layer.aes.opacity ?? 1}\n                            onMouseOver={() => tooltipsData.onMouseEnter(bin, facetKey)}\n                            onMouseLeave={() => tooltipsData.onMouseLeave()}\n                        />\n                    );\n                    return highlighted ? createPortal(binElement, activeElementContainer) : binElement;\n                })\n            ))}\n            {tooltipsData.fixed && <rect width={chartSizes.chartWidth} height={chartSizes.chartHeight} fill=\"rgba(255,255,255,0.8)\"/>}\n            <g ref={node => {\n                if (node && !activeElementContainer) {\n                    setActiveElementContainer(node);\n                }\n            }}\n            />\n            {tooltipsData.selectedData && tooltipsData.currentFacet === facetKey && (\n                <Tooltip\n                    content={getTooltipContent(tooltipsData.selectedData, groupingLabels)}\n                    x={getBinX(scales.x(tooltipsData.selectedData.x), groupingStack, tooltipsData.selectedData.groupingKeyIdx, partialBinWidth) + partialBinWidth}\n                    y={getBinY(tooltipsData.selectedData, scales.y, groupingStack, groupingDirection) + scales.y(0) - scales.y(tooltipsData.selectedData.count / 2)}\n                    offset={0}\n                    active\n                    fixed={tooltipsData.fixed}\n                    sideDistances={sideDistances}\n                    container={tooltipsContainer}\n                    onClose={tooltipsData.onClose}\n                />\n            )}\n        </g>\n    );\n}\n"],"mappings":"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"}

package/dist/histogram/components/ChartsGroup.js

@@ -1,95 +1,75 @@
-import { j as o } from "../../_virtual/jsx-runtime.js";
-import { ChartsTitle as y } from "../../common/ChartsTitle.js";
-import I from "../../common/fonts.js";
-import { Legend as M } from "../../common/Legend.js";
-import { useTooltip as N } from "../../common/Tooltip.js";
-import { LEGEND_OFFSET as O } from "../../heatmap/constants.js";
-import { Chart as _ } from "./Chart.js";
-import { ErrorBoundary as b } from "../../common/ErrorBoundary.js";
-import { r as a } from "../../_virtual/index.js";
-function k({
-  settingsId: f,
-  chartSettings: h,
-  chartSizes: t,
-  chartsDimensions: e,
-  columnsCount: m,
-  facetKeys: n,
-  facetSettings: g,
-  scales: l,
-  margins: i,
-  mainTitle: x,
-  facetTitles: c,
-  captionsSizes: u,
-  histogramDataByFacets: j,
-  layers: w,
-  aesColorGetter: T,
-  groupingDirection: C,
-  groupingStack: E,
-  groupingLabels: W,
-  legend: $,
-  onTooltipHintSwitch: P
-}) {
-  const v = N(P), { xAxis: D, yAxis: F, title: p, frame: H } = h, d = e[n[0]].padding, L = e[n[m - 1]].padding, [R, A] = a.useState(), s = a.useRef(null);
-  a.useEffect(() => {
-    s.current && A(s.current);
-  }, []);
-  const B = i.left + t.chartsWidth + O, G = i.top + d.top;
-  return /* @__PURE__ */ o.jsx(b, { dataId: f, children: /* @__PURE__ */ o.jsxs(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${t.totalWidth} ${t.totalHeight}`,
-      width: t.totalWidth,
-      height: t.totalHeight,
-      children: [
-        /* @__PURE__ */ o.jsx("defs", { children: I }),
-        /* @__PURE__ */ o.jsxs("g", { transform: `translate(${i.left},${i.top})`, fontFamily: "Manrope", children: [
-          /* @__PURE__ */ o.jsx(
-            y,
-            {
-              title: x,
-              show: p.show,
-              position: p.position,
-              leftPadding: d.left,
-              rightPadding: L.right,
-              chartsWidth: t.chartsWidth
-            }
-          ),
-          n.map((r) => /* @__PURE__ */ o.jsx(
-            _,
-            {
-              facetKey: r,
-              scales: { x: l.x[r], y: l.y[r] },
-              width: t.chartWidth,
-              height: t.chartHeight,
-              dimensions: e[r],
-              margins: i,
-              chartSizes: t,
-              facetSettings: g,
-              xAxis: D,
-              yAxis: F,
-              frameType: H.type,
-              facetTitle: c[r],
-              captionsSizes: u,
-              histogramData: j[r],
-              layers: w,
-              aesColorGetter: T,
-              groupingDirection: C,
-              groupingStack: E,
-              groupingLabels: W,
-              tooltipsContainer: R,
-              tooltipsData: v
-            },
-            r
-          ))
-        ] }),
-        /* @__PURE__ */ o.jsx("g", { transform: `translate(${B},${G})`, children: /* @__PURE__ */ o.jsx(M, { legendData: $ }) }),
-        /* @__PURE__ */ o.jsx("g", { ref: s, style: { outline: "none" } })
-      ]
-    }
-  ) });
+import e from "../../common/fonts.js";
+import { useTooltip as t } from "../../common/Tooltip.js";
+import { ErrorBoundary as n } from "../../common/ErrorBoundary.js";
+import { ChartsTitle as r } from "../../common/ChartsTitle.js";
+import { Legend as i } from "../../common/Legend.js";
+import { Chart as a } from "./Chart.js";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+function d({ settingsId: d, chartSettings: f, chartSizes: p, chartsDimensions: m, columnsCount: h, facetKeys: g, facetSettings: _, scales: v, margins: y, mainTitle: b, facetTitles: x, captionsSizes: S, histogramDataByFacets: C, layers: w, aesColorGetter: T, groupingDirection: E, groupingStack: D, groupingLabels: O, legend: k, onTooltipHintSwitch: A }) {
+	let j = t(A), { xAxis: M, yAxis: N, title: P, frame: F } = f, I = m[g[0]].padding, L = m[g[h - 1]].padding, [R, z] = c(), B = s(null);
+	o(() => {
+		B.current && z(B.current);
+	}, []);
+	let V = y.left + p.chartsWidth + 20, H = y.top + I.top;
+	return /* @__PURE__ */ l(n, {
+		dataId: d,
+		children: /* @__PURE__ */ u("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${p.totalWidth} ${p.totalHeight}`,
+			width: p.totalWidth,
+			height: p.totalHeight,
+			children: [
+				/* @__PURE__ */ l("defs", { children: e }),
+				/* @__PURE__ */ u("g", {
+					transform: `translate(${y.left},${y.top})`,
+					fontFamily: "Manrope",
+					children: [/* @__PURE__ */ l(r, {
+						title: b,
+						show: P.show,
+						position: P.position,
+						leftPadding: I.left,
+						rightPadding: L.right,
+						chartsWidth: p.chartsWidth
+					}), g.map((e) => /* @__PURE__ */ l(a, {
+						facetKey: e,
+						scales: {
+							x: v.x[e],
+							y: v.y[e]
+						},
+						width: p.chartWidth,
+						height: p.chartHeight,
+						dimensions: m[e],
+						margins: y,
+						chartSizes: p,
+						facetSettings: _,
+						xAxis: M,
+						yAxis: N,
+						frameType: F.type,
+						facetTitle: x[e],
+						captionsSizes: S,
+						histogramData: C[e],
+						layers: w,
+						aesColorGetter: T,
+						groupingDirection: E,
+						groupingStack: D,
+						groupingLabels: O,
+						tooltipsContainer: R,
+						tooltipsData: j
+					}, e))]
+				}),
+				/* @__PURE__ */ l("g", {
+					transform: `translate(${V},${H})`,
+					children: /* @__PURE__ */ l(i, { legendData: k })
+				}),
+				/* @__PURE__ */ l("g", {
+					ref: B,
+					style: { outline: "none" }
+				})
+			]
+		})
+	});
 }
-export {
-  k as ChartsGroup
-};
-//# sourceMappingURL=ChartsGroup.js.map
+export { d as ChartsGroup };
+
+//# sourceMappingURL=ChartsGroup.js.map

package/dist/histogram/components/ChartsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartsGroup.js","sources":["../../../src/histogram/components/ChartsGroup.tsx"],"sourcesContent":["import {ChartsTitle} from '../../common/ChartsTitle';\nimport fonts from '../../common/fonts';\nimport {Legend} from '../../common/Legend';\nimport {useTooltip} from '../../common/Tooltip';\nimport type {LegendData} from '../../common/types';\nimport {LEGEND_OFFSET} from '../../heatmap/constants';\nimport type {AesGetter} from './types';\nimport type {BinData, GroupedHistogramData} from '../getHistogramData';\nimport type {HistogramLayer, HistogramSettingsImpl} from '../HistogramSettingsImpl';\nimport {Chart} from './Chart';\nimport {ErrorBoundary} from '../../common/ErrorBoundary';\nimport type {\n    CaptionsSizes,\n    ChartDimensionsData,\n    ChartSizes,\n    ChartsScales,\n    Margins,\n} from './types';\nimport React, {useEffect, useRef, useState} from 'react';\n\ninterface ChartsGroupProps {\n    chartSettings: HistogramSettingsImpl['chartSettings'];\n    facetSettings: HistogramSettingsImpl['facetSettings'];\n    chartSizes: ChartSizes;\n    chartsDimensions: Record<string, ChartDimensionsData>;\n    columnsCount: number;\n    scales: ChartsScales;\n    facetKeys: string[];\n    settingsId: string;\n    margins: Margins;\n    mainTitle: string[];\n    facetTitles: Record<string, string[]>;\n    captionsSizes: CaptionsSizes;\n    histogramDataByFacets: Record<string, GroupedHistogramData>;\n    layers: HistogramLayer[];\n    aesColorGetter: AesGetter;\n    groupingDirection: HistogramSettingsImpl['groupingDirection'];\n    groupingStack: HistogramSettingsImpl['groupingStack'];\n    groupingLabels: Record<string, string>;\n    legend: LegendData;\n    onTooltipHintSwitch: (v:boolean) => void;\n}\n\nexport function ChartsGroup({\n    settingsId,\n    chartSettings,\n    chartSizes,\n    chartsDimensions,\n    columnsCount,\n    facetKeys,\n    facetSettings,\n    scales,\n    margins,\n    mainTitle,\n    facetTitles,\n    captionsSizes,\n    histogramDataByFacets,\n    layers,\n    aesColorGetter,\n    groupingDirection,\n    groupingStack,\n    groupingLabels,\n    legend,\n    onTooltipHintSwitch,\n}: ChartsGroupProps) {\n    const tooltipspData = useTooltip<BinData>(onTooltipHintSwitch);\n    const {xAxis, yAxis, title, frame} = chartSettings;\n\n    const leftTopChartPadding = chartsDimensions[facetKeys[0]].padding;\n    const rightTopChartPadding = chartsDimensions[facetKeys[columnsCount - 1]].padding;\n\n    const [tooltipsContainer, setTooltipsContainer] = useState<SVGGElement>();\n    const tooltipsRef = useRef<SVGGElement>(null);\n    useEffect(() => {\n        if (tooltipsRef.current) {\n            setTooltipsContainer(tooltipsRef.current);\n        }\n    }, []);\n\n    const legendLeft = margins.left + chartSizes.chartsWidth + LEGEND_OFFSET;\n    const legendTop = margins.top + leftTopChartPadding.top;\n    return (\n        <ErrorBoundary dataId={settingsId}>\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n                width={chartSizes.totalWidth}\n                height={chartSizes.totalHeight}\n            >\n                <defs>{fonts}</defs>\n                <g transform={`translate(${margins.left},${margins.top})`} fontFamily=\"Manrope\">\n                    <ChartsTitle\n                        title={mainTitle}\n                        show={title.show}\n                        position={title.position}\n                        leftPadding={leftTopChartPadding.left}\n                        rightPadding={rightTopChartPadding.right}\n                        chartsWidth={chartSizes.chartsWidth}\n                    />\n                    {facetKeys.map(key => (\n                        <Chart\n                            key={key}\n                            facetKey={key}\n                            scales={{x: scales.x[key], y: scales.y[key]}}\n                            width={chartSizes.chartWidth}\n                            height={chartSizes.chartHeight}\n                            dimensions={chartsDimensions[key]}\n                            margins={margins}\n                            chartSizes={chartSizes}\n                            facetSettings={facetSettings}\n                            xAxis={xAxis}\n                            yAxis={yAxis}\n                            frameType={frame.type}\n                            facetTitle={facetTitles[key]}\n                            captionsSizes={captionsSizes}\n                            histogramData={histogramDataByFacets[key]}\n                            layers={layers}\n                            aesColorGetter={aesColorGetter}\n                            groupingDirection={groupingDirection}\n                            groupingStack={groupingStack}\n                            groupingLabels={groupingLabels}\n                            tooltipsContainer={tooltipsContainer}\n                            tooltipsData={tooltipspData}\n                        />\n                    ))}\n                </g>\n                <g transform={`translate(${legendLeft},${legendTop})`}>\n                    <Legend legendData={legend} />\n                </g>\n                <g ref={tooltipsRef} style={{outline: 'none'}} />\n            </svg>\n        </ErrorBoundary>\n    );\n}\n"],"names":["ChartsGroup","settingsId","chartSettings","chartSizes","chartsDimensions","columnsCount","facetKeys","facetSettings","scales","margins","mainTitle","facetTitles","captionsSizes","histogramDataByFacets","layers","aesColorGetter","groupingDirection","groupingStack","groupingLabels","legend","onTooltipHintSwitch","tooltipspData","useTooltip","xAxis","yAxis","title","frame","leftTopChartPadding","rightTopChartPadding","tooltipsContainer","setTooltipsContainer","useState","tooltipsRef","useRef","useEffect","legendLeft","LEGEND_OFFSET","legendTop","jsx","ErrorBoundary","jsxs","fonts","ChartsTitle","key","Chart","Legend"],"mappings":"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"}
+{"version":3,"file":"ChartsGroup.js","names":[],"sources":["../../../src/histogram/components/ChartsGroup.tsx"],"sourcesContent":["import {ChartsTitle} from '../../common/ChartsTitle';\nimport fonts from '../../common/fonts';\nimport {Legend} from '../../common/Legend';\nimport {useTooltip} from '../../common/Tooltip';\nimport type {LegendData} from '../../common/types';\nimport {LEGEND_OFFSET} from '../../heatmap/constants';\nimport type {AesGetter} from './types';\nimport type {BinData, GroupedHistogramData} from '../getHistogramData';\nimport type {HistogramLayer, HistogramSettingsImpl} from '../HistogramSettingsImpl';\nimport {Chart} from './Chart';\nimport {ErrorBoundary} from '../../common/ErrorBoundary';\nimport type {\n    CaptionsSizes,\n    ChartDimensionsData,\n    ChartSizes,\n    ChartsScales,\n    Margins,\n} from './types';\nimport React, {useEffect, useRef, useState} from 'react';\n\ninterface ChartsGroupProps {\n    chartSettings: HistogramSettingsImpl['chartSettings'];\n    facetSettings: HistogramSettingsImpl['facetSettings'];\n    chartSizes: ChartSizes;\n    chartsDimensions: Record<string, ChartDimensionsData>;\n    columnsCount: number;\n    scales: ChartsScales;\n    facetKeys: string[];\n    settingsId: string;\n    margins: Margins;\n    mainTitle: string[];\n    facetTitles: Record<string, string[]>;\n    captionsSizes: CaptionsSizes;\n    histogramDataByFacets: Record<string, GroupedHistogramData>;\n    layers: HistogramLayer[];\n    aesColorGetter: AesGetter;\n    groupingDirection: HistogramSettingsImpl['groupingDirection'];\n    groupingStack: HistogramSettingsImpl['groupingStack'];\n    groupingLabels: Record<string, string>;\n    legend: LegendData;\n    onTooltipHintSwitch: (v:boolean) => void;\n}\n\nexport function ChartsGroup({\n    settingsId,\n    chartSettings,\n    chartSizes,\n    chartsDimensions,\n    columnsCount,\n    facetKeys,\n    facetSettings,\n    scales,\n    margins,\n    mainTitle,\n    facetTitles,\n    captionsSizes,\n    histogramDataByFacets,\n    layers,\n    aesColorGetter,\n    groupingDirection,\n    groupingStack,\n    groupingLabels,\n    legend,\n    onTooltipHintSwitch,\n}: ChartsGroupProps) {\n    const tooltipspData = useTooltip<BinData>(onTooltipHintSwitch);\n    const {xAxis, yAxis, title, frame} = chartSettings;\n\n    const leftTopChartPadding = chartsDimensions[facetKeys[0]].padding;\n    const rightTopChartPadding = chartsDimensions[facetKeys[columnsCount - 1]].padding;\n\n    const [tooltipsContainer, setTooltipsContainer] = useState<SVGGElement>();\n    const tooltipsRef = useRef<SVGGElement>(null);\n    useEffect(() => {\n        if (tooltipsRef.current) {\n            setTooltipsContainer(tooltipsRef.current);\n        }\n    }, []);\n\n    const legendLeft = margins.left + chartSizes.chartsWidth + LEGEND_OFFSET;\n    const legendTop = margins.top + leftTopChartPadding.top;\n    return (\n        <ErrorBoundary dataId={settingsId}>\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n                width={chartSizes.totalWidth}\n                height={chartSizes.totalHeight}\n            >\n                <defs>{fonts}</defs>\n                <g transform={`translate(${margins.left},${margins.top})`} fontFamily=\"Manrope\">\n                    <ChartsTitle\n                        title={mainTitle}\n                        show={title.show}\n                        position={title.position}\n                        leftPadding={leftTopChartPadding.left}\n                        rightPadding={rightTopChartPadding.right}\n                        chartsWidth={chartSizes.chartsWidth}\n                    />\n                    {facetKeys.map(key => (\n                        <Chart\n                            key={key}\n                            facetKey={key}\n                            scales={{x: scales.x[key], y: scales.y[key]}}\n                            width={chartSizes.chartWidth}\n                            height={chartSizes.chartHeight}\n                            dimensions={chartsDimensions[key]}\n                            margins={margins}\n                            chartSizes={chartSizes}\n                            facetSettings={facetSettings}\n                            xAxis={xAxis}\n                            yAxis={yAxis}\n                            frameType={frame.type}\n                            facetTitle={facetTitles[key]}\n                            captionsSizes={captionsSizes}\n                            histogramData={histogramDataByFacets[key]}\n                            layers={layers}\n                            aesColorGetter={aesColorGetter}\n                            groupingDirection={groupingDirection}\n                            groupingStack={groupingStack}\n                            groupingLabels={groupingLabels}\n                            tooltipsContainer={tooltipsContainer}\n                            tooltipsData={tooltipspData}\n                        />\n                    ))}\n                </g>\n                <g transform={`translate(${legendLeft},${legendTop})`}>\n                    <Legend legendData={legend} />\n                </g>\n                <g ref={tooltipsRef} style={{outline: 'none'}} />\n            </svg>\n        </ErrorBoundary>\n    );\n}\n"],"mappings":";;;;;;;;AA2CA,SAAgB,EAAY,EACxB,eACA,kBACA,eACA,qBACA,iBACA,cACA,kBACA,WACA,YACA,cACA,gBACA,kBACA,0BACA,WACA,mBACA,sBACA,kBACA,mBACA,WACA,0BACiB;CACjB,IAAM,IAAgB,EAAoB,EAAoB,EACxD,EAAC,UAAO,UAAO,UAAO,aAAS,GAE/B,IAAsB,EAAiB,EAAU,IAAI,SACrD,IAAuB,EAAiB,EAAU,IAAe,IAAI,SAErE,CAAC,GAAmB,KAAwB,GAAuB,EACnE,IAAc,EAAoB,KAAK;AAC7C,SAAgB;AACZ,EAAI,EAAY,WACZ,EAAqB,EAAY,QAAQ;IAE9C,EAAE,CAAC;CAEN,IAAM,IAAa,EAAQ,OAAO,EAAW,cAAA,IACvC,IAAY,EAAQ,MAAM,EAAoB;AACpD,QACI,kBAAC,GAAD;EAAe,QAAQ;YACnB,kBAAC,OAAD;GACI,OAAM;GACN,SAAS,OAAO,EAAW,WAAW,GAAG,EAAW;GACpD,OAAO,EAAW;GAClB,QAAQ,EAAW;aAJvB;IAMI,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA;IACpB,kBAAC,KAAD;KAAG,WAAW,aAAa,EAAQ,KAAK,GAAG,EAAQ,IAAI;KAAI,YAAW;eAAtE,CACI,kBAAC,GAAD;MACI,OAAO;MACP,MAAM,EAAM;MACZ,UAAU,EAAM;MAChB,aAAa,EAAoB;MACjC,cAAc,EAAqB;MACnC,aAAa,EAAW;MAC1B,CAAA,EACD,EAAU,KAAI,MACX,kBAAC,GAAD;MAEI,UAAU;MACV,QAAQ;OAAC,GAAG,EAAO,EAAE;OAAM,GAAG,EAAO,EAAE;OAAK;MAC5C,OAAO,EAAW;MAClB,QAAQ,EAAW;MACnB,YAAY,EAAiB;MACpB;MACG;MACG;MACR;MACA;MACP,WAAW,EAAM;MACjB,YAAY,EAAY;MACT;MACf,eAAe,EAAsB;MAC7B;MACQ;MACG;MACJ;MACC;MACG;MACnB,cAAc;MAChB,EAtBO,EAsBP,CACJ,CACF;;IACJ,kBAAC,KAAD;KAAG,WAAW,aAAa,EAAW,GAAG,EAAU;eAC/C,kBAAC,GAAD,EAAQ,YAAY,GAAU,CAAA;KAC9B,CAAA;IACJ,kBAAC,KAAD;KAAG,KAAK;KAAa,OAAO,EAAC,SAAS,QAAO;KAAI,CAAA;IAC/C;;EACM,CAAA"}

package/dist/histogram/constants.js

@@ -1,14 +1,9 @@
-const T = 20, I = 6, E = 24, _ = 12, o = 20, t = 4, c = 6, n = {
-  TOP: 30
+const e = {
+	TOP: 30,
+	BOTTOM: 0,
+	LEFT: 10,
+	RIGHT: 10
 };
-export {
-  t as DEFAULT_TICKS_SIZE,
-  T as FACET_TITLE_LINE,
-  I as FACET_TITLE_OFFSET,
-  E as MIN_MARGIN,
-  _ as MIN_PADDING,
-  n as PADDINGS,
-  c as TICK_OFFSET,
-  o as TITLE_LINE
-};
-//# sourceMappingURL=constants.js.map
+export { e as PADDINGS };
+
+//# sourceMappingURL=constants.js.map

package/dist/histogram/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../src/histogram/constants.ts"],"sourcesContent":["export const FACET_TITLE_LINE = 20;\nexport const FACET_TITLE_OFFSET = 6;\nexport const FACET_AXIS_OFFSET = 8;\nexport const MIN_MARGIN = 24;\nexport const MIN_PADDING = 12;\n\nexport const TITLE_LINE = 20;\nexport const DEFAULT_TICKS_SIZE = 4;\nexport const TICK_OFFSET = 6;\n\nexport const LEGEND_OFFSET = 20;\n\n// inner paddings in chart area\nexport const PADDINGS = {\n    TOP: 30,\n    BOTTOM: 0,\n    LEFT: 10,\n    RIGHT: 10\n};\n"],"names":["FACET_TITLE_LINE","FACET_TITLE_OFFSET","MIN_MARGIN","MIN_PADDING","TITLE_LINE","DEFAULT_TICKS_SIZE","TICK_OFFSET","PADDINGS"],"mappings":"AAAO,MAAMA,IAAmB,IACnBC,IAAqB,GAErBC,IAAa,IACbC,IAAc,IAEdC,IAAa,IACbC,IAAqB,GACrBC,IAAc,GAKdC,IAAW;AAAA,EACpB,KAAK;AAIT;"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../src/histogram/constants.ts"],"sourcesContent":["export const FACET_TITLE_LINE = 20;\nexport const FACET_TITLE_OFFSET = 6;\nexport const FACET_AXIS_OFFSET = 8;\nexport const MIN_MARGIN = 24;\nexport const MIN_PADDING = 12;\n\nexport const TITLE_LINE = 20;\nexport const DEFAULT_TICKS_SIZE = 4;\nexport const TICK_OFFSET = 6;\n\nexport const LEGEND_OFFSET = 20;\n\n// inner paddings in chart area\nexport const PADDINGS = {\n    TOP: 30,\n    BOTTOM: 0,\n    LEFT: 10,\n    RIGHT: 10\n};\n"],"mappings":"AAaA,MAAa,IAAW;CACpB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACV"}