@gemx-dev/heatmap-react 3.5.19 → 3.5.23

package/dist/umd/stores/data.d.ts

@@ -0,0 +1,18 @@
+import { ClickMapPoint, DecodedPayload, IHeatmapConfig } from '../types';
+export interface IHeatmapState {
+    hideSidebar: boolean;
+}
+export interface IHeatmapDataStore {
+    data?: DecodedPayload[];
+    clickmap?: ClickMapPoint[];
+    config?: IHeatmapConfig;
+    iframeHeight: number;
+    state: IHeatmapState;
+    setState: (state: IHeatmapState) => void;
+    setData: (data: DecodedPayload[]) => void;
+    setClickmap: (clickmap: ClickMapPoint[]) => void;
+    setConfig: (config: IHeatmapConfig) => void;
+    setIframeHeight: (iframeHeight: number) => void;
+}
+export declare const useHeatmapDataStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IHeatmapDataStore>>;
+//# sourceMappingURL=data.d.ts.map

package/dist/umd/stores/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../src/stores/data.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEzE,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,mBAAmB,gFAa7B,CAAC"}

package/dist/umd/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data';
+//# sourceMappingURL=index.d.ts.map

package/dist/umd/stores/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stores/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/umd/ui/BoxStack/BoxStack.d.ts

@@ -0,0 +1,56 @@
+type Style = Omit<React.CSSProperties, 'display' | 'flexDirection' | 'overflow' | 'position' | 'flex' | 'justifyContent' | 'alignItems' | 'flexWrap' | 'gap' | 'height'>;
+type FlexDirection = 'row' | 'column';
+type Overflow = 'hidden' | 'visible' | 'scroll' | 'auto';
+type Position = 'relative' | 'absolute' | 'fixed' | 'sticky';
+type Flex = `${number}` | 'auto' | 'initial' | 'none' | string;
+type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type Gap = number | string;
+type Height = number | string;
+export interface BoxStackProps {
+    id?: string;
+    children: React.ReactNode;
+    style?: Style;
+    /**
+     * The flex of the flex container.
+     * @default 'none'
+     */
+    flex?: Flex;
+    /**
+     * The gap between the children.
+     * @default 0
+     */
+    gap?: Gap;
+    /**
+     * The justify content of the flex container.
+     * @default undefined
+     */
+    justifyContent?: JustifyContent;
+    /**
+     * The align items of the flex container.
+     * @default undefined
+     */
+    alignItems?: AlignItems;
+    /**
+     * The direction of the flex container.
+     */
+    flexDirection: FlexDirection;
+    /**
+     * The overflow of the flex container.
+     * @default 'hidden'
+     */
+    overflow?: Overflow;
+    /**
+     * The position of the flex container.
+     * @default 'relative'
+     */
+    position?: Position;
+    /**
+     * The height of the flex container.
+     * @default 'auto'
+     */
+    height?: Height;
+}
+export declare const BoxStack: React.FC<BoxStackProps>;
+export {};
+//# sourceMappingURL=BoxStack.d.ts.map

package/dist/umd/ui/BoxStack/BoxStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxStack.d.ts","sourceRoot":"","sources":["../../../src/ui/BoxStack/BoxStack.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,IAAI,CACf,KAAK,CAAC,aAAa,EACjB,SAAS,GACT,eAAe,GACf,UAAU,GACV,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,YAAY,GACZ,UAAU,GACV,KAAK,GACL,QAAQ,CACX,CAAC;AAEF,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,CAAC;AACtC,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AACzD,KAAK,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7D,KAAK,IAAI,GAAG,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAC/D,KAAK,cAAc,GACf,YAAY,GACZ,UAAU,GACV,QAAQ,GACR,eAAe,GACf,cAAc,GACd,cAAc,CAAC;AACnB,KAAK,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAEhF,KAAK,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AAC3B,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,aAAa,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0C5C,CAAC"}

package/dist/umd/ui/BoxStack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BoxStack';
+//# sourceMappingURL=index.d.ts.map

package/dist/umd/ui/BoxStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/BoxStack/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/umd/ui/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BoxStack';
+//# sourceMappingURL=index.d.ts.map

package/dist/umd/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/umd/utils/device.d.ts

