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

package/Insights/charts/PieChart.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PieChart = PieChart;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const react_components_1 = require("@fluentui/react-components");
-const recharts_1 = require("recharts");
-const constants_1 = require("./constants");
-const formatters_1 = require("./formatters");
-function PieChart({ dataset, chartInfo, }) {
+import { Caption1, tokens } from '@fluentui/react-components';
+import { Cell, Legend, Pie, PieChart as PieChartInternal, ResponsiveContainer, Tooltip, } from 'recharts';
+import { defaultColors } from './constants';
+import { createLongAxisFormatter } from './formatters';
+export function PieChart({ dataset, chartInfo, }) {
     var _a, _b;
     const RADIAN = Math.PI / 180;
     const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, }) => {
@@ -17,24 +14,24 @@ function PieChart({ dataset, chartInfo, }) {
         if (percent < 0.05) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)("text", { x: x, y: y, fill: "white", textAnchor: x > cx ? 'start' : 'end', dominantBaseline: "central", fontSize: react_components_1.tokens.fontSizeBase100, children: `${(percent * 100).toFixed(0)}%` }));
+        return (_jsx("text", { x: x, y: y, fill: "white", textAnchor: x > cx ? 'start' : 'end', dominantBaseline: "central", fontSize: tokens.fontSizeBase100, children: `${(percent * 100).toFixed(0)}%` }));
     };
     const item = chartInfo.pie[0];
-    const nameFormatter = (0, formatters_1.createLongAxisFormatter)(item.nameTick);
-    const valueFormatter = (0, formatters_1.createLongAxisFormatter)(item.dataTick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: dataset[(_a = item.dataIndex) !== null && _a !== void 0 ? _a : 0], cx: "50%", cy: "50%", labelLine: false, label: renderCustomizedLabel, outerRadius: 80, dataKey: item.dataKey, nameKey: item.nameKey, children: dataset[(_b = item.dataIndex) !== null && _b !== void 0 ? _b : 0].map((entry, index) => {
+    const nameFormatter = createLongAxisFormatter(item.nameTick);
+    const valueFormatter = createLongAxisFormatter(item.dataTick);
+    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(PieChartInternal, { children: [_jsx(Pie, { data: dataset[(_a = item.dataIndex) !== null && _a !== void 0 ? _a : 0], cx: "50%", cy: "50%", labelLine: false, label: renderCustomizedLabel, outerRadius: 80, dataKey: item.dataKey, nameKey: item.nameKey, children: dataset[(_b = item.dataIndex) !== null && _b !== void 0 ? _b : 0].map((entry, index) => {
                         var _a, _b;
-                        return ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: item.colorKey && entry[item.colorKey]
+                        return (_jsx(Cell, { fill: item.colorKey && entry[item.colorKey]
                                 ? entry[item.colorKey]
-                                : ((_a = item.colors) !== null && _a !== void 0 ? _a : constants_1.defaultColors)[index % ((_b = item.colors) !== null && _b !== void 0 ? _b : constants_1.defaultColors).length] }, 'cell-' + String(index)));
-                    }) }), chartInfo.showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { align: "right", layout: "vertical", verticalAlign: "top", wrapperStyle: {
-                        fontSize: react_components_1.tokens.fontSizeBase100,
-                        fontFamily: react_components_1.tokens.fontFamilyBase,
+                                : ((_a = item.colors) !== null && _a !== void 0 ? _a : defaultColors)[index % ((_b = item.colors) !== null && _b !== void 0 ? _b : defaultColors).length] }, 'cell-' + String(index)));
+                    }) }), chartInfo.showLegend && (_jsx(Legend, { align: "right", layout: "vertical", verticalAlign: "top", wrapperStyle: {
+                        fontSize: tokens.fontSizeBase100,
+                        fontFamily: tokens.fontFamilyBase,
                         overflow: 'auto',
                         top: 5,
                         bottom: 5,
-                    } })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
-                        stroke: react_components_1.tokens.colorNeutralBackground6,
+                    } })), _jsx(Tooltip, { cursor: {
+                        stroke: tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ payload }) => renderTooltipContent({
                         payload,
@@ -43,16 +40,16 @@ function PieChart({ dataset, chartInfo, }) {
                     }) })] }) }));
 }
 function renderTooltipContent({ payload, nameFormatter, valueFormatter, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             display: 'flex',
             flexDirection: 'column',
-            boxShadow: react_components_1.tokens.shadow16,
-            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: tokens.shadow16,
+            backgroundColor: tokens.colorNeutralBackground1,
             padding: 8,
             borderRadius: 4,
             gap: 4,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: {
-                            color: react_components_1.tokens.colorNeutralForeground4,
+        }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(Caption1, { style: {
+                            color: tokens.colorNeutralForeground4,
                             marginLeft: 8,
-                        }, children: nameFormatter(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: valueFormatter(item.value) })] }, index))) }) }));
+                        }, children: nameFormatter(item.name) }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
 }

