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

package/components/basic/skeleton/skeleton.component.js

@@ -0,0 +1,151 @@
+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, Animated, Easing, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmSkeletonProps from './skeleton.props';
+import { DEFAULT_CLASS } from './skeleton.styles';
+import { isUndefined } from 'lodash-es';
+export class WmSkeletonState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "layout", {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0
+    });
+    _defineProperty(this, "animate", false);
+  }
+}
+class AnimationRunner {
+  constructor() {
+    _defineProperty(this, "time", 1000);
+    _defineProperty(this, "speed", 1);
+    _defineProperty(this, "counter", 0);
+    _defineProperty(this, "animationValue", new Animated.Value(0.2));
+  }
+  run() {
+    if (this.counter == 0) {
+      return;
+    }
+    Animated.timing(this.animationValue, {
+      duration: this.time * this.speed,
+      toValue: 1,
+      useNativeDriver: true,
+      easing: Easing.linear
+    }).start(event => {
+      if (event.finished) {
+        this.animationValue.setValue(0);
+        this.run();
+      }
+    });
+  }
+  start() {
+    this.counter++;
+    if (this.counter == 1) {
+      this.run();
+    }
+  }
+  stop() {
+    this.counter = Math.max(--this.counter, 0);
+  }
+  getValue() {
+    return this.animationValue;
+  }
+}
+export default class WmSkeleton extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmSkeletonProps(), new WmSkeletonState());
+    _defineProperty(this, "skeletonloaderRef", null);
+    _defineProperty(this, "animationRunner", new AnimationRunner());
+    _defineProperty(this, "onLayoutChange", event => {
+      var _this$skeletonloaderR;
+      (_this$skeletonloaderR = this.skeletonloaderRef) === null || _this$skeletonloaderR === void 0 || _this$skeletonloaderR.measure((x, y, width, height, px, py) => {
+        let layout = {
+          left: px,
+          top: py,
+          width: width,
+          height: height
+        };
+        this.setState({
+          layout: {
+            ...layout
+          },
+          animate: true
+        });
+      });
+    });
+  }
+  componentDidMount() {
+    super.componentDidMount();
+    this.animationRunner.start();
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    this.animationRunner.stop();
+  }
+  renderWidget(props) {
+    var _this$styles$gradient, _this$styles$gradient2, _this$styles$gradient3;
+    let outpuRange = [-this.state.layout.width - this.state.layout.left, this.state.layout.width + this.state.layout.height];
+    let deg = -20;
+    let translateX = this.animationRunner.getValue().interpolate({
+      inputRange: [0, 1],
+      outputRange: [-50, 400]
+    });
+    return /*#__PURE__*/React.createElement(View, {
+      ref: ref => {
+        this.skeletonloaderRef = ref;
+      },
+      onLayout: this.onLayoutChange,
+      style: this.styles.root
+    }, props.children, this.state.animate ? /*#__PURE__*/React.createElement(Animated.View, {
+      style: [StyleSheet.absoluteFill, this.styles.animatedView, {
+        transform: [{
+          translateX
+        }, {
+          rotate: deg + 'deg'
+        }]
+      }]
+    }, /*#__PURE__*/React.createElement(LinearGradient, {
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 0
+      },
+      colors: [(_this$styles$gradient = this.styles.gradientForeground.backgroundColor) === null || _this$styles$gradient === void 0 ? void 0 : _this$styles$gradient.toString(), (_this$styles$gradient2 = this.styles.gradient.backgroundColor) === null || _this$styles$gradient2 === void 0 ? void 0 : _this$styles$gradient2.toString(), (_this$styles$gradient3 = this.styles.gradientForeground.backgroundColor) === null || _this$styles$gradient3 === void 0 ? void 0 : _this$styles$gradient3.toString()],
+      locations: [0, 0.5, 1],
+      style: [this.styles.gradient, {
+        backgroundColor: this.styles.animatedView.backgroundColor
+      }]
+    })) : null);
+  }
+}
+export const createSkeleton = (theme, skeletonStyles, wrapper, children) => {
+  const style = {};
+  const addStyleProp = propName => {
+    if (!isUndefined(wrapper[propName])) {
+      style[propName] = wrapper[propName];
+    }
+  };
+  addStyleProp('width');
+  addStyleProp('height');
+  addStyleProp('borderRadius');
+  addStyleProp('borderRadius');
+  addStyleProp('marginTop');
+  addStyleProp('marginBottom');
+  addStyleProp('marginLeft');
+  addStyleProp('marginRight');
+  return /*#__PURE__*/React.createElement(WmSkeleton, {
+    styles: theme.mergeStyle(skeletonStyles, {
+      root: style
+    }),
+    children: children
+  });
+};
+//# sourceMappingURL=skeleton.component.js.map

