@gemx-dev/heatmap-react 3.5.61 → 3.5.62

package/dist/esm/components/VizElement/DefaultRankBadges.d.ts

@@ -1,6 +1,6 @@
-import type { ElementRect, HeatmapElement } from '../../types';
+import type { ElementRect, IClickmapSorted } from '../../types';
 interface Props {
-    getRect: (el?: HeatmapElement) => ElementRect | null;
+    getRect: (el?: IClickmapSorted) => ElementRect | null;
     hidden?: boolean;
 }
 export declare const DefaultRankBadges: import("react").NamedExoticComponent<Props>;

package/dist/esm/components/VizElement/DefaultRankBadges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultRankBadges.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/DefaultRankBadges.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO/D,UAAU,KAAK;IACb,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,KAAK,WAAW,GAAG,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA+BD,eAAO,MAAM,iBAAiB,6CAAmC,CAAC"}
+{"version":3,"file":"DefaultRankBadges.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/DefaultRankBadges.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAOhE,UAAU,KAAK;IACb,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,eAAe,KAAK,WAAW,GAAG,IAAI,CAAC;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA+BD,eAAO,MAAM,iBAAiB,6CAAmC,CAAC"}

package/dist/esm/components/VizElement/ElementCalloutOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2C/D,CAAC"}
+{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQ5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2C/D,CAAC"}

package/dist/esm/helpers/viz-area-click/area-builder.d.ts

@@ -1,6 +1,6 @@
-import type { ElementMapInfo, IAreaNode, IHeatmapInfo, IPersistedAreaData } from '../../types';
+import type { IAreaNode, IClickMapMetric, IHeatmapInfo, IPersistedAreaData } from '../../types';
 export declare function buildAreaNode(element: HTMLElement, hash: string, heatmapInfo: IHeatmapInfo, shadowRoot?: HTMLElement, persistedData?: IPersistedAreaData): IAreaNode | undefined;
-export declare function getTopElementsByClicks(elementMapInfo: ElementMapInfo, topN?: number): Array<{
+export declare function getTopElementsByClicks(clickMapMetrics: IClickMapMetric, topN?: number): Array<{
     hash: string;
     totalclicks: number;
     selector: string;

package/dist/esm/helpers/viz-area-click/area-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"area-builder.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-area-click/area-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAa,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAkD1G,wBAAgB,aAAa,CAC3B,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,YAAY,EACzB,UAAU,CAAC,EAAE,WAAW,EACxB,aAAa,CAAC,EAAE,kBAAkB,GACjC,SAAS,GAAG,SAAS,CAmDvB;AAED,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,cAAc,EAC9B,IAAI,GAAE,MAAW,GAChB,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAWhE"}
+{"version":3,"file":"area-builder.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-area-click/area-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,SAAS,EAAa,eAAe,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAkD3H,wBAAgB,aAAa,CAC3B,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,YAAY,EACzB,UAAU,CAAC,EAAE,WAAW,EACxB,aAAa,CAAC,EAAE,kBAAkB,GACjC,SAAS,GAAG,SAAS,CAmDvB;AAED,wBAAgB,sBAAsB,CACpC,eAAe,EAAE,eAAe,EAChC,IAAI,GAAE,MAAW,GAChB,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAWhE"}

package/dist/esm/hooks/view-context/index.d.ts

@@ -3,6 +3,7 @@ export * from './useHeatmapClick';
 export * from './useHeatmapData';
 export * from './useHeatmapHover';
 export * from './useHeatmapScroll';
+export * from './useHeatmapSetting';
 export * from './useHeatmapViz';
 export * from './useHeatmapVizRect';
 export * from './useHeatmapCopyView';

package/dist/esm/hooks/view-context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,sBAAsB,CAAC"}

package/dist/esm/hooks/view-context/useHeatmapData.d.ts

@@ -12,10 +12,10 @@ interface IHeatmapDataActions {
     setClickAreas: (newClickAreas: IPersistedAreaData[]) => void;
     setScrollmap: (newScrollmap: ScrollMapPoint[]) => void;
     setDataInfo: (newDataInfo: IHeatmapInfo) => void;
+    setDataInfoByKey: <K extends keyof IHeatmapInfo>(key: K, value: IHeatmapInfo[K]) => void;
     removeClickArea: (areaId: string) => void;
     clearView: (viewId: string) => void;
 }
-export type IHeatmapDataResult = IHeatmapDataState & IHeatmapDataActions;
 /**
  * Hook to access heatmap data state and actions with optional selector
  *
@@ -33,40 +33,12 @@ export type IHeatmapDataResult = IHeatmapDataState & IHeatmapDataActions;
  * ```
  */
 export declare const useHeatmapData: {
-    <T>(selector: (state: {
-        data: import("@gemx-dev/clarity-decode/types/data").DecodedPayload[] | undefined;
-        clickmap: ClickMapPoint[] | undefined;
-        clickAreas: IPersistedAreaData[] | undefined;
-        scrollmap: ScrollMapPoint[] | undefined;
-        dataInfo: IHeatmapInfo | undefined;
-    } & {
-        setData: (newData: DecodedPayload[]) => void;
-        setClickmap: (newClickmap: ClickMapPoint[]) => void;
-        setClickAreas: (newClickAreas: IPersistedAreaData[]) => void;
-        setScrollmap: (newScrollmap: ScrollMapPoint[]) => void;
-        setDataInfo: (newDataInfo: IHeatmapInfo) => void;
-        removeClickArea: (areaId: string) => void;
-        clearView: (viewId: string) => void;
-    }) => T, props?: {
+    <T>(selector: (state: IHeatmapDataState & IHeatmapDataActions) => T, props?: {
         viewId?: string;
     } | undefined): T;
     (props?: {
         viewId?: string;
-    } | undefined): {
-        data: import("@gemx-dev/clarity-decode/types/data").DecodedPayload[] | undefined;
-        clickmap: ClickMapPoint[] | undefined;
-        clickAreas: IPersistedAreaData[] | undefined;
-        scrollmap: ScrollMapPoint[] | undefined;
-        dataInfo: IHeatmapInfo | undefined;
-    } & {
-        setData: (newData: DecodedPayload[]) => void;
-        setClickmap: (newClickmap: ClickMapPoint[]) => void;
-        setClickAreas: (newClickAreas: IPersistedAreaData[]) => void;
-        setScrollmap: (newScrollmap: ScrollMapPoint[]) => void;
-        setDataInfo: (newDataInfo: IHeatmapInfo) => void;
-        removeClickArea: (areaId: string) => void;
-        clearView: (viewId: string) => void;
-    };
+    } | undefined): IHeatmapDataState & IHeatmapDataActions;
 };
 export {};
 //# sourceMappingURL=useHeatmapData.d.ts.map

package/dist/esm/hooks/view-context/useHeatmapData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapData.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/useHeatmapData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AASnH,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;IACtC,UAAU,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACxC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;CACpC;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,CAAC,aAAa,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAMzE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;;;;;;2BAYJ,cAAc,EAAE;mCACR,aAAa,EAAE;uCACX,kBAAkB,EAAE;qCACtB,cAAc,EAAE;mCAClB,YAAY;kCACb,MAAM;4BACZ,MAAM;;;;;;;;;;;;;2BANP,cAAc,EAAE;mCACR,aAAa,EAAE;uCACX,kBAAkB,EAAE;qCACtB,cAAc,EAAE;mCAClB,YAAY;kCACb,MAAM;4BACZ,MAAM;;CAE5B,CAAC"}
+{"version":3,"file":"useHeatmapData.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/useHeatmapData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMnH,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,aAAa,EAAE,GAAG,SAAS,CAAC;IACtC,UAAU,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IAC7C,SAAS,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACxC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;CACpC;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,CAAC,aAAa,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC7D,YAAY,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc;;;;;;;CAqBzB,CAAC"}

package/dist/esm/hooks/view-context/useHeatmapSetting.d.ts

@@ -0,0 +1,38 @@
+import type { IClickType, IClickRankType, IScrollType } from '../../types';
+interface IHeatmapSettingState {
+    rankedBy: IClickRankType | undefined;
+    clickType: IClickType | undefined;
+    scrollType: IScrollType | undefined;
+}
+interface IHeatmapSettingActions {
+    setRankedBy: (rankedBy: IClickRankType) => void;
+    setClickType: (clickType: IClickType) => void;
+    setScrollType: (scrollType: IScrollType) => void;
+    clearView: (viewId: string) => void;
+}
+/**
+ * Hook to access heatmap setting state and actions with optional selector
+ *
+ * @example
+ * ```tsx
+ * // Get everything
+ * const { rankedBy, clickType, setRankedBy } = useHeatmapSetting();
+ *
+ * // Get only what you need (no unnecessary re-renders)
+ * const rankedBy = useHeatmapSetting(s => s.rankedBy);
+ * const { setRankedBy, setClickType } = useHeatmapSetting(s => ({
+ *   setRankedBy: s.setRankedBy,
+ *   setClickType: s.setClickType,
+ * }));
+ * ```
+ */
+export declare const useHeatmapSetting: {
+    <T>(selector: (state: IHeatmapSettingState & IHeatmapSettingActions) => T, props?: {
+        viewId?: string;
+    } | undefined): T;
+    (props?: {
+        viewId?: string;
+    } | undefined): IHeatmapSettingState & IHeatmapSettingActions;
+};
+export {};
+//# sourceMappingURL=useHeatmapSetting.d.ts.map

package/dist/esm/hooks/view-context/useHeatmapSetting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeatmapSetting.d.ts","sourceRoot":"","sources":["../../../src/hooks/view-context/useHeatmapSetting.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI3E,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAC;IACrC,SAAS,EAAE,UAAU,GAAG,SAAS,CAAC;IAClC,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,UAAU,sBAAsB;IAC9B,WAAW,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,SAAS,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,CAAC,UAAU,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB;;;;;;;CAe5B,CAAC"}

package/dist/esm/hooks/viz-elm/useHeatmapElementPosition.d.ts

@@ -1,11 +1,11 @@
-import type { ElementRect, HeatmapElement, WebVisualizer } from '../../types';
+import type { ElementRect, IClickmapSorted, WebVisualizer } from '../../types';
 interface Params {
     iframeRef: React.RefObject<HTMLIFrameElement>;
     wrapperRef: React.RefObject<HTMLElement>;
     visualizer?: WebVisualizer;
 }
 export declare const useHeatmapElementPosition: ({ iframeRef, wrapperRef, visualizer }: Params) => {
-    getRect: (element?: HeatmapElement) => ElementRect | null;
+    getRect: (element?: IClickmapSorted) => ElementRect | null;
 };
 export {};
 //# sourceMappingURL=useHeatmapElementPosition.d.ts.map

package/dist/esm/hooks/viz-elm/useHeatmapElementPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHeatmapElementPosition.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHeatmapElementPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAO9E,UAAU,MAAM;IACd,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,yBAAyB,GAAI,uCAAuC,MAAM;wBAMxE,cAAc,KAAG,WAAW,GAAG,IAAI;CA2CjD,CAAC"}
+{"version":3,"file":"useHeatmapElementPosition.d.ts","sourceRoot":"","sources":["../../../src/hooks/viz-elm/useHeatmapElementPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAO/E,UAAU,MAAM;IACd,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,yBAAyB,GAAI,uCAAuC,MAAM;wBAMxE,eAAe,KAAG,WAAW,GAAG,IAAI;CA2ClD,CAAC"}

package/dist/esm/index.js

@@ -186,6 +186,15 @@ var IClickType;
     IClickType["First"] = "first-clicks";
     IClickType["Last"] = "last-clicks";
 })(IClickType || (IClickType = {}));
+var IClickRankType;
+(function (IClickRankType) {
+    IClickRankType["MostClicks"] = "most-clicks";
+    IClickRankType["Revenue"] = "revenue";
+    IClickRankType["AttributionRate"] = "attribution-rate";
+    IClickRankType["ConversionRate"] = "conversion-rate";
+    IClickRankType["RevenuePerClick"] = "revenue-per-click";
+    IClickRankType["RevenuePerSession"] = "revenue-per-session";
+})(IClickRankType || (IClickRankType = {}));
 var IClickMode;
 (function (IClickMode) {
     IClickMode["Default"] = "default";
@@ -259,6 +268,16 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
             newScrollmap.set(viewId, scrollmap);
             return { scrollmap: newScrollmap };
         }),
+        setDataInfoByKey: (key, value, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const currentHeatmapInfo = prev.dataInfo.get(viewId) || {};
+            const newHeatmapInfo = {
+                ...currentHeatmapInfo,
+                [key]: value,
+            };
+            const newDataInfo = new Map(prev.dataInfo);
+            newDataInfo.set(viewId, newHeatmapInfo);
+            return { dataInfo: newDataInfo };
+        }),
         copyView: (fromViewId, toViewId) => set((prev) => {
             const newData = new Map(prev.data);
             const newClickmap = new Map(prev.clickmap);
@@ -307,6 +326,60 @@ const useHeatmapDataStore = create()(subscribeWithSelector((set) => {
     };
 }));
 
+const useHeatmapSettingStore = create()(subscribeWithSelector((set) => {
+    return {
+        rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
+        clickType: new Map([[DEFAULT_VIEW_ID, IClickType.Total]]),
+        scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
+        setRankedBy: (rankedBy, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newRankedBy = new Map(prev.rankedBy);
+            newRankedBy.set(viewId, rankedBy);
+            return { rankedBy: newRankedBy };
+        }),
+        setClickType: (clickType, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newClickType = new Map(prev.clickType);
+            newClickType.set(viewId, clickType);
+            return { clickType: newClickType };
+        }),
+        setScrollType: (scrollType, viewId = DEFAULT_VIEW_ID) => set((prev) => {
+            const newScrollType = new Map(prev.scrollType);
+            newScrollType.set(viewId, scrollType);
+            return { scrollType: newScrollType };
+        }),
+        copyView: (fromViewId, toViewId) => set((prev) => {
+            const newRankedBy = new Map(prev.rankedBy);
+            const newClickType = new Map(prev.clickType);
+            const newScrollType = new Map(prev.scrollType);
+            newRankedBy.set(toViewId, prev.rankedBy.get(fromViewId));
+            newClickType.set(toViewId, prev.clickType.get(fromViewId));
+            newScrollType.set(toViewId, prev.scrollType.get(fromViewId));
+            return {
+                rankedBy: newRankedBy,
+                clickType: newClickType,
+                scrollType: newScrollType,
+            };
+        }),
+        clearView: (viewId) => set((prev) => {
+            const newRankedBy = new Map(prev.rankedBy);
+            const newClickType = new Map(prev.clickType);
+            const newScrollType = new Map(prev.scrollType);
+            newRankedBy.delete(viewId);
+            newClickType.delete(viewId);
+            newScrollType.delete(viewId);
+            return {
+                rankedBy: newRankedBy,
+                clickType: newClickType,
+                scrollType: newScrollType,
+            };
+        }),
+        resetAll: () => set({
+            rankedBy: new Map([[DEFAULT_VIEW_ID, IClickRankType.MostClicks]]),
+            clickType: new Map([[DEFAULT_VIEW_ID, IClickType.Total]]),
+            scrollType: new Map([[DEFAULT_VIEW_ID, IScrollType.Depth]]),
+        }),
+    };
+}));
+
 const useHeatmapVizStore = create()(subscribeWithSelector((set) => {
     return {
         isRenderViz: new Map([[DEFAULT_VIEW_ID, false]]),
@@ -1043,9 +1116,6 @@ const useHeatmapClick = createViewContextHook({
     }),
 });
 
-// ===========================
-// Hook
-// ===========================
 /**
  * Hook to access heatmap data state and actions with optional selector
  *
@@ -1075,6 +1145,7 @@ const useHeatmapData = createViewContextHook({
         setData: (newData) => store.setData(newData, viewId),
         setClickmap: (newClickmap) => store.setClickmap(newClickmap, viewId),
         setClickAreas: (newClickAreas) => store.setClickAreas(newClickAreas, viewId),
+        setDataInfoByKey: (key, value) => store.setDataInfoByKey(key, value, viewId),
         setScrollmap: (newScrollmap) => store.setScrollmap(newScrollmap, viewId),
         setDataInfo: (newDataInfo) => store.setDataInfo(newDataInfo, viewId),
         removeClickArea: (areaId) => store.removeClickArea(areaId, viewId),
@@ -1139,6 +1210,37 @@ const useHeatmapScroll = createViewContextHook({
     }),
 });
 
+/**
+ * Hook to access heatmap setting state and actions with optional selector
+ *
+ * @example
+ * ```tsx
+ * // Get everything
+ * const { rankedBy, clickType, setRankedBy } = useHeatmapSetting();
+ *
+ * // Get only what you need (no unnecessary re-renders)
+ * const rankedBy = useHeatmapSetting(s => s.rankedBy);
+ * const { setRankedBy, setClickType } = useHeatmapSetting(s => ({
+ *   setRankedBy: s.setRankedBy,
+ *   setClickType: s.setClickType,
+ * }));
+ * ```
+ */
+const useHeatmapSetting = createViewContextHook({
+    useStore: useHeatmapSettingStore,
+    getState: (store, viewId) => ({
+        rankedBy: store.rankedBy.get(viewId),
+        clickType: store.clickType.get(viewId),
+        scrollType: store.scrollType.get(viewId),
+    }),
+    getActions: (store, viewId) => ({
+        setRankedBy: (rankedBy) => store.setRankedBy(rankedBy, viewId),
+        setClickType: (clickType) => store.setClickType(clickType, viewId),
+        setScrollType: (scrollType) => store.setScrollType(scrollType, viewId),
+        clearView: (viewId) => store.clearView(viewId),
+    }),
+});
+
 // ===========================
 // Hook
 // ===========================
@@ -1631,31 +1733,31 @@ function getElementSelector(element) {
  * @param elementMapInfo - Map of hash to element click info
  * @returns Total clicks for element + all descendants
  */
-function calculateTotalClicksWithChildren(element, elementMapInfo) {
+function calculateTotalClicksWithChildren(element, clickMapMetrics) {
     let totalClicks = 0;
     // Get clicks for the element itself
     const elementHash = getElementHash(element);
     if (elementHash) {
-        const elementInfo = elementMapInfo[elementHash];
-        totalClicks += elementInfo?.totalclicks || 0;
+        const elementInfo = clickMapMetrics[elementHash];
+        totalClicks += elementInfo?.totalClicked.value ?? 0;
     }
     const children = element.querySelectorAll('*');
     children.forEach((child) => {
         const childHash = getElementHash(child);
         if (childHash) {
-            const childInfo = elementMapInfo[childHash];
-            totalClicks += childInfo?.totalclicks || 0;
+            const childInfo = clickMapMetrics[childHash];
+            totalClicks += childInfo?.totalClicked.value ?? 0;
         }
     });
     return totalClicks;
 }
 function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
-    if (!heatmapInfo.elementMapInfo)
+    if (!heatmapInfo.clickMapMetrics)
         return;
     const totalClicks = heatmapInfo.totalClicks || 0;
-    const elementInfo = heatmapInfo.elementMapInfo[hash];
+    const elementInfo = heatmapInfo.clickMapMetrics[hash];
     // Calculate total clicks including all child elements
-    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.elementMapInfo);
+    const elementClicks = calculateTotalClicksWithChildren(element, heatmapInfo.clickMapMetrics);
     const clickDist = calculateClickDistribution(elementClicks, totalClicks);
     const rect = getElementRect(element);
     const color = getColorFromClickDist(clickDist);
@@ -1691,11 +1793,11 @@ function buildAreaNode(element, hash, heatmapInfo, shadowRoot, persistedData) {
     };
     return areaNode;
 }
-function getTopElementsByClicks(elementMapInfo, topN = 10) {
-    const elements = Object.entries(elementMapInfo)
+function getTopElementsByClicks(clickMapMetrics, topN = 10) {
+    const elements = Object.entries(clickMapMetrics)
         .map(([hash, info]) => ({
         hash,
-        totalclicks: info.totalclicks,
+        totalclicks: info.totalClicked.value ?? 0,
         selector: info.selector || '',
     }))
         .sort((a, b) => b.totalclicks - a.totalclicks)
@@ -2233,11 +2335,11 @@ const getElementRank = (hash, elements) => {
 const buildElementInfo = (hash, rect, heatmapInfo) => {
     if (!rect || !heatmapInfo)
         return null;
-    const info = heatmapInfo.elementMapInfo?.[hash];
+    const info = heatmapInfo.clickMapMetrics?.[hash];
     if (!info)
         return null;
     const rank = getElementRank(hash, heatmapInfo.sortedElements);
-    const clicks = info.totalclicks ?? 0;
+    const clicks = info.totalClicked.value ?? 0;
     const selector = info.selector ?? '';
     const baseInfo = {
         hash,
@@ -3870,7 +3972,7 @@ const clearCanvas = (canvas) => {
 };
 
 function validateAreaCreation(dataInfo, hash, areas) {
-    if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks) {
+    if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks) {
         logger$4.warn('Cannot create area: missing heatmap data');
         return false;
     }
@@ -4263,7 +4365,7 @@ const useAreaTopAutoDetect = (props) => {
     useEffect(() => {
         if (isInitializing)
             return;
-        if (!dataInfo?.elementMapInfo || !dataInfo?.totalClicks)
+        if (!dataInfo?.clickMapMetrics || !dataInfo?.totalClicks)
             return;
         if (!autoCreateTopN)
             return;
@@ -4271,7 +4373,7 @@ const useAreaTopAutoDetect = (props) => {
             return;
         if (areas?.length)
             return;
-        const topElements = getTopElementsByClicks(dataInfo.elementMapInfo, autoCreateTopN);
+        const topElements = getTopElementsByClicks(dataInfo.clickMapMetrics, autoCreateTopN);
         const newAreas = [];
         topElements.forEach(({ hash }) => {
             const element = findElementByHash({ hash, vizRef });
@@ -4416,11 +4518,11 @@ const useClickedElement = ({ visualRef, getRect }) => {
     useEffect(() => {
         const hash = selectedElement?.hash;
         // if (hash === clickedElement?.hash) return;
-        if (!selectedElement || !hash || !dataInfo?.elementMapInfo) {
+        if (!selectedElement || !hash || !dataInfo?.clickMapMetrics) {
             reset();
             return;
         }
-        const info = dataInfo.elementMapInfo[hash];
+        const info = dataInfo.clickMapMetrics[hash];
         if (!info) {
             setClickedElement(null);
             return;
@@ -4461,7 +4563,7 @@ const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
         if (!hash)
             return;
         const elementIsInViewportFn = () => {
-            const elementInfo = dataInfo?.elementMapInfo?.[hash];
+            const elementInfo = dataInfo?.clickMapMetrics?.[hash];
             if (!elementInfo)
                 return;
             const rect = getRect({ hash, selector: elementInfo.selector });
@@ -4674,7 +4776,7 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
             reset();
             return;
         }
-        const selector = dataInfo?.elementMapInfo?.[hash];
+        const selector = dataInfo?.clickMapMetrics?.[hash];
         const rect = getRect({ hash, selector });
         const elementInfo = buildElementInfo(hash, rect, dataInfo);
         if (!elementInfo) {
@@ -4739,7 +4841,7 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
     for (let i = 0; i < elementsAtPoint.length; i++) {
         const element = elementsAtPoint[i];
         const elementHash = getElementHash(element) ?? '';
-        const isExistElmInfo = heatmapInfo.elementMapInfo?.[elementHash];
+        const isExistElmInfo = heatmapInfo.clickMapMetrics?.[elementHash];
         if (elementHash && isExistElmInfo) {
             const boundingBox = getBoundingBox(element);
             if (boundingBox) {
@@ -4758,7 +4860,7 @@ const findTargetElement = (doc, x, y, heatmapInfo) => {
     return targetElement;
 };
 const isIframeReady = (iframeRef, heatmapInfo) => {
-    return !!(iframeRef.current?.contentDocument && heatmapInfo?.elementMapInfo);
+    return !!(iframeRef.current?.contentDocument && heatmapInfo?.clickMapMetrics);
 };
 const isValidElement = (element, heatmapInfo) => {
     if (!element)
@@ -4766,7 +4868,7 @@ const isValidElement = (element, heatmapInfo) => {
     const hash = getElementHash(element);
     if (!hash)
         return false;
-    return !!heatmapInfo?.elementMapInfo?.[hash];
+    return !!heatmapInfo?.clickMapMetrics?.[hash];
 };
 
 function useIframeHeightProcessor(options) {
@@ -8646,4 +8748,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, ELM_CALLOUT_CONFIG, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRect, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, DEFAULT_ZOOM_RATIO, ELM_CALLOUT_CONFIG, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickRankType, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapSetting, useHeatmapViz, useHeatmapVizRect, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };