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 #150 from Abhinandan-Kushwaha/feat/SvgPie 

Fixed issues with Horizontal bar and Stack Charts
This commit is contained in:
Abhinandan Kushwaha 2022-04-20 07:07:30 +05:30 committed by GitHub
parent 636167c3dd b25d28fcca
commit 783a4a6304
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
App.js
View File

@ -825,17 +825,40 @@ const App = () => {
const stackData = [
{
stacks: [
{value: 10, color: 'orange'},
{value: 20, color: '#4ABFF4', marginBottom: 2},
{
value: 10,
color: 'orange',
innerBarComponent: () => (
<Text style={{transform: [{rotate: '-90deg'}, {translateX: 10}]}}>
10
</Text>
),
},
{
value: 20,
color: '#4ABFF4',
marginBottom: 2,
innerBarComponent: () => <Text>20</Text>,
},
],
spacing: 15,
label: 'Jan',
},
{
stacks: [
{value: 10, color: '#4ABFF4'},
{value: 11, color: 'orange', marginBottom: 2},
{value: 15, color: '#28B2B3', marginBottom: 2},
{value: 10, color: '#4ABFF4', innerBarComponent: () => <Text>10</Text>},
{
value: 11,
color: 'orange',
marginBottom: 2,
innerBarComponent: () => <Text>11</Text>,
},
{
value: 15,
color: '#28B2B3',
marginBottom: 2,
innerBarComponent: () => <Text>15</Text>,
},
],
label: 'Mar',
},
@ -902,7 +925,7 @@ const App = () => {
textBackgroundRadius={26}
data={pieData}
/> */}
<PieChart
{/* <PieChart
donut
innerRadius={80}
data={pieData2}
@ -911,7 +934,7 @@ const App = () => {
centerLabelComponent={() => {
return <Text style={{fontSize: 30}}>70%</Text>;
}}
/>
/> */}
{/* <MyPattern/> */}
{/* <PieChart
data={lineData2.reverse()}
@ -919,7 +942,7 @@ const App = () => {
showText
showValuesAsLabels
/> */}
<PieChart
{/* <PieChart
// backgroundColor='green'
// donut
// innerCircleBorderWidth={4}
@ -962,7 +985,7 @@ const App = () => {
// </View>
// )
// }}
/>
/> */}
{/* <PieChart donut innerCircleBorderWidth={3} innerCircleBorderColor='lightgray' shiftInnerCenterX={15} shadow data={[{value:50},{value:20},{value:40},{value:80},{value:30}]} /> */}
{/* <BarChart
data={lineData2}
@ -1190,15 +1213,20 @@ const App = () => {
endOpacity={0.3}
/> */}
{/* <BarChart
width={340}
<BarChart
width={200}
// height={300}
rotateLabel
barWidth={12}
barWidth={32}
spacing={40}
noOfSections={4}
barBorderRadius={6}
data={[dtt[0],dtt[1],dtt[2]]}
// initialSpacing={90}
stackData={stackData}
/> */}
horizontal
// yAxisAtTop
/>
{/* <BarChart
// isAnimated={true}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.2.1",
"version": "1.2.2",
"description": "The most complete library for Bar, Line, Area, Pie, Donut and Stacked Bar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"main": "src/index.tsx",
"files": [

35
src/BarChart/index.tsx
View File

@ -653,7 +653,7 @@ export const BarChart = (props: PropTypes) => {
styles.horizBar,
{
width: horizontal
? props.width || totalWidth
? props.width || Math.min(300, totalWidth)
: props.width || totalWidth + 11,
},
yAxisSide === 'right' && {transform: [{rotateY: '180deg'}]},
@ -668,7 +668,13 @@ export const BarChart = (props: PropTypes) => {
},
horizontal &&
!yAxisAtTop && {
transform: [{translateX: totalWidth + yAxisThickness}],
transform: [
{
translateX:
(props.width || Math.min(300, totalWidth)) +
yAxisThickness,
},
],
},
{
height:
@ -676,7 +682,8 @@ export const BarChart = (props: PropTypes) => {
width: yAxisLabelWidth,
},
yAxisLabelContainerStyle,
]}/>
]}
/>
<View
style={[
index === noOfSections
@ -697,7 +704,7 @@ export const BarChart = (props: PropTypes) => {
thickness: rulesThickness,
color: rulesColor,
width: horizontal
? props.width || totalWidth
? props.width || Math.min(300, totalWidth)
: (props.width || totalWidth) + 11,
dashWidth: dashWidth,
dashGap: dashGap,
@ -744,6 +751,17 @@ export const BarChart = (props: PropTypes) => {
{rotateY: '180deg'},
],
},
horizontal &&
!yAxisAtTop && {
transform: [
{
translateX:
(props.width || Math.min(300, totalWidth)) +
yAxisThickness +
yAxisLabelWidth,
},
],
},
yAxisLabelContainerStyle,
]}>
<Text
@ -796,7 +814,8 @@ export const BarChart = (props: PropTypes) => {
width: yAxisLabelWidth,
},
index === 0 && {marginTop: -stepHeight / 2},
]}/>
]}
/>
<View
style={[styles.leftPart, {backgroundColor: backgroundColor}]}>
{hideRules ? null : (
@ -1291,8 +1310,8 @@ export const BarChart = (props: PropTypes) => {
labelsExtraHeight,
},
yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
props.width && {width: props.width},
horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
props.width && !horizontal && {width: props.width},
horizontal && {transform: [{rotate: '90deg'}, {translateY: 15}]},
]}>
{props.hideAxesAndRules !== true && renderHorizSections()}
<ScrollView
@ -1310,7 +1329,7 @@ export const BarChart = (props: PropTypes) => {
bottom: stepHeight * -0.5 - 60 + xAxisThickness,
},
props.width && {width: props.width - 11},
horizontal && {width: totalWidth},
horizontal && {width: props.width || Math.min(300, totalWidth)},
]}
scrollEnabled={!disableScroll}
contentContainerStyle={[