@j2inn/fin5-ui-utils 2.0.4 → 2.0.6-beta.0

package/README.md

@@ -1,5 +1,5 @@
-# What is fin5-ui-utils? #
-A set of useful client-side utilities useful for creating UI applications on top of the FIN 5 framework.
-
-### How do I get set up? ###
-To install this package run `npm i @j2inn/fin5-ui-utils`
+# What is fin5-ui-utils? #
+A set of useful client-side utilities useful for creating UI applications on top of the FIN 5 framework.
+
+### How do I get set up? ###
+To install this package run `npm i @j2inn/fin5-ui-utils`

package/dist/fin5Top/fin5FileUpload.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="node" />
+import { HDict } from 'haystack-core';
+import { URLSearchParams } from 'url';
+/**
+ * Upload a File to FIN5, using the FINStack /fileUpload API. Files can then be viewed using Folio menu.
+ * @param projectName The name of the project where the files will be uploaded
+ * @param file The File to upload
+ * @param additionalTags Any additional tag that needs to be added to the file record. The tags should be
+ * provided as URL search parameters. To add a marker tag, set the value of the param to `'true'`.
+ * @returns the file record as an HDict
+ */
+export declare const fin5FileUpload: (projectName: string, file: File, additionalTags?: URLSearchParams) => Promise<HDict>;

