@wavemaker/app-rn-runtime 11.10.3-next.27802 → 11.10.3-next.27810

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

@@ -14,27 +14,33 @@ export default class WmBubbleChart extends BaseChartComponent {
     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
-      }
+    if (!this.viewRef.current) return;
+    this.viewRef.current.measureInWindow((chartX, chartY) => {
+      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;
+      let tooltipX = nativeEvent.pageX - chartX;
+      let tooltipY = nativeEvent.pageY - chartY;
+      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
+        },
+        tooltipXPosition: tooltipX - this.state.tooltipoffsetx,
+        tooltipYPosition: tooltipY - this.state.tooltipoffsety
+      });
+      this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
     });
-    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
   }
   renderWidget(props) {
     var _this$state$data;
@@ -45,7 +51,7 @@ export default class WmBubbleChart extends BaseChartComponent {
     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, {
+    }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center'
@@ -57,7 +63,9 @@ export default class WmBubbleChart extends BaseChartComponent {
       style: this.styles.title
     }, props.title)), /*#__PURE__*/React.createElement(Text, {
       style: this.styles.subHeading
-    }, props.subheading)), /*#__PURE__*/React.createElement(VictoryChart, {
+    }, props.subheading)), /*#__PURE__*/React.createElement(View, {
+      ref: this.viewRef
+    }, this.getTooltip(), /*#__PURE__*/React.createElement(VictoryChart, {
       theme: this.state.theme,
       height: this.styles.root.height,
       width: this.state.chartWidth || this.screenWidth,
@@ -98,7 +106,7 @@ export default class WmBubbleChart extends BaseChartComponent {
           }
         }]
       });
-    })));
+    }))));
   }
 }
 //# sourceMappingURL=bubble-chart.component.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","Platform","AccessibilityWidgetType","getAccessibilityProps","WmBubbleChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","VictoryChart","VictoryLegend","VictoryScatter","Svg","WmIcon","WmBubbleChartState","WmBubbleChart","constructor","props","onSelect","event","data","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","nativeEvent","setTooltipPosition","selectedChartItem","series","_dataObj","updateState","tooltipXaxis","tooltipYaxis","isTooltipOpen","invokeEventCallback","proxy","renderWidget","_this$state$data","length","createElement","_extends","LINECHART","style","styles","root","onLayout","onViewLayoutChange","bind","getTooltip","flexDirection","alignItems","iconclass","icon","title","subHeading","subheading","theme","height","width","chartWidth","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","name","containerComponent","orientation","gutter","getLegendView","getXaxis","getYAxis","map","d","i","colorScale","colors","fill","opacity","key","size","events","target","eventHandlers","OS","onClick","onPress"],"sources":["bubble-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport {Text, View, Platform} from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \n\nimport WmBubbleChartProps from './bubble-chart.props';\nimport { DEFAULT_CLASS, WmBubbleChartStyles } from './bubble-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport {VictoryAxis, VictoryChart, VictoryLegend, VictoryLine, VictoryScatter} from \"victory-native\";\nimport { ScatterSymbolType } from \"victory-core\";\nimport {Svg} from \"react-native-svg\";\nimport {get} from \"lodash-es\";\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\n\nexport class WmBubbleChartState extends BaseChartComponentState<WmBubbleChartProps> {}\n\nexport default class WmBubbleChart extends BaseChartComponent<WmBubbleChartProps, WmBubbleChartState, WmBubbleChartStyles> {\n\n  constructor(props: WmBubbleChartProps) {\n    super(props, DEFAULT_CLASS, new WmBubbleChartProps(), new WmBubbleChartState());\n  }\n\n  onSelect(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    const nativeEvent = event.nativeEvent;\n    this.setTooltipPosition(nativeEvent);\n    let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index},\n    } as WmBubbleChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n  }\n\n  renderWidget(props: WmBubbleChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data?.length) {\n      return null;\n    }\n    return (<View\n      {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)}\n      style={this.styles.root}\n      onLayout={this.onViewLayoutChange.bind(this)}\n    >\n      {this.getTooltip()}\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\n        theme={this.state.theme}\n        height={this.styles.root.height as number}\n        width={this.state.chartWidth || this.screenWidth}\n        padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n      >\n        <VictoryLegend\n          name={'legend'}\n          containerComponent={<Svg />}\n          orientation=\"horizontal\"\n          gutter={20}\n          data={[]}\n          theme={this.state.theme}\n        />\n        {this.getLegendView()}\n        {this.getXaxis()}\n        {this.getYAxis()}\n        {this.state.data.map((d: any, i: number) => {\n        return <VictoryScatter\n          colorScale={this.state.colors}\n          style={{\n            data: { fill: this.state.colors[i], opacity: ({ datum }: any) => datum.opacity }\n          }}\n          key={props.name + '_bubble_' + i}\n          name={props.name + '_bubble_' + i}\n          data={d}\n          size={5}\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      </VictoryChart></View>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Text","View","Platform","AccessibilityWidgetType","getAccessibilityProps","WmBubbleChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","VictoryChart","VictoryLegend","VictoryScatter","Svg","WmIcon","WmBubbleChartState","WmBubbleChart","constructor","props","onSelect","event","data","viewRef","current","measureInWindow","chartX","chartY","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","nativeEvent","tooltipX","pageX","tooltipY","pageY","selectedChartItem","series","_dataObj","updateState","tooltipXaxis","tooltipYaxis","isTooltipOpen","tooltipXPosition","tooltipoffsetx","tooltipYPosition","tooltipoffsety","invokeEventCallback","proxy","renderWidget","_this$state$data","length","createElement","_extends","LINECHART","style","styles","root","onLayout","onViewLayoutChange","bind","flexDirection","alignItems","iconclass","icon","title","subHeading","subheading","ref","getTooltip","theme","height","width","chartWidth","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","name","containerComponent","orientation","gutter","getLegendView","getXaxis","getYAxis","map","d","i","colorScale","colors","fill","opacity","key","size","events","target","eventHandlers","OS","onClick","onPress"],"sources":["bubble-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport {Text, View, Platform} from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \n\nimport WmBubbleChartProps from './bubble-chart.props';\nimport { DEFAULT_CLASS, WmBubbleChartStyles } from './bubble-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport {VictoryAxis, VictoryChart, VictoryLegend, VictoryLine, VictoryScatter} from \"victory-native\";\nimport { ScatterSymbolType } from \"victory-core\";\nimport {Svg} from \"react-native-svg\";\nimport {get} from \"lodash-es\";\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmBubbleChartState extends BaseChartComponentState<WmBubbleChartProps> {}\n\nexport default class WmBubbleChart extends BaseChartComponent<WmBubbleChartProps, WmBubbleChartState, WmBubbleChartStyles> {\n\n  constructor(props: WmBubbleChartProps) {\n    super(props, DEFAULT_CLASS, new WmBubbleChartProps(), new WmBubbleChartState());\n  }\n\n  onSelect(event: any, data: any){\n    if (!this.viewRef.current) return;\n    this.viewRef.current.measureInWindow((chartX: number, chartY: number) => {\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    const nativeEvent = event.nativeEvent;\n    let tooltipX = nativeEvent.pageX - chartX;\n    let tooltipY = nativeEvent.pageY - chartY;\n    let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index},\n      tooltipXPosition: tooltipX - this.state.tooltipoffsetx, \n      tooltipYPosition: tooltipY - this.state.tooltipoffsety\n    } as WmBubbleChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n  });\n  }\n\n  renderWidget(props: WmBubbleChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data?.length) {\n      return null;\n    }\n    return (<View\n      {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)}\n      style={this.styles.root}\n      onLayout={this.onViewLayoutChange.bind(this)}\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      <View ref={this.viewRef}>\n      {this.getTooltip()}\n      <VictoryChart\n        theme={this.state.theme}\n        height={this.styles.root.height as number}\n        width={this.state.chartWidth || this.screenWidth}\n        padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n      >\n        <VictoryLegend\n          name={'legend'}\n          containerComponent={<Svg />}\n          orientation=\"horizontal\"\n          gutter={20}\n          data={[]}\n          theme={this.state.theme}\n        />\n        {this.getLegendView()}\n        {this.getXaxis()}\n        {this.getYAxis()}\n        {this.state.data.map((d: any, i: number) => {\n        return <VictoryScatter\n          colorScale={this.state.colors}\n          style={{\n            data: { fill: this.state.colors[i], opacity: ({ datum }: any) => datum.opacity }\n          }}\n          key={props.name + '_bubble_' + i}\n          name={props.name + '_bubble_' + i}\n          data={d}\n          size={5}\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      </VictoryChart></View></View>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -14,27 +14,33 @@ export default class WmLineChart extends BaseChartComponent {
     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
