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 React from 'react';
import { View, StyleSheet } from 'react-native'; import {View, Text, StyleSheet} from 'react-native';
import { BarChart, LineChart, PieChart } from './src'; import {BarChart, LineChart, PieChart} from './src';
const App = () => { const App = () => {
// const lineData = [ // const lineData = [
@ -19,73 +19,174 @@ const App = () => {
// ]; // ];
const data = [ const data = [
{ value: 15, label: 'Jan', showVerticalLine: 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: 40,
{ value: 30, label: 'Apr', showVerticalLine: true, showDataPoint: true }, 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 = [ const stackData = [
{ {
stacks: stacks: [
[{ {value: 10, color: 'orange'},
value: 10, color: 'red' {value: 20, color: '#4ABFF4', marginBottom: 2},
}, ],
{ label: 'Jan',
value: 20, color: 'blue', marginBottom: 1
}],
label: 'Jan'
}, },
{ {
stacks: stacks: [
[{ {value: 10, color: '#4ABFF4'},
value: 14, color: 'red' {value: 11, color: 'orange', marginBottom: 2},
}, {value: 15, color: '#28B2B3', marginBottom: 2},
{ ],
value: 18, color: 'blue', marginBottom: 1 label: 'Mar',
}],
label: 'Feb'
}, },
{ {
stacks: stacks: [
[{ {value: 14, color: 'orange'},
value: 7, color: 'red' {value: 18, color: '#4ABFF4', marginBottom: 2},
}, ],
{ value: 11, color: 'green', marginBottom: 1 }, label: 'Feb',
{ },
value: 10, color: 'blue', marginBottom: 1 {
}], stacks: [
label: 'Mar' {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 ( return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <View
<View style={{
style={{ marginTop: 200,
// flex: 1, paddingVertical: 50,
// backgroundColor: 'pink', }}>
width: 300, {/* <BarChart
justifyContent: 'center', data={data}
alignItems: 'center', showGradient
}}> cappedBars
{/* <LineChart capColor={'rgba(78, 0, 142)'}
data={data} capThickness={4}
hideDataPoints barWidth={35}
areaChart gradientColor={'rgba(200, 100, 244,0.8)'}
curved frontColor={'rgba(219, 182, 249,0.2)'}
color='rgb(220,140,140)' /> */}
startFillColor='rgb(220,140,140)'
endFillColor='rgba(250,240,240)' <BarChart
startOpacity={0.9} width={340}
endOpacity={0.3} 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' // dataPointsShape='rectangular'
// dataPointsHeight={12} // dataPointsHeight={12}
// dataPointsWidth={12} // dataPointsWidth={12}
/> */} />
</View> */}
{/* <BarChart
{/* <BarChart
showGradient showGradient
// isThreeD // isThreeD
// isAnimated // isAnimated
@ -105,6 +206,14 @@ const App = () => {
data={data} data={data}
/> */} /> */}
{/* <View
style={{
// flex: 1,
// backgroundColor: 'pink',
width: 300,
justifyContent: 'center',
alignItems: 'center',
}}>
<BarChart <BarChart
width={300} width={300}
rotateLabel rotateLabel
@ -117,10 +226,9 @@ const App = () => {
barBorderRadius={20} barBorderRadius={20}
stackData={stackData} stackData={stackData}
/> />
</View> */}
{/* <Text>Hello</Text> */}
{/* <Text>Hello</Text> */}
</View>
{/* <LineChart data={data} /> */} {/* <LineChart data={data} /> */}
{/* <PieChart {/* <PieChart
showText 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 | | disablePress | Boolean | Prop to disable the press action, defaults to false |
| frontColor | ColorValue | Color of the bar | | frontColor | ColorValue | Color of the bar |
| sideColor | ColorValue | Color of the side view of the bar, only for 3 D | | 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 | | 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 | | 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 | | 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 ### Axes and rules related props
| Prop | Type | Description | Default value | | Prop | Type | Description | Default value |
| ---------------------- | ---------- | -------------------------------------------- | ------------- | | ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black | | xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 | | xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black | | yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 | | yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | | yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ | | yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | | showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| hideYAxisText | Boolean | To hide Y axis label text | false | | roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray | | hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesThickness | number | Thickness of the horizontal rules | 1 | | rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| hideRules | Boolean | To hide the horizontal rules | false | | rulesThickness | number | Thickness of the horizontal rules | 1 |
| showVerticalLines | Boolean | To show vertical lines | false | | hideRules | Boolean | To hide the horizontal rules | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | | showVerticalLines | Boolean | To show vertical lines | false |
| verticallinesThickness | number | Thickness of the vertical lines | 1 | | verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 | | verticallinesThickness | number | Thickness of the vertical lines | 1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false | | verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | | showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | | xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | | xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | | xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | | showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | | yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | | yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | | yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | | yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | 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 | | isThreeD | Boolean | Prop to render 3 dimensional bars | false |
| frontColor | ColorValue | Color of the bar | black for 2D, red for 3D | | 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 | | 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 | | 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 | | 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 | | 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 ### Axes and rules related props
| Prop | Type | Description | Default value | | Prop | Type | Description | Default value |
| ---------------------- | ---------- | -------------------------------------------- | ------------- | | ---------------------- | ---------- | ---------------------------------------------------------------------- | ------------- |
| xAxisColor | ColorValue | X axis color | black | | xAxisColor | ColorValue | X axis color | black |
| xAxisThickness | number | X axis thickness | 1 | | xAxisThickness | number | X axis thickness | 1 |
| yAxisColor | ColorValue | Y axis color | black | | yAxisColor | ColorValue | Y axis color | black |
| yAxisThickness | number | Y axis thickness | 1 | | yAxisThickness | number | Y axis thickness | 1 |
| yAxisLabelWidth | number | Width of the Y axis Label container | 35 | | yAxisLabelWidth | number | Width of the Y axis Label container | 35 |
| yAxisTextStyle | object | Style object for the Y axis text style | \_ | | yAxisTextStyle | object | Style object for the Y axis text style | \_ |
| showFractionalValues | Boolean | Allow fractional values for the Y axis label | false | | showFractionalValues | Boolean | Allow fractional values for the Y axis label | false |
| hideYAxisText | Boolean | To hide Y axis label text | false | | roundToDigits | number | Rounds the y axis values to given number of digits after decimal point | 1 |
| rulesColor | ColorValue | Color of the horizontal rules | lightgray | | hideYAxisText | Boolean | To hide Y axis label text | false |
| rulesThickness | number | Thickness of the horizontal rules | 1 | | rulesColor | ColorValue | Color of the horizontal rules | lightgray |
| hideRules | Boolean | To hide the horizontal rules | false | | rulesThickness | number | Thickness of the horizontal rules | 1 |
| showVerticalLines | Boolean | To show vertical lines | false | | hideRules | Boolean | To hide the horizontal rules | false |
| verticalLinesColor | ColorValue | Color of the vertical lines | lightgray | | showVerticalLines | Boolean | To show vertical lines | false |
| verticallinesThickness | number | Thickness of the vertical lines | 1 | | verticalLinesColor | ColorValue | Color of the vertical lines | lightgray |
| verticalLinesZIndex | number | Z index of the vertical lines | -1 | | verticallinesThickness | number | Thickness of the vertical lines | 1 |
| showXAxisIndices | Boolean | To show the pointers on the X axis | false | | verticalLinesZIndex | number | Z index of the vertical lines | -1 |
| xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 | | showXAxisIndices | Boolean | To show the pointers on the X axis | false |
| xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 | | xAxisIndicesHeight | number | Height of the pointers on the X axis | 2 |
| xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | | xAxisIndicesWidth | number | Width of the pointers on the X axis | 4 |
| showYAxisIndices | Boolean | To show the pointers on the Y axis | false | | xAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 | | showYAxisIndices | Boolean | To show the pointers on the Y axis | false |
| yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 | | yAxisIndicesHeight | number | Height of the pointers on the Y axis | 2 |
| yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black | | yAxisIndicesWidth | number | Width of the pointers on the Y axis | 4 |
| yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false | | yAxisIndicesColor | ColorValue | Color of the pointers on the X axis | black |
| rotateLabel | Boolean | To rotate the X axis labels (by 60deg) | false | | yAxisIndicesColor | Boolean | To hide axes, rules, labels altogether | false |
| hideOrigin | Boolean | To hide the y Axis label at origin (i.e. 0) | 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 | | textBackgroundColor | ColorValue | Background color for the label texts | white |
| textBackgroundRadius | number | Radius for the background of the text labels | textSize | | 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 | | 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 ### 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> <View>
<BarChart <BarChart
barWidth={22} barWidth={22}
spacing={16}
height={260}
noOfSections={3} noOfSections={3}
barBorderRadius={4} barBorderRadius={4}
frontColor="lightgray" 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 React, {Component} from 'react';
import { View, TouchableOpacity, Animated, Text, ColorValue } from 'react-native'; import {View, TouchableOpacity, Animated, Text, ColorValue} from 'react-native';
import ThreeDBar from '../Components/ThreeDBar'; import ThreeDBar from '../Components/ThreeDBar';
import AnimatedBar from '../Components/AnimatedBar'; import AnimatedBar from '../Components/AnimatedBar';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
import Animated2DWithGradient from './Animated2DWithGradient'; import Animated2DWithGradient from './Animated2DWithGradient';
import { Style } from 'util'; import {Style} from 'util';
type Props = { type Props = {
style?: any; style?: any;
@ -29,6 +29,7 @@ type Props = {
spacing?: number; spacing?: number;
data?: any; data?: any;
barWidth?: number; barWidth?: number;
sideWidth?: number;
isThreeD?: Boolean; isThreeD?: Boolean;
isAnimated?: Boolean; isAnimated?: Boolean;
@ -54,7 +55,7 @@ type Props = {
xAxisIndicesColor: ColorValue; xAxisIndicesColor: ColorValue;
horizontal: Boolean; horizontal: Boolean;
intactTopLabel: Boolean; intactTopLabel: Boolean;
barBorderRadius?: number barBorderRadius?: number;
}; };
type itemType = { type itemType = {
value?: number; value?: number;
@ -66,6 +67,7 @@ type itemType = {
gradientColor?: any; gradientColor?: any;
label?: String; label?: String;
barWidth?: number; barWidth?: number;
sideWidth?: number;
labelTextStyle?: any; labelTextStyle?: any;
topLabelComponent?: Function; topLabelComponent?: Function;
topLabelContainerStyle?: any; topLabelContainerStyle?: any;
@ -74,7 +76,7 @@ type itemType = {
capColor?: ColorValue; capColor?: ColorValue;
capRadius?: number; capRadius?: number;
labelComponent?: Function; labelComponent?: Function;
barBorderRadius?: number barBorderRadius?: number;
}; };
const RenderBars = (props: Props) => { const RenderBars = (props: Props) => {
const { const {
@ -106,21 +108,21 @@ const RenderBars = (props: Props) => {
}, },
rotateLabel rotateLabel
? props.horizontal ? props.horizontal
? { transform: [{ rotate: '330deg' }] } ? {transform: [{rotate: '330deg'}]}
: { transform: [{ rotate: '60deg' }] } : {transform: [{rotate: '60deg'}]}
: props.horizontal : props.horizontal
? { transform: [{ rotate: '-90deg' }] } ? {transform: [{rotate: '-90deg'}]}
: {}, : {},
]}> ]}>
{item.labelComponent ? ( {item.labelComponent ? (
item.labelComponent() item.labelComponent()
) : ( ) : (
<Text <Text
style={[labelTextStyle, { textAlign: 'center' }]} style={[labelTextStyle, {textAlign: 'center'}]}
numberOfLines={1}> numberOfLines={1}>
{label || ''} {label || ''}
</Text> </Text>
)} )}
</View> </View>
); );
}; };
@ -137,21 +139,21 @@ const RenderBars = (props: Props) => {
}, },
rotateLabel rotateLabel
? props.horizontal ? props.horizontal
? { transform: [{ rotate: '330deg' }] } ? {transform: [{rotate: '330deg'}]}
: { transform: [{ rotate: '60deg' }] } : {transform: [{rotate: '60deg'}]}
: props.horizontal : props.horizontal
? { transform: [{ rotate: '-90deg' }] } ? {transform: [{rotate: '-90deg'}]}
: {}, : {},
]}> ]}>
{item.labelComponent ? ( {item.labelComponent ? (
item.labelComponent() item.labelComponent()
) : ( ) : (
<Text <Text
style={[labelTextStyle, { textAlign: 'center' }]} style={[labelTextStyle, {textAlign: 'center'}]}
numberOfLines={1}> numberOfLines={1}>
{label || ''} {label || ''}
</Text> </Text>
)} )}
</Animated.View> </Animated.View>
); );
}; };
@ -166,7 +168,7 @@ const RenderBars = (props: Props) => {
position: 'absolute', position: 'absolute',
width: '100%', width: '100%',
height: '100%', height: '100%',
borderRadius: props.barBorderRadius || item.barBorderRadius || 0 borderRadius: props.barBorderRadius || item.barBorderRadius || 0,
}, },
props.roundedBottom && { props.roundedBottom && {
borderBottomLeftRadius: borderBottomLeftRadius:
@ -189,8 +191,8 @@ const RenderBars = (props: Props) => {
borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2, borderTopRightRadius: (item.barWidth || props.barWidth || 30) / 2,
}, },
]} ]}
start={{ x: 0, y: 0 }} start={{x: 0, y: 0}}
end={{ x: 0, y: 1 }} end={{x: 0, y: 1}}
colors={[ colors={[
item.gradientColor || props.gradientColor || 'white', item.gradientColor || props.gradientColor || 'white',
item.frontColor || props.frontColor || 'black', item.frontColor || props.frontColor || 'black',
@ -232,7 +234,7 @@ const RenderBars = (props: Props) => {
alignItems: 'center', alignItems: 'center',
}, },
props.horizontal && props.horizontal &&
!props.intactTopLabel && { transform: [{ rotate: '270deg' }] }, !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle, item.topLabelContainerStyle,
]}> ]}>
{item.topLabelComponent()} {item.topLabelComponent()}
@ -253,7 +255,7 @@ const RenderBars = (props: Props) => {
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundColor: item.frontColor || props.frontColor || 'black', backgroundColor: item.frontColor || props.frontColor || 'black',
borderRadius: props.barBorderRadius || item.barBorderRadius || 0 borderRadius: props.barBorderRadius || item.barBorderRadius || 0,
}, },
props.roundedBottom && { props.roundedBottom && {
borderBottomLeftRadius: borderBottomLeftRadius:
@ -313,7 +315,7 @@ const RenderBars = (props: Props) => {
alignItems: 'center', alignItems: 'center',
}, },
props.horizontal && props.horizontal &&
!props.intactTopLabel && { transform: [{ rotate: '270deg' }] }, !props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle, item.topLabelContainerStyle,
]}> ]}>
{item.topLabelComponent()} {item.topLabelComponent()}
@ -337,7 +339,7 @@ const RenderBars = (props: Props) => {
}, },
// !isThreeD && !item.showGradient && !props.showGradient && // !isThreeD && !item.showGradient && !props.showGradient &&
// { backgroundColor: item.frontColor || props.frontColor || 'black' }, // { backgroundColor: item.frontColor || props.frontColor || 'black' },
side !== 'right' && { zIndex: data.length - index }, side !== 'right' && {zIndex: data.length - index},
]}> ]}>
{props.showVerticalLines && ( {props.showVerticalLines && (
<View <View
@ -370,6 +372,11 @@ const RenderBars = (props: Props) => {
<AnimatedBar <AnimatedBar
topLabelContainerStyle={item.topLabelContainerStyle} topLabelContainerStyle={item.topLabelContainerStyle}
width={item.barWidth || props.barWidth || 30} width={item.barWidth || props.barWidth || 30}
sideWidth={
item.sideWidth ||
props.sideWidth ||
(item.barWidth || props.barWidth || 30) / 2
}
side={side || 'left'} side={side || 'left'}
frontColor={item.frontColor || props.frontColor || ''} frontColor={item.frontColor || props.frontColor || ''}
sideColor={item.sideColor || props.sideColor || ''} sideColor={item.sideColor || props.sideColor || ''}
@ -384,24 +391,29 @@ const RenderBars = (props: Props) => {
horizontal={props.horizontal} horizontal={props.horizontal}
/> />
) : ( ) : (
<ThreeDBar <ThreeDBar
style={{}} style={{}}
color={''} color={''}
topLabelContainerStyle={item.topLabelContainerStyle} topLabelContainerStyle={item.topLabelContainerStyle}
width={item.barWidth || props.barWidth || 30} width={item.barWidth || props.barWidth || 30}
side={side || 'left'} sideWidth={
frontColor={item.frontColor || props.frontColor || ''} item.sideWidth ||
sideColor={item.sideColor || props.sideColor || ''} props.sideWidth ||
topColor={item.topColor || props.topColor || ''} (item.barWidth || props.barWidth || 30) / 2
showGradient={item.showGradient || props.showGradient || false} }
gradientColor={item.gradientColor || props.gradientColor} side={side || 'left'}
topLabelComponent={item.topLabelComponent || Function} frontColor={item.frontColor || props.frontColor || ''}
opacity={opacity || 1} sideColor={item.sideColor || props.sideColor || ''}
horizontal={props.horizontal} topColor={item.topColor || props.topColor || ''}
intactTopLabel={props.intactTopLabel} showGradient={item.showGradient || props.showGradient || false}
height={(item.value * (containerHeight || 200)) / (maxValue || 200)} 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 ? ( ) : item.showGradient || props.showGradient ? (
isAnimated ? ( isAnimated ? (
<Animated2DWithGradient <Animated2DWithGradient
@ -423,8 +435,8 @@ const RenderBars = (props: Props) => {
barBorderRadius={props.barBorderRadius || 0} barBorderRadius={props.barBorderRadius || 0}
/> />
) : ( ) : (
static2DWithGradient(item) static2DWithGradient(item)
) )
) : isAnimated ? ( ) : isAnimated ? (
<Animated2DWithGradient <Animated2DWithGradient
barWidth={0} barWidth={0}
@ -446,8 +458,8 @@ const RenderBars = (props: Props) => {
barBorderRadius={props.barBorderRadius || 0} barBorderRadius={props.barBorderRadius || 0}
/> />
) : ( ) : (
static2DSimple(item) static2DSimple(item)
)} )}
{isAnimated {isAnimated
? renderAnimatedLabel(item.label || '', item.labelTextStyle) ? renderAnimatedLabel(item.label || '', item.labelTextStyle)
: renderLabel(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 React, {Component} from 'react';
import { View, TouchableOpacity, Text, ColorValue } from 'react-native'; import {View, TouchableOpacity, Text, ColorValue} from 'react-native';
import { Style } from 'util'; import {Style} from 'util';
type Props = { type Props = {
style?: any; style?: any;
width?: number; width?: number;
height?: number; height?: number;
color?: ColorValue; color?: ColorValue;
topLabelComponent?: Component; topLabelComponent?: Component;
topLabelContainerStyle?: Style; topLabelContainerStyle?: Style;
opacity?: number; opacity?: number;
labelTextStyle?: any; labelTextStyle?: any;
disablePress?: boolean; disablePress?: boolean;
item: itemType; item: itemType;
index: number; index: number;
containerHeight?: number; containerHeight?: number;
maxValue: number; maxValue: number;
spacing?: number; spacing?: number;
data?: any; data?: any;
barWidth?: number; barWidth?: number;
rotateLabel?: Boolean; rotateLabel?: Boolean;
showVerticalLines: Boolean; showVerticalLines: Boolean;
verticalLinesThickness: number; verticalLinesThickness: number;
verticalLinesColor: ColorValue; verticalLinesColor: ColorValue;
verticalLinesZIndex: number; verticalLinesZIndex: number;
showXAxisIndices: Boolean; showXAxisIndices: Boolean;
xAxisIndicesHeight: number; xAxisIndicesHeight: number;
xAxisIndicesWidth: number; xAxisIndicesWidth: number;
xAxisIndicesColor: ColorValue; xAxisIndicesColor: ColorValue;
horizontal: Boolean; horizontal: Boolean;
intactTopLabel: Boolean; intactTopLabel: Boolean;
barBorderRadius?: number barBorderRadius?: number;
}; };
type itemType = { type itemType = {
value?: number; value?: number;
onPress?: any; onPress?: any;
label?: String; label?: String;
barWidth?: number; barWidth?: number;
labelTextStyle?: any; labelTextStyle?: any;
topLabelComponent?: Function; topLabelComponent?: Function;
topLabelContainerStyle?: any; topLabelContainerStyle?: any;
disablePress?: any; disablePress?: any;
capThickness?: number; capThickness?: number;
capColor?: ColorValue; capColor?: ColorValue;
capRadius?: number; capRadius?: number;
labelComponent?: Function; labelComponent?: Function;
borderRadius?: number; borderRadius?: number;
stacks?: Array<any> stacks?: Array<any>;
}; };
const RenderStackBars = (props: Props) => { const RenderStackBars = (props: Props) => {
const { const {item, containerHeight, maxValue, spacing, rotateLabel} = props;
item, const disablePress = props.disablePress || false;
containerHeight, const renderLabel = (label: String, labelTextStyle: any) => {
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>
)}
</>
);
};
return ( return (
<View <View
style={[ style={[
{ {
// overflow: 'visible', width:
marginBottom: 60, (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2,
width: (item.stacks[0].barWidth || props.barWidth || 30) + spacing / 2, left: -6,
height: getTotalHeight(), position: 'absolute',
marginRight: spacing, bottom: rotateLabel ? -40 : -25,
} },
]} rotateLabel
> ? props.horizontal
{props.showVerticalLines && ( ? {transform: [{rotate: '330deg'}]}
<View : {transform: [{rotate: '60deg'}]}
style={{ : props.horizontal
zIndex: props.verticalLinesZIndex, ? {transform: [{rotate: '-90deg'}]}
position: 'absolute', : {},
height: (containerHeight || 200) + 15, ]}>
width: props.verticalLinesThickness, {item.labelComponent ? (
bottom: 0, item.labelComponent()
left: (item.barWidth || props.barWidth || 30) / 2, ) : (
backgroundColor: props.verticalLinesColor, <Text style={[labelTextStyle]} numberOfLines={1}>
}} {label || ''}
/> </Text>
)} )}
{props.showXAxisIndices && ( </View>
<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>
); );
};
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; export default RenderStackBars;

33
src/BarChart/index.tsx
View File

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

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

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

27
src/LineChart/index.tsx
View File

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

1
src/LineChart/styles.tsx
View File

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

25
src/PieChart/index.tsx
View File

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