@wavemaker/react-runtime 11.14.3-rc.6401 → 11.15.0-2.247

package/components/chart/components/barColumnChart/index.js

@@ -16,32 +16,32 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var BarColumnChart = exports.BarColumnChart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var type = _ref.type,
-    data = _ref.data,
-    dataKeys = _ref.dataKeys,
-    selectedRegions = _ref.selectedRegions,
-    chartColors = _ref.chartColors,
-    margin = _ref.margin,
-    barSpacing = _ref.barSpacing,
-    showValues = _ref.showValues,
-    _ref$legendPosition = _ref.legendPosition,
-    legendPosition = _ref$legendPosition === void 0 ? "top" : _ref$legendPosition,
-    xAxisConfig = _ref.xAxisConfig,
-    yAxisConfig = _ref.yAxisConfig,
-    numberFormat = _ref.numberFormat,
-    xDataKeyArr = _ref.xDataKeyArr,
-    onChartClick = _ref.onChartClick,
-    onLegendClick = _ref.onLegendClick,
-    _ref$tooltips = _ref.tooltips,
-    tooltips = _ref$tooltips === void 0 ? true : _ref$tooltips,
-    _ref$showlegend = _ref.showlegend,
-    showlegend = _ref$showlegend === void 0 ? true : _ref$showlegend,
-    legendtype = _ref.legendtype,
-    availableRegions = _ref.availableRegions,
-    _ref$viewtype = _ref.viewtype,
-    viewtype = _ref$viewtype === void 0 ? "Grouped" : _ref$viewtype,
-    shouldShowLegend = _ref.shouldShowLegend;
+var BarColumnChart = exports.BarColumnChart = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$offsetleft, _props$offsetright, _props$offsettop, _props$offsetbottom;
+  var type = props.type,
+    data = props.data,
+    dataKeys = props.dataKeys,
+    selectedRegions = props.selectedRegions,
+    chartColors = props.chartColors,
+    margin = props.margin,
+    barSpacing = props.barSpacing,
+    showValues = props.showValues,
+    _props$legendPosition = props.legendPosition,
+    legendPosition = _props$legendPosition === void 0 ? "top" : _props$legendPosition,
+    xAxisConfig = props.xAxisConfig,
+    yAxisConfig = props.yAxisConfig,
+    numberFormat = props.numberFormat,
+    xDataKeyArr = props.xDataKeyArr,
+    onChartClick = props.onChartClick,
+    onLegendClick = props.onLegendClick,
+    _props$tooltips = props.tooltips,
+    tooltips = _props$tooltips === void 0 ? true : _props$tooltips,
+    _props$showLegend = props.showLegend,
+    showLegend = _props$showLegend === void 0 ? true : _props$showLegend,
+    legendtype = props.legendtype,
+    availableRegions = props.availableRegions,
+    _props$viewtype = props.viewtype,
+    viewtype = _props$viewtype === void 0 ? "Grouped" : _props$viewtype;
   var isBarChart = type === "Bar"; // Bar = horizontal bars, Column = vertical bars
   var isStacked = viewtype === "Stacked";
   var formatValue = (0, _react.useCallback)(function (label) {
@@ -58,8 +58,11 @@ var BarColumnChart = exports.BarColumnChart = /*#__PURE__*/(0, _react.memo)(func
     margin: margin,
     layout: isBarChart ? "vertical" : "horizontal" // vertical layout = horizontal bars, horizontal layout = vertical bars
     ,
-    barGap: isStacked ? 0 : (0, _utils.getBarSpacingValue)(barSpacing || "medium", "value"),
-    barCategoryGap: isStacked ? 0 : undefined
+    barGap: isStacked ? 0 : barSpacing ? (0, _utils.getBarSpacingValue)(barSpacing !== null && barSpacing !== void 0 ? barSpacing : "0.5", "value") : undefined,
+    barCategoryGap: barSpacing ? (0, _utils.getBarSpacingValue)(barSpacing !== null && barSpacing !== void 0 ? barSpacing : "0.5", "value") : undefined,
+    style: {
+      transform: "translate(calc(".concat((_props$offsetleft = props.offsetleft) !== null && _props$offsetleft !== void 0 ? _props$offsetleft : 0, "px - ").concat((_props$offsetright = props.offsetright) !== null && _props$offsetright !== void 0 ? _props$offsetright : 0, "px), calc(").concat((_props$offsettop = props.offsettop) !== null && _props$offsettop !== void 0 ? _props$offsettop : 0, "px - ").concat((_props$offsetbottom = props.offsetbottom) !== null && _props$offsetbottom !== void 0 ? _props$offsetbottom : 0, "px))")
+    }
   }, __jsx(_recharts.CartesianGrid, {
     strokeDasharray: "3 3"
   }), __jsx(_recharts.XAxis, isBarChart ? _objectSpread({
@@ -71,10 +74,10 @@ var BarColumnChart = exports.BarColumnChart = /*#__PURE__*/(0, _react.memo)(func
     type: "category",
     interval: 0
   }, yAxisConfig) : yAxisConfig), tooltips && __jsx(_recharts.Tooltip, {
-    content: function content(_ref2) {
-      var active = _ref2.active,
-        payload = _ref2.payload,
-        label = _ref2.label;
+    content: function content(_ref) {
+      var active = _ref.active,
+        payload = _ref.payload,
+        label = _ref.label;
       return __jsx(_chartTooltip.ChartTooltip, {
         active: active,
         payload: payload,
@@ -90,7 +93,7 @@ var BarColumnChart = exports.BarColumnChart = /*#__PURE__*/(0, _react.memo)(func
     cursor: {
       fill: "rgba(0, 0, 0, 0.1)"
     }
-  }), shouldShowLegend && __jsx(_recharts.Legend, {
+  }), showLegend && __jsx(_recharts.Legend, {
     content: function content(props) {
       var _props$payload;
       return __jsx(_chartLegend.ChartLegend, {

package/components/chart/components/bubbleChart/index.js

@@ -20,24 +20,25 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Define valid scatter shapes
 var VALID_SHAPES = ["circle", "diamond", "square", "triangle"];
-var BubbleChart = exports.BubbleChart = function BubbleChart(_ref) {
-  var data = _ref.data,
-    dataKeys = _ref.dataKeys,
-    selectedRegions = _ref.selectedRegions,
-    chartColors = _ref.chartColors,
-    margin = _ref.margin,
-    showLegend = _ref.showLegend,
-    legendPosition = _ref.legendPosition,
-    xAxisConfig = _ref.xAxisConfig,
-    yAxisConfig = _ref.yAxisConfig,
-    numberFormat = _ref.numberFormat,
-    xDataKeyArr = _ref.xDataKeyArr,
-    onLegendClick = _ref.onLegendClick,
-    onChartClick = _ref.onChartClick,
-    _ref$tooltips = _ref.tooltips,
-    tooltips = _ref$tooltips === void 0 ? true : _ref$tooltips,
-    _ref$shape = _ref.shape,
-    shape = _ref$shape === void 0 ? "circle" : _ref$shape;
+var BubbleChart = exports.BubbleChart = function BubbleChart(props) {
+  var _props$offsetleft, _props$offsetright, _props$offsettop, _props$offsetbottom;
+  var data = props.data,
+    dataKeys = props.dataKeys,
+    selectedRegions = props.selectedRegions,
+    chartColors = props.chartColors,
+    margin = props.margin,
+    showLegend = props.showLegend,
+    legendPosition = props.legendPosition,
+    xAxisConfig = props.xAxisConfig,
+    yAxisConfig = props.yAxisConfig,
+    numberFormat = props.numberFormat,
+    xDataKeyArr = props.xDataKeyArr,
+    onLegendClick = props.onLegendClick,
+    onChartClick = props.onChartClick,
+    _props$tooltips = props.tooltips,
+    tooltips = _props$tooltips === void 0 ? true : _props$tooltips,
+    _props$shape = props.shape,
+    shape = _props$shape === void 0 ? "circle" : _props$shape;
   var calculateDomain = function calculateDomain() {
     var allValues = data.flatMap(function (item) {
       return dataKeys.map(function (key) {
@@ -65,11 +66,17 @@ var BubbleChart = exports.BubbleChart = function BubbleChart(_ref) {
   }, [data.length, shape]);
 
   // Modified xAxis config to handle string values
+  // For bubble charts, x values are numeric indices (0, 1, 2...) with labels stored in xDataKeyArr
   var modifiedXAxisConfig = _objectSpread(_objectSpread({}, xAxisConfig), {}, {
+    // Explicitly set ticks to only appear at valid data indices
+    ticks: xDataKeyArr && xDataKeyArr.length > 0 ? xDataKeyArr.map(function (_, i) {
+      return i;
+    }) : undefined,
     tickFormatter: function tickFormatter(value, index) {
-      // If we have stored string values, use them
-      if (xDataKeyArr && xDataKeyArr[index] !== undefined) {
-        var label = xDataKeyArr[index];
+      // Use the value (x coordinate = data index) to look up the label, not the tick index
+      var dataIndex = Math.round(value);
+      if (xDataKeyArr && Number.isInteger(dataIndex) && dataIndex >= 0 && dataIndex < xDataKeyArr.length && xDataKeyArr[dataIndex] !== undefined) {
+        var label = xDataKeyArr[dataIndex];
         // Truncate long labels
         return typeof label === "string" && label.length > 20 ? label.substring(0, 17) + "..." : label;
       }
@@ -93,9 +100,9 @@ var BubbleChart = exports.BubbleChart = function BubbleChart(_ref) {
     domain: domain,
     range: range
   }), tooltips && __jsx(_recharts.Tooltip, {
-    content: function content(_ref2) {
-      var active = _ref2.active,
-        payload = _ref2.payload;
+    content: function content(_ref) {
+      var active = _ref.active,
+        payload = _ref.payload;
       if (!active || !payload || !payload.length) return null;
 
       // Get the x value and its corresponding label
@@ -147,7 +154,10 @@ var BubbleChart = exports.BubbleChart = function BubbleChart(_ref) {
     width: "100%",
     height: "100%"
   }, __jsx(_recharts.ScatterChart, {
-    margin: margin
+    margin: margin,
+    style: {
+      transform: "translate(calc(".concat((_props$offsetleft = props.offsetleft) !== null && _props$offsetleft !== void 0 ? _props$offsetleft : 0, "px - ").concat((_props$offsetright = props.offsetright) !== null && _props$offsetright !== void 0 ? _props$offsetright : 0, "px), calc(").concat((_props$offsettop = props.offsettop) !== null && _props$offsettop !== void 0 ? _props$offsettop : 0, "px - ").concat((_props$offsetbottom = props.offsetbottom) !== null && _props$offsetbottom !== void 0 ? _props$offsetbottom : 0, "px))")
+    }
   }, commonChartElements, dataKeys.map(function (dataKey, index) {
     var _seriesData$;
     var color = (chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % ((chartColors === null || chartColors === void 0 ? void 0 : chartColors.length) || 1)]) || "#8884d8";

package/components/chart/components/chartLegend/utils.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mapLegendItems = void 0;
 var mapLegendItems = exports.mapLegendItems = function mapLegendItems(availableRegions, payload, chartColors) {
-  if (!(availableRegions !== null && availableRegions !== void 0 && availableRegions.length)) {
+  var _payload$length, _availableRegions$len;
+  if (!(availableRegions !== null && availableRegions !== void 0 && availableRegions.length) || ((_payload$length = payload === null || payload === void 0 ? void 0 : payload.length) !== null && _payload$length !== void 0 ? _payload$length : 0) > ((_availableRegions$len = availableRegions === null || availableRegions === void 0 ? void 0 : availableRegions.length) !== null && _availableRegions$len !== void 0 ? _availableRegions$len : 0)) {
     return (payload || []).map(function (item) {
       var _item$dataKey;
       return {

package/components/chart/components/cumulativeLineChart/index.js

@@ -18,41 +18,45 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var CumulativeLineChart = exports.CumulativeLineChart = function CumulativeLineChart(_ref) {
-  var data = _ref.data,
-    dataKeys = _ref.dataKeys,
-    selectedRegions = _ref.selectedRegions,
-    chartColors = _ref.chartColors,
-    margin = _ref.margin,
-    xAxisConfig = _ref.xAxisConfig,
-    yAxisConfig = _ref.yAxisConfig,
-    numberFormat = _ref.numberFormat,
-    xDataKeyArr = _ref.xDataKeyArr,
-    onLegendClick = _ref.onLegendClick,
-    _ref$tooltips = _ref.tooltips,
-    tooltips = _ref$tooltips === void 0 ? true : _ref$tooltips,
-    interpolation = _ref.interpolation,
-    strokeWidth = _ref.strokeWidth,
-    pointSize = _ref.pointSize,
-    onChartClick = _ref.onChartClick,
-    showLegend = _ref.showLegend,
-    legendPosition = _ref.legendPosition,
-    legendtype = _ref.legendtype,
-    availableRegions = _ref.availableRegions;
+var CumulativeLineChart = exports.CumulativeLineChart = function CumulativeLineChart(props) {
+  var _props$offsetleft, _props$offsetright, _props$offsettop, _props$offsetbottom;
+  var data = props.data,
+    dataKeys = props.dataKeys,
+    selectedRegions = props.selectedRegions,
+    chartColors = props.chartColors,
+    margin = props.margin,
+    xAxisConfig = props.xAxisConfig,
+    yAxisConfig = props.yAxisConfig,
+    numberFormat = props.numberFormat,
+    xDataKeyArr = props.xDataKeyArr,
+    onLegendClick = props.onLegendClick,
+    _props$tooltips = props.tooltips,
+    tooltips = _props$tooltips === void 0 ? true : _props$tooltips,
+    interpolation = props.interpolation,
+    strokeWidth = props.strokeWidth,
+    pointSize = props.pointSize,
+    onChartClick = props.onChartClick,
+    showLegend = props.showLegend,
+    legendPosition = props.legendPosition,
+    legendtype = props.legendtype,
+    availableRegions = props.availableRegions;
   var cumulativeData = (0, _react.useMemo)(function () {
     return (0, _utils2.calculateCumulativeData)(data, dataKeys);
   }, [data, dataKeys]);
   var commonProps = {
     data: cumulativeData,
-    margin: margin
+    margin: margin,
+    style: {
+      transform: "translate(calc(".concat((_props$offsetleft = props.offsetleft) !== null && _props$offsetleft !== void 0 ? _props$offsetleft : 0, "px - ").concat((_props$offsetright = props.offsetright) !== null && _props$offsetright !== void 0 ? _props$offsetright : 0, "px), calc(").concat((_props$offsettop = props.offsettop) !== null && _props$offsettop !== void 0 ? _props$offsettop : 0, "px - ").concat((_props$offsetbottom = props.offsetbottom) !== null && _props$offsetbottom !== void 0 ? _props$offsetbottom : 0, "px))")
+    }
   };
   var commonChartElements = __jsx(_react["default"].Fragment, null, __jsx(_recharts.CartesianGrid, {
     strokeDasharray: "3 3"
   }), __jsx(_recharts.XAxis, xAxisConfig), __jsx(_recharts.YAxis, yAxisConfig), tooltips && __jsx(_recharts.Tooltip, {
-    content: function content(_ref2) {
-      var active = _ref2.active,
-        payload = _ref2.payload,
-        label = _ref2.label;
+    content: function content(_ref) {
+      var active = _ref.active,
+        payload = _ref.payload,
+        label = _ref.label;
       return __jsx(_chartTooltip.ChartTooltip, {
         active: active,
         payload: payload,

package/components/chart/components/lineAreaChart/index.js

@@ -17,41 +17,46 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var LineAreaChart = exports.LineAreaChart = function LineAreaChart(_ref) {
-  var type = _ref.type,
-    data = _ref.data,
-    dataKeys = _ref.dataKeys,
-    selectedRegions = _ref.selectedRegions,
-    chartColors = _ref.chartColors,
-    margin = _ref.margin,
-    showLegend = _ref.showLegend,
-    legendPosition = _ref.legendPosition,
-    xAxisConfig = _ref.xAxisConfig,
-    yAxisConfig = _ref.yAxisConfig,
-    numberFormat = _ref.numberFormat,
-    xDataKeyArr = _ref.xDataKeyArr,
-    interpolation = _ref.interpolation,
-    strokeWidth = _ref.strokeWidth,
-    pointSize = _ref.pointSize,
-    _ref$areaViewType = _ref.areaViewType,
-    areaViewType = _ref$areaViewType === void 0 ? "none" : _ref$areaViewType,
-    onChartClick = _ref.onChartClick,
-    onLegendClick = _ref.onLegendClick,
-    _ref$tooltips = _ref.tooltips,
-    tooltips = _ref$tooltips === void 0 ? true : _ref$tooltips,
-    legendtype = _ref.legendtype,
-    availableRegions = _ref.availableRegions;
+var LineAreaChart = exports.LineAreaChart = function LineAreaChart(props) {
+  var _props$offsetleft, _props$offsetright, _props$offsettop, _props$offsetbottom;
+  var type = props.type,
+    data = props.data,
+    dataKeys = props.dataKeys,
+    selectedRegions = props.selectedRegions,
+    chartColors = props.chartColors,
+    margin = props.margin,
+    showLegend = props.showLegend,
+    legendPosition = props.legendPosition,
+    xAxisConfig = props.xAxisConfig,
+    yAxisConfig = props.yAxisConfig,
+    numberFormat = props.numberFormat,
+    xDataKeyArr = props.xDataKeyArr,
+    interpolation = props.interpolation,
+    strokeWidth = props.strokeWidth,
+    pointSize = props.pointSize,
+    _props$areaViewType = props.areaViewType,
+    areaViewType = _props$areaViewType === void 0 ? "none" : _props$areaViewType,
+    onChartClick = props.onChartClick,
+    onLegendClick = props.onLegendClick,
+    _props$tooltips = props.tooltips,
+    tooltips = _props$tooltips === void 0 ? true : _props$tooltips,
+    legendtype = props.legendtype,
+    availableRegions = props.availableRegions,
+    onAreaSelect = props.onAreaSelect;
   var commonProps = {
     data: data,
-    margin: margin
+    margin: margin,
+    style: {
+      transform: "translate(calc(".concat((_props$offsetleft = props.offsetleft) !== null && _props$offsetleft !== void 0 ? _props$offsetleft : 0, "px - ").concat((_props$offsetright = props.offsetright) !== null && _props$offsetright !== void 0 ? _props$offsetright : 0, "px), calc(").concat((_props$offsettop = props.offsettop) !== null && _props$offsettop !== void 0 ? _props$offsettop : 0, "px - ").concat((_props$offsetbottom = props.offsetbottom) !== null && _props$offsetbottom !== void 0 ? _props$offsetbottom : 0, "px))")
+    }
   };
   var commonChartElements = __jsx(_react["default"].Fragment, null, __jsx(_recharts.CartesianGrid, {
     strokeDasharray: "3 3"
   }), __jsx(_recharts.XAxis, xAxisConfig), __jsx(_recharts.YAxis, yAxisConfig), tooltips && __jsx(_recharts.Tooltip, {
-    content: function content(_ref2) {
-      var active = _ref2.active,
-        payload = _ref2.payload,
-        label = _ref2.label;
+    content: function content(_ref) {
+      var active = _ref.active,
+        payload = _ref.payload,
+        label = _ref.label;
       return __jsx(_chartTooltip.ChartTooltip, {
         active: active,
         payload: payload,
@@ -112,12 +117,19 @@ var LineAreaChart = exports.LineAreaChart = function LineAreaChart(_ref) {
         fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
         onClick: onChartClick
       },
-      onClick: onChartClick,
+      activeDot: {
+        r: pointSize === 0 ? 2 : pointSize,
+        // in this way achieved similar effect as angular preview
+        strokeWidth: 1,
+        fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+        onClick: onChartClick
+      },
       isAnimationActive: true,
       hide: !selectedRegions.includes(dataKey)
     });
   })) : __jsx(_recharts.AreaChart, (0, _extends2["default"])({}, commonProps, {
-    stackOffset: areaViewType
+    stackOffset: areaViewType,
+    className: "area-chart-clickable-dots"
   }), commonChartElements, dataKeys.map(function (dataKey, index) {
     return __jsx(_recharts.Area, {
       key: dataKey,
@@ -131,7 +143,13 @@ var LineAreaChart = exports.LineAreaChart = function LineAreaChart(_ref) {
         r: pointSize,
         strokeWidth: 1,
         fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
-        onClick: onChartClick
+        onClick: onAreaSelect
+      },
+      activeDot: {
+        r: pointSize,
+        strokeWidth: 1,
+        fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+        onClick: onAreaSelect
       },
       isAnimationActive: true,
       hide: !selectedRegions.includes(dataKey)

package/components/chart/components/pieDonutChart/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PieDonutChart = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("../../utils");
 var _recharts = require("recharts");
@@ -71,14 +72,17 @@ var PieDonutChart = exports.PieDonutChart = function PieDonutChart(_ref2) {
     legendtype = _ref2.legendtype,
     availableRegions = _ref2.availableRegions,
     donutratio = _ref2.donutratio,
-    ynumberformat = _ref2.ynumberformat,
     centerlabel = _ref2.centerlabel,
     shouldShowLegend = _ref2.shouldShowLegend,
     onChartClick = _ref2.onChartClick,
     onLegendClick = _ref2.onLegendClick,
     showLegend = _ref2.showLegend,
     xDataKeyArr = _ref2.xDataKeyArr,
-    numberFormat = _ref2.numberFormat;
+    numberFormat = _ref2.numberFormat,
+    offsetleft = _ref2.offsetleft,
+    offsettop = _ref2.offsettop,
+    offsetright = _ref2.offsetright,
+    offsetbottom = _ref2.offsetbottom;
   var total = data.reduce(function (sum, item) {
     return sum + item.value;
   }, 0);
@@ -101,13 +105,18 @@ var PieDonutChart = exports.PieDonutChart = function PieDonutChart(_ref2) {
   return __jsx("div", {
     style: {
       position: "relative",
+      minWidth: "300px",
       width: "100%",
       height: "100%"
     }
   }, __jsx(_recharts.ResponsiveContainer, {
     width: "100%",
     height: "100%"
-  }, __jsx(_recharts.PieChart, commonProps, __jsx(_recharts.Pie, {
+  }, __jsx(_recharts.PieChart, (0, _extends2["default"])({}, commonProps, {
+    style: {
+      transform: "translate(calc(".concat(offsetleft !== null && offsetleft !== void 0 ? offsetleft : 0, "px - ").concat(offsetright !== null && offsetright !== void 0 ? offsetright : 0, "px), calc(").concat(offsettop !== null && offsettop !== void 0 ? offsettop : 0, "px - ").concat(offsetbottom !== null && offsetbottom !== void 0 ? offsetbottom : 0, "px))")
+    }
+  }), __jsx(_recharts.Pie, {
     data: filteredData,
     dataKey: "value",
     nameKey: "name",
@@ -124,7 +133,7 @@ var PieDonutChart = exports.PieDonutChart = function PieDonutChart(_ref2) {
     isAnimationActive: true,
     labelLine: false,
     label: showlabels !== "hide" ? function (props) {
-      return renderCustomizedLabel(props, labeltype, ynumberformat !== null && ynumberformat !== void 0 ? ynumberformat : "", total, showlabels);
+      return renderCustomizedLabel(props, labeltype, numberFormat !== null && numberFormat !== void 0 ? numberFormat : "", total, showlabels);
     } : false
   }, filteredData.map(function (entry, index) {
     return __jsx(_recharts.Cell, {

package/components/chart/hooks/useXAxisConfig.js

@@ -20,7 +20,9 @@ function useXAxisConfig(_ref) {
     getDefaultXAxisLabel = _ref.getDefaultXAxisLabel,
     xnumberformat = _ref.xnumberformat,
     showxaxis = _ref.showxaxis,
-    xaxislabeldistance = _ref.xaxislabeldistance;
+    xaxislabeldistance = _ref.xaxislabeldistance,
+    _ref$showxdistance = _ref.showxdistance,
+    showxdistance = _ref$showxdistance === void 0 ? false : _ref$showxdistance;
   var xAxisConfig = (0, _react.useMemo)(function () {
     var _chartContainerRef$cu;
     var tickFontSize = 12;
@@ -35,14 +37,13 @@ function useXAxisConfig(_ref) {
       return d === null || d === void 0 ? void 0 : d.x;
     });
     var displayLabels = rawLabels.length > 0 ? rawLabels.map(function (val, idx) {
-      var _v;
       var v = val;
       if (xnumberformat && typeof v === "number") {
         v = (0, _utils.formatNumber)(v, xnumberformat);
       } else if (xDataKeyArr.length > 0 && xDataKeyArr[idx] !== undefined) {
         v = xDataKeyArr[idx];
       }
-      return String((_v = v) !== null && _v !== void 0 ? _v : "");
+      return String(v !== null && v !== void 0 ? v : "");
     }) : (xDataKeyArr || []).map(function (v) {
       return String(v !== null && v !== void 0 ? v : "");
     });
@@ -52,7 +53,6 @@ function useXAxisConfig(_ref) {
     var mayOverlap = maxLabelChars * approxCharWidth > maxWidthPx;
     var shouldStagger = type !== "Bar" && mayOverlap;
     var XAxisTickWithTooltip = function XAxisTickWithTooltip(_ref2) {
-      var _displayValue;
       var x = _ref2.x,
         y = _ref2.y,
         payload = _ref2.payload,
@@ -62,10 +62,16 @@ function useXAxisConfig(_ref) {
       var displayValue = rawValue;
       if (xnumberformat && typeof rawValue === "number") {
         displayValue = (0, _utils.formatNumber)(rawValue, xnumberformat);
-      } else if (xDataKeyArr.length > 0 && typeof index === "number" && xDataKeyArr[index] !== undefined) {
-        displayValue = xDataKeyArr[index];
+      } else if (xDataKeyArr.length > 0) {
+        // For bubble/scatter charts, rawValue is the data index (numeric).
+        // Use rawValue to look up the label when it's a valid integer index.
+        // Fall back to tick index for other chart types where values match indices.
+        var dataIndex = typeof rawValue === "number" ? Math.round(rawValue) : index;
+        if (Number.isInteger(dataIndex) && dataIndex >= 0 && dataIndex < xDataKeyArr.length && xDataKeyArr[dataIndex] !== undefined) {
+          displayValue = xDataKeyArr[dataIndex];
+        }
       }
-      var fullText = String((_displayValue = displayValue) !== null && _displayValue !== void 0 ? _displayValue : "");
+      var fullText = String(displayValue !== null && displayValue !== void 0 ? displayValue : "");
       var needsEllipsis = fullText.length > maxChars;
       var truncatedText = needsEllipsis ? fullText.slice(0, Math.max(0, maxChars - 1)) + "…" : fullText;
       var textAnchor = "middle";
@@ -80,11 +86,12 @@ function useXAxisConfig(_ref) {
     return {
       hide: !showxaxis,
       label: {
-        // value: getDefaultXAxisLabel(),
+        value: getDefaultXAxisLabel(),
         position: "insideBottom",
         offset: xaxislabeldistance,
         fill: "#000"
       },
+      tickLine: showxdistance,
       // Ensure all x-axis labels render
       interval: 0,
       // Provide extra space only when staggering is needed