@headless-adminapp/fluent 0.0.17-alpha.53 → 0.0.17-alpha.56

package/Insights/WidgetDataGridContainer.js

@@ -1,46 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { useCommands } from '@headless-adminapp/app/command';
-import { useBaseCommandHandlerContext } from '@headless-adminapp/app/command/hooks';
-import { DataGridProvider } from '@headless-adminapp/app/datagrid/DataGridProvider';
-import { useGridControlContext } from '@headless-adminapp/app/datagrid/hooks';
-import { useExperienceView, useSchema, } from '@headless-adminapp/app/metadata/hooks';
-import { useContextSetValue } from '@headless-adminapp/app/mutable';
-import { WidgetContext } from '@headless-adminapp/app/widget';
-import { useCallback } from 'react';
-import { GridTableContainer } from '../DataGrid';
-import { WidgetTitleBar } from './WidgetTitleBar';
-export function WidgetDataGridContainer({ content, }) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetDataGridContainer = WidgetDataGridContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const command_1 = require("@headless-adminapp/app/command");
+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;
-    const schema = useSchema(logicalName);
-    const { view } = useExperienceView(logicalName);
+    const schema = (0, hooks_3.useSchema)(logicalName);
+    const { view } = (0, hooks_3.useExperienceView)(logicalName);
     if (!view) {
-        return _jsx("div", { children: "Loading..." });
+        return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
     if (!schema) {
-        return _jsx("div", { children: "Schema not found" });
+        return (0, jsx_runtime_1.jsx)("div", { children: "Schema not found" });
     }
-    return (_jsx("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,
-            background: tokens.colorNeutralBackground1,
-            boxShadow: tokens.shadow2,
-            borderRadius: tokens.borderRadiusMedium,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
             // padding: tokens.spacingHorizontalM,
             flexDirection: 'column',
-        }, children: _jsx(DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: [], allowViewSelection: false, maxRecords: content.maxRecords, extraFilter: content.filter, children: _jsx(FormSubgridContainer, { content: content }) }) }));
+        }, 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 }) }) }));
 }
 const FormSubgridContainer = ({ content, }) => {
-    const baseCommandHandleContext = useBaseCommandHandlerContext();
-    const primaryControl = useGridControlContext();
-    const widgetSetValue = useContextSetValue(WidgetContext);
-    const updateStateValue = useCallback(
+    const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
+    const primaryControl = (0, hooks_2.useGridControlContext)();
+    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) => (Object.assign(Object.assign({}, state), { data: Object.assign(Object.assign({}, state.data), value) })));
+        widgetSetValue((state) => ({
+            ...state,
+            data: { ...state.data, ...value },
+        }));
     }, [widgetSetValue]);
