@headless-adminapp/fluent 1.4.2 → 1.4.4

package/Insights/charts/AreaChart.js

@@ -3,6 +3,7 @@ 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 locale_1 = require("@headless-adminapp/app/locale");
 const react_1 = require("react");
 const recharts_1 = require("recharts");
 const CustomTooltipContent_1 = require("./CustomTooltipContent");
@@ -10,12 +11,13 @@ const formatters_1 = require("./formatters");
 const renderers_1 = require("./renderers");
 function AreaChart({ dataset, chartInfo, }) {
     const id = (0, react_1.useId)();
+    const locale = (0, locale_1.useLocale)();
     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, id), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, xAxis.tick);
+    const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, 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)(locale, xAxis), (0, renderers_1.renderYAxis)(locale, yAxis), (0, renderers_1.renderAreas)(areas, id), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));

package/Insights/charts/BarChart.js

@@ -3,17 +3,19 @@ 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 locale_1 = require("@headless-adminapp/app/locale");
 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 locale = (0, locale_1.useLocale)();
     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: {
+    const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, xAxis.tick);
+    const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, 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)(locale, yAxis), (0, renderers_1.renderXAxis)(locale, xAxis), (0, renderers_1.renderBars)(bars, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         fill: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.2,
                     }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));

package/Insights/charts/ComposedChart.js

@@ -3,6 +3,7 @@ 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 locale_1 = require("@headless-adminapp/app/locale");
 const react_1 = require("react");
 const recharts_1 = require("recharts");
 const CustomTooltipContent_1 = require("./CustomTooltipContent");
@@ -10,13 +11,32 @@ const formatters_1 = require("./formatters");
 const renderers_1 = require("./renderers");
 function ComposedChart({ dataset, chartInfo, }) {
     const id = (0, react_1.useId)();
+    const locale = (0, locale_1.useLocale)();
     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 ?? []), (0, renderers_1.renderAreas)(chartInfo.areas ?? [], id), (0, renderers_1.renderBars)(chartInfo.bars ?? [], dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    const rightYAxis = chartInfo.rightYAxis;
+    const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, xAxis.tick);
+    const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, yAxis.tick);
+    const rightYAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, rightYAxis?.tick ?? yAxis.tick);
+    const yAxisIdMapping = (0, react_1.useMemo)(() => {
+        const mapping = {};
+        chartInfo.bars?.forEach((bar) => {
+            mapping[bar.dataKey] = bar.yAxisId ?? 'left';
+        });
+        chartInfo.areas?.forEach((area) => {
+            mapping[area.dataKey] = area.yAxisId ?? 'left';
+        });
+        chartInfo.lines?.forEach((line) => {
+            mapping[line.dataKey] = line.yAxisId ?? 'left';
+        });
+        return mapping;
+    }, [chartInfo]);
+    const yAxisIdResolver = (0, react_1.useCallback)((dataKey) => {
+        return yAxisIdMapping[dataKey] ?? 'left';
+    }, [yAxisIdMapping]);
+    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)(locale, yAxis), !!rightYAxis && (0, renderers_1.renderYAxis)(locale, rightYAxis, 'right'), (0, renderers_1.renderXAxis)(locale, xAxis, !!chartInfo.bars?.length), (0, renderers_1.renderLines)(chartInfo.lines ?? []), (0, renderers_1.renderAreas)(chartInfo.areas ?? [], id), (0, renderers_1.renderBars)(chartInfo.bars ?? [], dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
-                    }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
+                    }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, yAxisIdResolver: yAxisIdResolver, rightYAxisFormatter: rightYAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));
 }
 exports.default = ComposedChart;

package/Insights/charts/CustomTooltipContent.d.ts

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

package/Insights/charts/CustomTooltipContent.js

@@ -3,7 +3,7 @@ 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, }) => {
+const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFormatter, rightYAxisFormatter, yAxisIdResolver, }) => {
     if (!active || !payload?.length) {
         return null;
     }
@@ -20,6 +20,8 @@ const CustomTooltipContent = ({ active, payload, label, xAxisFormatter, yAxisFor
                                 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)))) })] }));