package/dist/fin5Top/fin5FileUpload.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fin5FileUpload = void 0;
+const haystack_core_1 = require("haystack-core");
+const haystack_nclient_1 = require("haystack-nclient");
+const url_1 = require("url");
+/**
+ * Upload a File to FIN5, using the FINStack /fileUpload API. Files can then be viewed using Folio menu.
+ * @param projectName The name of the project where the files will be uploaded
+ * @param file The File to upload
+ * @param additionalTags Any additional tag that needs to be added to the file record. The tags should be
+ * provided as URL search parameters. To add a marker tag, set the value of the param to `'true'`.
+ * @returns the file record as an HDict
+ */
+const fin5FileUpload = async (projectName, file, additionalTags = new url_1.URLSearchParams()) => {
+    if (!additionalTags.has('dis')) {
+        additionalTags.set('dis', file.name);
+    }
+    // URL base (http://localhost) will be ignored, it's just needed to build the URL
+    const url = new URL(`/api/${projectName}/ext/finstack/fileUpload`, 'http://localhost');
+    additionalTags.forEach((value, name) => url.searchParams.set(name, value));
+    const content = await file.arrayBuffer();
+    const response = await (0, haystack_nclient_1.finCsrfFetch)(`${url.pathname}${url.search}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/octet-stream',
+        },
+        body: new Uint8Array(content),
+    });
+    const zincReader = new haystack_core_1.ZincReader(await response.text());
+    const grid = zincReader.readValue();
+    const dict = grid.first;
+    if (!dict) {
+        throw new Error('Unexpected response, no record found');
+    }
+    return dict;
+};
+exports.fin5FileUpload = fin5FileUpload;
+//# sourceMappingURL=fin5FileUpload.js.map

package/dist/fin5Top/fin5FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fin5FileUpload.js","sourceRoot":"","sources":["../../src/fin5Top/fin5FileUpload.ts"],"names":[],"mappings":";;;AAAA,iDAAwD;AACxD,uDAA+C;AAC/C,6BAAqC;AAErC;;;;;;;GAOG;AACI,MAAM,cAAc,GAAG,KAAK,EAClC,WAAmB,EACnB,IAAU,EACV,cAAc,GAAG,IAAI,qBAAe,EAAE,EACrB,EAAE;IACnB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAC/B,cAAc,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;KACpC;IAED,iFAAiF;IACjF,MAAM,GAAG,GAAG,IAAI,GAAG,CAClB,QAAQ,WAAW,0BAA0B,EAC7C,kBAAkB,CAClB,CAAA;IACD,cAAc,CAAC,OAAO,CAAC,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACtD,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CACjC,CAAA;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;IACxC,MAAM,QAAQ,GAAG,MAAM,IAAA,+BAAY,EAAC,GAAG,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,MAAM,EAAE,EAAE;QACnE,MAAM,EAAE,MAAM;QACd,OAAO,EAAE;YACR,cAAc,EAAE,0BAA0B;SAC1C;QACD,IAAI,EAAE,IAAI,UAAU,CAAC,OAAO,CAAC;KAC7B,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,IAAI,0BAAU,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;IACxD,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,EAAW,CAAA;IAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAA;IACvB,IAAI,CAAC,IAAI,EAAE;QACV,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAA;KACvD;IACD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA;AAlCY,QAAA,cAAc,kBAkC1B"}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './fin5Top/fin5FileUpload';
 export * from './fin5Top/fin5Top';
 export * from './fin5Top/getFin5BinUrl';
 export * from './fin5Top/openFin5Alarm';
@@ -18,6 +19,8 @@ export * from './react/components/resolvable/configurationForm/ConfigurationForm
 export * from './react/components/resolvable/configurationForm/ConfigurationFormEntry';
 export * from './react/components/resolvable/configurationForm/getSectionDefault';
 export * from './react/components/RecordImage';
+export * from './react/components/charts/pie/PieChart';
+export * from './react/components/charts/pie/SimplePieChart';
 export * from './react/hooks/useFin5BinUrl';
 export * from './react/app/Fin5AppContainer';
 export * from './react/app/Fin5AppRootStore';

package/dist/index.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 //////////////////////////////////////////////////////////////////////////
 // Fin5 APIs related modules
 //////////////////////////////////////////////////////////////////////////
+__exportStar(require("./fin5Top/fin5FileUpload"), exports);
 __exportStar(require("./fin5Top/fin5Top"), exports);
 __exportStar(require("./fin5Top/getFin5BinUrl"), exports);
 __exportStar(require("./fin5Top/openFin5Alarm"), exports);
@@ -43,6 +44,8 @@ __exportStar(require("./react/components/resolvable/configurationForm/Configurat
 __exportStar(require("./react/components/resolvable/configurationForm/ConfigurationFormEntry"), exports);
 __exportStar(require("./react/components/resolvable/configurationForm/getSectionDefault"), exports);
 __exportStar(require("./react/components/RecordImage"), exports);
+__exportStar(require("./react/components/charts/pie/PieChart"), exports);
+__exportStar(require("./react/components/charts/pie/SimplePieChart"), exports);
 //////////////////////////////////////////////////////////////////////////
 // React hooks
 //////////////////////////////////////////////////////////////////////////

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;AAEH,0EAA0E;AAC1E,4BAA4B;AAC5B,0EAA0E;AAE1E,oDAAiC;AACjC,0DAAuC;AACvC,0DAAuC;AACvC,8DAA2C;AAC3C,uEAAoD;AAEpD,0EAA0E;AAC1E,mBAAmB;AACnB,0EAA0E;AAE1E,mEAAgD;AAChD,oEAAiD;AACjD,4DAAyC;AACzC,oEAAiD;AACjD,4EAAyD;AACzD,gFAA6D;AAC7D,4EAAyD;AACzD,yEAAsD;AACtD,kFAA+D;AAC/D,2FAAwE;AACxE,qFAAkE;AAClE,oGAAiF;AACjF,yGAAsF;AACtF,oGAAiF;AACjF,iEAA8C;AAE9C,0EAA0E;AAC1E,cAAc;AACd,0EAA0E;AAE1E,8DAA2C;AAE3C,0EAA0E;AAC1E,6BAA6B;AAC7B,0EAA0E;AAE1E,+DAA4C;AAC5C,+DAA4C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;GAEG;;;;;;;;;;;;;;;;AAEH,0EAA0E;AAC1E,4BAA4B;AAC5B,0EAA0E;AAE1E,2DAAwC;AACxC,oDAAiC;AACjC,0DAAuC;AACvC,0DAAuC;AACvC,8DAA2C;AAC3C,uEAAoD;AAEpD,0EAA0E;AAC1E,mBAAmB;AACnB,0EAA0E;AAE1E,mEAAgD;AAChD,oEAAiD;AACjD,4DAAyC;AACzC,oEAAiD;AACjD,4EAAyD;AACzD,gFAA6D;AAC7D,4EAAyD;AACzD,yEAAsD;AACtD,kFAA+D;AAC/D,2FAAwE;AACxE,qFAAkE;AAClE,oGAAiF;AACjF,yGAAsF;AACtF,oGAAiF;AACjF,iEAA8C;AAC9C,yEAAsD;AACtD,+EAA4D;AAE5D,0EAA0E;AAC1E,cAAc;AACd,0EAA0E;AAE1E,8DAA2C;AAE3C,0EAA0E;AAC1E,6BAA6B;AAC7B,0EAA0E;AAE1E,+DAA4C;AAC5C,+DAA4C"}

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

@@ -0,0 +1,83 @@
+import * as am5 from '@amcharts/amcharts5';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import React from 'react';
+export declare type PieChartInterfaceColors = {
+    [Property in keyof am5.IInterfaceColorsSettings]: string;
+};
+export interface PieChartColorPalette {
+    interfaceColors?: Partial<PieChartInterfaceColors>;
+    series?: string[];
+}
+export interface PieChartSliceData {
+    value: number;
+    category: string;
+}
+export interface PieChartProps {
+    /**
+     * Data used to populate the chart
+     */
+    data: PieChartSliceData[];
+    /**
+     * Color palette for the chart slices and interface colors @see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+     */
+    colorPalette?: Partial<PieChartColorPalette>;
+    /**
+     * Number formatting options @see https://www.amcharts.com/docs/v5/tutorials/formatting-date-time-and-numbers-using-intl-object/#Formatting_numbers
+     */
+    numberFormat?: Intl.NumberFormatOptions;
+    /**
+     * amcharts5 theme classes to be used by the chart @see https://www.amcharts.com/docs/v5/concepts/themes/
+     */
+    chartThemes?: typeof am5.Theme[];
+    /**
+     * Settings for chart customization @see https://www.amcharts.com/docs/v5/reference/piechart/#Settings
+     */
+    chartSettings?: am5percent.IPieChartSettings;
+    /**
+     * Settings for legend customization @see https://www.amcharts.com/docs/v5/reference/legend/#Settings
+     */
+    legendSettings?: am5.ILegendSettings;
+    /**
+     * Settings for legend value labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendValueLabelsSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for chart series customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesSettings?: am5percent.IPieSeriesSettings;
+    /**
+     * Settings for series labels customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesLabelsSettings?: Partial<am5.IRadialLabelSettings>;
+    /**
+     * Settings for central label customization, useful for donut charts, if not specified no center label will be shown @see https://www.amcharts.com/docs/v5/reference/radiallabel/#Settings
+     */
+    centerLabelSettings?: am5.ILabelSettings;
+    /**
+     * Settings for pie slices customization @see https://www.amcharts.com/docs/v5/reference/slice/#Settings
+     */
+    slicesSettings?: Partial<am5.ISliceSettings>;
+    /**
+     * List of adapters to be applied to the slices @see https://www.amcharts.com/docs/v5/concepts/settings/adapters
+     */
+    sliceAdapters?: SliceAdapter[];
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     */
+    DOMtargetId?: string;
+}
+export declare type SliceAdapter<T extends keyof am5.ISliceSettings = keyof am5.ISliceSettings> = [
+    T,
+    (context: {
+        root: am5.Root;
+        chart: am5percent.PieChart;
+        series: am5percent.PieSeries;
+    }) => (value: am5.ISliceSettings[T], target: am5.Slice, key: T) => am5.ISliceSettings[T]
+];
+/**
+ * Highly customizable pie chart component based on amcharts5
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export declare const PieChart: React.FC<PieChartProps>;

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

@@ -0,0 +1,196 @@
+"use strict";
+/*
+ * Copyright (c) 2023, 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.PieChart = void 0;
+const am5 = __importStar(require("@amcharts/amcharts5"));
+const am5percent = __importStar(require("@amcharts/amcharts5/percent"));
+const react_1 = __importStar(require("react"));
+const react_jss_1 = require("react-jss");
+const useStyles = (0, react_jss_1.createUseStyles)({
+    root: {
+        width: '100%',
+        height: '100%',
+    },
+});
+/**
+ * Returns a color palette selecting some colors from the theme.
+ * @param theme The theme
+ * @returns An array of colors
+ */
+const getDefaultChartColors = (theme) => {
+    return {
+        interfaceColors: {
+            text: theme.textColor,
+        },
+        series: [
+            theme.palette.lime,
+            theme.palette.cyan,
+            theme.palette.red,
+            theme.palette.volcano,
+            theme.palette.orange,
+            theme.palette.gold,
+            theme.palette.yellow,
+            theme.palette.green,
+            theme.palette.purple,
+            theme.palette.magenta,
+            theme.palette.blue,
+            theme.palette.grey,
+        ],
+    };
+};
+/**
+ * Highly customizable pie chart component based on amcharts5
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes, chartSettings, legendSettings, legendValueLabelsSettings, seriesSettings, seriesLabelsSettings, centerLabelSettings, slicesSettings, sliceAdapters, }) => {
+    // Colors configuration
+    const theme = (0, react_jss_1.useTheme)();
+    const colors = { ...getDefaultChartColors(theme), ...colorPalette };
+    // Chart lifecycle
+    const [id, setId] = (0, react_1.useState)(DOMtargetId ?? `amchart-${Math.random()}`);
+    const rootRef = (0, react_1.useRef)(null);
+    const chartRef = (0, react_1.useRef)(null);
+    const legendRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (DOMtargetId && DOMtargetId !== id) {
+            setId(DOMtargetId);
+        }
+    }, [DOMtargetId]);
+    // Chart setup
+    (0, react_1.useLayoutEffect)(() => {
+        const root = am5.Root.new(id);
+        // Setup amcharts theme
+        if (chartThemes) {
+            root.setThemes(chartThemes.map((t) => t.new(root)));
+        }
+        // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+        if (colors.interfaceColors) {
+            // Remap settings to use amcharts Color objects
+            for (const setting in colors.interfaceColors) {
+                const color = colors.interfaceColors[setting];
+                // Apply defined interfaceColor on the chart
+                root.interfaceColors.set(setting, am5.color(color));
+            }
+        }
+        // Setup chart settings
+        const chart = root.container.children.push(am5percent.PieChart.new(root, {
+            layout: root.verticalLayout,
+            ...chartSettings,
+        }));
+        // Setup legend
+        const legend = chart.children.push(am5.Legend.new(root, {
+            layout: root.horizontalLayout,
+            ...legendSettings,
+        }));
+        if (legendValueLabelsSettings) {
+            legend.valueLabels.template.setAll(legendValueLabelsSettings);
+        }
+        rootRef.current = root;
+        chartRef.current = chart;
+        legendRef.current = legend;
+        // clean up before component removal from the DOM
+        return () => {
+            legendRef.current?.dispose();
+            legendRef.current = null;
+            chartRef.current?.dispose();
+            chartRef.current = null;
+            root?.dispose();
+            rootRef.current = null;
+        };
+    }, [
+        id,
+        colors,
+        chartThemes,
+        chartSettings,
+        legendSettings,
+        legendValueLabelsSettings,
+    ]);
+    // Set data
+    (0, react_1.useEffect)(() => {
+        const root = rootRef.current;
+        const chart = chartRef.current;
+        if (chart && root) {
+            chart.series.clear();
+            if (data?.length) {
+                // Setup series
+                const series = chart.series.push(am5percent.PieSeries.new(root, {
+                    valueField: 'value',
+                    categoryField: 'category',
+                    ...seriesSettings,
+                }));
+                // Setup series labels
+                if (seriesLabelsSettings) {
+                    series.labels.template.setAll(seriesLabelsSettings);
+                }
+                // Setup center label
+                if (centerLabelSettings) {
+                    series.children.push(am5.Label.new(root, {
+                        ...centerLabelSettings,
+                    }));
+                }
+                // Setup series slices
+                if (slicesSettings) {
+                    series.slices.template.setAll(slicesSettings);
+                }
+                // Setup slice adapters
+                if (sliceAdapters) {
+                    sliceAdapters.forEach(([key, callbackMaker]) => series.slices.template.adapters.add(key, callbackMaker({
+                        root: root,
+                        chart: chart,
+                        series,
+                    })));
+                }
+                // Setup series colors
+                if (colors?.series) {
+                    series.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
+                }
+                series.data.setAll(data);
+                legendRef.current?.data.setAll(series.dataItems);
+            }
+        }
+    }, [
+        data,
+        chartRef.current,
+        colors?.series,
+        seriesSettings,
+        slicesSettings,
+        seriesLabelsSettings,
+        sliceAdapters,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (numberFormat) {
+            rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
+        }
+    }, [rootRef.current, numberFormat]);
+    const classes = useStyles();
+    return react_1.default.createElement("div", { id: id, className: classes.root });
+};
+exports.PieChart = PieChart;
+//# sourceMappingURL=PieChart.js.map

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PieChartColorPalette, PieChartSliceData } from './PieChart';
+export interface SimplePieChartProps {
+    data: PieChartSliceData[];
+    donut?: boolean;
+    animated?: boolean;
+    colorPalette?: Partial<PieChartColorPalette>;
+    tooltipFormat?: string;
+    numberFormat?: Intl.NumberFormatOptions;
+    hideLabels?: boolean;
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     */
+    DOMtargetId?: string;
+}
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+export declare const SimplePieChart: React.FC<SimplePieChartProps>;

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

@@ -0,0 +1,56 @@
+"use strict";
+/*
+ * Copyright (c) 2023, 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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimplePieChart = void 0;
+const am5 = __importStar(require("@amcharts/amcharts5"));
+const Animated_1 = __importDefault(require("@amcharts/amcharts5/themes/Animated"));
+const react_1 = __importDefault(require("react"));
+const PieChart_1 = require("./PieChart");
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
+    style: 'decimal',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+}, hideLabels, DOMtargetId, }) => {
+    return (react_1.default.createElement(PieChart_1.PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [Animated_1.default] : undefined, chartSettings: {
+            innerRadius: donut ? am5.percent(55) : undefined,
+        }, numberFormat: numberFormat, legendSettings: {
+            centerX: am5.percent(50),
+            x: am5.percent(50),
+        }, seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
+            tooltipText: tooltipFormat,
+        } }));
+};
+exports.SimplePieChart = SimplePieChart;
+//# sourceMappingURL=SimplePieChart.js.map

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

@@ -0,0 +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,aAAa,EAAE;YACd,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;SAChD,EACD,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE;YACf,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;SAClB,EACD,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_es/fin5Top/fin5FileUpload.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="node" />
+import { HDict } from 'haystack-core';
+import { URLSearchParams } from 'url';
+/**
+ * Upload a File to FIN5, using the FINStack /fileUpload API. Files can then be viewed using Folio menu.
+ * @param projectName The name of the project where the files will be uploaded
+ * @param file The File to upload
+ * @param additionalTags Any additional tag that needs to be added to the file record. The tags should be
+ * provided as URL search parameters. To add a marker tag, set the value of the param to `'true'`.
+ * @returns the file record as an HDict
+ */
+export declare const fin5FileUpload: (projectName: string, file: File, additionalTags?: URLSearchParams) => Promise<HDict>;

package/dist_es/fin5Top/fin5FileUpload.js

@@ -0,0 +1,35 @@
+import { ZincReader } from 'haystack-core';
+import { finCsrfFetch } from 'haystack-nclient';
+import { URLSearchParams } from 'url';
+/**
+ * Upload a File to FIN5, using the FINStack /fileUpload API. Files can then be viewed using Folio menu.
+ * @param projectName The name of the project where the files will be uploaded
+ * @param file The File to upload
+ * @param additionalTags Any additional tag that needs to be added to the file record. The tags should be
+ * provided as URL search parameters. To add a marker tag, set the value of the param to `'true'`.
+ * @returns the file record as an HDict
+ */
+export const fin5FileUpload = async (projectName, file, additionalTags = new URLSearchParams()) => {
+    if (!additionalTags.has('dis')) {
+        additionalTags.set('dis', file.name);
+    }
+    // URL base (http://localhost) will be ignored, it's just needed to build the URL
+    const url = new URL(`/api/${projectName}/ext/finstack/fileUpload`, 'http://localhost');
+    additionalTags.forEach((value, name) => url.searchParams.set(name, value));
+    const content = await file.arrayBuffer();
+    const response = await finCsrfFetch(`${url.pathname}${url.search}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/octet-stream',
+        },
+        body: new Uint8Array(content),
+    });
+    const zincReader = new ZincReader(await response.text());
+    const grid = zincReader.readValue();
+    const dict = grid.first;
+    if (!dict) {
+        throw new Error('Unexpected response, no record found');
+    }
+    return dict;
+};
+//# sourceMappingURL=fin5FileUpload.js.map