package/Insights/charts/RadarChart.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadarChart = RadarChart;
-const jsx_runtime_1 = require("react/jsx-runtime");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const react_components_1 = require("@fluentui/react-components");
-const recharts_1 = require("recharts");
-const formatters_1 = require("./formatters");
-function RadarChart({ dataset, chartInfo, }) {
+import { Caption1, tokens } from '@fluentui/react-components';
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChartInternal, ResponsiveContainer, Tooltip, } from 'recharts';
+import { createAxisFormatter, createLongAxisFormatter, } from './formatters';
+export function RadarChart({ dataset, chartInfo, }) {
     var _a, _b;
     const data = dataset[0];
     const radar = chartInfo.radar[0];
-    const nameFormatter = (0, formatters_1.createLongAxisFormatter)(radar.nameTick);
-    const valueFormatter = (0, formatters_1.createLongAxisFormatter)(radar.dataTick);
-    const tickFormatter = (0, formatters_1.createAxisFormatter)(radar.dataTick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, children: [(0, jsx_runtime_1.jsx)(recharts_1.PolarGrid, { stroke: react_components_1.tokens.colorNeutralBackground6, opacity: 0.5 }), (0, jsx_runtime_1.jsx)(recharts_1.PolarAngleAxis, { dataKey: radar.nameKey, fontSize: react_components_1.tokens.fontSizeBase100, tickFormatter: nameFormatter }), (0, jsx_runtime_1.jsx)(recharts_1.PolarRadiusAxis, { fontSize: react_components_1.tokens.fontSizeBase100, tickFormatter: tickFormatter }), (0, jsx_runtime_1.jsx)(recharts_1.Radar, { dataKey: radar.dataKey, stroke: (_a = radar.color) !== null && _a !== void 0 ? _a : '#8884d8', fill: (_b = radar.color) !== null && _b !== void 0 ? _b : '#8884d8', fillOpacity: 0.6 }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
-                        stroke: react_components_1.tokens.colorNeutralBackground6,
+    const nameFormatter = createLongAxisFormatter(radar.nameTick);
+    const valueFormatter = createLongAxisFormatter(radar.dataTick);
+    const tickFormatter = createAxisFormatter(radar.dataTick);
+    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(RadarChartInternal, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, children: [_jsx(PolarGrid, { stroke: tokens.colorNeutralBackground6, opacity: 0.5 }), _jsx(PolarAngleAxis, { dataKey: radar.nameKey, fontSize: tokens.fontSizeBase100, tickFormatter: nameFormatter }), _jsx(PolarRadiusAxis, { fontSize: tokens.fontSizeBase100, tickFormatter: tickFormatter }), _jsx(Radar, { dataKey: radar.dataKey, stroke: (_a = radar.color) !== null && _a !== void 0 ? _a : '#8884d8', fill: (_b = radar.color) !== null && _b !== void 0 ? _b : '#8884d8', fillOpacity: 0.6 }), _jsx(Tooltip, { cursor: {
+                        stroke: tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ payload }) => renderTooltipContent({
                         payload,
@@ -24,16 +21,16 @@ function RadarChart({ dataset, chartInfo, }) {
                     }) })] }) }));
 }
 function renderTooltipContent({ payload, nameFormatter, valueFormatter, radar, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    return (_jsx("div", { style: {
             display: 'flex',
             flexDirection: 'column',
-            boxShadow: react_components_1.tokens.shadow16,
-            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: tokens.shadow16,
+            backgroundColor: tokens.colorNeutralBackground1,
             padding: 8,
             borderRadius: 4,
             gap: 4,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: {
-                            color: react_components_1.tokens.colorNeutralForeground4,
+        }, children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: payload === null || payload === void 0 ? void 0 : payload.map((item, index) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(Caption1, { style: {
+                            color: tokens.colorNeutralForeground4,
                             marginLeft: 8,
-                        }, children: nameFormatter(item.payload[radar.nameKey]) }), (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: valueFormatter(item.value) })] }, index))) }) }));
+                        }, children: nameFormatter(item.payload[radar.nameKey]) }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
 }

