@gemx-dev/heatmap-react 3.5.54 → 3.5.55

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.
Files changed (22) hide show
  1. package/dist/esm/components/VizLive/VizLiveRenderer.d.ts.map +1 -1
  2. package/dist/esm/components/VizScrollmap/HoverZones.d.ts.map +1 -1
  3. package/dist/esm/components/VizScrollmap/ScrollMapOverlay.d.ts.map +1 -1
  4. package/dist/esm/components/VizScrollmap/ScrollZoneTooltip.d.ts.map +1 -1
  5. package/dist/esm/hooks/register/useRegisterControl.d.ts.map +1 -1
  6. package/dist/esm/hooks/viz-scale/useHeatmapScale.d.ts +2 -3
  7. package/dist/esm/hooks/viz-scale/useHeatmapScale.d.ts.map +1 -1
  8. package/dist/esm/index.js +19 -68
  9. package/dist/esm/index.mjs +19 -68
  10. package/dist/esm/types/control.d.ts +9 -0
  11. package/dist/esm/types/control.d.ts.map +1 -1
  12. package/dist/umd/components/VizLive/VizLiveRenderer.d.ts.map +1 -1
  13. package/dist/umd/components/VizScrollmap/HoverZones.d.ts.map +1 -1
  14. package/dist/umd/components/VizScrollmap/ScrollMapOverlay.d.ts.map +1 -1
  15. package/dist/umd/components/VizScrollmap/ScrollZoneTooltip.d.ts.map +1 -1
  16. package/dist/umd/hooks/register/useRegisterControl.d.ts.map +1 -1
  17. package/dist/umd/hooks/viz-scale/useHeatmapScale.d.ts +2 -3
  18. package/dist/umd/hooks/viz-scale/useHeatmapScale.d.ts.map +1 -1
  19. package/dist/umd/index.js +2 -2
  20. package/dist/umd/types/control.d.ts +9 -0
  21. package/dist/umd/types/control.d.ts.map +1 -1
  22. package/package.json +1 -1