-      }
+    if (!this.viewRef.current) return;
+    this.viewRef.current.measureInWindow((chartX, chartY) => {
+      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;
+      let tooltipX = nativeEvent.pageX - chartX;
+      let tooltipY = nativeEvent.pageY - chartY;
+      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
+        },
+        tooltipXPosition: tooltipX - this.state.tooltipoffsetx,
+        tooltipYPosition: tooltipY - this.state.tooltipoffsety
+      });
+      this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
     });
-    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
   }
   renderWidget(props) {
     var _this$state$data;
@@ -46,7 +52,7 @@ export default class WmLineChart extends BaseChartComponent {
       style: this.styles.root
     }, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
       onLayout: this.onViewLayoutChange
-    }), this.getTooltip(), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center'
@@ -58,7 +64,9 @@ export default class WmLineChart extends BaseChartComponent {
       style: this.styles.title
     }, props.title)), /*#__PURE__*/React.createElement(Text, {
       style: this.styles.subHeading
-    }, props.subheading)), /*#__PURE__*/React.createElement(VictoryChart, {
+    }, props.subheading)), /*#__PURE__*/React.createElement(View, {
+      ref: this.viewRef
+    }, this.getTooltip(), /*#__PURE__*/React.createElement(VictoryChart, {
       theme: this.state.theme,
       height: this.styles.root.height,
       width: this.state.chartWidth || this.screenWidth,
@@ -104,7 +112,7 @@ export default class WmLineChart extends BaseChartComponent {
           }
         }]
       }));
