@headless-adminapp/fluent 1.0.3 → 1.1.0

package/Insights/WidgetChartContainer.js

@@ -1,56 +1,80 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WidgetChartContainer = void 0;
+exports.WidgetChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const BodyLoading_1 = require("../components/BodyLoading");
-const AreaChart_1 = require("./charts/AreaChart");
-const BarChart_1 = require("./charts/BarChart");
-const ComposedChart_1 = require("./charts/ComposedChart");
-const GaugeChart_1 = require("./charts/GaugeChart");
-const LineChart_1 = require("./charts/LineChart");
-const OhlcChart_1 = require("./charts/OhlcChart");
-const PieChart_1 = require("./charts/PieChart");
-const RadarChart_1 = require("./charts/RadarChart");
-const ScatterChart_1 = require("./charts/ScatterChart");
-const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
+const ComponentErrorBoundary_1 = require("../components/ComponentErrorBoundary");
+const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
-function getChartComponent(type
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-) {
+const AreaChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/AreaChart'))));
+const BarChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/BarChart'))));
+const ComposedChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/ComposedChart'))));
+const FunnelChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/FunnelChart'))));
+const GaugeChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/GaugeChart'))));
+const LineChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/LineChart'))));
+const OhlcChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/OhlcChart'))));
+const PieChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/PieChart'))));
+const RadarChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/RadarChart'))));
+const ScatterChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./charts/ScatterChart'))));
+function getChartComponent(chart) {
+    const type = chart.type;
     switch (type) {
         case 'line':
-            return LineChart_1.LineChart;
+            return LineChart;
         case 'area':
-            return AreaChart_1.AreaChart;
+            return AreaChart;
         case 'bar':
-            return BarChart_1.BarChart;
+            return BarChart;
         case 'composed':
-            return ComposedChart_1.ComposedChart;
+            return ComposedChart;
         case 'scatter':
-            return ScatterChart_1.ScatterChart;
+            return ScatterChart;
         case 'pie':
-            return PieChart_1.PieChart;
+            return PieChart;
         case 'radar':
-            return RadarChart_1.RadarChart;
+            return RadarChart;
         case 'gauge':
-            return GaugeChart_1.GaugeChart;
+            return GaugeChart;
         case 'ohlc':
-            return OhlcChart_1.OhlcChart;
+            return OhlcChart;
+        case 'funnel':
+            return FunnelChart;
+        default:
+            throw new Error(`Unsupported chart type: ${type}`);
     }
 }
-const WidgetChartContainer = ({ content, }) => {
-    const { transformedCommands, dataset, isPending, isFetching, widget } = (0, useWidgetDetail_1.useWidgetDetail)(content);
-    const info = content.chart;
-    const type = info.chart.type;
-    const ChartComponent = getChartComponent(type);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flex: 1,
-            background: react_components_1.tokens.colorNeutralBackground1,
-            boxShadow: react_components_1.tokens.shadow2,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
-            flexDirection: 'column',
-        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: widget.title, commands: transformedCommands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative' }, children: [!isPending && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(ChartComponent, { dataset: dataset, chartInfo: info.chart }) })), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching })] })] }));
+const WidgetChart = (props) => {
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: props.title, commands: props.commands }), (0, jsx_runtime_1.jsx)(WidgetChartBody, { dataset: props.dataset, chartInfo: props.chartInfo, isFetching: props.isFetching, isPending: props.isPending })] }));
+};
+exports.WidgetChart = WidgetChart;
+const WidgetChartBody = ({ isFetching, isPending, chartInfo, dataset, }) => {
+    const ChartComponent = getChartComponent(chartInfo);
+    if (!ChartComponent) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: [!isPending && ((0, jsx_runtime_1.jsx)(ComponentErrorBoundary_1.ComponentErrorBoundary, { children: (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0 }, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching }), children: (0, jsx_runtime_1.jsx)(ChartComponent, { dataset: dataset, chartInfo: chartInfo }) }) }) })), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching })] }));
 };
