@j2inn/fin5-ui-utils 5.2.2-beta.0 → 5.2.2-beta.10

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

@@ -0,0 +1,251 @@
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+import * as am5 from '@amcharts/amcharts5';
+import { HDict, HGrid, Kind, valueIsKind, } from 'haystack-core';
+import { day, hour, julianMonth, week, year } from 'haystack-units/dist';
+import React, { memo, useMemo } from 'react';
+import { useTheme } from 'react-jss';
+import useScreenSize from '../../../hooks/useScreenSize';
+import { AxisPlacement, Chart, LegendPlacement, UnitPlacement, } from './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 = {}));
+export const rollupDurationToTimeInterval = (value) => {
+    let unit;
+    switch (value?.unit) {
+        case hour:
+            unit = 'hour';
+            break;
+        case day:
+            unit = 'day';
+            break;
+        case week:
+            unit = 'week';
+            break;
+        case julianMonth:
+            unit = 'month';
+            break;
+        case year:
+            unit = 'year';
+            break;
+    }
+    return { count: value?.value ?? 1, timeUnit: unit ?? 'hour' };
+};
+export const isLineSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.line;
+export const isStackedBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.stackedBar;
+export const isBarSeries = (colMetadata) => colMetadata?.series?.value === SeriesType.bar;
+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) => AxisPlacement[colMetadata?.axisPlacement?.value];
+export 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;
+};
+export const splitBarAndLineSeriesCols = (grid) => {
+    const barSeries = new Set();
+    const stackedBarSeries = new Set();
+    const lineSeries = new Set();
+    grid.getColumns().forEach((column) => {
+        const colMetadata = column.meta;
+        if (isLineSeries(colMetadata)) {
+            lineSeries.add(column.name);
+        }
+        else if (isBarSeries(colMetadata)) {
+            barSeries.add(column.name);
+        }
+        else if (isStackedBarSeries(colMetadata)) {
+            stackedBarSeries.add(column.name);
+        }
+    });
+    return {
+        barSeries,
+        stackedBarSeries,
+        lineSeries,
+    };
+};
+export 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,
+    });
+};
+export 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,
+    });
+};
+/**
+ * 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 (valueIsKind(val, Kind.Number)) {
+        return val.value;
+    }
+    if (valueIsKind(val, Kind.Date)) {
+        return val.date.getTime();
+    }
+    if (valueIsKind(val, Kind.Time)) {
+        return val.date.getTime();
+    }
+    if (valueIsKind(val, Kind.Bool)) {
+        return val.value ? 1 : 0;
+    }
+    if (valueIsKind(val, Kind.DateTime)) {
+        return val.date.getTime();
+    }
+    throw new Error(`getHValValue: ${val.getKind()} not supported`);
+};
+export 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' };
+};
+/**
+ * A component that renders a chart containing multiple series
+ * of different kinds, taking all the data and configuration from an HGrid.
+ */
+export const HGridChart = memo(function HGridChartComponent({ className, data, timeRange, timeInterval = calculateDefaultTimeInterval(timeRange), unitPlacement = UnitPlacement.axis, legendPlacement = LegendPlacement.right, translateLabel = undefined, DOMtargetId, }) {
+    const theme = useTheme();
+    const { barSeriesData, stackedBarSeriesData, lineSeriesData, rangesData } = useMemo(() => {
+        if (data === undefined) {
+            return {
+                barSeriesData: [],
+                stackedBarSeriesData: [],
+                lineSeriesData: [],
+                rangesData: [],
+            };
+        }
+        const gridMetadata = data.meta;
+        const { barSeries, stackedBarSeries, lineSeries } = 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) => {
+                    getBarSeriesRowData(row, data.getColumn(colName)?.meta ?? HDict.make(), colName, stackedBarSeriesData);
+                });
+            }
+            if (barSeries.size > 0) {
+                barSeries.forEach((colName) => {
+                    getBarSeriesRowData(row, data.getColumn(colName)?.meta ?? HDict.make(), colName, barSeriesData);
+                });
+            }
+            if (lineSeries.size > 0) {
+                lineSeries.forEach((lineSeriesColName) => {
+                    addLineSeriesRowData(row, data.getColumn(lineSeriesColName)?.meta ??
+                        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 = useScreenSize();
+    const effectiveLegendPlacement = useMemo(() => {
+        const MIN_WIDTH = 1024;
+        if (screenSize.width >= MIN_WIDTH) {
+            return legendPlacement;
+        }
+        switch (legendPlacement) {
+            case LegendPlacement.left:
+                return LegendPlacement.top;
+            case LegendPlacement.right:
+                return LegendPlacement.bottom;
+        }
+        return legendPlacement;
+    }, [legendPlacement, screenSize.width]);
+    return (React.createElement("div", { className: className },
+        React.createElement(Chart, { DOMtargetId: DOMtargetId, cursor: true, legendPlacement: effectiveLegendPlacement, unitPlacement: unitPlacement, numberFormat: { maximumFractionDigits: 0 }, barSeriesData: barSeriesData, rangesData: rangesData, translateLabel: colNameToDisProvider(data ?? 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,
+            } })));
+});
+export default HGridChart;
+//# sourceMappingURL=HGridChart.js.map

package/dist_es/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_es/react/components/charts/line-bar/ZincGridChart.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { HGridChartProps } from './HGridChart';
+export declare type ZincGridChartProps = Omit<HGridChartProps, 'data'> & {
+    data: string;
+};
+/**
+ * This component wraps the HGridChart component and allows using Zinc
+ * data instead of an HGrid. This should help using the component inside,
+ * for example, the Graphic Builder, where finstack returns an HaystackGrid
+ * instead of haystack-core types.
+ */
+export declare const ZincGridChart: React.FC<ZincGridChartProps>;

package/dist_es/react/components/charts/line-bar/ZincGridChart.js

@@ -0,0 +1,17 @@
+import { Kind, valueIsKind, ZincReader } from 'haystack-core';
+import React from 'react';
+import HGridChart from './HGridChart';
+/**
+ * This component wraps the HGridChart component and allows using Zinc
+ * data instead of an HGrid. This should help using the component inside,
+ * for example, the Graphic Builder, where finstack returns an HaystackGrid
+ * instead of haystack-core types.
+ */
+export const ZincGridChart = ({ data, ...props }) => {
+    const parsedData = ZincReader.readValue(data);
+    if (valueIsKind(parsedData, Kind.Grid)) {
+        return React.createElement(HGridChart, { data: parsedData, ...props });
+    }
+    throw new Error('Invalid Zinc data, could not parse a Grid');
+};
+//# sourceMappingURL=ZincGridChart.js.map

package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZincGridChart.js","sourceRoot":"","sources":["../../../../../src/react/components/charts/line-bar/ZincGridChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAA+B,MAAM,cAAc,CAAA;AAM1D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC3D,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,EAAE;IACJ,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAC7C,IAAI,WAAW,CAAQ,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;QAC9C,OAAO,oBAAC,UAAU,IAAC,IAAI,EAAE,UAAU,KAAM,KAAK,GAAI,CAAA;KAClD;IACD,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAA;AAC7D,CAAC,CAAA"}

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

@@ -1,12 +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>) => CustomElementConstructor;
+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>) => void;
+export declare const registerReactWebComponent: <T extends object>(webComponentName: string, ReactComponent: React.FC<T>, options?: CustomElementOptions) => void;
+export {};

package/dist_es/react/components/makeCustomElement.js

@@ -13,7 +13,7 @@ const defaultTheme = GenerateTheme().light;
 /**
  * Generate a custom element constructor that wraps the given react component.
  */
-export const makeCustomElement = (Component) => {
+export const makeCustomElement = (Component, options) => {
     return class extends HTMLElement {
         static get observedAttributes() {
             return ['props'];
@@ -26,9 +26,17 @@ export const makeCustomElement = (Component) => {
             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;
+            return this._appStore ?? {};
         }
         set appStore(value) {
             this._appStore = value;
@@ -72,7 +80,10 @@ export const makeCustomElement = (Component) => {
             super();
             const mountPoint = document.createElement('div');
             mountPoint.setAttribute('style', 'display: contents;');
-            this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
+            const base = options?.useShadowDom
+                ? this.attachShadow({ mode: 'open' })
+                : this;
+            base.appendChild(mountPoint);
             this.root = createRoot(mountPoint);
             this.jss = create({
                 insertionPoint: mountPoint,
@@ -88,15 +99,12 @@ export const makeCustomElement = (Component) => {
             this.root.unmount();
         }
         render() {
-            if (this.client) {
-                this.root.render(React.createElement(AppRootStoreContext.Provider, { value: {} },
-                    React.createElement(AppStoreContext.Provider, { value: {} },
-                        React.createElement(ClientContext.Provider, { value: this.client },
-                            React.createElement(ThemeProvider, { theme: this.theme },
-                                React.createElement(I18NContext.Provider, { value: this.i18n },
-                                    React.createElement(JssProvider, { jss: this.jss },
-                                        React.createElement(Component, { ...this.props }))))))));
-            }
+            const ThemedComponent = (React.createElement(ThemeProvider, { theme: this.theme },
+                React.createElement(I18NContext.Provider, { value: this.i18n },
+                    React.createElement(JssProvider, { jss: this.jss },
+                        React.createElement(Component, { ...this.props })))));
+            this.root.render(React.createElement(AppRootStoreContext.Provider, { value: this.appRootStore ?? null },
+                React.createElement(AppStoreContext.Provider, { value: this.appStore }, this.client ? (React.createElement(ClientContext.Provider, { value: this.client }, ThemedComponent)) : (ThemedComponent))));
         }
     };
 };
@@ -106,13 +114,13 @@ export const makeCustomElement = (Component) => {
  * @param ReactComponent the React component to wrap
  * @returns
  */
-export const registerReactWebComponent = (webComponentName, ReactComponent) => {
+export 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 = makeCustomElement(ReactComponent);
+    const Element = makeCustomElement(ReactComponent, options);
     try {
         // Define web component
         customElements.define(webComponentName, Element);

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

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

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

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

package/dist_es/react/hooks/useScreenSize.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2025, J2 Innovations. All Rights Reserved
+ */
+import { useEffect, useState } from 'react';
+/**
+ * Observe screen size.
+ */
+const useScreenSize = () => {
+    const [screenSize, setScreenSize] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            setScreenSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        // Clean up the event listener when the component unmounts
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return screenSize;
+};
+export default useScreenSize;
+//# sourceMappingURL=useScreenSize.js.map

package/dist_es/react/hooks/useScreenSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenSize.js","sourceRoot":"","sources":["../../../src/react/hooks/useScreenSize.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C;;GAEG;AACH,MAAM,aAAa,GAAG,GAAG,EAAE;IAC1B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC;QAC5C,KAAK,EAAE,MAAM,CAAC,UAAU;QACxB,MAAM,EAAE,MAAM,CAAC,WAAW;KAC1B,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,YAAY,GAAG,GAAG,EAAE;YACzB,aAAa,CAAC;gBACb,KAAK,EAAE,MAAM,CAAC,UAAU;gBACxB,MAAM,EAAE,MAAM,CAAC,WAAW;aAC1B,CAAC,CAAA;QACH,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAE/C,0DAA0D;QAC1D,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACnD,CAAC,CAAA;IACF,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,UAAU,CAAA;AAClB,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@j2inn/fin5-ui-utils",
-	"version": "5.2.2-beta.0",
+	"version": "5.2.2-beta.10",
 	"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",
@@ -32,7 +32,7 @@
 		"qrious": "^4.0.2"
 	},
 	"peerDependencies": {
-		"@amcharts/amcharts5": "^5.4.4",
+		"@amcharts/amcharts5": "^5.9.13",
 		"@j2inn/app": "^5.0.0",
 		"@j2inn/app-react": "^1.0.1",
 		"@j2inn/i18n": "^1.0.0",
@@ -43,6 +43,7 @@
 		"haystack-nclient": "^4.0.0",
 		"haystack-react": "^4.0.0",
 		"haystack-units": "^2.0.0",
+		"lodash": "^4.17.21",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-jss": "^10.9.2",
@@ -68,6 +69,7 @@
 		"@babel/runtime": "^7.19.0",
 		"@types/jest": "^29.0.3",
 		"@types/js-yaml": "^4.0.5",
+		"@types/lodash": "^4.17.19",
 		"@types/node": "^18.7.18",
 		"@types/react": "^18.0.20",
 		"@types/react-dom": "^18.0.20",