@wavemaker/app-rn-runtime 11.4.2-rc.5389 → 11.4.2-rc.5398

app-rn-runtime/components/basic/label/label.component.js

@@ -57,7 +57,8 @@ export default class WmLabel extends BaseComponent {
       style: [this.styles.text, {
         color: props.isValid === false ? 'red' : this.styles.text.color
       }],
-      numberOfLines: props.wrap ? undefined : 1,
+      ellipsizeMode: "tail",
+      numberOfLines: props.wrap ? undefined : props.nooflines,
       selectable: this.styles.text.userSelect === 'text'
     }, toString(props.caption), props.required && this.getAsterisk()))) : null;
   }

app-rn-runtime/components/basic/label/label.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","BaseComponent","BaseComponentState","Tappable","WmLabelProps","DEFAULT_CLASS","isNil","toString","Animatedview","createSkeleton","WmLabelState","WmLabel","constructor","props","getAsterisk","createElement","style","styles","asterisk","getMultilineSkeleton","width","height","borderRadius","marginBottom","theme","skeleton","renderSkeleton","_this$styles$root","_this$styles$root2","skeletonWidth","skeletonwidth","root","skeletonHeight","skeletonheight","text","fontSize","multilineskeleton","renderWidget","caption","entryanimation","animation","_background","target","color","isValid","numberOfLines","wrap","undefined","selectable","userSelect","required"],"sources":["label.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Text, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\n\nimport WmLabelProps from './label.props';\nimport { DEFAULT_CLASS, WmLabelStyles } from './label.styles';\nimport { isNil, toString } from 'lodash-es';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport WmSkeleton, { createSkeleton } from '../skeleton/skeleton.component';\nimport { totalMonths } from 'react-native-paper-dates/lib/typescript/Date/dateUtils';\n\nexport class WmLabelState extends BaseComponentState<WmLabelProps> {\n\n}\n\nexport default class WmLabel extends BaseComponent<WmLabelProps, WmLabelState, WmLabelStyles> {\n\n  constructor(props: WmLabelProps) {\n    super(props, DEFAULT_CLASS, new WmLabelProps());\n  }\n\n  private getAsterisk () {\n    return <Text style={this.styles.asterisk}>*</Text>;\n  }\n\n  private getMultilineSkeleton(width: any, height: any) {\n    const styles = {\n      borderRadius:4,\n      marginBottom: 10,\n      height: height\n    };\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...styles,\n      width: width,\n      height: height\n    });\n  }\n\n  public renderSkeleton(props: WmLabelProps){\n    const skeletonWidth = this.props.skeletonwidth || this.styles.root?.width;\n    const skeletonHeight = this.props.skeletonheight || this.styles.root?.height || this.styles.text.fontSize;\n    if(this.props.multilineskeleton) {\n      return (<View style={{\n        width: skeletonWidth as DimensionValue\n      }}>\n        {this.getMultilineSkeleton('100%', skeletonHeight)}\n        {this.getMultilineSkeleton('70%', skeletonHeight)}\n        {this.getMultilineSkeleton('40%', skeletonHeight)}\n      </View>)\n    }\n    else{\n      return createSkeleton(this.theme, this.styles.skeleton, {\n        ...this.styles.root,\n        width: skeletonWidth as DimensionValue,\n        height: skeletonHeight as DimensionValue\n      });  \n    }\n  }\n\n  renderWidget(props: WmLabelProps) {\n    return !isNil(props.caption)? (\n      <Animatedview entryanimation={props.animation} style={this.styles.root}>\n        {this._background}\n        <Tappable target={this}>\n            <Text\n              style={[this.styles.text, \n                {color: props.isValid === false ? 'red' : this.styles.text.color}]}\n              numberOfLines={props.wrap ? undefined : 1}\n              selectable={this.styles.text.userSelect === 'text'}>\n              {toString(props.caption)}\n              {props.required && this.getAsterisk()}\n            </Text>\n        </Tappable>\n      </Animatedview>\n    ): null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","View","BaseComponent","BaseComponentState","Tappable","WmLabelProps","DEFAULT_CLASS","isNil","toString","Animatedview","createSkeleton","WmLabelState","WmLabel","constructor","props","getAsterisk","createElement","style","styles","asterisk","getMultilineSkeleton","width","height","borderRadius","marginBottom","theme","skeleton","renderSkeleton","_this$styles$root","_this$styles$root2","skeletonWidth","skeletonwidth","root","skeletonHeight","skeletonheight","text","fontSize","multilineskeleton","renderWidget","caption","entryanimation","animation","_background","target","color","isValid","ellipsizeMode","numberOfLines","wrap","undefined","nooflines","selectable","userSelect","required"],"sources":["label.component.tsx"],"sourcesContent":["import React from 'react';\nimport { DimensionValue, Text, View } from 'react-native';\nimport { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { Tappable } from '@wavemaker/app-rn-runtime/core/tappable.component';\n\nimport WmLabelProps from './label.props';\nimport { DEFAULT_CLASS, WmLabelStyles } from './label.styles';\nimport { isNil, toString } from 'lodash-es';\nimport { Animatedview } from '@wavemaker/app-rn-runtime/components/basic/animatedview.component';\nimport WmSkeleton, { createSkeleton } from '../skeleton/skeleton.component';\nimport { totalMonths } from 'react-native-paper-dates/lib/typescript/Date/dateUtils';\n\nexport class WmLabelState extends BaseComponentState<WmLabelProps> {\n\n}\n\nexport default class WmLabel extends BaseComponent<WmLabelProps, WmLabelState, WmLabelStyles> {\n\n  constructor(props: WmLabelProps) {\n    super(props, DEFAULT_CLASS, new WmLabelProps());\n  }\n\n  private getAsterisk () {\n    return <Text style={this.styles.asterisk}>*</Text>;\n  }\n\n  private getMultilineSkeleton(width: any, height: any) {\n    const styles = {\n      borderRadius:4,\n      marginBottom: 10,\n      height: height\n    };\n    return createSkeleton(this.theme, this.styles.skeleton, {\n      ...styles,\n      width: width,\n      height: height\n    });\n  }\n\n  public renderSkeleton(props: WmLabelProps){\n    const skeletonWidth = this.props.skeletonwidth || this.styles.root?.width;\n    const skeletonHeight = this.props.skeletonheight || this.styles.root?.height || this.styles.text.fontSize;\n    if(this.props.multilineskeleton) {\n      return (<View style={{\n        width: skeletonWidth as DimensionValue\n      }}>\n        {this.getMultilineSkeleton('100%', skeletonHeight)}\n        {this.getMultilineSkeleton('70%', skeletonHeight)}\n        {this.getMultilineSkeleton('40%', skeletonHeight)}\n      </View>)\n    }\n    else{\n      return createSkeleton(this.theme, this.styles.skeleton, {\n        ...this.styles.root,\n        width: skeletonWidth as DimensionValue,\n        height: skeletonHeight as DimensionValue\n      });  \n    }\n  }\n\n  renderWidget(props: WmLabelProps) {\n    return !isNil(props.caption)? (\n      <Animatedview entryanimation={props.animation} style={this.styles.root}>\n        {this._background}\n        <Tappable target={this}>\n            <Text\n              style={[this.styles.text, \n                {color: props.isValid === false ? 'red' : this.styles.text.color}]}\n              ellipsizeMode=\"tail\"\n              numberOfLines={props.wrap ? undefined : props.nooflines}\n              selectable={this.styles.text.userSelect === 'text'}>\n              {toString(props.caption)}\n              {props.required && this.getAsterisk()}\n            </Text>\n        </Tappable>\n      </Animatedview>\n    ): null;\n  }\n}\n"],"mappings":"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"}

app-rn-runtime/components/basic/label/label.props.js

@@ -13,6 +13,7 @@ export default class WmLabelProps extends BaseProps {
     _defineProperty(this, "skeletonheight", null);
     _defineProperty(this, "skeletonwidth", null);
     _defineProperty(this, "multilineskeleton", false);
+    _defineProperty(this, "nooflines", 1);
   }
 }
 //# sourceMappingURL=label.props.js.map

app-rn-runtime/components/basic/label/label.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmLabelProps","constructor","arguments","_defineProperty"],"sources":["label.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmLabelProps extends BaseProps {\n    animation?: string = null as any;\n    caption?: string = 'Label';\n    required?: boolean = null as any;\n    isValid?: boolean = true;\n    wrap?: boolean = true;\n    skeletonheight?: string = null as any;\n    skeletonwidth?: string = null as any;\n    multilineskeleton?: boolean = false;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,oBAC3B,IAAI;IAAAA,eAAA,kBACN,OAAO;IAAAA,eAAA,mBACL,IAAI;IAAAA,eAAA,kBACL,IAAI;IAAAA,eAAA,eACP,IAAI;IAAAA,eAAA,yBACK,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,4BACC,KAAK;EAAA;AACvC"}
+{"version":3,"names":["BaseProps","WmLabelProps","constructor","arguments","_defineProperty"],"sources":["label.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\n\nexport default class WmLabelProps extends BaseProps {\n    animation?: string = null as any;\n    caption?: string = 'Label';\n    required?: boolean = null as any;\n    isValid?: boolean = true;\n    wrap?: boolean = true;\n    skeletonheight?: string = null as any;\n    skeletonwidth?: string = null as any;\n    multilineskeleton?: boolean = false;\n    nooflines? = 1;\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAEzE,eAAe,MAAMC,YAAY,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,oBAC3B,IAAI;IAAAA,eAAA,kBACN,OAAO;IAAAA,eAAA,mBACL,IAAI;IAAAA,eAAA,kBACL,IAAI;IAAAA,eAAA,eACP,IAAI;IAAAA,eAAA,yBACK,IAAI;IAAAA,eAAA,wBACL,IAAI;IAAAA,eAAA,4BACC,KAAK;IAAAA,eAAA,oBACtB,CAAC;EAAA;AAClB"}

app-rn-runtime/components/chart/area-chart/area-chart.component.js

@@ -2,12 +2,14 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 React from 'react';
+import Color from "color";
 import { View } from 'react-native';
 import { Defs, LinearGradient, Stop, Svg } from 'react-native-svg';
 import { VictoryArea, VictoryChart, VictoryLegend, VictoryStack, VictoryScatter, VictoryGroup } from "victory-native";
 import WmAreaChartProps from './area-chart.props';
 import { DEFAULT_CLASS } from './area-chart.styles';
 import { BaseChartComponent, BaseChartComponentState } from "@wavemaker/app-rn-runtime/components/chart/basechart.component";
+import { isNumber } from 'lodash-es';
 export class WmAreaChartState extends BaseChartComponentState {
   constructor() {
     super(...arguments);
@@ -30,10 +32,14 @@ export default class WmAreaChart extends BaseChartComponent {
       return null;
     }
     let mindomain = {
-      x: this.props.xdomain === 'Min' ? this.state.chartMinX : undefined,
-      y: this.props.ydomain === 'Min' ? this.state.chartMinY : undefined
+      x: props.xdomain === 'Min' ? this.state.chartMinX : undefined,
+      y: props.ydomain === 'Min' ? this.state.chartMinY : undefined
     };
     const chartName = this.props.name ?? 'nonameAreachart';
+    let gradientStop = '100%';
+    if (isNumber(this.state.chartMaxY) && isNumber(this.state.chartMinY) && this.state.chartMaxY > 0) {
+      gradientStop = (this.state.chartMaxY - this.state.chartMinY) * 100 / this.state.chartMaxY + '%';
+    }
     return /*#__PURE__*/React.createElement(View, {
       style: this.styles.root,
       onLayout: this.onViewLayoutChange.bind(this)
@@ -45,7 +51,7 @@ export default class WmAreaChart extends BaseChartComponent {
         top: 70,
         bottom: 50,
         left: 50,
-        right: 50
+        right: 30
       },
       minDomain: mindomain
     }, /*#__PURE__*/React.createElement(VictoryLegend, {
@@ -67,18 +73,18 @@ export default class WmAreaChart extends BaseChartComponent {
         y2: "100%"
       }, /*#__PURE__*/React.createElement(Stop, {
         offset: "0%",
-        stopColor: this.state.colors[i]
+        stopColor: Color(this.state.colors[i]).lighten(0.2).rgb().toString()
       }), /*#__PURE__*/React.createElement(Stop, {
-        offset: "100%",
-        stopColor: '#ffffff00',
-        stopOpacity: "0"
+        offset: gradientStop,
+        stopColor: Color(this.state.colors[i]).lighten(0.6).rgb().toString()
       }))), /*#__PURE__*/React.createElement(VictoryArea, {
         interpolation: props.interpolation,
         key: props.name + '_' + i,
         style: {
           data: {
             fill: `url(#${chartName}Gradient${i})`,
-            stroke: this.state.colors[i]
+            stroke: this.state.colors[i],
+            strokeWidth: props.linethickness
           }
         },
         data: d
@@ -87,8 +93,7 @@ export default class WmAreaChart extends BaseChartComponent {
         key: props.name + '_scatter' + i,
         style: {
           data: {
-            fill: this.state.colors[i],
-            opacity: 0.8
+            fill: Color(this.state.colors[i]).darken(0.2).rgb().toString()
           }
         },
         data: d

app-rn-runtime/components/chart/area-chart/area-chart.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Defs","LinearGradient","Stop","Svg","VictoryArea","VictoryChart","VictoryLegend","VictoryStack","VictoryScatter","VictoryGroup","WmAreaChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","WmAreaChartState","constructor","arguments","_defineProperty","WmAreaChart","props","e","viewWidth","nativeEvent","layout","width","updateState","chartWidth","renderWidget","_this$state$data","state","data","length","mindomain","x","xdomain","chartMinX","undefined","y","ydomain","chartMinY","chartName","name","createElement","style","styles","root","onLayout","onViewLayoutChange","bind","theme","height","padding","top","bottom","left","right","minDomain","containerComponent","title","subheading","orientation","gutter","getLegendView","getXaxis","getYAxis","map","d","i","key","id","x1","y1","x2","y2","offset","stopColor","colors","stopOpacity","interpolation","fill","stroke","highlightpoints","size","opacity"],"sources":["area-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutChangeEvent, View } from 'react-native';\nimport { Defs, LinearGradient, Stop, Svg } from 'react-native-svg';\nimport { VictoryArea, VictoryChart, VictoryLegend, VictoryStack, VictoryScatter, VictoryGroup } from \"victory-native\";\nimport { InterpolationPropType } from 'victory-core';\nimport WmAreaChartProps from './area-chart.props';\nimport { DEFAULT_CLASS, WmAreaChartStyles } from './area-chart.styles';\nimport {\n  BaseChartComponent,\n  BaseChartComponentState\n} from \"@wavemaker/app-rn-runtime/components/chart/basechart.component\";\n\nexport class WmAreaChartState extends BaseChartComponentState<WmAreaChartProps> {\n  chartWidth = 0;\n}\n\nexport default class WmAreaChart extends BaseChartComponent<WmAreaChartProps, WmAreaChartState, WmAreaChartStyles> {\n\n  constructor(props: WmAreaChartProps) {\n    super(props, DEFAULT_CLASS, new WmAreaChartProps(), new WmAreaChartState());\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n    this.updateState({\n      chartWidth: viewWidth\n    } as WmAreaChartState)\n  }\n\n  renderWidget(props: WmAreaChartProps) {\n    if (!this.state.data?.length) {\n      return null;\n    }\n    let mindomain={\n      x: this.props.xdomain === 'Min' ? this.state.chartMinX: undefined,\n      y: this.props.ydomain === 'Min' ? this.state.chartMinY: undefined\n    };\n    const chartName = this.props.name ?? 'nonameAreachart';\n    return (\n      <View\n        style={this.styles.root}\n        onLayout={this.onViewLayoutChange.bind(this)}\n      >\n        {this.state.chartWidth ? \n        (\n          <VictoryChart\n            theme={this.state.theme}\n            height={this.styles.root.height as number}\n            width={this.state.chartWidth || 120}\n            padding={{ top: 70, bottom: 50, left: 50, right: 50 }}\n            minDomain={mindomain}\n          > \n            <VictoryLegend\n              name={'legend'}\n              containerComponent={<Svg />}\n              title={[props.title, props.subheading]}\n              orientation=\"horizontal\"\n              gutter={20}\n              data={[]}\n              theme={this.state.theme}\n            />\n            {this.getLegendView()}\n            {this.getXaxis()}\n            {this.getYAxis()}\n            <VictoryStack>\n            {\n              this.state.data.map((d: any, i: number) => {\n                return <VictoryGroup key={props.name + '_area_group_' + i}>\n                  <Defs>\n                    <LinearGradient id={`${chartName}Gradient${i}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n                      <Stop offset=\"0%\" stopColor={this.state.colors[i]}/>\n                      <Stop offset=\"100%\" stopColor={'#ffffff00'} stopOpacity=\"0\"/>\n                    </LinearGradient>\n                  </Defs>\n                  <VictoryArea\n                    interpolation={props.interpolation as InterpolationPropType}\n                    key={props.name + '_' + i}\n                    style={{\n                      data: {\n                        fill: `url(#${chartName}Gradient${i})`,\n                        stroke: this.state.colors[i]\n                      }\n                    }}\n                    data={d}\n                  />\n                  {props.highlightpoints ?\n                    <VictoryScatter\n                      size={5}\n                      key={props.name + '_scatter' + i}\n                      style={{\n                        data: { fill: this.state.colors[i], opacity: 0.8}\n                      }}\n                      data={d}/>\n                  : null}\n                </VictoryGroup>\n              })\n            }\n            </VictoryStack>\n          </VictoryChart>\n        )\n      : null}\n    </View>);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Color","View","Defs","LinearGradient","Stop","Svg","VictoryArea","VictoryChart","VictoryLegend","VictoryStack","VictoryScatter","VictoryGroup","WmAreaChartProps","DEFAULT_CLASS","BaseChartComponent","BaseChartComponentState","isNumber","WmAreaChartState","constructor","arguments","_defineProperty","WmAreaChart","props","e","viewWidth","nativeEvent","layout","width","updateState","chartWidth","renderWidget","_this$state$data","state","data","length","mindomain","x","xdomain","chartMinX","undefined","y","ydomain","chartMinY","chartName","name","gradientStop","chartMaxY","createElement","style","styles","root","onLayout","onViewLayoutChange","bind","theme","height","padding","top","bottom","left","right","minDomain","containerComponent","title","subheading","orientation","gutter","getLegendView","getXaxis","getYAxis","map","d","i","key","id","x1","y1","x2","y2","offset","stopColor","colors","lighten","rgb","toString","interpolation","fill","stroke","strokeWidth","linethickness","highlightpoints","size","darken"],"sources":["area-chart.component.tsx"],"sourcesContent":["import React from 'react';\nimport Color from \"color\";\nimport { LayoutChangeEvent, View, Text } from 'react-native';\nimport { Defs, LinearGradient, Stop, Svg } from 'react-native-svg';\nimport { VictoryArea, VictoryLine, VictoryChart, VictoryLegend, VictoryStack, VictoryScatter, VictoryGroup } from \"victory-native\";\nimport { InterpolationPropType } from 'victory-core';\nimport WmAreaChartProps from './area-chart.props';\nimport { DEFAULT_CLASS, WmAreaChartStyles } from './area-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 { isNil, isNumber } from 'lodash-es';\n\nexport class WmAreaChartState extends BaseChartComponentState<WmAreaChartProps> {\n  chartWidth = 0;\n}\n\nexport default class WmAreaChart extends BaseChartComponent<WmAreaChartProps, WmAreaChartState, WmAreaChartStyles> {\n\n  constructor(props: WmAreaChartProps) {\n    super(props, DEFAULT_CLASS, new WmAreaChartProps(), new WmAreaChartState());\n  }\n\n  onViewLayoutChange = (e: LayoutChangeEvent) => {\n    let viewWidth = e.nativeEvent.layout.width;\n    this.updateState({\n      chartWidth: viewWidth\n    } as WmAreaChartState)\n  }\n\n  renderWidget(props: WmAreaChartProps) {\n    if (!this.state.data?.length) {\n      return null;\n    }\n    let mindomain={\n      x: props.xdomain === 'Min' ? this.state.chartMinX: undefined,\n      y: props.ydomain === 'Min' ? this.state.chartMinY: undefined\n    };\n    const chartName = this.props.name ?? 'nonameAreachart';\n    let gradientStop = '100%';\n    if (isNumber(this.state.chartMaxY) && isNumber(this.state.chartMinY) && this.state.chartMaxY > 0) {\n      gradientStop = (this.state.chartMaxY - this.state.chartMinY) * 100 / this.state.chartMaxY + '%';\n    }\n    return (\n      <View\n        style={this.styles.root}\n        onLayout={this.onViewLayoutChange.bind(this)}\n      >\n        {this.state.chartWidth ? \n        (\n          <VictoryChart\n            theme={this.state.theme}\n            height={this.styles.root.height as number}\n            width={this.state.chartWidth || 120}\n            padding={{ top: 70, bottom: 50, left: 50, right: 30 }}\n            minDomain={mindomain}\n          > \n            <VictoryLegend\n              name={'legend'}\n              containerComponent={<Svg />}\n              title={[props.title, props.subheading]}\n              orientation=\"horizontal\"\n              gutter={20}\n              data={[]}\n              theme={this.state.theme}\n            />\n            {this.getLegendView()}\n            {this.getXaxis()}\n            {this.getYAxis()}\n            <VictoryStack>\n            {\n              this.state.data.map((d: any, i: number) => {\n                return <VictoryGroup key={props.name + '_area_group_' + i}>\n                  <Defs>\n                    <LinearGradient id={`${chartName}Gradient${i}`} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n                      <Stop offset=\"0%\" stopColor={Color(this.state.colors[i]).lighten(0.2).rgb().toString()}/>\n                      <Stop offset={gradientStop} stopColor={Color(this.state.colors[i]).lighten(0.6).rgb().toString()}/>\n                    </LinearGradient>\n                  </Defs>\n                  <VictoryArea\n                    interpolation={props.interpolation as InterpolationPropType}\n                    key={props.name + '_' + i}\n                    style={{\n                      data: {\n                        fill: `url(#${chartName}Gradient${i})`,\n                        stroke: this.state.colors[i],\n                        strokeWidth: props.linethickness,\n                      }\n                    }}\n                    data={d}\n                  />\n                  {props.highlightpoints ?\n                    <VictoryScatter\n                      size={5}\n                      key={props.name + '_scatter' + i}\n                      style={{\n                        data: { \n                          fill: Color(this.state.colors[i]).darken(0.2).rgb().toString()}\n                      }}        \n                      data={d}\n                      />\n                  : null}\n                </VictoryGroup>\n              })\n            }\n            </VictoryStack>\n          </VictoryChart>\n        )\n      : null}\n    </View>);\n  }\n}\n"],"mappings":"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"}

app-rn-runtime/components/chart/area-chart/area-chart.props.js

@@ -1,3 +1,11 @@
+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 WmAreaChartProps extends BaseChartComponentProps {}
+export default class WmAreaChartProps extends BaseChartComponentProps {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "linethickness", 2);
+  }
+}
 //# sourceMappingURL=area-chart.props.js.map

app-rn-runtime/components/chart/area-chart/area-chart.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseChartComponentProps","WmAreaChartProps"],"sources":["area-chart.props.ts"],"sourcesContent":["import BaseChartComponentProps from \"@wavemaker/app-rn-runtime/components/chart/basechart.props\";\n\nexport default class WmAreaChartProps extends BaseChartComponentProps {\n\n}\n"],"mappings":"AAAA,OAAOA,uBAAuB,MAAM,4DAA4D;AAEhG,eAAe,MAAMC,gBAAgB,SAASD,uBAAuB,CAAC"}
+{"version":3,"names":["BaseChartComponentProps","WmAreaChartProps","constructor","arguments","_defineProperty"],"sources":["area-chart.props.ts"],"sourcesContent":["import BaseChartComponentProps from \"@wavemaker/app-rn-runtime/components/chart/basechart.props\";\n\nexport default class WmAreaChartProps extends BaseChartComponentProps {\n    linethickness: number = 2;\n}\n"],"mappings":";;;AAAA,OAAOA,uBAAuB,MAAM,4DAA4D;AAEhG,eAAe,MAAMC,gBAAgB,SAASD,uBAAuB,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,wBAC1C,CAAC;EAAA;AAC7B"}

app-rn-runtime/components/chart/basechart.component.js

@@ -84,12 +84,13 @@ export class BaseChartComponent extends BaseComponent {
     if (this.state.props.showlegend === 'hide') {
       return null;
     }
-    let top = this.props.showlegend === 'bottom' ? parseInt(this.styles.root.height) : 0;
+    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 = this.props.showlegend === 'right' || this.props.showlegend === 'left' ? 'vertical' : 'horizontal';
+    const orientation = props.showlegend === 'right' || props.showlegend === 'left' ? 'vertical' : 'horizontal';
     return /*#__PURE__*/React.createElement(VictoryLegend, {
       colorScale: colorScale,
       name: 'legendData',
@@ -114,39 +115,75 @@ export class BaseChartComponent extends BaseComponent {
   }
   // x axis with vertical lines having grid stroke colors
   getXaxis() {
-    if (this.props.showxaxis === false) {
-      return null;
-    }
+    const minIndex = 0;
+    const maxIndex = this.state.xaxisDatakeyArr.length - 1;
+    const props = this.state.props;
+    const getTickValueLabel = props.xtickexpr;
     return /*#__PURE__*/React.createElement(VictoryAxis, {
-      crossAxis: true,
-      label: (this.props.xaxislabel || this.props.xaxisdatakey) + (this.props.xunits ? `(${this.props.xunits})` : ''),
+      crossAxis: false,
+      label: (props.xaxislabel || props.xaxisdatakey || "name") + (props.xunits ? `(${props.xunits})` : ''),
       style: {
-        grid: this.styles.grid
+        axisLabel: this.theme.mergeStyle(this.styles.axisLabel, this.styles.yAxisLabel, {
+          padding: props.yaxislabeldistance
+        }),
+        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: true,
+      fixLabelOverlap: props.autoadjustlabels ? true : false,
       tickLabelComponent: /*#__PURE__*/React.createElement(VictoryLabel, {
-        angle: this.props.labelangle || 0
+        angle: props.labelangle || 0
       }),
       theme: this.state.theme,
-      tickFormat: d => `${this.state.xaxisDatakeyArr.length ? this.state.xaxisDatakeyArr[d] : d}`
+      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() {
-    if (this.props.showyaxis === false) {
+    const props = this.state.props;
+    if (props.showyaxis === false) {
       return null;
     }
+    const getTickValueLabel = props.ytickexpr;
     return /*#__PURE__*/React.createElement(VictoryAxis, {
-      crossAxis: true,
-      label: (this.props.yaxislabel || this.props.yaxisdatakey) + (this.props.yunits ? `(${this.props.yunits})` : ''),
+      crossAxis: false,
+      label: (props.yaxislabel || props.yaxisdatakey) + (props.yunits ? `(${props.yunits})` : ''),
       style: {
-        axisLabel: {
-          padding: this.props.yaxislabeldistance
-        },
-        grid: this.styles.grid
+        axisLabel: this.theme.mergeStyle(this.styles.axisLabel, this.styles.yAxisLabel, {
+          padding: props.yaxislabeldistance
+        }),
+        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,
       theme: this.state.theme,
-      tickFormat: t => `${this.abbreviateNumber(t)}`,
+      tickFormat: (d, i, ticks) => {
+        if (getTickValueLabel) {
+          return getTickValueLabel(d, i, (ticks || []).length);
+        }
+        return this.abbreviateNumber(d);
+      },
       dependentAxis: true
     });
   }
@@ -158,7 +195,8 @@ export class BaseChartComponent extends BaseComponent {
 
   // Check whether X/Y Domain was set to Min and is supported for the present chart
   isAxisDomainValid(axis) {
-    if (get(this.props, axis + 'domain') === 'Min' && this.isAxisDomainSupported(this.props.type)) {
+    const props = this.state.props;
+    if (get(props, axis + 'domain') === 'Min' && this.isAxisDomainSupported(props.type)) {
       return true;
     }
     return false;
@@ -208,7 +246,7 @@ export class BaseChartComponent extends BaseComponent {
     }
     const xValues = {};
     /*
-     compute the min x value
+     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
@@ -300,7 +338,7 @@ export class BaseChartComponent extends BaseComponent {
       if (!colorsToUse.length) {
         colorsToUse = ThemeFactory.getColorsObj(themeName);
       }
-      themeToUse = ThemeFactory.getTheme(themeName, this.props.styles, colorsToUse);
+      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;
@@ -311,9 +349,10 @@ export class BaseChartComponent extends BaseComponent {
     });
   }
   prepareLegendData() {
+    const props = this.state.props;
     if (this.state.yAxis) {
       let ldata;
-      if (this.props.type === 'Stack') {
+      if (props.type === 'Stack') {
         const data = orderBy(this.state.data[0], 'y', 'asc');
         ldata = data.map(d => {
           return {
@@ -366,8 +405,9 @@ export class BaseChartComponent extends BaseComponent {
     return value;
   }
   prepareDataItems(dataset) {
-    let xaxis = this.props.xaxisdatakey;
-    let yaxis = this.props.yaxisdatakey;
+    const props = this.state.props;
+    let xaxis = props.xaxisdatakey;
+    let yaxis = props.yaxisdatakey;
     let xaxisDatakeyArr = [];
     let datasets = [];
     if (xaxis && yaxis) {
@@ -384,11 +424,11 @@ export class BaseChartComponent extends BaseComponent {
               x: xVal,
               y: yVal
             };
-            if (this.props.bubblesize) {
-              set(dataObj, 'size', get(o, this.props.bubblesize, 5));
+            if (props.bubblesize) {
+              set(dataObj, 'size', get(o, props.bubblesize, 5));
             }
-            if (this.props.shape) {
-              set(dataObj, 'symbol', shapes[this.props.shape]);
+            if (props.shape) {
+              set(dataObj, 'symbol', shapes[props.shape]);
             }
             return dataObj;
           }));
@@ -396,7 +436,7 @@ export class BaseChartComponent extends BaseComponent {
       });
       // chartTransform
       this.invokeEventCallback('onTransform', [undefined, this.proxy]);
-      if (this.props.type == 'Pie' || this.props.type === 'Donut') {
+      if (props.type == 'Pie' || props.type === 'Donut') {
         // for animation effect
         setTimeout(() => {
           this.updateState({
@@ -408,23 +448,25 @@ export class BaseChartComponent extends BaseComponent {
     }
   }
   renderLoadingIcon() {
+    const props = this.state.props;
     return /*#__PURE__*/React.createElement(WmIcon, {
       styles: this.styles.loadingIcon,
-      iconclass: this.props.loadingicon,
-      caption: this.props.loadingdatamsg
+      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 (!this.props.labeltype || this.props.labeltype === 'percent') {
+      if (!props.labeltype || props.labeltype === 'percent') {
         this.setTotal(this.state.data[0]);
       }
-      if (this.isAxisDomainSupported(this.props.type) && (this.props.ydomain || this.props.xdomain)) {
+      if (this.isAxisDomainSupported(props.type) && (props.ydomain || props.xdomain)) {
         this.setDomainValues();
       }
       this.updateState({
@@ -443,6 +485,7 @@ export class BaseChartComponent extends BaseComponent {
   }
   onPropertyChange(name, $new, $old) {
     super.onPropertyChange(name, $new, $old);
+    const props = this.state.props;
     let units = '';
     switch (name) {
       case 'customcolors':
@@ -457,7 +500,7 @@ export class BaseChartComponent extends BaseComponent {
         });
         break;
       case 'theme':
-        this.applyTheme(this.props);
+        this.applyTheme(props);
         break;
       case 'dataset':
         if (!isArray($new)) {
@@ -470,16 +513,16 @@ export class BaseChartComponent extends BaseComponent {
         $new && this.prepareDataItems($new);
         break;
       case 'xaxislabel':
-        if (this.props.xunits) {
-          units = ' (' + this.props.xunits + ')';
+        if (props.xunits) {
+          units = ' (' + props.xunits + ')';
         }
         this.updateState({
           xLabel: $new + units
         });
         break;
       case 'yaxislabel':
-        if (this.props.yunits) {
-          units = ' (' + this.props.yunits + ')';
+        if (props.yunits) {
+          units = ' (' + props.yunits + ')';
         }
         this.updateState({
           yLabel: $new + units