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

package/Insights/charts/OhlcChart.js

@@ -1,34 +1,38 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Caption1, Divider, tokens } from '@fluentui/react-components';
-import { DateAxisTickInterval, } from '@headless-adminapp/core/experience/insights';
-import { useMemo } from 'react';
-import { Rectangle, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis as XAxisInternal, } from 'recharts';
-import { createAxisFormatter, createLongAxisFormatter } from './formatters';
-import { renderGrid, renderYAxis } from './renderers';
-export const barSizeInTime = (interval) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.barSizeInTime = void 0;
+exports.OhlcChart = OhlcChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const insights_1 = require("@headless-adminapp/core/experience/insights");
+const react_1 = require("react");
+const recharts_1 = require("recharts");
+const formatters_1 = require("./formatters");
+const renderers_1 = require("./renderers");
+const barSizeInTime = (interval) => {
     switch (interval) {
-        case DateAxisTickInterval.Minute:
+        case insights_1.DateAxisTickInterval.Minute:
             return 60000 * 0.6;
-        case DateAxisTickInterval.Hour:
+        case insights_1.DateAxisTickInterval.Hour:
             return 3600000 * 0.6;
-        case DateAxisTickInterval.Day:
+        case insights_1.DateAxisTickInterval.Day:
             return 86400000 * 0.6;
-        case DateAxisTickInterval.Week:
+        case insights_1.DateAxisTickInterval.Week:
             return 604800000 * 0.6;
-        case DateAxisTickInterval.Month:
+        case insights_1.DateAxisTickInterval.Month:
             return 2628000000 * 0.6;
-        case DateAxisTickInterval.Year:
+        case insights_1.DateAxisTickInterval.Year:
             return 31540000000 * 0.6;
         default:
             return 60000 * 0.6;
     }
 };
