@wavemaker/react-runtime 11.14.1-15.6409

package/components/chart/components/noDataMessage/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoDataMessage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var __jsx = _react["default"].createElement;
+var NoDataMessage = exports.NoDataMessage = function NoDataMessage(_ref) {
+  var children = _ref.children;
+  return __jsx(_material.Box, {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "rgba(255, 255, 255, 0.8)",
+      zIndex: 5
+    }
+  }, children);
+};

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

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PieDonutChart = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../utils");
+var _recharts = require("recharts");
+var _chartLegend = require("../chartLegend");
+var _chartTooltip = require("../chartTooltip");
+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 RADIAN = Math.PI / 180;
+
+// Custom label component for percentage-only labels
+var renderCustomizedLabel = function renderCustomizedLabel(_ref, labeltype, ynumberformat, total, showlabels) {
+  var cx = _ref.cx,
+    cy = _ref.cy,
+    _ref$midAngle = _ref.midAngle,
+    midAngle = _ref$midAngle === void 0 ? 0 : _ref$midAngle,
+    innerRadius = _ref.innerRadius,
+    outerRadius = _ref.outerRadius,
+    percent = _ref.percent,
+    index = _ref.index,
+    name = _ref.name,
+    value = _ref.value;
+  // Don't render if showlabels is 'hide'
+  if (showlabels === "hide") return null;
+
+  // Calculate radius based on label position
+  var radius = showlabels === "inside" ? ((innerRadius !== null && innerRadius !== void 0 ? innerRadius : 0) + (outerRadius !== null && outerRadius !== void 0 ? outerRadius : 0)) / 2 // For inside labels, position in middle of slice
+  : (outerRadius !== null && outerRadius !== void 0 ? outerRadius : 0) + 10; // For outside labels, position 10px outside
+
+  var x = (cx !== null && cx !== void 0 ? cx : 0) + radius * Math.cos(-midAngle * RADIAN);
+  var y = (cy !== null && cy !== void 0 ? cy : 0) + radius * Math.sin(-midAngle * RADIAN);
+  var labelText = "";
+  if (labeltype === "key") {
+    labelText = name;
+  } else if (labeltype === "value") {
+    labelText = (0, _utils.formatNumber)(value !== null && value !== void 0 ? value : 0, ynumberformat);
+  } else if (labeltype === "percent") {
+    labelText = "".concat(((percent !== null && percent !== void 0 ? percent : 0) * 100).toFixed(0), "%");
+  } else if (labeltype === "key-value") {
+    labelText = "".concat(name, ": ").concat((0, _utils.formatNumber)(value !== null && value !== void 0 ? value : 0, ynumberformat));
+  }
+  return __jsx("text", {
+    x: x,
+    y: y,
+    fill: showlabels === "inside" ? "#000" : "currentColor",
+    textAnchor: x > (cx !== null && cx !== void 0 ? cx : 0) ? "start" : "end",
+    dominantBaseline: "central",
+    fontSize: "12"
+  }, labelText);
+};
+var PieDonutChart = exports.PieDonutChart = function PieDonutChart(_ref2) {
+  var type = _ref2.type,
+    data = _ref2.data,
+    selectedRegions = _ref2.selectedRegions,
+    chartColors = _ref2.chartColors,
+    margin = _ref2.margin,
+    _ref2$showlabels = _ref2.showlabels,
+    showlabels = _ref2$showlabels === void 0 ? "outside" : _ref2$showlabels,
+    _ref2$labeltype = _ref2.labeltype,
+    labeltype = _ref2$labeltype === void 0 ? "percent" : _ref2$labeltype,
+    tooltips = _ref2.tooltips,
+    legendPosition = _ref2.legendPosition,
+    legendtype = _ref2.legendtype,
+    availableRegions = _ref2.availableRegions,
+    donutratio = _ref2.donutratio,
+    ynumberformat = _ref2.ynumberformat,
+    centerlabel = _ref2.centerlabel,
+    shouldShowLegend = _ref2.shouldShowLegend,
+    onChartClick = _ref2.onChartClick,
+    onLegendClick = _ref2.onLegendClick,
+    showLegend = _ref2.showLegend,
+    xDataKeyArr = _ref2.xDataKeyArr,
+    numberFormat = _ref2.numberFormat;
+  var total = data.reduce(function (sum, item) {
+    return sum + item.value;
+  }, 0);
+  var filteredData = data.filter(function (item) {
+    return selectedRegions.includes(item.name);
+  });
+  var commonProps = {
+    data: filteredData,
+    margin: margin
+  };
+
+  // Create legend payload for external rendering
+  var legendPayload = filteredData.map(function (entry, index) {
+    return {
+      value: entry.name,
+      color: chartColors[index % chartColors.length],
+      dataKey: entry.name
+    };
+  });
+  return __jsx("div", {
+    style: {
+      position: "relative",
+      width: "100%",
+      height: "100%"
+    }
+  }, __jsx(_recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, __jsx(_recharts.PieChart, commonProps, __jsx(_recharts.Pie, {
+    data: filteredData,
+    dataKey: "value",
+    nameKey: "name",
+    cx: "50%",
+    cy: "50%",
+    innerRadius: type === "Donut" ? "".concat(donutratio !== null && donutratio !== void 0 ? donutratio : "60", "%") : 0,
+    outerRadius: "80%",
+    paddingAngle: 2,
+    onClick: function onClick(data, index, event) {
+      return onChartClick(data, index, event);
+    },
+    isAnimationActive: true,
+    labelLine: false,
+    label: showlabels !== "hide" ? function (props) {
+      return renderCustomizedLabel(props, labeltype, ynumberformat !== null && ynumberformat !== void 0 ? ynumberformat : "", total, showlabels);
+    } : false
+  }, filteredData.map(function (entry, index) {
+    return __jsx(_recharts.Cell, {
+      key: "cell-".concat(index),
+      fill: chartColors[index % chartColors.length]
+    });
+  })), tooltips && __jsx(_recharts.Tooltip, {
+    content: function content(_ref3) {
+      var active = _ref3.active,
+        payload = _ref3.payload,
+        label = _ref3.label;
+      return __jsx(_chartTooltip.ChartTooltip, {
+        active: active,
+        payload: payload,
+        label: label,
+        xDataKeyArr: xDataKeyArr,
+        numberFormat: numberFormat
+      });
+    },
+    wrapperStyle: {
+      zIndex: 9999
+    }
+  }), centerlabel && type === "Donut" && __jsx("text", {
+    x: "49%",
+    y: "50%",
+    textAnchor: "middle",
+    dominantBaseline: "central",
+    fontSize: "16",
+    fill: "#13c4f996"
+  }, centerlabel))), shouldShowLegend && showLegend && __jsx("div", {
+    style: _objectSpread(_objectSpread({
+      position: "absolute"
+    }, (0, _utils.getLegendPopupStyle)(legendPosition)), {}, {
+      pointerEvents: "auto",
+      zIndex: 1000
+    })
+  }, __jsx(_chartLegend.ChartLegend, {
+    payload: legendPayload,
+    selectedRegions: selectedRegions,
+    onLegendClick: onLegendClick,
+    legendPosition: legendPosition,
+    legendtype: legendtype,
+    availableRegions: availableRegions,
+    chartColors: chartColors
+  })));
+};