package/Insights/charts/ScatterChart.js

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScatterChart = ScatterChart;
-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 renderers_1 = require("./renderers");
-function ScatterChart({ dataset, chartInfo, }) {
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ScatterChart, { children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderXAxis)(chartInfo.xAxis), (0, renderers_1.renderYAxis)(chartInfo.yAxis), (0, jsx_runtime_1.jsx)(recharts_1.ZAxis, { type: "number", dataKey: chartInfo.zAxis.dataKey, range: chartInfo.zAxis.range, name: chartInfo.zAxis.name }), chartInfo.scatters.map((scatter, index) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Caption1, Divider, tokens } from '@fluentui/react-components';
+import { useMemo } from 'react';
+import { ResponsiveContainer, Scatter, ScatterChart as ScatterChartInternal, Tooltip, ZAxis, } from 'recharts';
+import { defaultColors } from './constants';
+import { createLongAxisFormatter } from './formatters';
+import { renderGrid, renderXAxis, renderYAxis } from './renderers';
+export function ScatterChart({ dataset, chartInfo, }) {
+    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ScatterChartInternal, { children: [renderGrid(), renderXAxis(chartInfo.xAxis), renderYAxis(chartInfo.yAxis), _jsx(ZAxis, { type: "number", dataKey: chartInfo.zAxis.dataKey, range: chartInfo.zAxis.range, name: chartInfo.zAxis.name }), chartInfo.scatters.map((scatter, index) => {
                     var _a, _b;
-                    return ((0, jsx_runtime_1.jsx)(recharts_1.Scatter, { yAxisId: "left", name: scatter.dataLabel, data: dataset[(_a = scatter.dataIndex) !== null && _a !== void 0 ? _a : 0], dataKey: scatter.dataKey, fill: (_b = scatter.color) !== null && _b !== void 0 ? _b : constants_1.defaultColors[index] }, index));
-                }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: false, content: (props) => {
+                    return (_jsx(Scatter, { yAxisId: "left", name: scatter.dataLabel, data: dataset[(_a = scatter.dataIndex) !== null && _a !== void 0 ? _a : 0], dataKey: scatter.dataKey, fill: (_b = scatter.color) !== null && _b !== void 0 ? _b : defaultColors[index] }, index));
+                }), _jsx(Tooltip, { cursor: false, content: (props) => {
                         var _a;
                         if (!props.active || !((_a = props.payload) === null || _a === void 0 ? void 0 : _a.length)) {
-                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                            return _jsx(_Fragment, {});
                         }
-                        return ((0, jsx_runtime_1.jsx)(ScatterTooltipContent, { active: props.active, payload: props.payload, chartInfo: chartInfo, dataset: dataset }));
+                        return (_jsx(ScatterTooltipContent, { active: props.active, payload: props.payload, chartInfo: chartInfo, dataset: dataset }));
                     } })] }) }));
 }
 const ScatterTooltipContent = (props) => {
@@ -31,7 +28,7 @@ const ScatterTooltipContent = (props) => {
     const xValue = xPayload.value;
     const yValue = yPayload.value;
     const findKey = xValue + ':' + yValue;
-    const items = (0, react_1.useMemo)(() => {
+    const items = useMemo(() => {
         var _a, _b, _c, _d;
         const _items = [];
         if (!xAxis.dataKey || !yAxis.dataKey || !zAxis.dataKey) {
@@ -54,7 +51,7 @@ const ScatterTooltipContent = (props) => {
             _items.push({
                 name: scatter.dataLabel,
                 value: zValue,
-                color: (_d = scatter.color) !== null && _d !== void 0 ? _d : constants_1.defaultColors[i],
+                color: (_d = scatter.color) !== null && _d !== void 0 ? _d : defaultColors[i],
             });
         }
         return _items;
@@ -66,21 +63,21 @@ const ScatterTooltipContent = (props) => {
         yAxis.dataKey,
         zAxis.dataKey,
     ]);
-    const xAxisFormatter = (0, formatters_1.createLongAxisFormatter)(xAxis.tick);
-    const yAxisFormatter = (0, formatters_1.createLongAxisFormatter)(yAxis.tick);
-    const zAxisFormatter = (0, formatters_1.createLongAxisFormatter)(zAxis.tick);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+    const xAxisFormatter = createLongAxisFormatter(xAxis.tick);
+    const yAxisFormatter = createLongAxisFormatter(yAxis.tick);
+    const zAxisFormatter = createLongAxisFormatter(zAxis.tick);
+    return (_jsx("div", { style: {
             display: 'flex',
             flexDirection: 'column',
-            boxShadow: react_components_1.tokens.shadow16,
-            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            boxShadow: tokens.shadow16,
+            backgroundColor: tokens.colorNeutralBackground1,
             padding: 8,
             borderRadius: 4,
             gap: 4,
-        }, children: (0, jsx_runtime_1.jsxs)("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)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: xAxis.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: xAxisFormatter(xValue) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: yAxis.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(yValue) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), items.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: xAxis.name }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: xAxisFormatter(xValue) })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: yAxis.name }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: yAxisFormatter(yValue) })] }), _jsx(Divider, { style: { opacity: 0.2 } }), items.map((item, index) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("div", { style: {
                                 width: 8,
                                 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: zAxisFormatter(item.value) })] }, index)))] }) }));