+                            } }), (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: yAxisIdResolver?.(item.dataKey) === 'right'
+                                ? (rightYAxisFormatter ?? yAxisFormatter)(item.value)
+                                : yAxisFormatter(item.value) })] }, item.name + String(index)))) })] }));
 };
 exports.CustomTooltipContent = CustomTooltipContent;

package/Insights/charts/FunnelChart.js

@@ -3,21 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FunnelChart = FunnelChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
 const react_1 = require("react");
 const recharts_1 = require("recharts");
 const constants_1 = require("./constants");
 const formatters_1 = require("./formatters");
 const FunnelCustomTooltipContent_1 = require("./FunnelCustomTooltipContent");
 function FunnelChart({ dataset, chartInfo, }) {
+    const locale = (0, locale_1.useLocale)();
     const item = chartInfo;
-    const nameFormatter = (0, formatters_1.createLongAxisFormatter)({
+    const nameFormatter = (0, formatters_1.createLongAxisFormatter)(locale, {
         type: 'category',
         options: item.nameTick?.options,
     });
     const nameFormatterRef = (0, react_1.useRef)(nameFormatter);
     nameFormatterRef.current = nameFormatter;
     const data = dataset[0];
-    const valueFormatter = (0, formatters_1.createLongAxisFormatter)(item.dataTick);
+    const valueFormatter = (0, formatters_1.createLongAxisFormatter)(locale, item.dataTick);
     const transformedData = (0, react_1.useMemo)(() => {
         if (!data?.length) {
             return [];

package/Insights/charts/FunnelCustomTooltipContent.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FunnelCustomTooltipContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
 const formatters_1 = require("./formatters");
 const FunnelCustomTooltipContent = ({ active, payload, valueFormatter, }) => {
+    const locale = (0, locale_1.useLocale)();
     if (!active || !payload?.length) {
         return null;
     }
@@ -22,6 +24,8 @@ const FunnelCustomTooltipContent = ({ active, payload, valueFormatter, }) => {
                                 height: 8,
                                 background: firstPayload.payload.fill,
                                 borderRadius: 4,
-                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: valueFormatter(firstPayload.value) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [(0, formatters_1.formatNumber)(firstPayload.payload.perc * 100, { maxDigit: 2 }), "%"] })] }) })] }));
+                            } }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4, marginLeft: 8 }, children: valueFormatter(firstPayload.value) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, minWidth: 50 } }), (0, jsx_runtime_1.jsxs)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: [(0, formatters_1.formatNumber)(locale, firstPayload.payload.perc * 100, {
+                                    maxDigit: 2,
+                                }), "%"] })] }) })] }));
 };
 exports.FunnelCustomTooltipContent = FunnelCustomTooltipContent;

package/Insights/charts/LineChart.js

@@ -3,17 +3,19 @@ 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 locale_1 = require("@headless-adminapp/app/locale");
 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 locale = (0, locale_1.useLocale)();
     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);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(yAxis), (0, renderers_1.renderXAxis)(xAxis), (0, renderers_1.renderLines)(lines), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, xAxis.tick);