-exports.WidgetChartContainer = WidgetChartContainer;

package/Insights/WidgetDataGridContainer.d.ts

@@ -1,4 +1,11 @@
-import { DataGridWidgetExperience } from '@headless-adminapp/core/experience/insights';
-export declare function WidgetDataGridContainer({ content, }: Readonly<{
-    content: DataGridWidgetExperience;
-}>): import("react/jsx-runtime").JSX.Element;
+import { Filter } from '@headless-adminapp/core/transport';
+interface WidgetDataGridContainerProps {
+    title: string;
+    logicalName: string;
+    maxRecords?: number;
+    filter?: Filter;
+    commands?: any[][];
+}
+/*** @deprecated Need refactoring */
+export declare function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, }: Readonly<WidgetDataGridContainerProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/Insights/WidgetDataGridContainer.js

@@ -8,13 +8,10 @@ const hooks_1 = require("@headless-adminapp/app/command/hooks");
 const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProvider");
 const hooks_2 = require("@headless-adminapp/app/datagrid/hooks");
 const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
-const mutable_1 = require("@headless-adminapp/app/mutable");
-const widget_1 = require("@headless-adminapp/app/widget");
-const react_1 = require("react");
 const DataGrid_1 = require("../DataGrid");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
-function WidgetDataGridContainer({ content, }) {
-    const logicalName = content.logicalName;
+/*** @deprecated Need refactoring */
+function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, }) {
     const schema = (0, hooks_3.useSchema)(logicalName);
     const { view } = (0, hooks_3.useExperienceView)(logicalName);
     if (!view) {
@@ -31,42 +28,24 @@ function WidgetDataGridContainer({ content, }) {
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             // padding: tokens.spacingHorizontalM,
             flexDirection: 'column',
-        }, children: (0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: [], allowViewSelection: false, maxRecords: content.maxRecords, extraFilter: content.filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { content: content }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: [], allowViewSelection: false, maxRecords: maxRecords, extraFilter: filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { title: title, commands: commands }) }) }));
 }
-const FormSubgridContainer = ({ content, }) => {
+const FormSubgridContainer = ({ title, commands, }) => {
     const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
     const primaryControl = (0, hooks_2.useGridControlContext)();
-    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
-    const widgetSetValue = (0, mutable_1.useContextSetValue)(widget_1.WidgetContext);
-    const updateStateValue = (0, react_1.useCallback)(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (value) => {
-        widgetSetValue((state) => ({
-            ...state,
-            data: { ...state.data, ...value },
-        }));
-    }, [widgetSetValue]);
-    const transformedCommands = (0, command_1.useCommands)([content.commands], {
+    const transformedCommands = (0, command_1.useCommands)(commands, {
         ...baseCommandHandleContext,
-        primaryControl: {
-            ...primaryControl,
-            updateStateValue,
-        },
+        primaryControl,
     });
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
-            // gap: 8,
-            // backgroundColor: tokens.colorNeutralBackground2,
-            // padding: 2,
             overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: widgetState.widget.title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    // gap: 12,
+        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flex: 1,
                     display: 'flex',
                     flexDirection: 'column',
-                    // overflow: 'hidden',
                 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                         flex: 1,
                         display: 'flex',

package/Insights/WidgetSection.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const WidgetSection: FC<PropsWithChildren>;

package/Insights/WidgetSection.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const WidgetSection = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flex: 1,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: 'none',
+            borderRadius: react_components_1.tokens.borderRadiusXLarge,
+            flexDirection: 'column',
+        }, children: children }));
+};
+exports.WidgetSection = WidgetSection;

package/Insights/WidgetTableContainer.d.ts

