@axdspub/axiom-charts 0.0.37 → 0.0.39

package/library/axiom-charts.d.ts

@@ -246,10 +246,17 @@ declare abstract class RadialChartRoot extends ChartRoot {
 
 declare const AxiomChartComponent: (props: IChart) => ReactElement;
 
+interface IPopupProps extends IPlotScrubSettings {
+    plotScrubs: IPlotScrubs;
+    chartSettings: IChartSettings;
+    children?: ReactElement;
+}
+declare const Popup: ({ plotScrubs, chartSettings, axis, followCursor, children }: IPopupProps) => ReactElement;
+
 interface ILegendProps {
     plotLegends: IPlotLegends;
     style?: CSSProperties;
 }
 declare const Legend: ({ plotLegends, style }: ILegendProps) => ReactElement;
 
-export { AxiomChartComponent as Chart, ChartRoot, EChartAxes, EPlotTypes, IChart, IChartAxes, IChartAxis, IChartDimension, IChartDimensionAccessor, IChartDimensionDomain, IChartDimensionParameter, IChartDimensions, IChartImplementation, IChartImplementationProps, IChartLibrary, IChartScale, IChartSettings, ILegendItem, INumericRange, INumericScale, IPlot, IPlotAxisSetting, IPlotAxisSettings, IPlotData, IPlotDataAccessors, IPlotDataLoadEvent, IPlotImplementation, IPlotImplementationGroup, IPlotImplementationGroups, IPlotImplementationProps, IPlotLegendSettings, IPlotLegends, IPlotScrubEvent, IPlotScrubSettings, IPlotScrubs, IPlotStyle, IPlotTypes, Legend, RadialChartRoot };
+export { AxiomChartComponent as Chart, ChartRoot, EChartAxes, EPlotTypes, IChart, IChartAxes, IChartAxis, IChartDimension, IChartDimensionAccessor, IChartDimensionDomain, IChartDimensionParameter, IChartDimensions, IChartImplementation, IChartImplementationProps, IChartLibrary, IChartScale, IChartSettings, ILegendItem, INumericRange, INumericScale, IPlot, IPlotAxisSetting, IPlotAxisSettings, IPlotData, IPlotDataAccessors, IPlotDataLoadEvent, IPlotImplementation, IPlotImplementationGroup, IPlotImplementationGroups, IPlotImplementationProps, IPlotLegendSettings, IPlotLegends, IPlotScrubEvent, IPlotScrubSettings, IPlotScrubs, IPlotStyle, IPlotTypes, Legend, Popup, RadialChartRoot };

package/library/browser.js

@@ -1,4 +1,4 @@
-var AxiomCharts = (function (exports, axiomUiDataServices, d3Array, lodash, require$$0) {
+var AxiomCharts = (function (exports, axiomUiDataServices, d3Array, _, require$$0) {
     'use strict';
 
     /******************************************************************************
@@ -277,7 +277,7 @@ var AxiomCharts = (function (exports, axiomUiDataServices, d3Array, lodash, requ
             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' : ''}`;
             });
@@ -317,13 +317,13 @@ var AxiomCharts = (function (exports, axiomUiDataServices, d3Array, lodash, requ
                 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();
@@ -1847,6 +1847,26 @@ var AxiomCharts = (function (exports, axiomUiDataServices, d3Array, lodash, requ
         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))) }));
     };
@@ -1854,6 +1874,7 @@ var AxiomCharts = (function (exports, axiomUiDataServices, d3Array, lodash, requ
     exports.Chart = AxiomChartComponent;
     exports.ChartRoot = ChartRoot;
     exports.Legend = Legend;
+    exports.Popup = Popup;
     exports.RadialChartRoot = RadialChartRoot;
 
     return exports;