status-im
/
react-native-gifted-charts
mirror of https://github.com/status-im/react-native-gifted-charts.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12 from Abhinandan-Kushwaha/development 

Development
This commit is contained in:
Abhinandan Kushwaha 2021-08-12 20:03:53 +05:30 committed by GitHub
parent 5b4fe5dd26 bdbc5bacf1
commit 1eb364e5a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 902 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
App.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { BarChart, LineChart, PieChart } from './src';
import {View, Text, StyleSheet} from 'react-native';
import {BarChart, LineChart, PieChart} from './src';
const App = () => {
// const lineData = [
@ -19,73 +19,174 @@ const App = () => {
// ];
const data = [
{ value: 15, label: 'Jan', showVerticalLine: true },
{ value: 40, label: 'Feb', verticalLineColor: 'red', showVerticalLine: true, verticalLineThickness: StyleSheet.hairlineWidth },
{ value: 10, label: 'Mar', showDataPoint: true, dataPointShape: 'rectangular', dataPointHeight: 20, dataPointWidth: 20, },
{ value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true },
{value: 15, label: 'Jan', showVerticalLine: true},
{
value: 40,
label: 'Feb',
verticalLineColor: 'red',
showVerticalLine: true,
verticalLineThickness: StyleSheet.hairlineWidth,
},
{
value: 10,
label: 'Mar',
showDataPoint: true,
dataPointShape: 'rectangular',
dataPointHeight: 20,
dataPointWidth: 20,
},
{value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true},
];
const stackData = [
{
stacks:
[{
value: 10, color: 'red'
},
{
value: 20, color: 'blue', marginBottom: 1
}],
label: 'Jan'
stacks: [
{value: 10, color: 'orange'},
{value: 20, color: '#4ABFF4', marginBottom: 2},
],
label: 'Jan',
},
{
stacks:
[{
value: 14, color: 'red'
},
{
value: 18, color: 'blue', marginBottom: 1
}],
label: 'Feb'
stacks: [
{value: 10, color: '#4ABFF4'},
{value: 11, color: 'orange', marginBottom: 2},
{value: 15, color: '#28B2B3', marginBottom: 2},
],
label: 'Mar',
},
{
stacks:
[{
value: 7, color: 'red'
},
{ value: 11, color: 'green', marginBottom: 1 },
{
value: 10, color: 'blue', marginBottom: 1
}],
label: 'Mar'
}
stacks: [
{value: 14, color: 'orange'},
{value: 18, color: '#4ABFF4', marginBottom: 2},
],
label: 'Feb',
},
{
stacks: [
{value: 7, color: '#4ABFF4'},
{value: 11, color: 'orange', marginBottom: 2},
{value: 10, color: '#28B2B3', marginBottom: 2},
],
label: 'Mar',
},
];
// const barData1 = [
// {value: 250, label: 'M'},
// {value: 500, label: 'T', frontColor: '#177AD5'},
// {value: 745, label: 'W', frontColor: '#177AD5'},
// {value: 320, label: 'T'},
// {value: 600, label: 'F', frontColor: '#177AD5'},
// {value: 256, label: 'S'},
// {value: 300, label: 'S'},
// ];
// const lineData1 = [
// {value: 0},
// {value: 20},
// {value: 18},
// {value: 40},
// {value: 36},
// {value: 60},
// {value: 54},
// {value: 85},
// ];
// const MyComponent = () => {
// return (
// <View style={{backgroundColor: 'yellow'}}>
// <Text>Hello</Text>
// </View>
// );
// };
const barData = [
{value: 230, label: 'Jan', frontColor: '#4ABFF4'},
{value: 180, label: 'Feb', frontColor: '#79C3DB'},
{value: 195, label: 'Mar', frontColor: '#28B2B3'},
{value: 250, label: 'Apr', frontColor: '#4ADDBA'},
{value: 320, label: 'May', frontColor: '#91E3E3'},
];
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View
style={{
// flex: 1,
// backgroundColor: 'pink',
width: 300,
justifyContent: 'center',
alignItems: 'center',
}}>
{/* <LineChart
data={data}
hideDataPoints
areaChart
curved
color='rgb(220,140,140)'
startFillColor='rgb(220,140,140)'
endFillColor='rgba(250,240,240)'
startOpacity={0.9}
endOpacity={0.3}
<View
style={{
marginTop: 200,
paddingVertical: 50,
}}>
{/* <BarChart
data={data}
showGradient
cappedBars
capColor={'rgba(78, 0, 142)'}
capThickness={4}
barWidth={35}
gradientColor={'rgba(200, 100, 244,0.8)'}
frontColor={'rgba(219, 182, 249,0.2)'}
/> */}
<BarChart
width={340}
rotateLabel
barWidth={12}
spacing={40}
noOfSections={4}
barBorderRadius={6}
stackData={stackData}
/>
{/* <BarChart
frontColor={'#177AD5'}
barWidth={22}
data={[{value: 15}, {value: 30}, {value: 26}, {value: 40}]}
/> */}
{/* <LineChart
initialSpacing={0}
data={lineData1}
spacing={30}
hideDataPoints
thickness={5}
hideRules
hideYAxisText
yAxisColor="#0BA5A4"
showVerticalLines
verticalLinesColor="rgba(14,164,164,0.5)"
xAxisColor="#0BA5A4"
color="#0BA5A4"
/> */}
{/* <View style={{marginLeft: 20}}>
<BarChart
barWidth={22}
// spacing={16}
// height={260}
noOfSections={3}
barBorderRadius={4}
frontColor="lightgray"
data={barData1}
yAxisThickness={0}
xAxisThickness={0}
// horizontal
/>
</View> */}
{/* <View style={{marginLeft: 40}}>
<LineChart
data={data}
hideDataPoints
areaChart
curved
color="rgb(220,140,140)"
startFillColor="rgb(220,140,140)"
endFillColor="rgba(250,240,240)"
startOpacity={0.9}
endOpacity={0.3}
noOfSections={3}
// dataPointsShape='rectangular'
// dataPointsHeight={12}
// dataPointsWidth={12}
/> */}
/>
</View> */}
{/* <BarChart
{/* <BarChart
showGradient
// isThreeD
// isAnimated
@ -105,6 +206,14 @@ const App = () => {
data={data}
/> */}
{/* <View
style={{
// flex: 1,
// backgroundColor: 'pink',
width: 300,
justifyContent: 'center',
alignItems: 'center',
}}>
<BarChart
width={300}
rotateLabel
@ -117,10 +226,9 @@ const App = () => {
barBorderRadius={20}
stackData={stackData}
/>
</View> */}
{/* <Text>Hello</Text> */}
</View>
{/* <Text>Hello</Text> */}
{/* <LineChart data={data} /> */}
{/* <PieChart
showText

59
docs/BarChart/BarChartProps.md
View File

@ -45,6 +45,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
| disablePress | Boolean | Prop to disable the press action, defaults to false |
| frontColor | ColorValue | Color of the bar |
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D |
| sideWidth | number | Width of the side view of the bar, only for 3 D |
| topColor | ColorValue | Color of the top view of the bar, only for 3 D |
| showGradient | Boolean | Prop to enable linear gradient for the bar color, defaults to false |
| gradientColor | ColorValue | Along with frontColor, this prop constitutes the 2 colors for gradient |
@ -64,34 +65,35 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
### Axes and rules related props
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | -------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |
---
@ -103,6 +105,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
| isThreeD | Boolean | Prop to render 3 dimensional bars | false |
| frontColor | ColorValue | Color of the bar | black for 2D, red for 3D |
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D | red |
| sideWidth | number | Width of the side view of the bar, only for 3 D | red |
| topColor | ColorValue | Color of the top view of the bar, only for 3 D | red |
| showGradient | Boolean | Prop to enable linear gradient for the bar color | false |
| gradientColor | ColorValue | Along with frontColor, gradientColor constitutes the 2 colors for gradient | white |

57
docs/LineChart/LineChartProps.md
View File

@ -65,34 +65,35 @@ If you are adding showDataPoint to an item, you must set hideDataPoints prop to
### Axes and rules related props
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | -------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |
| Prop | Type | Description | Default value |
| ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 |
| hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| rulesThickness | number | Thickness of the horizontal rules | 1 |
| hideRules | Boolean | To hide the horizontal rules | false |
| showVerticalLines | Boolean | To show vertical lines | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticallinesThickness | number | Thickness of the vertical lines | 1 |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | false |
---

1
docs/PieChart/PieChartProps.md
View File

@ -18,6 +18,7 @@
| textBackgroundColor | ColorValue | Background color for the label texts | white |
| textBackgroundRadius | number | Radius for the background of the text labels | textSize |
| showValuesAsLabels | Boolean | When set to true, the values of the Pie sections are displayed as labels | false |
| centerLabelComponent | Function | Component to be rendered at the center of the Pie chart | \_ |
### Item description

61
examples/BarChart/BarThreeD.js Normal file
View File

@ -0,0 +1,61 @@
import React from 'react';
import {View} from 'react-native';
import {BarChart} from '../../src/BarChart';
const BarWithGradient = () => {
const barData = [
{
value: 230,
label: 'Jan',
frontColor: '#4ABFF4',
sideColor: '#23A7F3',
topColor: '#92e6f6',
},
{
value: 180,
label: 'Feb',
frontColor: '#79C3DB',
sideColor: '#68BCD7',
topColor: '#9FD4E5',
},
{
value: 195,
label: 'Mar',
frontColor: '#28B2B3',
sideColor: '#0FAAAB',
topColor: '#66C9C9',
},
{
value: 250,
label: 'Apr',
frontColor: '#4ADDBA',
sideColor: '#36D9B2',
topColor: '#7DE7CE',
},
{
value: 320,
label: 'May',
frontColor: '#91E3E3',
sideColor: '#85E0E0',
topColor: '#B0EAEB',
},
];
return (
<View>
<BarChart
showFractionalValue
showYAxisIndices
hideRules
noOfSections={4}
maxValue={400}
data={barData}
barWidth={40}
sideWidth={15}
isThreeD
side="right"
/>
</View>
);
};
export default BarWithGradient;

32
examples/BarChart/BarWithGradient.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import {View} from 'react-native';
import {BarChart} from '../../src/BarChart';
const BarWithGradient = () => {
const barData = [
{value: 0.7, label: '1'},
{value: 0.8, label: '2'},
{value: 0.6, label: '3'},
{value: 0.4, label: '4'},
{value: 0.9, label: '5'},
{value: 0.7, label: '6'},
];
return (
<View>
<BarChart
showFractionalValues
showYAxisIndices
showXAxisIndices
hideRules
noOfSections={5}
data={barData}
showGradient
frontColor={'#1B6BB0'}
gradientColor={'#FFEEFE'}
backgroundColor={'#FECF9E'}
/>
</View>
);
};
export default BarWithGradient;

28
examples/BarChart/CappedBars.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import {View} from 'react-native';
import {BarChart} from '../../src/BarChart';
const CappedBars = () => {
const data = [
{value: 15, label: 'Jan'},
{value: 40, label: 'Feb'},
{value: 10, label: 'Mar'},
{value: 30, label: 'Apr'},
];
return (
<View>
<BarChart
data={data}
barWidth={35}
cappedBars
capColor={'rgba(78, 0, 142)'}
capThickness={4}
showGradient
gradientColor={'rgba(200, 100, 244,0.8)'}
frontColor={'rgba(219, 182, 249,0.2)'}
/>
</View>
);
};
export default CappedBars;

53
examples/BarChart/RoundStackBar.js Normal file
View File

@ -0,0 +1,53 @@
import {BarChart} from '../../src/BarChart';
import React from 'react';
import {View} from 'react-native';
const RoundStackBar = () => {
const stackData = [
{
stacks: [
{value: 10, color: 'orange'},
{value: 20, color: '#4ABFF4', marginBottom: 2},
],
label: 'Jan',
},
{
stacks: [
{value: 10, color: '#4ABFF4'},
{value: 11, color: 'orange', marginBottom: 2},
{value: 15, color: '#28B2B3', marginBottom: 2},
],
label: 'Mar',
},
{
stacks: [
{value: 14, color: 'orange'},
{value: 18, color: '#4ABFF4', marginBottom: 2},
],
label: 'Feb',
},
{
stacks: [
{value: 7, color: '#4ABFF4'},
{value: 11, color: 'orange', marginBottom: 2},
{value: 10, color: '#28B2B3', marginBottom: 2},
],
label: 'Mar',
},
];
return (
<View>
<BarChart
width={340}
rotateLabel
barWidth={12}
spacing={40}
noOfSections={4}
barBorderRadius={20}
stackData={stackData}
/>
</View>
);
};
export default RoundStackBar;

27
examples/BarChart/SimpleBarAnimated.js Normal file
View File

@ -0,0 +1,27 @@
import {BarChart} from '../../src/BarChart';
import React from 'react';
import {View} from 'react-native';
const SimpleBarAnimation = () => {
const barData = [
{value: 230, label: 'Jan', frontColor: '#4ABFF4'},
{value: 180, label: 'Feb', frontColor: '#79C3DB'},
{value: 195, label: 'Mar', frontColor: '#28B2B3'},
{value: 250, label: 'Apr', frontColor: '#4ADDBA'},
{value: 320, label: 'May', frontColor: '#91E3E3'},
];
return (
<View>
<BarChart
showFractionalValue
showYAxisIndices
noOfSections={4}
maxValue={400}
data={barData}
isAnimated
/>
</View>
);
};
export default SimpleBarAnimation;

2
examples/BarChart/SimpleBlueBars.js
View File

@ -16,8 +16,6 @@ const SimpleBlueBars = () => {
<View>
<BarChart
barWidth={22}
spacing={16}
height={260}
noOfSections={3}
barBorderRadius={4}
frontColor="lightgray"

36
examples/LineChart/SimpleBlueLine.js Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import {View} from 'react-native';
import {LineChart} from '../../src/LineChart';
const SimpleBlueLine = () => {
const lineData = [
{value: 0},
{value: 20},
{value: 18},
{value: 40},
{value: 36},
{value: 60},
{value: 54},
{value: 85},
];
return (
<View>
<LineChart
initialSpacing={0}
data={lineData}
spacing={30}
hideDataPoints
thickness={5}
hideRules
hideYAxisText
yAxisColor="#0BA5A4"
showVerticalLines
verticalLinesColor="rgba(14,164,164,0.5)"
xAxisColor="#0BA5A4"
color="#0BA5A4"
/>
</View>
);
};
export default SimpleBlueLine;

27
examples/PieChart/SimplePie.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import {View} from 'react-native';
import {PieChart} from '../../src/PieChart';
const SimplePie = () => {
const pieData = [
{value: 54, color: '#177AD5', text: '54%'},
{value: 30, color: '#79D2DE', text: '30%'},
{value: 26, color: '#ED6665', text: '26%'},
];
return (
<View>
<PieChart
donut
showText
textColor="black"
innerRadius={70}
showTextBackground
textBackgroundColor="white"
textBackgroundRadius={22}
data={pieData}
/>
</View>
);
};
export default SimplePie;

120
src/BarChart/RenderBars.tsx
View File

@ -1,10 +1,10 @@
import React, { Component } from 'react';
import { View, TouchableOpacity, Animated, Text, ColorValue } from 'react-native';
import React, {Component} from 'react';
import {View, TouchableOpacity, Animated, Text, ColorValue} from 'react-native';
import ThreeDBar from '../Components/ThreeDBar';
import AnimatedBar from '../Components/AnimatedBar';
import LinearGradient from 'react-native-linear-gradient';
import Animated2DWithGradient from './Animated2DWithGradient';
import { Style } from 'util';
import {Style} from 'util';
type Props = {
style?: any;
@ -29,6 +29,7 @@ type Props = {
spacing?: number;
data?: any;
barWidth?: number;
sideWidth?: number;
isThreeD?: Boolean;
isAnimated?: Boolean;
@ -54,7 +55,7 @@ type Props = {
xAxisIndicesColor: ColorValue;
horizontal: Boolean;
intactTopLabel: Boolean;
barBorderRadius?: number
barBorderRadius?: number;
};
type itemType = {
value?: number;
@ -66,6 +67,7 @@ type itemType = {
gradientColor?: any;
label?: String;
barWidth?: number;
sideWidth?: number;
labelTextStyle?: any;
topLabelComponent?: Function;
topLabelContainerStyle?: any;
@ -74,7 +76,7 @@ type itemType = {
capColor?: ColorValue;
capRadius?: number;
labelComponent?: Function;
barBorderRadius?: number
barBorderRadius?: number;
};
const RenderBars = (props: Props) => {
const {
@ -106,21 +108,21 @@ const RenderBars = (props: Props) => {
},
rotateLabel
? props.horizontal
? { transform: [{ rotate: '330deg' }] }
: { transform: [{ rotate: '60deg' }] }
? {transform: [{rotate: '330deg'}]}
: {transform: [{rotate: '60deg'}]}
: props.horizontal
? { transform: [{ rotate: '-90deg' }] }
: {},
? {transform: [{rotate: '-90deg'}]}
: {},
]}>
{item.labelComponent ? (
item.labelComponent()
) : (
<Text
style={[labelTextStyle, { textAlign: 'center' }]}
numberOfLines={1}>
{label || ''}
</Text>
)}
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
numberOfLines={1}>
{label || ''}
</Text>
)}
</View>
);
};
@ -137,21 +139,21 @@ const RenderBars = (props: Props) => {
},
rotateLabel
? props.horizontal
? { transform: [{ rotate: '330deg' }] }
: { transform: [{ rotate: '60deg' }] }
? {transform: [{rotate: '330deg'}]}
: {transform: [{rotate: '60deg'}]}
: props.horizontal
? { transform: [{ rotate: '-90deg' }] }
: {},
? {transform: [{rotate: '-90deg'}]}
: {},
]}>
{item.labelComponent ? (
item.labelComponent()
) : (
<Text
style={[labelTextStyle, { textAlign: 'center' }]}
numberOfLines={1}>
{label || ''}
</Text>
)}
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
numberOfLines={1}>
{label || ''}
</Text>
)}
</Animated.View>
);
};
@ -166,7 +168,7 @@ const RenderBars = (props: Props) => {
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: props.barBorderRadius || item.barBorderRadius || 0
borderRadius: props.barBorderRadius || item.barBorderRadius || 0,
},
props.roundedBottom && {
borderBottomLeftRadius:
@ -189,8 +191,8 @@ const RenderBars = (props: Props) => {
borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2,
},
]}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
start={{x: 0, y: 0}}
end={{x: 0, y: 1}}
colors={[
item.gradientColor || props.gradientColor || 'white',
item.frontColor || props.frontColor || 'black',
@ -232,7 +234,7 @@ const RenderBars = (props: Props) => {
alignItems: 'center',
},
props.horizontal &&
!props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
!props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,
]}>
{item.topLabelComponent()}
@ -253,7 +255,7 @@ const RenderBars = (props: Props) => {
width: '100%',
height: '100%',
backgroundColor: item.frontColor || props.frontColor || 'black',
borderRadius: props.barBorderRadius || item.barBorderRadius || 0
borderRadius: props.barBorderRadius || item.barBorderRadius || 0,
},
props.roundedBottom && {
borderBottomLeftRadius:
@ -313,7 +315,7 @@ const RenderBars = (props: Props) => {
alignItems: 'center',
},
props.horizontal &&
!props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
!props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,
]}>
{item.topLabelComponent()}
@ -337,7 +339,7 @@ const RenderBars = (props: Props) => {
},
// !isThreeD && !item.showGradient && !props.showGradient &&
// { backgroundColor: item.frontColor || props.frontColor || 'black' },
side !== 'right' && { zIndex: data.length - index },
side !== 'right' && {zIndex: data.length - index},
]}>
{props.showVerticalLines && (
<View
@ -370,6 +372,11 @@ const RenderBars = (props: Props) => {
<AnimatedBar
topLabelContainerStyle={item.topLabelContainerStyle}
width={item.barWidth || props.barWidth || 30}
sideWidth={
item.sideWidth ||
props.sideWidth ||
(item.barWidth || props.barWidth || 30) / 2
}
side={side || 'left'}
frontColor={item.frontColor || props.frontColor || ''}
sideColor={item.sideColor || props.sideColor || ''}
@ -384,24 +391,29 @@ const RenderBars = (props: Props) => {
horizontal={props.horizontal}
/>
) : (
<ThreeDBar
style={{}}
color={''}
topLabelContainerStyle={item.topLabelContainerStyle}
width={item.barWidth || props.barWidth || 30}
side={side || 'left'}
frontColor={item.frontColor || props.frontColor || ''}
sideColor={item.sideColor || props.sideColor || ''}
topColor={item.topColor || props.topColor || ''}
showGradient={item.showGradient || props.showGradient || false}
gradientColor={item.gradientColor || props.gradientColor}
topLabelComponent={item.topLabelComponent || Function}
opacity={opacity || 1}
horizontal={props.horizontal}
intactTopLabel={props.intactTopLabel}
height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
/>
)
<ThreeDBar
style={{}}
color={''}
topLabelContainerStyle={item.topLabelContainerStyle}
width={item.barWidth || props.barWidth || 30}
sideWidth={
item.sideWidth ||
props.sideWidth ||
(item.barWidth || props.barWidth || 30) / 2
}
side={side || 'left'}
frontColor={item.frontColor || props.frontColor || ''}
sideColor={item.sideColor || props.sideColor || ''}
topColor={item.topColor || props.topColor || ''}
showGradient={item.showGradient || props.showGradient || false}
gradientColor={item.gradientColor || props.gradientColor}
topLabelComponent={item.topLabelComponent || Function}
opacity={opacity || 1}
horizontal={props.horizontal}
intactTopLabel={props.intactTopLabel}
height={(item.value * (containerHeight || 200)) / (maxValue || 200)}
/>
)
) : item.showGradient || props.showGradient ? (
isAnimated ? (
<Animated2DWithGradient
@ -423,8 +435,8 @@ const RenderBars = (props: Props) => {
barBorderRadius={props.barBorderRadius || 0}
/>
) : (
static2DWithGradient(item)
)
static2DWithGradient(item)
)
) : isAnimated ? (
<Animated2DWithGradient
barWidth={0}
@ -446,8 +458,8 @@ const RenderBars = (props: Props) => {
barBorderRadius={props.barBorderRadius || 0}
/>
) : (
static2DSimple(item)
)}
static2DSimple(item)
)}
{isAnimated
? renderAnimatedLabel(item.label || '', item.labelTextStyle)
: renderLabel(item.label || '', item.labelTextStyle)}

404
src/BarChart/RenderStackBars.tsx
View File

@ -1,217 +1,213 @@
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, ColorValue } from 'react-native';
import { Style } from 'util';
import React, {Component} from 'react';
import {View, TouchableOpacity, Text, ColorValue} from 'react-native';
import {Style} from 'util';
type Props = {
style?: any;
width?: number;
height?: number;
color?: ColorValue;
topLabelComponent?: Component;
topLabelContainerStyle?: Style;
opacity?: number;
labelTextStyle?: any;
disablePress?: boolean;
style?: any;
width?: number;
height?: number;
color?: ColorValue;
topLabelComponent?: Component;
topLabelContainerStyle?: Style;
opacity?: number;
labelTextStyle?: any;
disablePress?: boolean;
item: itemType;
index: number;
containerHeight?: number;
maxValue: number;
spacing?: number;
data?: any;
barWidth?: number;
item: itemType;
index: number;
containerHeight?: number;
maxValue: number;
spacing?: number;
data?: any;
barWidth?: number;
rotateLabel?: Boolean;
showVerticalLines: Boolean;
verticalLinesThickness: number;
verticalLinesColor: ColorValue;
verticalLinesZIndex: number;
showXAxisIndices: Boolean;
xAxisIndicesHeight: number;
xAxisIndicesWidth: number;
xAxisIndicesColor: ColorValue;
horizontal: Boolean;
intactTopLabel: Boolean;
barBorderRadius?: number
rotateLabel?: Boolean;
showVerticalLines: Boolean;
verticalLinesThickness: number;
verticalLinesColor: ColorValue;
verticalLinesZIndex: number;
showXAxisIndices: Boolean;
xAxisIndicesHeight: number;
xAxisIndicesWidth: number;
xAxisIndicesColor: ColorValue;
horizontal: Boolean;
intactTopLabel: Boolean;
barBorderRadius?: number;
};
type itemType = {
value?: number;
onPress?: any;
label?: String;
barWidth?: number;
labelTextStyle?: any;
topLabelComponent?: Function;
topLabelContainerStyle?: any;
disablePress?: any;
capThickness?: number;
capColor?: ColorValue;
capRadius?: number;
labelComponent?: Function;
borderRadius?: number;
stacks?: Array<any>
value?: number;
onPress?: any;
label?: String;
barWidth?: number;
labelTextStyle?: any;
topLabelComponent?: Function;
topLabelContainerStyle?: any;
disablePress?: any;
capThickness?: number;
capColor?: ColorValue;
capRadius?: number;
labelComponent?: Function;
borderRadius?: number;
stacks?: Array<any>;
};
const RenderStackBars = (props: Props) => {
const {
item,
containerHeight,
maxValue,
spacing,
rotateLabel,
} = props;
const disablePress = props.disablePress || false;
const renderLabel = (label: String, labelTextStyle: any) => {
return (
<View
style={[
{
width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
left: -6,
position: 'absolute',
bottom: rotateLabel ? -40 : -25
},
rotateLabel
? props.horizontal
? { transform: [{ rotate: '330deg' }] }
: { transform: [{ rotate: '60deg' }] }
: props.horizontal
? { transform: [{ rotate: '-90deg' }] }
: {},
]}>
{item.labelComponent ? (
item.labelComponent()
) : (
<Text
style={[labelTextStyle]}
numberOfLines={1}>
{label || ''}
</Text>
)}
</View>
);
};
const getPosition = (index: number) => {
let position = 0;
for (let i = 0; i < index; i++) {
position += (props.item.stacks[i].value * (containerHeight || 200)) / (maxValue || 200)
}
return position;
}
const getTotalHeight = () => {
return props.item.stacks.reduce((acc, stack) => acc + stack.value, 0)
}
const static2DSimple = (item: itemType) => {
// console.log('comes to static2DSimple', item);
return (
<>
<View
style={[
{
position: 'absolute',
width: item.stacks[0].barWidth || props.barWidth || 30,
height: '100%',
},
]}>
{
item.stacks.map((stackItem, index) => {
return (
<TouchableOpacity
onPress={stackItem.onPress}
disabled={disablePress}
style={[
{
position: 'absolute',
bottom: getPosition(index) + (stackItem.marginBottom || 0),
width: '100%',
height: (stackItem.value * (containerHeight || 200)) / (maxValue || 200) - (stackItem.marginBottom || 0),
backgroundColor: stackItem.color || 'black',
borderRadius: stackItem.borderRadius || props.barBorderRadius || 0,
},
(!props.barBorderRadius && !stackItem.borderRadius) && {
borderTopLeftRadius: stackItem.borderTopLeftRadius || 0,
borderTopRightRadius: stackItem.borderTopRightRadius || 0,
borderBottomLeftRadius: stackItem.borderBottomLeftRadius || 0,
borderBottomRightRadius: stackItem.borderBottomRightRadius || 0,
}
]} />
)
})
}
</View>
{item.topLabelComponent && (
<View
style={[
{
position: 'absolute',
top: (item.barWidth || props.barWidth || 30) * -1,
height: item.barWidth || props.barWidth || 30,
width: item.barWidth || props.barWidth || 30,
justifyContent:
props.horizontal && !props.intactTopLabel
? 'center'
: 'flex-end',
alignItems: 'center',
},
props.horizontal &&
!props.intactTopLabel && { transform: [{ rotate: '270deg' }] },
item.topLabelContainerStyle,
]}>
{item.topLabelComponent()}
</View>
)}
</>
);
};
const {item, containerHeight, maxValue, spacing, rotateLabel} = props;
const disablePress = props.disablePress || false;
const renderLabel = (label: String, labelTextStyle: any) => {
return (
<View
style={[
{
// overflow: 'visible',
marginBottom: 60,
width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
height: getTotalHeight(),
marginRight: spacing,
}
]}
>
{props.showVerticalLines && (
<View
style={{
zIndex: props.verticalLinesZIndex,
position: 'absolute',
height: (containerHeight || 200) + 15,
width: props.verticalLinesThickness,
bottom: 0,
left: (item.barWidth || props.barWidth || 30) / 2,
backgroundColor: props.verticalLinesColor,
}}
/>
)}
{props.showXAxisIndices && (
<View
style={{
zIndex: 2,
position: 'absolute',
height: props.xAxisIndicesHeight,
width: props.xAxisIndicesWidth,
bottom: 0,
left: (item.barWidth || props.barWidth || 30) / 2,
backgroundColor: props.xAxisIndicesColor,
}}
/>
)}
{
static2DSimple(item)
}
{renderLabel(item.label || '', item.labelTextStyle)}
</View>
<View
style={[
{
width:
(item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
left: -6,
position: 'absolute',
bottom: rotateLabel ? -40 : -25,
},
rotateLabel
? props.horizontal
? {transform: [{rotate: '330deg'}]}
: {transform: [{rotate: '60deg'}]}
: props.horizontal
? {transform: [{rotate: '-90deg'}]}
: {},
]}>
{item.labelComponent ? (
item.labelComponent()
) : (
<Text style={[labelTextStyle]} numberOfLines={1}>
{label || ''}
</Text>
)}
</View>
);
};
const getPosition = (index: number) => {
let position = 0;
for (let i = 0; i < index; i++) {
position +=
(props.item.stacks[i].value * (containerHeight || 200)) /
(maxValue || 200);
}
return position;
};
const getTotalHeight = () => {
return props.item.stacks.reduce((acc, stack) => acc + stack.value, 0);
};
const static2DSimple = (item: itemType) => {
// console.log('comes to static2DSimple', item);
return (
<>
<View
style={[
{
position: 'absolute',
width: item.stacks[0].barWidth || props.barWidth || 30,
height: '100%',
},
]}>
{item.stacks.map((stackItem, index) => {
return (
<TouchableOpacity
key={index}
onPress={stackItem.onPress}
disabled={disablePress}
style={[
{
position: 'absolute',
bottom: getPosition(index) + (stackItem.marginBottom || 0),
width: '100%',
height:
(stackItem.value * (containerHeight || 200)) /
(maxValue || 200) -
(stackItem.marginBottom || 0),
backgroundColor: stackItem.color || 'black',
borderRadius:
stackItem.borderRadius || props.barBorderRadius || 0,
},
!props.barBorderRadius &&
!stackItem.borderRadius && {
borderTopLeftRadius: stackItem.borderTopLeftRadius || 0,
borderTopRightRadius: stackItem.borderTopRightRadius || 0,
borderBottomLeftRadius:
stackItem.borderBottomLeftRadius || 0,
borderBottomRightRadius:
stackItem.borderBottomRightRadius || 0,
},
]}
/>
);
})}
</View>
{item.topLabelComponent && (
<View
style={[
{
position: 'absolute',
top: (item.barWidth || props.barWidth || 30) * -1,
height: item.barWidth || props.barWidth || 30,
width: item.barWidth || props.barWidth || 30,
justifyContent:
props.horizontal && !props.intactTopLabel
? 'center'
: 'flex-end',
alignItems: 'center',
},
props.horizontal &&
!props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,
]}>
{item.topLabelComponent()}
</View>
)}
</>
);
};
return (
<View
style={[
{
// overflow: 'visible',
marginBottom: 60,
width: item.stacks[0].barWidth || props.barWidth || 30,
height: getTotalHeight(),
marginRight: spacing,
},
]}>
{props.showVerticalLines && (
<View
style={{
zIndex: props.verticalLinesZIndex,
position: 'absolute',
height: (containerHeight || 200) + 15,
width: props.verticalLinesThickness,
bottom: 0,
left: (item.barWidth || props.barWidth || 30) / 2,
backgroundColor: props.verticalLinesColor,
}}
/>
)}
{props.showXAxisIndices && (
<View
style={{
zIndex: 2,
position: 'absolute',
height: props.xAxisIndicesHeight,
width: props.xAxisIndicesWidth,
bottom: 0,
left: (item.barWidth || props.barWidth || 30) / 2,
backgroundColor: props.xAxisIndicesColor,
}}
/>
)}
{static2DSimple(item)}
{renderLabel(item.label || '', item.labelTextStyle)}
</View>
);
};
export default RenderStackBars;

33
src/BarChart/index.tsx
View File

@ -30,6 +30,7 @@ type PropTypes = {
hideYAxisText?: Boolean;
initialSpacing?: number;
barWidth?: number;
sideWidth?: number;
cappedBars?: Boolean;
capThickness?: number;
@ -55,6 +56,7 @@ type PropTypes = {
yAxisIndicesColor?: ColorValue;
showFractionalValues?: Boolean;
roundToDigits?: number;
backgroundColor?: ColorValue;
disableScroll?: Boolean;
@ -92,6 +94,7 @@ type itemType = {
gradientColor?: any;
label?: String;
barWidth?: number;
sideWidth?: number;
labelTextStyle?: any;
topLabelComponent?: Function;
topLabelContainerStyle?: any;
@ -111,7 +114,7 @@ export const BarChart = (props: PropTypes) => {
let maxItem = 0;
if (props.stackData) {
props.stackData.forEach(stackItem => {
console.log('stackItem', stackItem);
// console.log('stackItem', stackItem);
let stackSum = stackItem.stacks.reduce(
(acc, stack) => acc + stack.value,
0,
@ -122,6 +125,7 @@ export const BarChart = (props: PropTypes) => {
}
totalWidth +=
(stackItem.stacks[0].barWidth || props.barWidth || 30) + spacing;
// console.log('totalWidth for stack===', totalWidth);
});
} else {
data.forEach((item: itemType) => {
@ -129,9 +133,17 @@ export const BarChart = (props: PropTypes) => {
maxItem = item.value;
}
totalWidth += (item.barWidth || props.barWidth || 30) + spacing;
// console.log('totalWidth for bar===', totalWidth);
});
}
maxItem = maxItem + (10 - (maxItem % 10));
if (props.showFractionalValues || props.roundToDigits) {
maxItem *= 10 * (props.roundToDigits || 1);
maxItem = maxItem + (10 - (maxItem % 10));
maxItem /= 10 * (props.roundToDigits || 1);
maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
} else {
maxItem = maxItem + (10 - (maxItem % 10));
}
const maxValue = props.maxValue || maxItem;
@ -193,7 +205,11 @@ export const BarChart = (props: PropTypes) => {
horizSections.pop();
for (let i = 0; i <= noOfSections; i++) {
horizSections.push({value: maxValue - stepValue * i});
let value = maxValue - stepValue * i;
if (props.showFractionalValues || props.roundToDigits) {
value = parseFloat(value.toFixed(props.roundToDigits || 1));
}
horizSections.push({value});
}
const heightValue = new Animated.Value(0);
@ -271,7 +287,11 @@ export const BarChart = (props: PropTypes) => {
},
]}>
{showFractionalValues
? sectionItems.value || ''
? sectionItems.value
? sectionItems.value
: hideOrigin
? ''
: '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: hideOrigin
@ -365,8 +385,8 @@ export const BarChart = (props: PropTypes) => {
data={props.stackData || data}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
console.log('index--->', index);
console.log('itemhere--->', item);
// console.log('index--->', index);
// console.log('itemhere--->', item);
if (props.stackData) {
return (
<RenderStackBars
@ -403,6 +423,7 @@ export const BarChart = (props: PropTypes) => {
side={side}
data={data}
barWidth={props.barWidth}
sideWidth={props.sideWidth}
opacity={opacity}
isThreeD={isThreeD}
isAnimated={isAnimated}

68
src/Components/AnimatedBar/index.tsx
View File

@ -18,6 +18,7 @@ type trianglePropTypes = {
type animatedBarPropTypes = {
animationDuration: number;
width: number;
sideWidth?: number;
height: number;
showGradient: Boolean;
gradientColor: any;
@ -96,6 +97,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
};
const width = props.width;
const sideWidth = props.sideWidth;
const showGradient = props.showGradient || false;
const gradientColor = props.gradientColor || 'white';
@ -118,55 +120,36 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
{opacity: opacity, position: 'absolute', bottom: 0},
props.side === 'right' && {transform: [{rotateY: '180deg'}]},
]}>
{props.height ? (
<View style={{marginTop: width / -2}}>
<TriangleCorner
color={sideColor}
width={width}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
<View
style={{
width: width / 2,
height: height - width / 2, //animatedSideHeight
backgroundColor: sideColor,
opacity: opacity,
}}
/>
<TriangleCorner
color={sideColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
) : null}
{/******************* Top View *****************/}
{props.height ? (
<>
<View style={{position: 'absolute', top: width / -2}}>
<View style={{position: 'absolute', top: sideWidth / -2}}>
<TriangleCorner
color={topColor}
width={width}
width={sideWidth}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
<View style={{position: 'absolute', top: width / -2}}>
<View style={{position: 'absolute', top: sideWidth / -2}}>
<View
style={{
width: width / 2,
height: width / 2,
left: width / 2,
width: width,
height: (3 * width) / 4,
// left: width / 2,
backgroundColor: topColor,
opacity: opacity,
}}
/>
</View>
<View
style={{position: 'absolute', top: width / -2, left: width}}>
style={{
position: 'absolute',
top: sideWidth / -2,
left: width,
}}>
<TriangleCorner
color={topColor}
width={width}
width={sideWidth}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
</View>
@ -175,6 +158,29 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
{/*******************************************************************/}
{props.height ? (
<View style={{marginTop: sideWidth / -2}}>
<TriangleCorner
color={sideColor}
width={sideWidth}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
<View
style={{
width: sideWidth / 2,
height: height - sideWidth / 2, //animatedSideHeight
backgroundColor: sideColor,
opacity: opacity,
}}
/>
<TriangleCorner
color={sideColor}
width={sideWidth}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
) : null}
<View
style={{
width: width,

79
src/Components/ThreeDBar/index.tsx
View File

@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React from 'react';
import {View, StyleSheet, ColorValue} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {styles} from './styles';
@ -6,6 +6,7 @@ import {styles} from './styles';
type PropTypes = {
style: any;
width: number;
sideWidth: number;
height: number;
color: ColorValue;
showGradient: Boolean;
@ -55,8 +56,9 @@ const aStyles = StyleSheet.create({
});
const ThreeDBar = (props: PropTypes) => {
const width = props.width || 40;
const height = props.height || 200;
const width = props.width;
const sideWidth = props.sideWidth;
const height = props.height;
const showGradient = props.showGradient || false;
const gradientColor = props.gradientColor || 'white';
@ -77,57 +79,58 @@ const ThreeDBar = (props: PropTypes) => {
styles.row,
props.side === 'right' && {transform: [{rotateY: '180deg'}]},
]}>
<View style={{marginTop: width / -2}}>
{/******************* Top View *****************/}
<View style={{position: 'absolute', top: sideWidth / -2}}>
<TriangleCorner
color={topColor}
width={sideWidth}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
<View style={{position: 'absolute', top: sideWidth / -2}}>
<View
style={{
width: width,
height: (3 * width) / 4,
// left: width / -8,
backgroundColor: topColor,
opacity: opacity,
}}
/>
</View>
<View
style={{position: 'absolute', top: sideWidth / -2, left: width}}>
<TriangleCorner
color={topColor}
width={sideWidth}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
</View>
{/*******************************************************************/}
<View style={{marginTop: sideWidth / -2}}>
<TriangleCorner
color={sideColor}
width={width}
width={sideWidth}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
<View
style={{
width: width / 2,
height: height - width / 2,
width: sideWidth / 2,
height: height - sideWidth / 2,
backgroundColor: sideColor,
opacity: opacity,
}}
/>
<TriangleCorner
color={sideColor}
width={width}
width={sideWidth}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
{/******************* Top View *****************/}
<View style={{position: 'absolute', top: width / -2}}>
<TriangleCorner
color={topColor}
width={width}
style={{transform: [{rotate: '90deg'}], opacity: opacity}}
/>
</View>
<View style={{position: 'absolute', top: width / -2}}>
<View
style={{
width: width / 2,
height: (3 * width) / 4,
left: width / 2,
backgroundColor: topColor,
opacity: opacity,
}}
/>
</View>
<View style={{position: 'absolute', top: width / -2, left: width}}>
<TriangleCorner
color={topColor}
width={width}
style={{transform: [{rotate: '-90deg'}], opacity: opacity}}
/>
</View>
{/*******************************************************************/}
<View
style={{
width: width,

27
src/LineChart/index.tsx
View File

@ -69,6 +69,7 @@ type propTypes = {
yAxisColor?: ColorValue;
yAxisTextStyle?: any;
showFractionalValues?: Boolean;
roundToDigits?: number;
yAxisLabelWidth?: number;
hideYAxisText?: Boolean;
@ -163,7 +164,14 @@ export const LineChart = (props: propTypes) => {
}
totalWidth += spacing;
});
maxItem = maxItem + (10 - (maxItem % 10));
if (props.showFractionalValues || props.roundToDigits) {
maxItem *= 10 * (props.roundToDigits || 1);
maxItem = maxItem + (10 - (maxItem % 10));
maxItem /= 10 * (props.roundToDigits || 1);
maxItem = parseFloat(maxItem.toFixed(props.roundToDigits || 1));
} else {
maxItem = maxItem + (10 - (maxItem % 10));
}
const maxValue = props.maxValue || maxItem;
@ -273,7 +281,11 @@ export const LineChart = (props: propTypes) => {
// console.log('data', data);
horizSections.pop();
for (let i = 0; i <= noOfSections; i++) {
horizSections.push({value: maxValue - stepValue * i});
let value = maxValue - stepValue * i;
if (props.showFractionalValues || props.roundToDigits) {
value = parseFloat(value.toFixed(props.roundToDigits || 1));
}
horizSections.push({value});
}
useEffect(() => {
@ -540,7 +552,6 @@ export const LineChart = (props: propTypes) => {
});
const decreaseWidth = () => {
// console.log('i m called, totalWidth is', totalWidth)
widthValue.setValue(0);
Animated.timing(widthValue, {
toValue: 1,
@ -589,7 +600,7 @@ export const LineChart = (props: propTypes) => {
{props.hideAxesAndRules !== true &&
horizSections.map((sectionItems, index) => {
return (
<View key={index} style={styles.horizBar}>
<View key={index} style={[styles.horizBar, {width: totalWidth}]}>
<View
style={[
styles.leftLabel,
@ -610,7 +621,11 @@ export const LineChart = (props: propTypes) => {
},
]}>
{showFractionalValues
? sectionItems.value || ''
? sectionItems.value
? sectionItems.value
: hideOrigin
? ''
: '0'
: sectionItems.value
? sectionItems.value.toString().split('.')[0]
: hideOrigin
@ -633,7 +648,7 @@ export const LineChart = (props: propTypes) => {
{index === noOfSections ? (
<View
style={[
styles.line,
styles.lastLine,
{height: xAxisThickness, backgroundColor: xAxisColor},
]}
/>

1
src/LineChart/styles.tsx
View File

@ -8,7 +8,6 @@ export const styles = StyleSheet.create({
},
horizBar: {
flexDirection: 'row',
width: '90%',
},
leftLabel: {
justifyContent: 'center',

25
src/PieChart/index.tsx
View File

@ -29,6 +29,8 @@ type propTypes = {
textBackgroundColor?: string;
textBackgroundRadius?: number;
showValuesAsLabels?: Boolean;
centerLabelComponent?: Function;
};
type itemType = {
value: number;
@ -228,8 +230,18 @@ export const PieChart = (props: propTypes) => {
}
if (showTextBackground && (dataItem.text || showValuesAsLabels)) {
let textBackgroundX = xx + textSize / 2;
let textBackgroundY = yy - textSize / 2 + 1;
let textBackgroundX =
xx +
(props.textBackgroundRadius ||
dataItem.textBackgroundRadius ||
textSize) /
2;
let textBackgroundY =
yy -
(props.textBackgroundRadius ||
dataItem.textBackgroundRadius ||
textSize) /
3;
ctx.beginPath();
ctx.arc(
textBackgroundX,
@ -265,7 +277,7 @@ export const PieChart = (props: propTypes) => {
return (
<View style={isThreeD && {transform: [{scaleY: 0.5}]}}>
<Canvas ref={handleCanvas} />
{visibility && donut && !isDataShifted && (
{visibility && (props.centerLabelComponent || (donut && !isDataShifted)) && (
<View
style={[
{
@ -282,6 +294,8 @@ export const PieChart = (props: propTypes) => {
borderWidth: innerCircleBorderWidth,
borderColor: innerCircleBorderColor,
backgroundColor: innerCircleColor,
justifyContent: 'center',
alignItems: 'center',
},
isThreeD && {
borderTopWidth: innerCircleBorderWidth * 5,
@ -289,8 +303,9 @@ export const PieChart = (props: propTypes) => {
? innerCircleBorderWidth * 2
: innerCircleBorderWidth,
},
]}
/>
]}>
{props.centerLabelComponent ? props.centerLabelComponent() : null}
</View>
)}
</View>
);