-    const transformedCommands = useCommands([content.commands], Object.assign(Object.assign({}, baseCommandHandleContext), { primaryControl: Object.assign(Object.assign({}, primaryControl), { updateStateValue }) }));
-    return (_jsxs("div", { style: {
+    const transformedCommands = (0, command_1.useCommands)([content.commands], {
+        ...baseCommandHandleContext,
+        primaryControl: {
+            ...primaryControl,
+            updateStateValue,
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
@@ -48,21 +60,21 @@ const FormSubgridContainer = ({ content, }) => {
             // backgroundColor: tokens.colorNeutralBackground2,
             // padding: 2,
             overflow: 'hidden',
-        }, children: [_jsx(WidgetTitleBar, { title: "Recent transactions", commands: transformedCommands }), _jsx("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: "Recent transactions", commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
                     // gap: 12,
                     flex: 1,
                     display: 'flex',
                     flexDirection: 'column',
                     // overflow: 'hidden',
-                }, children: _jsx("div", { style: {
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                         flex: 1,
                         display: 'flex',
                         flexDirection: 'column',
                         marginTop: 8,
-                    }, children: _jsx("div", { style: {
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                             gap: 16,
                             display: 'flex',
                             flexDirection: 'column',
                             flex: 1,
-                        }, children: _jsx("div", { style: { flex: 1, display: 'flex', minHeight: 300 }, children: _jsx(GridTableContainer, { disableColumnSort: true, disableColumnFilter: true, disableSelection: true, disableContextMenu: true }) }) }) }) })] }));
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', minHeight: 300 }, children: (0, jsx_runtime_1.jsx)(DataGrid_1.GridTableContainer, { disableColumnSort: true, disableColumnFilter: true, disableSelection: true, disableContextMenu: true }) }) }) }) })] }));
 };

package/Insights/WidgetTableContainer.js

@@ -1,54 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow, tokens, } from '@fluentui/react-components';
-import { getAttributeFormattedValue } from '@headless-adminapp/app/utils';
-import { BodyLoading } from '../components/BodyLoading';
-import { useWidgetDetail } from './hooks/useWidgetDetail';
-import { WidgetTitleBar } from './WidgetTitleBar';
-export const WidgetTableContainer = ({ content, }) => {
-    const { transformedCommands, dataset, isPending, isFetching, widget } = useWidgetDetail(content);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetTableContainer = void 0;
+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 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 (_jsxs("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,
-            background: tokens.colorNeutralBackground1,
-            boxShadow: tokens.shadow2,
-            borderRadius: tokens.borderRadiusMedium,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
             flexDirection: 'column',
             overflow: 'hidden',
-        }, children: [_jsx(WidgetTitleBar, { title: widget.title, commands: transformedCommands }), _jsxs("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && (_jsxs(Table, { style: {
+        }, 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: {
                             borderCollapse: 'collapse',
                             width: '100%',
-                        }, children: [_jsx(TableHeader, { style: {
+                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
                                     position: 'sticky',
                                     top: 0,
-                                    background: tokens.colorNeutralBackground3,
+                                    background: react_components_1.tokens.colorNeutralBackground3,
                                     zIndex: 2,
-                                }, children: _jsx(TableRow, { style: {
+                                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
                                         position: 'sticky',
                                         top: 0,
                                         minWidth: 'calc(100% - 16px)',
                                     }, children: info.columns.map((column, index) => {
                                         const attribute = info.attributes[column];
-                                        return (_jsx(TableHeaderCell, { style: {
+                                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { style: {
                                                 minWidth: 32,
                                                 flexShrink: 0,
                                                 flex: 1,
                                                 position: 'sticky',
-                                                background: tokens.colorNeutralBackground3,
-                                                borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
+                                                background: react_components_1.tokens.colorNeutralBackground3,
+                                                borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
                                             }, children: attribute.label }, column + String(index)));
-                                    }) }) }), _jsx(TableBody, { children: data.map((row, index) => (_jsx(TableRow, { children: info.columns.map((column) => {
-                                        var _a;
+                                    }) }) }), (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];
                                         const value = row[column];
-                                        const formattedValue = (_a = getAttributeFormattedValue(attribute, value)) !== null && _a !== void 0 ? _a : '';
-                                        switch (attribute === null || attribute === void 0 ? void 0 : attribute.type) {
+                                        const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value) ?? '';
+                                        switch (attribute?.type) {
                                             case 'money':
-                                                return (_jsx(TableCell, { children: formattedValue }, column));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: formattedValue }, column));
                                             case 'lookup':
                                                 return null;
                                         }
-                                        return _jsx(TableCell, { children: formattedValue }, column);
-                                    }) }, index))) })] })), _jsx(BodyLoading, { loading: isFetching })] })] }));
+                                        return (0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: formattedValue }, column);
+                                    }) }, index))) })] })), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching })] })] }));
 };
+exports.WidgetTableContainer = WidgetTableContainer;

package/Insights/WidgetTileContainer.js

