@axdspub/axiom-charts 0.0.37 → 0.0.39

package/library/index.js

@@ -1,6 +1,6 @@
 import { RequestItem } from '@axdspub/axiom-ui-data-services';
 import { extent } from 'd3-array';
-import { groupBy, debounce } from 'lodash';
+import _, { groupBy, debounce } from 'lodash';
 import require$$0, { useRef, useState, useEffect } from 'react';
 
 /******************************************************************************
@@ -1849,9 +1849,29 @@ const AxiomChartComponent = (props) => {
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [error !== undefined ? jsxRuntimeExports.jsx("p", { children: error }) : '', jsxRuntimeExports.jsx("div", { className: "chart relative", style: { width: w, height: `${props.settings.height}px` }, ref: chartRef })] }));
 };
 
+const Popup = ({ plotScrubs, chartSettings, axis, followCursor, children }) => {
+    const ref = useRef(null);
+    const getMean = (axis) => _.meanBy(Object.values(plotScrubs), scrubData => { var _a; return (_a = scrubData[axis]) === null || _a === void 0 ? void 0 : _a.position; });
+    let x = 0;
+    let y = 0;
+    if (followCursor !== null && followCursor !== void 0 ? followCursor : false) {
+        x = getMean(EChartAxes.x);
+        y = getMean(EChartAxes.y) + 50; // TODO: fix
+    }
+    else {
+        x = axis === EChartAxes.x ? getMean(EChartAxes.x) : Number(chartSettings.width) + chartSettings.margin.right;
+        y = axis === EChartAxes.y ? getMean(EChartAxes.y) : chartSettings.height + chartSettings.margin.bottom;
+    }
+    const position = { x, y };
+    if (Object.keys(plotScrubs).length === 0) {
+        return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+    }
+    return (jsxRuntimeExports.jsx("div", { className: 'absolute z-30', style: { left: position.x, top: position.y }, children: jsxRuntimeExports.jsx("div", { ref: ref, children: children }) }));
+};
+
 const Legend = ({ plotLegends, style }) => {
     return (jsxRuntimeExports.jsx("div", { className: 'flex gap-4 flex-wrap hover:cursor-pointer', style: style, children: Object.entries(plotLegends).map(([plotId, legendItems]) => (jsxRuntimeExports.jsx("div", { className: 'flex gap-4 flex-wrap', children: legendItems.map(item => (jsxRuntimeExports.jsxs("div", { className: 'flex gap-2 items-center', children: [jsxRuntimeExports.jsx("div", { className: 'w-4 h-4 rounded-full', style: item.style }), jsxRuntimeExports.jsx("div", { children: item.label })] }, item.id))) }, plotId))) }));
 };
 
-export { AxiomChartComponent as Chart, ChartRoot, EChartAxes, EPlotTypes, Legend, RadialChartRoot };
+export { AxiomChartComponent as Chart, ChartRoot, EChartAxes, EPlotTypes, Legend, Popup, RadialChartRoot };
 //# sourceMappingURL=index.js.map