+                            } }), _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: zAxisFormatter(item.value) })] }, index)))] }) }));
 };

package/Insights/charts/constants.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultColors = void 0;
-exports.defaultColors = [
+export const defaultColors = [
     '#0088FE',
     '#00C49F',
     '#FFBB28',

package/Insights/charts/formatters.js

@@ -1,12 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatNumber = exports.formatCurrency = exports.formatDate = exports.formatCurrencyWithSuffix = void 0;
-exports.createAxisFormatter = createAxisFormatter;
-exports.createLongAxisFormatter = createLongAxisFormatter;
-const dayjs_1 = __importDefault(require("dayjs"));
+import dayjs from 'dayjs';
 function extractNumberInfo(value) {
     const suffix = ['K', 'M', 'B', 'T'];
     if (value === null || value === undefined) {
@@ -28,7 +20,7 @@ function extractNumberInfo(value) {
         };
     }
 }
-const formatCurrencyWithSuffix = (input, digit = 2) => {
+export const formatCurrencyWithSuffix = (input, digit = 2) => {
     const suffix = ['K', 'M', 'B', 'T'];
     if (input === null || input === undefined) {
         return '';
@@ -37,21 +29,19 @@ const formatCurrencyWithSuffix = (input, digit = 2) => {
     const sign = Math.sign(input);
     if (abs >= 1000) {
         const i = Math.floor(Math.log(abs) / Math.log(1000));
-        return ((0, exports.formatCurrency)(sign * (abs / Math.pow(1000, i)), digit) + suffix[i - 1]);
+        return (formatCurrency(sign * (abs / Math.pow(1000, i)), digit) + suffix[i - 1]);
     }
     else {
-        return (0, exports.formatCurrency)(input, digit);
+        return formatCurrency(input, digit);
     }
 };
-exports.formatCurrencyWithSuffix = formatCurrencyWithSuffix;
-const formatDate = (input, format) => {
+export const formatDate = (input, format) => {
     if (!input) {
         return '';
     }
-    return (0, dayjs_1.default)(new Date(input)).format(format);
+    return dayjs(new Date(input)).format(format);
 };
-exports.formatDate = formatDate;
-const formatCurrency = (input, digit = 2) => {
+export const formatCurrency = (input, digit = 2) => {
     var _a, _b;
     if (input === null || input === undefined) {
         return '';
@@ -66,8 +56,7 @@ const formatCurrency = (input, digit = 2) => {
     });
     return formatter.format(input || 0);
 };
-exports.formatCurrency = formatCurrency;
-const formatNumber = (input, digit = 2) => {
+export const formatNumber = (input, digit = 2) => {
     var _a, _b;
     if (input === null || input === undefined) {
         return '';
@@ -80,7 +69,6 @@ const formatNumber = (input, digit = 2) => {
     });
     return formatter.format(input || 0);
 };
-exports.formatNumber = formatNumber;
 const timeAxisFormats = {
     minute: 'mm',
     hour: 'HH',
@@ -114,11 +102,11 @@ const timeLongAxisFormats = {
 // };
 function createTimeAxisFormatter(format) {
     const formatString = timeAxisFormats[format];
-    return (value) => (0, exports.formatDate)(new Date(value), formatString);
+    return (value) => formatDate(new Date(value), formatString);
 }
 function createFullTimeAxisFormatter(format) {
     const formatString = timeLongAxisFormats[format];
-    return (value) => (0, exports.formatDate)(new Date(value), formatString);
+    return (value) => formatDate(new Date(value), formatString);
 }
 function createNumberAxisFormatter(options) {
     return (value) => {
@@ -126,12 +114,12 @@ function createNumberAxisFormatter(options) {
         if (!info) {
             return '';
         }
-        return (0, exports.formatNumber)(info.value, options) + info.symbol;
+        return formatNumber(info.value, options) + info.symbol;
     };
 }
 function createLongNumberAxisFormatter(options) {
     return (value) => {
-        return (0, exports.formatNumber)(value, options);
+        return formatNumber(value, options);
     };
 }
 function createCurrencyAxisFormatter() {
@@ -140,7 +128,7 @@ function createCurrencyAxisFormatter() {
         if (!info) {
             return '';
         }
-        return (0, exports.formatCurrency)(info.value, 0) + info.symbol;
+        return formatCurrency(info.value, 0) + info.symbol;
     };
 }
 function createCategoryAxisFormatter(options) {
@@ -154,7 +142,7 @@ function createCategoryAxisFormatter(options) {
         return typeof value === 'string' ? value : String(value);
     };
 }
-function createAxisFormatter(tick) {
+export function createAxisFormatter(tick) {
     switch (tick.type) {
         case 'time':
             return createTimeAxisFormatter(tick.format);
@@ -165,12 +153,12 @@ function createAxisFormatter(tick) {
         case 'category':
             return createCategoryAxisFormatter(tick.options);
         case 'weekday':
-            return (value) => (0, dayjs_1.default)().day(value).format('ddd');
+            return (value) => dayjs().day(value).format('ddd');
         default:
             return (value) => String(value);
     }
 }
-function createLongAxisFormatter(tick) {
+export function createLongAxisFormatter(tick) {
     switch (tick.type) {
         case 'time':
             return createFullTimeAxisFormatter(tick.format);
@@ -181,7 +169,7 @@ function createLongAxisFormatter(tick) {
         case 'category':
             return createCategoryAxisFormatter(tick.options);
         case 'weekday':
-            return ((value) => (0, dayjs_1.default)().day(value).format('dddd'));
+            return ((value) => dayjs().day(value).format('dddd'));
         default:
             return (value) => String(value);
     }

package/Insights/charts/index.js

@@ -1,7 +1,6 @@
-"use strict";
 /* eslint-disable unused-imports/no-unused-vars */
 // TODO: Remove eslint disable condition after finishing the implementation
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};
 // number format - decimal or currency
 // number format - number of decimals
 // number format - group it (K, M, B, T)

package/Insights/charts/renderers.js

@@ -1,65 +1,54 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderXAxis = renderXAxis;
-exports.renderYAxis = renderYAxis;
-exports.renderGrid = renderGrid;
-exports.renderLine = renderLine;
-exports.renderLines = renderLines;
-exports.renderArea = renderArea;
-exports.renderAreas = renderAreas;
-exports.renderBar = renderBar;
-exports.renderBars = renderBars;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
-const recharts_1 = require("recharts");
-const formatters_1 = require("./formatters");
-function renderXAxis(axis, forceCategory = false) {
-    const xAxisFormatter = (0, formatters_1.createAxisFormatter)(axis.tick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: axis.dataKey, name: axis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, 
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tokens } from '@fluentui/react-components';
+import { Area, Bar, CartesianGrid, Line, XAxis as XAxisInternal, YAxis as YAxisInternal, } from 'recharts';
+import { createAxisFormatter } from './formatters';
+export function renderXAxis(axis, forceCategory = false) {
+    const xAxisFormatter = createAxisFormatter(axis.tick);
+    return (_jsx(XAxisInternal, { dataKey: axis.dataKey, name: axis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, 
         // padding={{ left: 10, right: 10 }}
         padding: "gap", axisLine: {
-            stroke: react_components_1.tokens.colorNeutralBackground6,
-        }, fontSize: react_components_1.tokens.fontSizeBase100, tick: {
-            fill: react_components_1.tokens.colorNeutralForeground1,
+            stroke: tokens.colorNeutralBackground6,
+        }, fontSize: tokens.fontSizeBase100, tick: {
+            fill: tokens.colorNeutralForeground1,
             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) {
-    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: {
-            fill: react_components_1.tokens.colorNeutralForeground1,
+export function renderYAxis(axis) {
+    const yAxisFormatter = createAxisFormatter(axis.tick);
+    return (_jsx(YAxisInternal, { yAxisId: "left", dataKey: axis.dataKey, tickFormatter: yAxisFormatter, name: axis.name, tickLine: false, fontSize: tokens.fontSizeBase100, axisLine: false, tickMargin: 0, minTickGap: 0, accentHeight: 0, width: 40, scale: "auto", type: "number", domain: axis.domain, tick: {
+            fill: tokens.colorNeutralForeground1,
             opacity: 0.5,
         } }));
 }
-function renderGrid() {
-    return ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "8 4", vertical: false, strokeWidth: 0.2, stroke: react_components_1.tokens.colorNeutralBackground6 }));
+export function renderGrid() {
+    return (_jsx(CartesianGrid, { strokeDasharray: "8 4", vertical: false, strokeWidth: 0.2, stroke: tokens.colorNeutralBackground6 }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderLine(line, dataset) {
+export function renderLine(line, dataset) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(recharts_1.Line, { yAxisId: 'left', type: line.curveType, data: dataset[(_a = line.dataIndex) !== null && _a !== void 0 ? _a : 0], dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
+    return (_jsx(Line, { yAxisId: 'left', type: line.curveType, data: dataset[(_a = line.dataIndex) !== null && _a !== void 0 ? _a : 0], dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
             stroke: line.color,
         } }, line.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderLines(lines, dataset) {
+export function renderLines(lines, dataset) {
     return lines.map((line) => renderLine(line, dataset));
 }
 // eslint-disable-next-line unused-imports/no-unused-vars
-function renderArea(area, dataset) {
-    return ((0, jsx_runtime_1.jsx)(recharts_1.Area, { yAxisId: 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, fill: area.color, strokeWidth: 1, dot: false, activeDot: {
+export function renderArea(area, dataset) {
+    return (_jsx(Area, { yAxisId: 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, fill: area.color, strokeWidth: 1, dot: false, activeDot: {
             stroke: area.color,
         } }, area.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderAreas(areas, dataset) {
+export function renderAreas(areas, dataset) {
     return areas.map((area) => renderArea(area, dataset));
 }
 // 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 }, bar.dataKey));
+export function renderBar(bar, dataset) {
+    return (_jsx(Bar, { yAxisId: 'left', type: bar.curveType, dataKey: bar.dataKey, name: bar.dataLabel, stroke: bar.color, fill: bar.color, strokeWidth: 1, stackId: bar.stackId }, bar.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function renderBars(bars, dataset) {
+export function renderBars(bars, dataset) {
     return bars.map((bar) => renderBar(bar, dataset));
 }

package/Insights/hooks/useQueriesData.js

@@ -1,4 +1,3 @@
-"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -8,24 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useQueriesData = useQueriesData;
-const insights_1 = require("@headless-adminapp/app/insights");
-const mutable_1 = require("@headless-adminapp/app/mutable");
-const transport_1 = require("@headless-adminapp/app/transport");
-const widget_1 = require("@headless-adminapp/app/widget");
-const transport_2 = require("@headless-adminapp/core/transport");
-const react_query_1 = require("@tanstack/react-query");
-const dayjs_1 = __importDefault(require("dayjs"));
-const react_1 = require("react");
-function useQueriesData(queries) {
-    const dataService = (0, transport_1.useDataService)();
-    const insightsState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
-    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
-    const resolvedQueries = (0, react_1.useMemo)(() => {
+import { InsightsContext } from '@headless-adminapp/app/insights';
+import { useContextSelector } from '@headless-adminapp/app/mutable';
+import { useDataService } from '@headless-adminapp/app/transport';
+import { WidgetContext } from '@headless-adminapp/app/widget';
+import { AggregateAttributeFunction, } from '@headless-adminapp/core/transport';
+import { useQueries } from '@tanstack/react-query';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+export function useQueriesData(queries) {
+    const dataService = useDataService();
+    const insightsState = useContextSelector(InsightsContext, (state) => state);
+    const widgetState = useContextSelector(WidgetContext, (state) => state);
+    const resolvedQueries = useMemo(() => {
         return queries.map((item) => {
             if (typeof item === 'function') {
                 console.log('temp.item', item, item(insightsState, widgetState));
@@ -34,7 +28,7 @@ function useQueriesData(queries) {
             return item;
         });
     }, [queries, insightsState, widgetState]);
-    const result = (0, react_query_1.useQueries)({
+    const result = useQueries({
         queries: resolvedQueries.map((item) => ({
             queryKey: ['insights', 'aggregate', item],
             queryFn: () => __awaiter(this, void 0, void 0, function* () {
@@ -57,7 +51,7 @@ function useQueriesData(queries) {
     const isPending = result.some((r) => r.isPending);
     const isFetching = result.some((r) => r.isFetching);
     const refetch = () => result.map((r) => r.refetch());
-    const data = (0, react_1.useMemo)(() => {
+    const data = useMemo(() => {
         return result.map((r) => r.data);
     }, [result]);
     return { isPending, isFetching, dataset: data, refetch };
@@ -78,19 +72,19 @@ function getAttributeValueTransformer(attribute) {
     let transformer = undefined;
     if (attribute.type === 'date') {
         if (attribute.format) {
-            transformer = (value) => (0, dayjs_1.default)(value, attribute.format)
+            transformer = (value) => dayjs(value, attribute.format)
                 .toDate()
                 .getTime();
         }
         else if (attribute.value.type === 'function') {
-            if (attribute.value.value === transport_2.AggregateAttributeFunction.YearMonth) {
-                transformer = (value) => (0, dayjs_1.default)(value, 'YYYY-MM')
+            if (attribute.value.value === AggregateAttributeFunction.YearMonth) {
+                transformer = (value) => dayjs(value, 'YYYY-MM')
                     .toDate()
                     .getTime();
             }
         }
         else {
-            transformer = (value) => (0, dayjs_1.default)(value)
+            transformer = (value) => dayjs(value)
                 .toDate()
                 .getTime();
         }

package/Insights/hooks/useWidgetDetail.js

@@ -1,24 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWidgetDetail = useWidgetDetail;
-const command_1 = require("@headless-adminapp/app/command");
-const hooks_1 = require("@headless-adminapp/app/command/hooks");
-const mutable_1 = require("@headless-adminapp/app/mutable");
-const widget_1 = require("@headless-adminapp/app/widget");
-const react_1 = require("react");
-const useQueriesData_1 = require("./useQueriesData");
-function useWidgetDetail(widgetContent) {
-    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
+import { useCommands } from '@headless-adminapp/app/command';
+import { useBaseCommandHandlerContext } from '@headless-adminapp/app/command/hooks';
+import { useContextSelector, useContextSetValue, } from '@headless-adminapp/app/mutable';
+import { WidgetContext } from '@headless-adminapp/app/widget';
+import { useCallback } from 'react';
+import { useQueriesData } from './useQueriesData';
+export function useWidgetDetail(widgetContent) {
+    const widgetState = useContextSelector(WidgetContext, (state) => state);
     const widget = widgetState.widget;
-    const widgetSetValue = (0, mutable_1.useContextSetValue)(widget_1.WidgetContext);
-    const { dataset, isPending, isFetching, refetch } = (0, useQueriesData_1.useQueriesData)(widget.dataset);
-    const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
-    const updateStateValue = (0, react_1.useCallback)(
+    const widgetSetValue = useContextSetValue(WidgetContext);
+    const { dataset, isPending, isFetching, refetch } = useQueriesData(widget.dataset);
+    const baseCommandHandleContext = useBaseCommandHandlerContext();
+    const updateStateValue = 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]);
-    const transformedCommands = (0, command_1.useCommands)([widgetContent.commands], Object.assign(Object.assign({}, baseCommandHandleContext), { primaryControl: {
+    const transformedCommands = useCommands([widgetContent.commands], Object.assign(Object.assign({}, baseCommandHandleContext), { primaryControl: {
             refresh: refetch,
             updateStateValue,
         } }));