package/dist/esm/components/VizLive/VizLiveRenderer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VizLiveRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/VizLive/VizLiveRenderer.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAwCnC,CAAC"}
1
+ {"version":3,"file":"VizLiveRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/VizLive/VizLiveRenderer.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAiCnC,CAAC"}
package/dist/esm/components/VizScrollmap/HoverZones.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HoverZones.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/HoverZones.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMtD,UAAU,eAAe;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmChD,CAAC"}
1
+ {"version":3,"file":"HoverZones.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/HoverZones.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMtD,UAAU,eAAe;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkChD,CAAC"}
package/dist/esm/components/VizScrollmap/ScrollMapOverlay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollMapOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollMapOverlay.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6D5D,CAAC"}
1
+ {"version":3,"file":"ScrollMapOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollMapOverlay.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiE5D,CAAC"}
package/dist/esm/components/VizScrollmap/ScrollZoneTooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollZoneTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollZoneTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMnF,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiE9D,CAAC"}
1
+ {"version":3,"file":"ScrollZoneTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollZoneTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKnF,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6C9D,CAAC"}
package/dist/esm/hooks/register/useRegisterControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useRegisterControl.d.ts","sourceRoot":"","sources":["../../../src/hooks/register/useRegisterControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,SAU1D,CAAC"}
1
+ {"version":3,"file":"useRegisterControl.d.ts","sourceRoot":"","sources":["../../../src/hooks/register/useRegisterControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,SAW1D,CAAC"}
package/dist/esm/hooks/viz-scale/useHeatmapScale.d.ts CHANGED
@@ -2,13 +2,12 @@ interface IHeatmapScaleProps {
2
2
  wrapperRef: React.RefObject<HTMLDivElement | null>;
3
3
  iframeRef: React.RefObject<HTMLIFrameElement | null>;
4
4
  visualRef: React.RefObject<HTMLDivElement | null>;
5
- iframeHeight: number;
6
5
  }
7
- interface IUseHeatmapScaleResult {
6
+ interface IHeatmapScaleResult {
8
7
  scaledWidth: number;
9
8
  scaledHeight: number;
10
9
  handleScroll: (scrollTop: number) => void;
11
10
  }
12
- export declare const useHeatmapScale: (props: IHeatmapScaleProps) => IUseHeatmapScaleResult;
11
+ export declare const useHeatmapScale: (props: IHeatmapScaleProps) => IHeatmapScaleResult;
13
12
  export {};
14
13
  //# sourceMappingURL=useHeatmapScale.d.ts.map
package/dist/esm/hooks/viz-scale/useHeatmapScale.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBA+B3D,CAAC"}
1
+ {"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAOA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,mBAiC3D,CAAC"}
package/dist/esm/index.js CHANGED
@@ -732,6 +732,7 @@ const useRegisterControl = (control) => {
732
732
  registerControl('MetricBar', control.MetricBar);
733
733
  registerControl('VizLoading', control.VizLoading);
734
734
  registerControl('ElementCallout', control.ElementCallout);
735
+ registerControl('ScrollZoneTooltip', control.ScrollZoneTooltip);
735
736
  };
736
737
 
737
738
  const ViewIdContext = createContext(undefined);
@@ -4138,7 +4139,8 @@ const useScrollSync = ({ widthScale, iframeRef }) => {
4138
4139
  };
4139
4140
 
4140
4141
  const useHeatmapScale = (props) => {
4141
- const { wrapperRef, iframeRef, iframeHeight } = props;
4142
+ const { iframeHeight } = useHeatmapViz();
4143
+ const { wrapperRef, iframeRef } = props;
4142
4144
  // 1. Observe container dimensions
4143
4145
  const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
4144
4146
  // 2. Get content dimensions from config
@@ -5264,14 +5266,9 @@ const ScrollMapMinimap = ({ zones, maxUsers }) => {
5264
5266
  };
5265
5267
 
5266
5268
  const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, }) => {
5269
+ const CompScrollZoneTooltip = useHeatmapControlStore((state) => state.controls.ScrollZoneTooltip);
5267
5270
  const tooltipRef = useRef(null);
5268
- const currentData = useMemo(() => {
5269
- if (!scrollmap || scrollmap.length === 0)
5270
- return null;
5271
- const roundedPercent = Math.floor(currentScrollPercent);
5272
- return scrollmap.find((d) => d.scrollReachY === roundedPercent) || null;
5273
- }, [scrollmap, currentScrollPercent]);
5274
- return (jsxs("div", { id: "gx-hm-scrollmap-tooltip", ref: tooltipRef, style: {
5271
+ return (jsx("div", { id: "gx-hm-scrollmap-tooltip", ref: tooltipRef, style: {
5275
5272
  position: 'fixed',
5276
5273
  top: `${position.y}px`,
5277
5274
  backgroundColor: 'black',
@@ -5279,57 +5276,17 @@ const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, })
5279
5276
  pointerEvents: 'none',
5280
5277
  width: '100%',
5281
5278
  height: '2px',
5282
- }, children: [jsxs("div", { style: {
5283
- position: 'absolute',
5284
- left: '50%',
5285
- top: '-50%',
5286
- transform: 'translate(-50%, -50%)',
5287
- padding: '16px',
5288
- borderRadius: '8px',
5289
- boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
5290
- fontSize: '14px',
5291
- width: 'fit-content',
5292
- backgroundColor: 'white',
5293
- minWidth: '230px',
5294
- display: 'flex',
5295
- gap: '8px',
5296
- alignItems: 'center',
5297
- }, children: [jsxs("p", { style: {
5298
- fontWeight: 650,
5299
- fontSize: '20px',
5300
- lineHeight: '24px',
5301
- letterSpacing: '-0.2px',
5302
- verticalAlign: 'middle',
5303
- fontVariantNumeric: 'tabular-nums',
5304
- }, children: [currentData?.percUsers?.toFixed(2), "%", ' '] }), jsx("p", { style: { fontWeight: 450 }, children: "user scrolled this far" })] }), jsx(TooltipByZone, { zone: zone })] }));
5305
- };
5306
- const TooltipByZone = ({ zone }) => {
5307
- const scrollType = useHeatmapConfigStore((state) => state.scrollType);
5308
- if (!zone)
5309
- return null;
5310
- const contentMarkup = () => {
5311
- switch (scrollType) {
5312
- case IScrollType.Depth:
5313
- return jsx(BasicTooltipContent, { zone: zone });
5314
- case IScrollType.Attention:
5315
- return jsx(MetricsTooltipContent, { zone: zone });
5316
- default:
5317
- return jsx(BasicTooltipContent, { zone: zone });
5318
- }
5319
- };
5320
- return jsx("div", { style: { paddingTop: '12px', borderTop: '1px solid #E5E7EB' }, children: contentMarkup() });
5321
- };
5322
- const BasicTooltipContent = ({ zone }) => {
5323
- if (!zone)
5324
- return null;
5325
- return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '24px', fontWeight: 700, color: '#0078D4' }, children: [zone.percUsers.toFixed(2), "%"] }), jsx("div", { style: { fontSize: '12px', color: '#605E5C', marginTop: '4px' }, children: "of users reached this point" })] }));
5326
- };
5327
- const MetricsTooltipContent = ({ zone }) => {
5328
- if (!zone)
5329
- return null;
5330
- return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '20px', fontWeight: 700, marginBottom: '8px' }, children: [zone.percUsers.toFixed(2), "% users"] }), zone.metrics && (jsxs("div", { style: { display: 'grid', gap: '6px', fontSize: '13px' }, children: [zone.metrics.revenue !== undefined && (jsx(MetricRow, { label: "Revenue", value: `$${zone.metrics.revenue.toFixed(2)}` })), zone.metrics.conversionRate !== undefined && (jsx(MetricRow, { label: "Conversion", value: `${zone.metrics.conversionRate.toFixed(2)}%` })), zone.metrics.orders !== undefined && jsx(MetricRow, { label: "Orders", value: zone.metrics.orders.toString() })] }))] }));
5279
+ }, children: jsx("div", { style: {
5280
+ position: 'absolute',
5281
+ left: '50%',
5282
+ top: '-50%',
5283
+ transform: 'translate(-50%, -50%)',
5284
+ width: 'fit-content',
5285
+ display: 'flex',
5286
+ gap: '8px',
5287
+ alignItems: 'center',
5288
+ }, children: CompScrollZoneTooltip && (jsx(CompScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap })) }) }));
5331
5289
  };
