@wavemaker/react-runtime 11.14.2-1.245 → 12.0.0-next.28533

package/components/chart/index.js

@@ -25,13 +25,13 @@ var _cumulativeLineChart = require("./components/cumulativeLineChart");
 var _pieDonutChart = require("./components/pieDonutChart");
 var _useXAxisConfig = require("./hooks/useXAxisConfig");
 var _useBarYAxisExtras = require("./hooks/useBarYAxisExtras");
-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"];
+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", "hidden"];
 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 _chartContainerRef$cu, _ref, _width, _height;
+  var _chartContainerRef$cu, _width, _height, _minWidth;
   var title = props.title,
     _props$type = props.type,
     type = _props$type === void 0 ? "Column" : _props$type,
@@ -79,7 +79,7 @@ var WmChart = function WmChart(props) {
     _props$labeltype = props.labeltype,
     labeltype = _props$labeltype === void 0 ? "percent" : _props$labeltype,
     _props$barspacing = props.barspacing,
-    barspacing = _props$barspacing === void 0 ? "medium" : _props$barspacing,
+    barspacing = _props$barspacing === void 0 ? "0.5" : _props$barspacing,
     _props$donutratio = props.donutratio,
     donutratio = _props$donutratio === void 0 ? "small" : _props$donutratio,
     bubblesize = props.bubblesize,
@@ -96,14 +96,10 @@ var WmChart = function WmChart(props) {
     _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,
+    offsettop = props.offsettop,
+    offsetbottom = props.offsetbottom,
+    offsetright = props.offsetright,
+    offsetleft = props.offsetleft,
     _props$showxaxis = props.showxaxis,
     showxaxis = _props$showxaxis === void 0 ? true : _props$showxaxis,
     _props$showyaxis = props.showyaxis,
@@ -114,7 +110,8 @@ var WmChart = function WmChart(props) {
     formattype = props.formattype,
     dataset = props.dataset,
     datasource = props.datasource,
-    width = props.width,
+    _props$width = props.width,
+    width = _props$width === void 0 ? "100%" : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? "400px" : _props$height,
     _props$shape = props.shape,
@@ -145,6 +142,8 @@ var WmChart = function WmChart(props) {
     _props$styles = props.styles,
     styles = _props$styles === void 0 ? {} : _props$styles,
     name = props.name,
+    _props$hidden = props.hidden,
+    hidden = _props$hidden === void 0 ? false : _props$hidden,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   // const muiTheme = useTheme();
@@ -169,21 +168,18 @@ var WmChart = function WmChart(props) {
   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 _useState8 = (0, _react.useState)(false),
+    isVisuallyGrouped = _useState8[0],
+    setIsVisuallyGrouped = _useState8[1];
+  var _useState9 = (0, _react.useState)(""),
+    xAxisDataType = _useState9[0],
+    setXAxisDataType = _useState9[1];
+  var _useState0 = (0, _react.useState)([]),
+    selectedRegions = _useState0[0],
+    setSelectedRegions = _useState0[1];
   var _useState1 = (0, _react.useState)([]),
-    selectedRegions = _useState1[0],
-    setSelectedRegions = _useState1[1];
-  var _useState10 = (0, _react.useState)([]),
-    availableRegions = _useState10[0],
-    setAvailableRegions = _useState10[1];
+    availableRegions = _useState1[0],
+    setAvailableRegions = _useState1[1];
   var chartContainerRef = (0, _react.useRef)(null);
   var chartColors = (0, _react.useMemo)(function () {
     var _themes;
@@ -272,11 +268,11 @@ var WmChart = function WmChart(props) {
     }
     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]);
+
+  // check if aggregation is enabled, aggregationcolumn is not empty and groupby is not empty
   var isAggregationEnabled = (0, _react.useCallback)(function () {
     return !!(isGroupByEnabled() && aggregation !== _utils.NONE && aggregationcolumn);
   }, [aggregation, aggregationcolumn, isGroupByEnabled]);
@@ -369,7 +365,13 @@ var WmChart = function WmChart(props) {
     var yAxisKeys = yaxisdatakey ? yaxisdatakey.split(",").map(function (k) {
       return k.trim();
     }) : [];
+
+    // Apply orderby if specified and not visually grouped
     var dataSet = processedDataset;
+    if (orderby && !isVisuallyGrouped) {
+      var orderByDetails = (0, _utils.getLodashOrderByFormat)(orderby);
+      dataSet = (0, _lodash.orderBy)(processedDataset, orderByDetails.columns, orderByDetails.orders);
+    }
     if ((0, _lodash.isArray)(dataSet)) {
       if ((0, _utils.isPieType)(type)) {
         yAxisKey = yAxisKeys[0];
@@ -400,7 +402,7 @@ var WmChart = function WmChart(props) {
       }
     }
     return datum;
-  }, [binddataset, type, xaxisdatakey, yaxisdatakey, shape, valueFinder, getValidData]);
+  }, [binddataset, type, xaxisdatakey, yaxisdatakey, shape, valueFinder, getValidData, orderby, isVisuallyGrouped]);
 
   // COMPLETE getVisuallyGroupedData function from Angular - FIXED to avoid state updates
   var getVisuallyGroupedData = (0, _react.useCallback)(function (queryResponse, groupingColumn) {
@@ -492,6 +494,56 @@ var WmChart = function WmChart(props) {
     return (0, _utils.convertToRechartsFormat)(data, type);
   }, [type]);
 
+  // Client-side aggregation function
+  var performClientSideAggregation = (0, _react.useCallback)(function (data) {
+    if (!data || data.length === 0) return [];
+    if (!isAggregationEnabled()) return data;
+    var groupByKey = groupby || "";
+    var aggregationCol = aggregationcolumn || "";
+    var aggregationType = aggregation || "none";
+
+    // Group data by the groupby field
+    var grouped = (0, _lodash.groupBy)(data, groupByKey);
+
+    // Apply aggregation
+    var aggregatedData = [];
+    (0, _lodash.forEach)(grouped, function (items, key) {
+      var values = items.map(function (item) {
+        return parseFloat(item[aggregationCol]) || 0;
+      });
+      var aggregatedValue;
+      switch (aggregationType.toLowerCase()) {
+        case "sum":
+          aggregatedValue = values.reduce(function (acc, val) {
+            return acc + val;
+          }, 0);
+          break;
+        case "average":
+        case "avg":
+          aggregatedValue = values.reduce(function (acc, val) {
+            return acc + val;
+          }, 0) / values.length;
+          break;
+        case "count":
+          aggregatedValue = values.length;
+          break;
+        case "min":
+          aggregatedValue = Math.min.apply(Math, (0, _toConsumableArray2["default"])(values));
+          break;
+        case "max":
+          aggregatedValue = Math.max.apply(Math, (0, _toConsumableArray2["default"])(values));
+          break;
+        default:
+          aggregatedValue = values[0] || 0;
+      }
+
+      // Create aggregated item preserving the first item's structure
+      var aggregatedItem = _objectSpread(_objectSpread({}, items[0]), {}, (0, _defineProperty2["default"])({}, aggregationCol, aggregatedValue));
+      aggregatedData.push(aggregatedItem);
+    });
+    return aggregatedData;
+  }, [groupby, aggregationcolumn, aggregation, isAggregationEnabled]);
+
   // 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
@@ -547,15 +599,21 @@ var WmChart = function WmChart(props) {
     try {
       var groupingDetails = getGroupingDetails();
       var data;
+      var dataToProcess = chartData;
+
+      // Apply client-side aggregation if enabled and using dataset (not datasource)
+      if (isAggregationEnabled() && !datasource && chartData.length > 0) {
+        dataToProcess = performClientSideAggregation(chartData);
+      }
       var isValidAxis = binddataset ? !!(xaxisdatakey && yaxisdatakey) : true;
       if (!isValidAxis) {
         setProcessedData([]);
       } else if (groupingDetails.isVisuallyGrouped && !(0, _utils.isPieType)(type)) {
-        data = getVisuallyGroupedData(chartData, groupingDetails.visualGroupingColumn || "");
+        data = getVisuallyGroupedData(dataToProcess, groupingDetails.visualGroupingColumn || "");
         var filteredData = filterDataByRegions(data);
         setProcessedData(transformForRecharts(filteredData));
       } else {
-        data = processChartData(chartData);
+        data = processChartData(dataToProcess);
         var _filteredData = filterDataByRegions(data);
         setProcessedData(transformForRecharts(_filteredData));
       }
@@ -567,7 +625,7 @@ var WmChart = function WmChart(props) {
     } finally {
       setIsLoadInProgress(false);
     }
-  }, [binddataset, chartData, getGroupingDetails, getVisuallyGroupedData, processChartData, transformForRecharts, type, xaxisdatakey, yaxisdatakey, filterDataByRegions, props]);
+  }, [binddataset, chartData, getGroupingDetails, getVisuallyGroupedData, processChartData, transformForRecharts, type, xaxisdatakey, yaxisdatakey, filterDataByRegions, props, isAggregationEnabled, performClientSideAggregation, datasource]);
   var handleTransform = (0, _react.useCallback)(function () {
     if (onTransform) {
       var transformedData = onTransform({}, props);
@@ -700,14 +758,106 @@ var WmChart = function WmChart(props) {
   }, [binddataset, chartData.length]);
 
   // BUG FIX 10: Fixed onSelect event handler
-  var handleChartClick = (0, _react.useCallback)(function (data, event) {
+  var handleChartClick = (0, _react.useCallback)(function (data, seriesIndex, event) {
+    var _ref, _data$payload$x, _data$payload, _data$payload2, _data$payload3;
     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);
+    var dataObj = (data === null || data === void 0 ? void 0 : data._dataObj) || (data === null || data === void 0 ? void 0 : data.payload) || data;
+
+    // Get point index from clicked data
+    var pointIndex = (_ref = (_data$payload$x = data === null || data === void 0 || (_data$payload = data.payload) === null || _data$payload === void 0 ? void 0 : _data$payload.x) !== null && _data$payload$x !== void 0 ? _data$payload$x : data === null || data === void 0 ? void 0 : data.x) !== null && _ref !== void 0 ? _ref : 0;
+
+    // Get series name/dataKey
+    var seriesName = (data === null || data === void 0 || (_data$payload2 = data.payload) === null || _data$payload2 === void 0 ? void 0 : _data$payload2.seriesName) || (data === null || data === void 0 || (_data$payload3 = data.payload) === null || _data$payload3 === void 0 ? void 0 : _data$payload3.dataKey) || (data === null || data === void 0 ? void 0 : data.dataKey);
+
+    // Build series data array in Angular nvd3 format: [[x, y], [x, y], ...]
+    var seriesData = [];
+    if (processedData && seriesName) {
+      processedData.forEach(function (item, idx) {
+        var _item$x, _item$seriesName;
+        var xVal = (_item$x = item.x) !== null && _item$x !== void 0 ? _item$x : idx;
+        var yVal = (_item$seriesName = item[seriesName]) !== null && _item$seriesName !== void 0 ? _item$seriesName : 0;
+        seriesData.push([xVal, yVal]);
+      });
+      // Add index property to match Angular format (point index in original data)
+      seriesData.index = pointIndex;
+    }
+
+    // Enrich dataObj with Angular-compatible properties
+    dataObj = _objectSpread(_objectSpread({}, dataObj), {}, {
+      data: seriesData,
+      point: pointIndex,
+      series: seriesIndex !== null && seriesIndex !== void 0 ? seriesIndex : 0
+    });
+    onSelect === null || onSelect === void 0 || onSelect(event, props, dataObj, _objectSpread(_objectSpread({}, selectedChartItem), {}, {
+      data: seriesData,
+      point: pointIndex,
+      series: seriesIndex !== null && seriesIndex !== void 0 ? seriesIndex : 0
+    }));
+  }, [onSelect, props, processedData]);
+
+  // onSelect wrapper for column chart since the props are different can't use the same handleChartClick
+  var handleColumnChartSelect = (0, _react.useCallback)(function (colItem, index, event) {
+    var _props$xaxisdatakey, _props$yaxisdatakey$s, _props$yaxisdatakey, _colItem$payload;
+    if (!colItem || !onSelect) return;
+    var payload = colItem === null || colItem === void 0 ? void 0 : colItem.payload;
+    var xAxisDataKey = (_props$xaxisdatakey = props === null || props === void 0 ? void 0 : props.xaxisdatakey) !== null && _props$xaxisdatakey !== void 0 ? _props$xaxisdatakey : ""; // location
+    var yAxisDataKey = (_props$yaxisdatakey$s = props === null || props === void 0 || (_props$yaxisdatakey = props.yaxisdatakey) === null || _props$yaxisdatakey === void 0 || (_props$yaxisdatakey = _props$yaxisdatakey.split(",")[0]) === null || _props$yaxisdatakey === void 0 ? void 0 : _props$yaxisdatakey.trim()) !== null && _props$yaxisdatakey$s !== void 0 ? _props$yaxisdatakey$s : ""; // budget
+    var xAxisDataValue = colItem === null || colItem === void 0 || (_colItem$payload = colItem.payload) === null || _colItem$payload === void 0 ? void 0 : _colItem$payload.x; // Austin
+    var yAxisDataValue = 0;
+    Object.keys(payload).forEach(function (key) {
+      if (key.toLowerCase() === yAxisDataKey.toLowerCase()) {
+        yAxisDataValue = payload[key];
+      }
+    });
+    var selectedItem = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, xAxisDataKey, xAxisDataValue), yAxisDataKey, yAxisDataValue);
+    var selectedChartItem = {
+      key: yAxisDataKey,
+      series: index,
+      seriesIndex: index,
+      x: xAxisDataValue,
+      y: yAxisDataValue,
+      _dataObj: selectedItem
+    };
+    onSelect === null || onSelect === void 0 || onSelect(event.nativeEvent, props, selectedItem, selectedChartItem);
   }, [onSelect, props]);
 
+  // onSelect wrapper for area chart since the props are different can't use the same handleChartClick
+  var handleAreaChartClick = (0, _react.useCallback)(function (dotProp, dotPropsExtendedWithItem) {
+    if (!dotProp || !onSelect) return;
+    var value = dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.value;
+    if (!Array.isArray(value) && value.length > 1) return; // type guard
+    var selectedChartItem = [{
+      x: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index,
+      y: value[1],
+      series: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.payload,
+      seriesIndex: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index,
+      index: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index,
+      display: {
+        y: value[1]
+      }
+    }, dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index];
+    onSelect === null || onSelect === void 0 || onSelect(dotPropsExtendedWithItem, props, dotProp, selectedChartItem);
+  }, [onSelect, props, processedData]);
+
+  // onSelect wrapper for line chart since the props are different can't use the same handleChartClick
+  var handleLineChartSelect = (0, _react.useCallback)(function (dotProp, dotPropsExtendedWithItem) {
+    if (!dotProp || !onSelect) return;
+    var value = dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.value;
+    if (!Array.isArray(value) && value.length > 1) return; // type guard
+    var selectedChartItem = [{
+      x: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index,
+      y: value,
+      series: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.payload,
+      seriesIndex: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index,
+      index: dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index,
+      display: {
+        y: value
+      }
+    }, dotPropsExtendedWithItem === null || dotPropsExtendedWithItem === void 0 ? void 0 : dotPropsExtendedWithItem.index];
+    onSelect === null || onSelect === void 0 || onSelect(dotPropsExtendedWithItem, props, dotProp, selectedChartItem);
+  }, [onSelect, props, processedData]);
+
   // For Bar charts the categorical axis is Y; reduce label crowding and add ellipsis + tooltip
   var barYAxisExtras = (0, _useBarYAxisExtras.useBarYAxisExtras)({
     type: type,
@@ -729,26 +879,34 @@ var WmChart = function WmChart(props) {
     getDefaultXAxisLabel: getDefaultXAxisLabel,
     xnumberformat: xnumberformat,
     showxaxis: xAxisShow,
-    xaxislabeldistance: xaxislabeldistance
+    xaxislabeldistance: xaxislabeldistance,
+    showxdistance: showxdistance
   });
   var getYAxisConfig = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({
+    // For Bar charts, YAxis should be category type (handled in BarColumnChart)
+    // For other charts, YAxis should be number type
+    var axisType = type === "Bar" ? undefined : "number";
+    return _objectSpread(_objectSpread(_objectSpread({}, barYAxisExtras), axisType ? {
+      type: axisType
+    } : {}), {}, {
       hide: !yAxisShow,
       label: {
+        value: getDefaultYAxisLabel(),
         angle: -90,
         position: "insideLeft",
-        offset: yaxislabeldistance,
+        offset: -yaxislabeldistance,
         fill: "#000",
         style: {
           textAnchor: "middle"
         }
       },
+      tickLine: showydistance,
+      domain: ["dataMin", "dataMax + 100"],
       tick: {
         fontSize: 12,
         fontFamily: "inherit",
         fill: "currentColor"
-      }
-    }, barYAxisExtras), {}, {
+      },
       tickFormatter: function tickFormatter(value, index) {
         if (typeof value === "number") {
           return (0, _utils.formatNumber)(value, ynumberformat);
@@ -756,7 +914,7 @@ var WmChart = function WmChart(props) {
         return value;
       }
     });
-  }, [yAxisShow, getDefaultYAxisLabel, ynumberformat, yaxislabeldistance, processedData]);
+  }, [type, yAxisShow, getDefaultYAxisLabel, ynumberformat, yaxislabeldistance, processedData, barYAxisExtras]);
   var handleRegionChange = (0, _react.useCallback)(function (region) {
     var isDoubleClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     setSelectedRegions(function (prev) {
@@ -798,8 +956,10 @@ var WmChart = function WmChart(props) {
       legendClickTimeoutRef.current = null;
     }, 200);
   }, [handleRegionChange]);
+
+  // get aggregated data if datasource is enabled and data filtering is enabled
   (0, _react.useEffect)(function () {
-    if (binddataset && datasource && isDataFilteringEnabled()) {
+    if (binddataset && dataset && isDataFilteringEnabled()) {
       getAggregatedData(function () {
         return _plotChartProxy();
       });
@@ -821,6 +981,10 @@ var WmChart = function WmChart(props) {
     var strokeWidth = linethickness ? parseInt(linethickness) : 2;
     var pointSize = highlightpoints ? 5 : 0;
     var commonProps = {
+      offsettop: offsettop,
+      offsetbottom: offsetbottom,
+      offsetleft: offsetleft,
+      offsetright: offsetright,
       data: processedData,
       dataKeys: dataKeys,
       selectedRegions: selectedRegions,
@@ -848,13 +1012,13 @@ var WmChart = function WmChart(props) {
       case "Column":
         return __jsx(_barColumnChart.BarColumnChart, (0, _extends2["default"])({}, commonProps, {
           type: "Column",
-          viewtype: viewtype
+          viewtype: viewtype,
+          onChartClick: handleColumnChartSelect
         }));
       case "Bar":
         return __jsx(_barColumnChart.BarColumnChart, (0, _extends2["default"])({}, commonProps, {
           type: "Bar",
-          viewtype: viewtype,
-          shouldShowLegend: shouldShowLegend
+          viewtype: viewtype
         }));
       case "Line":
         return __jsx(_lineAreaChart.LineAreaChart, (0, _extends2["default"])({}, commonProps, {
@@ -863,7 +1027,8 @@ var WmChart = function WmChart(props) {
           strokeWidth: strokeWidth,
           pointSize: pointSize,
           legendtype: legendtype,
-          availableRegions: availableRegions
+          availableRegions: availableRegions,
+          onChartClick: handleLineChartSelect
         }));
       case "Area":
         return __jsx(_lineAreaChart.LineAreaChart, (0, _extends2["default"])({}, commonProps, {
@@ -871,7 +1036,8 @@ var WmChart = function WmChart(props) {
           areaViewType: areaviewtype,
           interpolation: interpolation,
           strokeWidth: strokeWidth,
-          pointSize: pointSize
+          pointSize: pointSize,
+          onAreaSelect: handleAreaChartClick
         }));
       case "Cumulative Line":
         return __jsx(_cumulativeLineChart.CumulativeLineChart, (0, _extends2["default"])({}, commonProps, {
@@ -915,13 +1081,17 @@ var WmChart = function WmChart(props) {
   return __jsx(_material.Box, {
     component: "div",
     className: "app-chart ".concat(className || "", " ").concat(title ? "panel" : ""),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styles), fontStyles), {}, {
-      width: (_ref = (_width = styles === null || styles === void 0 ? void 0 : styles.width) !== null && _width !== void 0 ? _width : width) !== null && _ref !== void 0 ? _ref : height,
-      height: (_height = styles === null || styles === void 0 ? void 0 : styles.height) !== null && _height !== void 0 ? _height : height
-    }),
+    style: _objectSpread(_objectSpread({}, fontStyles), {}, {
+      backgroundPosition: "center",
+      width: (_width = styles === null || styles === void 0 ? void 0 : styles.width) !== null && _width !== void 0 ? _width : width,
+      height: (_height = styles === null || styles === void 0 ? void 0 : styles.height) !== null && _height !== void 0 ? _height : height,
+      minWidth: (_minWidth = styles === null || styles === void 0 ? void 0 : styles.minWidth) !== null && _minWidth !== void 0 ? _minWidth : "300px",
+      overflow: "hidden"
+    }, styles),
     ref: chartContainerRef,
     id: "wmChart-".concat(type),
-    name: name
+    name: name,
+    hidden: hidden
   }, title && __jsx(_material.Box, {
     component: "div",
     className: "panel-heading"

package/components/chart/utils.js

@@ -46,6 +46,11 @@ var barSpacingMap = {
   medium: 0.5,
   large: 0.8
 };
+var barCategorySpacingPercentage = {
+  0.3: "10%",
+  0.5: "20%",
+  0.8: "30%"
+};
 var donutRatioMap = {
   small: 0.3,
   medium: 0.6,
@@ -489,6 +494,12 @@ var getLodashOrderByFormat = exports.getLodashOrderByFormat = function getLodash
   };
 };
 var getBarSpacingValue = exports.getBarSpacingValue = function getBarSpacingValue(value, prop) {
+  if (!isNaN(+value)) {
+    if (Number.isFinite(+value)) {
+      var _barCategorySpacingPe;
+      return (_barCategorySpacingPe = barCategorySpacingPercentage[+value]) !== null && _barCategorySpacingPe !== void 0 ? _barCategorySpacingPe : +value * 100;
+    }
+  }
   if (prop === "value") {
     return barSpacingMap[value];
   }
@@ -649,7 +660,7 @@ var getLegendPopupStyle = exports.getLegendPopupStyle = function getLegendPopupS
     case "bottom":
       return _objectSpread(_objectSpread({}, baseStyle), {}, {
         right: "3%",
-        bottom: "0%",
+        bottom: "9%",
         width: "80%",
         display: "flex",
         flexWrap: "wrap",

package/components/constants.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.progressBarConstants = exports.isVideoFile = exports.isImageFile = exports.isDocumentFile = exports.isDataFile = exports.isAudioFile = exports.isArchiveFile = exports.getFileIconClass = exports.getFileExtension = exports.fileUploadConstants = exports.defaultItems = exports.currencyConstants = void 0;
+exports.progressBarConstants = exports.isVideoFile = exports.isImageFile = exports.isDocumentFile = exports.isDataFile = exports.isAudioFile = exports.isArchiveFile = exports.getFileIconClass = exports.getFileExtension = exports.fileUploadConstants = exports.defaultItems = exports.currencyConstants = exports.DEFAULT_CHIPS_DATASET = exports.ALL_FIELDS = void 0;
 var _lodashEs = require("lodash-es");
 //Radioset Constants
 
+var ALL_FIELDS = exports.ALL_FIELDS = "All Fields";
 var defaultItems = exports.defaultItems = [{
   key: "Option 1",
   value: "Option 1",
@@ -24,6 +25,7 @@ var defaultItems = exports.defaultItems = [{
   selected: false
 }];
 var progressBarConstants = exports.progressBarConstants = {
+  DEFAULT_DATAVALUE: 30,
   DEFAULT_TYPE: "default",
   DEFAULT_CAPTION_PLACEMENT: "hidden",
   DEFAULT_MIN_VALUE: 0,
@@ -1205,4 +1207,5 @@ var getFileIconClass = exports.getFileIconClass = function getFileIconClass(file
     return "fa fa-file-audio-o";
   }
   return "fa fa-file-o"; // Default icon
-};
+};
+var DEFAULT_CHIPS_DATASET = exports.DEFAULT_CHIPS_DATASET = ["Option 1", "Option 2", "Option 3"];

package/components/container/accordion/accordion-pane/index.js

@@ -51,21 +51,26 @@ var WmAccordionPane = /*#__PURE__*/(0, _react.memo)(function (Props) {
   }, [props.onLoad]);
   return __jsx(_accordion.Accordion.Root, {
     tabIndex: props.tabindex,
-    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className, {
-      active: props.active
-    })
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className),
+    name: props.name,
+    hidden: props.hidden || false,
+    show: props.show || true
   }, __jsx(_AccordionSummary["default"], {
-    className: "panel-heading clearfix",
+    className: (0, _clsx["default"])("panel-heading clearfix", {
+      active: props.active
+    }),
     onClick: handleToggle,
     onKeyDown: handleKeyDown,
     tabIndex: props.tabindex,
     "aria-expanded": props.active,
-    component: "div",
-    classes: {
-      content: "panel-title"
-    }
-  }, __jsx("div", {
-    className: "panel-title"
+    component: "div"
+  }, __jsx(_Typography["default"], {
+    className: "panel-title",
+    variant: "h3",
+    component: "h3"
+  }, __jsx(_Typography["default"], {
+    className: "accordion-toggle clearfix",
+    component: "a"
   }, props.iconclass && __jsx("div", {
     className: "pull-left"
   }, __jsx("i", {
@@ -94,8 +99,8 @@ var WmAccordionPane = /*#__PURE__*/(0, _react.memo)(function (Props) {
     variant: "body2",
     className: "app-icon panel-action wi"
   }, __jsx("i", {
-    className: (0, _clsx["default"])("app-icon wi", props.active ? "wi-minus" : "wi-plus")
-  }))))), __jsx(_AccordionDetails["default"], {
+    className: (0, _clsx["default"])(props.active ? "wi-minus" : "wi-plus")
+  })))))), __jsx(_AccordionDetails["default"], {
     className: (0, _clsx["default"])("panel-collapse collapse", {
       "in": props.active
     })

package/components/container/accordion/index.js

@@ -12,7 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _accordionPane = _interopRequireDefault(require("./accordion-pane"));
-var _props = require("./props");
+var _props3 = require("./props");
 var _statePersistance = require("@wavemaker/react-runtime/utils/state-persistance");
 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;
@@ -20,7 +20,7 @@ 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; }
 var DEFAULT_CLASS = "app-accordion panel-group";
 var WmAccordion = /*#__PURE__*/(0, _react.memo)(function (Props) {
-  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), Props);
+  var props = _objectSpread(_objectSpread({}, _props3.DEFAULT_PROPS), Props);
   var isMounted = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(props.defaultpaneindex || 0),
     activePaneIndex = _useState[0],
@@ -199,7 +199,9 @@ var WmAccordion = /*#__PURE__*/(0, _react.memo)(function (Props) {
     }
     return props.type === "static" ? _react["default"].Children.map(props.children, function (child, index) {
       if (/*#__PURE__*/_react["default"].isValidElement(child) && child.type === _accordionPane["default"]) {
+        var _props, _props2;
         return /*#__PURE__*/_react["default"].cloneElement(child, {
+          key: "".concat(props.name, "-").concat(index, "-").concat(((_props = child.props) === null || _props === void 0 ? void 0 : _props.name) || ((_props2 = child.props) === null || _props2 === void 0 ? void 0 : _props2.id)),
           active: activePanes.has(index),
           toggle: function toggle(event, name) {
             return handlePaneToggle(index, !activePanes.has(index), event, name);
@@ -220,10 +222,13 @@ var WmAccordion = /*#__PURE__*/(0, _react.memo)(function (Props) {
     style: props.styles,
     id: (props === null || props === void 0 ? void 0 : props.id) || (props === null || props === void 0 ? void 0 : props.name),
     "data-type": "accordion",
-    "data-statehandler": props.statehandler
+    "data-statehandler": props.statehandler,
+    name: props.name,
+    hidden: props.hidden || false,
+    show: props.show || true
   }, renderPanes());
 }, function (prevProps, nextProps) {
-  var keys = ["dataset", "defaultpaneindex", "closeothers", "children"];
+  var keys = ["dataset", "defaultpaneindex", "closeothers", "children", "hidden", "show"];
   return keys.every(function (key) {
     return prevProps[key] === nextProps[key];
   });