@wavemaker/app-rn-runtime 11.8.5-next.27430 → 11.8.5-patch.1

package/components/chart/basechart.component.js

@@ -0,0 +1,691 @@
+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 { Dimensions, View, Text } from 'react-native';
+import moment from "moment";
+import { forEach, get, isArray, isEmpty, isObject, maxBy, minBy, set, trim, orderBy } from "lodash-es";
+import { VictoryAxis, VictoryLegend, VictoryLabel } from "victory-native";
+import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
+import WmIcon from "@wavemaker/app-rn-runtime/components/basic/icon/icon.component";
+import ThemeFactory from "@wavemaker/app-rn-runtime/components/chart/theme/chart.theme";
+import { DEFAULT_CLASS } from "./basechart.styles";
+import { constructSampleData, getChartType } from "./staticdata";
+import { isWebPreviewMode } from "@wavemaker/app-rn-runtime/core/utils";
+import WmLottie from "../basic/lottie/lottie.component";
+export class BaseChartComponentState extends BaseComponentState {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "data", []);
+    _defineProperty(this, "content", null);
+    _defineProperty(this, "yAxis", []);
+    _defineProperty(this, "xaxisDatakeyArr", []);
+    _defineProperty(this, "legendData", []);
+    _defineProperty(this, "xLabel", '');
+    _defineProperty(this, "yLabel", '');
+    _defineProperty(this, "total", 0);
+    _defineProperty(this, "endAngle", 0);
+    _defineProperty(this, "loading", true);
+    _defineProperty(this, "chartHeight", 0);
+    _defineProperty(this, "chartWidth", 0);
+    _defineProperty(this, "totalHeight", 0);
+    _defineProperty(this, "chartMinY", undefined);
+    _defineProperty(this, "chartMinX", undefined);
+    _defineProperty(this, "chartMaxY", undefined);
+    _defineProperty(this, "chartMaxX", undefined);
+    _defineProperty(this, "tooltipXPosition", 0);
+    _defineProperty(this, "tooltipYPosition", 0);
+    _defineProperty(this, "tooltipXaxis", 0);
+    _defineProperty(this, "tooltipYaxis", 0);
+    _defineProperty(this, "tooltipoffsetx", 50);
+    _defineProperty(this, "tooltipoffsety", 60);
+    _defineProperty(this, "isTooltipOpen", false);
+    _defineProperty(this, "selectedItem", {});
+    _defineProperty(this, "template", "");
+  }
+}
+const screenWidth = Dimensions.get("window").width;
+const shapes = {
+  'circle': 'circle',
+  'cross': 'cross',
+  'diamond': 'diamond',
+  'plus': 'plus',
+  'minus': 'minus',
+  'square': 'square',
+  'star': 'star',
+  'triangle-down': 'triangleDown',
+  'triangle-up': 'triangleUp'
+};
+const SI_SYMBOL = ["", "k", "M", "G", "T", "P", "E"];
+export class BaseChartComponent extends BaseComponent {
+  constructor(props, defaultClass = DEFAULT_CLASS, defaultProps, defaultState) {
+    super(props, defaultClass, defaultProps, defaultState);
+    _defineProperty(this, "screenWidth", screenWidth);
+    this.defaultClass = defaultClass;
+    if (!props.theme) {
+      this.applyTheme(props);
+    }
+    this.subscribe('globaltouch', event => {
+      this.updateState({
+        isTooltipOpen: false
+      });
+    });
+  }
+  componentDidMount() {
+    super.componentDidMount();
+  }
+  onViewLayoutChange(e) {
+    let viewWidth = e.nativeEvent.layout.width;
+    let viewHeight = e.nativeEvent.layout.height;
+    if (this !== null && this !== void 0 && this.state && viewWidth !== this.state.chartWidth) {
+      this.updateState({
+        chartWidth: Number(viewWidth),
+        totalHeight: Number(viewHeight)
+      });
+    }
+  }
+  abbreviateNumber(number) {
+    if (typeof number !== 'number') {
+      return number;
+    }
+    const tier = Math.log10(Math.abs(number)) / 3 | 0;
+    if (tier == 0) {
+      return number;
+    }
+
+    // get suffix and determine scale
+    const suffix = SI_SYMBOL[tier];
+    const scale = Math.pow(10, tier * 3);
+
+    // scale the number
+    var scaled = number / scale;
+
+    // format number and add suffix
+    return scaled.toFixed(1) + suffix;
+  }
+  getLegendView(colorScale) {
+    if (this.state.props.showlegend === 'hide') {
+      return null;
+    }
+    const props = this.state.props;
+    let top = props.showlegend === 'bottom' ? parseInt(this.styles.root.height) : 0;
+    if (top) {
+      top = top - 50; // remove legendHeight
+    }
+    const orientation = props.showlegend === 'right' || props.showlegend === 'left' ? 'vertical' : 'horizontal';
+    return /*#__PURE__*/React.createElement(VictoryLegend, {
+      colorScale: colorScale,
+      name: 'legendData',
+      orientation: orientation,
+      gutter: 20,
+      data: this.state.legendData,
+      style: {
+        border: {
+          stroke: 'none'
+        }
+      },
+      borderPadding: {
+        top: 30,
+        left: 50
+      },
+      y: top
+    });
+  }
+  getYScaleMinValue(value) {
+    const _min = Math.floor(value);
+    return Math.abs(value) - _min > 0 ? value - .1 : _min - 1;
+  }
+  setYAxisFormat(yVal, ynumberformat) {
+    const matchFixed = ynumberformat.match(/\.([0-9])f/);
+    const matchExponential = ynumberformat.match(/\.([0-9])g/);
+    if (matchFixed) {
+      return yVal.toFixed(parseInt(matchFixed[1], 10));
+    } else if (matchExponential) {
+      return yVal.toExponential(parseInt(matchExponential[1], 10));
+    }
+    switch (ynumberformat) {
+      case '%':
+        return (yVal * 100).toFixed(0) + '%';
+      case 'Billion':
+        return (yVal / 1e9).toFixed(1) + 'B';
+      case 'Million':
+        return (yVal / 1e6).toFixed(1) + 'M';
+      case 'Thousand':
+        return (yVal / 1e3).toFixed(1) + 'K';
+      case ',r':
+        return yVal.toLocaleString();
+    }
+  }
+
+  // x axis with vertical lines having grid stroke colors
+  getXaxis() {
+    const minIndex = 0;
+    const maxIndex = this.state.xaxisDatakeyArr.length - 1;
+    const props = this.state.props;
+    const getTickValueLabel = props.xtickexpr;
+    let height = this.styles.root.height || 250;
+    let yaxislabeldistance = props.yaxislabeldistance ? props.yaxislabeldistance : height - 20;
+    if (height && typeof height === 'string') {
+      height = parseInt(height);
+    }
+    return /*#__PURE__*/React.createElement(VictoryAxis, {
+      crossAxis: false,
+      label: (props.xaxislabel || props.xaxisdatakey || "name") + (props.xunits ? `(${props.xunits})` : ''),
+      style: {
+        axisLabel: this.theme.mergeStyle(this.styles.axisLabel, this.styles.yAxisLabel),
+        grid: props.hidegridxaxis ? {
+          stroke: null
+        } : this.theme.mergeStyle(this.styles.grid, this.styles.xGrid),
+        axis: props.showxaxis === false ? {
+          stroke: 'none'
+        } : this.theme.mergeStyle(this.styles.axis, this.styles.xAxis),
+        ticks: this.theme.mergeStyle(this.styles.ticks, this.styles.xTicks),
+        tickLabels: this.theme.mergeStyle(this.styles.tickLabels, this.styles.xTickLabels)
+      },
+      fixLabelOverlap: props.autoadjustlabels ? true : false,
+      axisLabelComponent: /*#__PURE__*/React.createElement(VictoryLabel, {
+        y: yaxislabeldistance
+      }),
+      tickLabelComponent: /*#__PURE__*/React.createElement(VictoryLabel, {
+        y: props.offsetyaxis ? props.offsetyaxis : height - 30,
+        angle: props.labelangle || 0
+      }),
+      theme: this.state.theme,
+      tickCount: this.state.xaxisDatakeyArr.length,
+      invertAxis: this.isRTL,
+      tickFormat: (d, i, ticks) => {
+        if (getTickValueLabel) {
+          return getTickValueLabel(this.state.xaxisDatakeyArr[d], i, (ticks || []).length);
+        } else if (this.state.xaxisDatakeyArr) {
+          return this.state.xaxisDatakeyArr[d];
+        }
+        return '';
+      }
+    });
+  }
+
+  /* y axis with horizontal lines having grid stroke colors*/
+  getYAxis() {
+    const props = this.state.props;
+    if (props.showyaxis === false) {
+      return null;
+    }
+    const getTickValueLabel = props.ytickexpr;
+    const ynumberformat = props.ynumberformat;
+    let xaxislabeldistance = props.xaxislabeldistance ? props.xaxislabeldistance : 20;
+    return /*#__PURE__*/React.createElement(VictoryAxis, {
+      crossAxis: false,
+      label: (props.yaxislabel || props.yaxisdatakey) + (props.yunits ? `(${props.yunits})` : ''),
+      style: {
+        axisLabel: this.theme.mergeStyle(this.styles.axisLabel, this.styles.yAxisLabel),
+        grid: props.hidegridyaxis ? {
+          stroke: null
+        } : this.theme.mergeStyle(this.styles.grid, this.styles.yGrid),
+        axis: props.showxaxis === false ? {
+          stroke: 'none'
+        } : this.theme.mergeStyle(this.styles.axis, this.styles.yAxis),
+        ticks: this.theme.mergeStyle(this.styles.ticks, this.styles.yTicks),
+        tickLabels: this.theme.mergeStyle(this.styles.tickLabels, this.styles.yTickLabels)
+      },
+      fixLabelOverlap: props.autoadjustlabels ? true : false,
+      axisLabelComponent: /*#__PURE__*/React.createElement(VictoryLabel, {
+        x: xaxislabeldistance
+      }),
+      tickLabelComponent: /*#__PURE__*/React.createElement(VictoryLabel, {
+        x: props.offsetxaxis ? props.offsetxaxis : 50
+      }),
+      theme: this.state.theme,
+      tickFormat: (d, i, ticks) => {
+        if (getTickValueLabel) {
+          return getTickValueLabel(d, i, (ticks || []).length);
+        }
+        if (ynumberformat) {
+          return this.setYAxisFormat(d, ynumberformat);
+        }
+        return this.abbreviateNumber(d);
+      },
+      orientation: this.isRTL ? "right" : "left",
+      dependentAxis: true
+    });
+  }
+  setTooltipTemplate(partialName) {
+    this.updateState({
+      template: partialName
+    });
+  }
+  setTooltipPosition(nativeEvent) {
+    let xCoordinate = isWebPreviewMode() ? nativeEvent.offsetX : nativeEvent.locationX;
+    let yCoordinate = isWebPreviewMode() ? nativeEvent.offsetY : nativeEvent.locationY;
+    this.updateState({
+      tooltipXPosition: xCoordinate - this.state.tooltipoffsetx,
+      tooltipYPosition: yCoordinate - this.state.tooltipoffsety
+    });
+  }
+  setTooltipPartialLayout(event) {
+    let tooltipLayout = event.nativeEvent.layout;
+    this.updateState({
+      tooltipoffsetx: tooltipLayout.width / 2,
+      tooltipoffsety: tooltipLayout.height
+    });
+  }
+  renderPointer() {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        transform: [{
+          rotate: '180deg'
+        }],
+        bottom: -10,
+        left: this.state.tooltipoffsetx - this.styles.tooltipPointer.borderBottomWidth / 2
+      }, this.styles.tooltipPointer]
+    });
+  }
+  getTooltip() {
+    const ynumberformat = this.state.props.ynumberformat;
+    let yAxisData = ynumberformat ? this.setYAxisFormat(this.state.tooltipYaxis, ynumberformat) : this.state.tooltipYaxis;
+    return this.state.isTooltipOpen ? !isEmpty(this.state.template) && this.props.renderitempartial ? /*#__PURE__*/React.createElement(View, {
+      onLayout: this.setTooltipPartialLayout.bind(this),
+      style: {
+        position: "absolute",
+        top: this.state.tooltipYPosition,
+        left: this.state.tooltipXPosition,
+        zIndex: 99
+      }
+    }, this.props.renderitempartial(this.state.selectedItem, this.state.selectedItem.index, this.state.template), this.renderPointer()) : /*#__PURE__*/React.createElement(View, {
+      style: [{
+        position: "absolute",
+        top: this.state.tooltipYPosition,
+        left: this.state.tooltipXPosition
+      }, this.styles.tooltipContainer]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [{
+        fontSize: 16,
+        fontWeight: 'bold'
+      }, this.styles.tooltipXText]
+    }, this.state.tooltipXaxis), /*#__PURE__*/React.createElement(Text, {
+      style: this.styles.tooltipXText
+    }, yAxisData), this.renderPointer()) : null;
+  }
+
+  // X/Y Domain properties are supported only for Column and Area charts
+  isAxisDomainSupported(type) {
+    return type === 'Column' || type === 'Area';
+  }
+
+  // Check whether X/Y Domain was set to Min and is supported for the present chart
+  isAxisDomainValid(axis) {
+    const props = this.state.props;
+    if (get(props, axis + 'domain') === 'Min' && this.isAxisDomainSupported(props.type)) {
+      return true;
+    }
+    return false;
+  }
+  // Check whether min and max values are finite or not
+  areMinMaxValuesValid(values) {
+    if (isFinite(values.min) && isFinite(values.max)) {
+      return true;
+    }
+    return false;
+  }
+  setDomainValues() {
+    let xDomainValues, yDomainValues;
+    if (this.state.data.length > 0) {
+      if (this.isAxisDomainValid('x') && typeof this.state.data[0].x === 'number') {
+        xDomainValues = this.getXMinMaxValues(this.state.data[0]);
+      }
+      if (this.isAxisDomainValid('y')) {
+        yDomainValues = this.getYMinMaxValues(this.state.data);
+      }
+      if (xDomainValues) {
+        this.updateState({
+          chartMinX: yDomainValues.min.x,
+          chartMaxX: yDomainValues.max.x
+        });
+      }
+      let yMin;
+      if (yDomainValues) {
+        if (this.areMinMaxValuesValid({
+          max: yDomainValues.max.y,
+          min: yDomainValues.min.y
+        })) {
+          yMin = this.getYScaleMinValue(yDomainValues.min.y);
+        }
+        this.updateState({
+          chartMinY: yMin ? yMin : yDomainValues.min.y,
+          chartMaxY: yDomainValues.max.y
+        });
+      }
+    }
+  }
+
+  // Getting the min and max values among all the x values
+  getXMinMaxValues(datum) {
+    if (!datum) {
+      return;
+    }
+    const xValues = {};
+    /*
+     compute the min x valuex
+     eg: When data has objects
+        input: [{x:1, y:2}, {x:2, y:3}, {x:3, y:4}]
+        min x: 1
+     eg: When data has arrays
+        input: [[10, 20], [20, 30], [30, 40]];
+        min x: 10
+    */
+    xValues.min = minBy(datum, dataObject => dataObject.x) || {
+      x: undefined
+    };
+    /*
+     compute the max x value
+     eg: When data has objects
+        input: [{x:1, y:2}, {x:2, y:3}, {x:3, y:4}]
+        max x: 3
+     eg: When data has arrays
+        input: [[10, 20], [20, 30], [30, 40]];
+        max x: 30
+     */
+    xValues.max = maxBy(datum, dataObject => dataObject.x) || {
+      x: undefined
+    };
+    return xValues;
+  }
+
+  // Getting the min and max values among all the y values
+  getYMinMaxValues(datum) {
+    const yValues = {},
+      minValues = [],
+      maxValues = [];
+    if (!datum) {
+      return;
+    }
+
+    /*
+     Getting the min and max y values among all the series of data
+     compute the min y value
+     eg: When data has objects
+        input: [[{x:1, y:2}, {x:2, y:3}, {x:3, y:4}], [{x:2, y:3}, {x:3, y:4}, {x:4, y:5}]]
+        min y values : '2'(among first set) & '3'(among second set)
+        max y values : '4'(among first set) & '5'(among second set)
+      eg: When data has arrays
+        input: [[[10, 20], [20, 30], [30, 40]], [[20, 30], [30, 40], [40, 50]]]
+        min y values : '20'(among first set) & '30'(among second set)
+        max y values : '40'(among first set) & '50'(among second set)
+     */
+
+    forEach(datum, data => {
+      if (data && !isEmpty(data)) {
+        minValues.push(minBy(data, dataObject => {
+          return dataObject.y;
+        }));
+        maxValues.push(maxBy(data, dataObject => {
+          return dataObject.y;
+        }));
+      }
+    });
+    // Gets the least and highest values among all the min and max values of respective series of data
+    yValues.min = minBy(minValues, dataObject => dataObject.y) || {
+      y: undefined
+    };
+    yValues.max = maxBy(maxValues, dataObject => dataObject.y) || {
+      y: undefined
+    };
+    return yValues;
+  }
+  setHeightWidthOnChart(cb) {
+    let height = this.styles.root.height || 250;
+    let width = this.styles.root.width || screenWidth;
+    if (height && typeof height === 'string') {
+      height = parseInt(height);
+    }
+    if (width && typeof width === 'string') {
+      width = parseInt(width);
+    }
+    this.updateState({
+      chartHeight: height,
+      chartWidth: width
+    }, cb);
+  }
+  applyTheme(props) {
+    let themeName = props.theme ? props.theme : props.type === 'Pie' ? 'Azure' : 'Terrestrial';
+    let colorsToUse = [];
+    if (typeof props.customcolors === 'string' && !isEmpty(props.customcolors)) {
+      colorsToUse = props.customcolors.split(',').map(trim);
+    }
+    let themeToUse;
+    if (typeof themeName === 'string') {
+      if (!colorsToUse.length) {
+        colorsToUse = props.customcolors;
+      }
+      if (props.customcolors === undefined) {
+        colorsToUse = ThemeFactory.getColorsObj(themeName);
+      }
+      themeToUse = ThemeFactory.getTheme(themeName, props.styles, colorsToUse);
+    } else if (typeof themeName === 'object') {
+      // if theme is passed as an object then use that custom theme.
+      themeToUse = props.theme;
+    }
+    this.updateState({
+      colors: colorsToUse,
+      theme: themeToUse
+    });
+  }
+  prepareLegendData() {
+    const props = this.state.props;
+    if (this.state.yAxis) {
+      let ldata;
+      if (props.type === 'Stack') {
+        const data = orderBy(this.state.data[0], 'y', 'asc');
+        ldata = data.map(d => {
+          return {
+            name: this.state.xaxisDatakeyArr[d.x]
+          };
+        });
+      } else {
+        ldata = this.state.yAxis.map(d => {
+          return {
+            name: d
+          };
+        });
+      }
+      this.updateState({
+        legendData: ldata
+      });
+    }
+  }
+  prepareEvents(name) {
+    return this.state.legendData.map((_, idx) => {
+      return {
+        childName: ['legend'],
+        target: 'data',
+        eventKey: String(idx),
+        eventHandlers: {
+          onClick: () => {
+            return [{
+              childName: [name + '_' + idx],
+              target: 'data',
+              eventKey: 'all',
+              mutation: props => {
+                return null;
+              }
+            }];
+          },
+          onMouseOver: () => {},
+          onMouseOut: () => {}
+        }
+      };
+    });
+  }
+
+  // If date string is bound to xaxis then we are pushing the x values as indexes.
+  getxAxisVal(dataObj, xKey, index, xaxisDatakeyArr) {
+    const value = get(dataObj, xKey);
+    if (moment(value).isValid() || isNaN(value) || typeof value === 'string' || typeof value === 'number') {
+      if (typeof value === "string") {
+        xaxisDatakeyArr.push(value.replace("\\n", "\n"));
+      } else {
+        xaxisDatakeyArr.push(value);
+      }
+      return index;
+    }
+    return value;
+  }
+  prepareDataItems(dataset) {
+    const props = this.state.props;
+    let xaxis = props.xaxisdatakey;
+    let yaxis = props.yaxisdatakey;
+    let xaxisDatakeyArr = [];
+    let datasets = [];
+    if (dataset.length === 0) {
+      var _yaxis;
+      dataset = constructSampleData(getChartType(this.props), (_yaxis = yaxis) === null || _yaxis === void 0 ? void 0 : _yaxis.split(','), this.props.shape);
+      xaxis = "x";
+      yaxis = "y";
+    }
+    if (xaxis && yaxis) {
+      let yPts = yaxis.split(',');
+      yPts.forEach(y => {
+        if (xaxis !== y) {
+          datasets.push(dataset.map((o, xindex) => {
+            const xVal = this.getxAxisVal(o, xaxis, xindex, xaxisDatakeyArr);
+            let yVal = get(o, y);
+            if (typeof yVal === 'string') {
+              yVal = parseFloat(yVal) || yVal;
+            }
+            let dataObj = {
+              x: xVal,
+              y: yVal
+            };
+            if (props.bubblesize) {
+              set(dataObj, 'size', get(o, props.bubblesize, 5));
+            }
+            if (props.shape) {
+              set(dataObj, 'symbol', shapes[props.shape]);
+            }
+            return dataObj;
+          }));
+        }
+      });
+      // chartTransform
+      this.invokeEventCallback('onTransform', [undefined, this.proxy]);
+      if (props.type == 'Pie' || props.type === 'Donut') {
+        // for animation effect
+        setTimeout(() => {
+          this.updateState({
+            endAngle: 360
+          });
+        }, 500);
+      }
+      this.updateData(datasets, yPts, xaxisDatakeyArr);
+    }
+  }
+  renderLoadingIcon() {
+    const props = this.state.props;
+    return /*#__PURE__*/React.createElement(WmIcon, {
+      id: this.getTestId('loadericon'),
+      styles: this.styles.loadingIcon,
+      iconclass: props.loadingicon,
+      caption: props.loadingdatamsg
+    });
+  }
+  updateData(datasets, yPts, xaxisDatakeyArr) {
+    const props = this.state.props;
+    this.updateState({
+      data: datasets,
+      yAxis: yPts,
+      xaxisDatakeyArr: xaxisDatakeyArr
+    }, () => {
+      this.prepareLegendData();
+      if (!props.labeltype || props.labeltype === 'percent') {
+        this.setTotal(this.state.data[0]);
+      }
+      if (this.isAxisDomainSupported(props.type) && (props.ydomain || props.xdomain)) {
+        this.setDomainValues();
+      }
+      this.updateState({
+        loading: false
+      });
+    });
+  }
+  setTotal(data) {
+    let total = 0;
+    data.forEach(d => {
+      total += d.y;
+    });
+    this.updateState({
+      total: total
+    });
+  }
+  onPropertyChange(name, $new, $old) {
+    super.onPropertyChange(name, $new, $old);
+    const props = this.state.props;
+    let units = '';
+    switch (name) {
+      case 'customcolors':
+        if (isEmpty($new)) {
+          return;
+        }
+        if (typeof $new === 'string') {
+          $new = $new.split(',');
+        }
+        this.updateState({
+          colors: $new
+        });
+        break;
+      case 'theme':
+        this.applyTheme(props);
+        break;
+      case 'dataset':
+        if (!isArray($new)) {
+          if (isObject($new) && !isEmpty($new)) {
+            $new = [$new];
+          } else {
+            $new = [];
+          }
+        }
+        $new && this.prepareDataItems($new);
+        break;
+      case 'xaxislabel':
+        if (props.xunits) {
+          units = ' (' + props.xunits + ')';
+        }
+        this.updateState({
+          xLabel: $new + units
+        });
+        break;
+      case 'yaxislabel':
+        if (props.yunits) {
+          units = ' (' + props.yunits + ')';
+        }
+        this.updateState({
+          yLabel: $new + units
+        });
+        break;
+    }
+  }
+  renderSkeleton(props) {
+    if (props.skeletonanimationresource) {
+      var _this$styles, _this$styles2, _this$styles3;
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          width: '100%'
+        }, (_this$styles = this.styles) === null || _this$styles === void 0 ? void 0 : _this$styles.root]
+      }, /*#__PURE__*/React.createElement(WmLottie, {
+        styles: {
+          content: {
+            ...((_this$styles2 = this.styles) === null || _this$styles2 === void 0 ? void 0 : _this$styles2.root),
+            ...((_this$styles3 = this.styles) === null || _this$styles3 === void 0 || (_this$styles3 = _this$styles3.skeleton) === null || _this$styles3 === void 0 ? void 0 : _this$styles3.root)
+          }
+        },
+        source: props.skeletonanimationresource,
+        loop: true,
+        autoplay: true,
+        speed: this.props.skeletonanimationspeed
+      }));
+    }
+    return null;
+  }
+}
+function getDataType(widgetContext) {
+  throw new Error("Function not implemented.");
+}
+//# sourceMappingURL=basechart.component.js.map