package/dist_es/fin5Top/fin5FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fin5FileUpload.js","sourceRoot":"","sources":["../../src/fin5Top/fin5FileUpload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAErC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EAClC,WAAmB,EACnB,IAAU,EACV,cAAc,GAAG,IAAI,eAAe,EAAE,EACrB,EAAE;IACnB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAC/B,cAAc,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;KACpC;IAED,iFAAiF;IACjF,MAAM,GAAG,GAAG,IAAI,GAAG,CAClB,QAAQ,WAAW,0BAA0B,EAC7C,kBAAkB,CAClB,CAAA;IACD,cAAc,CAAC,OAAO,CAAC,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE,CACtD,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CACjC,CAAA;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;IACxC,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,GAAG,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,MAAM,EAAE,EAAE;QACnE,MAAM,EAAE,MAAM;QACd,OAAO,EAAE;YACR,cAAc,EAAE,0BAA0B;SAC1C;QACD,IAAI,EAAE,IAAI,UAAU,CAAC,OAAO,CAAC;KAC7B,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;IACxD,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,EAAW,CAAA;IAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAA;IACvB,IAAI,CAAC,IAAI,EAAE;QACV,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAA;KACvD;IACD,OAAO,IAAI,CAAA;AACZ,CAAC,CAAA"}

