@headless-adminapp/fluent 1.4.0 → 1.4.3

package/Insights/charts/ComposedChart.js

@@ -12,11 +12,29 @@ function ComposedChart({ dataset, chartInfo, }) {
     const id = (0, react_1.useId)();
     const xAxis = chartInfo.xAxis;
     const yAxis = chartInfo.yAxis;
+    const rightYAxis = chartInfo.rightYAxis;
     const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(xAxis.tick);
     const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(yAxis.tick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderXAxis)(xAxis, !!chartInfo.bars?.length), (0, renderers_1.renderLines)(chartInfo.lines ?? []), (0, renderers_1.renderAreas)(chartInfo.areas ?? [], id), (0, renderers_1.renderBars)(chartInfo.bars ?? [], dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    const rightYAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(rightYAxis?.tick ?? yAxis.tick);
+    const yAxisIdMapping = (0, react_1.useMemo)(() => {
+        const mapping = {};
+        chartInfo.bars?.forEach((bar) => {
+            mapping[bar.dataKey] = bar.yAxisId ?? 'left';
+        });
+        chartInfo.areas?.forEach((area) => {
+            mapping[area.dataKey] = area.yAxisId ?? 'left';
+        });
+        chartInfo.lines?.forEach((line) => {
+            mapping[line.dataKey] = line.yAxisId ?? 'left';
+        });
+        return mapping;
+    }, [chartInfo]);
+    const yAxisIdResolver = (0, react_1.useCallback)((dataKey) => {
+        return yAxisIdMapping[dataKey] ?? 'left';
+    }, [yAxisIdMapping]);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), !!rightYAxis && (0, renderers_1.renderYAxis)(rightYAxis, 'right'), (0, renderers_1.renderXAxis)(xAxis, !!chartInfo.bars?.length), (0, renderers_1.renderLines)(chartInfo.lines ?? []), (0, renderers_1.renderAreas)(chartInfo.areas ?? [], id), (0, renderers_1.renderBars)(chartInfo.bars ?? [], dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
-                    }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
+                    }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, yAxisIdResolver: yAxisIdResolver, rightYAxisFormatter: rightYAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
 }
 exports.default = ComposedChart;

package/Insights/charts/CustomTooltipContent.d.ts

@@ -1,7 +1,9 @@
-export declare const CustomTooltipContent: ({ active, payload, label, xAxisFormatter, yAxisFormatter, }: {
+export declare const CustomTooltipContent: ({ active, payload, label, xAxisFormatter, yAxisFormatter, rightYAxisFormatter, yAxisIdResolver, }: {
     active?: boolean;
     payload?: any[];
     label: string;
     xAxisFormatter: (value: unknown) => string;
     yAxisFormatter: (value: unknown) => string;
+    rightYAxisFormatter?: (value: unknown) => string;
+    yAxisIdResolver?: (dataKey: string) => "left" | "right";
 }) => import("react/jsx-runtime").JSX.Element | null;

package/Insights/charts/CustomTooltipContent.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomTooltipContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFormatter, }) => {
+const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFormatter, rightYAxisFormatter, yAxisIdResolver, }) => {
     if (!active || !payload?.length) {
         return null;
     }
@@ -20,6 +20,8 @@ const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFor
                                 height: 8,
                                 background: item.color,
                                 borderRadius: 4,
-                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: item.name }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: yAxisFormatter(item.value) })] }, item.name + String(index)))) })] }));
+                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: item.name }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: yAxisIdResolver?.(item.dataKey) === 'right'
+                                ? (rightYAxisFormatter ?? yAxisFormatter)(item.value)
+                                : yAxisFormatter(item.value) })] }, item.name + String(index)))) })] }));
 };
 exports.CustomTooltipContent = CustomTooltipContent;

package/Insights/charts/renderers.d.ts

@@ -1,7 +1,7 @@
 import { AreaInfo, BarInfo, LineInfo, XAxis, YAxis } from '@headless-adminapp/core/experience/insights';
 import { XAxisProps } from 'recharts';
 export declare function renderXAxis(axis: XAxis, forceCategory?: boolean, padding?: XAxisProps['padding']): import("react/jsx-runtime").JSX.Element;
-export declare function renderYAxis(axis: YAxis): import("react/jsx-runtime").JSX.Element;
+export declare function renderYAxis(axis: YAxis, axisId?: 'left' | 'right'): import("react/jsx-runtime").JSX.Element;
 export declare function renderGrid(): import("react/jsx-runtime").JSX.Element;
 export declare function renderLine(line: LineInfo): import("react/jsx-runtime").JSX.Element;
 export declare function renderLines(lines: LineInfo[]): import("react/jsx-runtime").JSX.Element[];

package/Insights/charts/renderers.js

@@ -25,9 +25,9 @@ function renderXAxis(axis, forceCategory = false, padding = 'gap') {
             opacity: 0.5,
         }, scale: !forceCategory && axis.tick.type === 'time' ? 'time' : 'auto', type: forceCategory || axis.tick.type === 'category' ? 'category' : 'number', domain: axis.domain, height: 16 }));
 }
