@gemx-dev/heatmap-react 3.5.92-dev.32 → 3.5.92-dev.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/VizScrollmap/ScrollMarkersTest.d.ts +9 -0
- package/dist/esm/components/VizScrollmap/ScrollMarkersTest.d.ts.map +1 -0
- package/dist/esm/components/VizScrollmap/VizScrollMap.d.ts.map +1 -1
- package/dist/esm/index.js +25 -1
- package/dist/esm/index.mjs +25 -1
- package/dist/umd/components/VizScrollmap/ScrollMarkersTest.d.ts +9 -0
- package/dist/umd/components/VizScrollmap/ScrollMarkersTest.d.ts.map +1 -0
- package/dist/umd/components/VizScrollmap/VizScrollMap.d.ts.map +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { IHeatmapRef } from '../../types';
|
|
2
|
+
interface ScrollMarkersProps {
|
|
3
|
+
iframeRef: IHeatmapRef['Iframe'];
|
|
4
|
+
wrapperRef: IHeatmapRef['Wrapper'];
|
|
5
|
+
visualRef: IHeatmapRef['Visual'];
|
|
6
|
+
}
|
|
7
|
+
export declare const ScrollMarkersTest: React.FC<ScrollMarkersProps>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=ScrollMarkersTest.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollMarkersTest.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollMarkersTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,UAAU,kBAAkB;IAC1B,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAClC;AAcD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwB1D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VizScrollMap.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/VizScrollMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"VizScrollMap.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/VizScrollMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS/C,UAAU,iBAAiB;IACzB,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACpC;AAGD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBpD,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -8771,6 +8771,30 @@ const ScrollMarkers = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
|
8771
8771
|
}) }));
|
|
8772
8772
|
};
|
|
8773
8773
|
|
|
8774
|
+
const getMarkerColor = (percent) => {
|
|
8775
|
+
if (percent <= 25)
|
|
8776
|
+
return 'rgba(239, 68, 68, 0.4)'; // red
|
|
8777
|
+
if (percent <= 50)
|
|
8778
|
+
return 'rgba(245, 158, 11, 0.4)'; // amber
|
|
8779
|
+
if (percent <= 75)
|
|
8780
|
+
return 'rgba(59, 130, 246, 0.4)'; // blue
|
|
8781
|
+
return 'rgba(16, 185, 129, 0.4)'; // green
|
|
8782
|
+
};
|
|
8783
|
+
const MOCK_BOUNDARIES = Array.from({ length: 20 }, (_, index) => (index + 1) * 5).map((percent) => {
|
|
8784
|
+
const color = getMarkerColor(percent);
|
|
8785
|
+
return { percent, label: `${percent}%`, bgColor: color, lineColor: color, labelColor: 'rgba(0, 0, 0, 0.5)' };
|
|
8786
|
+
});
|
|
8787
|
+
const ScrollMarkersTest = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
8788
|
+
const { getZonePosition } = useZonePositions();
|
|
8789
|
+
useHeatmapScroll({ visualRef });
|
|
8790
|
+
return (jsx(Fragment, { children: MOCK_BOUNDARIES.map((boundary) => {
|
|
8791
|
+
const position = getZonePosition({ startY: boundary.percent, endY: boundary.percent });
|
|
8792
|
+
if (!position)
|
|
8793
|
+
return null;
|
|
8794
|
+
return (jsx(MarkerLine, { top: position.top, label: boundary.label, bgColor: boundary.bgColor, lineColor: boundary.lineColor, labelColor: boundary.labelColor }, boundary.label));
|
|
8795
|
+
}) }));
|
|
8796
|
+
};
|
|
8797
|
+
|
|
8774
8798
|
const SCROLL_TYPES = [EHeatmapType.Scroll];
|
|
8775
8799
|
const VizScrollMap = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
8776
8800
|
const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
|
|
@@ -8786,7 +8810,7 @@ const VizScrollMap = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
|
8786
8810
|
height: '100%',
|
|
8787
8811
|
transform: 'translateZ(0)',
|
|
8788
8812
|
zIndex: 2,
|
|
8789
|
-
}, children: [jsx(ScrollMarkers, { iframeRef: iframeRef, wrapperRef: wrapperRef, visualRef: visualRef }), jsx(AverageFold, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollOverlay, { iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
|
|
8813
|
+
}, children: [jsx(ScrollMarkersTest, { iframeRef: iframeRef, wrapperRef: wrapperRef, visualRef: visualRef }), jsx(ScrollMarkers, { iframeRef: iframeRef, wrapperRef: wrapperRef, visualRef: visualRef }), jsx(AverageFold, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollOverlay, { iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
|
|
8790
8814
|
};
|
|
8791
8815
|
|
|
8792
8816
|
const VizLoadingCanvas = () => {
|
package/dist/esm/index.mjs
CHANGED
|
@@ -8771,6 +8771,30 @@ const ScrollMarkers = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
|
8771
8771
|
}) }));
|
|
8772
8772
|
};
|
|
8773
8773
|
|
|
8774
|
+
const getMarkerColor = (percent) => {
|
|
8775
|
+
if (percent <= 25)
|
|
8776
|
+
return 'rgba(239, 68, 68, 0.4)'; // red
|
|
8777
|
+
if (percent <= 50)
|
|
8778
|
+
return 'rgba(245, 158, 11, 0.4)'; // amber
|
|
8779
|
+
if (percent <= 75)
|
|
8780
|
+
return 'rgba(59, 130, 246, 0.4)'; // blue
|
|
8781
|
+
return 'rgba(16, 185, 129, 0.4)'; // green
|
|
8782
|
+
};
|
|
8783
|
+
const MOCK_BOUNDARIES = Array.from({ length: 20 }, (_, index) => (index + 1) * 5).map((percent) => {
|
|
8784
|
+
const color = getMarkerColor(percent);
|
|
8785
|
+
return { percent, label: `${percent}%`, bgColor: color, lineColor: color, labelColor: 'rgba(0, 0, 0, 0.5)' };
|
|
8786
|
+
});
|
|
8787
|
+
const ScrollMarkersTest = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
8788
|
+
const { getZonePosition } = useZonePositions();
|
|
8789
|
+
useHeatmapScroll({ visualRef });
|
|
8790
|
+
return (jsx(Fragment, { children: MOCK_BOUNDARIES.map((boundary) => {
|
|
8791
|
+
const position = getZonePosition({ startY: boundary.percent, endY: boundary.percent });
|
|
8792
|
+
if (!position)
|
|
8793
|
+
return null;
|
|
8794
|
+
return (jsx(MarkerLine, { top: position.top, label: boundary.label, bgColor: boundary.bgColor, lineColor: boundary.lineColor, labelColor: boundary.labelColor }, boundary.label));
|
|
8795
|
+
}) }));
|
|
8796
|
+
};
|
|
8797
|
+
|
|
8774
8798
|
const SCROLL_TYPES = [EHeatmapType.Scroll];
|
|
8775
8799
|
const VizScrollMap = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
8776
8800
|
const heatmapType = useHeatmapSettingContext((s) => s.heatmapType);
|
|
@@ -8786,7 +8810,7 @@ const VizScrollMap = ({ iframeRef, wrapperRef, visualRef }) => {
|
|
|
8786
8810
|
height: '100%',
|
|
8787
8811
|
transform: 'translateZ(0)',
|
|
8788
8812
|
zIndex: 2,
|
|
8789
|
-
}, children: [jsx(ScrollMarkers, { iframeRef: iframeRef, wrapperRef: wrapperRef, visualRef: visualRef }), jsx(AverageFold, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollOverlay, { iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
|
|
8813
|
+
}, children: [jsx(ScrollMarkersTest, { iframeRef: iframeRef, wrapperRef: wrapperRef, visualRef: visualRef }), jsx(ScrollMarkers, { iframeRef: iframeRef, wrapperRef: wrapperRef, visualRef: visualRef }), jsx(AverageFold, { iframeRef: iframeRef, wrapperRef: wrapperRef }), jsx(ScrollOverlay, { iframeRef: iframeRef, wrapperRef: wrapperRef })] }));
|
|
8790
8814
|
};
|
|
8791
8815
|
|
|
8792
8816
|
const VizLoadingCanvas = () => {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { IHeatmapRef } from '../../types';
|
|
2
|
+
interface ScrollMarkersProps {
|
|
3
|
+
iframeRef: IHeatmapRef['Iframe'];
|
|
4
|
+
wrapperRef: IHeatmapRef['Wrapper'];
|
|
5
|
+
visualRef: IHeatmapRef['Visual'];
|
|
6
|
+
}
|
|
7
|
+
export declare const ScrollMarkersTest: React.FC<ScrollMarkersProps>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=ScrollMarkersTest.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScrollMarkersTest.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollMarkersTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,UAAU,kBAAkB;IAC1B,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CAClC;AAcD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwB1D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VizScrollMap.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/VizScrollMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"VizScrollMap.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/VizScrollMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAS/C,UAAU,iBAAiB;IACzB,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,SAAS,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IACjC,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACpC;AAGD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyBpD,CAAC"}
|