@wavemaker/react-runtime 11.14.1-15.6409

package/components/chart/index.js

@@ -0,0 +1,930 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var _lodash = require("lodash");
+var _utils = require("./utils");
+var _constant = require("./constant");
+var _noDataMessage = require("./components/noDataMessage");
+var _barColumnChart = require("./components/barColumnChart");
+var _lineAreaChart = require("./components/lineAreaChart");
+var _bubbleChart = require("./components/bubbleChart");
+var _cumulativeLineChart = require("./components/cumulativeLineChart");
+var _pieDonutChart = require("./components/pieDonutChart");
+var _excluded = ["title", "type", "subheading", "datavalue", "groupby", "aggregation", "aggregationcolumn", "orderby", "xaxisdatakey", "xaxislabel", "xnumberformat", "xdigits", "xdateformat", "xaxislabeldistance", "xunits", "yaxisdatakey", "yaxislabel", "ynumberformat", "ydigits", "yaxislabeldistance", "yunits", "iconclass", "nodatamessage", "loadingdatamsg", "tooltips", "showlegend", "showlabelsoutside", "showvalues", "staggerlabels", "reducexticks", "showlabels", "labeltype", "barspacing", "donutratio", "bubblesize", "showxdistance", "showydistance", "areaviewtype", "interpolation", "centerlabel", "customcolors", "theme", "offset", "offsettop", "offsetbottom", "offsetright", "offsetleft", "showxaxis", "showyaxis", "linethickness", "highlightpoints", "formattype", "dataset", "datasource", "width", "height", "shape", "onSelect", "onTransform", "onBeforerender", "xdomain", "ydomain", "labelthreshold", "legendtype", "viewtype", "fontsize", "fontunit", "color", "fontfamily", "fontweight", "fontstyle", "textdecoration", "className", "show", "styles", "name"];
+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 WmChart = function WmChart(props) {
+  var title = props.title,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "Column" : _props$type,
+    subheading = props.subheading,
+    datavalue = props.datavalue,
+    groupby = props.groupby,
+    _props$aggregation = props.aggregation,
+    aggregation = _props$aggregation === void 0 ? "none" : _props$aggregation,
+    aggregationcolumn = props.aggregationcolumn,
+    orderby = props.orderby,
+    xaxisdatakey = props.xaxisdatakey,
+    xaxislabel = props.xaxislabel,
+    xnumberformat = props.xnumberformat,
+    xdigits = props.xdigits,
+    xdateformat = props.xdateformat,
+    _props$xaxislabeldist = props.xaxislabeldistance,
+    xaxislabeldistance = _props$xaxislabeldist === void 0 ? -12 : _props$xaxislabeldist,
+    xunits = props.xunits,
+    yaxisdatakey = props.yaxisdatakey,
+    yaxislabel = props.yaxislabel,
+    ynumberformat = props.ynumberformat,
+    ydigits = props.ydigits,
+    _props$yaxislabeldist = props.yaxislabeldistance,
+    yaxislabeldistance = _props$yaxislabeldist === void 0 ? 12 : _props$yaxislabeldist,
+    yunits = props.yunits,
+    iconclass = props.iconclass,
+    _props$nodatamessage = props.nodatamessage,
+    nodatamessage = _props$nodatamessage === void 0 ? "No Data Available." : _props$nodatamessage,
+    _props$loadingdatamsg = props.loadingdatamsg,
+    loadingdatamsg = _props$loadingdatamsg === void 0 ? "Loading..." : _props$loadingdatamsg,
+    _props$tooltips = props.tooltips,
+    tooltips = _props$tooltips === void 0 ? true : _props$tooltips,
+    _props$showlegend = props.showlegend,
+    showlegend = _props$showlegend === void 0 ? "top" : _props$showlegend,
+    _props$showlabelsouts = props.showlabelsoutside,
+    showlabelsoutside = _props$showlabelsouts === void 0 ? true : _props$showlabelsouts,
+    _props$showvalues = props.showvalues,
+    showvalues = _props$showvalues === void 0 ? false : _props$showvalues,
+    _props$staggerlabels = props.staggerlabels,
+    staggerlabels = _props$staggerlabels === void 0 ? false : _props$staggerlabels,
+    _props$reducexticks = props.reducexticks,
+    reducexticks = _props$reducexticks === void 0 ? true : _props$reducexticks,
+    _props$showlabels = props.showlabels,
+    showlabels = _props$showlabels === void 0 ? "outside" : _props$showlabels,
+    _props$labeltype = props.labeltype,
+    labeltype = _props$labeltype === void 0 ? "percent" : _props$labeltype,
+    _props$barspacing = props.barspacing,
+    barspacing = _props$barspacing === void 0 ? "medium" : _props$barspacing,
+    _props$donutratio = props.donutratio,
+    donutratio = _props$donutratio === void 0 ? "medium" : _props$donutratio,
+    bubblesize = props.bubblesize,
+    _props$showxdistance = props.showxdistance,
+    showxdistance = _props$showxdistance === void 0 ? false : _props$showxdistance,
+    _props$showydistance = props.showydistance,
+    showydistance = _props$showydistance === void 0 ? false : _props$showydistance,
+    _props$areaviewtype = props.areaviewtype,
+    areaviewtype = _props$areaviewtype === void 0 ? "none" : _props$areaviewtype,
+    _props$interpolation = props.interpolation,
+    interpolation = _props$interpolation === void 0 ? "linear" : _props$interpolation,
+    centerlabel = props.centerlabel,
+    customcolors = props.customcolors,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "Azure" : _props$theme,
+    offset = props.offset,
+    _props$offsettop = props.offsettop,
+    offsettop = _props$offsettop === void 0 ? 25 : _props$offsettop,
+    _props$offsetbottom = props.offsetbottom,
+    offsetbottom = _props$offsetbottom === void 0 ? 55 : _props$offsetbottom,
+    _props$offsetright = props.offsetright,
+    offsetright = _props$offsetright === void 0 ? 25 : _props$offsetright,
+    _props$offsetleft = props.offsetleft,
+    offsetleft = _props$offsetleft === void 0 ? 75 : _props$offsetleft,
+    _props$showxaxis = props.showxaxis,
+    showxaxis = _props$showxaxis === void 0 ? true : _props$showxaxis,
+    _props$showyaxis = props.showyaxis,
+    showyaxis = _props$showyaxis === void 0 ? true : _props$showyaxis,
+    linethickness = props.linethickness,
+    _props$highlightpoint = props.highlightpoints,
+    highlightpoints = _props$highlightpoint === void 0 ? false : _props$highlightpoint,
+    formattype = props.formattype,
+    dataset = props.dataset,
+    datasource = props.datasource,
+    width = props.width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? "400px" : _props$height,
+    _props$shape = props.shape,
+    shape = _props$shape === void 0 ? "circle" : _props$shape,
+    onSelect = props.onSelect,
+    onTransform = props.onTransform,
+    onBeforerender = props.onBeforerender,
+    _props$xdomain = props.xdomain,
+    xdomain = _props$xdomain === void 0 ? "Default" : _props$xdomain,
+    _props$ydomain = props.ydomain,
+    ydomain = _props$ydomain === void 0 ? "Default" : _props$ydomain,
+    _props$labelthreshold = props.labelthreshold,
+    labelthreshold = _props$labelthreshold === void 0 ? 0.01 : _props$labelthreshold,
+    _props$legendtype = props.legendtype,
+    legendtype = _props$legendtype === void 0 ? "furious" : _props$legendtype,
+    _props$viewtype = props.viewtype,
+    viewtype = _props$viewtype === void 0 ? "Grouped" : _props$viewtype,
+    fontsize = props.fontsize,
+    fontunit = props.fontunit,
+    color = props.color,
+    fontfamily = props.fontfamily,
+    fontweight = props.fontweight,
+    fontstyle = props.fontstyle,
+    textdecoration = props.textdecoration,
+    className = props.className,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles,
+    name = props.name,
+    otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  // const muiTheme = useTheme();
+  var _useState = (0, _react.useState)(false),
+    isLoadInProgress = _useState[0],
+    setIsLoadInProgress = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    showContentLoadError = _useState2[0],
+    setShowContentLoadError = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    invalidConfig = _useState3[0],
+    setInvalidConfig = _useState3[1];
+  var _useState4 = (0, _react.useState)(""),
+    errMsg = _useState4[0],
+    setErrMsg = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    chartData = _useState5[0],
+    setChartData = _useState5[1];
+  var _useState6 = (0, _react.useState)([]),
+    processedData = _useState6[0],
+    setProcessedData = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    xDataKeyArr = _useState7[0],
+    setXDataKeyArr = _useState7[1];
+  var _useState8 = (0, _react.useState)(null),
+    selectedItem = _useState8[0],
+    setSelectedItem = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    isVisuallyGrouped = _useState9[0],
+    setIsVisuallyGrouped = _useState9[1];
+  var _useState0 = (0, _react.useState)(""),
+    xAxisDataType = _useState0[0],
+    setXAxisDataType = _useState0[1];
+  var _useState1 = (0, _react.useState)([]),
+    selectedRegions = _useState1[0],
+    setSelectedRegions = _useState1[1];
+  var _useState10 = (0, _react.useState)([]),
+    availableRegions = _useState10[0],
+    setAvailableRegions = _useState10[1];
+  var chartContainerRef = (0, _react.useRef)(null);
+  var chartColors = (0, _react.useMemo)(function () {
+    var _themes;
+    if (customcolors) {
+      if ((0, _lodash.isString)(customcolors)) {
+        return (0, _lodash.split)(customcolors, ",");
+      }
+      if ((0, _lodash.isArray)(customcolors)) {
+        return customcolors;
+      }
+    }
+    return ((_themes = _constant.themes[theme]) === null || _themes === void 0 ? void 0 : _themes.colors) || _constant.themes["Terrestrial"].colors;
+  }, [customcolors, theme]);
+
+  /**
+   * Timeout ref used to distinguish a single click from a double click on legend items.
+   * When the first click occurs we start a timer; if a second click arrives before the
+   * timer fires we treat it as a double-click and cancel the pending single-click logic.
+   */
+  var legendClickTimeoutRef = (0, _react.useRef)(null);
+
+  // COMPLETE binddataset logic from Angular
+  var binddataset = (0, _react.useMemo)(function () {
+    return dataset !== undefined;
+  }, [dataset]);
+  var shouldShowLegend = (0, _react.useMemo)(function () {
+    return (0, _utils.isShowLegend)(showlegend);
+  }, [showlegend]);
+  var legendPosition = (0, _react.useMemo)(function () {
+    // For line charts, only allow 'hide', 'top', and 'bottom'
+    if (type === "Line") {
+      if (showlegend === "top") return "top";
+      if (showlegend === "bottom") return "bottom";
+      return "top"; // default to top for any other value
+    }
+
+    // For other chart types, keep existing logic
+    if (showlegend === "top") return "top";
+    if (showlegend === "bottom") return "bottom";
+    if (showlegend === "right") return "right";
+    return "top";
+  }, [showlegend, type]);
+
+  // BUG FIX 1: Default caption visible in UI
+  var getDefaultXAxisLabel = (0, _react.useCallback)(function () {
+    // In a horizontal Bar chart the numeric series (yaxisdatakey) is plotted along X.
+    if (type === "Bar") {
+      if (yaxislabel) {
+        return "".concat(yaxislabel).concat(yunits ? " (".concat(yunits, ")") : "");
+      }
+      if (yaxisdatakey) {
+        var keys = yaxisdatakey.split(",").map(function (k) {
+          return (0, _utils.prettifyLabels)(k.trim());
+        });
+        return "".concat(keys.join(" ")).concat(yunits ? " (".concat(yunits, ")") : "");
+      }
+    }
+    if (xaxislabel) {
+      return "".concat(xaxislabel).concat(xunits ? " (".concat(xunits, ")") : "");
+    }
+    if (xaxisdatakey) {
+      return "".concat((0, _utils.prettifyLabels)(xaxisdatakey)).concat(xunits ? " (".concat(xunits, ")") : "");
+    }
+    return "x caption";
+  }, [type, xaxislabel, xaxisdatakey, xunits, yaxislabel, yaxisdatakey, yunits]);
+
+  // BUG FIX 3: YAxis caption updating properly
+  var getDefaultYAxisLabel = (0, _react.useCallback)(function () {
+    // In a horizontal Bar chart the categorical series (xaxisdatakey) is plotted along Y.
+    if (type === "Bar") {
+      if (xaxislabel) {
+        return "".concat(xaxislabel).concat(xunits ? " (".concat(xunits, ")") : "");
+      }
+      if (xaxisdatakey) {
+        return "".concat((0, _utils.prettifyLabels)(xaxisdatakey)).concat(xunits ? " (".concat(xunits, ")") : "");
+      }
+    }
+    if (yaxislabel) {
+      return "".concat(yaxislabel).concat(yunits ? " (".concat(yunits, ")") : "");
+    }
+    if (yaxisdatakey) {
+      var keys = yaxisdatakey.split(",").map(function (key) {
+        return (0, _utils.prettifyLabels)(key.trim());
+      });
+      return "".concat(keys.join(" ")).concat(yunits ? " (".concat(yunits, ")") : "");
+    }
+    return "y caption";
+  }, [type, yaxislabel, yaxisdatakey, yunits, xaxislabel, xaxisdatakey, xunits]);
+
+  // COMPLETE Angular helper functions
+  var isGroupByEnabled = (0, _react.useCallback)(function () {
+    return !!(groupby && groupby !== _utils.NONE);
+  }, [groupby]);
+  var isAggregationEnabled = (0, _react.useCallback)(function () {
+    return !!(isGroupByEnabled() && aggregation !== _utils.NONE && aggregationcolumn);
+  }, [aggregation, aggregationcolumn, isGroupByEnabled]);
+  var isDataFilteringEnabled = (0, _react.useCallback)(function () {
+    return isAggregationEnabled() || !isVisuallyGrouped && orderby;
+  }, [isAggregationEnabled, isVisuallyGrouped, orderby]);
+
+  // BUG FIX 2 & 8: getxAxisVal function - Fixed to properly handle xaxisdatakey
+  var getxAxisVal = (0, _react.useCallback)(function (dataObj, xKey, index) {
+    var value = (0, _lodash.get)(dataObj, xKey);
+
+    // For bubble charts with non-numeric x values, use indices
+    if ((0, _utils.isBubbleChart)(type) && typeof value === "string") {
+      // Store the actual value for display
+      if (value !== undefined && value !== null) {
+        setXDataKeyArr(function (prev) {
+          var newArr = (0, _toConsumableArray2["default"])(prev);
+          if (index !== undefined) {
+            newArr[index] = value;
+          }
+          return newArr;
+        });
+      }
+      return index !== undefined ? index : 0;
+    }
+
+    // For line type charts with non-numeric data, use indices but store original values
+    if ((0, _utils.isLineTypeChart)(type) && !(0, _utils.isNumberType)(xAxisDataType)) {
+      // Store the actual value for display
+      if (value !== undefined && value !== null) {
+        setXDataKeyArr(function (prev) {
+          var newArr = (0, _toConsumableArray2["default"])(prev);
+          if (index !== undefined) {
+            newArr[index] = value;
+          }
+          return newArr;
+        });
+      }
+      if (value instanceof Date) {
+        return value;
+      } else {
+        return index !== undefined ? index : value;
+      }
+    }
+    return value;
+  }, [type, xAxisDataType]);
+
+  // COMPLETE valueFinder function from Angular
+  var valueFinder = (0, _react.useCallback)(function (dataObj, xKey, yKey, index, shapeVal) {
+    var xVal = getxAxisVal(dataObj, xKey, index);
+    var value = (0, _lodash.get)(dataObj, yKey);
+    var yVal = parseFloat(value) || value;
+    var size = parseFloat(dataObj[bubblesize || ""]) || 2;
+    var dataPoint = {};
+    if ((0, _utils.isChartDataJSON)(type)) {
+      dataPoint.x = xVal;
+      dataPoint.y = yVal;
+      if ((0, _utils.isBubbleChart)(type)) {
+        dataPoint.size = size;
+        dataPoint.shape = shapeVal || "circle";
+      }
+    } else if ((0, _utils.isChartDataArray)(type)) {
+      dataPoint = [xVal, yVal];
+    }
+    dataPoint._dataObj = dataObj;
+    return dataPoint;
+  }, [getxAxisVal, bubblesize, type]);
+  var getValidData = (0, _react.useCallback)(function (values) {
+    return values.length === 1 && values[0] === undefined ? [] : values;
+  }, []);
+
+  // COMPLETE processChartData function from Angular - FIXED to avoid state updates
+  var processChartData = (0, _react.useCallback)(function (processedDataset) {
+    if (!binddataset) {
+      var sampleData = (0, _utils.getSampleData)({
+        type: type,
+        yaxisdatakey: yaxisdatakey,
+        shape: shape
+      });
+      return sampleData;
+    }
+    if (!processedDataset || processedDataset.length === 0) {
+      return [];
+    }
+    var datum = [];
+    var yAxisKey;
+    var shapes = [];
+    var values = [];
+    var xAxisKey = xaxisdatakey;
+    var yAxisKeys = yaxisdatakey ? yaxisdatakey.split(",").map(function (k) {
+      return k.trim();
+    }) : [];
+    var dataSet = processedDataset;
+    if ((0, _lodash.isArray)(dataSet)) {
+      if ((0, _utils.isPieType)(type)) {
+        yAxisKey = yAxisKeys[0];
+        datum = (0, _lodash.map)(dataSet, function (dataObj, index) {
+          if (!(0, _lodash.isEmpty)(dataSet[index])) {
+            return valueFinder(dataSet[index], xAxisKey || "", yAxisKey);
+          }
+          return undefined;
+        });
+        datum = getValidData(datum);
+      } else {
+        if ((0, _utils.isBubbleChart)(type)) {
+          shapes.push(shape === "random" ? _utils.allShapes : shape);
+        }
+        yAxisKeys.forEach(function (yAxisKey, series) {
+          values = (0, _lodash.map)(dataSet, function (dataObj, index) {
+            if (!(0, _lodash.isEmpty)(dataSet[index])) {
+              return valueFinder(dataSet[index], xAxisKey || "", yAxisKey, index, (0, _lodash.isArray)(shapes) && shapes[series] || shape);
+            }
+            return undefined;
+          });
+          values = getValidData(values);
+          datum.push({
+            values: values,
+            key: (0, _utils.prettifyLabels)(yAxisKey)
+          });
+        });
+      }
+    }
+    return datum;
+  }, [binddataset, type, xaxisdatakey, yaxisdatakey, shape, valueFinder, getValidData]);
+
+  // COMPLETE getVisuallyGroupedData function from Angular - FIXED to avoid state updates
+  var getVisuallyGroupedData = (0, _react.useCallback)(function (queryResponse, groupingColumn) {
+    var groupData = {};
+    var groupValues = [];
+    var orderByDetails;
+    var maxLength;
+    var chartDataResult = [];
+    var _isAreaChart = (0, _utils.isAreaChart)(type);
+    var yAxisKey = (0, _lodash.first)((0, _lodash.split)(yaxisdatakey || "", ","));
+    var processedResponse = (0, _lodash.orderBy)(queryResponse, (0, _lodash.split)(groupby || "", ","));
+    if (orderby) {
+      orderByDetails = (0, _utils.getLodashOrderByFormat)(orderby);
+      processedResponse = (0, _lodash.orderBy)(processedResponse, orderByDetails.columns, orderByDetails.orders);
+    }
+    var groupedResponse = (0, _lodash.groupBy)(processedResponse, groupingColumn);
+    if (_isAreaChart) {
+      maxLength = (0, _lodash.max)((0, _lodash.map)(groupedResponse, function (obj) {
+        return obj.length;
+      })) || 0;
+    }
+    (0, _lodash.forEach)(groupedResponse, function (values, groupKey) {
+      groupValues = _isAreaChart ? (0, _lodash.fill)(new Array(maxLength || 0), [0, 0]) : [];
+      (0, _lodash.forEachRight)(values, function (value, index) {
+        groupValues[index] = valueFinder(value, xaxisdatakey || "", yAxisKey || "", index);
+      });
+      groupData = {
+        key: groupKey,
+        values: groupValues
+      };
+      chartDataResult.push(groupData);
+    });
+    return chartDataResult;
+  }, [groupby, orderby, type, xaxisdatakey, yaxisdatakey, valueFinder]);
+
+  // COMPLETE getGroupingDetails function from Angular
+  var getGroupingDetails = (0, _react.useCallback)(function () {
+    if (isGroupByEnabled() && !isAggregationEnabled()) {
+      var isVisuallyGroupedResult = false;
+      var visualGroupingColumn;
+      var groupingColumnIndex;
+      var columns = [];
+      var groupbyColumns = groupby && groupby !== _utils.NONE ? groupby.split(",") : [];
+      var yAxisKeys = yaxisdatakey ? yaxisdatakey.split(",").map(function (k) {
+        return k.trim();
+      }) : [];
+      if (groupbyColumns.length > 1) {
+        for (var i = 0; i < groupbyColumns.length; i++) {
+          var column = groupbyColumns[i];
+          if (xaxisdatakey !== column && !yAxisKeys.includes(column)) {
+            isVisuallyGroupedResult = true;
+            visualGroupingColumn = column;
+            groupingColumnIndex = i;
+            groupbyColumns.splice(groupingColumnIndex, 1);
+            break;
+          }
+        }
+        if (visualGroupingColumn) {
+          columns.push(visualGroupingColumn);
+        }
+        if (groupbyColumns.length) {
+          columns.push.apply(columns, (0, _toConsumableArray2["default"])(groupbyColumns));
+        }
+      }
+      if (xaxisdatakey !== aggregationcolumn) {
+        columns.push(xaxisdatakey || "");
+      }
+      yAxisKeys.forEach(function (key) {
+        if (key !== aggregationcolumn) {
+          columns.push(key);
+        }
+      });
+      var groupingExpression = columns.join(",");
+      setIsVisuallyGrouped(isVisuallyGroupedResult);
+      return {
+        expression: groupingExpression,
+        isVisuallyGrouped: isVisuallyGroupedResult,
+        visualGroupingColumn: visualGroupingColumn
+      };
+    }
+    return {
+      expression: "",
+      isVisuallyGrouped: false,
+      visualGroupingColumn: ""
+    };
+  }, [aggregationcolumn, groupby, isAggregationEnabled, isGroupByEnabled, xaxisdatakey, yaxisdatakey]);
+  var transformForRecharts = (0, _react.useCallback)(function (data) {
+    if (!data || data.length === 0) return [];
+    return (0, _utils.convertToRechartsFormat)(data, type);
+  }, [type]);
+
+  // COMPLETE getAggregatedData function from Angular (simplified for React)
+  var getAggregatedData = (0, _react.useCallback)(function (callback) {
+    // This would typically make API calls in a real implementation
+    // For now, we'll process the data directly
+    (0, _utils.triggerFn)(callback);
+  }, []);
+  var filterDataByRegions = (0, _react.useCallback)(function (data) {
+    if (!data || data.length === 0) return [];
+    if ((0, _utils.isPieType)(type)) {
+      return data.filter(function (item) {
+        return selectedRegions.includes(item.x);
+      });
+    } else {
+      return data.filter(function (series) {
+        return selectedRegions.includes(series.key);
+      });
+    }
+  }, [selectedRegions, type]);
+
+  // BUG FIX 9: Get available regions considering groupBy
+  var getAvailableRegions = (0, _react.useCallback)(function (data) {
+    if (!data || data.length === 0) return [];
+    if ((0, _utils.isPieType)(type)) {
+      return (0, _lodash.uniq)(data.map(function (item) {
+        return item.x;
+      }));
+    } else {
+      // For grouped data, use the group keys
+      if (isGroupByEnabled() && groupby) {
+        var groupKeys = (0, _lodash.uniq)(data.map(function (series) {
+          return series.key;
+        }));
+        return groupKeys;
+      }
+      return (0, _lodash.uniq)(data.map(function (series) {
+        return series.key;
+      }));
+    }
+  }, [type, isGroupByEnabled, groupby]);
+
+  // Handle beforerender event
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      onBeforerender === null || onBeforerender === void 0 || onBeforerender(props, renderChart);
+    }, 10);
+  }, []);
+
+  // COMPLETE _plotChartProxy function from Angular - FIXED to avoid infinite loops
+  var _plotChartProxy = (0, _react.useCallback)(function () {
+    setShowContentLoadError(false);
+    setInvalidConfig(false);
+    setIsLoadInProgress(true);
+    try {
+      var groupingDetails = getGroupingDetails();
+      var data;
+      var isValidAxis = binddataset ? !!(xaxisdatakey && yaxisdatakey) : true;
+      if (!isValidAxis) {
+        setProcessedData([]);
+      } else if (groupingDetails.isVisuallyGrouped && !(0, _utils.isPieType)(type)) {
+        data = getVisuallyGroupedData(chartData, groupingDetails.visualGroupingColumn || "");
+        var filteredData = filterDataByRegions(data);
+        setProcessedData(transformForRecharts(filteredData));
+      } else {
+        data = processChartData(chartData);
+        var _filteredData = filterDataByRegions(data);
+        setProcessedData(transformForRecharts(_filteredData));
+      }
+    } catch (error) {
+      console.error("Error processing chart data:", error);
+      setShowContentLoadError(true);
+      setInvalidConfig(true);
+      setErrMsg("Error processing chart data");
+    } finally {
+      setIsLoadInProgress(false);
+    }
+  }, [binddataset, chartData, getGroupingDetails, getVisuallyGroupedData, processChartData, transformForRecharts, type, xaxisdatakey, yaxisdatakey, filterDataByRegions, props]);
+  var handleTransform = (0, _react.useCallback)(function () {
+    if (onTransform) {
+      var transformedData = onTransform({}, props);
+      if (transformedData) {
+        setChartData(transformedData);
+        return; // Exit early if data is transformed
+      }
+    }
+  }, [onTransform, props]);
+
+  // Memoize the data processing functions to prevent infinite loops
+  var processDataWithFilters = (0, _react.useCallback)(function (data) {
+    var filteredData = filterDataByRegions(data);
+    return transformForRecharts(filteredData);
+  }, [filterDataByRegions, transformForRecharts]);
+  var setupRegions = (0, _react.useCallback)(function (data) {
+    var regions = getAvailableRegions(data);
+    if (!(0, _lodash.isEqual)(regions, availableRegions)) {
+      setAvailableRegions(regions);
+      // Initialize selectedRegions with all regions if empty
+      setSelectedRegions(function (prev) {
+        if (prev.length === 0) {
+          return regions;
+        }
+        var validRegions = prev.filter(function (region) {
+          return regions.includes(region);
+        });
+        return validRegions.length > 0 ? validRegions : regions;
+      });
+    }
+  }, [getAvailableRegions, availableRegions]);
+
+  // Single effect to handle all data processing
+  (0, _react.useEffect)(function () {
+    var data = [];
+    if (!binddataset) {
+      var _data;
+      // Use sample data
+      data = (0, _utils.getSampleData)({
+        type: type,
+        yaxisdatakey: yaxisdatakey,
+        shape: shape
+      });
+      // set the xDataKeyArr to the datakeys in the data
+      var dd = (_data = data) === null || _data === void 0 ? void 0 : _data.map(function (item) {
+        var _item$values;
+        return (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values.map(function (item) {
+          return item.x;
+        });
+      });
+      setXDataKeyArr(dd.flat());
+    } else if (dataset) {
+      // Use real dataset
+      var processedDataset = (0, _lodash.isArray)(dataset) ? dataset : [dataset];
+      setChartData(processedDataset);
+      if (processedDataset.length > 0) {
+        data = processChartData(processedDataset);
+      }
+    }
+    if (data.length > 0) {
+      setupRegions(data);
+      setProcessedData(processDataWithFilters(data));
+    }
+  }, [binddataset, dataset, type, yaxisdatakey, shape, processDataWithFilters, setupRegions]);
+
+  // Handle chart data updates - only when NOT using onTransform
+  (0, _react.useEffect)(function () {
+    if (binddataset && chartData.length > 0 && !onTransform) {
+      _plotChartProxy();
+    }
+  }, [binddataset, chartData, onTransform]);
+
+  // Handle transform separately
+  (0, _react.useEffect)(function () {
+    if (binddataset) {
+      handleTransform();
+    }
+  }, [binddataset]);
+
+  // Handle region selection changes
+  (0, _react.useEffect)(function () {
+    if (selectedRegions.length > 0 && chartData.length > 0) {
+      var data = binddataset ? processChartData(chartData) : (0, _utils.getSampleData)({
+        type: type,
+        yaxisdatakey: yaxisdatakey,
+        shape: shape
+      });
+      setProcessedData(processDataWithFilters(data));
+    }
+  }, [selectedRegions]);
+
+  // Handle window resize
+  (0, _react.useEffect)(function () {
+    var handleResize = function handleResize() {
+      if (binddataset && chartData.length > 0) {
+        _plotChartProxy();
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, [binddataset, chartData.length]);
+
+  // BUG FIX 10: Fixed onSelect event handler
+  var handleChartClick = (0, _react.useCallback)(function (data, event) {
+    if (!data || !onSelect) return;
+    var selectedChartItem = data;
+    var dataObj = (data === null || data === void 0 ? void 0 : data._dataObj) || data;
+    setSelectedItem(dataObj);
+    onSelect === null || onSelect === void 0 || onSelect(event, props, dataObj, selectedChartItem);
+  }, [onSelect, props]);
+  var getXAxisConfig = (0, _react.useMemo)(function () {
+    return {
+      hide: !showxaxis,
+      label: {
+        value: getDefaultXAxisLabel(),
+        position: "insideBottom",
+        offset: xaxislabeldistance,
+        fill: "#000"
+      },
+      tick: {
+        fontSize: 12,
+        fontFamily: "inherit",
+        fill: "currentColor"
+      },
+      tickFormatter: xnumberformat ? function (value) {
+        return (0, _utils.formatNumber)(value, xnumberformat);
+      } : function (value, index) {
+        // BUG FIX 2 & 8: Show actual values instead of indices
+        if (xDataKeyArr.length > 0 && index !== undefined && xDataKeyArr[index] !== undefined) {
+          return xDataKeyArr[index];
+        }
+        // console.log('value line 721', value);
+        return value;
+      }
+    };
+  }, [showxaxis, getDefaultXAxisLabel, xnumberformat, xDataKeyArr]);
+  var getYAxisConfig = (0, _react.useMemo)(function () {
+    return {
+      hide: !showyaxis,
+      label: {
+        value: (0, _utils.truncateText)(getDefaultYAxisLabel(), 20),
+        angle: -90,
+        position: "insideLeft",
+        offset: yaxislabeldistance,
+        fill: "#000",
+        style: {
+          textAnchor: "middle"
+        }
+      },
+      tick: {
+        fontSize: 12,
+        fontFamily: "inherit",
+        fill: "currentColor"
+      },
+      tickFormatter: function tickFormatter(value, index) {
+        if (typeof value === "number") {
+          return (0, _utils.formatNumber)(value, ynumberformat);
+        }
+        return value;
+      }
+    };
+  }, [showyaxis, getDefaultYAxisLabel, ynumberformat, yaxislabeldistance]);
+  var handleRegionChange = (0, _react.useCallback)(function (region) {
+    var isDoubleClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setSelectedRegions(function (prev) {
+      // If only one region exists, do nothing.
+      if (availableRegions.length === 1) {
+        return prev;
+      }
+      if (isDoubleClick) {
+        // Double-click: isolate the clicked region.
+        return [region];
+      }
+
+      // Single click: toggle the region's visibility.
+      var newSelection = prev.includes(region) ? prev.filter(function (r) {
+        return r !== region;
+      }) : [].concat((0, _toConsumableArray2["default"])(prev), [region]);
+
+      // Prevent the case where all regions are deselected – fall back to selecting all.
+      return newSelection.length === 0 ? (0, _toConsumableArray2["default"])(availableRegions) : newSelection;
+    });
+  }, [availableRegions]);
+
+  // Unified click handler: uses e.detail to distinguish click vs double-click.
+  var handleLegendClick = (0, _react.useCallback)(function (region, e) {
+    // If a timer is already pending, clear it; we'll start a new one if needed.
+    if (legendClickTimeoutRef.current) {
+      clearTimeout(legendClickTimeoutRef.current);
+      legendClickTimeoutRef.current = null;
+    }
+    if (e.detail === 2) {
+      // Second click within system double-click threshold.
+      handleRegionChange(region, true);
+      return;
+    }
+
+    // Defer single-click logic; will be cancelled by a second click.
+    legendClickTimeoutRef.current = setTimeout(function () {
+      handleRegionChange(region, false);
+      legendClickTimeoutRef.current = null;
+    }, 200);
+  }, [handleRegionChange]);
+  (0, _react.useEffect)(function () {
+    if (binddataset && datasource && isDataFilteringEnabled()) {
+      getAggregatedData(function () {
+        return _plotChartProxy();
+      });
+    }
+  }, [binddataset, datasource, isDataFilteringEnabled, getAggregatedData, _plotChartProxy]);
+  var renderChart = function renderChart() {
+    if (!processedData || processedData.length === 0 || selectedRegions.length === 0) {
+      return __jsx(_noDataMessage.NoDataMessage, null, __jsx(_material.Typography, {
+        variant: "body1"
+      }, selectedRegions.length === 0 ? "Please select at least one region to display" : nodatamessage));
+    }
+
+    // BUG FIX 4 & 5: Proper data keys handling for multiple y-axis values
+    var dataKeys = yaxisdatakey ? yaxisdatakey.split(",").map(function (key) {
+      return (0, _utils.prettifyLabels)(key.trim());
+    }) : processedData.length > 0 ? Object.keys(processedData[0]).filter(function (k) {
+      return k !== "x" && !k.endsWith("_dataObj") && !k.endsWith("_size");
+    }) : [];
+    var strokeWidth = linethickness ? parseInt(linethickness) : 2;
+    var pointSize = highlightpoints ? 5 : 0;
+    var commonProps = {
+      data: processedData,
+      dataKeys: dataKeys,
+      selectedRegions: selectedRegions,
+      chartColors: chartColors,
+      margin: {
+        top: 15,
+        right: 60,
+        left: 30,
+        bottom: 15
+      },
+      showLegend: shouldShowLegend,
+      legendPosition: legendPosition,
+      xAxisConfig: getXAxisConfig,
+      yAxisConfig: getYAxisConfig,
+      numberFormat: ynumberformat || "0.00",
+      xDataKeyArr: xDataKeyArr,
+      onChartClick: handleChartClick,
+      onLegendClick: handleLegendClick,
+      tooltips: tooltips,
+      barSpacing: barspacing,
+      legendtype: legendtype,
+      availableRegions: availableRegions
+    };
+    switch (type) {
+      case "Column":
+        return __jsx(_barColumnChart.BarColumnChart, (0, _extends2["default"])({}, commonProps, {
+          type: "Column",
+          viewtype: viewtype
+        }));
+      case "Bar":
+        return __jsx(_barColumnChart.BarColumnChart, (0, _extends2["default"])({}, commonProps, {
+          type: "Bar",
+          viewtype: viewtype
+        }));
+      case "Line":
+        return __jsx(_lineAreaChart.LineAreaChart, (0, _extends2["default"])({}, commonProps, {
+          type: "Line",
+          interpolation: interpolation,
+          strokeWidth: strokeWidth,
+          pointSize: pointSize,
+          legendtype: legendtype,
+          availableRegions: availableRegions
+        }));
+      case "Area":
+        return __jsx(_lineAreaChart.LineAreaChart, (0, _extends2["default"])({}, commonProps, {
+          type: "Area",
+          areaViewType: areaviewtype,
+          interpolation: interpolation,
+          strokeWidth: strokeWidth,
+          pointSize: pointSize
+        }));
+      case "Cumulative Line":
+        return __jsx(_cumulativeLineChart.CumulativeLineChart, (0, _extends2["default"])({}, commonProps, {
+          interpolation: interpolation,
+          strokeWidth: strokeWidth,
+          pointSize: pointSize
+        }));
+      case "Pie":
+      case "Donut":
+        return __jsx(_pieDonutChart.PieDonutChart, (0, _extends2["default"])({}, commonProps, {
+          type: type,
+          showlabels: showlabels,
+          labeltype: labeltype,
+          shouldShowLegend: shouldShowLegend,
+          onChartClick: handleChartClick,
+          onLegendClick: handleLegendClick,
+          showLegend: shouldShowLegend,
+          centerlabel: centerlabel
+        }));
+      case "Bubble":
+        return __jsx(_bubbleChart.BubbleChart, (0, _extends2["default"])({}, commonProps, {
+          shape: shape
+        }));
+      default:
+        return __jsx(_noDataMessage.NoDataMessage, null, __jsx(_material.Typography, {
+          variant: "body1"
+        }, "Unsupported chart type: ", type));
+    }
+  };
+  var fontStyles = (0, _react.useMemo)(function () {
+    return {
+      fontSize: fontsize && fontunit ? "".concat(fontsize).concat(fontunit) : undefined,
+      color: color,
+      fontFamily: fontfamily,
+      fontWeight: fontweight,
+      fontStyle: fontstyle,
+      textDecoration: textdecoration
+    };
+  }, [fontsize, fontunit, color, fontfamily, fontweight, fontstyle, textdecoration]);
+  return __jsx(_material.Box, {
+    component: "div",
+    className: "app-chart ".concat(className || "", " ").concat(title ? "panel" : ""),
+    style: _objectSpread(_objectSpread({}, styles), fontStyles),
+    ref: chartContainerRef,
+    id: "wmChart-".concat(type),
+    name: name
+  }, title && __jsx(_material.Box, {
+    component: "div",
+    className: "panel-heading"
+  }, __jsx("h3", {
+    className: "panel-title"
+  }, iconclass && __jsx("div", {
+    className: "pull-left"
+  }, __jsx("i", {
+    className: "app-icon panel-icon ".concat(iconclass)
+  })), __jsx("div", {
+    className: "heading",
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(title)
+    }
+  }), subheading && __jsx("div", {
+    className: "description",
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(subheading)
+    }
+  }))), __jsx(_material.Box, {
+    component: "div",
+    className: "app-chart-inner ".concat(title ? "panel-body" : "")
+  }, renderChart(), isLoadInProgress && __jsx(_material.Box, {
+    component: "div",
+    className: "app-spinner"
+  }, __jsx(_material.Box, {
+    className: "spinner-message"
+  }, __jsx(_material.CircularProgress, null), __jsx(_material.Typography, {
+    variant: "body2",
+    sx: {
+      mt: 1
+    }
+  }, loadingdatamsg))), showContentLoadError && __jsx(_noDataMessage.NoDataMessage, null, __jsx("div", {
+    className: "wm-content-info readonly-wrapper"
+  }, __jsx("p", {
+    className: "wm-message ".concat(invalidConfig ? "error" : "")
+  }, errMsg || nodatamessage)))));
+};
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmChart);