@wavemaker/app-rn-runtime 12.0.0-next.141218 → 12.0.0-next.141221

package/components/chart/basechart.props.js

@@ -0,0 +1,61 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { SkeletonAnimationProps } from '@wavemaker/app-rn-runtime/runtime/base-fragment.component';
+export default class BaseChartComponentProps extends SkeletonAnimationProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "xaxisdatakey", '');
+    _defineProperty(this, "yaxisdatakey", '');
+    _defineProperty(this, "iconclass", '');
+    _defineProperty(this, "dataset", void 0);
+    _defineProperty(this, "type", '');
+    _defineProperty(this, "title", '');
+    _defineProperty(this, "subheading", '');
+    _defineProperty(this, "theme", '');
+    _defineProperty(this, "xaxislabel", '');
+    _defineProperty(this, "xunits", '');
+    _defineProperty(this, "staggerlabels", false);
+    _defineProperty(this, "yaxislabel", '');
+    _defineProperty(this, "yunits", '');
+    _defineProperty(this, "yaxislabeldistance", undefined);
+    _defineProperty(this, "xaxislabeldistance", undefined);
+    _defineProperty(this, "offsetxaxis", undefined);
+    _defineProperty(this, "offsetyaxis", undefined);
+    _defineProperty(this, "customcolors", '');
+    _defineProperty(this, "legendheight", 0);
+    _defineProperty(this, "labellegendheight", 0);
+    _defineProperty(this, "labeltype", 'percent');
+    _defineProperty(this, "bubblesize", '');
+    _defineProperty(this, "shape", '');
+    _defineProperty(this, "loadingicon", 'fa fa-circle-o-notch fa-pulse');
+    _defineProperty(this, "loadingdatamsg", 'Loading...');
+    _defineProperty(this, "nodatamessage", 'No data found');
+    _defineProperty(this, "offsetbottom", 50);
+    _defineProperty(this, "offsettop", 70);
+    _defineProperty(this, "offsetleft", 65);
+    _defineProperty(this, "offsetright", 25);
+    _defineProperty(this, "showlegend", 'top');
+    _defineProperty(this, "showlabels", 'outside');
+    _defineProperty(this, "tooltips", false);
+    _defineProperty(this, "interpolation", 'linear');
+    _defineProperty(this, "highlightpoints", false);
+    _defineProperty(this, "showvalues", false);
+    _defineProperty(this, "showyaxis", true);
+    _defineProperty(this, "showxaxis", true);
+    _defineProperty(this, "ydomain", 'Min');
+    _defineProperty(this, "xdomain", 'Min');
+    _defineProperty(this, "labelangle", 0);
+    _defineProperty(this, "xtickexpr", void 0);
+    _defineProperty(this, "ytickexpr", void 0);
+    _defineProperty(this, "hidegridxaxis", false);
+    _defineProperty(this, "hidegridyaxis", false);
+    _defineProperty(this, "autoadjustlabels", false);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", void 0);
+    _defineProperty(this, "renderitempartial", void 0);
+    _defineProperty(this, "ynumberformat", '');
+  }
+}
+//# sourceMappingURL=basechart.props.js.map

package/components/chart/bubble-chart/bubble-chart.component.js