@@ -0,0 +1,2 @@
+export declare function isMobileDevice(userAgent: string): boolean;
+//# sourceMappingURL=device.d.ts.map

package/dist/umd/utils/device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../src/utils/device.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAMzD"}

package/dist/umd/utils/retry.d.ts

@@ -0,0 +1,2 @@
+export declare function retry(fn: () => Promise<any> | any, retries: number, delay: number): Promise<any>;
+//# sourceMappingURL=retry.d.ts.map

package/dist/umd/utils/retry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"retry.d.ts","sourceRoot":"","sources":["../../src/utils/retry.ts"],"names":[],"mappings":"AAIA,wBAAsB,KAAK,CACzB,EAAE,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,EAC5B,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,GACZ,OAAO,CAAC,GAAG,CAAC,CAWd"}

package/dist/umd/utils/sort.d.ts

@@ -0,0 +1,3 @@
+import { DecodedEvent } from '../types';
+export declare function sortEvents(a: DecodedEvent, b: DecodedEvent): number;
+//# sourceMappingURL=sort.d.ts.map

package/dist/umd/utils/sort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../src/utils/sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,wBAAgB,UAAU,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,YAAY,GAAG,MAAM,CAEnE"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gemx-dev/heatmap-react",
   "author": "gemx-dev",
-  "version": "3.5.19",
+  "version": "3.5.23",
   "license": "MIT",
   "sideEffects": [
     "*.css"
@@ -67,22 +67,19 @@
     "./package.json": "./package.json",
     ".": {
       "node": {
-        "types": "./dist/esm/index.d.ts",
-        "module": "./dist/esm/index.js",
-        "require": "./dist/umd/index.js",
-        "import": "./dist/esm/index.mjs"
+        "types": "./src/global.d.ts",
+        "module": "./src/index.ts",
+        "require": "./src/index.ts",
+        "import": "./src/index.ts"
       },
-      "browser": {
-        "import": "./dist/esm/index.js",
-        "require": "./dist/umd/index.js"
-      },
-      "default": "./dist/esm/index.js"
+      "default": "./src/index.ts"
     },
-    "./dist/base.css": "./dist/base.css",
-    "./dist/style.css": "./dist/style.css"
+    "./dist/base.css": "./src/styles/base.css",
+    "./dist/style.css": "./src/styles/style.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "module": "dist/esm/index.js"
-}
+}

package/src/components/GraphView.tsx

@@ -0,0 +1,58 @@
+import type { Node } from '@xyflow/react';
+
+import { Background, Controls, ReactFlow, useNodesState } from '@xyflow/react';
+import React, { useEffect } from 'react';
+
+const initialNodes: Node = { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } };
+
+interface GraphViewProps {
+  children: React.ReactNode;
+  width: number;
+  height: number;
+}
+
+export const GraphView: React.FC<GraphViewProps> = ({ children, width, height }) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([
+    {
+      ...initialNodes,
+      width: width,
+      height: height,
+    },
+  ]);
+
+  const CustomNode = () => {
+    return <>{children}</>;
+  };
+  const nodeTypes = {
+    default: CustomNode,
+  };
+
+  useEffect(() => {
+    if (!width) return;
+
+    setNodes((prev) => {
+      const node = prev.find((node) => node.id === '1') as Node;
+      const newNode: Node = {
+        ...node,
+        measured: { height: height, width: width },
+        height: height,
+        width: width,
+      };
+      return [newNode];
+    });
+  }, [width, height, setNodes]);
+  return (
+    <ReactFlow
+      nodes={nodes}
+      nodeTypes={nodeTypes}
+      onNodesChange={onNodesChange}
+      debug={true}
+      minZoom={0.5}
+      maxZoom={2}
+      fitView
+    >
+      <Controls />
+      <Background />
+    </ReactFlow>
+  );
+};

package/src/components/Layout/ContentHeader.tsx

@@ -0,0 +1,15 @@
+import { BoxStack } from '../../ui';
+
+export const ContentHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <BoxStack
+      id="gx-hm-content-header"
+      flexDirection="row"
+      alignItems="center"
+      overflow="auto"
+      // style={{ borderBottom: '1px solid #ddd' }}
+    >
+      {children}
+    </BoxStack>
+  );
+};