@@ -1,20 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Title2, tokens } from '@fluentui/react-components';
-import { useWidgetDetail } from './hooks/useWidgetDetail';
-import { WidgetTitleBar } from './WidgetTitleBar';
-export const WidgetTileContainer = ({ content, }) => {
-    const { transformedCommands, widget } = useWidgetDetail(content);
-    return (_jsxs("div", { style: {
+"use strict";
+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: {
             display: 'flex',
             flex: 1,
-            background: tokens.colorNeutralBackground1,
-            boxShadow: tokens.shadow2,
-            borderRadius: tokens.borderRadiusMedium,
+            background: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
             flexDirection: 'column',
-        }, children: [_jsx(WidgetTitleBar, { title: widget.title, commands: transformedCommands }), _jsx("div", { style: { display: 'flex', flex: 1 }, children: _jsx("div", { style: {
+        }, 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: _jsx(Title2, { children: "Not supported yet" }) }) })] }));
+                    }, children: (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: "Not supported yet" }) }) })] }));
 };
+exports.WidgetTileContainer = WidgetTileContainer;

package/Insights/WidgetTitleBar.js

@@ -1,16 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Body1Strong, Divider } from '@fluentui/react-components';
-import { useLocale } from '@headless-adminapp/app/locale';
-import CommandBar from '../CommandBar';
-import { renderCommandItem } from '../OverflowCommandBar';
-export function WidgetTitleBar({ title, commands }) {
-    var _a;
-    const { language } = useLocale();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WidgetTitleBar = WidgetTitleBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
+const CommandBar_1 = __importDefault(require("../CommandBar"));
+const OverflowCommandBar_1 = require("../OverflowCommandBar");
+function WidgetTitleBar({ title, commands }) {
+    const { language } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     paddingInline: 16,
                     paddingBlock: 8,
                     height: 40,
                     alignItems: 'center',
-                }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx(Body1Strong, { children: title }), _jsx("div", { style: { flex: 1 } }), ((_a = commands === null || commands === void 0 ? void 0 : commands[0]) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsx("div", { style: { marginRight: -20 }, children: _jsx(CommandBar.Wrapper, { children: commands[0].map((command, index) => renderCommandItem(index, command, language)) }) }))] }) }), _jsx("div", { children: _jsx(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?.[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.js

@@ -1,54 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useIsMobile } from '@headless-adminapp/app/hooks';
-import { InsightsContext } from '@headless-adminapp/app/insights';
-import { useContextSelector, useCreateContextStore, } from '@headless-adminapp/app/mutable';
-import { WidgetContext } from '@headless-adminapp/app/widget';
-import { useEffect } from 'react';
-import { WidgetGrid, WidgetGridItem } from './Grid';
-import { WidgetChartContainer } from './WidgetChartContainer';
-import { WidgetDataGridContainer } from './WidgetDataGridContainer';
-import { WidgetTableContainer } from './WidgetTableContainer';
-import { WidgetTileContainer } from './WidgetTileContainer';
+"use strict";
+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 = useCreateContextStore({
+    const contextValue = (0, mutable_1.useCreateContextStore)({
         widget,
         data: widget.defaultData,
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         contextValue.setValue({
             widget,
             data: widget.defaultData,
         });
     }, [contextValue, widget]);
-    return (_jsx(WidgetContext.Provider, { value: contextValue, children: children }));
+    return ((0, jsx_runtime_1.jsx)(widget_1.WidgetContext.Provider, { value: contextValue, children: children }));
 };
-export function Widgets({ widgets, }) {
-    const isMobile = useIsMobile();
-    return (_jsx(WidgetGrid, { children: widgets.map((widget, index) => {
-            return (_jsx(WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: _jsx(WidgetProvider, { widget: widget, children: _jsx(WidgetItem, {}) }) }, widget.title + String(index)));
+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)));
         }) }));
 }
 function WidgetItem() {
-    const insightState = useContextSelector(InsightsContext, (state) => state);
-    const widgetState = useContextSelector(WidgetContext, (state) => state);
+    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 _jsx(WidgetTileContainer, { content: content });
+        return (0, jsx_runtime_1.jsx)(WidgetTileContainer_1.WidgetTileContainer, { content: content });
     }
     if (content.type === 'chart') {
-        return _jsx(WidgetChartContainer, { content: content });
+        return (0, jsx_runtime_1.jsx)(WidgetChartContainer_1.WidgetChartContainer, { content: content });
     }
     if (content.type === 'grid') {
-        return _jsx(WidgetDataGridContainer, { content: content });
+        return (0, jsx_runtime_1.jsx)(WidgetDataGridContainer_1.WidgetDataGridContainer, { content: content });
     }
     if (content.type === 'table') {
-        return _jsx(WidgetTableContainer, { content: content });
+        return (0, jsx_runtime_1.jsx)(WidgetTableContainer_1.WidgetTableContainer, { content: content });
     }
     if (content.type === 'custom') {
-        return _jsx(content.Component, {});
+        return (0, jsx_runtime_1.jsx)(content.Component, {});
     }
     return null;
 }