5332
- const MetricRow = ({ label, value }) => (jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [jsxs("span", { style: { color: '#605E5C' }, children: [label, ":"] }), jsx("span", { style: { fontWeight: 600 }, children: value })] }));
5333
5290
 
5334
5291
  const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
5335
5292
  const { scrollmap } = useHeatmapData();
@@ -5351,7 +5308,7 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
5351
5308
  const [position, setPosition] = useState();
5352
5309
  const [currentScrollPercent, setCurrentScrollPercent] = useState(0);
5353
5310
  const { widthScale, iframeHeight } = useHeatmapViz();
5354
- const handleMouseMove = (event) => {
5311
+ const handleMouseMove = useCallback((event) => {
5355
5312
  if (!iframeRef.current || !wrapperRef.current)
5356
5313
  return;
5357
5314
  const iframe = iframeRef.current;
@@ -5363,7 +5320,7 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
5363
5320
  const scrollPercent = Math.min(100, Math.max(0, (actualY / iframeHeight) * 100));
5364
5321
  setCurrentScrollPercent(scrollPercent);
5365
5322
  setPosition({ x, y });
5366
- };
5323
+ }, [iframeRef, wrapperRef, widthScale, iframeHeight]);
5367
5324
  const onMouseMove = useCallback((event) => {
5368
5325
  requestAnimationFrame(() => handleMouseMove(event));
5369
5326
  }, [handleMouseMove]);
@@ -5597,17 +5554,11 @@ VizDomHeatmap.displayName = 'VizDomHeatmap';
5597
5554
 
