From 5194b5e6bf20b5b0ddcfa8678c2aaf1123f17302 Mon Sep 17 00:00:00 2001 From: Abhinandan-Kushwaha Date: Tue, 26 Apr 2022 15:27:54 +0530 Subject: [PATCH] Added feature to auto position pointer labels in Line/Area charts --- docs/LineChart/LineChartProps.md | 4 +- package.json | 2 +- src/LineChart/index.tsx | 89 +++++++++++++++++++++++++------- 3 files changed, 75 insertions(+), 20 deletions(-) diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md index 0d3be82..17a834b 100644 --- a/docs/LineChart/LineChartProps.md +++ b/docs/LineChart/LineChartProps.md @@ -296,7 +296,9 @@ type Pointer = { pointerLabelComponent?: Function; // default: null shiftPointerLabelX?: number; // default: 0 shiftPointerLabelY?: number; // default: 0 - pointerLabelWidth?: number; // default: 40 + pointerLabelWidth?: number; // default: 20 + pointerLabelHeight?: number; // default: 20 + autoAdjustPointerLabelPosition?: boolean; // default: true pointerVanishDelay?: number; // default: 150 activatePointersOnLongPress?: boolean; // default: false activatePointersDelay?: number; // default: 150 diff --git a/package.json b/package.json index f2406a5..3ddf38c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-gifted-charts", - "version": "1.2.10", + "version": "1.2.11", "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/LineChart/index.tsx b/src/LineChart/index.tsx index 408ca89..35b167d 100644 --- a/src/LineChart/index.tsx +++ b/src/LineChart/index.tsx @@ -13,6 +13,7 @@ import { Easing, Text, ColorValue, + Dimensions, } from 'react-native'; import {styles} from './styles'; import Svg, { @@ -342,9 +343,11 @@ type Pointer = { pointerStripColor?: ColorValue; pointerStripUptoDataPoint?: boolean; pointerLabelComponent?: Function; + autoAdjustPointerLabelPosition?: boolean; shiftPointerLabelX?: number; shiftPointerLabelY?: number; pointerLabelWidth?: number; + pointerLabelHeight?: number; pointerVanishDelay?: number; activatePointersOnLongPress?: boolean; activatePointersDelay?: number; @@ -476,7 +479,8 @@ export const LineChart = (props: propTypes) => { ? ((props.width || 200) - initialSpacing) / data.length : 60); - const xAxisThickness = props.xAxisThickness || 1; + const xAxisThickness = + props.xAxisThickness === 0 ? 0 : props.xAxisThickness || 1; const dataPointsHeight1 = props.dataPointsHeight1 || props.dataPointsHeight || 2; const dataPointsWidth1 = props.dataPointsWidth1 || props.dataPointsWidth || 2; @@ -1319,7 +1323,8 @@ export const LineChart = (props: propTypes) => { const xAxisIndicesColor = props.xAxisIndicesColor || 'black'; const yAxisIndicesColor = props.yAxisIndicesColor || 'black'; - const yAxisThickness = props.yAxisThickness || 1; + const yAxisThickness = + props.yAxisThickness === 0 ? 0 : props.yAxisThickness || 1; const yAxisColor = props.yAxisColor || 'black'; const yAxisTextStyle = props.yAxisTextStyle; const yAxisLabelContainerStyle = props.yAxisLabelContainerStyle; @@ -1344,7 +1349,9 @@ export const LineChart = (props: propTypes) => { pointerLabelComponent: null, shiftPointerLabelX: 0, shiftPointerLabelY: 0, - pointerLabelWidth: 40, + pointerLabelWidth: 20, + pointerLabelHeight: 20, + autoAdjustPointerLabelPosition: true, pointerVanishDelay: 150, activatePointersOnLongPress: false, activatePointersDelay: 150, @@ -1412,6 +1419,14 @@ export const LineChart = (props: propTypes) => { pointerConfig && pointerConfig.pointerLabelWidth ? pointerConfig.pointerLabelWidth : defaultPointerConfig.pointerLabelWidth; + const pointerLabelHeight = + pointerConfig && pointerConfig.pointerLabelHeight + ? pointerConfig.pointerLabelHeight + : defaultPointerConfig.pointerLabelHeight; + const autoAdjustPointerLabelPosition = + pointerConfig && pointerConfig.autoAdjustPointerLabelPosition + ? pointerConfig.autoAdjustPointerLabelPosition + : defaultPointerConfig.autoAdjustPointerLabelPosition; const pointerVanishDelay = pointerConfig && pointerConfig.pointerVanishDelay ? pointerConfig.pointerVanishDelay @@ -2487,21 +2502,39 @@ export const LineChart = (props: propTypes) => { {pointerLabelComponent && ( + style={[ + { + position: 'absolute', + left: autoAdjustPointerLabelPosition + ? pointerX < pointerLabelWidth / 2 + ? 7 + : !activatePointersOnLongPress && + pointerX > + (props.width || + Dimensions.get('window').width - + yAxisLabelWidth - + 15) - + pointerLabelWidth / 2 + ? -pointerLabelWidth - 4 + : pointerLabelWidth / -2 + 5 + : (pointerRadius || pointerWidth / 2) - + 10 + + shiftPointerLabelX, + top: autoAdjustPointerLabelPosition + ? pointerLabelHeight - pointerYLocal > 10 + ? 10 + : -pointerLabelHeight + : (pointerStripUptoDataPoint + ? pointerRadius || pointerStripHeight / 2 + : -pointerYLocal + 8) - + pointerLabelWidth / 2 + + shiftPointerLabelY, + marginTop: pointerStripUptoDataPoint + ? 0 + : containerHeight - pointerStripHeight, + width: pointerLabelWidth, + }, + ]}> {pointerLabelComponent(pointerItemLocal)} )} @@ -2678,6 +2711,11 @@ export const LineChart = (props: propTypes) => { return; } let x = evt.nativeEvent.locationX; + if ( + !activatePointersOnLongPress && + x > (props.width || Dimensions.get('window').width) + ) + return; let factor = (x - initialSpacing) / spacing; factor = Math.round(factor); factor = Math.min(factor, data.length - 1); @@ -2758,6 +2796,11 @@ export const LineChart = (props: propTypes) => { setResponderActive(true); } let x = evt.nativeEvent.locationX; + if ( + !activatePointersOnLongPress && + x > (props.width || Dimensions.get('window').width) + ) + return; let factor = (x - initialSpacing) / spacing; factor = Math.round(factor); factor = Math.min(factor, data.length - 1); @@ -2878,6 +2921,11 @@ export const LineChart = (props: propTypes) => { return; } let x = evt.nativeEvent.locationX; + if ( + !activatePointersOnLongPress && + x > (props.width || Dimensions.get('window').width) + ) + return; let factor = (x - initialSpacing) / spacing; factor = Math.round(factor); factor = Math.min(factor, data.length - 1); @@ -2958,6 +3006,11 @@ export const LineChart = (props: propTypes) => { setResponderActive(true); } let x = evt.nativeEvent.locationX; + if ( + !activatePointersOnLongPress && + x > (props.width || Dimensions.get('window').width) + ) + return; let factor = (x - initialSpacing) / spacing; factor = Math.round(factor); factor = Math.min(factor, data.length - 1);