-export function OhlcChart({ dataset, chartInfo, }) {
-    var _a;
+exports.barSizeInTime = barSizeInTime;
+function OhlcChart({ dataset, chartInfo, }) {
     const bar = chartInfo.bars[0];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const data = dataset[(_a = bar.dataIndex) !== null && _a !== void 0 ? _a : 0];
-    const domain = useMemo(() => {
+    const data = dataset[bar.dataIndex ?? 0];
+    const domain = (0, react_1.useMemo)(() => {
         if (chartInfo.yAxis.domain &&
             typeof chartInfo.yAxis.domain[0] === 'number' &&
             typeof chartInfo.yAxis.domain[1] === 'number') {
@@ -39,28 +43,31 @@ export function OhlcChart({ dataset, chartInfo, }) {
         return [dataMin, dataMax];
     }, [bar, chartInfo.yAxis.domain, data]);
     const xAxis = chartInfo.xAxis;
-    const xAxisFormatter = createAxisFormatter(xAxis.tick);
-    const xAxisLongFormatter = createLongAxisFormatter(chartInfo.xAxis.tick);
-    const yAxisLongFormatter = createLongAxisFormatter(chartInfo.yAxis.tick);
+    const xAxisFormatter = (0, formatters_1.createAxisFormatter)(xAxis.tick);
+    const xAxisLongFormatter = (0, formatters_1.createLongAxisFormatter)(chartInfo.xAxis.tick);
+    const yAxisLongFormatter = (0, formatters_1.createLongAxisFormatter)(chartInfo.yAxis.tick);
     console.log('temp.data', dataset, chartInfo);
-    return (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ScatterChart, { data: data, children: [renderGrid(), renderYAxis(Object.assign(Object.assign({}, chartInfo.yAxis), { domain })), _jsx(XAxisInternal, { dataKey: xAxis.dataKey, name: xAxis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, padding: "gap", axisLine: {
-                        stroke: tokens.colorNeutralBackground6,
-                    }, fontSize: tokens.fontSizeBase100, tick: {
-                        fill: tokens.colorNeutralForeground1,
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ScatterChart, { data: data, children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)({
+                    ...chartInfo.yAxis,
+                    domain,
+                }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxis.dataKey, name: xAxis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, padding: "gap", axisLine: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
+                    }, fontSize: react_components_1.tokens.fontSizeBase100, tick: {
+                        fill: react_components_1.tokens.colorNeutralForeground1,
                         opacity: 0.5,
-                    }, scale: xAxis.tick.type === 'time' ? 'time' : 'auto', type: xAxis.tick.type === 'category' ? 'category' : 'number', domain: xAxis.domain, height: 16 }), _jsx(Scatter, { yAxisId: "left", data: data, markerWidth: 1, width: 1, strokeWidth: 1, 
+                    }, scale: xAxis.tick.type === 'time' ? 'time' : 'auto', type: xAxis.tick.type === 'category' ? 'category' : 'number', domain: xAxis.domain, height: 16 }), (0, jsx_runtime_1.jsx)(recharts_1.Scatter, { yAxisId: "left", data: data, markerWidth: 1, width: 1, strokeWidth: 1, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     shape: (props) => renderShape(props, {
                         bar,
                         chartInfo,
-                    }) }), _jsx(Tooltip, { cursor: {
-                        stroke: tokens.colorNeutralBackground6,
+                    }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ active, payload }) => {
-                        if (!active || !(payload === null || payload === void 0 ? void 0 : payload.length)) {
-                            return _jsx(_Fragment, {});
+                        if (!active || !payload?.length) {
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
-                        return (_jsx(OhclTooltipContent, { payload: payload[0], bar: bar, xAxisFormatter: xAxisLongFormatter, yAxisFormatter: yAxisLongFormatter }));
+                        return ((0, jsx_runtime_1.jsx)(OhclTooltipContent, { payload: payload[0], bar: bar, xAxisFormatter: xAxisLongFormatter, yAxisFormatter: yAxisLongFormatter }));
                     } })] }) }));
 }
 function OhclTooltipContent({ payload, bar, xAxisFormatter, yAxisFormatter, }) {
@@ -81,18 +88,17 @@ function OhclTooltipContent({ payload, bar, xAxisFormatter, yAxisFormatter, }) {
         name: bar.close.dataLabel,
         value: payload.payload[bar.close.dataKey],
     });
-    return (_jsx("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("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: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: xAxisFormatter(payload.value) }), _jsx(Divider, { style: { opacity: 0.2 } }), items.map((item, index) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: item.name }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: yAxisFormatter(item.value) })] }, item.name + String(index))))] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: xAxisFormatter(payload.value) }), (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)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, 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))))] }) }));
 }
 function renderShape(props, { chartInfo, bar, }) {
-    var _a, _b, _c, _d;
     const { x, width, payload, yAxis, xAxis } = props;
     const xValue = payload[xAxis.dataKey];
     const open = payload[bar.open.dataKey];
@@ -100,14 +106,14 @@ function renderShape(props, { chartInfo, bar, }) {
     const high = payload[bar.high.dataKey];
     const low = payload[bar.low.dataKey];
     const color = open < close
-        ? (_b = (_a = bar.colors) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : tokens.colorPaletteGreenForeground1
-        : (_d = (_c = bar.colors) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : tokens.colorPaletteRedForeground1;
+        ? bar.colors?.[0] ?? react_components_1.tokens.colorPaletteGreenForeground1
+        : bar.colors?.[1] ?? react_components_1.tokens.colorPaletteRedForeground1;
     const xPosition = xAxis.scale(xValue);
     let xWidth = 30;
     if (chartInfo.xAxis.tick.type === 'time' && chartInfo.xAxis.tick.interval) {
         xWidth =
-            xAxis.scale(xValue + barSizeInTime(chartInfo.xAxis.tick.interval)) -
+            xAxis.scale(xValue + (0, exports.barSizeInTime)(chartInfo.xAxis.tick.interval)) -
                 xPosition;
     }
-    return (_jsxs("g", { children: [_jsx(Rectangle, { x: x + width / 2, y: yAxis.scale(high), width: 1, height: yAxis.scale(low) - yAxis.scale(high), fill: color, stroke: color, strokeWidth: 1 }), _jsx(Rectangle, { x: xPosition - xWidth / 2, y: Math.min(yAxis.scale(open), yAxis.scale(close)), width: xWidth, height: Math.abs(yAxis.scale(close) - yAxis.scale(open)), fill: color, stroke: color, strokeWidth: 1 })] }));
+    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: x + width / 2, y: yAxis.scale(high), width: 1, height: yAxis.scale(low) - yAxis.scale(high), fill: color, stroke: color, strokeWidth: 1 }), (0, jsx_runtime_1.jsx)(recharts_1.Rectangle, { x: xPosition - xWidth / 2, y: Math.min(yAxis.scale(open), yAxis.scale(close)), width: xWidth, height: Math.abs(yAxis.scale(close) - yAxis.scale(open)), fill: color, stroke: color, strokeWidth: 1 })] }));
 }