package/Insights/charts/AreaChart.js

@@ -1,17 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { AreaChart as AreaChartInternal, ResponsiveContainer, Tooltip, } from 'recharts';
-import { CustomTooltipContent } from './CustomTooltipContent';
-import { createLongAxisFormatter } from './formatters';
-import { renderAreas, renderGrid, renderXAxis, renderYAxis } from './renderers';
-export function AreaChart({ dataset, chartInfo, }) {
+"use strict";
+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 recharts_1 = require("recharts");
+const CustomTooltipContent_1 = require("./CustomTooltipContent");
+const formatters_1 = require("./formatters");
+const renderers_1 = require("./renderers");
+function AreaChart({ dataset, chartInfo, }) {
     const xAxis = chartInfo.xAxis;
     const yAxis = chartInfo.yAxis;
     const areas = chartInfo.areas;
-    const xAxisFullFormatter = createLongAxisFormatter(xAxis.tick);
-    const yAxisFullFormatter = createLongAxisFormatter(yAxis.tick);
-    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(AreaChartInternal, { data: dataset[0], children: [renderGrid(), renderXAxis(xAxis), renderYAxis(yAxis), renderAreas(areas, dataset), _jsx(Tooltip, { cursor: {
-                        stroke: tokens.colorNeutralBackground6,
+    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: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
-                    }, content: ({ active, payload, label }) => (_jsx(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, active: active, payload: payload, label: label })) })] }) }));
 }

package/Insights/charts/BarChart.js

@@ -1,17 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { BarChart as BarChartInternal, ResponsiveContainer, Tooltip, } from 'recharts';
-import { CustomTooltipContent } from './CustomTooltipContent';
-import { createLongAxisFormatter } from './formatters';
-import { renderBars, renderGrid, renderXAxis, renderYAxis } from './renderers';
-export function BarChart({ dataset, chartInfo, }) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = BarChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const recharts_1 = require("recharts");
+const CustomTooltipContent_1 = require("./CustomTooltipContent");
+const formatters_1 = require("./formatters");
+const renderers_1 = require("./renderers");
+function BarChart({ dataset, chartInfo, }) {
     const xAxis = chartInfo.xAxis;
     const yAxis = chartInfo.yAxis;
     const bars = chartInfo.bars;
-    const xAxisFullFormatter = createLongAxisFormatter(xAxis.tick);
-    const yAxisFullFormatter = createLongAxisFormatter(yAxis.tick);
-    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(BarChartInternal, { data: dataset[0], stackOffset: chartInfo.stackOffset, children: [renderGrid(), renderYAxis(yAxis), renderXAxis(xAxis), renderBars(bars, dataset), _jsx(Tooltip, { cursor: {
-                        stroke: tokens.colorNeutralBackground6,
+    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,
-                    }, content: ({ active, payload, label }) => (_jsx(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, active: active, payload: payload, label: label })) })] }) }));
 }

package/Insights/charts/ComposedChart.js