5598
5555
  const VizLiveRenderer = () => {
5599
5556
  const contentWidth = useHeatmapConfigStore((state) => state.width);
5600
- const { isRenderViz, iframeHeight, setIframeHeight } = useHeatmapViz();
5601
5557
  const visualRef = useRef(null);
5602
5558
  const wrapperRef = useRef(null);
5559
+ const { iframeHeight } = useHeatmapViz();
5603
5560
  const { iframeRef } = useVizLiveRender();
5604
- const { scaledHeight, handleScroll } = useHeatmapScale({
5605
- wrapperRef,
5606
- iframeRef,
5607
- visualRef,
5608
- iframeHeight,
5609
- isRenderViz,
5610
- });
5561
+ const { scaledHeight, handleScroll } = useHeatmapScale({ wrapperRef, iframeRef, visualRef });
5611
5562
  const onScroll = (e) => {
5612
5563
  const scrollTop = e.currentTarget.scrollTop;
5613
5564
  handleScroll(scrollTop);
package/dist/esm/index.mjs CHANGED
@@ -732,6 +732,7 @@ const useRegisterControl = (control) => {
732
732
  registerControl('MetricBar', control.MetricBar);
733
733
  registerControl('VizLoading', control.VizLoading);
734
734
  registerControl('ElementCallout', control.ElementCallout);
735
+ registerControl('ScrollZoneTooltip', control.ScrollZoneTooltip);
735
736
  };
736
737
 
737
738
  const ViewIdContext = createContext(undefined);
@@ -4138,7 +4139,8 @@ const useScrollSync = ({ widthScale, iframeRef }) => {
4138
4139
  };
4139
4140
 
4140
4141
  const useHeatmapScale = (props) => {
4141
- const { wrapperRef, iframeRef, iframeHeight } = props;
4142
+ const { iframeHeight } = useHeatmapViz();
4143
+ const { wrapperRef, iframeRef } = props;
4142
4144
  // 1. Observe container dimensions
4143
4145
  const { containerWidth, containerHeight } = useContainerDimensions({ wrapperRef });
4144
4146
  // 2. Get content dimensions from config
@@ -5264,14 +5266,9 @@ const ScrollMapMinimap = ({ zones, maxUsers }) => {
5264
5266
  };
5265
5267
 
5266
5268
  const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, }) => {
5269
+ const CompScrollZoneTooltip = useHeatmapControlStore((state) => state.controls.ScrollZoneTooltip);
5267
5270
  const tooltipRef = useRef(null);
5268
- const currentData = useMemo(() => {
5269
- if (!scrollmap || scrollmap.length === 0)
5270
- return null;
5271
- const roundedPercent = Math.floor(currentScrollPercent);
5272
- return scrollmap.find((d) => d.scrollReachY === roundedPercent) || null;
5273
- }, [scrollmap, currentScrollPercent]);
5274
- return (jsxs("div", { id: "gx-hm-scrollmap-tooltip", ref: tooltipRef, style: {
5271
+ return (jsx("div", { id: "gx-hm-scrollmap-tooltip", ref: tooltipRef, style: {
5275
5272
  position: 'fixed',
5276
5273
  top: `${position.y}px`,
5277
5274
  backgroundColor: 'black',
@@ -5279,57 +5276,17 @@ const ScrollZoneTooltip = ({ zone, position, currentScrollPercent, scrollmap, })
5279
5276
  pointerEvents: 'none',
5280
5277
  width: '100%',
5281
5278
  height: '2px',
5282
- }, children: [jsxs("div", { style: {
5283
- position: 'absolute',
5284
- left: '50%',
5285
- top: '-50%',
5286
- transform: 'translate(-50%, -50%)',
5287
- padding: '16px',
5288
- borderRadius: '8px',
5289
- boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
5290
- fontSize: '14px',
5291
- width: 'fit-content',
5292
- backgroundColor: 'white',
5293
- minWidth: '230px',
5294
- display: 'flex',
5295
- gap: '8px',
5296
- alignItems: 'center',
5297
- }, children: [jsxs("p", { style: {
5298
- fontWeight: 650,
5299
- fontSize: '20px',
5300
- lineHeight: '24px',
5301
- letterSpacing: '-0.2px',
5302
- verticalAlign: 'middle',
5303
- fontVariantNumeric: 'tabular-nums',
5304
- }, children: [currentData?.percUsers?.toFixed(2), "%", ' '] }), jsx("p", { style: { fontWeight: 450 }, children: "user scrolled this far" })] }), jsx(TooltipByZone, { zone: zone })] }));
5305
- };
5306
- const TooltipByZone = ({ zone }) => {
5307
- const scrollType = useHeatmapConfigStore((state) => state.scrollType);
5308
- if (!zone)
5309
- return null;
5310
- const contentMarkup = () => {
5311
- switch (scrollType) {
5312
- case IScrollType.Depth:
5313
- return jsx(BasicTooltipContent, { zone: zone });
5314
- case IScrollType.Attention:
5315
- return jsx(MetricsTooltipContent, { zone: zone });
5316
- default:
5317
- return jsx(BasicTooltipContent, { zone: zone });
5318
- }
5319
- };
5320
- return jsx("div", { style: { paddingTop: '12px', borderTop: '1px solid #E5E7EB' }, children: contentMarkup() });
5321
- };
5322
- const BasicTooltipContent = ({ zone }) => {
5323
- if (!zone)
5324
- return null;
5325
- return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '24px', fontWeight: 700, color: '#0078D4' }, children: [zone.percUsers.toFixed(2), "%"] }), jsx("div", { style: { fontSize: '12px', color: '#605E5C', marginTop: '4px' }, children: "of users reached this point" })] }));
5326
- };
5327
- const MetricsTooltipContent = ({ zone }) => {
5328
- if (!zone)
5329
- return null;
5330
- return (jsxs(Fragment, { children: [jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: zone.label }), jsxs("div", { style: { fontSize: '20px', fontWeight: 700, marginBottom: '8px' }, children: [zone.percUsers.toFixed(2), "% users"] }), zone.metrics && (jsxs("div", { style: { display: 'grid', gap: '6px', fontSize: '13px' }, children: [zone.metrics.revenue !== undefined && (jsx(MetricRow, { label: "Revenue", value: `$${zone.metrics.revenue.toFixed(2)}` })), zone.metrics.conversionRate !== undefined && (jsx(MetricRow, { label: "Conversion", value: `${zone.metrics.conversionRate.toFixed(2)}%` })), zone.metrics.orders !== undefined && jsx(MetricRow, { label: "Orders", value: zone.metrics.orders.toString() })] }))] }));
5279
+ }, children: jsx("div", { style: {
5280
+ position: 'absolute',
5281
+ left: '50%',
5282
+ top: '-50%',
5283
+ transform: 'translate(-50%, -50%)',
5284
+ width: 'fit-content',
5285
+ display: 'flex',
5286
+ gap: '8px',
5287
+ alignItems: 'center',
5288
+ }, children: CompScrollZoneTooltip && (jsx(CompScrollZoneTooltip, { position: position, currentScrollPercent: currentScrollPercent, scrollmap: scrollmap })) }) }));
5331
5289
  };
