@wavemaker/app-rn-runtime 11.6.1-rc.5499 → 11.7.0-dev.2

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

@@ -0,0 +1,109 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, 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: _ref => {
+              let {
+                datum
+              } = _ref;
+              return this.state.colors[datum.x] ?? 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];
+    let selectedChartItem = [{
+      series: 0,
+      x: data.index,
+      y: value,
+      _dataObj: selectedItem
+    }, 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
+    }), /*#__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.styles.root.width || this.screenWidth,
+      minDomain: mindomain,
+      padding: {
+        top: props.offsettop,
+        bottom: props.offsetbottom,
+        left: props.offsetleft,
+        right: props.offsetright
+      },
+      containerComponent: this.getTooltip(props)
+    }, 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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Platform","AccessibilityWidgetType","getAccessibilityProps","VictoryChart","VictoryBar","VictoryStack","VictoryGroup","BaseChartComponent","BaseChartComponentState","WmBarChartProps","DEFAULT_CLASS","WmIcon","WmBarChartState","WmBarChart","constructor","props","labelFn","data","abbreviateNumber","datum","y","getBarChart","state","map","d","i","createElement","key","name","horizontal","labels","showvalues","bind","undefined","isRTL","toReversed","height","alignment","style","customcolors","fill","_ref","colors","x","length","cornerRadius","topLeft","styles","bar","borderTopLeftRadius","topRight","borderTopRightRadius","bottomLeft","borderBottomLeftRadius","bottomRight","borderBottomRightRadius","events","target","eventHandlers","OS","onClick","onSelect","onPress","event","value","index","label","xaxisDatakeyArr","selectedItem","dataset","selectedChartItem","series","_dataObj","invokeEventCallback","nativeEvent","proxy","renderWidget","mindomain","xdomain","chartMinX","ydomain","chartMinY","_extends","LINECHART","root","flexDirection","alignItems","iconclass","icon","title","subHeading","subheading","theme","width","screenWidth","minDomain","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","containerComponent","getTooltip","getLegendView","getXaxis","getYAxis","viewtype","colorScale","offset"],"sources":["bar-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Text, Platform } from 'react-native';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nimport {\n  VictoryChart,\n  VictoryBar,\n  VictoryLegend,\n  VictoryStack,\n  VictoryGroup\n} from \"victory-native\";\n\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport WmBarChartProps from './bar-chart.props';\nimport { DEFAULT_CLASS, WmBarChartStyles } from './bar-chart.styles';\nimport WmIcon from \"@wavemaker/app-rn-runtime/components/basic/icon/icon.component\";\nimport { min } from 'moment';\n\nexport class WmBarChartState extends BaseChartComponentState<WmBarChartProps> {}\n\nexport default class WmBarChart extends BaseChartComponent<WmBarChartProps, WmBarChartState, WmBarChartStyles> {\n\n  constructor(props: WmBarChartProps) {\n    super(props, DEFAULT_CLASS, new WmBarChartProps(), new WmBarChartState());\n  }\n\n  labelFn(data: any): string | number | string[] | number[] | null {\n    return this.abbreviateNumber(data.datum.y);\n  }\n\n  getBarChart(props: WmBarChartProps) {\n  return this.state.data.map((d: any, i: number) => {\n    return <VictoryBar key={props.name + '_' + i}\n        horizontal={props.horizontal} labels={props.showvalues ? this.labelFn.bind(this) : undefined}\n        data={this.isRTL?d.toReversed():d}\n        height={100}\n        alignment='start'\n        style={props.customcolors?{\n          data: {\n            fill: ({ datum }) => this.state.colors[datum.x] ?? this.state.colors[datum.x % this.state.colors.length]\n          }\n        }:{}}\n        cornerRadius={{topLeft: this.styles.bar.borderTopLeftRadius, topRight: this.styles.bar.borderTopRightRadius, bottomLeft: this.styles.bar.borderBottomLeftRadius, bottomRight: this.styles.bar.borderBottomRightRadius}}\n        events={[{\n          target: 'data',\n          eventHandlers: Platform.OS == \"web\" ? {\n            onClick: this.onSelect.bind(this)\n          }:{\n            onPress: this.onSelect.bind(this)\n          }\n        }]}/>\n    });\n}\n\nonSelect(event: any, data: any){\n  let value = data.data[data.index].y;\n  let label = this.state.xaxisDatakeyArr[data.datum.x];\n  let selectedItem = this.props.dataset[data.index];\n  let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n  this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n}\n\n  renderWidget(props: WmBarChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data.length) {\n      return null;\n    }\n    let mindomain={x: this.props.xdomain === 'Min' ? this.state.chartMinX: undefined, y: this.props.ydomain === 'Min' ? this.state.chartMinY: undefined};\n    return (<View\n      {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)}\n      style={this.styles.root}\n    >\n      <View>\n          <View style={{flexDirection: 'row', alignItems: 'center'}}>\n            {props.iconclass ? (<WmIcon iconclass={props.iconclass} styles={this.styles.icon}></WmIcon>) : null }\n            <Text style={this.styles.title}>{props.title}</Text>\n          </View>\n          <Text style={this.styles.subHeading}>{props.subheading}</Text>\n        </View>\n      <VictoryChart theme={this.state.theme}\n                          height={this.styles.root.height as number}\n                          width={this.styles.root.width as number || this.screenWidth}               \n                          minDomain={mindomain}\n                          padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n                          containerComponent={\n                            this.getTooltip(props)\n                          }>\n      {this.getLegendView()}\n      {this.getXaxis()}\n      {this.getYAxis()}\n      {\n        props.viewtype === 'Stacked' ? <VictoryStack colorScale={this.state.colors}>\n          {\n            this.getBarChart(props)\n          }\n        </VictoryStack> : <VictoryGroup colorScale={this.state.colors}  offset={10} >\n          {\n            this.getBarChart(props)   \n          }\n        </VictoryGroup>\n      }\n    </VictoryChart></View>);\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import BaseChartComponentProps from "@wavemaker/app-rn-runtime/components/chart/basechart.props";
+export default class WmBarChartProps extends BaseChartComponentProps {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "horizontal", true);
+    _defineProperty(this, "viewtype", 'Grouped');
+    _defineProperty(this, "onSelect", void 0);
+  }
+}
+//# sourceMappingURL=bar-chart.props.js.map

package/components/chart/bar-chart/bar-chart.props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseChartComponentProps","WmBarChartProps","constructor","arguments","_defineProperty"],"sources":["bar-chart.props.ts"],"sourcesContent":["import BaseChartComponentProps from \"@wavemaker/app-rn-runtime/components/chart/basechart.props\";\n\nexport default class WmBarChartProps extends BaseChartComponentProps {\n  horizontal?: boolean = true;\n  viewtype: string = 'Grouped';\n  onSelect?: any;\n}\n"],"mappings":";;;AAAA,OAAOA,uBAAuB,MAAM,4DAA4D;AAEhG,eAAe,MAAMC,eAAe,SAASD,uBAAuB,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,qBAC5C,IAAI;IAAAA,eAAA,mBACR,SAAS;IAAAA,eAAA;EAAA;AAE9B"}