@@ -1,7 +1,14 @@
-import { TableWidgetExperience } from '@headless-adminapp/core/experience/insights';
+import { CommandItemState } from '@headless-adminapp/app/command';
+import { Attribute } from '@headless-adminapp/core';
 import { FC } from 'react';
 interface WidgetTableContainerProps {
-    content: TableWidgetExperience;
+    title: string;
+    columns: string[];
+    attributes: Record<string, Attribute>;
+    isPending?: boolean;
+    isFetching?: boolean;
+    commands?: CommandItemState[][];
+    data: any[];
 }
 export declare const WidgetTableContainer: FC<WidgetTableContainerProps>;
 export {};

package/Insights/WidgetTableContainer.js

@@ -5,21 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/utils");
 const BodyLoading_1 = require("../components/BodyLoading");
-const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
+const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
-const WidgetTableContainer = ({ content, }) => {
-    const { transformedCommands, dataset, isPending, isFetching, widget } = (0, useWidgetDetail_1.useWidgetDetail)(content);
-    const info = content.table;
-    const data = dataset[0];
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flex: 1,
-            background: react_components_1.tokens.colorNeutralBackground1,
-            boxShadow: react_components_1.tokens.shadow2,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
-            flexDirection: 'column',
-            overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: widget.title, commands: transformedCommands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
+const WidgetTableContainer = ({ title, columns, attributes, isPending, isFetching, commands, data, }) => {
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: commands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
                             borderCollapse: 'collapse',
                             width: '100%',
                         }, children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
@@ -31,8 +20,8 @@ const WidgetTableContainer = ({ content, }) => {
                                         position: 'sticky',
                                         top: 0,
                                         minWidth: 'calc(100% - 16px)',
-                                    }, children: info.columns.map((column, index) => {
-                                        const attribute = info.attributes[column];
+                                    }, children: columns.map((column, index) => {
+                                        const attribute = attributes[column];
                                         return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
                                                 minWidth: 32,
                                                 flexShrink: 0,
@@ -41,8 +30,8 @@ const WidgetTableContainer = ({ content, }) => {
                                                 background: react_components_1.tokens.colorNeutralBackground3,
                                                 borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
                                             }, children: attribute.label }, column + String(index)));
-                                    }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: data.map((row, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { children: info.columns.map((column) => {
-                                        const attribute = info.attributes[column];
+                                    }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: data.map((row, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { children: columns.map((column) => {
+                                        const attribute = attributes[column];
                                         const value = row[column];
                                         const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value) ?? '';
                                         switch (attribute?.type) {

package/Insights/WidgetTileContainer.d.ts

@@ -1,7 +1,5 @@
-import { TileWidgetExperience } from '@headless-adminapp/core/experience/insights';
 import { FC } from 'react';
 interface WidgetTileContainerProps {
-    content: TileWidgetExperience;
 }
 export declare const WidgetTileContainer: FC<WidgetTileContainerProps>;
 export {};

package/Insights/WidgetTileContainer.js

@@ -3,22 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetTileContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const useWidgetDetail_1 = require("./hooks/useWidgetDetail");
-const WidgetTitleBar_1 = require("./WidgetTitleBar");
-const WidgetTileContainer = ({ content, }) => {
-    const { transformedCommands, widget } = (0, useWidgetDetail_1.useWidgetDetail)(content);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+const WidgetTileContainer = ({}) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,
             background: react_components_1.tokens.colorNeutralBackground1,
             boxShadow: react_components_1.tokens.shadow2,
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             flexDirection: 'column',
-        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: widget.title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                        flex: 1,
-                        alignItems: 'center',
-                        display: 'flex',
-                        paddingInline: 16,
-                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: "Not supported yet" }) }) })] }));
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    flex: 1,
+                    alignItems: 'center',
+                    display: 'flex',
+                    paddingInline: 16,
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: "Not supported yet" }) }) }) }));
 };
 exports.WidgetTileContainer = WidgetTileContainer;

package/Insights/WidgetTitleBar.d.ts