package/components/basic/skeleton/skeleton.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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmSkeletonProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "children", null);
+  }
+}
+//# sourceMappingURL=skeleton.props.js.map

package/components/basic/spinner/spinner.component.js

@@ -0,0 +1,90 @@
+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 { Text, View, Platform } from 'react-native';
+import Color from "color";
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmSpinnerProps from './spinner.props';
+import { DEFAULT_CLASS } from './spinner.styles';
+import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
+import WmPicture from '@wavemaker/app-rn-runtime/components/basic/picture/picture.component';
+import LottieView from 'lottie-react-native';
+import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
+export class WmSpinnerState extends BaseComponentState {}
+export default class WmSpinner extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmSpinnerProps());
+    _defineProperty(this, "recursiveSearch", (obj, colors) => {
+      obj && Object.keys(obj).forEach(key => {
+        let value = obj[key];
+        let ind = Math.floor(Math.random() * (0 - colors.length) + colors.length);
+        if (key == "nm" && (value.toLowerCase().includes('fill ') || value.toLowerCase().includes('stroke '))) {
+          if (obj["c"] && obj["c"]["k"] && (obj["c"]["k"].length == 4 || obj["c"]["k"].length == 3 && typeof obj["c"]["k"][0] == 'number')) {
+            obj["c"]["k"] = colors[ind];
+          } else {
+            if (obj["c"] && obj["c"]["k"]) {
+              for (let shape in obj["c"]["k"]) {
+                if (obj["c"]["k"][shape] && obj["c"]["k"][shape]["s"]) {
+                  obj["c"]["k"][shape]["s"] = colors[ind];
+                }
+              }
+            }
+          }
+        } else if (typeof value === 'object') {
+          this.recursiveSearch(value, colors);
+        }
+      });
+      return obj;
+    });
+  }
+  prepareIcon(props) {
+    return /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('icon'),
+      styles: this.styles.icon,
+      iconclass: props.iconclass + ' fa-spin',
+      iconsize: props.iconsize
+    });
+  }
+  prepareImage(props) {
+    return /*#__PURE__*/React.createElement(WmPicture, {
+      id: this.getTestId('picture'),
+      styles: this.styles.image,
+      picturesource: props.image
+    });
+  }
+  toRgbArray(color) {
+    return [color.red() / 255, color.green() / 255, color.blue() / 255, 1];
+  }
+  addClasstoLottie(lottiePath) {
+    let primaryColor = Color(ThemeVariables.INSTANCE.primaryColor);
+    let colors = [this.toRgbArray(primaryColor), this.toRgbArray(primaryColor.darken(0.2)), this.toRgbArray(primaryColor.darken(0.4)), this.toRgbArray(primaryColor.darken(0.6)), this.toRgbArray(primaryColor.darken(0.8))];
+    return this.recursiveSearch(lottiePath.json, lottiePath.loader == 'circleSpinner' ? [colors[0]] : colors);
+  }
+  prepareLottie(props) {
+    var _Lottie;
+    let Lottie = Platform.OS == 'web' ? require('react-lottie-player') : null;
+    Lottie = ((_Lottie = Lottie) === null || _Lottie === void 0 ? void 0 : _Lottie.default) || Lottie;
+    return Platform.OS == 'web' ? /*#__PURE__*/React.createElement(Lottie, {
+      animationData: this.addClasstoLottie(props.lottie),
+      loop: true,
+      play: true,
+      style: this.styles.lottie
+    }) : /*#__PURE__*/React.createElement(LottieView, _extends({}, this.getTestProps('loader'), {
+      source: this.addClasstoLottie(props.lottie),
+      resizeMode: "contain",
+      autoPlay: true,
+      loop: true,
+      style: this.styles.lottie
+    }));
+  }
+  renderWidget(props) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, props.lottie ? this.prepareLottie(props) : props.image ? this.prepareImage(props) : this.prepareIcon(props), props.caption ? /*#__PURE__*/React.createElement(Text, _extends({}, this.getTestPropsForLabel(), {
+      style: this.styles.text
+    }), props.caption) : null);
+  }
+}
+//# sourceMappingURL=spinner.component.js.map

