@wavemaker/react-runtime 11.14.1-rc.236

package/components/basic/tree/utils.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processNode = exports.getNestedPropertyLocal = exports.generateUniqueNodeId = exports.findNodeById = void 0;
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
+var _get = _interopRequireDefault(require("lodash-es/get"));
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+// Helper function to get nested property (local version for processNode)
+var getNestedPropertyLocal = exports.getNestedPropertyLocal = function getNestedPropertyLocal(obj, path) {
+  if (!path || !obj) return undefined;
+  try {
+    var normalizedPath = path.replace(/\[(\d+)\]/g, ".$1").replace(/^\./, "");
+    return (0, _get["default"])(obj, normalizedPath);
+  } catch (error) {
+    return undefined;
+  }
+};
+
+// Function to generate unique nodeId
+var generateUniqueNodeId = exports.generateUniqueNodeId = function generateUniqueNodeId(baseId, usedNodeIds) {
+  var uniqueId = baseId;
+  var counter = 1;
+  while (usedNodeIds.has(uniqueId)) {
+    uniqueId = "".concat(baseId, "_").concat(counter);
+    counter++;
+  }
+  usedNodeIds.add(uniqueId);
+  return uniqueId;
+};
+
+// Process a single node and its children with depth tracking
+var processNode = exports.processNode = function processNode(item, depth, parent, rootDataset, nodeIndex, treeName, options) {
+  var levels = options.levels,
+    nodelabel = options.nodelabel,
+    nodeicon = options.nodeicon,
+    nodechildren = options.nodechildren,
+    nodeid = options.nodeid,
+    generateUniqueNodeId = options.generateUniqueNodeId;
+
+  // Helper functions for property resolution
+  var getLabelValue = function getLabelValue() {
+    var _ref, _ref2, _item$nodelabel;
+    if (nodelabel && (nodelabel.includes("[") || nodelabel.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodelabel);
+      if (currentItemValue !== undefined) {
+        return currentItemValue;
+      }
+      // If not found on current item, fall back to default values (don't do global search)
+    }
+    return (_ref = (_ref2 = (_item$nodelabel = item[nodelabel]) !== null && _item$nodelabel !== void 0 ? _item$nodelabel : item.label) !== null && _ref2 !== void 0 ? _ref2 : item.name) !== null && _ref !== void 0 ? _ref : String(item);
+  };
+  var getIconValue = function getIconValue() {
+    var _item$nodeicon;
+    if (nodeicon && (nodeicon.includes("[") || nodeicon.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodeicon);
+      if (currentItemValue !== undefined) {
+        return currentItemValue;
+      }
+      // If not found on current item, fall back to default values (don't do global search)
+    }
+    return (_item$nodeicon = item[nodeicon]) !== null && _item$nodeicon !== void 0 ? _item$nodeicon : item.icon;
+  };
+  var getNodeIdValue = function getNodeIdValue() {
+    if (nodeid && (nodeid.includes("[") || nodeid.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodeid);
+      if (currentItemValue !== undefined) {
+        return String(currentItemValue);
+      }
+      // If not found on current item, return undefined (no fallback like Angular)
+      return undefined;
+    }
+
+    // For direct properties, return the value or undefined (no fallback like Angular)
+    var directValue = item[nodeid];
+    if (directValue !== undefined) {
+      return String(directValue);
+    }
+
+    // If no nodeid specified or found, generate a fallback for React's internal use
+    if (!nodeid) {
+      var _ref3, _item$nodeId;
+      var fallbackId = (_ref3 = (_item$nodeId = item.nodeId) !== null && _item$nodeId !== void 0 ? _item$nodeId : item.id) !== null && _ref3 !== void 0 ? _ref3 : "node_".concat(Date.now(), "_").concat(Math.random());
+      return String(fallbackId);
+    }
+    return undefined;
+  };
+  var getChildrenValue = function getChildrenValue() {
+    if (nodechildren && (nodechildren.includes("[") || nodechildren.includes("."))) {
+      // Try to get the property from the current item only (like Angular's getEvaluatedData)
+      var currentItemValue = getNestedPropertyLocal(item, nodechildren);
+      if (currentItemValue !== undefined) {
+        return currentItemValue;
+      }
+      // If not found on current item, fall back to default values (don't do global search)
+    }
+    // Use logical OR (||) like Angular to fall back to item.children only if the result is falsy
+    return item[nodechildren] || item.children;
+  };
+  var labelValue = getLabelValue();
+  var iconValue = getIconValue();
+  var nodeIdValue = getNodeIdValue();
+  var childrenData = getChildrenValue();
+
+  // Ensure we have a unique nodeId for React's internal use
+  // If nodeIdValue is undefined (like Angular), generate a fallback
+  var finalNodeId = nodeIdValue || generateUniqueNodeId("node_".concat(Date.now(), "_").concat(nodeIndex || 0));
+  var node = {
+    name: String(labelValue || ""),
+    label: String(labelValue || ""),
+    icon: iconValue,
+    nodeId: String(finalNodeId),
+    data: (0, _cloneDeep["default"])(item),
+    open: depth < levels,
+    checked: item.checked || false,
+    parent: parent,
+    tId: treeName ? "".concat(treeName, "_").concat(finalNodeId) : "tree_node_".concat(finalNodeId),
+    isParent: (0, _isArray["default"])(childrenData) && childrenData.length > 0
+  };
+  if ((0, _isArray["default"])(childrenData) && childrenData.length > 0) {
+    node.children = childrenData.map(function (child, index) {
+      return processNode(child, depth + 1, node, rootDataset, index, treeName, options);
+    });
+  }
+  return node;
+};
+var findNodeById = exports.findNodeById = function findNodeById(nodes, id) {
+  var _iterator = _createForOfIteratorHelper(nodes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _node$children;
+      var node = _step.value;
+      if (String(node.nodeId) === String(id)) return node;
+      if ((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length) {
+        var found = findNodeById(node.children, id);
+        if (found) return found;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+};

package/components/basic/video/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _styles = require("@mui/material/styles");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _resourceUrl = require("@wavemaker/react-runtime/utils/resource-url");
+var _excluded = ["subtitlelang", "videoposter", "className"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-video";
+var Video = (0, _styles.styled)("video")({
+  width: "100%",
+  height: "auto"
+});
+var Source = (0, _styles.styled)("source")({});
+var WmVideo = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$subtitlelang = props.subtitlelang,
+    subtitlelang = _props$subtitlelang === void 0 ? "en" : _props$subtitlelang,
+    _props$videoposter = props.videoposter,
+    videoposter = _props$videoposter === void 0 ? "resources/images/imagelists/default-image.png" : _props$videoposter,
+    className = props.className,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var computedPoster = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(videoposter, props.prefabName);
+  }, [videoposter]);
+  var computedMp4 = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.mp4format, props.prefabName);
+  }, [props.mp4format]);
+  var computedWebm = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.webmformat, props.prefabName);
+  }, [props.webmformat]);
+  var computedOgg = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.oggformat, props.prefabName);
+  }, [props.oggformat]);
+  var computedSubtitles = (0, _react.useMemo)(function () {
+    return (0, _resourceUrl.prefixPrefabResourceUrl)(props.subtitlesource, props.prefabName);
+  }, [props.subtitlesource]);
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    title: props.hint,
+    "aria-label": props.arialabel,
+    style: props.styles
+  }, restProps), __jsx(Video, {
+    controls: props.controls,
+    poster: computedPoster,
+    muted: props.muted,
+    loop: props.loop,
+    autoPlay: props.autoplay,
+    preload: props.videopreload,
+    tabIndex: props.tabindex,
+    name: props.name
+  }, computedMp4 && __jsx(Source, {
+    src: computedMp4,
+    type: "video/mp4"
+  }), computedWebm && __jsx(Source, {
+    src: computedWebm,
+    type: "video/webm"
+  }), computedOgg && __jsx(Source, {
+    src: computedOgg,
+    type: "video/ogg"
+  }), computedSubtitles && __jsx("track", {
+    kind: "subtitles",
+    label: subtitlelang,
+    srcLang: subtitlelang,
+    src: computedSubtitles,
+    "default": true
+  }), props.videosupportmessage || "Your browser does not support the video tag."));
+}, function (prev, current) {
+  var keys = ["mp4format", "webmformat", "oggformat", "subtitlelang", "subtitlesource", "poster", "hint"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmVideo.displayName = "WmVideo";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmVideo);

package/components/basic/video/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BarColumnChart = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
+var _chartTooltip = require("../chartTooltip");
+var _chartLegend = require("../chartLegend");
+var _utils = require("../../utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+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;
+  var isBarChart = type === "Bar"; // Bar = horizontal bars, Column = vertical bars
+  var isStacked = viewtype === "Stacked";
+  var formatValue = (0, _react.useCallback)(function (label) {
+    if (typeof label === "number") {
+      return (0, _utils.formatNumber)(label, numberFormat);
+    }
+    return String(label);
+  }, [numberFormat]);
+  var shouldShowLegend = (0, _react.useMemo)(function () {
+    return (0, _utils.isShowLegend)(showlegend);
+  }, [showlegend]);
+  return __jsx(_recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, __jsx(_recharts.BarChart, {
+    data: data,
+    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
+  }, __jsx(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), __jsx(_recharts.XAxis, isBarChart ? _objectSpread({
+    type: "number"
+  }, xAxisConfig) : _objectSpread({
+    dataKey: "x"
+  }, xAxisConfig)), __jsx(_recharts.YAxis, isBarChart ? _objectSpread({
+    dataKey: "x",
+    type: "category",
+    interval: 0
+  }, yAxisConfig) : yAxisConfig), tooltips && __jsx(_recharts.Tooltip, {
+    content: function content(_ref2) {
+      var active = _ref2.active,
+        payload = _ref2.payload,
+        label = _ref2.label;
+      return __jsx(_chartTooltip.ChartTooltip, {
+        active: active,
+        payload: payload,
+        label: label,
+        xDataKeyArr: xDataKeyArr,
+        numberFormat: numberFormat
+      });
+    },
+    wrapperStyle: {
+      zIndex: 9999
+    },
+    shared: true,
+    cursor: {
+      fill: "rgba(0, 0, 0, 0.1)"
+    }
+  }), shouldShowLegend && __jsx(_recharts.Legend, {
+    content: function content(props) {
+      var _props$payload;
+      return __jsx(_chartLegend.ChartLegend, {
+        selectedRegions: selectedRegions,
+        onLegendClick: onLegendClick,
+        legendPosition: legendPosition,
+        payload: ((_props$payload = props === null || props === void 0 ? void 0 : props.payload) !== null && _props$payload !== void 0 ? _props$payload : []).map(function (item) {
+          var _item$dataKey;
+          return {
+            value: item.value || "",
+            color: item.color || "#000",
+            dataKey: (_item$dataKey = item.dataKey) === null || _item$dataKey === void 0 ? void 0 : _item$dataKey.toString()
+          };
+        }),
+        legendtype: legendtype,
+        availableRegions: availableRegions
+      });
+    },
+    wrapperStyle: _objectSpread({}, (0, _utils.getLegendPopupStyle)(legendPosition || "top"))
+  }), dataKeys.map(function (dataKey, index) {
+    var isVisible = selectedRegions.includes(dataKey);
+    return __jsx(_recharts.Bar, {
+      key: dataKey,
+      dataKey: dataKey,
+      name: dataKey,
+      fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+      onClick: onChartClick,
+      isAnimationActive: true,
+      hide: !isVisible,
+      stackId: isStacked && isVisible ? "stack" : undefined
+    }, showValues && __jsx(_recharts.LabelList, {
+      dataKey: dataKey,
+      position: isStacked ? "center" : isBarChart ? "right" : "top",
+      formatter: formatValue
+    }));
+  })));
+});

