@wavemaker/react-runtime 11.14.1-16.6404

package/components/chart/components/chartLegend/components/FuriousLegendItem.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FuriousLegendItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var __jsx = _react["default"].createElement;
+var FuriousLegendItem = exports.FuriousLegendItem = function FuriousLegendItem(_ref) {
+  var entry = _ref.entry,
+    index = _ref.index,
+    isSelected = _ref.isSelected,
+    onItemClick = _ref.onItemClick;
+  return __jsx("div", {
+    key: "legend-".concat(index),
+    className: "legend-item",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      userSelect: "none",
+      border: "2px solid ".concat(entry.color),
+      borderRadius: "5px",
+      backgroundColor: isSelected ? entry.color : "transparent"
+    },
+    onClick: function onClick(e) {
+      return onItemClick(entry.value, e);
+    }
+  }, __jsx("label", {
+    style: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "pointer",
+      margin: 2
+    }
+  }, __jsx("input", {
+    type: "checkbox",
+    checked: isSelected,
+    onChange: function onChange() {} // Handled by parent div's onClick
+    ,
+    style: {
+      width: "16px",
+      height: "16px",
+      margin: 0,
+      cursor: "pointer",
+      opacity: 0,
+      position: "absolute"
+    }
+  }), __jsx("span", {
+    style: {
+      width: "16px",
+      height: "16px",
+      border: "2px solid ".concat(isSelected ? "#fff" : entry.color),
+      borderRadius: "2px",
+      backgroundColor: isSelected ? entry.color : "transparent",
+      position: "relative",
+      display: "inline-block"
+    }
+  }, isSelected && __jsx("span", {
+    style: {
+      content: '""',
+      position: "absolute",
+      left: "4px",
+      top: "1px",
+      width: "4px",
+      height: "8px",
+      border: "solid white",
+      borderWidth: "0 2px 2px 0",
+      transform: "rotate(45deg)"
+    }
+  })), __jsx("span", {
+    style: {
+      fontSize: "14px",
+      fontWeight: 700,
+      color: isSelected ? "#fff" : entry.color
+    }
+  }, entry.value.length > 10 ? entry.value.slice(0, 10) + "..." : entry.value)));
+};

package/components/chart/components/chartLegend/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartLegend = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _utils = require("./utils");
+var _ClassicLegendItem = require("./components/ClassicLegendItem");
+var _FuriousLegendItem = require("./components/FuriousLegendItem");
+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 ChartLegend = exports.ChartLegend = function ChartLegend(_ref) {
+  var payload = _ref.payload,
+    selectedRegions = _ref.selectedRegions,
+    onLegendClick = _ref.onLegendClick,
+    legendPosition = _ref.legendPosition,
+    style = _ref.style,
+    availableRegions = _ref.availableRegions,
+    legendtype = _ref.legendtype,
+    chartColors = _ref.chartColors;
+  var handleClick = function handleClick(dataKey, event) {
+    onLegendClick(dataKey, event);
+  };
+
+  // Transform payload into legend items with proper color mapping
+  var legendItems = (0, _react.useMemo)(function () {
+    return (0, _utils.mapLegendItems)(availableRegions, payload, chartColors);
+  }, [availableRegions, payload, chartColors]);
+  var containerStyles = {
+    display: "flex",
+    flexDirection: legendPosition === "right" ? "column" : "row",
+    flexWrap: legendPosition === "right" ? "nowrap" : "wrap",
+    gap: "8px",
+    width: "100%",
+    height: "100%",
+    justifyContent: "flex-end",
+    alignItems: legendPosition === "right" ? "flex-start" : "center"
+  };
+  if (legendtype === "classic") {
+    return __jsx(_material.Box, {
+      component: "div",
+      className: "legend-container--classic",
+      sx: containerStyles
+    }, legendItems.map(function (entry, index) {
+      return __jsx(_ClassicLegendItem.ClassicLegendItem, {
+        key: "legend-".concat(index),
+        entry: entry,
+        index: index,
+        selectedRegions: selectedRegions,
+        onItemClick: handleClick
+      });
+    }));
+  }
+  return __jsx("div", {
+    className: "legend-container--furious",
+    style: containerStyles
+  }, legendItems.map(function (entry, index) {
+    return __jsx(_FuriousLegendItem.FuriousLegendItem, {
+      key: "legend-".concat(index),
+      entry: entry,
+      index: index,
+      isSelected: selectedRegions.includes(entry.value),
+      onItemClick: handleClick
+    });
+  }));
+};