+    const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, yAxis.tick);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(locale, yAxis), (0, renderers_1.renderXAxis)(locale, xAxis), (0, renderers_1.renderLines)(lines), (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.js

@@ -4,6 +4,7 @@ exports.barSizeInTime = void 0;
 exports.OhlcChart = OhlcChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const locale_1 = require("@headless-adminapp/app/locale");
 const insights_1 = require("@headless-adminapp/core/experience/insights");
 const react_1 = require("react");
 const recharts_1 = require("recharts");
@@ -29,6 +30,7 @@ const barSizeInTime = (interval) => {
 };
 exports.barSizeInTime = barSizeInTime;
 function OhlcChart({ dataset, chartInfo, }) {
+    const locale = (0, locale_1.useLocale)();
     const bar = chartInfo.bars[0];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const data = dataset[bar.dataIndex ?? 0];
@@ -43,10 +45,10 @@ function OhlcChart({ dataset, chartInfo, }) {
         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);
-    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)({
+    const xAxisFormatter = (0, formatters_1.createAxisFormatter)(locale, xAxis.tick);
+    const xAxisLongFormatter = (0, formatters_1.createLongAxisFormatter)(locale, chartInfo.xAxis.tick);
+    const yAxisLongFormatter = (0, formatters_1.createLongAxisFormatter)(locale, chartInfo.yAxis.tick);
+    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)(locale, {
                     ...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: {

package/Insights/charts/PieChart.js

@@ -4,10 +4,12 @@ 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 locale_1 = require("@headless-adminapp/app/locale");
 const recharts_1 = require("recharts");
 const constants_1 = require("./constants");
 const formatters_1 = require("./formatters");
 function PieChart({ dataset, chartInfo, }) {
+    const locale = (0, locale_1.useLocale)();
     const RADIAN = Math.PI / 180;
     const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, }) => {
         const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
@@ -19,8 +21,8 @@ function PieChart({ dataset, chartInfo, }) {
         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);
+    const nameFormatter = (0, formatters_1.createLongAxisFormatter)(locale, item.nameTick);
+    const valueFormatter = (0, formatters_1.createLongAxisFormatter)(locale, 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, blendStroke: true, legendType: "circle", 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: {

package/Insights/charts/RadarChart.js

@@ -4,14 +4,16 @@ 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 locale_1 = require("@headless-adminapp/app/locale");
 const recharts_1 = require("recharts");
 const formatters_1 = require("./formatters");
 function RadarChart({ dataset, chartInfo, }) {
+    const locale = (0, locale_1.useLocale)();
     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);
+    const nameFormatter = (0, formatters_1.createLongAxisFormatter)(locale, radar.nameTick);
+    const valueFormatter = (0, formatters_1.createLongAxisFormatter)(locale, radar.dataTick);
+    const tickFormatter = (0, formatters_1.createAxisFormatter)(locale, 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,

package/Insights/charts/ScatterChart.js

@@ -3,13 +3,15 @@ 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 locale_1 = require("@headless-adminapp/app/locale");
 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, false, { left: 10, right: 10 }), (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) => {
+    const locale = (0, locale_1.useLocale)();
+    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)(locale, chartInfo.xAxis, false, { left: 10, right: 10 }), (0, renderers_1.renderYAxis)(locale, 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, {});
                         }
@@ -17,6 +19,7 @@ function ScatterChart({ dataset, chartInfo, }) {
                     } })] }) }));
 }
 const ScatterTooltipContent = (props) => {
+    const locale = (0, locale_1.useLocale)();
     const chartInfo = props.chartInfo;
     const dataset = props.dataset;
     const xAxis = chartInfo.xAxis;
@@ -61,9 +64,9 @@ 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);
+    const xAxisFormatter = (0, formatters_1.createLongAxisFormatter)(locale, xAxis.tick);
+    const yAxisFormatter = (0, formatters_1.createLongAxisFormatter)(locale, yAxis.tick);
+    const zAxisFormatter = (0, formatters_1.createLongAxisFormatter)(locale, zAxis.tick);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flexDirection: 'column',

package/Insights/charts/formatters.d.ts

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

package/Insights/charts/formatters.js

@@ -28,7 +28,7 @@ function extractNumberInfo(value) {
         };
     }
 }