5332
- const MetricRow = ({ label, value }) => (jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [jsxs("span", { style: { color: '#605E5C' }, children: [label, ":"] }), jsx("span", { style: { fontWeight: 600 }, children: value })] }));
5333
5290
 
5334
5291
  const HoverZones = ({ iframeRef, wrapperRef, position, currentScrollPercent }) => {
5335
5292
  const { scrollmap } = useHeatmapData();
@@ -5351,7 +5308,7 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
5351
5308
  const [position, setPosition] = useState();
5352
5309
  const [currentScrollPercent, setCurrentScrollPercent] = useState(0);
5353
5310
  const { widthScale, iframeHeight } = useHeatmapViz();
5354
- const handleMouseMove = (event) => {
5311
+ const handleMouseMove = useCallback((event) => {
5355
5312
  if (!iframeRef.current || !wrapperRef.current)
5356
5313
  return;
5357
5314
  const iframe = iframeRef.current;
@@ -5363,7 +5320,7 @@ const ScrollMapOverlay = ({ wrapperRef, iframeRef }) => {
5363
5320
  const scrollPercent = Math.min(100, Math.max(0, (actualY / iframeHeight) * 100));
5364
5321
  setCurrentScrollPercent(scrollPercent);
5365
5322
  setPosition({ x, y });
5366
- };
5323
+ }, [iframeRef, wrapperRef, widthScale, iframeHeight]);
5367
5324
  const onMouseMove = useCallback((event) => {
5368
5325
  requestAnimationFrame(() => handleMouseMove(event));
5369
5326
  }, [handleMouseMove]);
@@ -5597,17 +5554,11 @@ VizDomHeatmap.displayName = 'VizDomHeatmap';
5597
5554
 
5598
5555
  const VizLiveRenderer = () => {
5599
5556
  const contentWidth = useHeatmapConfigStore((state) => state.width);
5600
- const { isRenderViz, iframeHeight, setIframeHeight } = useHeatmapViz();
5601
5557
  const visualRef = useRef(null);
5602
5558
  const wrapperRef = useRef(null);
5559
+ const { iframeHeight } = useHeatmapViz();
5603
5560
  const { iframeRef } = useVizLiveRender();
5604
- const { scaledHeight, handleScroll } = useHeatmapScale({
5605
- wrapperRef,
5606
- iframeRef,
5607
- visualRef,
5608
- iframeHeight,
5609
- isRenderViz,
5610
- });
5561
+ const { scaledHeight, handleScroll } = useHeatmapScale({ wrapperRef, iframeRef, visualRef });
5611
5562
  const onScroll = (e) => {
5612
5563
  const scrollTop = e.currentTarget.scrollTop;
5613
5564
  handleScroll(scrollTop);
package/dist/esm/types/control.d.ts CHANGED
@@ -1,8 +1,16 @@
1
+ import type { ScrollMapPoint } from './clarity';
2
+ import type { IScrollMapPosition, IScrollZone } from './viz-scrollmap';
1
3
  export interface IHeatmapControlSidebarProps {
2
4
  closeAction?: {
3
5
  onClick: () => void;
4
6
  };
5
7
  }
8
+ export interface IScrollZoneTooltipProps {
9
+ zone?: IScrollZone;
10
+ position: IScrollMapPosition;
11
+ currentScrollPercent: number;
12
+ scrollmap: ScrollMapPoint[];
13
+ }
6
14
  export interface IHeatmapControl {
7
15
  Sidebar?: React.FC<IHeatmapControlSidebarProps>;
8
16
  SidebarActivator?: React.FC<{
@@ -15,5 +23,6 @@ export interface IHeatmapControl {
15
23
  ElementCallout?: React.FC<{
16
24
  elementHash: string;
17
25
  }>;
26
+ ScrollZoneTooltip?: React.FC<IScrollZoneTooltipProps>;
18
27
  }
19
28
  //# sourceMappingURL=control.d.ts.map
package/dist/esm/types/control.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/types/control.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE;QACZ,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;IAChD,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC,CAAC;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAClB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QACxB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;CACJ"}
1
+ {"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/types/control.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE;QACZ,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AACD,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;IAChD,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC,CAAC;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAClB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QACxB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC;CACvD"}
package/dist/umd/components/VizLive/VizLiveRenderer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VizLiveRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/VizLive/VizLiveRenderer.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAwCnC,CAAC"}
1
+ {"version":3,"file":"VizLiveRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/VizLive/VizLiveRenderer.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAiCnC,CAAC"}
package/dist/umd/components/VizScrollmap/HoverZones.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HoverZones.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/HoverZones.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMtD,UAAU,eAAe;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmChD,CAAC"}
1
+ {"version":3,"file":"HoverZones.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/HoverZones.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAMtD,UAAU,eAAe;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkChD,CAAC"}
package/dist/umd/components/VizScrollmap/ScrollMapOverlay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollMapOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollMapOverlay.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6D5D,CAAC"}
1
+ {"version":3,"file":"ScrollMapOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollMapOverlay.tsx"],"names":[],"mappings":"AAMA,UAAU,qBAAqB;IAC7B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiE5D,CAAC"}
package/dist/umd/components/VizScrollmap/ScrollZoneTooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollZoneTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollZoneTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMnF,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiE9D,CAAC"}
1
+ {"version":3,"file":"ScrollZoneTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/VizScrollmap/ScrollZoneTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKnF,UAAU,sBAAsB;IAC9B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6C9D,CAAC"}
package/dist/umd/hooks/register/useRegisterControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useRegisterControl.d.ts","sourceRoot":"","sources":["../../../src/hooks/register/useRegisterControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,SAU1D,CAAC"}
1
+ {"version":3,"file":"useRegisterControl.d.ts","sourceRoot":"","sources":["../../../src/hooks/register/useRegisterControl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,eAAO,MAAM,kBAAkB,GAAI,SAAS,eAAe,SAW1D,CAAC"}
package/dist/umd/hooks/viz-scale/useHeatmapScale.d.ts CHANGED
@@ -2,13 +2,12 @@ interface IHeatmapScaleProps {
2
2
  wrapperRef: React.RefObject<HTMLDivElement | null>;
3
3
  iframeRef: React.RefObject<HTMLIFrameElement | null>;
4
4
  visualRef: React.RefObject<HTMLDivElement | null>;
5
- iframeHeight: number;
6
5
  }
7
- interface IUseHeatmapScaleResult {
6
+ interface IHeatmapScaleResult {
8
7
  scaledWidth: number;
9
8
  scaledHeight: number;
10
9
  handleScroll: (scrollTop: number) => void;
11
10
  }
12
- export declare const useHeatmapScale: (props: IHeatmapScaleProps) => IUseHeatmapScaleResult;
11
+ export declare const useHeatmapScale: (props: IHeatmapScaleProps) => IHeatmapScaleResult;
13
12
  export {};
14
13
  //# sourceMappingURL=useHeatmapScale.d.ts.map
package/dist/umd/hooks/viz-scale/useHeatmapScale.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAClD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,sBAAsB;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,sBA+B3D,CAAC"}
1
+ {"version":3,"file":"useHeatmapScale.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-scale/useHeatmapScale.ts"],"names":[],"mappings":"AAOA,UAAU,kBAAkB;IAC1B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB,KAAG,mBAiC3D,CAAC"}