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

Added sideWidth, centralLabel and roundToDigits props

This commit is contained in:
Abhinandan Kushwaha 2021-08-12 20:02:44 +05:30
parent daba7f99c3
commit 337e4d55e6
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>
);