@@ -1,7 +1,7 @@
 import { CommandItemState } from '@headless-adminapp/app/command';
 interface WidgetTitleBarProps {
     title: string;
-    commands: CommandItemState[][];
+    commands?: CommandItemState[][];
 }
 export declare function WidgetTitleBar({ title, commands }: WidgetTitleBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/Insights/WidgetTitleBar.js

@@ -17,5 +17,5 @@ function WidgetTitleBar({ title, commands }) {
                     paddingBlock: 8,
                     height: 40,
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), commands?.[0]?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { marginRight: -20 }, children: (0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), !!commands && commands[0]?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { marginRight: -20 }, children: (0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
 }

package/Insights/Widgets.d.ts

@@ -1,4 +1,4 @@
-import { InsightExpereince } from '@headless-adminapp/core/experience/insights';
+import { InsightConfig } from '@headless-adminapp/core/experience/insights';
 export declare function Widgets({ widgets, }: Readonly<{
-    widgets: InsightExpereince['widgets'];
+    widgets: InsightConfig['widgets'];
 }>): import("react/jsx-runtime").JSX.Element;

package/Insights/Widgets.js

@@ -3,55 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Widgets = Widgets;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("@headless-adminapp/app/hooks");
-const insights_1 = require("@headless-adminapp/app/insights");
-const mutable_1 = require("@headless-adminapp/app/mutable");
-const widget_1 = require("@headless-adminapp/app/widget");
-const react_1 = require("react");
 const Grid_1 = require("./Grid");
-const WidgetChartContainer_1 = require("./WidgetChartContainer");
-const WidgetDataGridContainer_1 = require("./WidgetDataGridContainer");
-const WidgetTableContainer_1 = require("./WidgetTableContainer");
-const WidgetTileContainer_1 = require("./WidgetTileContainer");
-const WidgetProvider = ({ children, widget, }) => {
-    const contextValue = (0, mutable_1.useCreateContextStore)({
-        widget,
-        data: widget.defaultData,
-    });
-    (0, react_1.useEffect)(() => {
-        contextValue.setValue({
-            widget,
-            data: widget.defaultData,
-        });
-    }, [contextValue, widget]);
-    return ((0, jsx_runtime_1.jsx)(widget_1.WidgetContext.Provider, { value: contextValue, children: children }));
-};
 function Widgets({ widgets, }) {
-    const isMobile = (0, hooks_1.useIsMobile)();
-    return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGrid, { children: widgets.map((widget, index) => {
-            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, widget.title + String(index)));
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGrid, { children: (0, jsx_runtime_1.jsx)(WidgetRenderer, { items: widgets }) }));
 }
-function WidgetItem() {
-    const insightState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
-    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
-    const widget = widgetState.widget;
-    const content = typeof widget.content === 'function'
-        ? widget.content(insightState, widgetState)
-        : widget.content;
-    if (content.type === 'tile') {
-        return (0, jsx_runtime_1.jsx)(WidgetTileContainer_1.WidgetTileContainer, { content: content });
-    }
-    if (content.type === 'chart') {
-        return (0, jsx_runtime_1.jsx)(WidgetChartContainer_1.WidgetChartContainer, { content: content });
-    }
-    if (content.type === 'grid') {
-        return (0, jsx_runtime_1.jsx)(WidgetDataGridContainer_1.WidgetDataGridContainer, { content: content });
-    }
-    if (content.type === 'table') {
-        return (0, jsx_runtime_1.jsx)(WidgetTableContainer_1.WidgetTableContainer, { content: content });
-    }
-    if (content.type === 'custom') {
-        return (0, jsx_runtime_1.jsx)(content.Component, {});
-    }
-    return null;
+function WidgetRenderer({ items }) {
+    const isMobile = (0, hooks_1.useIsMobile)();
+    return items.map((widget, index) => {
+        if (widget.type === 'space') {
+            if (isMobile) {
+                return null;
+            }
+            return (0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { column: widget.columns }, String(index));
+        }
+        if (widget.type === 'group') {
+            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridGroup, { column: isMobile ? 12 : widget.columns, row: widget.rows, children: (0, jsx_runtime_1.jsx)(WidgetRenderer, { items: widget.items }) }, String(index)));
+        }
+        return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: (0, jsx_runtime_1.jsx)(widget.Component, { ...widget.props }) }, String(index)));
+    });
 }