package/dist_es/index.d.ts

@@ -1,3 +1,4 @@
+export * from './fin5Top/fin5FileUpload';
 export * from './fin5Top/fin5Top';
 export * from './fin5Top/getFin5BinUrl';
 export * from './fin5Top/openFin5Alarm';
@@ -18,6 +19,8 @@ export * from './react/components/resolvable/configurationForm/ConfigurationForm
 export * from './react/components/resolvable/configurationForm/ConfigurationFormEntry';
 export * from './react/components/resolvable/configurationForm/getSectionDefault';
 export * from './react/components/RecordImage';
+export * from './react/components/charts/pie/PieChart';
+export * from './react/components/charts/pie/SimplePieChart';
 export * from './react/hooks/useFin5BinUrl';
 export * from './react/app/Fin5AppContainer';
 export * from './react/app/Fin5AppRootStore';

package/dist_es/index.js

@@ -4,6 +4,7 @@
 //////////////////////////////////////////////////////////////////////////
 // Fin5 APIs related modules
 //////////////////////////////////////////////////////////////////////////
+export * from './fin5Top/fin5FileUpload';
 export * from './fin5Top/fin5Top';
 export * from './fin5Top/getFin5BinUrl';
 export * from './fin5Top/openFin5Alarm';
@@ -27,6 +28,8 @@ export * from './react/components/resolvable/configurationForm/ConfigurationForm
 export * from './react/components/resolvable/configurationForm/ConfigurationFormEntry';
 export * from './react/components/resolvable/configurationForm/getSectionDefault';
 export * from './react/components/RecordImage';
+export * from './react/components/charts/pie/PieChart';
+export * from './react/components/charts/pie/SimplePieChart';
 //////////////////////////////////////////////////////////////////////////
 // React hooks
 //////////////////////////////////////////////////////////////////////////

package/dist_es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,0EAA0E;AAC1E,4BAA4B;AAC5B,0EAA0E;AAE1E,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA;AAEpD,0EAA0E;AAC1E,mBAAmB;AACnB,0EAA0E;AAE1E,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,2BAA2B,CAAA;AACzC,cAAc,mCAAmC,CAAA;AACjD,cAAc,2CAA2C,CAAA;AACzD,cAAc,+CAA+C,CAAA;AAC7D,cAAc,2CAA2C,CAAA;AACzD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iDAAiD,CAAA;AAC/D,cAAc,0DAA0D,CAAA;AACxE,cAAc,oDAAoD,CAAA;AAClE,cAAc,mEAAmE,CAAA;AACjF,cAAc,wEAAwE,CAAA;AACtF,cAAc,mEAAmE,CAAA;AACjF,cAAc,gCAAgC,CAAA;AAE9C,0EAA0E;AAC1E,cAAc;AACd,0EAA0E;AAE1E,cAAc,6BAA6B,CAAA;AAE3C,0EAA0E;AAC1E,6BAA6B;AAC7B,0EAA0E;AAE1E,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,0EAA0E;AAC1E,4BAA4B;AAC5B,0EAA0E;AAE1E,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sCAAsC,CAAA;AAEpD,0EAA0E;AAC1E,mBAAmB;AACnB,0EAA0E;AAE1E,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,2BAA2B,CAAA;AACzC,cAAc,mCAAmC,CAAA;AACjD,cAAc,2CAA2C,CAAA;AACzD,cAAc,+CAA+C,CAAA;AAC7D,cAAc,2CAA2C,CAAA;AACzD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iDAAiD,CAAA;AAC/D,cAAc,0DAA0D,CAAA;AACxE,cAAc,oDAAoD,CAAA;AAClE,cAAc,mEAAmE,CAAA;AACjF,cAAc,wEAAwE,CAAA;AACtF,cAAc,mEAAmE,CAAA;AACjF,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wCAAwC,CAAA;AACtD,cAAc,8CAA8C,CAAA;AAE5D,0EAA0E;AAC1E,cAAc;AACd,0EAA0E;AAE1E,cAAc,6BAA6B,CAAA;AAE3C,0EAA0E;AAC1E,6BAA6B;AAC7B,0EAA0E;AAE1E,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA"}

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