@@ -0,0 +1,104 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Text, View, Platform } from 'react-native';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import WmBubbleChartProps from './bubble-chart.props';
+import { DEFAULT_CLASS } from './bubble-chart.styles';
+import { BaseChartComponent, BaseChartComponentState } from "@wavemaker/app-rn-runtime/components/chart/basechart.component";
+import { VictoryChart, VictoryLegend, VictoryScatter } from "victory-native";
+import { Svg } from "react-native-svg";
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+export class WmBubbleChartState extends BaseChartComponentState {}
+export default class WmBubbleChart extends BaseChartComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmBubbleChartProps(), new WmBubbleChartState());
+  }
+  onSelect(event, data) {
+    let value = data.data[data.index].y;
+    let label = this.state.xaxisDatakeyArr[data.datum.x];
+    let selectedItem = this.props.dataset[data.index];
+    const nativeEvent = event.nativeEvent;
+    this.setTooltipPosition(nativeEvent);
+    let selectedChartItem = [{
+      series: 0,
+      x: data.index,
+      y: value,
+      _dataObj: selectedItem
+    }, data.index];
+    this.updateState({
+      tooltipXaxis: label,
+      tooltipYaxis: value,
+      isTooltipOpen: true,
+      selectedItem: {
+        ...selectedItem,
+        index: data.index
+      }
+    });
+    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
+  }
+  renderWidget(props) {
+    var _this$state$data;
+    this.invokeEventCallback('onBeforerender', [this.proxy, null]);
+    if (!((_this$state$data = this.state.data) !== null && _this$state$data !== void 0 && _this$state$data.length)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(View, _extends({}, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
+      style: this.styles.root,
+      onLayout: this.onViewLayoutChange.bind(this)
+    }), this.getTooltip(), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
+      iconclass: props.iconclass,
+      styles: this.styles.icon
+    }) : null, /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.title
+    }, props.title)), /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.subHeading
+    }, props.subheading)), /*#__PURE__*/React.createElement(VictoryChart, {
+      theme: this.state.theme,
+      height: this.styles.root.height,
+      width: this.state.chartWidth || this.screenWidth,
+      padding: {
+        top: props.offsettop,
+        bottom: props.offsetbottom,
+        left: props.offsetleft,
+        right: props.offsetright
+      }
+    }, /*#__PURE__*/React.createElement(VictoryLegend, {
+      name: 'legend',
+      containerComponent: /*#__PURE__*/React.createElement(Svg, null),
+      orientation: "horizontal",
+      gutter: 20,
+      data: [],
+      theme: this.state.theme
+    }), this.getLegendView(), this.getXaxis(), this.getYAxis(), this.state.data.map((d, i) => {
+      return /*#__PURE__*/React.createElement(VictoryScatter, {
+        colorScale: this.state.colors,
+        style: {
+          data: {
+            fill: this.state.colors[i],
+            opacity: ({
+              datum
+            }) => datum.opacity
+          }
+        },
+        key: props.name + '_bubble_' + i,
+        name: props.name + '_bubble_' + i,
+        data: d,
+        size: 5,
+        events: [{
+          target: 'data',
+          eventHandlers: Platform.OS == "web" ? {
+            onClick: this.onSelect.bind(this)
+          } : {
+            onPress: this.onSelect.bind(this)
+          }
+        }]
+      });
+    })));
+  }
+}
+//# sourceMappingURL=bubble-chart.component.js.map

package/components/chart/bubble-chart/bubble-chart.props.js

@@ -0,0 +1,11 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import BaseChartComponentProps from "@wavemaker/app-rn-runtime/components/chart/basechart.props";
+export default class WmBubbleChartProps extends BaseChartComponentProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "onSelect", void 0);
+  }
+}
+//# sourceMappingURL=bubble-chart.props.js.map

package/components/chart/donut-chart/donut-chart.props.js

@@ -0,0 +1,11 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import WmPieChartProps from "@wavemaker/app-rn-runtime/components/chart/pie-chart/pie-chart.props";
+export default class WmDonutChartProps extends WmPieChartProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "donutratio", 0.5);
+  }
+}
+//# sourceMappingURL=donut-chart.props.js.map

package/components/chart/line-chart/line-chart.component.js