package/components/chart/components/barColumnChart/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BubbleChart = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
+var _chartTooltip = require("../chartTooltip");
+var _chartLegend = require("../chartLegend");
+var _utils = require("../../utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+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; }
+// 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 calculateDomain = function calculateDomain() {
+    var allValues = data.flatMap(function (item) {
+      return dataKeys.map(function (key) {
+        return item["".concat(key, "_size")] || item[key] || 0;
+      });
+    });
+    return [0, Math.max.apply(Math, (0, _toConsumableArray2["default"])(allValues))];
+  };
+  var domain = calculateDomain();
+  var range = [16, 225]; // Min and max bubble sizes
+
+  // Function to get a random shape
+  var getRandomShape = function getRandomShape() {
+    var randomIndex = Math.floor(Math.random() * VALID_SHAPES.length);
+    return VALID_SHAPES[randomIndex];
+  };
+
+  // Memoize random shapes for each data point to maintain consistency during rerenders
+  var randomShapes = (0, _react.useMemo)(function () {
+    if (shape !== "random") return {};
+    return data.reduce(function (acc, _, index) {
+      acc[index] = getRandomShape();
+      return acc;
+    }, {});
+  }, [data.length, shape]);
+
+  // Modified xAxis config to handle string values
+  var modifiedXAxisConfig = _objectSpread(_objectSpread({}, xAxisConfig), {}, {
+    tickFormatter: function tickFormatter(value, index) {
+      // If we have stored string values, use them
+      if (xDataKeyArr && xDataKeyArr[index] !== undefined) {
+        var label = xDataKeyArr[index];
+        // Truncate long labels
+        return typeof label === "string" && label.length > 20 ? label.substring(0, 17) + "..." : label;
+      }
+      // Fallback to original formatter
+      return xAxisConfig.tickFormatter ? xAxisConfig.tickFormatter(value, index) : value;
+    }
+  });
+  var commonChartElements = __jsx(_react["default"].Fragment, null, __jsx(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), __jsx(_recharts.XAxis, (0, _extends2["default"])({
+    type: "number",
+    dataKey: "x",
+    name: "X"
+  }, modifiedXAxisConfig)), __jsx(_recharts.YAxis, (0, _extends2["default"])({
+    type: "number",
+    dataKey: "y",
+    name: "Y"
+  }, yAxisConfig)), __jsx(_recharts.ZAxis, {
+    type: "number",
+    dataKey: "z",
+    domain: domain,
+    range: range
+  }), tooltips && __jsx(_recharts.Tooltip, {
+    content: function content(_ref2) {
+      var active = _ref2.active,
+        payload = _ref2.payload;
+      if (!active || !payload || !payload.length) return null;
+
+      // Get the x value and its corresponding label
+      var xValue = payload[0].payload.x;
+      var xLabel = xDataKeyArr[xValue] || xValue;
+
+      // Create transformed payload for each series
+      var transformedPayload = dataKeys.filter(function (key) {
+        return selectedRegions.includes(key);
+      }).map(function (dataKey, index) {
+        var seriesPayload = payload.find(function (p) {
+          return p.payload.seriesName === dataKey && p.payload.x === xValue;
+        });
+        if (!seriesPayload) return null;
+        return {
+          name: dataKey,
+          value: Number(seriesPayload.payload.y) || 0,
+          color: (chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % ((chartColors === null || chartColors === void 0 ? void 0 : chartColors.length) || 1)]) || "#8884d8",
+          dataKey: dataKey
+        };
+      }).filter(function (item) {
+        return item !== null;
+      });
+      return __jsx(_chartTooltip.ChartTooltip, {
+        active: active,
+        payload: transformedPayload,
+        label: xLabel,
+        xDataKeyArr: xDataKeyArr,
+        numberFormat: numberFormat
+      });
+    },
+    cursor: {
+      strokeDasharray: "3 3"
+    },
+    wrapperStyle: {
+      zIndex: 9999
+    }
+  }), showLegend && __jsx(_recharts.Legend, {
+    content: function content(props) {
+      return __jsx(_chartLegend.ChartLegend, (0, _extends2["default"])({}, props, {
+        selectedRegions: selectedRegions,
+        onLegendClick: onLegendClick,
+        position: legendPosition
+      }));
+    },
+    wrapperStyle: _objectSpread({}, (0, _utils.getLegendPopupStyle)(legendPosition))
+  }));
+  return __jsx(_recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, __jsx(_recharts.ScatterChart, {
+    margin: margin
+  }, 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";
+    var seriesData = selectedRegions.includes(dataKey) ? data.map(function (item, itemIndex) {
+      return {
+        x: item.x,
+        y: item[dataKey],
+        z: item["".concat(dataKey, "_size")],
+        color: color,
+        seriesName: dataKey,
+        dataKey: dataKey,
+        shape: shape === "random" ? randomShapes[itemIndex] : shape
+      };
+    }) : [];
+    return __jsx(_recharts.Scatter, {
+      key: dataKey,
+      name: dataKey,
+      data: seriesData,
+      fill: color,
+      onClick: function onClick(data, event) {
+        return onChartClick(data, index, event);
+      },
+      shape: shape === "random" ? ((_seriesData$ = seriesData[0]) === null || _seriesData$ === void 0 ? void 0 : _seriesData$.shape) || "circle" : shape
+    });
+  })));
+};

package/components/chart/components/bubbleChart/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/chart/components/chartLegend/components/ClassicLegendItem.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClassicLegendItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var __jsx = _react["default"].createElement;
+var ClassicLegendItem = exports.ClassicLegendItem = function ClassicLegendItem(_ref) {
+  var entry = _ref.entry,
+    index = _ref.index,
+    selectedRegions = _ref.selectedRegions,
+    onItemClick = _ref.onItemClick;
+  return __jsx(_material.Box, {
+    component: "div",
+    key: "legend-".concat(index),
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onItemClick(entry.value, e);
+    },
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer"
+    }
+  }, __jsx(_material.Box, {
+    component: "span",
+    sx: {
+      width: 12,
+      height: 12,
+      backgroundColor: selectedRegions.includes(entry.value) ? entry.color : "transparent",
+      marginRight: 1,
+      borderRadius: "50%",
+      border: "2px solid ".concat(entry.color)
+    }
+  }), __jsx("span", null, entry.value.length > 10 ? entry.value.slice(0, 10) + "..." : entry.value));
+};