From 37b4f5b65c3547183df8d49d7c120898403d8fd0 Mon Sep 17 00:00:00 2001 From: Abhinandan-Kushwaha Date: Fri, 1 Jul 2022 14:01:06 +0530 Subject: [PATCH] Added leftShiftForTooltip to Bar and stack charts --- docs/BarChart/BarChartProps.md | 2 ++ package.json | 2 +- src/BarChart/RenderBars.tsx | 6 +++++- src/BarChart/RenderStackBars.tsx | 9 ++++++--- src/BarChart/index.tsx | 3 +++ 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/docs/BarChart/BarChartProps.md b/docs/BarChart/BarChartProps.md index f03119a..f665db5 100644 --- a/docs/BarChart/BarChartProps.md +++ b/docs/BarChart/BarChartProps.md @@ -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 | +| leftShiftForTooltip | number | The distance by which the tooltip component should shift towards left | 0 | | leftShiftForLastIndexTooltip | number | The distance by which the tooltip component of the last bar should shift towards left | 0 | --- @@ -109,6 +110,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop | spacing | number | Distance of the next Bar from the currennt Bar | | barBackgroundPattern | Component | A svg component containing the background pattern for bars | | patternId | String | ID of the pattern component | +| leftShiftForTooltip | number | The distance by which the tooltip component should shift towards left | --- diff --git a/package.json b/package.json index 318052d..0f5427c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "1.2.37", + "version": "1.2.38", "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": [ diff --git a/src/BarChart/RenderBars.tsx b/src/BarChart/RenderBars.tsx index 65f707a..8934250 100644 --- a/src/BarChart/RenderBars.tsx +++ b/src/BarChart/RenderBars.tsx @@ -64,6 +64,7 @@ type Props = { onPress?: Function; xAxisTextNumberOfLines: number; renderTooltip: Function; + leftShiftForTooltip?: number; leftShiftForLastIndexTooltip: number; initialSpacing: number; selectedIndex: number; @@ -95,6 +96,7 @@ type itemType = { barBackgroundPattern?: Function; patternId?: String; barMarginBottom?: number; + leftShiftForTooltip?: number; }; const RenderBars = (props: Props) => { const { @@ -120,6 +122,7 @@ const RenderBars = (props: Props) => { labelTextStyle, xAxisTextNumberOfLines, renderTooltip, + leftShiftForTooltip, leftShiftForLastIndexTooltip, initialSpacing, selectedIndex, @@ -580,7 +583,8 @@ const RenderBars = (props: Props) => { left: index === data.length - 1 ? leftSpacing - leftShiftForLastIndexTooltip - : leftSpacing, + : leftSpacing - + (item.leftShiftForTooltip ?? leftShiftForTooltip), zIndex: 1000, }}> {renderTooltip(item, index)} diff --git a/src/BarChart/RenderStackBars.tsx b/src/BarChart/RenderStackBars.tsx index 9115a5d..1aeffc1 100644 --- a/src/BarChart/RenderStackBars.tsx +++ b/src/BarChart/RenderStackBars.tsx @@ -39,6 +39,7 @@ type Props = { patternId?: String; xAxisTextNumberOfLines: number; renderTooltip: Function; + leftShiftForTooltip?: number; leftShiftForLastIndexTooltip: number; initialSpacing: number; selectedIndex: number; @@ -70,6 +71,7 @@ type itemType = { barBackgroundPattern?: Function; barBorderRadius?: Number; patternId?: String; + leftShiftForTooltip?: number; }; const RenderStackBars = (props: Props) => { const { @@ -87,13 +89,13 @@ const RenderStackBars = (props: Props) => { labelTextStyle, xAxisTextNumberOfLines, renderTooltip, + leftShiftForTooltip, leftShiftForLastIndexTooltip, initialSpacing, selectedIndex, setSelectedIndex, activeOpacity, stackData, - data, } = props; let leftSpacing = initialSpacing; for (let i = 0; i < index; i++) { @@ -328,9 +330,10 @@ const RenderStackBars = (props: Props) => { position: 'absolute', bottom: totalHeight + 60, left: - index === data.length - 1 + index === stackData.length - 1 ? leftSpacing - leftShiftForLastIndexTooltip - : leftSpacing, + : leftSpacing - + (item.leftShiftForTooltip ?? leftShiftForTooltip), zIndex: 1000, }}> {renderTooltip(item, index)} diff --git a/src/BarChart/index.tsx b/src/BarChart/index.tsx index 5184704..d6676ce 100644 --- a/src/BarChart/index.tsx +++ b/src/BarChart/index.tsx @@ -144,6 +144,7 @@ type PropTypes = { barMarginBottom?: number; onPress?: Function; renderTooltip?: Function; + leftShiftForTooltip?: number; leftShiftForLastIndexTooltip?: number; }; type lineConfigType = { @@ -1542,6 +1543,7 @@ export const BarChart = (props: PropTypes) => { onPress={props.onPress} xAxisTextNumberOfLines={xAxisTextNumberOfLines} renderTooltip={props.renderTooltip} + leftShiftForTooltip={props.leftShiftForTooltip || 0} leftShiftForLastIndexTooltip={ props.leftShiftForLastIndexTooltip || 0 } @@ -1610,6 +1612,7 @@ export const BarChart = (props: PropTypes) => { onPress={props.onPress} xAxisTextNumberOfLines={xAxisTextNumberOfLines} renderTooltip={props.renderTooltip} + leftShiftForTooltip={props.leftShiftForTooltip || 0} leftShiftForLastIndexTooltip={ props.leftShiftForLastIndexTooltip || 0 }