-    })));
+    }))));
   }
 }
 //# sourceMappingURL=line-chart.component.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","Platform","AccessibilityWidgetType","getAccessibilityProps","VictoryChart","VictoryLine","VictoryScatter","VictoryGroup","WmLineChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","ThemeVariables","WmIcon","WmLineChartState","WmLineChart","constructor","props","onSelect","event","data","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","nativeEvent","setTooltipPosition","selectedChartItem","series","_dataObj","updateState","tooltipXaxis","tooltipYaxis","isTooltipOpen","invokeEventCallback","proxy","renderWidget","_this$state$data","length","createElement","_extends","style","styles","root","LINECHART","onLayout","onViewLayoutChange","getTooltip","flexDirection","alignItems","iconclass","icon","title","subHeading","subheading","theme","height","width","chartWidth","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","getLegendView","getXaxis","getYAxis","map","d","i","key","name","interpolation","standalone","stroke","colors","INSTANCE","chartLineColor","strokeWidth","linethickness","isRTL","toReversed","size","highlightpoints","fill","opacity","events","target","eventHandlers","OS","onClick","bind","onPress"],"sources":["line-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, Platform, LayoutChangeEvent } from 'react-native';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nimport {\n  VictoryChart,\n  VictoryLine,\n  VictoryScatter,\n  VictoryGroup,\n} from 'victory-native';\n\nimport WmLineChartProps from './line-chart.props';\nimport { DEFAULT_CLASS, WmLineChartStyles } from './line-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\nimport {InterpolationPropType} from \"victory-core\";\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\n\nexport class WmLineChartState extends BaseChartComponentState<WmLineChartProps> {}\n\nexport default class WmLineChart extends BaseChartComponent<WmLineChartProps, WmLineChartState, WmLineChartStyles> {\n\n  constructor(props: WmLineChartProps) {\n    super(props, DEFAULT_CLASS, new WmLineChartProps(), new WmLineChartState());\n  }\n  \n  onSelect(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    const nativeEvent = event.nativeEvent;\n    this.setTooltipPosition(nativeEvent);\n    let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index},\n    } as WmLineChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n  }\n\n\n\n  renderWidget(props: WmLineChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data?.length) {\n      return null;\n    }\n    return (\n    <View style={this.styles.root} {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)} onLayout={this.onViewLayoutChange}>\n      {this.getTooltip()}\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\n        theme={this.state.theme}\n        height={(this.styles.root.height) as number}\n        width={this.state.chartWidth || this.screenWidth}\n        padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n      >\n        {this.getLegendView()}\n        {this.getXaxis()}\n        {this.getYAxis()}\n        {this.state.data.map((d: any, i: number) => {\n          return <VictoryGroup key={props.name + '_line_group_' + i}>\n            <VictoryLine interpolation={props.interpolation as InterpolationPropType}  key={props.name + '_line_' + i}\n              name={props.name + '_' + i}\n              standalone={true}\n              style={{\n                data: {\n                  stroke: (this.state.colors[i] || ThemeVariables.INSTANCE.chartLineColor),\n                  strokeWidth: props.linethickness,\n                }\n              }}       \n              data={this.isRTL?d.toReversed():d}\n            />\n          \n              <VictoryScatter size={5} key={props.name + '_scatter' + i}\n                  style={{\n                    data: (props.highlightpoints || this.state.data.length === 1) ? {fill: this.state.colors[i], opacity: 0.8} : {opacity:0}\n                  }}\n                  data={this.isRTL?d.toReversed():d}\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            </VictoryGroup>\n        })}\n      </VictoryChart>\n    </View>);\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Text","View","Platform","AccessibilityWidgetType","getAccessibilityProps","VictoryChart","VictoryLine","VictoryScatter","VictoryGroup","WmLineChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","ThemeVariables","WmIcon","WmLineChartState","WmLineChart","constructor","props","onSelect","event","data","viewRef","current","measureInWindow","chartX","chartY","value","index","y","label","state","xaxisDatakeyArr","datum","x","selectedItem","dataset","nativeEvent","tooltipX","pageX","tooltipY","pageY","selectedChartItem","series","_dataObj","updateState","tooltipXaxis","tooltipYaxis","isTooltipOpen","tooltipXPosition","tooltipoffsetx","tooltipYPosition","tooltipoffsety","invokeEventCallback","proxy","renderWidget","_this$state$data","length","createElement","_extends","style","styles","root","LINECHART","onLayout","onViewLayoutChange","flexDirection","alignItems","iconclass","icon","title","subHeading","subheading","ref","getTooltip","theme","height","width","chartWidth","screenWidth","padding","top","offsettop","bottom","offsetbottom","left","offsetleft","right","offsetright","getLegendView","getXaxis","getYAxis","map","d","i","key","name","interpolation","standalone","stroke","colors","INSTANCE","chartLineColor","strokeWidth","linethickness","isRTL","toReversed","size","highlightpoints","fill","opacity","events","target","eventHandlers","OS","onClick","bind","onPress"],"sources":["line-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View, Platform, LayoutChangeEvent } from 'react-native';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \nimport {\n  VictoryChart,\n  VictoryLine,\n  VictoryScatter,\n  VictoryGroup,\n} from 'victory-native';\n\nimport WmLineChartProps from './line-chart.props';\nimport { DEFAULT_CLASS, WmLineChartStyles } from './line-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\nimport {InterpolationPropType} from \"victory-core\";\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\n\nexport class WmLineChartState extends BaseChartComponentState<WmLineChartProps> {}\n\nexport default class WmLineChart extends BaseChartComponent<WmLineChartProps, WmLineChartState, WmLineChartStyles> {\n\n  constructor(props: WmLineChartProps) {\n    super(props, DEFAULT_CLASS, new WmLineChartProps(), new WmLineChartState());\n  }\n  \n  onSelect(event: any, data: any){\n    if (!this.viewRef.current) return;\n    this.viewRef.current.measureInWindow((chartX: number, chartY: number) => {\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    const nativeEvent = event.nativeEvent;\n    let tooltipX = nativeEvent.pageX - chartX;\n    let tooltipY = nativeEvent.pageY - chartY;\n    let selectedChartItem = [{series: 0, x: data.index, y: value,_dataObj: selectedItem},data.index];\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index},\n      tooltipXPosition: tooltipX - this.state.tooltipoffsetx, \n      tooltipYPosition: tooltipY - this.state.tooltipoffsety\n    } as WmLineChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n  });\n  }\n\n\n\n  renderWidget(props: WmLineChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data?.length) {\n      return null;\n    }\n    return (\n    <View style={this.styles.root} {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)} onLayout={this.onViewLayoutChange}>\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      <View ref={this.viewRef}>\n      {this.getTooltip()}\n      <VictoryChart\n        theme={this.state.theme}\n        height={(this.styles.root.height) as number}\n        width={this.state.chartWidth || this.screenWidth}\n        padding={{ top: props.offsettop, bottom: props.offsetbottom, left: props.offsetleft, right: props.offsetright }}\n      >\n        {this.getLegendView()}\n        {this.getXaxis()}\n        {this.getYAxis()}\n        {this.state.data.map((d: any, i: number) => {\n          return <VictoryGroup key={props.name + '_line_group_' + i}>\n            <VictoryLine interpolation={props.interpolation as InterpolationPropType}  key={props.name + '_line_' + i}\n              name={props.name + '_' + i}\n              standalone={true}\n              style={{\n                data: {\n                  stroke: (this.state.colors[i] || ThemeVariables.INSTANCE.chartLineColor),\n                  strokeWidth: props.linethickness,\n                }\n              }}       \n              data={this.isRTL?d.toReversed():d}\n            />\n          \n              <VictoryScatter size={5} key={props.name + '_scatter' + i}\n                  style={{\n                    data: (props.highlightpoints || this.state.data.length === 1) ? {fill: this.state.colors[i], opacity: 0.8} : {opacity:0}\n                  }}\n                  data={this.isRTL?d.toReversed():d}\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            </VictoryGroup>\n        })}\n      </VictoryChart>\n      </View>\n    </View>);\n  }\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,QAA2B,cAAc;AACtE,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,8CAA8C;AAC7G,SACEC,YAAY,EACZC,WAAW,EACXC,cAAc,EACdC,YAAY,QACP,gBAAgB;AAEvB,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAASC,aAAa,QAA2B,qBAAqB;AACtE,SACEC,kBAAkB,EAClBC,uBAAuB,QAClB,gEAAgE;AACvE,OAAOC,cAAc,MAAM,kDAAkD;AAE7E,OAAOC,MAAM,MAAM,gEAAgE;AAGnF,OAAO,MAAMC,gBAAgB,SAASH,uBAAuB,CAAmB;AAEhF,eAAe,MAAMI,WAAW,SAASL,kBAAkB,CAAwD;EAEjHM,WAAWA,CAACC,KAAuB,EAAE;IACnC,KAAK,CAACA,KAAK,EAAER,aAAa,EAAE,IAAID,gBAAgB,CAAC,CAAC,EAAE,IAAIM,gBAAgB,CAAC,CAAC,CAAC;EAC7E;EAEAI,QAAQA,CAACC,KAAU,EAAEC,IAAS,EAAC;IAC7B,IAAI,CAAC,IAAI,CAACC,OAAO,CAACC,OAAO,EAAE;IAC3B,IAAI,CAACD,OAAO,CAACC,OAAO,CAACC,eAAe,CAAC,CAACC,MAAc,EAAEC,MAAc,KAAK;MACzE,IAAIC,KAAK,GAAGN,IAAI,CAACA,IAAI,CAACA,IAAI,CAACO,KAAK,CAAC,CAACC,CAAC;MACnC,IAAIC,KAAK,GAAG,IAAI,CAACC,KAAK,CAACC,eAAe,CAACX,IAAI,CAACY,KAAK,CAACC,CAAC,CAAC;MACpD,IAAIC,YAAY,GAAG,IAAI,CAACjB,KAAK,CAACkB,OAAO,CAACf,IAAI,CAACO,KAAK,CAAC;MACjD,MAAMS,WAAW,GAAGjB,KAAK,CAACiB,WAAW;MACrC,IAAIC,QAAQ,GAAGD,WAAW,CAACE,KAAK,GAAGd,MAAM;MACzC,IAAIe,QAAQ,GAAGH,WAAW,CAACI,KAAK,GAAGf,MAAM;MACzC,IAAIgB,iBAAiB,GAAG,CAAC;QAACC,MAAM,EAAE,CAAC;QAAET,CAAC,EAAEb,IAAI,CAACO,KAAK;QAAEC,CAAC,EAAEF,KAAK;QAACiB,QAAQ,EAAET;MAAY,CAAC,EAACd,IAAI,CAACO,KAAK,CAAC;MAChG,IAAI,CAACiB,WAAW,CAAC;QACfC,YAAY,EAAEhB,KAAK;QACnBiB,YAAY,EAAEpB,KAAK;QACnBqB,aAAa,EAAE,IAAI;QACnBb,YAAY,EAAE;UAAC,GAAGA,YAAY;UAAEP,KAAK,EAAEP,IAAI,CAACO;QAAK,CAAC;QAClDqB,gBAAgB,EAAEX,QAAQ,GAAG,IAAI,CAACP,KAAK,CAACmB,cAAc;QACtDC,gBAAgB,EAAEX,QAAQ,GAAG,IAAI,CAACT,KAAK,CAACqB;MAC1C,CAAqB,CAAC;MACtB,IAAI,CAACC,mBAAmB,CAAC,UAAU,EAAE,CAACjC,KAAK,CAACiB,WAAW,EAAE,IAAI,CAACiB,KAAK,EAAEnB,YAAY,EAAEO,iBAAiB,CAAE,CAAC;IACzG,CAAC,CAAC;EACF;EAIAa,YAAYA,CAACrC,KAAuB,EAAE;IAAA,IAAAsC,gBAAA;IACpC,IAAI,CAACH,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,IAAI,CAACC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC9D,IAAI,GAAAE,gBAAA,GAAC,IAAI,CAACzB,KAAK,CAACV,IAAI,cAAAmC,gBAAA,eAAfA,gBAAA,CAAiBC,MAAM,GAAE;MAC5B,OAAO,IAAI;IACb;IACA,oBACA1D,KAAA,CAAA2D,aAAA,CAACzD,IAAI,EAAA0D,QAAA;MAACC,KAAK,EAAE,IAAI,CAACC,MAAM,CAACC;IAAK,GAAK1D,qBAAqB,CAACD,uBAAuB,CAAC4D,SAAS,EAAE7C,KAAK,CAAC;MAAE8C,QAAQ,EAAE,IAAI,CAACC;IAAmB,iBACpIlE,KAAA,CAAA2D,aAAA,CAACzD,IAAI,qBACHF,KAAA,CAAA2D,aAAA,CAACzD,IAAI;MAAC2D,KAAK,EAAE;QAACM,aAAa,EAAE,KAAK;QAAEC,UAAU,EAAE;MAAQ;IAAE,GACtDjD,KAAK,CAACkD,SAAS,gBAAIrE,KAAA,CAAA2D,aAAA,CAAC5C,MAAM;MAACsD,SAAS,EAAElD,KAAK,CAACkD,SAAU;MAACP,MAAM,EAAE,IAAI,CAACA,MAAM,CAACQ;IAAK,CAAS,CAAC,GAAI,IAAI,eACpGtE,KAAA,CAAA2D,aAAA,CAAC1D,IAAI;MAAC4D,KAAK,EAAE,IAAI,CAACC,MAAM,CAACS;IAAM,GAAEpD,KAAK,CAACoD,KAAY,CAC/C,CAAC,eACPvE,KAAA,CAAA2D,aAAA,CAAC1D,IAAI;MAAC4D,KAAK,EAAE,IAAI,CAACC,MAAM,CAACU;IAAW,GAAErD,KAAK,CAACsD,UAAiB,CACzD,CAAC,eACPzE,KAAA,CAAA2D,aAAA,CAACzD,IAAI;MAACwE,GAAG,EAAE,IAAI,CAACnD;IAAQ,GACvB,IAAI,CAACoD,UAAU,CAAC,CAAC,eAClB3E,KAAA,CAAA2D,aAAA,CAACrD,YAAY;MACXsE,KAAK,EAAE,IAAI,CAAC5C,KAAK,CAAC4C,KAAM;MACxBC,MAAM,EAAG,IAAI,CAACf,MAAM,CAACC,IAAI,CAACc,MAAkB;MAC5CC,KAAK,EAAE,IAAI,CAAC9C,KAAK,CAAC+C,UAAU,IAAI,IAAI,CAACC,WAAY;MACjDC,OAAO,EAAE;QAAEC,GAAG,EAAE/D,KAAK,CAACgE,SAAS;QAAEC,MAAM,EAAEjE,KAAK,CAACkE,YAAY;QAAEC,IAAI,EAAEnE,KAAK,CAACoE,UAAU;QAAEC,KAAK,EAAErE,KAAK,CAACsE;MAAY;IAAE,GAE/G,IAAI,CAACC,aAAa,CAAC,CAAC,EACpB,IAAI,CAACC,QAAQ,CAAC,CAAC,EACf,IAAI,CAACC,QAAQ,CAAC,CAAC,EACf,IAAI,CAAC5D,KAAK,CAACV,IAAI,CAACuE,GAAG,CAAC,CAACC,CAAM,EAAEC,CAAS,KAAK;MAC1C,oBAAO/F,KAAA,CAAA2D,aAAA,CAAClD,YAAY;QAACuF,GAAG,EAAE7E,KAAK,CAAC8E,IAAI,GAAG,cAAc,GAAGF;MAAE,gBACxD/F,KAAA,CAAA2D,aAAA,CAACpD,WAAW;QAAC2F,aAAa,EAAE/E,KAAK,CAAC+E,aAAuC;QAAEF,GAAG,EAAE7E,KAAK,CAAC8E,IAAI,GAAG,QAAQ,GAAGF,CAAE;QACxGE,IAAI,EAAE9E,KAAK,CAAC8E,IAAI,GAAG,GAAG,GAAGF,CAAE;QAC3BI,UAAU,EAAE,IAAK;QACjBtC,KAAK,EAAE;UACLvC,IAAI,EAAE;YACJ8E,MAAM,EAAG,IAAI,CAACpE,KAAK,CAACqE,MAAM,CAACN,CAAC,CAAC,IAAIjF,cAAc,CAACwF,QAAQ,CAACC,cAAe;YACxEC,WAAW,EAAErF,KAAK,CAACsF;UACrB;QACF,CAAE;QACFnF,IAAI,EAAE,IAAI,CAACoF,KAAK,GAACZ,CAAC,CAACa,UAAU,CAAC,CAAC,GAACb;MAAE,CACnC,CAAC,eAEA9F,KAAA,CAAA2D,aAAA,CAACnD,cAAc;QAACoG,IAAI,EAAE,CAAE;QAACZ,GAAG,EAAE7E,KAAK,CAAC8E,IAAI,GAAG,UAAU,GAAGF,CAAE;QACtDlC,KAAK,EAAE;UACLvC,IAAI,EAAGH,KAAK,CAAC0F,eAAe,IAAI,IAAI,CAAC7E,KAAK,CAACV,IAAI,CAACoC,MAAM,KAAK,CAAC,GAAI;YAACoD,IAAI,EAAE,IAAI,CAAC9E,KAAK,CAACqE,MAAM,CAACN,CAAC,CAAC;YAAEgB,OAAO,EAAE;UAAG,CAAC,GAAG;YAACA,OAAO,EAAC;UAAC;QACzH,CAAE;QACFzF,IAAI,EAAE,IAAI,CAACoF,KAAK,GAACZ,CAAC,CAACa,UAAU,CAAC,CAAC,GAACb,CAAE;QAClCkB,MAAM,EAAE,CAAC;UACPC,MAAM,EAAE,MAAM;UACdC,aAAa,EAAE/G,QAAQ,CAACgH,EAAE,IAAI,KAAK,GAAG;YACpCC,OAAO,EAAE,IAAI,CAAChG,QAAQ,CAACiG,IAAI,CAAC,IAAI;UAClC,CAAC,GAAC;YACAC,OAAO,EAAE,IAAI,CAAClG,QAAQ,CAACiG,IAAI,CAAC,IAAI;UAClC;QACF,CAAC;MAAE,CACN,CACW,CAAC;IACnB,CAAC,CACW,CACR,CACF,CAAC;EACT;AACF","ignoreList":[]}

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