package/components/chart/components/pieDonutChart/props.js

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

package/components/chart/constant.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themes = void 0;
+// Chart themes with color sets - COMPLETE from Angular
+var themes = exports.themes = {
+  Terrestrial: {
+    colors: ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"],
+    tooltip: {
+      backgroundColor: "#de7d28",
+      textColor: "#FFFFFF"
+    }
+  },
+  Annabelle: {
+    colors: ["#393b79", "#5254a3", "#6b6ecf", "#9c9ede", "#637939", "#8ca252", "#b5cf6b", "#cedb9c", "#8c6d31", "#bd9e39", "#e7ba52", "#e7cb94", "#843c39", "#ad494a", "#d6616b", "#e7969c", "#7b4173", "#a55194", "#ce6dbd", "#de9ed6"],
+    tooltip: {
+      backgroundColor: "#2e306f",
+      textColor: "#FFFFFF"
+    }
+  },
+  Azure: {
+    colors: ["#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476", "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9"],
+    tooltip: {
+      backgroundColor: "#3182bd",
+      textColor: "#FFFFFF"
+    }
+  },
+  Retro: {
+    colors: ["#0ca7a1", "#ffa615", "#334957", "#acc5c2", "#988f90", "#8accc9", "#515151", "#f27861", "#36c9fd", "#794668", "#0f709d", "#0d2738", "#44be78", "#4a1839", "#6a393f", "#557d8b", "#6c331c", "#1c1c1c", "#861500", "#09562a"],
+    tooltip: {
+      backgroundColor: "#80513a",
+      textColor: "#FFFFFF"
+    }
+  },
+  Mellow: {
+    colors: ["#f0dcbf", "#88c877", "#aeb918", "#2e2c23", "#ddddd2", "#dfe956", "#4c963b", "#5d3801", "#e1eec3", "#cd8472", "#fcfab3", "#9a4635", "#9295ad", "#2e3f12", "#565677", "#557d8b", "#4f4d02", "#0c0c1b", "#833324", "#24120e"],
+    tooltip: {
+      backgroundColor: "#7c9e73",
+      textColor: "#FFFFFF"
+    }
+  },
+  Orient: {
+    colors: ["#a80000", "#cc6c3c", "#f0e400", "#000084", "#fccc6c", "#009c6c", "#cc309c", "#78cc00", "#fc84e4", "#48e4fc", "#4878d8", "#186c0c", "#606060", "#a8a8a8", "#000000", "#d7d7d7", "#75a06e", "#190d0b", "#888888", "#694b84"],
+    tooltip: {
+      backgroundColor: "#c14242",
+      textColor: "#FFFFFF"
+    }
+  },
+  GrayScale: {
+    colors: ["#141414", "#353535", "#5b5b5b", "#848484", "#a8a8a8", "#c3c3c3", "#e0e0e0", "#c8c8c8", "#a5a5a5", "#878787", "#656565", "#4e4e4e", "#303030", "#1c1c1c", "#4f4f4f", "#3b3b3b", "#757575", "#606060", "#868686", "#c1c1c1"],
+    tooltip: {
+      backgroundColor: "#575757",
+      textColor: "#FFFFFF"
+    }
+  },
+  Flyer: {
+    colors: ["#3f454c", "#5a646e", "#848778", "#cededf", "#74c4dd", "#0946ed", "#380bb1", "#000ff0", "#f54a23", "#1db262", "#bca3aa", "#ffa500", "#a86b32", "#63a18c", "#56795e", "#934343", "#b75f5f", "#752d2d", "#4e1111", "#920606"],
+    tooltip: {
+      backgroundColor: "#47637c",
+      textColor: "#FFFFFF"
+    }
+  },
+  Luminosity: {
+    colors: ["#FFFFFF", "#e4e4e4", "#00bcd4", "#f0dd2f", "#00aabf", "#018376", "#e91e63", "#39e5d4", "#ff6d6d", "#00ff76", "#ff9800", "#969696", "#ff4200", "#e00000", "#95cbe5", "#5331ff", "#fff4a7", "#e7a800", "#0061e4", "#d5e7ff"],
+    tooltip: {
+      backgroundColor: "#47637c",
+      textColor: "#FFFFFF"
+    }
+  }
+};