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

Fixed issue with tool tip in bar charts and added minHeight

This commit is contained in:
Abhinandan-Kushwaha 2022-06-27 21:11:12 +05:30
parent 6fdcf586fd
commit cbb82e577c
8 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/BarChart/BarChartProps.md
View File

@ -30,6 +30,7 @@
| scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | true |
| initialSpacing | number | distance of the first bar from the Y axis | 40 |
| renderTooltip | Function | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | null |
| leftShiftForLastIndexTooltip | number | The distance by which the tooltip component of the last bar should shift towards left | 0 |
---
@ -211,7 +212,8 @@ type referenceConfigType = {
| barBorderRadius | number | Border radius of the bar | 0 |
| barMarginBottom | number | margin at the bottom of the bar (above X axis) | 0 |
| barBackgroundPattern | Component | A svg component containing the background pattern for bars | \_ |
| patternId | String | ID of the pattern component | \_ |
| patternId | String | ID of the pattern component | \_ |
| minHeight | number | Minimum height of the Bars | 0 |
---

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "1.2.36",
"version": "1.2.37",
"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": [

15
src/BarChart/Animated2DWithGradient.tsx
View File

@ -17,6 +17,7 @@ if (Platform.OS === 'android') {
type propTypes = {
item: itemType;
height: number;
minHeight: number;
opacity?: number;
animationDuration: number;
roundedTop: Boolean;
@ -119,8 +120,11 @@ const Animated2DWithGradient = (props: propTypes) => {
width: '100%',
height:
(noAnimation
? (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
? Math.max(
props.minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200),
)
: height) - (barMarginBottom || 0),
}}>
<View
@ -128,8 +132,11 @@ const Animated2DWithGradient = (props: propTypes) => {
width: '100%',
height:
(noAnimation
? (Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
? Math.max(
props.minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200),
)
: height) - (barMarginBottom || 0),
}}>
{noGradient ? (

53
src/BarChart/RenderBars.tsx
View File

@ -11,6 +11,7 @@ type Props = {
style?: any;
width?: number;
height?: number;
minHeight?: number;
color?: ColorValue;
showGradient?: Boolean;
gradientColor?: any;
@ -63,6 +64,7 @@ type Props = {
onPress?: Function;
xAxisTextNumberOfLines: number;
renderTooltip: Function;
leftShiftForLastIndexTooltip: number;
initialSpacing: number;
selectedIndex: number;
setSelectedIndex: Function;
@ -100,6 +102,7 @@ const RenderBars = (props: Props) => {
index,
containerHeight,
maxValue,
minHeight,
spacing,
propSpacing,
side,
@ -117,6 +120,7 @@ const RenderBars = (props: Props) => {
labelTextStyle,
xAxisTextNumberOfLines,
renderTooltip,
leftShiftForLastIndexTooltip,
initialSpacing,
selectedIndex,
setSelectedIndex,
@ -324,12 +328,14 @@ const RenderBars = (props: Props) => {
);
};
const barHeight =
const barHeight = Math.max(
minHeight,
(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)) -
barMarginBottom;
barMarginBottom,
);
let leftSpacing = initialSpacing;
for (let i = 0; i < index; i++) {
@ -424,11 +430,12 @@ const RenderBars = (props: Props) => {
topLabelComponent={item.topLabelComponent}
opacity={opacity || 1}
animationDuration={animationDuration || 800}
height={
height={Math.max(
minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200) -
barMarginBottom
}
barMarginBottom,
)}
intactTopLabel={props.intactTopLabel}
horizontal={props.horizontal}
/>
@ -457,11 +464,12 @@ const RenderBars = (props: Props) => {
opacity={opacity || 1}
horizontal={props.horizontal}
intactTopLabel={props.intactTopLabel}
height={
height={Math.max(
minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200) -
barMarginBottom
}
barMarginBottom,
)}
value={item.value}
/>
)
@ -480,10 +488,12 @@ const RenderBars = (props: Props) => {
frontColor={props.frontColor || 'black'}
containerHeight={containerHeight}
maxValue={maxValue}
height={
height={Math.max(
minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
(maxValue || 200),
)}
minHeight={minHeight}
barMarginBottom={barMarginBottom}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
@ -511,10 +521,12 @@ const RenderBars = (props: Props) => {
frontColor={props.frontColor || 'black'}
containerHeight={containerHeight}
maxValue={maxValue}
height={
height={Math.max(
minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
(maxValue || 200),
)}
minHeight={minHeight}
barMarginBottom={barMarginBottom}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
@ -540,10 +552,12 @@ const RenderBars = (props: Props) => {
frontColor={props.frontColor || 'black'}
containerHeight={containerHeight}
maxValue={maxValue}
height={
height={Math.max(
minHeight,
(Math.abs(item.value) * (containerHeight || 200)) /
(maxValue || 200)
}
(maxValue || 200),
)}
minHeight={minHeight}
barMarginBottom={barMarginBottom}
cappedBars={props.cappedBars}
capThickness={props.capThickness}
@ -563,7 +577,10 @@ const RenderBars = (props: Props) => {
style={{
position: 'absolute',
bottom: barHeight + 60,
left: leftSpacing,
left:
index === data.length - 1
? leftSpacing - leftShiftForLastIndexTooltip
: leftSpacing,
zIndex: 1000,
}}>
{renderTooltip(item, index)}

18
src/BarChart/RenderStackBars.tsx
View File

@ -24,6 +24,7 @@ type Props = {
propSpacing?: number;
data?: any;
barWidth?: number;
onPress?: Function;
rotateLabel?: Boolean;
showXAxisIndices: Boolean;
@ -38,6 +39,7 @@ type Props = {
patternId?: String;
xAxisTextNumberOfLines: number;
renderTooltip: Function;
leftShiftForLastIndexTooltip: number;
initialSpacing: number;
selectedIndex: number;
setSelectedIndex: Function;
@ -85,11 +87,13 @@ const RenderStackBars = (props: Props) => {
labelTextStyle,
xAxisTextNumberOfLines,
renderTooltip,
leftShiftForLastIndexTooltip,
initialSpacing,
selectedIndex,
setSelectedIndex,
activeOpacity,
stackData,
data,
} = props;
let leftSpacing = initialSpacing;
for (let i = 0; i < index; i++) {
@ -144,7 +148,7 @@ const RenderStackBars = (props: Props) => {
0,
);
const static2DSimple = (item: itemType) => {
const static2DSimple = (item: itemType, index: number) => {
const cotainsNegative = item.stacks.some(item => item.value < 0);
return (
<>
@ -155,6 +159,8 @@ const RenderStackBars = (props: Props) => {
setSelectedIndex(index);
if (item.onPress) {
item.onPress();
} else if (props.onPress) {
props.onPress(item, index);
}
}}
style={[
@ -186,7 +192,8 @@ const RenderStackBars = (props: Props) => {
(Math.abs(stackItem.value) * (containerHeight || 200)) /
(maxValue || 200) -
(stackItem.marginBottom || 0),
backgroundColor: stackItem.color || item.color || props.color || 'black',
backgroundColor:
stackItem.color || item.color || props.color || 'black',
borderRadius:
stackItem.borderRadius || props.barBorderRadius || 0,
},
@ -312,7 +319,7 @@ const RenderStackBars = (props: Props) => {
}}
/>
)}
{static2DSimple(item)}
{static2DSimple(item, index)}
{renderLabel(label || '', labelTextStyle)}
</View>
{renderTooltip && selectedIndex === index && (
@ -320,7 +327,10 @@ const RenderStackBars = (props: Props) => {
style={{
position: 'absolute',
bottom: totalHeight + 60,
left: leftSpacing,
left:
index === data.length - 1
? leftSpacing - leftShiftForLastIndexTooltip
: leftSpacing,
zIndex: 1000,
}}>
{renderTooltip(item, index)}

11
src/BarChart/index.tsx
View File

@ -24,6 +24,7 @@ import Svg, {Circle, Path, Rect, Text as CanvasText} from 'react-native-svg';
type PropTypes = {
width?: number;
height?: number;
minHeight?: number;
noOfSections?: number;
noOfSectionsBelowXAxis?: number;
maxValue?: number;
@ -143,6 +144,7 @@ type PropTypes = {
barMarginBottom?: number;
onPress?: Function;
renderTooltip?: Function;
leftShiftForLastIndexTooltip?: number;
};
type lineConfigType = {
initialSpacing?: number;
@ -1506,6 +1508,7 @@ export const BarChart = (props: PropTypes) => {
stackData={props.stackData}
item={item}
index={index}
data={data}
containerHeight={containerHeight}
maxValue={maxValue}
spacing={item.spacing === 0 ? 0 : item.spacing || spacing}
@ -1536,8 +1539,12 @@ export const BarChart = (props: PropTypes) => {
labelTextStyle={
item.labelTextStyle || props.xAxisLabelTextStyle
}
onPress={props.onPress}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
renderTooltip={props.renderTooltip}
leftShiftForLastIndexTooltip={
props.leftShiftForLastIndexTooltip || 0
}
initialSpacing={initialSpacing}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
@ -1556,6 +1563,7 @@ export const BarChart = (props: PropTypes) => {
propSpacing={spacing}
side={side}
data={data}
minHeight={props.minHeight || 0}
barWidth={props.barWidth}
sideWidth={props.sideWidth}
labelWidth={labelWidth}
@ -1602,6 +1610,9 @@ export const BarChart = (props: PropTypes) => {
onPress={props.onPress}
xAxisTextNumberOfLines={xAxisTextNumberOfLines}
renderTooltip={props.renderTooltip}
leftShiftForLastIndexTooltip={
props.leftShiftForLastIndexTooltip || 0
}
initialSpacing={initialSpacing}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}

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

@ -145,7 +145,7 @@ const AnimatedBar = (props: animatedBarPropTypes) => {
<View
style={{
width: width,
height: (3 * width) / 4,
height: width * 0.4,
// left: width / 2,
backgroundColor: topColor,
opacity: opacity,

2
src/Components/ThreeDBar/index.tsx
View File

@ -95,7 +95,7 @@ const ThreeDBar = (props: PropTypes) => {
<View
style={{
width: width,
height: (3 * width) / 4,
height: width * 0.4,
// left: width / -8,
backgroundColor: topColor,
opacity: opacity,