package/components/chart/components/chartLegend/props.js

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapLegendItems = void 0;
+var mapLegendItems = exports.mapLegendItems = function mapLegendItems(availableRegions, payload, chartColors) {
+  if (!(availableRegions !== null && availableRegions !== void 0 && availableRegions.length)) {
+    return (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()
+      };
+    });
+  }
+  return availableRegions.map(function (region, idx) {
+    // Default color from the chart colors array
+    var defaultColor = (chartColors === null || chartColors === void 0 ? void 0 : chartColors[idx % ((chartColors === null || chartColors === void 0 ? void 0 : chartColors.length) || 1)]) || "#000";
+
+    // Try to find matching color from payload
+    var matchingPayloadItem = Array.isArray(payload) ? payload.find(function (entry) {
+      return entry.value === region;
+    }) : null;
+    return {
+      value: region,
+      color: (matchingPayloadItem === null || matchingPayloadItem === void 0 ? void 0 : matchingPayloadItem.color) || defaultColor
+    };
+  });
+};

package/components/chart/components/chartTooltip/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartTooltip = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+var _styles = require("./styles");
+var _utils2 = 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 ChartTooltip = exports.ChartTooltip = function ChartTooltip(_ref) {
+  var active = _ref.active,
+    payload = _ref.payload,
+    label = _ref.label,
+    xDataKeyArr = _ref.xDataKeyArr,
+    numberFormat = _ref.numberFormat;
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+  var headerLabel = (0, _react.useMemo)(function () {
+    return (0, _utils2.getHeaderLabel)(label, xDataKeyArr);
+  }, [label, xDataKeyArr]);
+  return __jsx(_material.Box, {
+    style: _styles.tooltipContainerStyle
+  }, __jsx(_material.Typography, {
+    variant: "subtitle2"
+  }, headerLabel), payload.map(function (entry, index) {
+    return __jsx(_material.Box, {
+      key: "".concat(entry.name, "-").concat(index),
+      style: _styles.tooltipRowStyle
+    }, __jsx(_material.Box, {
+      style: _styles.rowContainerStyle
+    }, __jsx(_material.Box, {
+      style: _styles.labelContainerStyle
+    }, __jsx(_material.Box, {
+      style: _objectSpread(_objectSpread({}, _styles.colorDotStyle), {}, {
+        backgroundColor: entry.color
+      })
+    }), __jsx(_material.Typography, {
+      variant: "caption"
+    }, entry.name, ":")), __jsx(_material.Typography, {
+      variant: "body2"
+    }, (0, _utils.formatNumber)(entry.value, numberFormat))));
+  }));
+};

package/components/chart/components/chartTooltip/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipRowStyle = exports.tooltipContainerStyle = exports.rowContainerStyle = exports.labelContainerStyle = exports.colorDotStyle = void 0;
+var tooltipContainerStyle = exports.tooltipContainerStyle = {
+  backgroundColor: "white",
+  border: "1px solid #ccc",
+  padding: "8px",
+  borderRadius: "4px",
+  boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+  zIndex: 9999
+};
+var tooltipRowStyle = exports.tooltipRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginTop: "4px"
+};
+var colorDotStyle = exports.colorDotStyle = {
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%"
+};
+var rowContainerStyle = exports.rowContainerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  justifyContent: "space-between",
+  width: "100%"
+};
+var labelContainerStyle = exports.labelContainerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px"
+};

package/components/chart/components/chartTooltip/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getHeaderLabel = void 0;
+var getHeaderLabel = exports.getHeaderLabel = function getHeaderLabel(label, xDataKeyArr) {
+  if (label === undefined) return "";
+
+  // If label is a number, use it as array index
+  if (typeof label === "number") {
+    return (xDataKeyArr === null || xDataKeyArr === void 0 ? void 0 : xDataKeyArr[label]) || String(label);
+  }
+
+  // Try parsing string as number for array index
+  var numericIndex = parseInt(label, 10);
+  if (!isNaN(numericIndex) && xDataKeyArr) {
+    return xDataKeyArr[numericIndex] || label;
+  }
+
+  // Fallback to label as string
+  return String(label);
+};

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CumulativeLineChart = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
+var _chartTooltip = require("../chartTooltip");
+var _chartLegend = require("../chartLegend");
+var _utils = require("../../utils");
+var _utils2 = 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 CumulativeLineChart = exports.CumulativeLineChart = function CumulativeLineChart(_ref) {
+  var data = _ref.data,
+    dataKeys = _ref.dataKeys,
+    selectedRegions = _ref.selectedRegions,
+    chartColors = _ref.chartColors,
+    margin = _ref.margin,
+    xAxisConfig = _ref.xAxisConfig,
+    yAxisConfig = _ref.yAxisConfig,
+    numberFormat = _ref.numberFormat,
+    xDataKeyArr = _ref.xDataKeyArr,
+    onLegendClick = _ref.onLegendClick,
+    _ref$tooltips = _ref.tooltips,
+    tooltips = _ref$tooltips === void 0 ? true : _ref$tooltips,
+    interpolation = _ref.interpolation,
+    strokeWidth = _ref.strokeWidth,
+    pointSize = _ref.pointSize,
+    onChartClick = _ref.onChartClick,
+    showLegend = _ref.showLegend,
+    legendPosition = _ref.legendPosition,
+    legendtype = _ref.legendtype,
+    availableRegions = _ref.availableRegions;
+  var cumulativeData = (0, _react.useMemo)(function () {
+    return (0, _utils2.calculateCumulativeData)(data, dataKeys);
+  }, [data, dataKeys]);
+  var commonProps = {
+    data: cumulativeData,
+    margin: margin
+  };
+  var commonChartElements = __jsx(_react["default"].Fragment, null, __jsx(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), __jsx(_recharts.XAxis, xAxisConfig), __jsx(_recharts.YAxis, yAxisConfig), tooltips && __jsx(_recharts.Tooltip, {
+    content: function content(_ref2) {
+      var active = _ref2.active,
+        payload = _ref2.payload,
+        label = _ref2.label;
+      return __jsx(_chartTooltip.ChartTooltip, {
+        active: active,
+        payload: payload,
+        label: label,
+        xDataKeyArr: xDataKeyArr,
+        numberFormat: numberFormat
+      });
+    },
+    wrapperStyle: {
+      zIndex: 9999
+    }
+  }), showLegend && __jsx(_recharts.Legend, {
+    content: function content(props) {
+      return __jsx(_chartLegend.ChartLegend, (0, _extends2["default"])({}, props, {
+        selectedRegions: selectedRegions,
+        onLegendClick: onLegendClick,
+        legendPosition: legendPosition,
+        legendtype: legendtype,
+        availableRegions: availableRegions,
+        chartColors: chartColors
+      }));
+    },
+    wrapperStyle: _objectSpread({}, (0, _utils.getLegendPopupStyle)(legendPosition))
+  }));
+  var getInterpolationType = (0, _react.useMemo)(function () {
+    switch (interpolation) {
+      case "cardinal":
+        return "monotone";
+      case "step":
+        return "step";
+      default:
+        return "linear";
+    }
+  }, [interpolation]);
+  return __jsx(_recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, __jsx(_recharts.LineChart, commonProps, commonChartElements, dataKeys.map(function (dataKey, index) {
+    return __jsx(_recharts.Line, {
+      key: dataKey,
+      type: getInterpolationType,
+      dataKey: dataKey,
+      name: dataKey,
+      stroke: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+      strokeWidth: strokeWidth,
+      dot: {
+        r: pointSize,
+        strokeWidth: 1,
+        fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+        onClick: onChartClick
+      },
+      activeDot: false,
+      onClick: onChartClick,
+      isAnimationActive: true,
+      hide: !selectedRegions.includes(dataKey)
+    });
+  })));
+};

package/components/chart/components/cumulativeLineChart/props.js

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

package/components/chart/components/cumulativeLineChart/utils.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateCumulativeData = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+/**
+ * Calculates cumulative sum for a specific data key
+ */
+var calculateCumulativeSum = function calculateCumulativeSum(data, dataKey, currentIndex) {
+  return data.slice(0, currentIndex + 1).reduce(function (sum, item) {
+    return sum + (item[dataKey] || 0);
+  }, 0);
+};
+
+/**
+ * Transforms data array into cumulative data
+ */
+var calculateCumulativeData = exports.calculateCumulativeData = function calculateCumulativeData(data, dataKeys) {
+  if (!(data !== null && data !== void 0 && data.length) || !(dataKeys !== null && dataKeys !== void 0 && dataKeys.length)) {
+    return [];
+  }
+  return data.map(function (item, index, array) {
+    var cumulativeItem = _objectSpread({}, item);
+    dataKeys.forEach(function (dataKey) {
+      cumulativeItem[dataKey] = calculateCumulativeSum(array, dataKey, index);
+    });
+    return cumulativeItem;
+  });
+};