package/components/basic/spinner/spinner.props.js

@@ -0,0 +1,17 @@
+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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmSpinnerProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "caption", 'Loading...');
+    _defineProperty(this, "iconclass", 'fa fa-circle-o-notch fa-spin');
+    _defineProperty(this, "iconsize", 0);
+    _defineProperty(this, "image", null);
+    _defineProperty(this, "imageheight", null);
+    _defineProperty(this, "imagewidth", 20);
+    _defineProperty(this, "lottie", null);
+  }
+}
+//# sourceMappingURL=spinner.props.js.map

package/components/basic/tooltip/tooltip.props.js

@@ -0,0 +1,18 @@
+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 { BaseProps } from "@wavemaker/app-rn-runtime/core/base.component";
+export default class WmTooltipProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "showTooltip", false);
+    _defineProperty(this, "text", "");
+    _defineProperty(this, "tooltipStyle", void 0);
+    _defineProperty(this, "tooltipLabelStyle", void 0);
+    _defineProperty(this, "tooltipTriangleStyle", void 0);
+    _defineProperty(this, "direction", "up");
+    _defineProperty(this, "children", void 0);
+  }
+}
+;
+//# sourceMappingURL=tooltip.props.js.map

package/components/basic/video/video.component.js

@@ -0,0 +1,68 @@
+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 } from 'react-native';
+import { ResizeMode, Video } from 'expo-av';
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmVideoProps from './video.props';
+import { DEFAULT_CLASS } from './video.styles';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { isFullPathUrl } from '@wavemaker/app-rn-runtime/core/utils';
+import { createSkeleton } from '@wavemaker/app-rn-runtime/components/basic/skeleton/skeleton.component';
+export class WmVideoState extends BaseComponentState {}
+export default class WmVideo extends BaseComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmVideoProps(), new WmVideoState());
+    _defineProperty(this, "video", null);
+    _defineProperty(this, "handlePlaybackStatus", status => {
+      if ('isPlaying' in status && typeof status === 'object') {
+        console.log(status.isPlaying ? 'Playing' : 'Paused');
+      } else if ('error' in status) {
+        console.error(`Encountered a fatal error during playback: ${status.error}`);
+      }
+    });
+  }
+  getSource(path) {
+    if (!path) {
+      return null;
+    }
+    const resource = this.loadAsset(path);
+    if (isFullPathUrl(resource)) {
+      return {
+        uri: resource
+      };
+    }
+    return resource;
+  }
+  renderSkeleton(props) {
+    return createSkeleton(this.theme, this.styles.skeleton, {
+      ...this.styles.root
+    });
+  }
+  renderWidget(props) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: this.styles.root
+    }, this._background, /*#__PURE__*/React.createElement(Video, _extends({}, getAccessibilityProps(AccessibilityWidgetType.VIDEO, props), {
+      ref: video => {
+        this.video = video;
+      },
+      style: {
+        width: '100%',
+        height: '100%',
+        flex: 1
+      },
+      shouldPlay: props.autoplay,
+      onPlaybackStatusUpdate: this.handlePlaybackStatus,
+      source: this.getSource(props.mp4format || props.webmformat),
+      posterSource: this.getSource(props.videoposter),
+      useNativeControls: props.controls,
+      resizeMode: ResizeMode.CONTAIN,
+      isLooping: props.loop,
+      isMuted: props.muted,
+      testID: this.getTestId('video')
+    })));
+  }
+}
+//# sourceMappingURL=video.component.js.map

package/components/basic/video/video.props.js