package/Insights/charts/AreaChart.d.ts

@@ -3,3 +3,4 @@ export declare function AreaChart({ dataset, chartInfo, }: {
     dataset: any[];
     chartInfo: AreaChartInfo;
 }): import("react/jsx-runtime").JSX.Element;
+export default AreaChart;

package/Insights/charts/AreaChart.js

@@ -3,18 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AreaChart = AreaChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const recharts_1 = require("recharts");
 const CustomTooltipContent_1 = require("./CustomTooltipContent");
 const formatters_1 = require("./formatters");
 const renderers_1 = require("./renderers");
 function AreaChart({ dataset, chartInfo, }) {
+    const id = (0, react_1.useId)();
     const xAxis = chartInfo.xAxis;
     const yAxis = chartInfo.yAxis;
     const areas = chartInfo.areas;
     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.AreaChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderAreas)(areas, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderAreas)(areas, id), (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 })) })] }) }));
 }
+exports.default = AreaChart;

package/Insights/charts/BarChart.d.ts

@@ -3,3 +3,4 @@ export declare function BarChart({ dataset, chartInfo, }: Readonly<{
     dataset: any[];
     chartInfo: BarChartInfo;
 }>): import("react/jsx-runtime").JSX.Element;
+export default BarChart;

package/Insights/charts/BarChart.js

@@ -14,7 +14,8 @@ function BarChart({ dataset, chartInfo, }) {
     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.BarChart, { data: dataset[0], stackOffset: chartInfo.stackOffset, children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderBars)(bars, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
-                        stroke: react_components_1.tokens.colorNeutralBackground6,
-                        opacity: 0.5,
+                        fill: react_components_1.tokens.colorNeutralBackground6,
+                        opacity: 0.2,
                     }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
 }
+exports.default = BarChart;

package/Insights/charts/ComposedChart.d.ts

@@ -3,3 +3,4 @@ export declare function ComposedChart({ dataset, chartInfo, }: {
     dataset: any[];
     chartInfo: ComposedChartInfo;
 }): import("react/jsx-runtime").JSX.Element;
+export default ComposedChart;

package/Insights/charts/ComposedChart.js

@@ -3,17 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComposedChart = ComposedChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const recharts_1 = require("recharts");
 const CustomTooltipContent_1 = require("./CustomTooltipContent");
 const formatters_1 = require("./formatters");
 const renderers_1 = require("./renderers");
 function ComposedChart({ dataset, chartInfo, }) {
+    const id = (0, react_1.useId)();
     const xAxis = chartInfo.xAxis;
     const yAxis = chartInfo.yAxis;
     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 ?? [], dataset), (0, renderers_1.renderAreas)(chartInfo.areas ?? [], dataset), (0, renderers_1.renderBars)(chartInfo.bars ?? [], dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    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: {
                         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 })) })] }) }));
 }
+exports.default = ComposedChart;

package/Insights/charts/FunnelChart.d.ts

@@ -0,0 +1,6 @@
+import { FunnelChartInfo } from '@headless-adminapp/core/experience/insights';
+export declare function FunnelChart({ dataset, chartInfo, }: Readonly<{
+    dataset: any[];
+    chartInfo: FunnelChartInfo;
+}>): import("react/jsx-runtime").JSX.Element;
+export default FunnelChart;