@@ -0,0 +1,83 @@
+import * as am5 from '@amcharts/amcharts5';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import React from 'react';
+export declare type PieChartInterfaceColors = {
+    [Property in keyof am5.IInterfaceColorsSettings]: string;
+};
+export interface PieChartColorPalette {
+    interfaceColors?: Partial<PieChartInterfaceColors>;
+    series?: string[];
+}
+export interface PieChartSliceData {
+    value: number;
+    category: string;
+}
+export interface PieChartProps {
+    /**
+     * Data used to populate the chart
+     */
+    data: PieChartSliceData[];
+    /**
+     * Color palette for the chart slices and interface colors @see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+     */
+    colorPalette?: Partial<PieChartColorPalette>;
+    /**
+     * Number formatting options @see https://www.amcharts.com/docs/v5/tutorials/formatting-date-time-and-numbers-using-intl-object/#Formatting_numbers
+     */
+    numberFormat?: Intl.NumberFormatOptions;
+    /**
+     * amcharts5 theme classes to be used by the chart @see https://www.amcharts.com/docs/v5/concepts/themes/
+     */
+    chartThemes?: typeof am5.Theme[];
+    /**
+     * Settings for chart customization @see https://www.amcharts.com/docs/v5/reference/piechart/#Settings
+     */
+    chartSettings?: am5percent.IPieChartSettings;
+    /**
+     * Settings for legend customization @see https://www.amcharts.com/docs/v5/reference/legend/#Settings
+     */
+    legendSettings?: am5.ILegendSettings;
+    /**
+     * Settings for legend value labels customization @see https://www.amcharts.com/docs/v5/reference/label/#Settings
+     */
+    legendValueLabelsSettings?: Partial<am5.ILabelSettings>;
+    /**
+     * Settings for chart series customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesSettings?: am5percent.IPieSeriesSettings;
+    /**
+     * Settings for series labels customization @see https://www.amcharts.com/docs/v5/reference/pieseries/#Settings
+     */
+    seriesLabelsSettings?: Partial<am5.IRadialLabelSettings>;
+    /**
+     * Settings for central label customization, useful for donut charts, if not specified no center label will be shown @see https://www.amcharts.com/docs/v5/reference/radiallabel/#Settings
+     */
+    centerLabelSettings?: am5.ILabelSettings;
+    /**
+     * Settings for pie slices customization @see https://www.amcharts.com/docs/v5/reference/slice/#Settings
+     */
+    slicesSettings?: Partial<am5.ISliceSettings>;
+    /**
+     * List of adapters to be applied to the slices @see https://www.amcharts.com/docs/v5/concepts/settings/adapters
+     */
+    sliceAdapters?: SliceAdapter[];
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     */
+    DOMtargetId?: string;
+}
+export declare type SliceAdapter<T extends keyof am5.ISliceSettings = keyof am5.ISliceSettings> = [
+    T,
+    (context: {
+        root: am5.Root;
+        chart: am5percent.PieChart;
+        series: am5percent.PieSeries;
+    }) => (value: am5.ISliceSettings[T], target: am5.Slice, key: T) => am5.ISliceSettings[T]
+];
+/**
+ * Highly customizable pie chart component based on amcharts5
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export declare const PieChart: React.FC<PieChartProps>;

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

@@ -0,0 +1,169 @@
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import * as am5 from '@amcharts/amcharts5';
+import * as am5percent from '@amcharts/amcharts5/percent';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createUseStyles, useTheme } from 'react-jss';
+const useStyles = createUseStyles({
+    root: {
+        width: '100%',
+        height: '100%',
+    },
+});
+/**
+ * Returns a color palette selecting some colors from the theme.
+ * @param theme The theme
+ * @returns An array of colors
+ */
+const getDefaultChartColors = (theme) => {
+    return {
+        interfaceColors: {
+            text: theme.textColor,
+        },
+        series: [
+            theme.palette.lime,
+            theme.palette.cyan,
+            theme.palette.red,
+            theme.palette.volcano,
+            theme.palette.orange,
+            theme.palette.gold,
+            theme.palette.yellow,
+            theme.palette.green,
+            theme.palette.purple,
+            theme.palette.magenta,
+            theme.palette.blue,
+            theme.palette.grey,
+        ],
+    };
+};
+/**
+ * Highly customizable pie chart component based on amcharts5
+ * @see https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+ *
+ * This component wraps some of the chart configuration trying to make it more react-friendly
+ */
+export const PieChart = ({ DOMtargetId, data, colorPalette, numberFormat, chartThemes, chartSettings, legendSettings, legendValueLabelsSettings, seriesSettings, seriesLabelsSettings, centerLabelSettings, slicesSettings, sliceAdapters, }) => {
+    // Colors configuration
+    const theme = useTheme();
+    const colors = { ...getDefaultChartColors(theme), ...colorPalette };
+    // Chart lifecycle
+    const [id, setId] = useState(DOMtargetId ?? `amchart-${Math.random()}`);
+    const rootRef = useRef(null);
+    const chartRef = useRef(null);
+    const legendRef = useRef(null);
+    useEffect(() => {
+        if (DOMtargetId && DOMtargetId !== id) {
+            setId(DOMtargetId);
+        }
+    }, [DOMtargetId]);
+    // Chart setup
+    useLayoutEffect(() => {
+        const root = am5.Root.new(id);
+        // Setup amcharts theme
+        if (chartThemes) {
+            root.setThemes(chartThemes.map((t) => t.new(root)));
+        }
+        // Setup interface colors, see https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/#Interface_colors
+        if (colors.interfaceColors) {
+            // Remap settings to use amcharts Color objects
+            for (const setting in colors.interfaceColors) {
+                const color = colors.interfaceColors[setting];
+                // Apply defined interfaceColor on the chart
+                root.interfaceColors.set(setting, am5.color(color));
+            }
+        }
+        // Setup chart settings
+        const chart = root.container.children.push(am5percent.PieChart.new(root, {
+            layout: root.verticalLayout,
+            ...chartSettings,
+        }));
+        // Setup legend
+        const legend = chart.children.push(am5.Legend.new(root, {
+            layout: root.horizontalLayout,
+            ...legendSettings,
+        }));
+        if (legendValueLabelsSettings) {
+            legend.valueLabels.template.setAll(legendValueLabelsSettings);
+        }
+        rootRef.current = root;
+        chartRef.current = chart;
+        legendRef.current = legend;
+        // clean up before component removal from the DOM
+        return () => {
+            legendRef.current?.dispose();
+            legendRef.current = null;
+            chartRef.current?.dispose();
+            chartRef.current = null;
+            root?.dispose();
+            rootRef.current = null;
+        };
+    }, [
+        id,
+        colors,
+        chartThemes,
+        chartSettings,
+        legendSettings,
+        legendValueLabelsSettings,
+    ]);
+    // Set data
+    useEffect(() => {
+        const root = rootRef.current;
+        const chart = chartRef.current;
+        if (chart && root) {
+            chart.series.clear();
+            if (data?.length) {
+                // Setup series
+                const series = chart.series.push(am5percent.PieSeries.new(root, {
+                    valueField: 'value',
+                    categoryField: 'category',
+                    ...seriesSettings,
+                }));
+                // Setup series labels
+                if (seriesLabelsSettings) {
+                    series.labels.template.setAll(seriesLabelsSettings);
+                }
+                // Setup center label
+                if (centerLabelSettings) {
+                    series.children.push(am5.Label.new(root, {
+                        ...centerLabelSettings,
+                    }));
+                }
+                // Setup series slices
+                if (slicesSettings) {
+                    series.slices.template.setAll(slicesSettings);
+                }
+                // Setup slice adapters
+                if (sliceAdapters) {
+                    sliceAdapters.forEach(([key, callbackMaker]) => series.slices.template.adapters.add(key, callbackMaker({
+                        root: root,
+                        chart: chart,
+                        series,
+                    })));
+                }
+                // Setup series colors
+                if (colors?.series) {
+                    series.get('colors')?.set('colors', colors.series.map((c) => am5.color(c)));
+                }
+                series.data.setAll(data);
+                legendRef.current?.data.setAll(series.dataItems);
+            }
+        }
+    }, [
+        data,
+        chartRef.current,
+        colors?.series,
+        seriesSettings,
+        slicesSettings,
+        seriesLabelsSettings,
+        sliceAdapters,
+    ]);
+    useEffect(() => {
+        if (numberFormat) {
+            rootRef.current?.numberFormatter.set('numberFormat', numberFormat);
+        }
+    }, [rootRef.current, numberFormat]);
+    const classes = useStyles();
+    return React.createElement("div", { id: id, className: classes.root });
+};
+//# sourceMappingURL=PieChart.js.map

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PieChartColorPalette, PieChartSliceData } from './PieChart';
+export interface SimplePieChartProps {
+    data: PieChartSliceData[];
+    donut?: boolean;
+    animated?: boolean;
+    colorPalette?: Partial<PieChartColorPalette>;
+    tooltipFormat?: string;
+    numberFormat?: Intl.NumberFormatOptions;
+    hideLabels?: boolean;
+    /**
+     * Optional DOM id for the chart container, if not specified it will be automatically generated
+     */
+    DOMtargetId?: string;
+}
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+export declare const SimplePieChart: React.FC<SimplePieChartProps>;