@@ -0,0 +1,25 @@
+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 { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';
+export default class WmVideoProps extends BaseProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "autoplay", false);
+    _defineProperty(this, "controls", false);
+    _defineProperty(this, "loop", false);
+    _defineProperty(this, "mp4format", null);
+    _defineProperty(this, "muted", false);
+    _defineProperty(this, "oggformat", null);
+    _defineProperty(this, "subtitlelang", 'en');
+    _defineProperty(this, "subtitlesource", null);
+    _defineProperty(this, "videoposter", 'resources/images/imagelists/default-image.png');
+    _defineProperty(this, "videopreload", 'none');
+    _defineProperty(this, "videosupportmessage", 'Your browser does not support the video tag.');
+    _defineProperty(this, "webmformat", null);
+    _defineProperty(this, "accessibilitylabel", undefined);
+    _defineProperty(this, "hint", undefined);
+    _defineProperty(this, "accessibilityrole", void 0);
+  }
+}
+//# sourceMappingURL=video.props.js.map

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

@@ -0,0 +1,148 @@
+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 Color from "color";
+import { View, Text, Platform } from 'react-native';
+import { Defs, LinearGradient, Stop } from 'react-native-svg';
+import { VictoryArea, VictoryChart, VictoryStack, VictoryScatter, VictoryGroup } from "victory-native";
+import WmAreaChartProps from './area-chart.props';
+import { DEFAULT_CLASS } from './area-chart.styles';
+import { BaseChartComponent, BaseChartComponentState } from "@wavemaker/app-rn-runtime/components/chart/basechart.component";
+import WmIcon from "@wavemaker/app-rn-runtime/components/basic/icon/icon.component";
+import { isNumber } from 'lodash-es';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+export class WmAreaChartState extends BaseChartComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "chartWidth", 0);
+  }
+}
+export default class WmAreaChart extends BaseChartComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmAreaChartProps(), new WmAreaChartState());
+    _defineProperty(this, "onViewLayoutChange", e => {
+      let viewWidth = e.nativeEvent.layout.width;
+      this.updateState({
+        chartWidth: viewWidth
+      });
+    });
+  }
+  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$props$name;
+    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;
+    }
+    let mindomain = {
+      x: props.xdomain === 'Min' ? this.state.chartMinX : undefined,
+      y: props.ydomain === 'Min' ? this.state.chartMinY : undefined
+    };
+    const chartName = (_this$props$name = this.props.name) !== null && _this$props$name !== void 0 ? _this$props$name : 'nonameAreachart';
+    let gradientStop = '100%';
+    if (isNumber(this.state.chartMaxY) && isNumber(this.state.chartMinY) && this.state.chartMaxY > 0) {
+      gradientStop = (this.state.chartMaxY - this.state.chartMinY) * 100 / this.state.chartMaxY + '%';
+    }
+    return /*#__PURE__*/React.createElement(View, _extends({}, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
+      style: this.styles.root,
+      onLayout: this.onViewLayoutChange.bind(this),
+      key: `${props.title}_area_chart`
+    }), 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)), this.state.chartWidth ? /*#__PURE__*/React.createElement(VictoryChart, {
+      theme: this.state.theme,
+      height: this.styles.root.height,
+      width: this.state.chartWidth || 120,
+      padding: {
+        top: props.offsettop,
+        bottom: props.offsetbottom,
+        left: props.offsetleft,
+        right: props.offsetright
+      },
+      minDomain: mindomain
+    }, this.getLegendView(), this.getXaxis(), this.getYAxis(), /*#__PURE__*/React.createElement(VictoryStack, null, this.state.data.map((d, i) => {
+      return /*#__PURE__*/React.createElement(VictoryGroup, {
+        key: props.name + '_area_group_' + i
+      }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(LinearGradient, {
+        id: `${chartName}Gradient${i}`,
+        x1: "0%",
+        y1: "0%",
+        x2: "0%",
+        y2: "100%"
+      }, /*#__PURE__*/React.createElement(Stop, {
+        offset: "0%",
+        stopColor: Color(this.state.colors[i]).lighten(0.2).rgb().toString()
+      }), /*#__PURE__*/React.createElement(Stop, {
+        offset: gradientStop,
+        stopColor: Color(this.state.colors[i]).lighten(0.6).rgb().toString()
+      }))), /*#__PURE__*/React.createElement(VictoryArea, {
+        interpolation: props.interpolation,
+        key: props.name + '_' + i,
+        name: props.name + '_' + i,
+        style: {
+          data: {
+            fill: `url(#${chartName}Gradient${i})`,
+            stroke: this.state.colors[i],
+            strokeWidth: props.linethickness
+          }
+        },
+        data: this.isRTL ? d.toReversed() : d
+      }), /*#__PURE__*/React.createElement(VictoryScatter, {
+        size: 5,
+        key: props.name + '_scatter' + i,
+        style: {
+          data: props.highlightpoints ? {
+            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)
+          }
+        }]
+      }));
+    }))) : null);
+  }
+}
+//# sourceMappingURL=area-chart.component.js.map

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

