ag-common 0.0.698 → 0.0.700

package/dist/ui/components/BarChart/Base.js

@@ -31,7 +31,7 @@ const BarChart = ({ data: dataRaw, style: sRaw, className, }) => {
     const UT = (0, useTooltip_1.useTooltip)();
     const maxWidth = Math.max(...dataRaw.map((a) => a.total));
     return (react_1.default.createElement(BarChartBase, { "data-type": "bcb", style: style, className: className },
-        react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p, { style: style }))),
+        react_1.default.createElement(UT.Comp, { pos: UT.pos }, ({ data }) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, data, { style: style }))),
         dataRaw.map((data) => (react_1.default.createElement(ItemStyled, { style: style, key: data.name, data: data, maxWidth: maxWidth, onMouseLeave: () => UT.setPos(undefined), onMouseMove: (element) => {
                 var _a, _b;
                 const selectedKey = (_b = (_a = document

package/dist/ui/components/Modal/Modal.d.ts

@@ -4,4 +4,4 @@ export declare const ModalItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Modal: ({ open, setOpen, children, position, topPosition, showCloseButton, closeOnMoveMouseOutside, className, closeOnClickOutside, portalId: pidraw, style, }: IModal) => React.JSX.Element | null;
+export declare const Modal: (p: IModal) => React.JSX.Element | null;

package/dist/ui/components/Modal/Modal.js

@@ -31,6 +31,7 @@ exports.Modal = exports.ModalItem = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
+const dom_1 = require("../../helpers/dom");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const styles_1 = require("../../styles");
 const Close_1 = require("../Close");
@@ -85,7 +86,8 @@ exports.ModalItem = styled_1.default.div `
 const CloseStyled = (0, styled_1.default)(Close_1.Close) `
   z-index: 1;
 `;
-const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'top', showCloseButton = true, closeOnMoveMouseOutside = false, className, closeOnClickOutside = true, portalId: pidraw, style, }) => {
+const Modal = (p) => {
+    const { open, setOpen, children, position = 'left', topPosition = 'top', showCloseButton = true, closeOnMoveMouseOutside = false, className, closeOnClickOutside = true, portalId: pidraw, style, } = p;
     let portalId = pidraw;
     if (portalId === undefined) {
         portalId = globalId;
@@ -158,7 +160,7 @@ const Modal = ({ open, setOpen, children, position = 'left', topPosition = 'top'
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
     const Content = (react_1.default.createElement(FixedBackground, null,
-        react_1.default.createElement(ModalBase, { "data-bounced": bounced, "data-position": position, "data-topposition": topPosition, ref: ref, className: className, style: style },
+        react_1.default.createElement(ModalBase, Object.assign({}, (0, dom_1.filterDataProps)(p), { "data-bounced": bounced, "data-position": position, "data-topposition": topPosition, ref: ref, className: className, style: style }),
             showCloseButton && (react_1.default.createElement(CloseStyled, { "data-type": "modal-close", onClick: (e) => setOpen(false, e) })),
             children)));
     if (portalId && portalElem === undefined) {

package/dist/ui/components/TreeChart/TooltipContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TreeNodeData, TreeNodeOut } from './types';
+export declare const TooltipContent: ({ data, node, head, }: {
+    data: TreeNodeData;
+    node: TreeNodeOut;
+    head: TreeNodeOut;
+}) => React.JSX.Element;

package/dist/ui/components/TreeChart/TooltipContent.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importDefault(require("react"));
+const Base = styled_1.default.div `
+  padding: 0.5rem;
+  border: solid 1px black;
+  background-color: white;
+`;
+const Title = styled_1.default.div `
+  font-weight: bold;
+`;
+const TooltipContent = ({ data, node, head, }) => {
+    var _a;
+    let rows = [];
+    let n = node;
+    while (n) {
+        const t = ((_a = data.titleFn) === null || _a === void 0 ? void 0 : _a.call(data, {
+            path: n.name,
+            pathCount: n.size,
+            fullCount: head.size,
+        })) || `${n.name} (${n.size}/${head.size})`;
+        rows = [t, ...rows];
+        n = n.parent;
+    }
+    return (react_1.default.createElement(Base, null,
+        react_1.default.createElement(Title, null, rows.map((r, i) => (react_1.default.createElement("div", { key: r, style: { marginLeft: `${i * 2}px` } }, r))))));
+};
+exports.TooltipContent = TooltipContent;

package/dist/ui/components/TreeChart/base.js

@@ -31,9 +31,11 @@ exports.TreeChart = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const useResize_1 = require("../../helpers/useResize");
+const useTooltip_1 = require("../../helpers/useTooltip");
 const styles_1 = require("../../styles");
 const common_1 = require("../../styles/common");
 const helpers_1 = require("./helpers");
+const TooltipContent_1 = require("./TooltipContent");
 const Base = styled_1.default.div `
   border: solid 1px #ccc;
   max-height: 100%;
@@ -68,28 +70,38 @@ const Title = styled_1.default.div `
   min-height: 1rem;
   line-height: 1rem;
 `;
-const render = ({ n, depth, head, headDim, tnd, }) => {
-    var _a;
-    const leaf = n.children.length === 0;
+const Render = ({ n, depth, head, headDim, tnd, UT, }) => {
+    const children = Object.values(n.children);
+    const leaf = children.length === 0;
     const sizeMult = n.size / head.size;
     const biggerDim = Math.max(headDim.width, headDim.height);
     const nodeSize = Math.floor(biggerDim * sizeMult).toString();
-    const title = ((_a = tnd.titleFn) === null || _a === void 0 ? void 0 : _a.call(tnd, {
-        path: n.name,
-        pathCount: n.size,
-        fullCount: head.size,
-    })) || `${n.name} (${n.size}/${head.size})`;
     return (react_1.default.createElement(Node, { "data-treenode": true, "data-leaf": leaf.toString(), style: Object.assign({ backgroundColor: (0, styles_1.getColourWheel)(depth) }, (leaf &&
             nodeSize && {
             width: nodeSize + 'px',
             height: nodeSize + 'px',
-        })), key: n.name, "data-ch": n.children.length, "data-size": n.size, title: title },
+        })), key: n.name, "data-ch": n.children.length, "data-size": n.size, onMouseLeave: () => UT.setPos(undefined), onMouseMove: (element) => {
+            UT.setPos({
+                element,
+                parent: null,
+                data: { data: tnd, node: n, head },
+            });
+            element.preventDefault();
+            element.stopPropagation();
+        } },
         n.name && react_1.default.createElement(Title, null, n.name),
-        n.children.length > 0 && (react_1.default.createElement(NodeChildren, { "data-type": "nc" }, n.children.map((c) => render({ n: c, depth: depth + 1, head, headDim, tnd }))))));
+        children.length > 0 && (react_1.default.createElement(NodeChildren, { "data-type": "nc" }, children.map((c) => Render({
+            UT,
+            n: c,
+            depth: depth + 1,
+            head,
+            headDim,
+            tnd,
+        }))))));
 };
 const TreeChart = (tnd) => {
-    const raw = (0, helpers_1.convertToRaw)({ tnd });
-    const head = (0, helpers_1.toArray)('', raw);
+    const UT = (0, useTooltip_1.useTooltip)();
+    const head = (0, helpers_1.convertToRaw)({ tnd });
     const pd = (0, useResize_1.useResize)();
     const [headDim, setHeadDim] = (0, react_1.useState)();
     const r = (0, react_1.useRef)(null);
@@ -107,6 +119,16 @@ const TreeChart = (tnd) => {
     if (head.size === 0) {
         return react_1.default.createElement("div", null);
     }
-    return (react_1.default.createElement(Base, { ref: r, className: tnd.className, style: tnd.style }, headDim && render({ tnd, n: head, depth: 0, head, headDim })));
+    return (react_1.default.createElement(Base, { ref: r, className: tnd.className, style: tnd.style },
+        react_1.default.createElement(UT.Comp, { pos: UT.pos }, ({ data }) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, data))),
+        headDim &&
+            Render({
+                UT,
+                tnd,
+                n: head,
+                depth: 0,
+                head,
+                headDim,
+            })));
 };
 exports.TreeChart = TreeChart;

package/dist/ui/components/TreeChart/helpers.d.ts

@@ -1,14 +1,4 @@
 import type { TreeNodeData, TreeNodeOut } from './types';
-interface TreeNodeRaw {
-    name: string;
-    size: number;
-    depth: number;
-    children: {
-        [P in string]: TreeNodeRaw;
-    };
-}
 export declare const convertToRaw: ({ tnd: { data, pathDelimiter }, }: {
     tnd: TreeNodeData;
-}) => TreeNodeRaw;
-export declare const toArray: (name: string, raw: TreeNodeRaw) => TreeNodeOut;
-export {};
+}) => TreeNodeOut;

