@headless-adminapp/fluent 0.0.17-alpha.7 → 1.0.0

package/Insights/Widgets.js

@@ -0,0 +1,57 @@
+"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 = (0, mutable_1.useCreateContextStore)({
+        widget,
+        data: widget.defaultData,
+    });
+    (0, react_1.useEffect)(() => {
+        contextValue.setValue({
+            widget,
+            data: widget.defaultData,
+        });
+    }, [contextValue, widget]);
+    return ((0, jsx_runtime_1.jsx)(widget_1.WidgetContext.Provider, { value: contextValue, children: children }));
+};
+function Widgets({ widgets, }) {
+    const isMobile = (0, hooks_1.useIsMobile)();
+    return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGrid, { children: widgets.map((widget, index) => {
+            return ((0, jsx_runtime_1.jsx)(Grid_1.WidgetGridItem, { row: widget.rows, column: isMobile ? 12 : widget.columns, children: (0, jsx_runtime_1.jsx)(WidgetProvider, { widget: widget, children: (0, jsx_runtime_1.jsx)(WidgetItem, {}) }) }, widget.title + String(index)));
+        }) }));
+}
+function WidgetItem() {
+    const insightState = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state);
+    const widgetState = (0, mutable_1.useContextSelector)(widget_1.WidgetContext, (state) => state);
+    const widget = widgetState.widget;
+    const content = typeof widget.content === 'function'
+        ? widget.content(insightState, widgetState)
+        : widget.content;
+    if (content.type === 'tile') {
+        return (0, jsx_runtime_1.jsx)(WidgetTileContainer_1.WidgetTileContainer, { content: content });
+    }
+    if (content.type === 'chart') {
+        return (0, jsx_runtime_1.jsx)(WidgetChartContainer_1.WidgetChartContainer, { content: content });
+    }
+    if (content.type === 'grid') {
+        return (0, jsx_runtime_1.jsx)(WidgetDataGridContainer_1.WidgetDataGridContainer, { content: content });
+    }
+    if (content.type === 'table') {
+        return (0, jsx_runtime_1.jsx)(WidgetTableContainer_1.WidgetTableContainer, { content: content });
+    }
+    if (content.type === 'custom') {
+        return (0, jsx_runtime_1.jsx)(content.Component, {});
+    }
+    return null;
+}

package/Insights/charts/AreaChart.d.ts

@@ -0,0 +1,5 @@
+import { AreaChartInfo } from '@headless-adminapp/core/experience/insights';
+export declare function AreaChart({ dataset, chartInfo, }: {
+    dataset: any[];
+    chartInfo: AreaChartInfo;
+}): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/AreaChart.js

@@ -0,0 +1,20 @@
+"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 = (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 }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
+}

package/Insights/charts/BarChart.d.ts

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

package/Insights/charts/BarChart.js

@@ -0,0 +1,20 @@
+"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 = (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 }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
+}

package/Insights/charts/ComposedChart.d.ts

@@ -0,0 +1,5 @@
+import { ComposedChartInfo } from '@headless-adminapp/core/experience/insights';
+export declare function ComposedChart({ dataset, chartInfo, }: {
+    dataset: any[];
+    chartInfo: ComposedChartInfo;
+}): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/ComposedChart.js

@@ -0,0 +1,19 @@
+"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 = (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 }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
+}

package/Insights/charts/CustomTooltipContent.d.ts

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

package/Insights/charts/CustomTooltipContent.js

@@ -0,0 +1,25 @@
+"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 ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: 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,
+                            } }), (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.d.ts

@@ -0,0 +1,5 @@
+import { GaugeChartInfo } from '@headless-adminapp/core/experience/insights';
+export declare function GaugeChart(_props: {
+    dataset: any[];
+    chartInfo: GaugeChartInfo;
+}): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/GaugeChart.js

@@ -0,0 +1,8 @@
+"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
+function GaugeChart(_props) {
+    return (0, jsx_runtime_1.jsx)("div", { children: "Not supported yet" });
+}

package/Insights/charts/LineChart.d.ts

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

package/Insights/charts/LineChart.js

@@ -0,0 +1,21 @@
+"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 = (0, formatters_1.createLongAxisFormatter)(xAxis.tick);
+    const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(yAxis.tick);
+    console.log('dataset', dataset, chartInfo);
+    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 }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
+}

