From e2cca205f47deb07258ec0e78e637c3b643c405a Mon Sep 17 00:00:00 2001 From: abhinandan-kushwaha Date: Thu, 24 Feb 2022 05:18:04 +0530 Subject: [PATCH] Added support for large rotated labels on x axis and fixed issue with bar chart values not changing live --- App.js | 86 +++++++++++++---- .../gradle/wrapper/gradle-wrapper.properties | 2 +- src/BarChart/Animated2DWithGradient.tsx | 34 +++++-- src/BarChart/RenderBars.tsx | 92 ++++++++++++++----- src/BarChart/index.tsx | 11 ++- src/LineChart/index.tsx | 4 +- 6 files changed, 177 insertions(+), 52 deletions(-) diff --git a/App.js b/App.js index 487d4c9..4e39b13 100644 --- a/App.js +++ b/App.js @@ -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 ( {/* */} + {dtt[1].value+=20;setDtt([...dtt])}}> + Press me + {/* { - 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, }}> - + {noGradient ? ( { 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, @@ -243,4 +263,4 @@ const Animated2DWithGradient = (props: propTypes) => { ); }; -export default Animated2DWithGradient; \ No newline at end of file +export default Animated2DWithGradient; diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx index 99cfce1..7a7fac0 100644 --- a/src/BarChart/RenderBars.tsx +++ b/src/BarChart/RenderBars.tsx @@ -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() ) : ( {label || ''} @@ -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 ( { 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() ) : ( {label || ''} @@ -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 - ? (item.topLabelComponentHeight || 30) + - (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200) - : (Math.abs(item.value) * (containerHeight || 200)) / (maxValue || 200), + 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), 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,10 +478,10 @@ 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)} ); }; -export default RenderBars; \ No newline at end of file +export default RenderBars; diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index 2140515..e770310 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -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}, diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx index a5ca2e7..97e020b 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -966,7 +966,7 @@ export const LineChart = (props: propTypes) => { labelComponent() ) : ( {label || ''} @@ -1004,7 +1004,7 @@ export const LineChart = (props: propTypes) => { labelComponent() ) : ( {label || ''}