package/dist_es/react/components/charts/pie/SimplePieChart.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import * as am5 from '@amcharts/amcharts5';
+import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
+import React from 'react';
+import { PieChart } from './PieChart';
+/**
+ * Simplified version of the pie chart for quick usage and easy configuration.
+ * Serves also as an example of how to use the underlying PieChart component.
+ */
+export const SimplePieChart = ({ data, donut, animated, colorPalette, tooltipFormat, numberFormat = {
+    style: 'decimal',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+}, hideLabels, DOMtargetId, }) => {
+    return (React.createElement(PieChart, { DOMtargetId: DOMtargetId, colorPalette: colorPalette, data: data, chartThemes: animated ? [am5themes_Animated] : undefined, chartSettings: {
+            innerRadius: donut ? am5.percent(55) : undefined,
+        }, numberFormat: numberFormat, legendSettings: {
+            centerX: am5.percent(50),
+            x: am5.percent(50),
+        }, seriesLabelsSettings: { forceHidden: hideLabels }, seriesSettings: { alignLabels: false }, slicesSettings: {
+            tooltipText: tooltipFormat,
+        } }));
+};
+//# sourceMappingURL=SimplePieChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SimplePieChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/pie/SimplePieChart.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,GAAG,MAAM,qBAAqB,CAAA;AAC1C,OAAO,kBAAkB,MAAM,qCAAqC,CAAA;AACpE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAA2C,MAAM,YAAY,CAAA;AAgB9E;;;GAGG;AACH,MAAM,CAAC,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,oBAAC,QAAQ,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,aAAa,EAAE;YACd,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;SAChD,EACD,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE;YACf,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACxB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;SAClB,EACD,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"}

package/dist_es/react/components/graphics/GraphicsTabViewer.jsx

@@ -22,8 +22,15 @@ const useStyles = createUseStyles({
             },
         },
     },
+    fallback: {
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '1.1em',
+    },
 });