package/Insights/charts/FunnelChart.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FunnelChart = FunnelChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const recharts_1 = require("recharts");
+const constants_1 = require("./constants");
+const formatters_1 = require("./formatters");
+const FunnelCustomTooltipContent_1 = require("./FunnelCustomTooltipContent");
+function FunnelChart({ dataset, chartInfo, }) {
+    const item = chartInfo;
+    const nameFormatter = (0, formatters_1.createLongAxisFormatter)({
+        type: 'category',
+        options: item.nameTick?.options,
+    });
+    const nameFormatterRef = (0, react_1.useRef)(nameFormatter);
+    nameFormatterRef.current = nameFormatter;
+    const data = dataset[0];
+    const valueFormatter = (0, formatters_1.createLongAxisFormatter)(item.dataTick);
+    const transformedData = (0, react_1.useMemo)(() => {
+        if (!data?.length) {
+            return [];
+        }
+        let total = data[0][item.dataKey] ?? 0;
+        return data.map((dataItem, index) => {
+            const perc = total ? dataItem[item.dataKey] / total : 0;
+            const label = nameFormatterRef.current(dataItem[item.nameKey]);
+            const labelWithPerc = `${label} (${(perc * 100).toFixed(0)}%)`;
+            return {
+                value: dataItem[item.dataKey],
+                label: label,
+                labelWithPerc,
+                name: dataItem[item.nameKey],
+                fill: item.colorKey && dataItem[item.colorKey]
+                    ? dataItem[item.colorKey]
+                    : (item.colors ?? constants_1.defaultColors)[index % (item.colors ?? constants_1.defaultColors).length],
+                perc,
+            };
+        });
+    }, [data, item]);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.FunnelChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: ({ active, payload }) => {
+                        return ((0, jsx_runtime_1.jsx)(FunnelCustomTooltipContent_1.FunnelCustomTooltipContent, { valueFormatter: valueFormatter, active: active, payload: payload }));
+                    } }), (0, jsx_runtime_1.jsx)(recharts_1.Funnel, { dataKey: "value", data: transformedData, isAnimationActive: false, lastShapeType: "rectangle", stroke: "none", children: (0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: "inside", fill: "#000", stroke: "none", dataKey: "labelWithPerc", style: {
+                            fontSize: react_components_1.tokens.fontSizeBase100,
+                            fontFamily: react_components_1.tokens.fontFamilyBase,
+                            fill: react_components_1.tokens.colorNeutralForeground1,
+                        }, content: ({ content: _, ...props }) => (0, jsx_runtime_1.jsx)(recharts_1.Label, { ...props }) }) })] }) }));
+}
+exports.default = FunnelChart;

package/Insights/charts/FunnelCustomTooltipContent.d.ts

@@ -0,0 +1,5 @@
+export declare const FunnelCustomTooltipContent: ({ active, payload, valueFormatter, }: {
+    active?: boolean;
+    payload?: any[];
+    valueFormatter: (value: unknown) => string;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/Insights/charts/FunnelCustomTooltipContent.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FunnelCustomTooltipContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const formatters_1 = require("./formatters");
+const FunnelCustomTooltipContent = ({ active, payload, valueFormatter, }) => {
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const [firstPayload] = payload;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: firstPayload.label }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                width: 8,
+                                height: 8,
+                                background: firstPayload.payload.fill,
+                                borderRadius: 4,
+                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: valueFormatter(firstPayload.value) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [(0, formatters_1.formatNumber)(firstPayload.payload.perc * 100, { maxDigit: 2 }), "%"] })] }) })] }));
+};
+exports.FunnelCustomTooltipContent = FunnelCustomTooltipContent;

package/Insights/charts/GaugeChart.d.ts

@@ -3,3 +3,4 @@ export declare function GaugeChart(_props: {
     dataset: any[];
     chartInfo: GaugeChartInfo;
 }): import("react/jsx-runtime").JSX.Element;
+export default GaugeChart;

package/Insights/charts/GaugeChart.js

@@ -6,3 +6,4 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 function GaugeChart(_props) {
     return (0, jsx_runtime_1.jsx)("div", { children: "Not supported yet" });
 }
+exports.default = GaugeChart;