@@ -1,17 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { ComposedChart as ComposedChartInternal, ResponsiveContainer, Tooltip, } from 'recharts';
-import { CustomTooltipContent } from './CustomTooltipContent';
-import { createLongAxisFormatter } from './formatters';
-import { renderAreas, renderBars, renderGrid, renderLines, renderXAxis, renderYAxis, } from './renderers';
-export function ComposedChart({ dataset, chartInfo, }) {
-    var _a, _b, _c, _d;
+"use strict";
+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 recharts_1 = require("recharts");
+const CustomTooltipContent_1 = require("./CustomTooltipContent");
+const formatters_1 = require("./formatters");
+const renderers_1 = require("./renderers");
+function ComposedChart({ dataset, chartInfo, }) {
     const xAxis = chartInfo.xAxis;
     const yAxis = chartInfo.yAxis;
-    const xAxisFullFormatter = createLongAxisFormatter(xAxis.tick);
-    const yAxisFullFormatter = createLongAxisFormatter(yAxis.tick);
-    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChartInternal, { data: dataset[0], children: [renderGrid(), renderYAxis(yAxis), renderXAxis(xAxis, !!((_a = chartInfo.bars) === null || _a === void 0 ? void 0 : _a.length)), renderLines((_b = chartInfo.lines) !== null && _b !== void 0 ? _b : [], dataset), renderAreas((_c = chartInfo.areas) !== null && _c !== void 0 ? _c : [], dataset), renderBars((_d = chartInfo.bars) !== null && _d !== void 0 ? _d : [], dataset), _jsx(Tooltip, { cursor: {
-                        stroke: tokens.colorNeutralBackground6,
+    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: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
-                    }, content: ({ active, payload, label }) => (_jsx(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, active: active, payload: payload, label: label })) })] }) }));
 }

package/Insights/charts/CustomTooltipContent.js

@@ -1,21 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Caption1, Divider, tokens } from '@fluentui/react-components';
-export const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFormatter, }) => {
-    if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
+"use strict";
+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, }) => {
+    if (!active || !payload?.length) {
         return null;
     }
-    return (_jsxs("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: 'column',
-            boxShadow: tokens.shadow16,
-            backgroundColor: tokens.colorNeutralBackground1,
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
             padding: 8,
             borderRadius: 4,
             gap: 4,
-        }, children: [_jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: xAxisFormatter(label) }), _jsx(Divider, { style: { opacity: 0.2 } }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload.map((item, index) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: xAxisFormatter(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: payload.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                                 width: 8,
                                 height: 8,
                                 background: item.color,
                                 borderRadius: 4,
-                            } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4, marginLeft: 8 }, children: item.name }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: 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: yAxisFormatter(item.value) })] }, item.name + String(index)))) })] }));
 };
+exports.CustomTooltipContent = CustomTooltipContent;

package/Insights/charts/GaugeChart.js

@@ -1,5 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeChart = GaugeChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function GaugeChart(_props) {
-    return _jsx("div", { children: "Not supported yet" });
+function GaugeChart(_props) {
+    return (0, jsx_runtime_1.jsx)("div", { children: "Not supported yet" });
 }

package/Insights/charts/LineChart.js

@@ -1,18 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tokens } from '@fluentui/react-components';
-import { LineChart as LineChartInternal, ResponsiveContainer, Tooltip, } from 'recharts';
-import { CustomTooltipContent } from './CustomTooltipContent';
-import { createLongAxisFormatter } from './formatters';
-import { renderGrid, renderLines, renderXAxis, renderYAxis } from './renderers';
-export function LineChart({ dataset, chartInfo, }) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = LineChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const recharts_1 = require("recharts");
+const CustomTooltipContent_1 = require("./CustomTooltipContent");
+const formatters_1 = require("./formatters");
+const renderers_1 = require("./renderers");
+function LineChart({ dataset, chartInfo, }) {
     const xAxis = chartInfo.xAxis;
     const yAxis = chartInfo.yAxis;
     const lines = chartInfo.lines;
-    const xAxisFullFormatter = createLongAxisFormatter(xAxis.tick);
-    const yAxisFullFormatter = createLongAxisFormatter(yAxis.tick);
+    const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(xAxis.tick);
+    const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(yAxis.tick);
     console.log('dataset', dataset, chartInfo);
-    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(LineChartInternal, { children: [renderGrid(), renderYAxis(yAxis), renderXAxis(xAxis), renderLines(lines, dataset), _jsx(Tooltip, { cursor: {
-                        stroke: tokens.colorNeutralBackground6,
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderLines)(lines, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
-                    }, content: ({ active, payload, label }) => (_jsx(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, active: active, payload: payload, label: label })) })] }) }));
 }