package/Insights/charts/PieChart.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = PieChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
-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 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, }) {
     const RADIAN = Math.PI / 180;
     const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, }) => {
         const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
@@ -14,24 +16,21 @@ export function PieChart({ dataset, chartInfo, }) {
         if (percent < 0.05) {
             return null;
         }
-        return (_jsx("text", { x: x, y: y, fill: "white", textAnchor: x > cx ? 'start' : 'end', dominantBaseline: "central", fontSize: tokens.fontSizeBase100, children: `${(percent * 100).toFixed(0)}%` }));
+        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)}%` }));
     };
     const item = chartInfo.pie[0];
-    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 (_jsx(Cell, { fill: item.colorKey && entry[item.colorKey]
-                                ? entry[item.colorKey]
-                                : ((_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,
+    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[item.dataIndex ?? 0], cx: "50%", cy: "50%", labelLine: false, label: renderCustomizedLabel, outerRadius: 80, dataKey: item.dataKey, nameKey: item.nameKey, children: dataset[item.dataIndex ?? 0].map((entry, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Cell, { fill: item.colorKey && entry[item.colorKey]
+                            ? entry[item.colorKey]
+                            : (item.colors ?? constants_1.defaultColors)[index % (item.colors ?? 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,
                         overflow: 'auto',
                         top: 5,
                         bottom: 5,
-                    } })), _jsx(Tooltip, { cursor: {
-                        stroke: tokens.colorNeutralBackground6,
+                    } })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ payload }) => renderTooltipContent({
                         payload,
@@ -40,16 +39,16 @@ export function PieChart({ dataset, chartInfo, }) {
                     }) })] }) }));
 }
 function renderTooltipContent({ payload, nameFormatter, valueFormatter, }) {
-    return (_jsx("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("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("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,
+        }, children: (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)(react_components_1.Caption1, { style: {
+                            color: react_components_1.tokens.colorNeutralForeground4,
                             marginLeft: 8,
-                        }, children: nameFormatter(item.name) }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
+                        }, 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))) }) }));
 }

package/Insights/charts/RadarChart.js

@@ -1,17 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadarChart = RadarChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
-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 react_components_1 = require("@fluentui/react-components");
+const recharts_1 = require("recharts");
+const formatters_1 = require("./formatters");
+function RadarChart({ dataset, chartInfo, }) {
     const data = dataset[0];
     const radar = chartInfo.radar[0];
-    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,
+    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: radar.color ?? '#8884d8', fill: radar.color ?? '#8884d8', fillOpacity: 0.6 }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ payload }) => renderTooltipContent({
                         payload,
@@ -21,16 +23,16 @@ export function RadarChart({ dataset, chartInfo, }) {
                     }) })] }) }));
 }
 function renderTooltipContent({ payload, nameFormatter, valueFormatter, radar, }) {
-    return (_jsx("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("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("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,
+        }, children: (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)(react_components_1.Caption1, { style: {
+                            color: react_components_1.tokens.colorNeutralForeground4,
                             marginLeft: 8,
-                        }, children: nameFormatter(item.payload[radar.nameKey]) }), _jsx("div", { style: { flex: 1, minWidth: 50 } }), _jsx(Caption1, { style: { color: tokens.colorNeutralForeground4 }, children: valueFormatter(item.value) })] }, index))) }) }));
+                        }, 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))) }) }));
 }

package/Insights/charts/ScatterChart.js

@@ -1,20 +1,19 @@
-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 (_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 _jsx(_Fragment, {});
+"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) => ((0, jsx_runtime_1.jsx)(recharts_1.Scatter, { yAxisId: "left", name: scatter.dataLabel, data: dataset[scatter.dataIndex ?? 0], dataKey: scatter.dataKey, fill: scatter.color ?? constants_1.defaultColors[index] }, index))), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: false, content: (props) => {
+                        if (!props.active || !props.payload?.length) {
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
-                        return (_jsx(ScatterTooltipContent, { active: props.active, payload: props.payload, chartInfo: chartInfo, dataset: dataset }));
+                        return ((0, jsx_runtime_1.jsx)(ScatterTooltipContent, { active: props.active, payload: props.payload, chartInfo: chartInfo, dataset: dataset }));
                     } })] }) }));
 }
 const ScatterTooltipContent = (props) => {
@@ -28,8 +27,7 @@ const ScatterTooltipContent = (props) => {
     const xValue = xPayload.value;
     const yValue = yPayload.value;
     const findKey = xValue + ':' + yValue;
-    const items = useMemo(() => {
-        var _a, _b, _c, _d;
+    const items = (0, react_1.useMemo)(() => {
         const _items = [];
         if (!xAxis.dataKey || !yAxis.dataKey || !zAxis.dataKey) {
             return _items;
@@ -44,14 +42,14 @@ const ScatterTooltipContent = (props) => {
         });
         for (let i = 0; i < chartInfo.scatters.length; i++) {
             const scatter = chartInfo.scatters[i];
-            const zValue = (_c = (_b = datasetDict[(_a = scatter.dataIndex) !== null && _a !== void 0 ? _a : 0]) === null || _b === void 0 ? void 0 : _b[findKey]) === null || _c === void 0 ? void 0 : _c[zAxis.dataKey];
+            const zValue = datasetDict[scatter.dataIndex ?? 0]?.[findKey]?.[zAxis.dataKey];
             if (zValue === undefined) {
                 continue;
             }
             _items.push({
                 name: scatter.dataLabel,
                 value: zValue,
-                color: (_d = scatter.color) !== null && _d !== void 0 ? _d : defaultColors[i],
+                color: scatter.color ?? constants_1.defaultColors[i],
             });
         }
         return _items;
@@ -63,21 +61,21 @@ const ScatterTooltipContent = (props) => {
         yAxis.dataKey,
         zAxis.dataKey,
     ]);
-    const xAxisFormatter = createLongAxisFormatter(xAxis.tick);
-    const yAxisFormatter = createLongAxisFormatter(yAxis.tick);
-    const zAxisFormatter = createLongAxisFormatter(zAxis.tick);
-    return (_jsx("div", { style: {
+    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: {
             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: _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: {
+        }, 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: {
                                 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: zAxisFormatter(item.value) })] }, 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: zAxisFormatter(item.value) })] }, index)))] }) }));
 };

package/Insights/charts/constants.js

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

package/Insights/charts/formatters.js

@@ -1,4 +1,12 @@
-import dayjs from 'dayjs';
+"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"));
 function extractNumberInfo(value) {
     const suffix = ['K', 'M', 'B', 'T'];
     if (value === null || value === undefined) {
@@ -20,7 +28,7 @@ function extractNumberInfo(value) {
         };
     }
 }
-export const formatCurrencyWithSuffix = (input, digit = 2) => {
+const formatCurrencyWithSuffix = (input, digit = 2) => {
     const suffix = ['K', 'M', 'B', 'T'];
     if (input === null || input === undefined) {
         return '';
@@ -29,25 +37,26 @@ export const formatCurrencyWithSuffix = (input, digit = 2) => {
     const sign = Math.sign(input);
     if (abs >= 1000) {
         const i = Math.floor(Math.log(abs) / Math.log(1000));
-        return (formatCurrency(sign * (abs / Math.pow(1000, i)), digit) + suffix[i - 1]);
+        return ((0, exports.formatCurrency)(sign * (abs / Math.pow(1000, i)), digit) + suffix[i - 1]);
     }
     else {
-        return formatCurrency(input, digit);
+        return (0, exports.formatCurrency)(input, digit);
     }
 };
-export const formatDate = (input, format) => {
+exports.formatCurrencyWithSuffix = formatCurrencyWithSuffix;
+const formatDate = (input, format) => {
     if (!input) {
         return '';
     }
-    return dayjs(new Date(input)).format(format);
+    return (0, dayjs_1.default)(new Date(input)).format(format);
 };
-export const formatCurrency = (input, digit = 2) => {
-    var _a, _b;
+exports.formatDate = formatDate;
+const formatCurrency = (input, digit = 2) => {
     if (input === null || input === undefined) {
         return '';
     }
-    const minDigit = typeof digit === 'object' ? (_a = digit.minDigit) !== null && _a !== void 0 ? _a : digit.digit : digit;
-    const maxDigit = typeof digit === 'object' ? (_b = digit.maxDigit) !== null && _b !== void 0 ? _b : digit.digit : digit;
+    const minDigit = typeof digit === 'object' ? digit.minDigit ?? digit.digit : digit;
+    const maxDigit = typeof digit === 'object' ? digit.maxDigit ?? digit.digit : digit;
     const formatter = new Intl.NumberFormat('en-IN', {
         currency: 'INR',
         style: 'currency',
@@ -56,19 +65,20 @@ export const formatCurrency = (input, digit = 2) => {
     });
     return formatter.format(input || 0);
 };
-export const formatNumber = (input, digit = 2) => {
-    var _a, _b;
+exports.formatCurrency = formatCurrency;
+const formatNumber = (input, digit = 2) => {
     if (input === null || input === undefined) {
         return '';
     }
-    const minDigit = typeof digit === 'object' ? (_a = digit.minDigit) !== null && _a !== void 0 ? _a : digit.digit : digit;
-    const maxDigit = typeof digit === 'object' ? (_b = digit.maxDigit) !== null && _b !== void 0 ? _b : digit.digit : digit;
+    const minDigit = typeof digit === 'object' ? digit.minDigit ?? digit.digit : digit;
+    const maxDigit = typeof digit === 'object' ? digit.maxDigit ?? digit.digit : digit;
     const formatter = new Intl.NumberFormat('en-IN', {
         minimumFractionDigits: minDigit,
         maximumFractionDigits: maxDigit,
     });
     return formatter.format(input || 0);
 };
+exports.formatNumber = formatNumber;
 const timeAxisFormats = {
     minute: 'mm',
     hour: 'HH',
@@ -102,11 +112,11 @@ const timeLongAxisFormats = {
 // };
 function createTimeAxisFormatter(format) {
     const formatString = timeAxisFormats[format];
-    return (value) => formatDate(new Date(value), formatString);
+    return (value) => (0, exports.formatDate)(new Date(value), formatString);
 }
 function createFullTimeAxisFormatter(format) {
     const formatString = timeLongAxisFormats[format];
-    return (value) => formatDate(new Date(value), formatString);
+    return (value) => (0, exports.formatDate)(new Date(value), formatString);
 }
 function createNumberAxisFormatter(options) {
     return (value) => {
@@ -114,12 +124,12 @@ function createNumberAxisFormatter(options) {
         if (!info) {
             return '';
         }
-        return formatNumber(info.value, options) + info.symbol;
+        return (0, exports.formatNumber)(info.value, options) + info.symbol;
     };
 }
 function createLongNumberAxisFormatter(options) {
     return (value) => {
-        return formatNumber(value, options);
+        return (0, exports.formatNumber)(value, options);
     };
 }
 function createCurrencyAxisFormatter() {
@@ -128,7 +138,7 @@ function createCurrencyAxisFormatter() {
         if (!info) {
             return '';
         }
-        return formatCurrency(info.value, 0) + info.symbol;
+        return (0, exports.formatCurrency)(info.value, 0) + info.symbol;
     };
 }
 function createCategoryAxisFormatter(options) {
@@ -142,7 +152,7 @@ function createCategoryAxisFormatter(options) {
         return typeof value === 'string' ? value : String(value);
     };
 }
-export function createAxisFormatter(tick) {
+function createAxisFormatter(tick) {
     switch (tick.type) {
         case 'time':
             return createTimeAxisFormatter(tick.format);
@@ -153,12 +163,12 @@ export function createAxisFormatter(tick) {
         case 'category':
             return createCategoryAxisFormatter(tick.options);
         case 'weekday':
-            return (value) => dayjs().day(value).format('ddd');
+            return (value) => (0, dayjs_1.default)().day(value).format('ddd');
         default:
             return (value) => String(value);
     }
 }
-export function createLongAxisFormatter(tick) {
+function createLongAxisFormatter(tick) {
     switch (tick.type) {
         case 'time':
             return createFullTimeAxisFormatter(tick.format);
@@ -169,7 +179,7 @@ export function createLongAxisFormatter(tick) {
         case 'category':
             return createCategoryAxisFormatter(tick.options);
         case 'weekday':
-            return ((value) => dayjs().day(value).format('dddd'));
+            return ((value) => (0, dayjs_1.default)().day(value).format('dddd'));
         default:
             return (value) => String(value);
     }

package/Insights/charts/index.js

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