@j2inn/fin5-ui-utils 6.0.0 → 6.0.2

package/dist/react/components/charts/line-bar/HGridChart.js

@@ -0,0 +1,286 @@
+"use strict";
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HGridChart = exports.calculateDefaultTimeInterval = exports.addLineSeriesRowData = exports.getBarSeriesRowData = exports.splitBarAndLineSeriesCols = exports.colNameToDisProvider = exports.isBarSeries = exports.isStackedBarSeries = exports.isLineSeries = exports.rollupDurationToTimeInterval = void 0;
+const am5 = __importStar(require("@amcharts/amcharts5"));
+const haystack_core_1 = require("haystack-core");
+const dist_1 = require("haystack-units/dist");
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const useScreenSize_1 = require("../../../hooks/useScreenSize");
+const Chart_1 = require("./Chart");
+var SeriesType;
+(function (SeriesType) {
+    SeriesType["line"] = "line";
+    SeriesType["bar"] = "bar";
+    SeriesType["stackedBar"] = "stackedBar";
+})(SeriesType || (SeriesType = {}));
+var SeriesVariant;
+(function (SeriesVariant) {
+    SeriesVariant["dashed"] = "dashed";
+})(SeriesVariant || (SeriesVariant = {}));
+const rollupDurationToTimeInterval = (value) => {
+    let unit;
+    switch (value?.unit) {
+        case dist_1.hour:
+            unit = 'hour';
+            break;
+        case dist_1.day:
+            unit = 'day';
+            break;
+        case dist_1.week:
+            unit = 'week';
+            break;
+        case dist_1.julianMonth:
+            unit = 'month';
+            break;
+        case dist_1.year:
+            unit = 'year';
+            break;
+    }
+    return { count: value?.value ?? 1, timeUnit: unit ?? 'hour' };
+};
+exports.rollupDurationToTimeInterval = rollupDurationToTimeInterval;
+const isLineSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.line;
+exports.isLineSeries = isLineSeries;
+const isStackedBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.stackedBar;
+exports.isStackedBarSeries = isStackedBarSeries;
+const isBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.bar;
+exports.isBarSeries = isBarSeries;
+const isDottedSeriesVariant = (colMetadata) => SeriesVariant.dashed === colMetadata?.variant?.value;
+const getSeriesColor = (colMetadata) => colMetadata?.color ? am5.color(colMetadata.color.value) : undefined;
+const getSeriesDis = (colMetadata) => colMetadata?.dis?.value;
+const getSeriesUnit = (colMetadata) => colMetadata?.unit?.value;
+const getHideAxis = (colMetadata) => colMetadata?.hideAxis?.value;
+const getAxisPlacement = (colMetadata) => Chart_1.AxisPlacement[colMetadata?.axisPlacement?.value];
+const colNameToDisProvider = (grid, translateLabel) => (colName) => {
+    if (translateLabel) {
+        const label = translateLabel(colName);
+        if (label) {
+            return label;
+        }
+    }
+    const colMetadata = grid.getColumn(colName)?.meta;
+    if (colMetadata?.dis) {
+        return colMetadata.dis.value;
+    }
+    return colName;
+};
+exports.colNameToDisProvider = colNameToDisProvider;
+const splitBarAndLineSeriesCols = (grid) => {
+    const barSeries = new Set();
+    const stackedBarSeries = new Set();
+    const lineSeries = new Set();
+    grid.getColumns().forEach((column) => {
+        const colMetadata = column.meta;
+        if ((0, exports.isLineSeries)(colMetadata)) {
+            lineSeries.add(column.name);
+        }
+        else if ((0, exports.isBarSeries)(colMetadata)) {
+            barSeries.add(column.name);
+        }
+        else if ((0, exports.isStackedBarSeries)(colMetadata)) {
+            stackedBarSeries.add(column.name);
+        }
+    });
+    return {
+        barSeries,
+        stackedBarSeries,
+        lineSeries,
+    };
+};
+exports.splitBarAndLineSeriesCols = splitBarAndLineSeriesCols;
+const getBarSeriesRowData = (row, metadata, colName, barSeriesData) => {
+    if (!barSeriesData.has(colName)) {
+        const series = {
+            seriesName: colName,
+            dis: getSeriesDis(metadata),
+            unit: getSeriesUnit(metadata),
+            hideAxis: getHideAxis(metadata),
+            axisPlacement: getAxisPlacement(metadata),
+            data: [],
+        };
+        const seriesColor = getSeriesColor(metadata);
+        if (seriesColor) {
+            series.stroke = seriesColor;
+        }
+        barSeriesData.set(colName, series);
+    }
+    barSeriesData.get(colName)?.data.push({
+        ts: row.get('ts').date.getTime(),
+        value: row.get(colName)?.value,
+    });
+};
+exports.getBarSeriesRowData = getBarSeriesRowData;
+const addLineSeriesRowData = (row, metadata, colName, lineSeriesData) => {
+    if (!lineSeriesData.has(colName)) {
+        const series = {
+            seriesName: colName,
+            dis: getSeriesDis(metadata),
+            unit: getSeriesUnit(metadata),
+            hideAxis: getHideAxis(metadata),
+            axisPlacement: getAxisPlacement(metadata),
+            data: [],
+            strokeSettings: {
+                strokeWidth: 2,
+                strokeDasharray: isDottedSeriesVariant(metadata)
+                    ? [3, 3]
+                    : undefined,
+            },
+        };
+        const seriesColor = getSeriesColor(metadata);
+        if (seriesColor && series.strokeSettings) {
+            series.strokeSettings.stroke = seriesColor;
+        }
+        lineSeriesData.set(colName, series);
+    }
+    lineSeriesData.get(colName)?.data.push({
+        ts: row.get('ts').date.getTime(),
+        value: row.get(colName)?.value,
+    });
+};
+exports.addLineSeriesRowData = addLineSeriesRowData;
+/**
+ * Returns the numeric value of an Haystack Value object (if numeric)
+ * @param val Haystack value
+ * @returns the numeric value:
+ * - `HNum` > numeric value
+ * - `HDate` > time value in milliseconds since midnight, January 1, 1970 UTC
+ * - `HTime` > time value in milliseconds since midnight, January 1, 1970 UTC
+ * - `HBool` > 1 if `val` is `true`, `false` otherwise
+ * - `HDateTime` > time value in milliseconds since midnight, January 1, 1970 UTC
+ */
+const getHValValueNumber = (val) => {
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Number)) {
+        return val.value;
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Date)) {
+        return val.date.getTime();
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Time)) {
+        return val.date.getTime();
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.Bool)) {
+        return val.value ? 1 : 0;
+    }
+    if ((0, haystack_core_1.valueIsKind)(val, haystack_core_1.Kind.DateTime)) {
+        return val.date.getTime();
+    }
+    throw new Error(`getHValValue: ${val.getKind()} not supported`);
+};
+const calculateDefaultTimeInterval = (timeRange) => {
+    const diffTime = Math.abs(timeRange[1].getTime() - timeRange[0].getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return { count: diffDays ? diffDays : 1, timeUnit: 'hour' };
+};
+exports.calculateDefaultTimeInterval = calculateDefaultTimeInterval;
+/**
+ * A component that renders a chart containing multiple series
+ * of different kinds, taking all the data and configuration from an HGrid.
+ */
+exports.HGridChart = (0, react_1.memo)(function HGridChartComponent({ className, data, timeRange, timeInterval = (0, exports.calculateDefaultTimeInterval)(timeRange), unitPlacement = Chart_1.UnitPlacement.axis, legendPlacement = Chart_1.LegendPlacement.right, translateLabel = undefined, DOMtargetId, }) {
+    const theme = (0, react_jss_1.useTheme)();
+    const { barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData } = (0, react_1.useMemo)(() => {
+        if (data === undefined) {
+            return {
+                barSeriesData: [],
+                stackedBarSeriesData: [],
+                lineSeriesData: [],
+                rangesData: [],
+            };
+        }
+        const gridMetadata = data.meta;
+        const { barSeries, stackedBarSeries, lineSeries } = (0, exports.splitBarAndLineSeriesCols)(data);
+        const barSeriesData = new Map();
+        const stackedBarSeriesData = new Map();
+        const lineSeriesData = new Map();
+        data.getRows().forEach((row) => {
+            if (stackedBarSeries.size > 0) {
+                stackedBarSeries.forEach((colName) => {
+                    (0, exports.getBarSeriesRowData)(row, data.getColumn(colName)?.meta ?? haystack_core_1.HDict.make(), colName, stackedBarSeriesData);
+                });
+            }
+            if (barSeries.size > 0) {
+                barSeries.forEach((colName) => {
+                    (0, exports.getBarSeriesRowData)(row, data.getColumn(colName)?.meta ?? haystack_core_1.HDict.make(), colName, barSeriesData);
+                });
+            }
+            if (lineSeries.size > 0) {
+                lineSeries.forEach((lineSeriesColName) => {
+                    (0, exports.addLineSeriesRowData)(row, data.getColumn(lineSeriesColName)?.meta ??
+                        haystack_core_1.HDict.make(), lineSeriesColName, lineSeriesData);
+                });
+            }
+        });
+        const rangesData = gridMetadata.ranges?.map((rangeData) => {
+            const result = {
+                startValue: getHValValueNumber(rangeData.startValue),
+                endValue: getHValValueNumber(rangeData.endValue),
+                color: getSeriesColor(rangeData),
+                tooltip: rangeData.dis?.value,
+                opacity: rangeData.opacity?.value,
+            };
+            return result;
+        }) ?? [];
+        return {
+            barSeriesData: Array.from(barSeriesData.values()),
+            stackedBarSeriesData: Array.from(stackedBarSeriesData.values()),
+            lineSeriesData: Array.from(lineSeriesData.values()),
+            rangesData,
+        };
+    }, [data]);
+    const screenSize = (0, useScreenSize_1.useScreenSize)();
+    const effectiveLegendPlacement = (0, react_1.useMemo)(() => {
+        const MIN_WIDTH = 1024;
+        if (screenSize.width >= MIN_WIDTH) {
+            return legendPlacement;
+        }
+        switch (legendPlacement) {
+            case Chart_1.LegendPlacement.left:
+                return Chart_1.LegendPlacement.top;
+            case Chart_1.LegendPlacement.right:
+                return Chart_1.LegendPlacement.bottom;
+        }
+        return legendPlacement;
+    }, [legendPlacement, screenSize.width]);
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement(Chart_1.Chart, { DOMtargetId: DOMtargetId, cursor: true, legendPlacement: effectiveLegendPlacement, unitPlacement: unitPlacement, numberFormat: { maximumFractionDigits: 0 }, barSeriesData: barSeriesData, rangesData: rangesData, translateLabel: (0, exports.colNameToDisProvider)(data ?? haystack_core_1.HGrid.make(), translateLabel), stackedBarSeriesData: stackedBarSeriesData, lineSeriesData: lineSeriesData, gridSettings: {
+                stroke: am5.color(theme.borderColor),
+            }, dateField: 'ts', baseInterval: timeInterval, tooltipSettings: {
+                fontSize: '0.9rem',
+            }, legendLabelsSettings: {
+                fill: am5.color(theme.textColor),
+                fontSize: '0.9rem',
+            }, legendMarkersSettings: {
+                width: 8,
+                height: 8,
+                rounded: true,
+            } })));
+});
+exports.default = exports.HGridChart;
+//# sourceMappingURL=HGridChart.js.map