@@ -0,0 +1,12 @@
+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 WmAreaChartProps extends BaseChartComponentProps {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "linethickness", 2);
+    _defineProperty(this, "onSelect", void 0);
+  }
+}
+//# sourceMappingURL=area-chart.props.js.map

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

@@ -0,0 +1,120 @@
+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 { View, Text, Platform } from 'react-native';
+import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
+import { VictoryChart, VictoryBar, VictoryStack, VictoryGroup } from "victory-native";
+import { BaseChartComponent, BaseChartComponentState } from "@wavemaker/app-rn-runtime/components/chart/basechart.component";
+import WmBarChartProps from './bar-chart.props';
+import { DEFAULT_CLASS } from './bar-chart.styles';
+import WmIcon from "@wavemaker/app-rn-runtime/components/basic/icon/icon.component";
+export class WmBarChartState extends BaseChartComponentState {}
+export default class WmBarChart extends BaseChartComponent {
+  constructor(props) {
+    super(props, DEFAULT_CLASS, new WmBarChartProps(), new WmBarChartState());
+  }
+  labelFn(data) {
+    return this.abbreviateNumber(data.datum.y);
+  }
+  getBarChart(props) {
+    return this.state.data.map((d, i) => {
+      return /*#__PURE__*/React.createElement(VictoryBar, {
+        key: props.name + '_' + i,
+        horizontal: props.horizontal,
+        labels: props.showvalues ? this.labelFn.bind(this) : undefined,
+        data: this.isRTL ? d.toReversed() : d,
+        height: 100,
+        alignment: "start",
+        style: props.customcolors ? {
+          data: {
+            fill: ({
+              datum
+            }) => {
+              var _this$state$colors$da;
+              return (_this$state$colors$da = this.state.colors[datum.x]) !== null && _this$state$colors$da !== void 0 ? _this$state$colors$da : this.state.colors[datum.x % this.state.colors.length];
+            }
+          }
+        } : {},
+        cornerRadius: {
+          topLeft: this.styles.bar.borderTopLeftRadius,
+          topRight: this.styles.bar.borderTopRightRadius,
+          bottomLeft: this.styles.bar.borderBottomLeftRadius,
+          bottomRight: this.styles.bar.borderBottomRightRadius
+        },
+        events: [{
+          target: 'data',
+          eventHandlers: Platform.OS == "web" ? {
+            onClick: this.onSelect.bind(this)
+          } : {
+            onPress: this.onSelect.bind(this)
+          }
+        }]
+      });
+    });
+  }
+  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) {
+    this.invokeEventCallback('onBeforerender', [this.proxy, null]);
+    if (!this.state.data.length) {
+      return null;
+    }
+    let mindomain = {
+      x: this.props.xdomain === 'Min' ? this.state.chartMinX : undefined,
+      y: this.props.ydomain === 'Min' ? this.state.chartMinY : undefined
+    };
+    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,
+      minDomain: mindomain,
+      padding: {
+        top: props.offsettop,
+        bottom: props.offsetbottom,
+        left: props.offsetleft,
+        right: props.offsetright
+      }
+    }, this.getLegendView(), this.getXaxis(), this.getYAxis(), props.viewtype === 'Stacked' ? /*#__PURE__*/React.createElement(VictoryStack, {
+      colorScale: this.state.colors
+    }, this.getBarChart(props)) : /*#__PURE__*/React.createElement(VictoryGroup, {
+      colorScale: this.state.colors,
+      offset: 10
+    }, this.getBarChart(props))));
+  }
+}
+//# sourceMappingURL=bar-chart.component.js.map