@axdspub/axiom-charts 0.0.37 → 0.0.39

package/library/cjs.js

@@ -2,7 +2,7 @@
 
 var axiomUiDataServices = require('@axdspub/axiom-ui-data-services');
 var d3Array = require('d3-array');
-var lodash = require('lodash');
+var _ = require('lodash');
 var require$$0 = require('react');
 
 /******************************************************************************
@@ -281,7 +281,7 @@ class ChartRoot {
         return param;
     }
     getPlotImplementationGroups(plots, axis) {
-        const groups = lodash.groupBy(plots, p => {
+        const groups = _.groupBy(plots, p => {
             const param = this.getDimensionAxisParam(p, axis);
             return `${param}${this.reversePlotAxis(p, axis) ? '.reverse' : ''}`;
         });
@@ -321,13 +321,13 @@ class ChartRoot {
             this.runtime.resizeEventHandler.cancel();
             console.log('cancel');
         }
-        this.runtime.resizeEventHandler = lodash.debounce(() => { this.onResize(this.runtime.prevWidth, this.runtime.prevHeight); }, 1000);
+        this.runtime.resizeEventHandler = _.debounce(() => { this.onResize(this.runtime.prevWidth, this.runtime.prevHeight); }, 1000);
         this.runtime.resizeEventHandler();
     }
     init(drawImmediately = false) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            this.runtime.resizeEventHandler = lodash.debounce(() => { this.onResize(this.runtime.prevWidth, this.runtime.prevHeight); }, 1000);
+            this.runtime.resizeEventHandler = _.debounce(() => { this.onResize(this.runtime.prevWidth, this.runtime.prevHeight); }, 1000);
             window.addEventListener('resize', () => { this.debouncedResize(); });
             (_a = this.plotImplementations) === null || _a === void 0 ? void 0 : _a.forEach(plot => { plot.destroy(); });
             this.plotImplementations = this.createPlots();
@@ -1851,6 +1851,26 @@ 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 = require$$0.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(exports.EChartAxes.x);
+        y = getMean(exports.EChartAxes.y) + 50; // TODO: fix
+    }
+    else {
+        x = axis === exports.EChartAxes.x ? getMean(exports.EChartAxes.x) : Number(chartSettings.width) + chartSettings.margin.right;
+        y = axis === exports.EChartAxes.y ? getMean(exports.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))) }));
 };
@@ -1858,5 +1878,6 @@ const Legend = ({ plotLegends, style }) => {
 exports.Chart = AxiomChartComponent;
 exports.ChartRoot = ChartRoot;
 exports.Legend = Legend;
+exports.Popup = Popup;
 exports.RadialChartRoot = RadialChartRoot;
 //# sourceMappingURL=cjs.js.map