package/src/components/Layout/HeatmapLayout.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useEffect } from 'react';
+import { useHeatmapDataStore } from '../../stores';
+import { ClickMapPoint, DecodedPayload } from '../../types';
+import { BoxStack } from '../../ui';
+import { WrapperLayout } from './WrapperLayout';
+
+interface HeatmapLayoutProps {
+  data?: DecodedPayload[];
+  clickmap?: ClickMapPoint[];
+  header: React.ReactNode;
+  sidebar: React.ReactNode;
+  toolbar: React.ReactNode;
+}
+export const HeatmapLayout: React.FC<HeatmapLayoutProps> = ({
+  data,
+  clickmap,
+  header,
+  toolbar,
+  sidebar,
+}) => {
+  const setData = useHeatmapDataStore((state) => state.setData);
+  const setClickmap = useHeatmapDataStore((state) => state.setClickmap);
+
+  const handleSetClickmap = useCallback(
+    (clickmap?: ClickMapPoint[]) => {
+      if (!clickmap) return;
+
+      setClickmap(clickmap);
+    },
+    [clickmap],
+  );
+  const handleSetData = useCallback(
+    (data?: DecodedPayload[]) => {
+      if (!data) return;
+
+      setData(data);
+    },
+    [data],
+  );
+
+  useEffect(() => {
+    handleSetData(data);
+  }, [data]);
+
+  useEffect(() => {
+    handleSetClickmap(clickmap);
+  }, [clickmap]);
+
+  return (
+    <BoxStack id="gx-hm-project" flexDirection="column" flex="1" height="100%">
+      <BoxStack id="gx-hm-project-content" flexDirection="column" flex="1">
+        <div
+          style={{
+            minHeight: '100%',
+            display: 'flex',
+          }}
+        >
+          <WrapperLayout header={header} toolbar={toolbar} sidebar={sidebar} />
+        </div>
+      </BoxStack>
+    </BoxStack>
+  );
+};

package/src/components/Layout/LeftSidebar.tsx

@@ -0,0 +1,32 @@
+import { useHeatmapDataStore } from '../../stores';
+
+const SIDEBAR_WIDTH = 280;
+export const LeftSidebar: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const isHideSidebar = useHeatmapDataStore((state) => state.state.hideSidebar);
+  if (isHideSidebar) {
+    return null;
+  }
+  return (
+    <div
+      className="gx-hm-sidebar"
+      style={{
+        height: '100%',
+        display: 'flex',
+        ...(isHideSidebar
+          ? {
+              width: '0',
+              transform: 'translateX(-100%)',
+              visibility: 'hidden',
+            }
+          : { width: `${SIDEBAR_WIDTH}px` }),
+      }}
+    >
+      <div
+        className="gx-hm-sidebar-wrapper"
+        style={{ height: '100%', width: `${SIDEBAR_WIDTH}px` }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/Layout/WrapperLayout.tsx

@@ -0,0 +1,18 @@
+import { BoxStack } from '../../ui';
+import { ContentHeader } from './ContentHeader';
+import { WrapperPreview } from './WrapperPreview';
+
+interface WrapperLayoutProps {
+  header: React.ReactNode;
+  toolbar: React.ReactNode;
+  sidebar: React.ReactNode;
+}
+export const WrapperLayout: React.FC<WrapperLayoutProps> = ({ header, toolbar, sidebar }) => {
+  return (
+    <BoxStack id="gx-hm-layout" flexDirection="column" flex="1">
+      <ContentHeader>{header}</ContentHeader>
+      <ContentHeader>{toolbar}</ContentHeader>
+      <WrapperPreview>{sidebar}</WrapperPreview>
+    </BoxStack>
+  );
+};

package/src/components/Layout/WrapperPreview.tsx

@@ -0,0 +1,14 @@
+import { VizDomContainer } from '../VizDom';
+import { LeftSidebar } from './LeftSidebar';
+
+export const WrapperPreview: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div
+      className="gx-hm-container"
+      style={{ display: 'flex', overflowY: 'hidden', flex: '1', position: 'relative' }}
+    >
+      <LeftSidebar>{children}</LeftSidebar>
+      <VizDomContainer />
+    </div>
+  );
+};

package/src/components/Layout/index.ts

@@ -0,0 +1 @@
+export * from './HeatmapLayout';