@@ -75,28 +75,34 @@ export default class WmPieChart extends BaseChartComponent {
     }
   }
   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
-      }
+    if (!this.viewRef.current) return;
+    this.viewRef.current.measureInWindow((chartX, chartY) => {
+      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;
+      let tooltipX = nativeEvent.pageX - chartX;
+      let tooltipY = nativeEvent.pageY - chartY;
+      this.updateState({
+        tooltipXaxis: label,
+        tooltipYaxis: value,
+        isTooltipOpen: true,
+        selectedItem: {
+          ...selectedItem,
+          index: data.index
+        },
+        tooltipXPosition: tooltipX - this.state.tooltipoffsetx,
+        tooltipYPosition: tooltipY - this.state.tooltipoffsety
+      });
+      this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
     });
-    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
   }
   renderWidget(props) {
     this.invokeEventCallback('onBeforerender', [this.proxy, null]);
@@ -168,7 +174,8 @@ export default class WmPieChart extends BaseChartComponent {
     }, this.getTooltip(), /*#__PURE__*/React.createElement(View, {
       style: {
         flex: 1
-      }
+      },
+      ref: this.viewRef
     }, chartWidth ? /*#__PURE__*/React.createElement(Svg, {
       width: chartWidth,
       height: chartHeight

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","Platform","Svg","AccessibilityWidgetType","getAccessibilityProps","VictoryLabel","VictoryPie","WmPieChartProps","DEFAULT_CLASS","formatCompactNumber","WmIcon","BaseChartComponent","BaseChartComponentState","WmDonutChartProps","Legend","WmPieChartState","constructor","args","_defineProperty","WmPieChart","props","type","e","_e$nativeEvent","viewWidth","nativeEvent","layout","width","updateState","chartWidth","totalHeight","height","_e$nativeEvent2","infoHeight","opacity","_e$nativeEvent3","_e$nativeEvent4","legendWidth","legendHeight","componentDidMount","getLabel","d","labeltype","Math","round","y","state","total","xaxisDatakeyArr","x","onSelect","event","data","value","slice","label","datum","selectedItem","dataset","index","selectedChartItem","color","style","fill","_dataObj","setTooltipPosition","tooltipXaxis","tooltipYaxis","isTooltipOpen","invokeEventCallback","proxy","renderWidget","length","pieData","showlegend","chartHeight","styles","root","radius","min","innerRadius","donutratio","styleProp","labelRadius","showlabels","labels","display","origin","orientation","legendData","map","name","colors","createElement","_extends","LINECHART","onLayout","onViewLayoutChange","key","title","onInfoViewLayoutChange","flexDirection","alignItems","iconclass","icon","subHeading","subheading","onLegendViewLayoutChange","testStyle","legendText","dotStyle","legenedDot","justifyContent","getTooltip","flex","standalone","colorScale","endAngle","theme","isRTL","toReversed","labelPlacement","labelplacement","events","target","eventHandlers","OS","onClick","bind","onPress","textAnchor","centerLabel","text","centerlabel","maxWidth"],"sources":["pie-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, View, Text, Platform } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \n\nimport { VictoryLabel, VictoryLegend, VictoryPie } from 'victory-native';\n\nimport WmPieChartProps from './pie-chart.props';\nimport { DEFAULT_CLASS, WmPieChartStyles } from './pie-chart.styles';\n\nimport { formatCompactNumber } from '@wavemaker/app-rn-runtime/core/utils';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from '@wavemaker/app-rn-runtime/components/chart/basechart.component';\nimport WmDonutChartProps from '@wavemaker/app-rn-runtime/components/chart/donut-chart/donut-chart.props';\nimport { Legend } from '../legend/legend.component';\n\n\nexport class WmPieChartState extends BaseChartComponentState<WmPieChartProps> {\n  chartWidth = 0;\n  totalHeight = 0;\n  infoHeight = 10;\n  legendWidth = 0;\n  legendHeight = 0;\n  opacity = 0;\n}\n\nexport default class WmPieChart extends BaseChartComponent<WmPieChartProps, WmPieChartState, WmPieChartStyles> {\n\n  constructor(props: WmPieChartProps) {\n    super(props, DEFAULT_CLASS, props.type === 'Donut' ? new WmDonutChartProps() : new WmPieChartProps(), new WmPieChartState());\n  }\n\n  componentDidMount() {\n    super.componentDidMount();\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n    this.updateState({\n      chartWidth: viewWidth,\n      totalHeight: e.nativeEvent?.layout.height\n    } as WmPieChartState)\n  }\n\n  onInfoViewLayoutChange = (e: LayoutChangeEvent) => {\n    this.updateState({\n      infoHeight: e.nativeEvent?.layout.height,\n      opacity: 1\n    } as WmPieChartState);\n  }\n\n  onLegendViewLayoutChange = (e: LayoutChangeEvent) => {\n    this.updateState({\n      legendWidth: e.nativeEvent?.layout.width,\n      legendHeight: e.nativeEvent?.layout.height\n    } as WmPieChartState);\n  }\n\n  getLabel(d: {x: any, y: any}, props: WmPieChartProps): string {\n      switch(props.labeltype) {\n        case 'percent': {\n          return Math.round(d.y * 100 /this.state.total) + '%';\n        }\n        case 'key': {\n          return this.state.xaxisDatakeyArr[d.x];\n        }\n        case 'value': {\n          return formatCompactNumber(d.y);\n        }\n        case 'key-value': {\n          return this.state.xaxisDatakeyArr[d.x] + ' ' + d.y;\n        }\n      }\n  }\n\n  onSelect(event: any, data: any){\n    let value = data.slice.value;\n    let label = this.state.xaxisDatakeyArr[data.datum.x];\n    let selectedItem = this.props.dataset[data.index];\n    let selectedChartItem = data.slice;\n    selectedChartItem[\"data\"] = {x: label, y: value, color: data.style.fill, _dataObj: selectedItem}\n    const nativeEvent = event.nativeEvent;\n    this.setTooltipPosition(nativeEvent);\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index},\n    } as WmPieChartState)\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n  }\n\n  renderWidget(props: WmPieChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data.length) {\n      return null;\n    }   \n    const pieData = this.state.data[0];\n    const chartWidth = this.state.chartWidth \n      - (props.showlegend === 'right' ? this.state.legendWidth : 0);\n    const chartHeight = (this.styles.root.height ? this.state.totalHeight : chartWidth) \n      - this.state.infoHeight \n      - (props.showlegend === 'right' ? 0 : this.state.legendHeight);\n    let radius = (Math.min(chartWidth, chartHeight) - 40)/ 2;\n    let innerRadius = props.donutratio * radius;\n    let styleProp = {};\n    let labelRadius;\n    if (props.showlabels === 'hide') {\n      styleProp={labels: { display: \"none\" }};\n    } else if (props.showlabels === 'inside') {\n      labelRadius = radius/2;\n    } else {\n      labelRadius = radius + 8;\n    }\n    const origin = {x: (chartWidth/2), y: (chartHeight/2)};\n    const orientation = props.showlegend === 'right' ? 'vertical' : 'horizontal';\n    let legendData = pieData.map((d: {x: any, y: any}, index: number) => {\n      return {\n        name: this.state.xaxisDatakeyArr[d.x],\n        color: this.state.colors[index % (this.state.colors.length)]\n      };\n    });\n    return (\n      <View style={[{opacity: this.state.opacity}, this.styles.root]}\n        {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)}\n        onLayout={this.onViewLayoutChange}\n        key={`${props.title}_pie_chart`}\n        >\n        <View onLayout={this.onInfoViewLayoutChange}>\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        {props.showlegend === 'top' ? \n          (<View onLayout={this.onLegendViewLayoutChange}>\n            <Legend data={legendData}\n              testStyle={this.styles.legendText}\n              dotStyle={this.styles.legenedDot}></Legend>\n          </View>) : null }\n        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>\n        {this.getTooltip()}\n          <View style={{flex: 1}}>\n            {chartWidth ? (\n            <Svg\n              width={chartWidth}\n              height={chartHeight}\n            >\n              <VictoryPie\n                style={styleProp}\n                standalone={false}\n                colorScale={this.state.colors}\n                labels={({datum}) => this.getLabel(datum, props)}\n                endAngle={this.state.endAngle || 0}\n                radius={radius}\n                innerRadius={innerRadius}\n                theme={this.state.theme}\n                key={props.name}\n                name={props.name}\n                data={this.isRTL?pieData.toReversed():pieData}\n                origin={origin}\n                labelPlacement={props.labelplacement}\n                labelRadius={labelRadius}\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              <VictoryLabel\n                textAnchor=\"middle\"\n                style={{ ...this.styles.centerLabel, fill: this.styles.centerLabel.color }}\n                x={origin.x} y={origin.y}\n                text={props.centerlabel}\n              />\n            </Svg>) : null}\n          </View>\n          {props.showlegend === 'right' ? \n            (<View style={{maxWidth: '50%'}} onLayout={this.onLegendViewLayoutChange}>\n              <Legend data={legendData}\n                testStyle={this.styles.legendText}\n                dotStyle={this.styles.legenedDot}\n                orientation='vertical'></Legend>\n            </View>) : null }\n        </View>\n        {props.showlegend === 'bottom' ? \n          (<View onLayout={this.onLegendViewLayoutChange}>\n            <Legend data={legendData}\n              testStyle={this.styles.legendText}\n              dotStyle={this.styles.legenedDot}></Legend>\n          </View>) : null }\n      </View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Text","Platform","Svg","AccessibilityWidgetType","getAccessibilityProps","VictoryLabel","VictoryPie","WmPieChartProps","DEFAULT_CLASS","formatCompactNumber","WmIcon","BaseChartComponent","BaseChartComponentState","WmDonutChartProps","Legend","WmPieChartState","constructor","args","_defineProperty","WmPieChart","props","type","e","_e$nativeEvent","viewWidth","nativeEvent","layout","width","updateState","chartWidth","totalHeight","height","_e$nativeEvent2","infoHeight","opacity","_e$nativeEvent3","_e$nativeEvent4","legendWidth","legendHeight","componentDidMount","getLabel","d","labeltype","Math","round","y","state","total","xaxisDatakeyArr","x","onSelect","event","data","viewRef","current","measureInWindow","chartX","chartY","value","slice","label","datum","selectedItem","dataset","index","selectedChartItem","color","style","fill","_dataObj","tooltipX","pageX","tooltipY","pageY","tooltipXaxis","tooltipYaxis","isTooltipOpen","tooltipXPosition","tooltipoffsetx","tooltipYPosition","tooltipoffsety","invokeEventCallback","proxy","renderWidget","length","pieData","showlegend","chartHeight","styles","root","radius","min","innerRadius","donutratio","styleProp","labelRadius","showlabels","labels","display","origin","orientation","legendData","map","name","colors","createElement","_extends","LINECHART","onLayout","onViewLayoutChange","key","title","onInfoViewLayoutChange","flexDirection","alignItems","iconclass","icon","subHeading","subheading","onLegendViewLayoutChange","testStyle","legendText","dotStyle","legenedDot","justifyContent","getTooltip","flex","ref","standalone","colorScale","endAngle","theme","isRTL","toReversed","labelPlacement","labelplacement","events","target","eventHandlers","OS","onClick","bind","onPress","textAnchor","centerLabel","text","centerlabel","maxWidth"],"sources":["pie-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, View, Text, Platform } from 'react-native';\nimport { Svg } from 'react-native-svg';\nimport { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility'; \n\nimport { VictoryLabel, VictoryPie } from 'victory-native';\n\nimport WmPieChartProps from './pie-chart.props';\nimport { DEFAULT_CLASS, WmPieChartStyles } from './pie-chart.styles';\n\nimport { formatCompactNumber, isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from '@wavemaker/app-rn-runtime/components/chart/basechart.component';\nimport WmDonutChartProps from '@wavemaker/app-rn-runtime/components/chart/donut-chart/donut-chart.props';\nimport { Legend } from '../legend/legend.component';\n\n\nexport class WmPieChartState extends BaseChartComponentState<WmPieChartProps> {\n  chartWidth = 0;\n  totalHeight = 0;\n  infoHeight = 10;\n  legendWidth = 0;\n  legendHeight = 0;\n  opacity = 0;\n}\n\nexport default class WmPieChart extends BaseChartComponent<WmPieChartProps, WmPieChartState, WmPieChartStyles> {\n\n  constructor(props: WmPieChartProps) {\n    super(props, DEFAULT_CLASS, props.type === 'Donut' ? new WmDonutChartProps() : new WmPieChartProps(), new WmPieChartState());\n  }\n\n  componentDidMount() {\n    super.componentDidMount();\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n    this.updateState({\n      chartWidth: viewWidth,\n      totalHeight: e.nativeEvent?.layout.height\n    } as WmPieChartState)\n  }\n\n  onInfoViewLayoutChange = (e: LayoutChangeEvent) => {\n    this.updateState({\n      infoHeight: e.nativeEvent?.layout.height,\n      opacity: 1\n    } as WmPieChartState);\n  }\n\n  onLegendViewLayoutChange = (e: LayoutChangeEvent) => {\n    this.updateState({\n      legendWidth: e.nativeEvent?.layout.width,\n      legendHeight: e.nativeEvent?.layout.height\n    } as WmPieChartState);\n  }\n\n  getLabel(d: {x: any, y: any}, props: WmPieChartProps): string {\n      switch(props.labeltype) {\n        case 'percent': {\n          return Math.round(d.y * 100 /this.state.total) + '%';\n        }\n        case 'key': {\n          return this.state.xaxisDatakeyArr[d.x];\n        }\n        case 'value': {\n          return formatCompactNumber(d.y);\n        }\n        case 'key-value': {\n          return this.state.xaxisDatakeyArr[d.x] + ' ' + d.y;\n        }\n      }\n  }\n\n  onSelect(event: any, data: any){\n    if (!this.viewRef.current) return;\n    this.viewRef.current.measureInWindow((chartX: number, chartY: number) => {\n    let value = data.slice.value;\n    let label = this.state.xaxisDatakeyArr[data.datum.x];\n    let selectedItem = this.props.dataset[data.index];\n    let selectedChartItem = data.slice;\n    selectedChartItem[\"data\"] = {x: label, y: value, color: data.style.fill, _dataObj: selectedItem}\n    const nativeEvent = event.nativeEvent;\n    let tooltipX = nativeEvent.pageX - chartX;\n    let tooltipY = nativeEvent.pageY - chartY;\n    this.updateState({\n      tooltipXaxis: label,\n      tooltipYaxis: value,\n      isTooltipOpen: true,\n      selectedItem: {...selectedItem, index: data.index },\n      tooltipXPosition: tooltipX - this.state.tooltipoffsetx, \n      tooltipYPosition: tooltipY - this.state.tooltipoffsety\n    } as any);\n    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem ]);\n    });\n  }\n\n  renderWidget(props: WmPieChartProps) {\n    this.invokeEventCallback('onBeforerender', [this.proxy, null]);\n    if (!this.state.data.length) {\n      return null;\n    }   \n    const pieData = this.state.data[0];\n    const chartWidth = this.state.chartWidth \n      - (props.showlegend === 'right' ? this.state.legendWidth : 0);\n    const chartHeight = (this.styles.root.height ? this.state.totalHeight : chartWidth) \n      - this.state.infoHeight \n      - (props.showlegend === 'right' ? 0 : this.state.legendHeight);\n    let radius = (Math.min(chartWidth, chartHeight) - 40)/ 2;\n    let innerRadius = props.donutratio * radius;\n    let styleProp = {};\n    let labelRadius;\n    if (props.showlabels === 'hide') {\n      styleProp={labels: { display: \"none\" }};\n    } else if (props.showlabels === 'inside') {\n      labelRadius = radius/2;\n    } else {\n      labelRadius = radius + 8;\n    }\n    const origin = {x: (chartWidth/2), y: (chartHeight/2)};\n    const orientation = props.showlegend === 'right' ? 'vertical' : 'horizontal';\n    let legendData = pieData.map((d: {x: any, y: any}, index: number) => {\n      return {\n        name: this.state.xaxisDatakeyArr[d.x],\n        color: this.state.colors[index % (this.state.colors.length)]\n      };\n    });\n    return (\n      <View style={[{opacity: this.state.opacity}, this.styles.root]}\n        {...getAccessibilityProps(AccessibilityWidgetType.LINECHART, props)}\n        onLayout={this.onViewLayoutChange}\n        key={`${props.title}_pie_chart`}\n        >\n        <View onLayout={this.onInfoViewLayoutChange}>\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        {props.showlegend === 'top' ? \n          (<View onLayout={this.onLegendViewLayoutChange}>\n            <Legend data={legendData}\n              testStyle={this.styles.legendText}\n              dotStyle={this.styles.legenedDot}></Legend>\n          </View>) : null }\n        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>\n        {this.getTooltip()}\n          <View style={{flex: 1}} ref={this.viewRef}>\n            {chartWidth ? (\n            <Svg\n              width={chartWidth}\n              height={chartHeight}\n            >\n              <VictoryPie\n                style={styleProp}\n                standalone={false}\n                colorScale={this.state.colors}\n                labels={({datum}) => this.getLabel(datum, props)}\n                endAngle={this.state.endAngle || 0}\n                radius={radius}\n                innerRadius={innerRadius}\n                theme={this.state.theme}\n                key={props.name}\n                name={props.name}\n                data={this.isRTL?pieData.toReversed():pieData}\n                origin={origin}\n                labelPlacement={props.labelplacement}\n                labelRadius={labelRadius}\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              <VictoryLabel\n                textAnchor=\"middle\"\n                style={{ ...this.styles.centerLabel, fill: this.styles.centerLabel.color }}\n                x={origin.x} y={origin.y}\n                text={props.centerlabel}\n              />\n            </Svg>) : null}\n          </View>\n          {props.showlegend === 'right' ? \n            (<View style={{maxWidth: '50%'}} onLayout={this.onLegendViewLayoutChange}>\n              <Legend data={legendData}\n                testStyle={this.styles.legendText}\n                dotStyle={this.styles.legenedDot}\n                orientation='vertical'></Legend>\n            </View>) : null }\n        </View>\n        {props.showlegend === 'bottom' ? \n          (<View onLayout={this.onLegendViewLayoutChange}>\n            <Legend data={legendData}\n              testStyle={this.styles.legendText}\n              dotStyle={this.styles.legenedDot}></Legend>\n          </View>) : null }\n      </View>\n    );\n  }\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAA4BC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AACtE,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,8CAA8C;AAE7G,SAASC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAEzD,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,SAASC,aAAa,QAA0B,oBAAoB;AAEpE,SAASC,mBAAmB,QAA0B,sCAAsC;AAC5F,OAAOC,MAAM,MAAM,gEAAgE;AACnF,SACEC,kBAAkB,EAClBC,uBAAuB,QAClB,gEAAgE;AACvE,OAAOC,iBAAiB,MAAM,0EAA0E;AACxG,SAASC,MAAM,QAAQ,4BAA4B;AAGnD,OAAO,MAAMC,eAAe,SAASH,uBAAuB,CAAkB;EAAAI,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,qBAC/D,CAAC;IAAAA,eAAA,sBACA,CAAC;IAAAA,eAAA,qBACF,EAAE;IAAAA,eAAA,sBACD,CAAC;IAAAA,eAAA,uBACA,CAAC;IAAAA,eAAA,kBACN,CAAC;EAAA;AACb;AAEA,eAAe,MAAMC,UAAU,SAASR,kBAAkB,CAAqD;EAE7GK,WAAWA,CAACI,KAAsB,EAAE;IAClC,KAAK,CAACA,KAAK,EAAEZ,aAAa,EAAEY,KAAK,CAACC,IAAI,KAAK,OAAO,GAAG,IAAIR,iBAAiB,CAAC,CAAC,GAAG,IAAIN,eAAe,CAAC,CAAC,EAAE,IAAIQ,eAAe,CAAC,CAAC,CAAC;IAACG,eAAA,6BAOzGI,CAAoB,IAAK;MAAA,IAAAC,cAAA;MAC7C,IAAIC,SAAS,GAAGF,CAAC,CAACG,WAAW,CAACC,MAAM,CAACC,KAAK;MAC1C,IAAI,CAACC,WAAW,CAAC;QACfC,UAAU,EAAEL,SAAS;QACrBM,WAAW,GAAAP,cAAA,GAAED,CAAC,CAACG,WAAW,cAAAF,cAAA,uBAAbA,cAAA,CAAeG,MAAM,CAACK;MACrC,CAAoB,CAAC;IACvB,CAAC;IAAAb,eAAA,iCAEyBI,CAAoB,IAAK;MAAA,IAAAU,eAAA;MACjD,IAAI,CAACJ,WAAW,CAAC;QACfK,UAAU,GAAAD,eAAA,GAAEV,CAAC,CAACG,WAAW,cAAAO,eAAA,uBAAbA,eAAA,CAAeN,MAAM,CAACK,MAAM;QACxCG,OAAO,EAAE;MACX,CAAoB,CAAC;IACvB,CAAC;IAAAhB,eAAA,mCAE2BI,CAAoB,IAAK;MAAA,IAAAa,eAAA,EAAAC,eAAA;MACnD,IAAI,CAACR,WAAW,CAAC;QACfS,WAAW,GAAAF,eAAA,GAAEb,CAAC,CAACG,WAAW,cAAAU,eAAA,uBAAbA,eAAA,CAAeT,MAAM,CAACC,KAAK;QACxCW,YAAY,GAAAF,eAAA,GAAEd,CAAC,CAACG,WAAW,cAAAW,eAAA,uBAAbA,eAAA,CAAeV,MAAM,CAACK;MACtC,CAAoB,CAAC;IACvB,CAAC;EA1BD;EAEAQ,iBAAiBA,CAAA,EAAG;IAClB,KAAK,CAACA,iBAAiB,CAAC,CAAC;EAC3B;EAwBAC,QAAQA,CAACC,CAAmB,EAAErB,KAAsB,EAAU;IAC1D,QAAOA,KAAK,CAACsB,SAAS;MACpB,KAAK,SAAS;QAAE;UACd,OAAOC,IAAI,CAACC,KAAK,CAACH,CAAC,CAACI,CAAC,GAAG,GAAG,GAAE,IAAI,CAACC,KAAK,CAACC,KAAK,CAAC,GAAG,GAAG;QACtD;MACA,KAAK,KAAK;QAAE;UACV,OAAO,IAAI,CAACD,KAAK,CAACE,eAAe,CAACP,CAAC,CAACQ,CAAC,CAAC;QACxC;MACA,KAAK,OAAO;QAAE;UACZ,OAAOxC,mBAAmB,CAACgC,CAAC,CAACI,CAAC,CAAC;QACjC;MACA,KAAK,WAAW;QAAE;UAChB,OAAO,IAAI,CAACC,KAAK,CAACE,eAAe,CAACP,CAAC,CAACQ,CAAC,CAAC,GAAG,GAAG,GAAGR,CAAC,CAACI,CAAC;QACpD;IACF;EACJ;EAEAK,QAAQA,CAACC,KAAU,EAAEC,IAAS,EAAC;IAC7B,IAAI,CAAC,IAAI,CAACC,OAAO,CAACC,OAAO,EAAE;IAC3B,IAAI,CAACD,OAAO,CAACC,OAAO,CAACC,eAAe,CAAC,CAACC,MAAc,EAAEC,MAAc,KAAK;MACzE,IAAIC,KAAK,GAAGN,IAAI,CAACO,KAAK,CAACD,KAAK;MAC5B,IAAIE,KAAK,GAAG,IAAI,CAACd,KAAK,CAACE,eAAe,CAACI,IAAI,CAACS,KAAK,CAACZ,CAAC,CAAC;MACpD,IAAIa,YAAY,GAAG,IAAI,CAAC1C,KAAK,CAAC2C,OAAO,CAACX,IAAI,CAACY,KAAK,CAAC;MACjD,IAAIC,iBAAiB,GAAGb,IAAI,CAACO,KAAK;MAClCM,iBAAiB,CAAC,MAAM,CAAC,GAAG;QAAChB,CAAC,EAAEW,KAAK;QAAEf,CAAC,EAAEa,KAAK;QAAEQ,KAAK,EAAEd,IAAI,CAACe,KAAK,CAACC,IAAI;QAAEC,QAAQ,EAAEP;MAAY,CAAC;MAChG,MAAMrC,WAAW,GAAG0B,KAAK,CAAC1B,WAAW;MACrC,IAAI6C,QAAQ,GAAG7C,WAAW,CAAC8C,KAAK,GAAGf,MAAM;MACzC,IAAIgB,QAAQ,GAAG/C,WAAW,CAACgD,KAAK,GAAGhB,MAAM;MACzC,IAAI,CAAC7B,WAAW,CAAC;QACf8C,YAAY,EAAEd,KAAK;QACnBe,YAAY,EAAEjB,KAAK;QACnBkB,aAAa,EAAE,IAAI;QACnBd,YAAY,EAAE;UAAC,GAAGA,YAAY;UAAEE,KAAK,EAAEZ,IAAI,CAACY;QAAM,CAAC;QACnDa,gBAAgB,EAAEP,QAAQ,GAAG,IAAI,CAACxB,KAAK,CAACgC,cAAc;QACtDC,gBAAgB,EAAEP,QAAQ,GAAG,IAAI,CAAC1B,KAAK,CAACkC;MAC1C,CAAQ,CAAC;MACT,IAAI,CAACC,mBAAmB,CAAC,UAAU,EAAE,CAAC9B,KAAK,CAAC1B,WAAW,EAAE,IAAI,CAACyD,KAAK,EAAEpB,YAAY,EAAEG,iBAAiB,CAAE,CAAC;IACvG,CAAC,CAAC;EACJ;EAEAkB,YAAYA,CAAC/D,KAAsB,EAAE;IACnC,IAAI,CAAC6D,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,IAAI,CAACC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC9D,IAAI,CAAC,IAAI,CAACpC,KAAK,CAACM,IAAI,CAACgC,MAAM,EAAE;MAC3B,OAAO,IAAI;IACb;IACA,MAAMC,OAAO,GAAG,IAAI,CAACvC,KAAK,CAACM,IAAI,CAAC,CAAC,CAAC;IAClC,MAAMvB,UAAU,GAAG,IAAI,CAACiB,KAAK,CAACjB,UAAU,IACnCT,KAAK,CAACkE,UAAU,KAAK,OAAO,GAAG,IAAI,CAACxC,KAAK,CAACT,WAAW,GAAG,CAAC,CAAC;IAC/D,MAAMkD,WAAW,GAAG,CAAC,IAAI,CAACC,MAAM,CAACC,IAAI,CAAC1D,MAAM,GAAG,IAAI,CAACe,KAAK,CAAChB,WAAW,GAAGD,UAAU,IAC9E,IAAI,CAACiB,KAAK,CAACb,UAAU,IACpBb,KAAK,CAACkE,UAAU,KAAK,OAAO,GAAG,CAAC,GAAG,IAAI,CAACxC,KAAK,CAACR,YAAY,CAAC;IAChE,IAAIoD,MAAM,GAAG,CAAC/C,IAAI,CAACgD,GAAG,CAAC9D,UAAU,EAAE0D,WAAW,CAAC,GAAG,EAAE,IAAG,CAAC;IACxD,IAAIK,WAAW,GAAGxE,KAAK,CAACyE,UAAU,GAAGH,MAAM;IAC3C,IAAII,SAAS,GAAG,CAAC,CAAC;IAClB,IAAIC,WAAW;IACf,IAAI3E,KAAK,CAAC4E,UAAU,KAAK,MAAM,EAAE;MAC/BF,SAAS,GAAC;QAACG,MAAM,EAAE;UAAEC,OAAO,EAAE;QAAO;MAAC,CAAC;IACzC,CAAC,MAAM,IAAI9E,KAAK,CAAC4E,UAAU,KAAK,QAAQ,EAAE;MACxCD,WAAW,GAAGL,MAAM,GAAC,CAAC;IACxB,CAAC,MAAM;MACLK,WAAW,GAAGL,MAAM,GAAG,CAAC;IAC1B;IACA,MAAMS,MAAM,GAAG;MAAClD,CAAC,EAAGpB,UAAU,GAAC,CAAE;MAAEgB,CAAC,EAAG0C,WAAW,GAAC;IAAE,CAAC;IACtD,MAAMa,WAAW,GAAGhF,KAAK,CAACkE,UAAU,KAAK,OAAO,GAAG,UAAU,GAAG,YAAY;IAC5E,IAAIe,UAAU,GAAGhB,OAAO,CAACiB,GAAG,CAAC,CAAC7D,CAAmB,EAAEuB,KAAa,KAAK;MACnE,OAAO;QACLuC,IAAI,EAAE,IAAI,CAACzD,KAAK,CAACE,eAAe,CAACP,CAAC,CAACQ,CAAC,CAAC;QACrCiB,KAAK,EAAE,IAAI,CAACpB,KAAK,CAAC0D,MAAM,CAACxC,KAAK,GAAI,IAAI,CAAClB,KAAK,CAAC0D,MAAM,CAACpB,MAAO;MAC7D,CAAC;IACH,CAAC,CAAC;IACF,oBACEtF,KAAA,CAAA2G,aAAA,CAAC1G,IAAI,EAAA2G,QAAA;MAACvC,KAAK,EAAE,CAAC;QAACjC,OAAO,EAAE,IAAI,CAACY,KAAK,CAACZ;MAAO,CAAC,EAAE,IAAI,CAACsD,MAAM,CAACC,IAAI;IAAE,GACzDrF,qBAAqB,CAACD,uBAAuB,CAACwG,SAAS,EAAEvF,KAAK,CAAC;MACnEwF,QAAQ,EAAE,IAAI,CAACC,kBAAmB;MAClCC,GAAG,EAAE,GAAG1F,KAAK,CAAC2F,KAAK;IAAa,iBAEhCjH,KAAA,CAAA2G,aAAA,CAAC1G,IAAI;MAAC6G,QAAQ,EAAE,IAAI,CAACI;IAAuB,gBAC1ClH,KAAA,CAAA2G,aAAA,CAAC1G,IAAI;MAACoE,KAAK,EAAE;QAAC8C,aAAa,EAAE,KAAK;QAAEC,UAAU,EAAE;MAAQ;IAAE,GACvD9F,KAAK,CAAC+F,SAAS,gBAAIrH,KAAA,CAAA2G,aAAA,CAAC/F,MAAM;MAACyG,SAAS,EAAE/F,KAAK,CAAC+F,SAAU;MAAC3B,MAAM,EAAE,IAAI,CAACA,MAAM,CAAC4B;IAAK,CAAS,CAAC,GAAI,IAAI,eACnGtH,KAAA,CAAA2G,aAAA,CAACzG,IAAI;MAACmE,KAAK,EAAE,IAAI,CAACqB,MAAM,CAACuB;IAAM,GAAE3F,KAAK,CAAC2F,KAAY,CAC/C,CAAC,eACPjH,KAAA,CAAA2G,aAAA,CAACzG,IAAI;MAACmE,KAAK,EAAE,IAAI,CAACqB,MAAM,CAAC6B;IAAW,GAAEjG,KAAK,CAACkG,UAAiB,CACzD,CAAC,EACNlG,KAAK,CAACkE,UAAU,KAAK,KAAK,gBACxBxF,KAAA,CAAA2G,aAAA,CAAC1G,IAAI;MAAC6G,QAAQ,EAAE,IAAI,CAACW;IAAyB,gBAC7CzH,KAAA,CAAA2G,aAAA,CAAC3F,MAAM;MAACsC,IAAI,EAAEiD,UAAW;MACvBmB,SAAS,EAAE,IAAI,CAAChC,MAAM,CAACiC,UAAW;MAClCC,QAAQ,EAAE,IAAI,CAAClC,MAAM,CAACmC;IAAW,CAAS,CACxC,CAAC,GAAI,IAAI,eACjB7H,KAAA,CAAA2G,aAAA,CAAC1G,IAAI;MAACoE,KAAK,EAAE;QAAC8C,aAAa,EAAE,KAAK;QAAEW,cAAc,EAAE,QAAQ;QAAEV,UAAU,EAAE;MAAQ;IAAE,GACnF,IAAI,CAACW,UAAU,CAAC,CAAC,eAChB/H,KAAA,CAAA2G,aAAA,CAAC1G,IAAI;MAACoE,KAAK,EAAE;QAAC2D,IAAI,EAAE;MAAC,CAAE;MAACC,GAAG,EAAE,IAAI,CAAC1E;IAAQ,GACvCxB,UAAU,gBACX/B,KAAA,CAAA2G,aAAA,CAACvG,GAAG;MACFyB,KAAK,EAAEE,UAAW;MAClBE,MAAM,EAAEwD;IAAY,gBAEpBzF,KAAA,CAAA2G,aAAA,CAACnG,UAAU;MACT6D,KAAK,EAAE2B,SAAU;MACjBkC,UAAU,EAAE,KAAM;MAClBC,UAAU,EAAE,IAAI,CAACnF,KAAK,CAAC0D,MAAO;MAC9BP,MAAM,EAAEA,CAAC;QAACpC;MAAK,CAAC,KAAK,IAAI,CAACrB,QAAQ,CAACqB,KAAK,EAAEzC,KAAK,CAAE;MACjD8G,QAAQ,EAAE,IAAI,CAACpF,KAAK,CAACoF,QAAQ,IAAI,CAAE;MACnCxC,MAAM,EAAEA,MAAO;MACfE,WAAW,EAAEA,WAAY;MACzBuC,KAAK,EAAE,IAAI,CAACrF,KAAK,CAACqF,KAAM;MACxBrB,GAAG,EAAE1F,KAAK,CAACmF,IAAK;MAChBA,IAAI,EAAEnF,KAAK,CAACmF,IAAK;MACjBnD,IAAI,EAAE,IAAI,CAACgF,KAAK,GAAC/C,OAAO,CAACgD,UAAU,CAAC,CAAC,GAAChD,OAAQ;MAC9Cc,MAAM,EAAEA,MAAO;MACfmC,cAAc,EAAElH,KAAK,CAACmH,cAAe;MACrCxC,WAAW,EAAEA,WAAY;MACzByC,MAAM,EAAE,CAAC;QACPC,MAAM,EAAE,MAAM;QACdC,aAAa,EAAEzI,QAAQ,CAAC0I,EAAE,IAAI,KAAK,GAAG;UACpCC,OAAO,EAAE,IAAI,CAAC1F,QAAQ,CAAC2F,IAAI,CAAC,IAAI;QAClC,CAAC,GAAC;UACAC,OAAO,EAAE,IAAI,CAAC5F,QAAQ,CAAC2F,IAAI,CAAC,IAAI;QAClC;MACF,CAAC;IAAE,CACJ,CAAC,eACF/I,KAAA,CAAA2G,aAAA,CAACpG,YAAY;MACX0I,UAAU,EAAC,QAAQ;MACnB5E,KAAK,EAAE;QAAE,GAAG,IAAI,CAACqB,MAAM,CAACwD,WAAW;QAAE5E,IAAI,EAAE,IAAI,CAACoB,MAAM,CAACwD,WAAW,CAAC9E;MAAM,CAAE;MAC3EjB,CAAC,EAAEkD,MAAM,CAAClD,CAAE;MAACJ,CAAC,EAAEsD,MAAM,CAACtD,CAAE;MACzBoG,IAAI,EAAE7H,KAAK,CAAC8H;IAAY,CACzB,CACE,CAAC,GAAI,IACN,CAAC,EACN9H,KAAK,CAACkE,UAAU,KAAK,OAAO,gBAC1BxF,KAAA,CAAA2G,aAAA,CAAC1G,IAAI;MAACoE,KAAK,EAAE;QAACgF,QAAQ,EAAE;MAAK,CAAE;MAACvC,QAAQ,EAAE,IAAI,CAACW;IAAyB,gBACvEzH,KAAA,CAAA2G,aAAA,CAAC3F,MAAM;MAACsC,IAAI,EAAEiD,UAAW;MACvBmB,SAAS,EAAE,IAAI,CAAChC,MAAM,CAACiC,UAAW;MAClCC,QAAQ,EAAE,IAAI,CAAClC,MAAM,CAACmC,UAAW;MACjCvB,WAAW,EAAC;IAAU,CAAS,CAC7B,CAAC,GAAI,IACT,CAAC,EACNhF,KAAK,CAACkE,UAAU,KAAK,QAAQ,gBAC3BxF,KAAA,CAAA2G,aAAA,CAAC1G,IAAI;MAAC6G,QAAQ,EAAE,IAAI,CAACW;IAAyB,gBAC7CzH,KAAA,CAAA2G,aAAA,CAAC3F,MAAM;MAACsC,IAAI,EAAEiD,UAAW;MACvBmB,SAAS,EAAE,IAAI,CAAChC,MAAM,CAACiC,UAAW;MAClCC,QAAQ,EAAE,IAAI,CAAClC,MAAM,CAACmC;IAAW,CAAS,CACxC,CAAC,GAAI,IACT,CAAC;EAEX;AACF","ignoreList":[]}

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

@@ -241,30 +241,36 @@ export default class WmStackChart extends BaseChartComponent {
     return ticks;
   }
   onSelect(event, data) {
-    let props = this.state.props;
-    let index = data.datum.index;
-    let yaxisKey = props.yaxisdatakey;
-    let label = this.state.xaxisDatakeyArr[index];
-    let value = props.dataset[index][yaxisKey];
-    let selectedItem = props.dataset[index];
-    let selectedChartItem = [{
-      series: 0,
-      x: index,
-      y: value,
-      _dataObj: selectedItem
-    }, index];
-    const nativeEvent = event.nativeEvent;
-    this.setTooltipPosition(nativeEvent);
-    this.updateState({
-      tooltipXaxis: label,
-      tooltipYaxis: value,
-      isTooltipOpen: true,
-      selectedItem: {
-        ...selectedItem,
-        index: index
-      }
+    if (!this.viewRef.current) return;
+    this.viewRef.current.measureInWindow((chartX, chartY) => {
+      let props = this.state.props;
+      let index = data.datum.index;
+      let yaxisKey = props.yaxisdatakey;
+      let label = this.state.xaxisDatakeyArr[index];
+      let value = props.dataset[index][yaxisKey];
+      let selectedItem = props.dataset[index];
+      let selectedChartItem = [{
+        series: 0,
+        x: index,
+        y: value,
+        _dataObj: selectedItem
+      }, index];
+      const nativeEvent = event.nativeEvent;
+      let tooltipX = nativeEvent.pageX - chartX;
+      let tooltipY = nativeEvent.pageY - chartY;
+      this.updateState({
+        tooltipXaxis: label,
+        tooltipYaxis: value,
+        isTooltipOpen: true,
+        selectedItem: {
+          ...selectedItem,
+          index: index
+        },
+        tooltipXPosition: tooltipX - this.state.tooltipoffsetx,
+        tooltipYPosition: tooltipY - this.state.tooltipoffsety
+      });
+      this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
     });
-    this.invokeEventCallback('onSelect', [event.nativeEvent, this.proxy, selectedItem, selectedChartItem]);
   }
   renderWidget(props) {
     this.invokeEventCallback('onBeforerender', [this.proxy, null]);
@@ -278,7 +284,9 @@ export default class WmStackChart extends BaseChartComponent {
     return /*#__PURE__*/React.createElement(View, _extends({}, getAccessibilityProps(AccessibilityWidgetType.LINECHART, props), {
       style: this.styles.root,
       onLayout: this.onViewLayoutChange
-    }), this.getTooltip(), props.viewtype === 'Bar' ? /*#__PURE__*/React.createElement(VictoryChart, {
+    }), this.getTooltip(), props.viewtype === 'Bar' ? /*#__PURE__*/React.createElement(View, {
+      ref: this.viewRef
+    }, /*#__PURE__*/React.createElement(VictoryChart, {
       theme: this.state.theme,
       minDomain: mindomain,
       height: this.styles.root.height,
@@ -331,7 +339,9 @@ export default class WmStackChart extends BaseChartComponent {
     }), /*#__PURE__*/React.createElement(VictoryStack, {
       colorScale: this.updateColors(),
       horizontal: true
-    }, this.getBarChart(props))) : /*#__PURE__*/React.createElement(Svg, {
+    }, this.getBarChart(props)))) : /*#__PURE__*/React.createElement(View, {
+      ref: this.viewRef
+    }, /*#__PURE__*/React.createElement(Svg, {
       width: this.state.chartWidth,
       height: this.state.chartHeight
     }, /*#__PURE__*/React.createElement(VictoryLegend, {
@@ -342,7 +352,7 @@ export default class WmStackChart extends BaseChartComponent {
       gutter: 20,
       data: [],
       theme: this.state.theme
-    }), this.getArcChart(props), this.getArcAxis()));
+    }), this.getArcChart(props), this.getArcAxis())));
   }
 }
 //# sourceMappingURL=stack-chart.component.js.map