ag-common 0.0.379 → 0.0.381

package/dist/api/helpers/validations.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAndValidateToken = void 0;
 /* eslint-disable import/no-unresolved */
 const jsonwebtoken_1 = require("jsonwebtoken");
+// eslint-disable-next-line import/no-named-as-default
 const jwks_rsa_1 = __importDefault(require("jwks-rsa"));
 const log_1 = require("../../common/helpers/log");
 const api_1 = require("./api");

package/dist/ui/components/InfiniteScroll/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface IInfiniteScrollList {
+    children: any[];
+    className?: string;
+    startIndex?: number;
+    onScroll?: (e: {
+        scrollTop: number;
+        isDown: boolean;
+    }) => void;
+    /** how many to initially show, and to add per scroll. default 10 */
+    incrementNumber?: number;
+}
+export declare const InfiniteScrollList: (p: IInfiniteScrollList) => JSX.Element;

package/dist/ui/components/InfiniteScroll/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfiniteScrollList = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importStar(require("react"));
+const debounce_1 = require("../../helpers/debounce");
+const dom_1 = require("../../helpers/dom");
+const Base = styled_1.default.div `
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+`;
+//if we see this, then we havent shown user enough items - allow click to load more
+const LoadMore = styled_1.default.div `
+  cursor: pointer;
+  text-decoration: underline;
+`;
+const InfiniteScrollList = (p) => {
+    var _a;
+    const { incrementNumber = 10 } = p;
+    const ref = (0, react_1.createRef)();
+    const [startIndex] = (0, react_1.useState)((_a = p.startIndex) !== null && _a !== void 0 ? _a : 0);
+    const [endIndex, setEndIndex] = (0, react_1.useState)((startIndex !== null && startIndex !== void 0 ? startIndex : 0) + incrementNumber);
+    const [startScrollTop, setStartScrollTop] = (0, react_1.useState)(0);
+    const handleScrollTop = (e) => {
+        const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
+        const hasReachedEnd = scrollTop + clientHeight === scrollHeight;
+        if (hasReachedEnd) {
+            setEndIndex(endIndex + incrementNumber);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        setStartScrollTop(ref.current.scrollTop);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const sliced = p.children.slice(0, endIndex);
+    const lastDisplayIndex = Math.min(p.children.length, endIndex);
+    return (react_1.default.createElement(Base, Object.assign({ ref: ref, className: p.className, onScroll: (e) => {
+            const { scrollTop } = e.currentTarget;
+            handleScrollTop(e);
+            //
+            (0, debounce_1.debounce)(() => {
+                var _a;
+                setStartScrollTop(scrollTop);
+                (_a = p === null || p === void 0 ? void 0 : p.onScroll) === null || _a === void 0 ? void 0 : _a.call(p, { scrollTop, isDown: startScrollTop < scrollTop });
+            }, {
+                key: 'in-scr',
+                time: 50,
+            });
+        } }, (0, dom_1.filterDataProps)(p)),
+        sliced,
+        `Showing ${lastDisplayIndex} of ${p.children.length} results`,
+        lastDisplayIndex < p.children.length && (react_1.default.createElement(LoadMore, { onClick: () => setEndIndex(endIndex + incrementNumber) }, "Load More?"))));
+};
+exports.InfiniteScrollList = InfiniteScrollList;

package/dist/ui/components/PieChart/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IPieChartData {
+    label: string;
+    value: number;
+    color: string;
+}
+export interface IPieChart {
+    data: IPieChartData[];
+    className?: string;
+}
+export declare const PieChart: React.FC<IPieChart>;

package/dist/ui/components/PieChart/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importDefault(require("react"));
+const Base = styled_1.default.div `
+  width: 100%;
+  height: 100%;
+`;
+const PieChart = ({ data, className }) => {
+    const total = data.reduce((sum, { value }) => sum + value, 0);
+    const width = 500;
+    const height = 500;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radius = Math.min(width, height) / 2;
+    let cumulativeAngle = 0;
+    return (react_1.default.createElement(Base, { className: className },
+        react_1.default.createElement("svg", { viewBox: `0 0 ${width} ${height}` }, data.map(({ label, value, color }) => {
+            const angle = (value / total) * 360;
+            const startX = centerX + radius * Math.cos((cumulativeAngle * Math.PI) / 180);
+            const startY = centerY + radius * Math.sin((cumulativeAngle * Math.PI) / 180);
+            const endX = centerX +
+                radius * Math.cos(((cumulativeAngle + angle) * Math.PI) / 180);
+            const endY = centerY +
+                radius * Math.sin(((cumulativeAngle + angle) * Math.PI) / 180);
+            const largeArcFlag = angle > 180 ? 1 : 0;
+            const midAngle = cumulativeAngle + angle / 2;
+            const midX = centerX + radius * 0.75 * Math.cos((midAngle * Math.PI) / 180);
+            const midY = centerY + radius * 0.75 * Math.sin((midAngle * Math.PI) / 180);
+            cumulativeAngle += angle;
+            return (react_1.default.createElement("g", { key: label },
+                react_1.default.createElement("title", null, `${label}: ${value}`),
+                react_1.default.createElement("path", { d: `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} L ${centerX} ${centerY} Z`, fill: color }),
+                react_1.default.createElement("text", { x: midX, y: midY, textAnchor: "middle", alignmentBaseline: "middle", stroke: "white", strokeWidth: '3px' }, label),
+                react_1.default.createElement("text", { x: midX, y: midY, textAnchor: "middle", alignmentBaseline: "middle", fill: "black" }, label)));
+        }))));
+};
+exports.PieChart = PieChart;

package/dist/ui/components/Search/Base.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import { ISearchDialog, TSearchModalRes } from './types';
-export declare const SearchBase: <T>({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, maxDisplayItems, defaultValue, }: ISearchDialog<T> & {
-    onSearchTextChange?: ((v: string) => void) | undefined;
-    onSelectItem?: ((v: TSearchModalRes<T>) => void) | undefined;
-}) => JSX.Element;
+type ISearchBase<T> = ISearchDialog<T> & {
+    onSearchTextChange?: (v: string) => void;
+    onSelectItem?: (v: TSearchModalRes<T>) => void;
+};
+export declare const SearchBase: <T>(p: ISearchBase<T>) => JSX.Element;
+export {};

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

@@ -30,38 +30,14 @@ exports.SearchBase = void 0;
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const common_1 = require("../../../common");
-const helpers_1 = require("../../helpers");
-const CrossIcon_1 = require("../../icons/CrossIcon");
-const Magnify_1 = require("../../icons/Magnify");
 const styles_1 = require("../../styles");
-const TextEdit_1 = require("../TextEdit");
+const SearchBox_1 = require("./SearchBox");
 const Base = styled_1.default.div `
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   width: 100%;
 `;
-const SearchBox = styled_1.default.div `
-  padding: 1rem;
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-  align-items: center;
-  width: calc(100% - 2rem);
-  margin: auto;
-
-  @media ${styles_1.smallScreen} {
-    margin: 0;
-    padding: 0;
-    padding-top: 0.5rem;
-    width: 100%;
-  }
-`;
-const Icon = styled_1.default.div `
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-right: 0.5rem;
-`;
 const Content = styled_1.default.div `
   width: calc(100% - 2rem);
   margin: auto;
@@ -87,43 +63,27 @@ const Row = styled_1.default.div `
   width: 100%;
   cursor: pointer;
 `;
-const CrossIconStyled = (0, styled_1.default)(CrossIcon_1.CrossIcon) `
-  position: absolute;
-  right: 1rem;
-  @media ${styles_1.bigScreen} {
-    right: 2rem;
-  }
-`;
-const SearchBase = ({ onSelectItem, onSearchTextChange, placeholderText, renderItem, displayItems, willDisplayItem, getKeyF, className, texts, maxDisplayItems = 20, defaultValue, }) => {
-    var _a, _b;
-    const [searchText, setSearchText] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+const SearchBase = (p) => {
+    var _a, _b, _c, _d;
+    const { maxDisplayItems = 20 } = p;
+    const [searchText, setSearchText] = (0, react_1.useState)((_a = p.defaultValue) !== null && _a !== void 0 ? _a : '');
     const resWrap = (foundItem) => {
+        var _a, _b;
         if (!foundItem) {
-            onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(undefined);
+            (_a = p.onSelectItem) === null || _a === void 0 ? void 0 : _a.call(p, undefined);
         }
         else {
-            onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem({ foundItem, searchText });
+            (_b = p.onSelectItem) === null || _b === void 0 ? void 0 : _b.call(p, { foundItem, searchText });
         }
     };
-    const filteredItemsRaw = displayItems.filter((i) => willDisplayItem(searchText, i));
+    const filteredItemsRaw = p.displayItems.filter((i) => p.willDisplayItem(searchText, i));
     const { part: filteredItems } = (0, common_1.take)(filteredItemsRaw, maxDisplayItems);
-    const showText = (_b = (_a = texts === null || texts === void 0 ? void 0 : texts.totalItems) === null || _a === void 0 ? void 0 : _a.call(texts, filteredItems.length, displayItems.length)) !== null && _b !== void 0 ? _b : `Showing ${filteredItems.length} out of ${displayItems.length} total
+    const showText = (_d = (_c = (_b = p.texts) === null || _b === void 0 ? void 0 : _b.totalItems) === null || _c === void 0 ? void 0 : _c.call(_b, filteredItems.length, p.displayItems.length)) !== null && _d !== void 0 ? _d : `Showing ${filteredItems.length} out of ${p.displayItems.length} total
   items`;
-    const textEditRef = (0, react_1.createRef)();
-    return (react_1.default.createElement(Base, { className: className },
-        react_1.default.createElement(SearchBox, { "data-type": "search" },
-            react_1.default.createElement(TextEdit_1.TextEdit, { ref: textEditRef, placeholder: placeholderText, defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null, Magnify_1.Magnify), noGrow: true, allowUndo: false, onEscape: () => resWrap(undefined), onClickOutsideWithNoValue: null, onSubmit: (v) => (0, helpers_1.debounce)(() => {
-                    setSearchText(v);
-                    onSearchTextChange === null || onSearchTextChange === void 0 ? void 0 : onSearchTextChange(v);
-                }, { key: 'pagesearch', time: 200 }), defaultValue: defaultValue }),
-            searchText && (react_1.default.createElement(CrossIconStyled, { onClick: () => {
-                    var _a;
-                    (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue('');
-                    setSearchText('');
-                    onSearchTextChange === null || onSearchTextChange === void 0 ? void 0 : onSearchTextChange('');
-                } }))),
+    return (react_1.default.createElement(Base, { className: p.className },
+        react_1.default.createElement(SearchBox_1.SearchBox, Object.assign({}, p, { searchText: searchText, setSearchText: setSearchText, onClear: () => resWrap(undefined) })),
         react_1.default.createElement(Content, { "data-hasitems": !!filteredItems.length, "data-type": "content" },
-            filteredItems.map((item, index) => (react_1.default.createElement(Row, { key: getKeyF(item), onClick: () => resWrap(item) }, renderItem({ searchText, item, index })))),
+            filteredItems.map((item, index) => (react_1.default.createElement(Row, { key: p.getKeyF(item), onClick: () => resWrap(item) }, p.renderItem({ searchText, item, index })))),
             searchText && react_1.default.createElement(Row, null, showText))));
 };
 exports.SearchBase = SearchBase;

package/dist/ui/components/Search/SearchBox.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const SearchBox: (p: {
+    placeholderText?: string | undefined;
+    onClear?: (() => void) | undefined;
+    searchText: string;
+    setSearchText: (s: string) => void;
+    onSearchTextChange?: ((v: string) => void) | undefined;
+    defaultValue?: string | undefined;
+}) => JSX.Element;

package/dist/ui/components/Search/SearchBox.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBox = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importStar(require("react"));
+const helpers_1 = require("../../helpers");
+const icons_1 = require("../../icons");
+const styles_1 = require("../../styles");
+const TextEdit_1 = require("../TextEdit");
+const Base = styled_1.default.div `
+  padding: 1rem;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - 2rem);
+  margin: auto;
+
+  @media ${styles_1.smallScreen} {
+    margin: 0;
+    padding: 0;
+    padding-top: 0.5rem;
+    width: 100%;
+  }
+`;
+const Icon = styled_1.default.div `
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+`;
+const CrossIconStyled = (0, styled_1.default)(icons_1.CrossIcon) `
+  position: absolute;
+  right: 1rem;
+  @media ${styles_1.bigScreen} {
+    right: 2rem;
+  }
+`;
+const SearchBox = (p) => {
+    const textEditRef = (0, react_1.createRef)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue(p.searchText);
+    }, [p.searchText, textEditRef]);
+    return (react_1.default.createElement(Base, { "data-type": "search" },
+        react_1.default.createElement(TextEdit_1.TextEdit, { ref: textEditRef, placeholder: p.placeholderText, defaultEditing: { focus: true }, singleLine: true, leftContent: react_1.default.createElement(Icon, null,
+                react_1.default.createElement(icons_1.Magnify, null)), noGrow: true, allowUndo: false, onEscape: () => { var _a; return (_a = p.onClear) === null || _a === void 0 ? void 0 : _a.call(p); }, onClickOutsideWithNoValue: null, onSubmit: (v) => (0, helpers_1.debounce)(() => {
+                var _a;
+                p.setSearchText(v);
+                (_a = p.onSearchTextChange) === null || _a === void 0 ? void 0 : _a.call(p, v);
+            }, { key: 'pagesearch', time: 200 }), defaultValue: p.defaultValue }),
+        p.searchText && (react_1.default.createElement(CrossIconStyled, { onClick: () => {
+                var _a, _b;
+                (_a = textEditRef.current) === null || _a === void 0 ? void 0 : _a.setValue('');
+                p.setSearchText('');
+                (_b = p.onSearchTextChange) === null || _b === void 0 ? void 0 : _b.call(p, '');
+            } }))));
+};
+exports.SearchBox = SearchBox;

package/dist/ui/components/Search/index.d.ts

@@ -1,4 +1,6 @@
+export * from './Base';
 export * from './Dialog';
 export * from './Inline';
 export * from './Modal';
+export * from './SearchBox';
 export * from './types';

package/dist/ui/components/Search/index.js

@@ -14,7 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Base"), exports);
 __exportStar(require("./Dialog"), exports);
 __exportStar(require("./Inline"), exports);
 __exportStar(require("./Modal"), exports);
+__exportStar(require("./SearchBox"), exports);
 __exportStar(require("./types"), exports);

package/dist/ui/components/TextEdit/TextEdit.js

@@ -97,7 +97,12 @@ exports.TextEdit = (0, react_2.forwardRef)((p, ref) => {
     const [editing, setEditingRaw] = (0, react_2.useState)(!!defaultEditing);
     const valueChange = value !== defaultValue;
     (0, react_2.useImperativeHandle)(ref, () => ({
-        setValue,
+        setValue: (v) => {
+            if (v === value) {
+                return;
+            }
+            setValue(v);
+        },
     }));
     (0, useOnClickOutside_1.useOnClickOutside)({
         disabled: onClickOutsideWithNoValue === null || disableEdit,
@@ -145,12 +150,16 @@ exports.TextEdit = (0, react_2.forwardRef)((p, ref) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref: ref, tabIndex: -1, "data-nogrow": noGrow }, (0, dom_1.filterDataProps)(p)),
         leftContent || null,
-        react_2.default.createElement(Comp, { tabIndex: editing ? 0 : undefined, "data-editing": "true", "data-valuechange": valueChange.toString(), ref: taref, "data-type": "text", value: value, onChange: (v) => {
+        react_2.default.createElement(Comp, { tabIndex: editing ? 0 : undefined, "data-editing": "true", "data-valuechange": valueChange.toString(), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ref: taref, "data-type": "text", value: value, onChange: (v) => {
                 setValue(v.currentTarget.value);
                 if (!allowUndo) {
                     onSubmit(v.currentTarget.value, false);
                 }
-            }, placeholder: placeholder, rows: singleLine ? 1 : undefined, maxLength: maxLength, onKeyDown: (e) => {
+            }, placeholder: placeholder, rows: singleLine ? 1 : undefined, maxLength: maxLength, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onKeyDown: (e) => {
                 if ((onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e)) === false) {
                     e.preventDefault();
                     return;

package/dist/ui/components/TimelineChart/index.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+export interface ITimelineChartSeries {
+    data: {
+        x: number;
+        y: number;
+    }[];
+    /** shown on page */
+    label?: string;
+    key: string;
+    color: string;
+    /** optional onclick href */
+    onClick?: () => void;
+    /** hover text */
+    title?: string;
+}
+export interface ITimelineChart {
+    series: ITimelineChartSeries[];
+    strokeWidth?: number;
+    className?: string;
+}
+export declare const TimelineChart: FC<ITimelineChart>;

package/dist/ui/components/TimelineChart/index.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineChart = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importDefault(require("react"));
+const Base = styled_1.default.div `
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  svg {
+    overflow: initial;
+  }
+`;
+const TimelineChart = ({ series, strokeWidth = 3, className, }) => {
+    if (series.length === 0) {
+        return react_1.default.createElement(Base, null);
+    }
+    const width = 600;
+    const height = 200;
+    const xValues = series.flatMap((s) => s.data.map((d) => d.x));
+    const yValues = series.flatMap((s) => s.data.map((d) => d.y));
+    const xMin = Math.min(...xValues);
+    const xMax = Math.max(...xValues);
+    const yMin = Math.min(...yValues);
+    const yMax = Math.max(...yValues);
+    const xScale = (x) => { var _a; return (_a = Math.ceil(width * ((x - xMin) / (xMax - xMin)))) !== null && _a !== void 0 ? _a : 0; };
+    const yScale = (y) => {
+        let ret = Math.ceil(height * ((yMax - y) / (yMax - yMin)));
+        if (isNaN(ret)) {
+            ret = y;
+        }
+        return ret !== null && ret !== void 0 ? ret : y;
+    };
+    const getPathData = ({ data }) => {
+        const pd1 = data
+            .sort((a, b) => (a.x < b.x ? -1 : 1))
+            .map(({ x, y }) => {
+            const xScaled = xScale(x);
+            const yScaled = yScale(y);
+            return { xScaled, yScaled };
+        });
+        const pathData = pd1.map(({ xScaled, yScaled }, i) => i === 0 ? `M${xScaled} ${yScaled}` : ` L${xScaled} ${yScaled}`);
+        return pathData.join('\n');
+    };
+    return (react_1.default.createElement(Base, { className: className },
+        react_1.default.createElement("svg", { viewBox: `0 -10 ${width} ${height + 20}` }, series.map(({ color, data, label, key, onClick, title }) => {
+            var _a, _b, _c, _d;
+            return (react_1.default.createElement("g", { key: key },
+                react_1.default.createElement("title", null, title || label),
+                react_1.default.createElement("path", { d: getPathData({ color, data, label, key }), fill: "none", stroke: color, strokeWidth: strokeWidth, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), style: { cursor: onClick ? 'pointer' : 'default' } }),
+                label && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("text", { x: xScale((_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.x) + strokeWidth * 2, y: yScale((_b = data[data.length - 1]) === null || _b === void 0 ? void 0 : _b.y), fontSize: "12", textAnchor: "middle", dominantBaseline: "middle", stroke: "white", strokeWidth: '3px' }, label),
+                    react_1.default.createElement("text", { x: xScale((_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.x) + strokeWidth * 2, y: yScale((_d = data[data.length - 1]) === null || _d === void 0 ? void 0 : _d.y), fontSize: "12", textAnchor: "middle", dominantBaseline: "middle", fill: "black" }, label)))));
+        }))));
+};
+exports.TimelineChart = TimelineChart;

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

@@ -11,10 +11,12 @@ export * from './HeadersRaw';
 export * from './HorizontalScrollBar';
 export * from './Icon';
 export * from './Image';
+export * from './InfiniteScroll';
 export * from './KebabDots';
 export * from './Loader';
 export * from './Modal';
 export * from './OpenApiCodeBlock';
+export * from './PieChart';
 export * from './ProgressBar';
 export * from './Prompt';
 export * from './RowOrColumn';
@@ -24,5 +26,6 @@ export * from './SparkLine';
 export * from './Table';
 export * from './TextEdit';
 export * from './TextWithButton';
+export * from './TimelineChart';
 export * from './Toast';
 export * from './UserImage';

package/dist/ui/components/index.js

@@ -27,10 +27,12 @@ __exportStar(require("./HeadersRaw"), exports);
 __exportStar(require("./HorizontalScrollBar"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./Image"), exports);
+__exportStar(require("./InfiniteScroll"), exports);
 __exportStar(require("./KebabDots"), exports);
 __exportStar(require("./Loader"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./OpenApiCodeBlock"), exports);
+__exportStar(require("./PieChart"), exports);
 __exportStar(require("./ProgressBar"), exports);
 __exportStar(require("./Prompt"), exports);
 __exportStar(require("./RowOrColumn"), exports);
@@ -40,5 +42,6 @@ __exportStar(require("./SparkLine"), exports);
 __exportStar(require("./Table"), exports);
 __exportStar(require("./TextEdit"), exports);
 __exportStar(require("./TextWithButton"), exports);
+__exportStar(require("./TimelineChart"), exports);
 __exportStar(require("./Toast"), exports);
 __exportStar(require("./UserImage"), exports);

package/dist/ui/icons/Magnify.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const Magnify: JSX.Element;
+export declare const Magnify: ({ colour, }: {
+    /** default "#000" */
+    colour?: string | undefined;
+}) => JSX.Element;

package/dist/ui/icons/Magnify.js

@@ -5,5 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Magnify = void 0;
 const react_1 = __importDefault(require("react"));
-exports.Magnify = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490" },
-    react_1.default.createElement("path", { fill: "none", stroke: "#000", strokeWidth: "36", strokeLinecap: "round", d: "M280 278a153 153 0 1 0-2 2l170 170m-91-117 110 110-26 26-110-110" })));
+const Magnify = ({ colour = '#000', }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 490 490" },
+    react_1.default.createElement("path", { fill: "none", stroke: colour, strokeWidth: "36", strokeLinecap: "round", d: "M280 278a153 153 0 1 0-2 2l170 170m-91-117 110 110-26 26-110-110" })));
+exports.Magnify = Magnify;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-common",
-  "version": "0.0.379",
+  "version": "0.0.381",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Andrei Gec <@andreigec> (https://gec.dev/)",