ag-common 0.0.656 → 0.0.658

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

@@ -66,7 +66,6 @@ const ListItemStyle = styled_1.default.div `
   padding-left: 0.5rem;
   flex-grow: 1;
   padding: 1rem;
-  height: calc(100% - 2rem);
   cursor: pointer;
   display: flex;
   overflow: hidden;
@@ -93,7 +92,7 @@ const ListItemStyle = styled_1.default.div `
     background-color: rgba(0, 0, 0, 0.2);
   }
 `;
-const ListItem = ({ render, onChange, selected, defaultV = false, }) => (react_1.default.createElement(ListItemStyle, { "data-selected": selected, "data-default": defaultV, onClick: (e) => {
+const ListItem = ({ render, onChange, selected, defaultV = false, }) => (react_1.default.createElement(ListItemStyle, { "data-type": "ddl-item", "data-selected": selected, "data-default": defaultV, onClick: (e) => {
         if (!selected) {
             onChange === null || onChange === void 0 ? void 0 : onChange();
         }
@@ -107,8 +106,10 @@ function DropdownList(p) {
     const [open, setOpen] = (0, react_1.useState)(p.open);
     const [bounced, setBounced] = (0, react_1.useState)(false);
     (0, useOnClickOutside_1.useOnClickOutside)({ disabled: !open, ref, moveMouseOutside: false }, () => {
+        var _a;
         setOpen(false);
         setBounced(false);
+        (_a = p.onClose) === null || _a === void 0 ? void 0 : _a.call(p);
     });
     (0, react_1.useEffect)(() => {
         const newv = p.value;
@@ -154,9 +155,13 @@ function DropdownList(p) {
         }
     }, [bounced, open]);
     return (react_1.default.createElement(Base, { className: p.className, ref: ref, title: p.placeholder, onClick: (e) => {
+            var _a;
             e.stopPropagation();
             e.preventDefault();
             setOpen(!open);
+            if (open) {
+                (_a = p.onClose) === null || _a === void 0 ? void 0 : _a.call(p);
+            }
         } },
         react_1.default.createElement(DropItems, { "data-open": open, style: style, "data-bounced": bounced }, open &&
             p.options.map((s, i) => (react_1.default.createElement(ListItem, { key: typeof s === 'string' ? s : p.renderF(s, i).key, render: p.renderF(s, i), onChange: () => p.onChange(s, i), selected: s === state })))),

package/dist/ui/components/DropdownList/Dialog.js

@@ -19,8 +19,8 @@ const index_1 = require("./index");
 const DropdownListDialog = (p) => __awaiter(void 0, void 0, void 0, function* () {
     return new Promise((res) => {
         const id = 'ag-common-ddld';
+        //already open
         if (document.querySelectorAll('#' + id).length) {
-            res(undefined);
             return;
         }
         const wrapper = document.body.appendChild(document.createElement('div'));
@@ -29,7 +29,10 @@ const DropdownListDialog = (p) => __awaiter(void 0, void 0, void 0, function* ()
         wrapper.style.top = `${p.position.y}px`;
         wrapper.style.left = `${p.position.x}px`;
         const root = (0, client_1.createRoot)(wrapper);
-        root.render(react_1.default.createElement(index_1.DropdownList, Object.assign({}, p, { open: true, onChange: (v, i) => {
+        root.render(react_1.default.createElement(index_1.DropdownList, Object.assign({}, p, { open: true, onClose: () => {
+                root.unmount();
+                wrapper.remove();
+            }, onChange: (v, i) => {
                 root.unmount();
                 wrapper.remove();
                 res(!v ? undefined : [v, i]);

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

@@ -9,6 +9,8 @@ export interface IDropdownList<T> {
      */
     value?: T;
     onChange: (v: T | undefined, index: number) => void;
+    /** will call on close/click outside */
+    onClose?: () => void;
     /**
      * placeholder title for list
      */

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

@@ -100,9 +100,16 @@ const LineChart = (p) => {
             });
         } }, points.map((p2) => {
         var _a, _b, _c;
+        const isSelected = p2.origX === ((_c = (_b = (_a = UT.pos) === null || _a === void 0 ? void 0 : _a.data.selectedXs) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.x);
         return (react_1.default.createElement(react_1.default.Fragment, { key: JSON.stringify(p2) },
-            (p2.origX === ((_c = (_b = (_a = UT.pos) === null || _a === void 0 ? void 0 : _a.data.selectedXs) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.x) ||
-                p2.x1 === p2.x2) && (react_1.default.createElement("circle", { cx: `${p2.x2}%`, cy: `${p2.y2}%`, r: "8px", fill: p.colours[p2.name] })),
+            //mouse selected
+            (isSelected ||
+                //only single date point
+                p2.x1 === p2.x2 ||
+                //is the last point
+                p2.isLast) && (react_1.default.createElement("circle", Object.assign({ cx: `${p2.x2}%`, cy: `${p2.y2}%`, r: "8px", style: { zIndex: 1 } }, (p2.isToday && p2.isLast && !isSelected
+                ? { stroke: p.colours[p2.name], fill: 'transparent' }
+                : { fill: p.colours[p2.name] })))),
             p2.x1 !== p2.x2 && (react_1.default.createElement("line", { strokeOpacity: legendItems.part.find((f) => f.name === p2.name) ? 1 : 0.3, x1: `${p2.x1}%`, x2: `${p2.x2}%`, y1: `${p2.y1}%`, y2: `${p2.y2}%`, style: Object.assign({ stroke: p.colours[p2.name] }, (p2.isToday && {
                     strokeDasharray: 10,
                     animation: 'dash 50s linear reverse infinite',

package/dist/ui/components/LineChart/LegendX.js

@@ -7,6 +7,7 @@ exports.LegendX = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importDefault(require("react"));
 const common_1 = require("../../../common");
+const styles_1 = require("../../styles");
 const getLegendItems_1 = require("./getLegendItems");
 const Base = styled_1.default.div `
   display: flex;