package/Insights/charts/OhlcChart.d.ts

@@ -0,0 +1,6 @@
+import { DateAxisTickInterval, OhlcChartInfo } from '@headless-adminapp/core/experience/insights';
+export declare const barSizeInTime: (interval: DateAxisTickInterval) => number;
+export declare function OhlcChart({ dataset, chartInfo, }: Readonly<{
+    dataset: any[];
+    chartInfo: OhlcChartInfo;
+}>): import("react/jsx-runtime").JSX.Element;

package/Insights/charts/OhlcChart.js

@@ -0,0 +1,119 @@
+"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 insights_1.DateAxisTickInterval.Minute:
+            return 60000 * 0.6;
+        case insights_1.DateAxisTickInterval.Hour:
+            return 3600000 * 0.6;
+        case insights_1.DateAxisTickInterval.Day:
+            return 86400000 * 0.6;
+        case insights_1.DateAxisTickInterval.Week:
+            return 604800000 * 0.6;
+        case insights_1.DateAxisTickInterval.Month:
+            return 2628000000 * 0.6;
+        case insights_1.DateAxisTickInterval.Year:
+            return 31540000000 * 0.6;
+        default:
+            return 60000 * 0.6;
+    }
+};
+exports.barSizeInTime = barSizeInTime;
+function OhlcChart({ dataset, chartInfo, }) {
+    const bar = chartInfo.bars[0];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    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') {
+            return chartInfo.yAxis.domain;
+        }
+        const dataMin = Math.min(...data.map((entry) => entry[bar.low.dataKey]), ...data.map((entry) => entry[bar.open.dataKey]), ...data.map((entry) => entry[bar.close.dataKey]), ...data.map((entry) => entry[bar.high.dataKey]));
+        const dataMax = Math.max(...data.map((entry) => entry[bar.low.dataKey]), ...data.map((entry) => entry[bar.open.dataKey]), ...data.map((entry) => entry[bar.close.dataKey]), ...data.map((entry) => entry[bar.high.dataKey]));
+        return [dataMin, dataMax];
+    }, [bar, chartInfo.yAxis.domain, data]);
+    const xAxis = chartInfo.xAxis;
+    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 ((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 }), (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,
+                    }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
+                        opacity: 0.5,
+                    }, content: ({ active, payload }) => {
+                        if (!active || !payload?.length) {
+                            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                        }
+                        return ((0, jsx_runtime_1.jsx)(OhclTooltipContent, { payload: payload[0], bar: bar, xAxisFormatter: xAxisLongFormatter, yAxisFormatter: yAxisLongFormatter }));
+                    } })] }) }));
+}
+function OhclTooltipContent({ payload, bar, xAxisFormatter, yAxisFormatter, }) {
+    const items = [];
+    items.push({
+        name: bar.open.dataLabel,
+        value: payload.payload[bar.open.dataKey],
+    });
+    items.push({
+        name: bar.high.dataLabel,
+        value: payload.payload[bar.high.dataKey],
+    });
+    items.push({
+        name: bar.low.dataLabel,
+        value: payload.payload[bar.low.dataKey],
+    });
+    items.push({
+        name: bar.close.dataLabel,
+        value: payload.payload[bar.close.dataKey],
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: (0, jsx_runtime_1.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, }) {
+    const { x, width, payload, yAxis, xAxis } = props;
+    const xValue = payload[xAxis.dataKey];
+    const open = payload[bar.open.dataKey];
+    const close = payload[bar.close.dataKey];
+    const high = payload[bar.high.dataKey];
+    const low = payload[bar.low.dataKey];
+    const color = open < close
+        ? 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 + (0, exports.barSizeInTime)(chartInfo.xAxis.tick.interval)) -
+                xPosition;
+    }
+    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.d.ts

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

package/Insights/charts/PieChart.js

@@ -0,0 +1,54 @@
+"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 */
+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;
+        const x = cx + radius * Math.cos(-midAngle * RADIAN);
+        const y = cy + radius * Math.sin(-midAngle * RADIAN);
+        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)}%` }));
+    };
+    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[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,
+                    } })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+                        stroke: react_components_1.tokens.colorNeutralBackground6,
+                        opacity: 0.5,
+                    }, content: ({ payload }) => renderTooltipContent({
+                        payload,
+                        nameFormatter,
+                        valueFormatter,
+                    }) })] }) }));
+}
+function renderTooltipContent({ payload, nameFormatter, valueFormatter, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: (0, jsx_runtime_1.jsx)("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) }), (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.d.ts

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

package/Insights/charts/RadarChart.js

@@ -0,0 +1,38 @@
+"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 */
+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 = (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,
+                        nameFormatter,
+                        valueFormatter,
+                        radar,
+                    }) })] }) }));
+}
+function renderTooltipContent({ payload, nameFormatter, valueFormatter, radar, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: (0, jsx_runtime_1.jsx)("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]) }), (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.d.ts

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

package/Insights/charts/ScatterChart.js

@@ -0,0 +1,81 @@
+"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 ((0, jsx_runtime_1.jsx)(ScatterTooltipContent, { active: props.active, payload: props.payload, chartInfo: chartInfo, dataset: dataset }));
+                    } })] }) }));
+}
+const ScatterTooltipContent = (props) => {
+    const chartInfo = props.chartInfo;
+    const dataset = props.dataset;
+    const xAxis = chartInfo.xAxis;
+    const yAxis = chartInfo.yAxis;
+    const zAxis = chartInfo.zAxis;
+    const xPayload = props.payload[0];
+    const yPayload = props.payload[1];
+    const xValue = xPayload.value;
+    const yValue = yPayload.value;
+    const findKey = xValue + ':' + yValue;
+    const items = (0, react_1.useMemo)(() => {
+        const _items = [];
+        if (!xAxis.dataKey || !yAxis.dataKey || !zAxis.dataKey) {
+            return _items;
+        }
+        const datasetDict = dataset.map((data) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return data.reduce((acc, entry) => {
+                const key = entry[xAxis.dataKey] + ':' + entry[yAxis.dataKey];
+                acc[key] = entry;
+                return acc;
+            }, {});
+        });
+        for (let i = 0; i < chartInfo.scatters.length; i++) {
+            const scatter = chartInfo.scatters[i];
+            const zValue = datasetDict[scatter.dataIndex ?? 0]?.[findKey]?.[zAxis.dataKey];
+            if (zValue === undefined) {
+                continue;
+            }
+            _items.push({
+                name: scatter.dataLabel,
+                value: zValue,
+                color: scatter.color ?? constants_1.defaultColors[i],
+            });
+        }
+        return _items;
+    }, [
+        chartInfo.scatters,
+        dataset,
+        findKey,
+        xAxis.dataKey,
+        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: {
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: react_components_1.tokens.shadow16,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            padding: 8,
+            borderRadius: 4,
+            gap: 4,
+        }, children: (0, jsx_runtime_1.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,
+                            } }), (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.d.ts

@@ -0,0 +1 @@
+export declare const defaultColors: string[];

package/Insights/charts/constants.js

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

package/Insights/charts/formatters.d.ts

@@ -0,0 +1,14 @@
+import { AllAxisTick } from '@headless-adminapp/core/experience/insights';
+interface FormatNumberOptions {
+    digit?: number;
+    minDigit?: number;
+    maxDigit?: number;
+}
+export declare const formatCurrencyWithSuffix: (input: number | undefined | null, digit?: number | FormatNumberOptions) => string;
+export declare const formatDate: (input: Date | string | number | undefined | null, format: string) => string;
+export declare const formatCurrency: (input: number | undefined | null, digit?: number | FormatNumberOptions) => string;
+export declare const formatNumber: (input: number | undefined | null, digit?: number | FormatNumberOptions) => string;
+export declare function createAxisFormatter(tick: AllAxisTick): (value: number) => string;
+export type Formatter = (value: unknown) => string;
+export declare function createLongAxisFormatter(tick: AllAxisTick): Formatter;
+export {};