@@ -0,0 +1,110 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Text, View, Platform } from 'react-native';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { VictoryChart, VictoryLine, VictoryScatter, VictoryGroup } from 'victory-native';
+import WmLineChartProps from './line-chart.props';
+import { DEFAULT_CLASS } from './line-chart.styles';
+import { BaseChartComponent, BaseChartComponentState } from "@wavemaker/app-rn-runtime/components/chart/basechart.component";
+import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+export class WmLineChartState extends BaseChartComponentState {}
+export default class WmLineChart extends BaseChartComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmLineChartProps(), new WmLineChartState());
+  }
+  onSelect(event, data) {
+    let value = data.data[data.index].y;
+    let label = this.state.xaxisDatakeyArr[data.datum.x];
+    let selectedItem = this.props.dataset[data.index];
+    const nativeEvent = event.nativeEvent;
+    this.setTooltipPosition(nativeEvent);
+    let selectedChartItem = [{
+      series: 0,
+      x: data.index,
+      y: value,
+      _dataObj: selectedItem
+    }, data.index];
+    this.updateState({
+      tooltipXaxis: label,
+      tooltipYaxis: value,
+      isTooltipOpen: true,
+      selectedItem: {
+        ...selectedItem,
+        index: data.index
+      }
+    });
+    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
+  }
+  renderWidget(props) {
+    var _this$state$data;
+    this.invokeEventCallback('onBeforerender', [this.proxy, null]);
+    if (!((_this$state$data = this.state.data) !== null && _this$state$data !== void 0 && _this$state$data.length)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: this.styles.root
+    }, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
+      onLayout: this.onViewLayoutChange
+    }), this.getTooltip(), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
+      iconclass: props.iconclass,
+      styles: this.styles.icon
+    }) : null, /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.title
+    }, props.title)), /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.subHeading
+    }, props.subheading)), /*#__PURE__*/React.createElement(VictoryChart, {
+      theme: this.state.theme,
+      height: this.styles.root.height,
+      width: this.state.chartWidth || this.screenWidth,
+      padding: {
+        top: props.offsettop,
+        bottom: props.offsetbottom,
+        left: props.offsetleft,
+        right: props.offsetright
+      }
+    }, this.getLegendView(), this.getXaxis(), this.getYAxis(), this.state.data.map((d, i) => {
+      return /*#__PURE__*/React.createElement(VictoryGroup, {
+        key: props.name + '_line_group_' + i
+      }, /*#__PURE__*/React.createElement(VictoryLine, {
+        interpolation: props.interpolation,
+        key: props.name + '_line_' + i,
+        name: props.name + '_' + i,
+        standalone: true,
+        style: {
+          data: {
+            stroke: this.state.colors[i] || ThemeVariables.INSTANCE.chartLineColor,
+            strokeWidth: props.linethickness
+          }
+        },
+        data: this.isRTL ? d.toReversed() : d
+      }), /*#__PURE__*/React.createElement(VictoryScatter, {
+        size: 5,
+        key: props.name + '_scatter' + i,
+        style: {
+          data: props.highlightpoints || this.state.data.length === 1 ? {
+            fill: this.state.colors[i],
+            opacity: 0.8
+          } : {
+            opacity: 0
+          }
+        },
+        data: this.isRTL ? d.toReversed() : d,
+        events: [{
+          target: 'data',
+          eventHandlers: Platform.OS == "web" ? {
+            onClick: this.onSelect.bind(this)
+          } : {
+            onPress: this.onSelect.bind(this)
+          }
+        }]
+      }));
+    })));
+  }
+}
+//# sourceMappingURL=line-chart.component.js.map

package/components/chart/line-chart/line-chart.props.js

@@ -0,0 +1,14 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import BaseChartComponentProps from "@wavemaker/app-rn-runtime/components/chart/basechart.props";
+export default class WmLineChartProps extends BaseChartComponentProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "linethickness", 2);
+    _defineProperty(this, "onSelect", void 0);
+    _defineProperty(this, "skeletonheight", null);
+    _defineProperty(this, "skeletonwidth", null);
+  }
+}
+//# sourceMappingURL=line-chart.props.js.map

package/components/chart/pie-chart/pie-chart.component.js