@@ -33,6 +34,13 @@ const Numbers = styled_1.default.div `
   flex-flow: row;
   justify-content: space-between;
   z-index: 1;
+
+  @media ${styles_1.smallScreen} {
+    [data-group='1'],
+    [data-group='2'] {
+      display: none;
+    }
+  }
 `;
 const Items = styled_1.default.div `
   width: 100%;
@@ -73,23 +81,23 @@ const LegendX = ({ data, lt, tt, colours, style, }) => {
     const minX = Math.min(...xs);
     const maxX = Math.max(...xs);
     const maxY = Math.max(...ys);
-    const itemsRaw = [minX];
+    const itemsRaw = [{ v: minX, group: 0 }];
     const gc = 8;
     const gap = (maxX - minX) / gc;
     if (gap > common_1.twelveHMs) {
         for (let a = 1; a < gc; a += 1) {
-            itemsRaw.push(itemsRaw[a - 1] + gap);
+            itemsRaw.push({ v: itemsRaw[a - 1].v + gap, group: (a % 3) + 1 });
         }
     }
-    itemsRaw.push(maxX);
-    const items = itemsRaw.map((d) => { var _a; return (_a = lt(d)) !== null && _a !== void 0 ? _a : d; });
+    itemsRaw.push({ v: maxX, group: 0 });
+    const items = itemsRaw.map((d) => { var _a; return ({ v: (_a = lt(d.v)) !== null && _a !== void 0 ? _a : d.v, group: d.group }); });
     const ch = maxY.toString().length + 1;
     return (react_1.default.createElement(Base, { style: Object.assign(Object.assign({}, style), { marginLeft: 'auto', width: `calc(100% - ${ch}ch)` }) },
         react_1.default.createElement(Bar, null,
             react_1.default.createElement(Line, { style: { backgroundColor: style.color } }),
             react_1.default.createElement(Numbers, null, items.map((i, i2) => (react_1.default.createElement("span", { 
                 // eslint-disable-next-line react/no-array-index-key
-                key: i + i2, style: { backgroundColor: style.backgroundColor } }, i))))),
+                key: i.v + i2, "data-group": i.group, style: { backgroundColor: style.backgroundColor } }, i.v))))),
         legendItems.length > 1 && (react_1.default.createElement(Items, null, legendItems.map((k) => (react_1.default.createElement(Item, { key: k.name },
             react_1.default.createElement(Col, { style: { backgroundColor: k.colour } }),
             k.name)))))));

package/dist/ui/components/LineChart/interpolate.d.ts

@@ -8,6 +8,7 @@ interface ILineChartItemComp {
     origX: number;
     origY: number;
     isToday: boolean;
+    isLast: boolean;
 }
 export declare const interpolate: (raw: ILineChartItemRaw[]) => {
     points: ILineChartItemComp[];

package/dist/ui/components/LineChart/interpolate.js

@@ -48,6 +48,7 @@ const interpolate = (raw) => {
                 origX: p.x,
                 origY: p.y,
                 isToday: (0, dateHelpers_1.isToday)(p.x),
+                isLast: i === items.length - 1,
             };
         });
         points.push(...(0, common_1.distinctBy)(p, (s) => JSON.stringify(s)));

package/dist/ui/styles/common.js

@@ -21,7 +21,7 @@ const HardOutlineFilter = (outlineColour = 'white', sizePx = 1) => {
     return `drop-shadow(${px} ${px} 0px ${outlineColour})
   drop-shadow(-${px} ${px} 0px ${outlineColour})
   drop-shadow(${px} -${px} 0px ${outlineColour})
-  drop-shadow(-${px} -${px} 0px ${outlineColour});`;
+  drop-shadow(-${px} -${px} 0px ${outlineColour})`;
 };
 exports.HardOutlineFilter = HardOutlineFilter;
 /** disable user text selection */

package/package.json

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