package/components/chart/components/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BarColumnChart", {
+  enumerable: true,
+  get: function get() {
+    return _barColumnChart.BarColumnChart;
+  }
+});
+Object.defineProperty(exports, "ChartLegend", {
+  enumerable: true,
+  get: function get() {
+    return _chartLegend.ChartLegend;
+  }
+});
+Object.defineProperty(exports, "ChartTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _chartTooltip.ChartTooltip;
+  }
+});
+Object.defineProperty(exports, "LineAreaChart", {
+  enumerable: true,
+  get: function get() {
+    return _lineAreaChart.LineAreaChart;
+  }
+});
+Object.defineProperty(exports, "NoDataMessage", {
+  enumerable: true,
+  get: function get() {
+    return _noDataMessage.NoDataMessage;
+  }
+});
+var _noDataMessage = require("./noDataMessage");
+var _chartLegend = require("./chartLegend");
+var _chartTooltip = require("./chartTooltip");
+var _barColumnChart = require("./barColumnChart");
+var _lineAreaChart = require("./lineAreaChart");

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineAreaChart = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 LineAreaChart = exports.LineAreaChart = function LineAreaChart(_ref) {
+  var type = _ref.type,
+    data = _ref.data,
+    dataKeys = _ref.dataKeys,
+    selectedRegions = _ref.selectedRegions,
+    chartColors = _ref.chartColors,
+    margin = _ref.margin,
+    showLegend = _ref.showLegend,
+    legendPosition = _ref.legendPosition,
+    xAxisConfig = _ref.xAxisConfig,
+    yAxisConfig = _ref.yAxisConfig,
+    numberFormat = _ref.numberFormat,
+    xDataKeyArr = _ref.xDataKeyArr,
+    interpolation = _ref.interpolation,
+    strokeWidth = _ref.strokeWidth,
+    pointSize = _ref.pointSize,
+    _ref$areaViewType = _ref.areaViewType,
+    areaViewType = _ref$areaViewType === void 0 ? "none" : _ref$areaViewType,
+    onChartClick = _ref.onChartClick,
+    onLegendClick = _ref.onLegendClick,
+    _ref$tooltips = _ref.tooltips,
+    tooltips = _ref$tooltips === void 0 ? true : _ref$tooltips,
+    legendtype = _ref.legendtype,
+    availableRegions = _ref.availableRegions;
+  var commonProps = {
+    data: data,
+    margin: margin
+  };
+  var commonChartElements = __jsx(_react["default"].Fragment, null, __jsx(_recharts.CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), __jsx(_recharts.XAxis, xAxisConfig), __jsx(_recharts.YAxis, yAxisConfig), tooltips && __jsx(_recharts.Tooltip, {
+    content: function content(_ref2) {
+      var active = _ref2.active,
+        payload = _ref2.payload,
+        label = _ref2.label;
+      return __jsx(_chartTooltip.ChartTooltip, {
+        active: active,
+        payload: payload,
+        label: label,
+        xDataKeyArr: xDataKeyArr,
+        numberFormat: numberFormat
+      });
+    },
+    wrapperStyle: {
+      zIndex: 9999
+    }
+  }), showLegend && __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,
+        chartColors: chartColors
+      });
+    },
+    wrapperStyle: _objectSpread({}, (0, _utils.getLegendPopupStyle)(legendPosition))
+  }));
+  var getInterpolationType = (0, _react.useMemo)(function () {
+    switch (interpolation) {
+      case "cardinal":
+        return "monotone";
+      case "step":
+        return "step";
+      default:
+        return "linear";
+    }
+  }, [interpolation]);
+  return __jsx(_recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, type === "Line" ? __jsx(_recharts.LineChart, commonProps, commonChartElements, dataKeys.map(function (dataKey, index) {
+    return __jsx(_recharts.Line, {
+      key: dataKey,
+      type: getInterpolationType,
+      dataKey: dataKey,
+      name: dataKey,
+      stroke: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+      strokeWidth: strokeWidth,
+      dot: {
+        r: pointSize,
+        strokeWidth: 1,
+        fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+        onClick: onChartClick
+      },
+      onClick: onChartClick,
+      isAnimationActive: true,
+      hide: !selectedRegions.includes(dataKey)
+    });
+  })) : __jsx(_recharts.AreaChart, (0, _extends2["default"])({}, commonProps, {
+    stackOffset: areaViewType
+  }), commonChartElements, dataKeys.map(function (dataKey, index) {
+    return __jsx(_recharts.Area, {
+      key: dataKey,
+      type: getInterpolationType,
+      dataKey: dataKey,
+      name: dataKey,
+      stroke: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+      fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+      fillOpacity: 0.6,
+      dot: {
+        r: pointSize,
+        strokeWidth: 1,
+        fill: chartColors === null || chartColors === void 0 ? void 0 : chartColors[index % (chartColors === null || chartColors === void 0 ? void 0 : chartColors.length)],
+        onClick: onChartClick
+      },
+      isAnimationActive: true,
+      hide: !selectedRegions.includes(dataKey)
+    });
+  })));
+};

package/components/chart/components/lineAreaChart/props.js

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