package/dist/ui/components/TreeChart/helpers.js

@@ -1,11 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toArray = exports.convertToRaw = void 0;
+exports.convertToRaw = void 0;
 const convertToRaw = ({ tnd: { data, pathDelimiter }, }) => {
     if (data.length === 0) {
-        return { children: {}, size: 0, name: '', depth: 0 };
+        return { children: {}, size: 0, name: '', depth: 0, parent: undefined };
     }
-    const dm = { size: 0, children: {}, name: '', depth: 0 };
+    const dm = {
+        size: 0,
+        children: {},
+        name: '',
+        depth: 0,
+        parent: undefined,
+    };
     data.forEach((line) => {
         const names = line.path.split(pathDelimiter || '/');
         let node = dm;
@@ -23,6 +29,7 @@ const convertToRaw = ({ tnd: { data, pathDelimiter }, }) => {
                     size: 0,
                     name: names[a],
                     depth: a,
+                    parent: node,
                 };
             }
             node = node.children[names[a]];
@@ -32,20 +39,3 @@ const convertToRaw = ({ tnd: { data, pathDelimiter }, }) => {
     return dm;
 };
 exports.convertToRaw = convertToRaw;
-const toArrayAux = (name, n) => ({
-    name,
-    size: n.size,
-    depth: n.depth,
-    children: Object.entries(n.children).map(([cn, cv]) => toArrayAux(cn, cv)),
-});
-const toArray = (name, raw) => {
-    const arr = toArrayAux(name, {
-        children: raw.children,
-        size: 0,
-        name: '',
-        depth: 0,
-    });
-    arr.size = arr.children.map((d) => d.size).reduce((a, b) => a + b, 0);
-    return arr;
-};
-exports.toArray = toArray;

package/dist/ui/components/TreeChart/types.d.ts

@@ -3,7 +3,10 @@ export interface TreeNodeOut {
     name: string;
     size: number;
     depth: number;
-    children: TreeNodeOut[];
+    children: {
+        [P in string]: TreeNodeOut;
+    };
+    parent: TreeNodeOut | undefined;
 }
 export interface TreeNodeData {
     className?: string;

package/dist/ui/helpers/useTooltip.d.ts

@@ -1,5 +1,4 @@
 import type { MouseEvent } from 'react';
-import React from 'react';
 interface IPos<T> {
     cursor: MouseEvent;
     data: T;
@@ -10,20 +9,25 @@ interface IPos<T> {
     x: number;
     y: number;
 }
-type IUT = {
+interface IPosSize {
+    tooltipWidth: number;
+    tooltipHeight: number;
+}
+type ITooltipProps = {
     /** default 'ag-tooltip-portal' */
     portalId: string;
 };
-export declare const useTooltip: <T>(p?: IUT) => {
-    Comp: <T_1>({ pos, children, }: {
-        pos: IPos<T_1> | undefined;
-        children: (data: T_1) => JSX.Element;
-    }) => React.JSX.Element | null;
+export interface IUseTooltip<T> {
+    Comp: <T>({ pos, children, }: {
+        pos: IPos<T> | undefined;
+        children: (pos: IPos<T>, size?: IPosSize) => JSX.Element;
+    }) => JSX.Element | null;
     setPos: (p?: {
         element: MouseEvent;
         parent: Element | null;
         data: T;
-    }) => void;
+    } | undefined) => void;
     pos: IPos<T> | undefined;
-};
+}
+export declare const useTooltip: <T>(p?: ITooltipProps) => IUseTooltip<T>;
 export {};

package/dist/ui/helpers/useTooltip.js

@@ -38,23 +38,20 @@ const Comp = ({ pos, children, }) => {
     const ref = (0, react_1.createRef)();
     const [size, setSize] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (!ref.current) {
             return;
         }
         const tooltipWidth = Math.max(ref.current.clientWidth, ref.current.scrollWidth);
         const tooltipHeight = Math.max(ref.current.clientHeight, ref.current.scrollHeight);
-        if (tooltipHeight === ((_a = size === null || size === void 0 ? void 0 : size.p) === null || _a === void 0 ? void 0 : _a.tooltipHeight) ||
-            tooltipWidth === ((_b = size === null || size === void 0 ? void 0 : size.p) === null || _b === void 0 ? void 0 : _b.tooltipWidth) ||
+        if (tooltipHeight === (size === null || size === void 0 ? void 0 : size.tooltipHeight) ||
+            tooltipWidth === (size === null || size === void 0 ? void 0 : size.tooltipWidth) ||
             tooltipHeight === 0 ||
             tooltipWidth === 0) {
             return;
         }
         setSize({
-            p: {
-                tooltipWidth,
-                tooltipHeight,
-            },
+            tooltipWidth,
+            tooltipHeight,
         });
     }, [ref, size]);
     if (!pos) {
@@ -65,32 +62,36 @@ const Comp = ({ pos, children, }) => {
     let top;
     let bottom;
     const gap = 5;
-    if (size === null || size === void 0 ? void 0 : size.p) {
+    if (size) {
         left = pos.x + gap;
         const newRight = pos.parentWidth - pos.x + gap;
-        if (pos.x + gap + size.p.tooltipWidth > pos.parentWidth) {
+        if (pos.x + gap + size.tooltipWidth > pos.parentWidth) {
             left = undefined;
             right = newRight;
         }
         //
         top = pos.y + gap;
-        if (top + size.p.tooltipHeight > pos.parentHeight) {
+        if (top + size.tooltipHeight > pos.parentHeight) {
             top = undefined;
             bottom = pos.parentHeight - pos.y;
         }
-        if (right && right + size.p.tooltipWidth > pos.parentWidth) {
-            right = undefined;
+        if (right && right + size.tooltipWidth > pos.parentWidth) {
+            if (!pos.usePortal) {
+                right = undefined;
+            }
             left = 0;
         }
-        if (bottom && bottom + size.p.tooltipHeight > pos.parentHeight) {
-            bottom = undefined;
+        if (bottom && bottom + size.tooltipHeight > pos.parentHeight) {
+            if (!pos.usePortal) {
+                bottom = undefined;
+            }
             top = 0;
         }
     }
-    const Content = (react_1.default.createElement(Base, { ref: ref, style: Object.assign(Object.assign({ left,
+    const Content = (react_1.default.createElement(Base, { "data-type": "tooltip-content", ref: ref, style: Object.assign(Object.assign({ left,
             right,
             top,
-            bottom, zIndex: 10 }, (pos.usePortal && { position: 'fixed' })), (!(size === null || size === void 0 ? void 0 : size.p) && { zIndex: -1 })) }, children(pos.data)));
+            bottom, zIndex: 10, overflow: 'hidden' }, (pos.usePortal && { position: 'fixed' })), (!size && { zIndex: -1 })) }, children(pos, size)));
     const e = document.querySelector(`#${pos.portalId}`);
     if (pos.usePortal && e) {
         return (0, react_dom_1.createPortal)(Content, e);
@@ -127,6 +128,8 @@ const useTooltip = (p) => {
         let parentLeft = 0;
         let parentWidth = document.body.clientWidth;
         let parentHeight = document.body.clientHeight;
+        let x = 0;
+        let y = 0;
         if (p.parent) {
             ({
                 top: parentTop,
@@ -134,9 +137,15 @@ const useTooltip = (p) => {
                 width: parentWidth,
                 height: parentHeight,
             } = p.parent.getBoundingClientRect());
+            x = p.element.pageX - parentLeft;
+            y = p.element.pageY - parentTop;
+        }
+        else {
+            parentWidth = window.innerWidth;
+            parentHeight = window.innerHeight;
+            x = p.element.clientX;
+            y = p.element.clientY;
         }
-        const x = p.element.pageX - parentLeft;
-        const y = p.element.pageY - parentTop;
         const p2 = {
             cursor: p.element,
             data: p.data,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.698",
+  "version": "0.0.700",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",