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 #94 from Abhinandan-Kushwaha/fix/labels 

Added support for large rotated labels on x axis and fixed issue with…
This commit is contained in:
Abhinandan Kushwaha 2022-02-24 05:19:20 +05:30 committed by GitHub
parent c95471d058 e2cca205f4
commit ca6ab2f58e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 177 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
App.js
View File

@ -560,35 +560,85 @@ const App = () => {
{value: 40, label: 'Thu'},
];
const styleObject = {
marginLeft: -95,
paddingLeft: 120,
transform: [{rotate: '90deg'}],
};
const ddtt = [
{
value: 10,
label: 'January month',
labelTextStyle: styleObject,
labelWidth: 130,
},
{
value: 20,
label: 'February month',
labelTextStyle: styleObject,
labelWidth: 130,
},
{
value: 30,
label: 'March month',
labelTextStyle: styleObject,
labelWidth: 130,
},
{
value: 20,
label: 'April month',
labelTextStyle: styleObject,
labelWidth: 130,
},
];
const [dtt,setDtt] = useState([
{value: 110},
{value: 130},
{value: 120},
{value: 160},
{value: 190},
]);
return (
<View
style={{
marginVertical: 100,
// marginLeft: 46,
marginLeft:20
marginLeft: 20,
}}>
{/* <BarChart backgroundColor={'green'} data={barData} /> */}
<BarChart
// backgroundColor={'red'}
initialSpacing={10}
yAxisSide='right'
maxValue={40}
data={barData}
width={240}
radius={170}
donut={true}
showText={true}
showValuesAsLabels={true}
semiCircle={true}
// isAnimated={true}
isThreeD={true}
rulesType='solid'
// shiftInnerCenterY={100}
shadow={true}
strokeWidth={5}
noOfSections={4}
innerCircleBorderColor={'gray'}
data={dtt}
labelsExtraHeight={60}
// maxValue={100}
// yAxisLabelTexts={['100','110','120','130','140','150','160','170','180','190','200']}
// backgroundColor={'red'}
// initialSpacing={10}
// yAxisSide='right'
// maxValue={40}
// data={barData}
// width={240}
// radius={170}
// donut={true}
// showText={true}
// showValuesAsLabels={true}
// semiCircle={true}
// isThreeD={true}
// rulesType='solid'
// // shiftInnerCenterY={100}
// shadow={true}
// strokeWidth={5}
// noOfSections={4}
// innerCircleBorderColor={'gray'}
// showTextBackground={true}
/>
<TouchableOpacity
onPress={()=>{dtt[1].value+=20;setDtt([...dtt])}}>
<Text>Press me</Text>
</TouchableOpacity>
{/* <View
style={{
marginVertical: 100,

2
android/gradle/wrapper/gradle-wrapper.properties vendored
View File

@ -1,5 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

32
src/BarChart/Animated2DWithGradient.tsx
View File

@ -32,6 +32,8 @@ type propTypes = {
horizontal: Boolean;
intactTopLabel: Boolean;
barBorderRadius?: number;
containerHeight?: number;
maxValue?: number;
};
type itemType = {
value?: number;
@ -54,12 +56,19 @@ type itemType = {
};
const Animated2DWithGradient = (props: propTypes) => {
const {item, opacity, animationDuration, noGradient, noAnimation} = props;
const {
item,
opacity,
animationDuration,
noGradient,
noAnimation,
containerHeight,
maxValue,
} = props;
const [height, setHeight] = useState(noAnimation ? props.height : 2);
const [initialRender, setInitialRender] = useState(
noAnimation ? false : true,
);
// console.log('comes to animated2DWithGradient', item);
useEffect(() => {
if (!noAnimation) {
@ -97,9 +106,19 @@ const Animated2DWithGradient = (props: propTypes) => {
position: 'absolute',
bottom: 0,
width: '100%',
height: height,
height: noAnimation
? (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
: height,
}}>
<View
style={{
width: '100%',
height: noAnimation
? (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
: height,
}}>
<View style={{width: '100%', height: height}}>
{noGradient ? (
<View
style={[
@ -223,13 +242,14 @@ const Animated2DWithGradient = (props: propTypes) => {
height: item.barWidth || 30,
width: item.barWidth || 30,
justifyContent:
(props.horizontal && !props.intactTopLabel) || item.value < 0
(props.horizontal && !props.intactTopLabel) ||
item.value < 0
? 'center'
: 'flex-end',
alignItems: 'center',
opacity: opacity,
},
item.value < 0 && {transform:[{rotate:'180deg'}]},
item.value < 0 && {transform: [{rotate: '180deg'}]},
props.horizontal &&
!props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,

88
src/BarChart/RenderBars.tsx
View File

@ -121,18 +121,29 @@ const RenderBars = (props: Props) => {
rotateLabel
? props.horizontal
? {transform: [{rotate: '330deg'}]}
: {transform: [{rotate: value < 0 ? '240deg' : '60deg'}, {translateX: value < 0 ? 56 : 0}, {translateY: value < 0 ? 32 : 0}]}
: {
transform: [
{rotate: value < 0 ? '240deg' : '60deg'},
{translateX: value < 0 ? 56 : 0},
{translateY: value < 0 ? 32 : 0},
],
}
: props.horizontal
? {transform: [{rotate: '-90deg'}]}
: value < 0
?{transform:[{rotate:'180deg'},{translateY:autoShiftLabels?0:32}]}
:{},
? {
transform: [
{rotate: '180deg'},
{translateY: autoShiftLabels ? 0 : 32},
],
}
: {},
]}>
{item.labelComponent ? (
item.labelComponent()
) : (
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
{label || ''}
</Text>
@ -141,7 +152,11 @@ const RenderBars = (props: Props) => {
);
};
const renderAnimatedLabel = (label: String, labelTextStyle: any, value: number) => {
const renderAnimatedLabel = (
label: String,
labelTextStyle: any,
value: number,
) => {
return (
<Animated.View
style={[
@ -158,7 +173,7 @@ const RenderBars = (props: Props) => {
bottom: rotateLabel ? -40 : -25,
opacity: appearingOpacity,
},
value < 0 && {transform:[{rotate:'180deg'}]},
value < 0 && {transform: [{rotate: '180deg'}]},
rotateLabel
? props.horizontal
? {transform: [{rotate: '330deg'}]}
@ -171,7 +186,7 @@ const RenderBars = (props: Props) => {
item.labelComponent()
) : (
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
{label || ''}
</Text>
@ -255,7 +270,7 @@ const RenderBars = (props: Props) => {
: 'flex-end',
alignItems: 'center',
},
item.value < 0 && {transform:[{rotate:'180deg'}]},
item.value < 0 && {transform: [{rotate: '180deg'}]},
props.horizontal &&
!props.intactTopLabel && {transform: [{rotate: '270deg'}]},
item.topLabelContainerStyle,
@ -277,13 +292,27 @@ const RenderBars = (props: Props) => {
// overflow: 'visible',
marginBottom: 60,
width: item.barWidth || props.barWidth || 30,
height: item.value>=0 &&(!isThreeD || isAnimated) && item.topLabelComponent
height:
item.value >= 0 &&
(!isThreeD || isAnimated) &&
item.topLabelComponent
? (item.topLabelComponentHeight || 30) +
(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)
: (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200),
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
: (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200),
marginRight: spacing,
},
item.value < 0 && {transform:[{translateY:(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)},{rotateZ:'180deg'}]},
item.value < 0 && {
transform: [
{
translateY:
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200),
},
{rotateZ: '180deg'},
],
},
// !isThreeD && !item.showGradient && !props.showGradient &&
// { backgroundColor: item.frontColor || props.frontColor || 'black' },
side !== 'right' && {zIndex: data.length - index},
@ -333,7 +362,10 @@ const RenderBars = (props: Props) => {
topLabelComponent={item.topLabelComponent}
opacity={opacity || 1}
animationDuration={animationDuration || 800}
height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
height={
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
intactTopLabel={props.intactTopLabel}
horizontal={props.horizontal}
/>
@ -358,7 +390,10 @@ const RenderBars = (props: Props) => {
opacity={opacity || 1}
horizontal={props.horizontal}
intactTopLabel={props.intactTopLabel}
height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
height={
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
value={item.value}
/>
)
@ -373,7 +408,12 @@ const RenderBars = (props: Props) => {
roundedTop={props.roundedTop || false}
gradientColor={props.gradientColor}
frontColor={props.frontColor || 'black'}
height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
containerHeight={containerHeight}
maxValue={maxValue}
height={
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
capColor={props.capColor}
@ -396,7 +436,12 @@ const RenderBars = (props: Props) => {
gradientColor={props.gradientColor}
noGradient
frontColor={props.frontColor || 'black'}
height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
containerHeight={containerHeight}
maxValue={maxValue}
height={
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
capColor={props.capColor}
@ -417,7 +462,12 @@ const RenderBars = (props: Props) => {
noGradient
noAnimation
frontColor={props.frontColor || 'black'}
height={(Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200)}
containerHeight={containerHeight}
maxValue={maxValue}
height={
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
capColor={props.capColor}
@ -428,8 +478,8 @@ const RenderBars = (props: Props) => {
/>
)}
{isAnimated
? renderAnimatedLabel(item.label || '', item.labelTextStyle,item.value)
: renderLabel(item.label || '', item.labelTextStyle,item.value)}
? renderAnimatedLabel(item.label || '', item.labelTextStyle, item.value)
: renderLabel(item.label || '', item.labelTextStyle, item.value)}
</TouchableOpacity>
);
};

11
src/BarChart/index.tsx
View File

@ -121,6 +121,7 @@ type PropTypes = {
autoShiftLabels?: Boolean;
scrollToEnd?: Boolean;
scrollAnimation?: Boolean;
labelsExtraHeight?: number;
};
type lineConfigType = {
curved?: Boolean;
@ -231,6 +232,7 @@ export const BarChart = (props: PropTypes) => {
const labelWidth = props.labelWidth || 0;
const scrollToEnd = props.scrollToEnd || false;
const scrollAnimation = props.scrollAnimation === false ? false : true;
const labelsExtraHeight = props.labelsExtraHeight || 0;
let totalWidth = spacing;
let maxItem = 0, minItem = 0;
@ -1095,9 +1097,12 @@ export const BarChart = (props: PropTypes) => {
style={[
styles.container,
{
height: containerHeight + horizSectionsBelow.length * stepHeight,
height:
containerHeight +
horizSectionsBelow.length * stepHeight +
labelsExtraHeight,
},
yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness },
yAxisSide === 'right' && {marginLeft: yAxisLabelWidth + yAxisThickness},
props.width && {width: props.width},
horizontal && {transform: [{rotate: '90deg'}, {translateY: -15}]},
]}>
@ -1124,7 +1129,7 @@ export const BarChart = (props: PropTypes) => {
// backgroundColor: 'yellow',
height: containerHeight + 130 + horizSectionsBelow.length * stepHeight,
paddingLeft: initialSpacing,
paddingBottom:horizSectionsBelow.length * stepHeight,
paddingBottom:horizSectionsBelow.length * stepHeight + labelsExtraHeight,
alignItems: 'flex-end',
},
!props.width && {width: totalWidth},

4
src/LineChart/index.tsx
View File

@ -966,7 +966,7 @@ export const LineChart = (props: propTypes) => {
labelComponent()
) : (
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
{label || ''}
</Text>
@ -1004,7 +1004,7 @@ export const LineChart = (props: propTypes) => {
labelComponent()
) : (
<Text
style={[labelTextStyle, {textAlign: 'center'}]}
style={labelTextStyle || {textAlign: 'center'}}
numberOfLines={1}>
{label || ''}
</Text>