-export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, }) => {
+export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName, targetRef, className, queryRelated = false, fallbackText = 'No graphics found.', fallbackClassName, }) => {
     const client = useClient();
     const classes = useStyles();
     const [loading, setLoading] = useState(true);
@@ -31,7 +38,7 @@ export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName
     useEffect(() => {
         if (targetRef) {
             client.ext
-                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(true)`)
+                .eval(`readById(${targetRef.toAxon()}).finGraphicOn(${queryRelated})`)
                 .then((grid) => {
                 setGraphicsList(grid.getRows());
             })
@@ -49,6 +56,8 @@ export const GraphicsTabViewer = ({ projectName = fin5Top?.finstack?.projectName
             };
         });
     }, [graphicsList]);
-    return loading ? (<LoadingSpinner />) : (<Tabs className={cn(classes.tabs, className)} items={tabs}/>);
+    return loading ? (<LoadingSpinner />) : tabs.length > 0 ? (<Tabs className={cn(classes.tabs, className)} items={tabs}/>) : (<div className={cn(classes.fallback, fallbackClassName)}>
+			{fallbackText}
+		</div>);
 };
 //# sourceMappingURL=GraphicsTabViewer.jsx.map

package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,IAAI,EAAE;QACL,MAAM,EAAE,MAAM;QACd,CAAC,MAAM,UAAU,sBAAsB,CAAC,EAAE;YACzC,MAAM,EAAE,MAAM;YACd,CAAC,MAAM,UAAU,eAAe,CAAC,EAAE;gBAClC,MAAM,EAAE,MAAM;gBACd,CAAC,MAAM,UAAU,eAAe,CAAC,EAAE;oBAClC,MAAM,EAAE,MAAM;iBACd;aACD;SACD;KACD;CACD,CAAC,CAAA;AAYF,MAAM,CAAC,MAAM,iBAAiB,GAAgC,CAAC,EAC9D,WAAW,GAAG,OAAO,EAAE,QAAQ,EAAE,WAAW,EAC5C,SAAS,EACT,SAAS,GACT,EAAE,EAAE;IACJ,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAA;IAErE,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,SAAS,EAAE;YACd,MAAM,CAAC,GAAG;iBACR,IAAI,CAAC,YAAY,SAAS,CAAC,MAAM,EAAE,sBAAsB,CAAC;iBAC1D,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;gBACd,eAAe,CAAC,IAAI,CAAC,OAAO,EAAqB,CAAC,CAAA;YACnD,CAAC,CAAC;iBACD,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;SAClC;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,OAAO,YAAY;aACjB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;aACtD,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YAChB,OAAO;gBACN,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE;gBACtB,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;gBACxB,QAAQ,EAAE,CACT,CAAC,aAAa,CACb,WAAW,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAC/B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EACrB,CACF;aACD,CAAA;QACF,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,OAAO,CAAC,CAAC,CAAC,CAChB,CAAC,cAAc,CAAC,AAAD,EAAG,CAClB,CAAC,CAAC,CAAC,CACH,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAG,CAC7D,CAAA;AACF,CAAC,CAAA"}
+{"version":3,"file":"GraphicsTabViewer.jsx","sourceRoot":"","sources":["../../../../src/react/components/graphics/GraphicsTabViewer.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,SAAS,GAAG,eAAe,CAAC;IACjC,IAAI,EAAE;QACL,MAAM,EAAE,MAAM;QACd,CAAC,MAAM,UAAU,sBAAsB,CAAC,EAAE;YACzC,MAAM,EAAE,MAAM;YACd,CAAC,MAAM,UAAU,eAAe,CAAC,EAAE;gBAClC,MAAM,EAAE,MAAM;gBACd,CAAC,MAAM,UAAU,eAAe,CAAC,EAAE;oBAClC,MAAM,EAAE,MAAM;iBACd;aACD;SACD;KACD;IACD,QAAQ,EAAE;QACT,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,OAAO;KACjB;CACD,CAAC,CAAA;AAoBF,MAAM,CAAC,MAAM,iBAAiB,GAAgC,CAAC,EAC9D,WAAW,GAAG,OAAO,EAAE,QAAQ,EAAE,WAAW,EAC5C,SAAS,EACT,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,oBAAoB,EACnC,iBAAiB,GACjB,EAAE,EAAE;IACJ,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAA;IAErE,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,SAAS,EAAE;YACd,MAAM,CAAC,GAAG;iBACR,IAAI,CACJ,YAAY,SAAS,CAAC,MAAM,EAAE,kBAAkB,YAAY,GAAG,CAC/D;iBACA,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;gBACd,eAAe,CAAC,IAAI,CAAC,OAAO,EAAqB,CAAC,CAAA;YACnD,CAAC,CAAC;iBACD,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;SAClC;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,OAAO,YAAY;aACjB,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;aACtD,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YAChB,OAAO;gBACN,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE;gBACtB,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE;gBACxB,QAAQ,EAAE,CACT,CAAC,aAAa,CACb,WAAW,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAC/B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EACrB,CACF;aACD,CAAA;QACF,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,OAAO,CAAC,CAAC,CAAC,CAChB,CAAC,cAAc,CAAC,AAAD,EAAG,CAClB,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACrB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAG,CAC7D,CAAC,CAAC,CAAC,CACH,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CACvD;GAAA,CAAC,YAAY,CACd;EAAA,EAAE,GAAG,CAAC,CACN,CAAA;AACF,CAAC,CAAA"}

package/dist_es/react/components/navigation/Router.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
+ */
+import React, { Suspense, useEffect, useMemo, } from 'react';
+import { LoadingSpinner } from '../LoadingSpinner';
+import { findPageByName } from './MenuPage';
+/**
+ * Renders the currently selected page from a tree of pages
+ */
+export function Router({ pages = [], currentPage, onPageChange, fallbackComponent, }) {
+    const page = useMemo(() => findPageByName(pages, currentPage), [pages, currentPage]);
+    useEffect(() => {
+        onPageChange?.(page);
+    }, [page]);
+    return page?.component ? (React.createElement(Suspense, { fallback: React.createElement(LoadingSpinner, null) }, React.createElement(page.component, page?.props))) : (fallbackComponent ?? React.createElement("div", null,
+        currentPage,
+        " page not found"));
+}
+//# sourceMappingURL=Router.js.map

package/dist_es/react/components/navigation/Router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.js","sourceRoot":"","sources":["../../../../src/react/components/navigation/Router.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAGb,QAAQ,EACR,SAAS,EACT,OAAO,GACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAY,MAAM,YAAY,CAAA;AASrD;;GAEG;AACH,MAAM,UAAU,MAAM,CAAqB,EAC1C,KAAK,GAAG,EAAE,EACV,WAAW,EACX,YAAY,EACZ,iBAAiB,GACkB;IACnC,MAAM,IAAI,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,EACxC,CAAC,KAAK,EAAE,WAAW,CAAC,CACpB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACd,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CACxB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,oBAAC,cAAc,OAAG,IACpC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,CACvC,CACX,CAAC,CAAC,CAAC,CACH,iBAAiB,IAAI;QAAM,WAAW;0BAAsB,CAC5D,CAAA;AACF,CAAC"}

package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts

@@ -0,0 +1,23 @@
+import type { Location } from '@remix-run/router';
+import { LayoutProps, MenuProps, SiderProps } from 'antd';
+import React from 'react';
+import { MenuPage } from '../MenuPage';
+export interface BasicLayoutProps {
+    pages?: MenuPage[];
+    compactSider?: boolean;
+    layoutProps?: LayoutProps;
+    mobileHeaderProps?: LayoutProps;
+    siderProps?: SiderProps;
+    contentProps?: LayoutProps;
+    menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
+    isSelectedRoute?: (page: MenuPage, location: Location) => boolean;
+}
+/**
+ * This hook can be used with react-router/BasicLayout,
+ * to ensure FIN5 URL is aligned with the internal frame URL.
+ */
+export declare const useLocationUpdate: () => void;
+/**
+ * Basic layout that uses React Router.
+ */
+export declare const BasicLayout: React.FC<BasicLayoutProps>;

package/dist_es/react/components/navigation/react-router/BasicLayout.js

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Layout, Menu } from '@j2inn/ui';
+import classNames from 'classnames';
+import { IN_IFRAME, fin5SkipHashUpdate, getFin5HashFrameParameters, getTopLocation, } from 'fin5Top/useFin5AppURLHashParameter';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import { HEADER_HEIGHT, getMenuPages, useStyles } from '../BasicLayout';
+import { pageTreeToPageList } from '../MenuPage';
+// Workaround j2inn/ui exporting problem
+const Header = Layout.Header;
+const Sider = Layout.Sider;
+const Content = Layout.Content;
+/**
+ * This hook can be used with react-router/BasicLayout,
+ * to ensure FIN5 URL is aligned with the internal frame URL.
+ */
+export const useLocationUpdate = () => {
+    const location = useLocation();
+    useEffect(() => {
+        console.debug('Location changed', location);
+        const hash = location.pathname;
+        const queryParams = location.search;
+        if (IN_IFRAME) {
+            fin5SkipHashUpdate()?.then(() => {
+                const frameParameters = getFin5HashFrameParameters();
+                frameParameters.set('url', frameParameters.get('url')?.split('#')[0] +
+                    '#' +
+                    hash +
+                    queryParams);
+                getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
+            });
+        }
+    }, [location]);
+};
+const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(`/${page.key}`)) => {
+    const location = useLocation();
+    return useMemo(() => {
+        const flatPages = pageTreeToPageList(pages);
+        return flatPages
+            .filter((page) => isSelectedRoute(page, location))
+            .map((page) => page.key);
+    }, [location, pages]);
+};
+/**
+ * Basic layout that uses React Router.
+ */
+export const BasicLayout = ({ pages = [], compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, isSelectedRoute, }) => {
+    const navigate = useNavigate();
+    const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
+    // manage mobile navigation
+    const [isMobile, setIsMobile] = useState(false);
+    const [hiddenSider, setHiddenSider] = useState(false);
+    const siderWidth = siderProps?.width;
+    const classes = useStyles({ isMobile, compactSider, siderWidth });
+    const menuPages = useMemo(() => getMenuPages(pages), [pages]);
+    return (React.createElement(Layout, { hasSider: true, ...layoutProps },
+        isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) }, hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classes.menuTrigger, onClick: () => {
+                setHiddenSider(!hiddenSider);
+            } })) : (React.createElement(MenuFoldOutlined, { className: classes.menuTrigger, onClick: () => {
+                setHiddenSider(!hiddenSider);
+            } })))),
+        React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
+                setIsMobile(broken);
+                setHiddenSider(true);
+            }, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
+                ? 0
+                : compactSider
+                    ? HEADER_HEIGHT
+                    : 0, trigger: null },
+            React.createElement(Menu, { ...menuProps, items: menuPages, selectedKeys: selectedRoutes, onSelect: ({ key }) => {
+                    if (!hiddenSider) {
+                        setHiddenSider(true);
+                    }
+                    navigate(key);
+                } })),
+        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) },
+            React.createElement(Outlet, null))));
+};
+//# sourceMappingURL=BasicLayout.js.map

package/dist_es/react/components/navigation/react-router/BasicLayout.js.map

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

package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts

@@ -0,0 +1,24 @@
+import type { Location } from '@remix-run/router';
+import { LayoutProps, MenuProps, SiderProps } from 'antd';
+import React from 'react';
+import { MenuPage } from '../MenuPage';
+export interface ReactRouterBasicLayoutProps {
+    pages?: MenuPage[];
+    defaultPage?: string;
+    compactSider?: boolean;
+    layoutProps?: LayoutProps;
+    mobileHeaderProps?: LayoutProps;
+    siderProps?: SiderProps;
+    contentProps?: LayoutProps;
+    menuProps?: Omit<MenuProps, 'items' | 'selectedKeys' | 'onSelect'>;
+    isSelectedRoute?: (page: MenuPage, location: Location) => boolean;
+}
+/**
+ * This hook can be used with react-router/BasicLayout,
+ * to ensure FIN5 URL is aligned with the internal frame URL.
+ */
+export declare const useLocationUpdate: () => void;
+/**
+ * Basic layout that uses React Router.
+ */
+export declare const ReactRouterBasicLayout: React.FC<ReactRouterBasicLayoutProps>;

package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2023, J2 Innovations. All Rights Reserved
+ */
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Layout, Menu } from '@j2inn/ui';
+import classNames from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import { IN_IFRAME, fin5SkipHashUpdate, getFin5HashFrameParameters, getTopLocation, } from '../../../../fin5Top/useFin5AppURLHashParameter';
+import { HEADER_HEIGHT, getMenuPages, useStyles } from '../BasicLayout';
+import { pageTreeToPageList } from '../MenuPage';
+// Workaround j2inn/ui exporting problem
+const Header = Layout.Header;
+const Sider = Layout.Sider;
+const Content = Layout.Content;
+/**
+ * This hook can be used with react-router/BasicLayout,
+ * to ensure FIN5 URL is aligned with the internal frame URL.
+ */
+export const useLocationUpdate = () => {
+    const location = useLocation();
+    useEffect(() => {
+        console.debug('Location changed', location);
+        const hash = location.pathname;
+        const queryParams = location.search;
+        if (IN_IFRAME) {
+            fin5SkipHashUpdate()?.then(() => {
+                const frameParameters = getFin5HashFrameParameters();
+                frameParameters.set('url', frameParameters.get('url')?.split('#')[0] +
+                    '#' +
+                    hash +
+                    queryParams);
+                getTopLocation().hash = `#${getTopLocation().hash.slice(1).split('?')[0]}?${frameParameters.toString()}`;
+            });
+        }
+    }, [location]);
+};
+const useSelectedRoutes = (pages, isSelectedRoute = (page, location) => location.pathname.includes(`/${page.key}`)) => {
+    const location = useLocation();
+    return useMemo(() => {
+        const flatPages = pageTreeToPageList(pages);
+        return flatPages
+            .filter((page) => isSelectedRoute(page, location))
+            .map((page) => page.key);
+    }, [location, pages]);
+};
+/**
+ * Basic layout that uses React Router.
+ */
+export const ReactRouterBasicLayout = ({ pages = [], defaultPage, compactSider, layoutProps, mobileHeaderProps, siderProps, contentProps, menuProps, isSelectedRoute, }) => {
+    const navigate = useNavigate();
+    const selectedRoutes = useSelectedRoutes(pages, isSelectedRoute);
+    // manage mobile navigation
+    const [isMobile, setIsMobile] = useState(false);
+    const [hiddenSider, setHiddenSider] = useState(false);
+    const siderWidth = siderProps?.width;
+    const classes = useStyles({ isMobile, compactSider, siderWidth });
+    const menuPages = useMemo(() => getMenuPages(pages), [pages]);
+    return (React.createElement(Layout, { hasSider: true, ...layoutProps },
+        isMobile && (React.createElement(Header, { ...mobileHeaderProps, className: classNames(classes.header, mobileHeaderProps?.className) }, hiddenSider ? (React.createElement(MenuUnfoldOutlined, { className: classes.menuTrigger, onClick: () => {
+                setHiddenSider(!hiddenSider);
+            } })) : (React.createElement(MenuFoldOutlined, { className: classes.menuTrigger, onClick: () => {
+                setHiddenSider(!hiddenSider);
+            } })))),
+        React.createElement(Sider, { ...siderProps, className: classNames(classes.sider, siderProps?.className), breakpoint: 'md', onBreakpoint: (broken) => {
+                setIsMobile(broken);
+                setHiddenSider(true);
+            }, collapsed: (isMobile && hiddenSider) || compactSider, collapsedWidth: isMobile && hiddenSider
+                ? 0
+                : compactSider
+                    ? HEADER_HEIGHT
+                    : 0, trigger: null },
+            React.createElement(Menu, { ...menuProps, defaultSelectedKeys: defaultPage ? [defaultPage] : undefined, items: menuPages, selectedKeys: selectedRoutes, onSelect: ({ key }) => {
+                    if (!hiddenSider) {
+                        setHiddenSider(true);
+                    }
+                    navigate(key);
+                } })),
+        React.createElement(Content, { ...contentProps, className: classNames(classes.content, contentProps?.className) },
+            React.createElement(Outlet, null))));
+};
+//# sourceMappingURL=ReactRouterBasicLayout.js.map

package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@j2inn/fin5-ui-utils",
-	"version": "2.0.4",
+	"version": "2.0.6-beta.0",
 	"description": "A set of useful client-side utilities useful for creating UI applications on top of FIN 5",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -31,6 +31,7 @@
 		"js-yaml": "^4.1.0"
 	},
 	"peerDependencies": {
+		"@amcharts/amcharts5": "^5.4.4",
 		"@j2inn/app": "^2.0.0",
 		"@j2inn/resolvable-ui-elements": "^1.0.1",
 		"@j2inn/ui": "^6.0.22",
@@ -121,4 +122,4 @@
 			"eslint --fix"
 		]
 	}
-}
+}