@@ -0,0 +1,228 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { View, Text, Platform } from 'react-native';
+import { Svg } from 'react-native-svg';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { VictoryLabel, VictoryPie } from 'victory-native';
+import WmPieChartProps from './pie-chart.props';
+import { DEFAULT_CLASS } from './pie-chart.styles';
+import { formatCompactNumber } from '@wavemaker/app-rn-runtime/core/utils';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import { BaseChartComponent, BaseChartComponentState } from '@wavemaker/app-rn-runtime/components/chart/basechart.component';
+import WmDonutChartProps from '@wavemaker/app-rn-runtime/components/chart/donut-chart/donut-chart.props';
+import { Legend } from '../legend/legend.component';
+export class WmPieChartState extends BaseChartComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "chartWidth", 0);
+    _defineProperty(this, "totalHeight", 0);
+    _defineProperty(this, "infoHeight", 10);
+    _defineProperty(this, "legendWidth", 0);
+    _defineProperty(this, "legendHeight", 0);
+    _defineProperty(this, "opacity", 0);
+  }
+}
+export default class WmPieChart extends BaseChartComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, props.type === 'Donut' ? new WmDonutChartProps() : new WmPieChartProps(), new WmPieChartState());
+    _defineProperty(this, "onViewLayoutChange", e => {
+      var _e$nativeEvent;
+      let viewWidth = e.nativeEvent.layout.width;
+      this.updateState({
+        chartWidth: viewWidth,
+        totalHeight: (_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.layout.height
+      });
+    });
+    _defineProperty(this, "onInfoViewLayoutChange", e => {
+      var _e$nativeEvent2;
+      this.updateState({
+        infoHeight: (_e$nativeEvent2 = e.nativeEvent) === null || _e$nativeEvent2 === void 0 ? void 0 : _e$nativeEvent2.layout.height,
+        opacity: 1
+      });
+    });
+    _defineProperty(this, "onLegendViewLayoutChange", e => {
+      var _e$nativeEvent3, _e$nativeEvent4;
+      this.updateState({
+        legendWidth: (_e$nativeEvent3 = e.nativeEvent) === null || _e$nativeEvent3 === void 0 ? void 0 : _e$nativeEvent3.layout.width,
+        legendHeight: (_e$nativeEvent4 = e.nativeEvent) === null || _e$nativeEvent4 === void 0 ? void 0 : _e$nativeEvent4.layout.height
+      });
+    });
+  }
+  componentDidMount() {
+    super.componentDidMount();
+  }
+  getLabel(d, props) {
+    switch (props.labeltype) {
+      case 'percent':
+        {
+          return Math.round(d.y * 100 / this.state.total) + '%';
+        }
+      case 'key':
+        {
+          return this.state.xaxisDatakeyArr[d.x];
+        }
+      case 'value':
+        {
+          return formatCompactNumber(d.y);
+        }
+      case 'key-value':
+        {
+          return this.state.xaxisDatakeyArr[d.x] + ' ' + d.y;
+        }
+    }
+  }
+  onSelect(event, data) {
+    let value = data.slice.value;
+    let label = this.state.xaxisDatakeyArr[data.datum.x];
+    let selectedItem = this.props.dataset[data.index];
+    let selectedChartItem = data.slice;
+    selectedChartItem["data"] = {
+      x: label,
+      y: value,
+      color: data.style.fill,
+      _dataObj: selectedItem
+    };
+    const nativeEvent = event.nativeEvent;
+    this.setTooltipPosition(nativeEvent);
+    this.updateState({
+      tooltipXaxis: label,
+      tooltipYaxis: value,
+      isTooltipOpen: true,
+      selectedItem: {
+        ...selectedItem,
+        index: data.index
+      }
+    });
+    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
+  }
+  renderWidget(props) {
+    this.invokeEventCallback('onBeforerender', [this.proxy, null]);
+    if (!this.state.data.length) {
+      return null;
+    }
+    const pieData = this.state.data[0];
+    const chartWidth = this.state.chartWidth - (props.showlegend === 'right' ? this.state.legendWidth : 0);
+    const chartHeight = (this.styles.root.height ? this.state.totalHeight : chartWidth) - this.state.infoHeight - (props.showlegend === 'right' ? 0 : this.state.legendHeight);
+    let radius = (Math.min(chartWidth, chartHeight) - 40) / 2;
+    let innerRadius = props.donutratio * radius;
+    let styleProp = {};
+    let labelRadius;
+    if (props.showlabels === 'hide') {
+      styleProp = {
+        labels: {
+          display: "none"
+        }
+      };
+    } else if (props.showlabels === 'inside') {
+      labelRadius = radius / 2;
+    } else {
+      labelRadius = radius + 8;
+    }
+    const origin = {
+      x: chartWidth / 2,
+      y: chartHeight / 2
+    };
+    const orientation = props.showlegend === 'right' ? 'vertical' : 'horizontal';
+    let legendData = pieData.map((d, index) => {
+      return {
+        name: this.state.xaxisDatakeyArr[d.x],
+        color: this.state.colors[index % this.state.colors.length]
+      };
+    });
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: [{
+        opacity: this.state.opacity
+      }, this.styles.root]
+    }, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
+      onLayout: this.onViewLayoutChange,
+      key: `${props.title}_pie_chart`
+    }), /*#__PURE__*/React.createElement(View, {
+      onLayout: this.onInfoViewLayoutChange
+    }, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center'
+      }
+    }, props.iconclass ? /*#__PURE__*/React.createElement(WmIcon, {
+      iconclass: props.iconclass,
+      styles: this.styles.icon
+    }) : null, /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.title
+    }, props.title)), /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.subHeading
+    }, props.subheading)), props.showlegend === 'top' ? /*#__PURE__*/React.createElement(View, {
+      onLayout: this.onLegendViewLayoutChange
+    }, /*#__PURE__*/React.createElement(Legend, {
+      data: legendData,
+      testStyle: this.styles.legendText,
+      dotStyle: this.styles.legenedDot
+    })) : null, /*#__PURE__*/React.createElement(View, {
+      style: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
+    }, this.getTooltip(), /*#__PURE__*/React.createElement(View, {
+      style: {
+        flex: 1
+      }
+    }, chartWidth ? /*#__PURE__*/React.createElement(Svg, {
+      width: chartWidth,
+      height: chartHeight
+    }, /*#__PURE__*/React.createElement(VictoryPie, {
+      style: styleProp,
+      standalone: false,
+      colorScale: this.state.colors,
+      labels: ({
+        datum
+      }) => this.getLabel(datum, props),
+      endAngle: this.state.endAngle || 0,
+      radius: radius,
+      innerRadius: innerRadius,
+      theme: this.state.theme,
+      key: props.name,
+      name: props.name,
+      data: this.isRTL ? pieData.toReversed() : pieData,
+      origin: origin,
+      labelPlacement: props.labelplacement,
+      labelRadius: labelRadius,
+      events: [{
+        target: 'data',
+        eventHandlers: Platform.OS == "web" ? {
+          onClick: this.onSelect.bind(this)
+        } : {
+          onPress: this.onSelect.bind(this)
+        }
+      }]
+    }), /*#__PURE__*/React.createElement(VictoryLabel, {
+      textAnchor: "middle",
+      style: {
+        ...this.styles.centerLabel,
+        fill: this.styles.centerLabel.color
+      },
+      x: origin.x,
+      y: origin.y,
+      text: props.centerlabel
+    })) : null), props.showlegend === 'right' ? /*#__PURE__*/React.createElement(View, {
+      style: {
+        maxWidth: '50%'
+      },
+      onLayout: this.onLegendViewLayoutChange
+    }, /*#__PURE__*/React.createElement(Legend, {
+      data: legendData,
+      testStyle: this.styles.legendText,
+      dotStyle: this.styles.legenedDot,
+      orientation: "vertical"
+    })) : null), props.showlegend === 'bottom' ? /*#__PURE__*/React.createElement(View, {
+      onLayout: this.onLegendViewLayoutChange
+    }, /*#__PURE__*/React.createElement(Legend, {
+      data: legendData,
+      testStyle: this.styles.legendText,
+      dotStyle: this.styles.legenedDot
+    })) : null);
+  }
+}
+//# sourceMappingURL=pie-chart.component.js.map

package/components/chart/pie-chart/pie-chart.props.js

@@ -0,0 +1,14 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import BaseChartComponentProps from '@wavemaker/app-rn-runtime/components/chart/basechart.props';
+export default class WmPieChartProps extends BaseChartComponentProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "donutratio", 0);
+    _defineProperty(this, "labelplacement", 'vertical');
+    _defineProperty(this, "centerlabel", '');
+    _defineProperty(this, "onSelect", void 0);
+  }
+}
+//# sourceMappingURL=pie-chart.props.js.map