-function renderYAxis(axis) {
+function renderYAxis(axis, axisId = 'left') {
     const yAxisFormatter = (0, formatters_1.createAxisFormatter)(axis.tick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.YAxis, { yAxisId: "left", dataKey: axis.dataKey, tickFormatter: yAxisFormatter, name: axis.name, tickLine: false, fontSize: react_components_1.tokens.fontSizeBase100, axisLine: false, tickMargin: 0, minTickGap: 0, accentHeight: 0, width: 40, scale: "auto", type: "number", domain: axis.domain, tick: {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.YAxis, { yAxisId: axisId, dataKey: axis.dataKey, orientation: axisId === 'right' ? 'right' : 'left', tickFormatter: yAxisFormatter, name: axis.name, tickLine: false, fontSize: react_components_1.tokens.fontSizeBase100, axisLine: false, tickMargin: 0, minTickGap: 0, accentHeight: 0, width: 40, scale: "auto", type: "number", domain: axis.domain, tick: {
             fill: react_components_1.tokens.colorNeutralForeground1,
             opacity: 0.5,
         } }));
@@ -37,7 +37,7 @@ function renderGrid() {
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderLine(line) {
-    return ((0, jsx_runtime_1.jsx)(recharts_1.Line, { yAxisId: 'left', type: line.curveType, dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Line, { yAxisId: line.yAxisId ?? 'left', type: line.curveType, dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
             stroke: line.color,
         } }, line.dataKey));
 }
@@ -47,7 +47,7 @@ function renderLines(lines) {
 }
 // eslint-disable-next-line unused-imports/no-unused-vars
 function renderArea(area, chartId) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: chartId + ':' + area.dataKey, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: area.color, stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: area.color, stopOpacity: 0 })] }) }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { yAxisId: 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: chartId + ':' + area.dataKey, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: area.color, stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: area.color, stopOpacity: 0 })] }) }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { yAxisId: area.yAxisId ?? 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, 
                 // fill={area.color}
                 fill: `url(#${chartId}:${area.dataKey})`, strokeWidth: 2, dot: false, activeDot: {
                     stroke: area.color,
@@ -59,7 +59,7 @@ function renderAreas(areas, chartId) {
 }
 // eslint-disable-next-line unused-imports/no-unused-vars
 function renderBar(bar, dataset) {
-    return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { yAxisId: 'left', type: bar.curveType, dataKey: bar.dataKey, name: bar.dataLabel, stroke: bar.color, fill: bar.color, strokeWidth: 1, stackId: bar.stackId, radius: bar.radius, barSize: bar.barSize }, bar.dataKey));
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { yAxisId: bar.yAxisId ?? 'left', type: bar.curveType, dataKey: bar.dataKey, name: bar.dataLabel, stroke: bar.color, fill: bar.color, strokeWidth: 1, stackId: bar.stackId, radius: bar.radius, barSize: bar.barSize }, bar.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderBars(bars, dataset) {

package/PageEntityForm/PageCustomEntityForm.js

@@ -3,15 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageCustomEntityForm = PageCustomEntityForm;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const historystate_1 = require("@headless-adminapp/app/historystate");
 const PageEntityFormProvider_1 = require("@headless-adminapp/app/providers/PageEntityFormProvider");
+const recordset_1 = require("@headless-adminapp/app/recordset");
 const PageEntityFormDesktopContainer_1 = require("./PageEntityFormDesktopContainer");
 const RecordSetNavigatorContainer_1 = require("./RecordSetNavigatorContainer");
 function PageCustomEntityForm({ recordId, commands, form, schema, retriveRecordFn, saveRecordFn, }) {
-    return ((0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, retriveRecordFn: retriveRecordFn, saveRecordFn: saveRecordFn, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                flex: 1,
-                flexDirection: 'row',
-                backgroundColor: react_components_1.tokens.colorNeutralBackground2,
-                overflow: 'hidden',
-            }, children: [(0, jsx_runtime_1.jsx)(RecordSetNavigatorContainer_1.RecordSetNavigatorContainer, {}), (0, jsx_runtime_1.jsx)(PageEntityFormDesktopContainer_1.PageEntityFormDesktopContainer, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-form.' + schema.logicalName, children: (0, jsx_runtime_1.jsx)(recordset_1.RecordSetProvider, { children: (0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, retriveRecordFn: retriveRecordFn, saveRecordFn: saveRecordFn, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'row',
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                        overflow: 'hidden',
+                    }, children: [(0, jsx_runtime_1.jsx)(RecordSetNavigatorContainer_1.RecordSetNavigatorContainer, {}), (0, jsx_runtime_1.jsx)(PageEntityFormDesktopContainer_1.PageEntityFormDesktopContainer, {})] }) }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.0",
+  "version": "1.4.3",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "a064c301b98e340b142e8daeac078b4cdf5ad99a"
+  "gitHead": "5c5739c442d4690430997c7f375fed5966cde046"
 }