package/dist/react/components/charts/line-bar/HGridChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HGridChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/line-bar/HGridChart.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/charts/pie/PieChart.d.ts

@@ -72,9 +72,10 @@ export interface PieChartProps {
      */
     sliceAdapters?: SliceAdapter[];
     /**
-     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     * Optional DOM id for the chart container, if not specified it will be automatically generated.
+     * It can also be an HTMLElement, in that case the element will be used as a parent.
      */
-    DOMtargetId?: string;
+    DOMtargetId?: string | HTMLElement;
 }
 export declare type SliceAdapter<T extends keyof am5.ISliceSettings = keyof am5.ISliceSettings> = [
     T,

package/dist/react/components/charts/pie/PieChart.js

@@ -197,7 +197,9 @@ const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes,
         }
     }, [rootRef.current, numberFormat]);
     const classes = useStyles();
-    return react_1.default.createElement("div", { id: id, className: classes.root });
+    return typeof id === 'string' ? (react_1.default.createElement("div", { id: id, className: classes.root })) : (
+    // If the DOM target is an HTML element, do not render another div. The chart will be attached to the existing element.
+    react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.PieChart = PieChart;
 //# sourceMappingURL=PieChart.js.map

package/dist/react/components/charts/pie/PieChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/PieChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/PieChart.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yDAA0C;AAC1C,wEAAyD;AAEzD,+CAA2E;AAC3E,yCAAqD;AAErD,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC;IACjC,IAAI,EAAE;QACL,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACd;CACD,CAAC,CAAA;AAWF;;;;GAIG;AACH,MAAM,qBAAqB,GAAG,CAAC,KAAe,EAAwB,EAAE;IACvE,OAAO;QACN,eAAe,EAAE;YAChB,IAAI,EAAE,KAAK,CAAC,SAAS;SACrB;QACD,MAAM,EAAE;YACP,KAAK,CAAC,OAAO,CAAC,IAAI;YAClB,KAAK,CAAC,OAAO,CAAC,IAAI;YAClB,KAAK,CAAC,OAAO,CAAC,GAAG;YACjB,KAAK,CAAC,OAAO,CAAC,OAAO;YACrB,KAAK,CAAC,OAAO,CAAC,MAAM;YACpB,KAAK,CAAC,OAAO,CAAC,IAAI;YAClB,KAAK,CAAC,OAAO,CAAC,MAAM;YACpB,KAAK,CAAC,OAAO,CAAC,KAAK;YACnB,KAAK,CAAC,OAAO,CAAC,MAAM;YACpB,KAAK,CAAC,OAAO,CAAC,OAAO;YACrB,KAAK,CAAC,OAAO,CAAC,IAAI;YAClB,KAAK,CAAC,OAAO,CAAC,IAAI;SAClB;KACD,CAAA;AACF,CAAC,CAAA;AAwFD;;;;;GAKG;AACI,MAAM,QAAQ,GAA4B,CAAC,EACjD,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,yBAAyB,EACzB,qBAAqB,EACrB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,cAAc,EACd,aAAa,GACb,EAAe,EAAE;IACjB,uBAAuB;IACvB,MAAM,KAAK,GAAa,IAAA,oBAAQ,GAAE,CAAA;IAClC,MAAM,MAAM,GAAG,EAAE,GAAG,qBAAqB,CAAC,KAAK,CAAC,EAAE,GAAG,YAAY,EAAE,CAAA;IAEnE,kBAAkB;IAClB,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,IAAA,gBAAQ,EAAC,WAAW,IAAI,WAAW,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IACvE,MAAM,OAAO,GAAG,IAAA,cAAM,EAAkB,IAAI,CAAC,CAAA;IAC7C,MAAM,QAAQ,GAAG,IAAA,cAAM,EAA6B,IAAI,CAAC,CAAA;IACzD,MAAM,SAAS,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAA;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,WAAW,IAAI,WAAW,KAAK,EAAE,EAAE;YACtC,KAAK,CAAC,WAAW,CAAC,CAAA;SAClB;IACF,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,cAAc;IACd,IAAA,uBAAe,EAAC,GAAG,EAAE;QACpB,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;QAE7B,uBAAuB;QACvB,IAAI,WAAW,EAAE;YAChB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;SACnD;QAED,wHAAwH;QACxH,IAAI,MAAM,CAAC,eAAe,EAAE;YAC3B,+CAA+C;YAC/C,KAAK,MAAM,OAAO,IAAI,MAAM,CAAC,eAAe,EAAE;gBAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CACnC,OAA8C,CACpC,CAAA;gBAEX,4CAA4C;gBAC5C,IAAI,CAAC,eAAe,CAAC,GAAG,CACvB,OAA8C,EAC9C,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAChB,CAAA;aACD;SACD;QAED,uBAAuB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CACzC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,cAAc;YAC3B,GAAG,qBAAqB,EAAE,CAAC,IAAI,CAAC;SAChC,CAAC,CACF,CAAA;QAED,eAAe;QACf,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CACjC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,gBAAgB;YAC7B,GAAG,sBAAsB,EAAE,CAAC,IAAI,CAAC;SACjC,CAAC,CACF,CAAA;QAED,IAAI,oBAAoB,EAAE;YACzB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAA;SACnD;QAED,IAAI,yBAAyB,EAAE;YAC9B,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAA;SAC7D;QAED,IAAI,qBAAqB,EAAE;YAC1B,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAA;SACrD;QAED,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACtB,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAA;QACxB,SAAS,CAAC,OAAO,GAAG,MAAM,CAAA;QAE1B,iDAAiD;QACjD,OAAO,GAAG,EAAE;YACX,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,CAAA;YAC5B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;YACxB,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAA;YAC3B,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAA;YACvB,IAAI,EAAE,OAAO,EAAE,CAAA;YACf,OAAO,CAAC,OAAO,GAAG,IAAI,CAAA;QACvB,CAAC,CAAA;IACF,CAAC,EAAE;QACF,EAAE;QACF,MAAM;QACN,WAAW;QACX,qBAAqB;QACrB,sBAAsB;QACtB,yBAAyB;QACzB,qBAAqB;KACrB,CAAC,CAAA;IAEF,WAAW;IACX,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAE9B,IAAI,KAAK,IAAI,IAAI,EAAE;YAClB,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAA;YAEpB,IAAI,IAAI,EAAE,MAAM,EAAE;gBACjB,eAAe;gBACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAC/B,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE;oBAC9B,UAAU,EAAE,OAAO;oBACnB,aAAa,EAAE,UAAU;oBACzB,GAAG,cAAc;iBACjB,CAAC,CACF,CAAA;gBAED,sBAAsB;gBACtB,IAAI,oBAAoB,EAAE;oBACzB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAA;iBACnD;gBAED,qBAAqB;gBACrB,IAAI,mBAAmB,EAAE;oBACxB,MAAM,CAAC,QAAQ,CAAC,IAAI,CACnB,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE;wBACnB,GAAG,mBAAmB;qBACtB,CAAC,CACF,CAAA;iBACD;gBAED,sBAAsB;gBACtB,IAAI,cAAc,EAAE;oBACnB,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;iBAC7C;gBAED,uBAAuB;gBACvB,IAAI,aAAa,EAAE;oBAClB,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,aAAa,CAAC,EAAE,EAAE,CAC9C,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAClC,GAAG,EACH,aAAa,CAAC;wBACb,IAAI,EAAE,IAAI;wBACV,KAAK,EAAE,KAAK;wBACZ,MAAM;qBACN,CAAC,CACF,CACD,CAAA;iBACD;gBAED,sBAAsB;gBACtB,IAAI,MAAM,EAAE,MAAM,EAAE;oBACnB,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,GAAG,CACxB,QAAQ,EACR,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtC,CAAA;iBACD;gBAED,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;gBACxB,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;aAChD;SACD;IACF,CAAC,EAAE;QACF,IAAI;QACJ,QAAQ,CAAC,OAAO;QAChB,MAAM,EAAE,MAAM;QACd,cAAc;QACd,cAAc;QACd,oBAAoB;QACpB,aAAa;KACb,CAAC,CAAA;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,YAAY,EAAE;YACjB,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,cAAc,EAAE,YAAY,CAAC,CAAA;SAClE;IACF,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAA;IAEnC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,OAAO,OAAO,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC/B,uCAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI,GAAQ,CAC5C,CAAC,CAAC,CAAC;IACH,uHAAuH;IACvH,6DAAK,CACL,CAAA;AACF,CAAC,CAAA;AAnMY,QAAA,QAAQ,YAmMpB"}

package/dist/react/components/charts/pie/SimplePieChart.d.ts

@@ -9,9 +9,10 @@ export interface SimplePieChartProps {
     numberFormat?: Intl.NumberFormatOptions;
     hideLabels?: boolean;
     /**
-     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     * Optional DOM id for the chart container, if not specified it will be automatically generated.
+     * It can also be an HTMLElement, in that case the element will be used as a parent.
      */
-    DOMtargetId?: string;
+    DOMtargetId?: string | HTMLElement;
 }
 /**
  * Simplified version of the pie chart for quick usage and easy configuration.

package/dist/react/components/charts/pie/SimplePieChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimplePieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/SimplePieChart.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yDAA0C;AAC1C,mFAAoE;AACpE,kDAAyB;AACzB,yCAA8E;AAgB9E;;;GAGG;AACI,MAAM,cAAc,GAAkC,CAAC,EAC7D,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,YAAY,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,qBAAqB,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC;CACxB,EACD,UAAU,EACV,WAAW,GACX,EAAe,EAAE;IACjB,OAAO,CACN,8BAAC,mBAAQ,IACR,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,SAAS,EACxD,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC7B,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;SAChD,CAAC,EACF,YAAY,EAAE,YAAY,EAC1B,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC9B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;SAClB,CAAC,EACF,oBAAoB,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EACjD,cAAc,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACtC,cAAc,EAAE;YACf,WAAW,EAAE,aAAa;SAC1B,GACA,CACF,CAAA;AACF,CAAC,CAAA;AAnCY,QAAA,cAAc,kBAmC1B"}
+{"version":3,"file":"SimplePieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/SimplePieChart.tsx"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yDAA0C;AAC1C,mFAAoE;AACpE,kDAAyB;AACzB,yCAA8E;AAiB9E;;;GAGG;AACI,MAAM,cAAc,GAAkC,CAAC,EAC7D,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,YAAY,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,qBAAqB,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC;CACxB,EACD,UAAU,EACV,WAAW,GACX,EAAe,EAAE;IACjB,OAAO,CACN,8BAAC,mBAAQ,IACR,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,SAAS,EACxD,qBAAqB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC7B,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;SAChD,CAAC,EACF,YAAY,EAAE,YAAY,EAC1B,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC;YAC9B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;SAClB,CAAC,EACF,oBAAoB,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,EACjD,cAAc,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EACtC,cAAc,EAAE;YACf,WAAW,EAAE,aAAa;SAC1B,GACA,CACF,CAAA;AACF,CAAC,CAAA;AAnCY,QAAA,cAAc,kBAmC1B"}

package/dist/react/components/makeCustomElement.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface CustomElementOptions {
+    useShadowDom?: boolean;
+}
+/**
+ * Generate a custom element constructor that wraps the given react component.
+ */
+export declare const makeCustomElement: <T extends object>(Component: React.FC<T>, options?: CustomElementOptions) => CustomElementConstructor;
+/**
+ * Create a custom element wrapping a React component and register it.
+ * @param webComponentName the name of the Web component (tag name)
+ * @param ReactComponent the React component to wrap
+ * @returns
+ */
+export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
+export {};

package/dist/react/components/makeCustomElement.js

@@ -0,0 +1,151 @@
+"use strict";
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerReactWebComponent = exports.makeCustomElement = void 0;
+const app_react_1 = require("@j2inn/app-react");
+const ui_1 = require("@j2inn/ui");
+const utils_1 = require("@j2inn/utils");
+const haystack_react_1 = require("haystack-react");
+const jss_1 = require("jss");
+const react_1 = __importDefault(require("react"));
+const client_1 = require("react-dom/client");
+const react_jss_1 = require("react-jss");
+const defaultTheme = (0, ui_1.GenerateTheme)().light;
+/**
+ * Generate a custom element constructor that wraps the given react component.
+ */
+const makeCustomElement = (Component, options = {
+    useShadowDom: true,
+}) => {
+    return class extends HTMLElement {
+        static get observedAttributes() {
+            return ['props'];
+        }
+        _locale;
+        get locale() {
+            return this._locale;
+        }
+        set locale(value) {
+            this._locale = value;
+            this.render();
+        }
+        _appRootStore;
+        get appRootStore() {
+            return this._appRootStore ?? {};
+        }
+        set appRootStore(value) {
+            this._appRootStore = value;
+            this.render();
+        }
+        _appStore;
+        get appStore() {
+            return this._appStore ?? {};
+        }
+        set appStore(value) {
+            this._appStore = value;
+            this.render();
+        }
+        _client;
+        get client() {
+            return this._client;
+        }
+        set client(value) {
+            this._client = value;
+            this.render();
+        }
+        _i18n;
+        get i18n() {
+            return this._i18n;
+        }
+        set i18n(value) {
+            this._i18n = value;
+            this.render();
+        }
+        _props;
+        get props() {
+            return this._props;
+        }
+        set props(value) {
+            this._props = value;
+            this.render();
+        }
+        _theme;
+        get theme() {
+            return this._theme ?? defaultTheme;
+        }
+        set theme(value) {
+            this._theme = value;
+            this.render();
+        }
+        root;
+        jss;
+        base;
+        initialized = false;
+        constructor() {
+            super();
+            this.base = options?.useShadowDom
+                ? this.attachShadow({ mode: 'open' })
+                : this;
+        }
+        initialize() {
+            if (!this.initialized) {
+                const mountPoint = document.createElement('div');
+                mountPoint.setAttribute('style', 'display: contents;');
+                this.base.appendChild(mountPoint);
+                this.root = (0, client_1.createRoot)(mountPoint);
+                this.jss = (0, jss_1.create)({
+                    insertionPoint: mountPoint,
+                });
+                this.initialized = true;
+            }
+        }
+        connectedCallback() {
+            this.render();
+        }
+        attributeChangedCallback() {
+            this.render();
+        }
+        disconnectedCallback() {
+            this.root?.unmount();
+            this.initialized = false;
+        }
+        render() {
+            this.initialize();
+            const ThemedComponent = (react_1.default.createElement(react_jss_1.ThemeProvider, { theme: this.theme },
+                react_1.default.createElement(utils_1.I18NContext.Provider, { value: this.i18n },
+                    react_1.default.createElement(react_jss_1.JssProvider, { jss: this.jss },
+                        react_1.default.createElement(Component, { ...this.props })))));
+            this.root?.render(react_1.default.createElement(app_react_1.AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
+                react_1.default.createElement(app_react_1.AppStoreContext.Provider, { value: this.appStore }, this.client ? (react_1.default.createElement(haystack_react_1.ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
+        }
+    };
+};
+exports.makeCustomElement = makeCustomElement;
+/**
+ * Create a custom element wrapping a React component and register it.
+ * @param webComponentName the name of the Web component (tag name)
+ * @param ReactComponent the React component to wrap
+ * @returns
+ */
+const registerReactWebComponent = (webComponentName, ReactComponent, options) => {
+    // Bail if web component is already defined
+    if (customElements.get(webComponentName)) {
+        return;
+    }
+    // Make web component that wraps the react component
+    const Element = (0, exports.makeCustomElement)(ReactComponent, options);
+    try {
+        // Define web component
+        customElements.define(webComponentName, Element);
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
+exports.registerReactWebComponent = registerReactWebComponent;
+//# sourceMappingURL=makeCustomElement.js.map

package/dist/react/components/makeCustomElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeCustomElement.js","sourceRoot":"","sources":["../../../src/react/components/makeCustomElement.tsx"],"names":[],"mappings":"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"}

package/dist/react/hooks/useFin5ColorScheme.js

@@ -7,34 +7,41 @@ exports.useFin5ColorScheme = void 0;
 const ui_1 = require("@j2inn/ui");
 const react_jss_1 = require("react-jss");
 const fin5Top_1 = require("../../fin5Top/fin5Top");
+const react_1 = require("react");
 function useFin5ColorScheme() {
     const theme = (0, react_jss_1.useTheme)();
     const colorScheme = (0, fin5Top_1.getFin5top)()?.app.GetColorScheme?.();
-    if (!colorScheme) {
-        return theme;
-    }
-    const brandedTheme = (0, ui_1.GenerateTheme)({
-        light: {
-            ...theme,
-            bodyBg: colorScheme.bodyBackground,
-            bgColor: (0, ui_1.lighten)(colorScheme.bodyBackground, 5),
-        },
-        dark: {
-            ...theme,
-            bodyBg: colorScheme.bodyBackground,
-            bgColor: (0, ui_1.lighten)(colorScheme.bodyBackground, 5),
-        },
-        palette: {
-            ...ui_1.DEFAULT_THEME.palette,
-            primary: colorScheme.primary,
-            secondary: (0, ui_1.tint)(colorScheme.primary, 20),
-            accent: (0, ui_1.shade)(colorScheme.primary, 20),
-        },
-    });
-    if (theme.type === 'light') {
+    const brandedTheme = (0, react_1.useMemo)(() => {
+        if (!colorScheme) {
+            return undefined;
+        }
+        return (0, ui_1.GenerateTheme)({
+            light: {
+                ...ui_1.DEFAULT_THEME.light,
+                bodyBg: colorScheme.bodyBackground,
+                bgColor: (0, ui_1.lighten)(colorScheme.bodyBackground, 5),
+            },
+            dark: {
+                ...ui_1.DEFAULT_THEME.dark,
+                bodyBg: colorScheme.bodyBackground,
+                bgColor: (0, ui_1.lighten)(colorScheme.bodyBackground, 5),
+            },
+            palette: {
+                ...ui_1.DEFAULT_THEME.palette,
+                primary: colorScheme.primary,
+                secondary: (0, ui_1.tint)(colorScheme.primary, 20),
+                accent: (0, ui_1.shade)(colorScheme.primary, 20),
+            },
+        });
+    }, [
+        colorScheme?.primary,
+        colorScheme?.bodyBackground,
+        colorScheme?.sidebarBackground,
+    ]);
+    if (brandedTheme && theme.type === 'light') {
         return brandedTheme.light;
     }
-    if (theme.type === 'dark') {
+    if (brandedTheme && theme.type === 'dark') {
         return brandedTheme.dark;
     }
     return theme;

package/dist/react/hooks/useFin5ColorScheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFin5ColorScheme.js","sourceRoot":"","sources":["../../../src/react/hooks/useFin5ColorScheme.ts"],"names":[],"mappings":";AAAA;;GAEG;;;AAEH,kCAOkB;AAClB,yCAAoC;AACpC,mDAAkD;AAElD,SAAgB,kBAAkB;IACjC,MAAM,KAAK,GAAG,IAAA,oBAAQ,GAAY,CAAA;IAClC,MAAM,WAAW,GAAG,IAAA,oBAAU,GAAE,EAAE,GAAG,CAAC,cAAc,EAAE,EAAE,CAAA;IACxD,IAAI,CAAC,WAAW,EAAE;QACjB,OAAO,KAAK,CAAA;KACZ;IAED,MAAM,YAAY,GAAG,IAAA,kBAAa,EAAC;QAClC,KAAK,EAAE;YACN,GAAG,KAAK;YACR,MAAM,EAAE,WAAW,CAAC,cAAc;YAClC,OAAO,EAAE,IAAA,YAAO,EAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;SAC/C;QACD,IAAI,EAAE;YACL,GAAG,KAAK;YACR,MAAM,EAAE,WAAW,CAAC,cAAc;YAClC,OAAO,EAAE,IAAA,YAAO,EAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;SAC/C;QACD,OAAO,EAAE;YACR,GAAG,kBAAa,CAAC,OAAO;YACxB,OAAO,EAAE,WAAW,CAAC,OAAO;YAC5B,SAAS,EAAE,IAAA,SAAI,EAAC,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;YACxC,MAAM,EAAE,IAAA,UAAK,EAAC,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;SACtC;KACD,CAAC,CAAA;IAEF,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QAC3B,OAAO,YAAY,CAAC,KAAK,CAAA;KACzB;IAED,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO,YAAY,CAAC,IAAI,CAAA;KACxB;IAED,OAAO,KAAK,CAAA;AACb,CAAC;AAnCD,gDAmCC"}
+{"version":3,"file":"useFin5ColorScheme.js","sourceRoot":"","sources":["../../../src/react/hooks/useFin5ColorScheme.ts"],"names":[],"mappings":";AAAA;;GAEG;;;AAEH,kCAOkB;AAClB,yCAAoC;AACpC,mDAAkD;AAClD,iCAA+B;AAE/B,SAAgB,kBAAkB;IACjC,MAAM,KAAK,GAAG,IAAA,oBAAQ,GAAY,CAAA;IAClC,MAAM,WAAW,GAAG,IAAA,oBAAU,GAAE,EAAE,GAAG,CAAC,cAAc,EAAE,EAAE,CAAA;IACxD,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,IAAI,CAAC,WAAW,EAAE;YACjB,OAAO,SAAS,CAAA;SAChB;QAED,OAAO,IAAA,kBAAa,EAAC;YACpB,KAAK,EAAE;gBACN,GAAG,kBAAa,CAAC,KAAK;gBACtB,MAAM,EAAE,WAAW,CAAC,cAAc;gBAClC,OAAO,EAAE,IAAA,YAAO,EAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;aAC/C;YACD,IAAI,EAAE;gBACL,GAAG,kBAAa,CAAC,IAAI;gBACrB,MAAM,EAAE,WAAW,CAAC,cAAc;gBAClC,OAAO,EAAE,IAAA,YAAO,EAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;aAC/C;YACD,OAAO,EAAE;gBACR,GAAG,kBAAa,CAAC,OAAO;gBACxB,OAAO,EAAE,WAAW,CAAC,OAAO;gBAC5B,SAAS,EAAE,IAAA,SAAI,EAAC,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;gBACxC,MAAM,EAAE,IAAA,UAAK,EAAC,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;aACtC;SACD,CAAC,CAAA;IACH,CAAC,EAAE;QACF,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,cAAc;QAC3B,WAAW,EAAE,iBAAiB;KAC9B,CAAC,CAAA;IAEF,IAAI,YAAY,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QAC3C,OAAO,YAAY,CAAC,KAAK,CAAA;KACzB;IAED,IAAI,YAAY,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;QAC1C,OAAO,YAAY,CAAC,IAAI,CAAA;KACxB;IAED,OAAO,KAAK,CAAA;AACb,CAAC;AAzCD,gDAyCC"}

package/dist/react/hooks/useScreenSize.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Observe screen size.
+ */
+export declare const useScreenSize: () => {
+    width: number;
+    height: number;
+};