-const formatCurrencyWithSuffix = (input, digit = 2) => {
+const formatCurrencyWithSuffix = (locale, input, digit = 2) => {
     const suffix = ['K', 'M', 'B', 'T'];
     if (input === null || input === undefined) {
         return '';
@@ -37,10 +37,11 @@ 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 ((0, exports.formatCurrency)(locale, sign * (abs / Math.pow(1000, i)), digit) +
+            suffix[i - 1]);
     }
     else {
-        return (0, exports.formatCurrency)(input, digit);
+        return (0, exports.formatCurrency)(locale, input, digit);
     }
 };
 exports.formatCurrencyWithSuffix = formatCurrencyWithSuffix;
@@ -51,28 +52,28 @@ const formatDate = (input, format) => {
     return (0, dayjs_1.default)(new Date(input)).format(format);
 };
 exports.formatDate = formatDate;
-const formatCurrency = (input, digit = 2) => {
+const formatCurrency = (locale, input, digit = 2) => {
     if (input === null || input === undefined) {
         return '';
     }
     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',
+    const formatter = new Intl.NumberFormat(locale.locale, {
         style: 'currency',
+        currency: locale.currency.currency,
         minimumFractionDigits: minDigit,
         maximumFractionDigits: maxDigit,
     });
     return formatter.format(input || 0);
 };
 exports.formatCurrency = formatCurrency;
-const formatNumber = (input, digit = 2) => {
+const formatNumber = (locale, input, digit = 2) => {
     if (input === null || input === undefined) {
         return '';
     }
     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', {
+    const formatter = new Intl.NumberFormat(locale.locale, {
         minimumFractionDigits: minDigit,
         maximumFractionDigits: maxDigit,
     });
@@ -118,27 +119,27 @@ function createFullTimeAxisFormatter(format) {
     const formatString = timeLongAxisFormats[format];
     return (value) => (0, exports.formatDate)(new Date(value), formatString);
 }
-function createNumberAxisFormatter(options) {
+function createNumberAxisFormatter(locale, options) {
     return (value) => {
         const info = extractNumberInfo(value);
         if (!info) {
             return '';
         }
-        return (0, exports.formatNumber)(info.value, options) + info.symbol;
+        return (0, exports.formatNumber)(locale, info.value, options) + info.symbol;
     };
 }
-function createLongNumberAxisFormatter(options) {
+function createLongNumberAxisFormatter(locale, options) {
     return (value) => {
-        return (0, exports.formatNumber)(value, options);
+        return (0, exports.formatNumber)(locale, value, options);
     };
 }
-function createCurrencyAxisFormatter() {
+function createCurrencyAxisFormatter(locale) {
     return (value) => {
         const info = extractNumberInfo(value);
         if (!info) {
             return '';
         }
-        return (0, exports.formatCurrency)(info.value, 0) + info.symbol;
+        return (0, exports.formatCurrency)(locale, info.value, 0) + info.symbol;
     };
 }
 function createCategoryAxisFormatter(options) {
@@ -152,14 +153,14 @@ function createCategoryAxisFormatter(options) {
         return typeof value === 'string' ? value : String(value);
     };
 }
-function createAxisFormatter(tick) {
+function createAxisFormatter(locale, tick) {
     switch (tick.type) {
         case 'time':
             return createTimeAxisFormatter(tick.format);
         case 'number':
-            return createNumberAxisFormatter(tick);
+            return createNumberAxisFormatter(locale, tick);
         case 'currency':
-            return createCurrencyAxisFormatter();
+            return createCurrencyAxisFormatter(locale);
         case 'category':
             return createCategoryAxisFormatter(tick.options);
         case 'weekday':
@@ -168,14 +169,14 @@ function createAxisFormatter(tick) {
             return (value) => String(value);
     }
 }
-function createLongAxisFormatter(tick) {
+function createLongAxisFormatter(locale, tick) {
     switch (tick.type) {
         case 'time':
             return createFullTimeAxisFormatter(tick.format);
         case 'number':
-            return createLongNumberAxisFormatter(tick);
+            return createLongNumberAxisFormatter(locale, tick);
         case 'currency':
-            return createCurrencyAxisFormatter();
+            return createCurrencyAxisFormatter(locale);
         case 'category':
             return createCategoryAxisFormatter(tick.options);
         case 'weekday':

package/Insights/charts/renderers.d.ts

@@ -1,7 +1,8 @@
 import { AreaInfo, BarInfo, LineInfo, XAxis, YAxis } from '@headless-adminapp/core/experience/insights';
+import { Locale } from '@headless-adminapp/core/experience/locale';
 import { XAxisProps } from 'recharts';
-export declare function renderXAxis(axis: XAxis, forceCategory?: boolean, padding?: XAxisProps['padding']): import("react/jsx-runtime").JSX.Element;
-export declare function renderYAxis(axis: YAxis): import("react/jsx-runtime").JSX.Element;
+export declare function renderXAxis(locale: Locale, axis: XAxis, forceCategory?: boolean, padding?: XAxisProps['padding']): import("react/jsx-runtime").JSX.Element;
+export declare function renderYAxis(locale: Locale, axis: YAxis, axisId?: 'left' | 'right'): import("react/jsx-runtime").JSX.Element;
 export declare function renderGrid(): import("react/jsx-runtime").JSX.Element;
 export declare function renderLine(line: LineInfo): import("react/jsx-runtime").JSX.Element;
 export declare function renderLines(lines: LineInfo[]): import("react/jsx-runtime").JSX.Element[];

package/Insights/charts/renderers.js

@@ -14,8 +14,8 @@ const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 const recharts_1 = require("recharts");
 const formatters_1 = require("./formatters");
-function renderXAxis(axis, forceCategory = false, padding = 'gap') {
-    const xAxisFormatter = (0, formatters_1.createAxisFormatter)(axis.tick);
+function renderXAxis(locale, axis, forceCategory = false, padding = 'gap') {
+    const xAxisFormatter = (0, formatters_1.createAxisFormatter)(locale, axis.tick);
     return ((0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: axis.dataKey, name: axis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, 
         // padding={{ left: 10, right: 10 }}
         padding: padding, axisLine: {
@@ -25,9 +25,9 @@ function renderXAxis(axis, forceCategory = false, padding = 'gap') {
             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: {
+function renderYAxis(locale, axis, axisId = 'left') {
+    const yAxisFormatter = (0, formatters_1.createAxisFormatter)(locale, axis.tick);
+    return ((0, jsx_runtime_1.jsx)(recharts_1.YAxis, { yAxisId: axisId, dataKey: axis.dataKey, orientation: axisId === 'right' ? 'right' : 'left', 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,
             opacity: 0.5,
         } }));
@@ -37,7 +37,7 @@ function renderGrid() {
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderLine(line) {
-    return ((0, jsx_runtime_1.jsx)(recharts_1.Line, { yAxisId: 'left', type: line.curveType, dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Line, { yAxisId: line.yAxisId ?? 'left', type: line.curveType, dataKey: line.dataKey, name: line.dataLabel, stroke: line.color, strokeWidth: 2, dot: false, activeDot: {
             stroke: line.color,
         } }, line.dataKey));
 }
@@ -47,7 +47,7 @@ function renderLines(lines) {
 }
 // eslint-disable-next-line unused-imports/no-unused-vars
 function renderArea(area, chartId) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: chartId + ':' + area.dataKey, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: area.color, stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: area.color, stopOpacity: 0 })] }) }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { yAxisId: 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: chartId + ':' + area.dataKey, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: area.color, stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: area.color, stopOpacity: 0 })] }) }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { yAxisId: area.yAxisId ?? 'left', type: area.curveType, dataKey: area.dataKey, name: area.dataLabel, stroke: area.color, 
                 // fill={area.color}
                 fill: `url(#${chartId}:${area.dataKey})`, strokeWidth: 2, dot: false, activeDot: {
                     stroke: area.color,
@@ -59,7 +59,7 @@ function renderAreas(areas, chartId) {
 }
 // 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, radius: bar.radius, barSize: bar.barSize }, bar.dataKey));
+    return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { yAxisId: bar.yAxisId ?? 'left', type: bar.curveType, dataKey: bar.dataKey, name: bar.dataLabel, stroke: bar.color, fill: bar.color, strokeWidth: 1, stackId: bar.stackId, radius: bar.radius, barSize: bar.barSize }, bar.dataKey));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function renderBars(bars, dataset) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "150c2a6eee123cdb3cb42b1f42f1b4bea8db2756"
+  "gitHead": "ca80572e64d16eafd78c1e511c0f15b563af51e5"
 }