This commit is contained in:
Abhinandan-Kushwaha 2022-04-25 18:28:56 +05:30
parent 7fe096aa5d
commit 774e590b5e
4 changed files with 158 additions and 33 deletions

93
App.js
View File

@ -946,39 +946,86 @@ const App = () => {
{value: 0.7, label: '6'},
];
const [myData, setMyData] = useState([]);
useEffect(() => {
setTimeout(() => setMyData(barDatas), 500);
}, []);
const llData = [
{value: 70},
{value: 36},
{value: 50},
{value: 40},
{value: 18},
{value: 38},
];
const llData2 = [
{value: 50},
{value: 10},
{value: 45},
{value: 30},
{value: 45},
{value: 18},
];
return (
<View
style={{
// flex: 1,
paddingVertical: 100,
paddingLeft: 20,
// backgroundColor: 'black',
backgroundColor: '#1C1C1C',
}}>
<LineChart
areaChart
showFractionalValues
showYAxisIndices
showXAxisIndices
hideRules
noOfSections={5}
adjustToWidth
data={myData}
showGradient
frontColor={'#1B6BB0'}
gradientColor={'#FFEEFE'}
backgroundColor={'#FECF9E'}
onPress={onBarPressed}
// isAnimated
// animateOnDataChange
startOpacity={0}
curved
data={llData}
data2={llData2}
hideDataPoints
spacing={68}
color1="#8a56ce"
color2="#56acce"
startFillColor1="#8a56ce"
startFillColor2="#56acce"
endFillColor1="#8a56ce"
endFillColor2="#56acce"
startOpacity={0.9}
endOpacity={0.2}
initialSpacing={0}
noOfSections={4}
yAxisColor="white"
yAxisThickness={0.001}
rulesType="solid"
rulesColor="gray"
yAxisTextStyle={{color: 'gray'}}
yAxisLabelSuffix="%"
xAxisColor="lightgray"
pointerConfig={{
pointerStripUptoDataPoint: true,
pointerStripColor: 'lightgray',
pointerStripWidth: 2,
strokeDashArray: [2, 5],
pointerColor: 'lightgray',
radius: 4,
pointerLabelWidth: 100,
pointerLabelComponent: items => {
return (
<View
style={{
height: 120,
width: 100,
backgroundColor: '#282C3E',
position: 'absolute',
left: -40,
top: -90,
borderRadius: 4,
justifyContent:'center',
paddingLeft:16,
}}>
<Text style={{color: 'lightgray',fontSize:12}}>{2018}</Text>
<Text style={{color: 'white', fontWeight:'bold'}}>{items[0].value}</Text>
<Text style={{color: 'lightgray',fontSize:12,marginTop:12}}>{2019}</Text>
<Text style={{color: 'white', fontWeight:'bold'}}>{items[1].value}</Text>
</View>
);
},
}}
/>
{/* <BarChart
data={pieData}
radius={150}

View File

@ -300,6 +300,7 @@ type Pointer = {
hidePointer3?: boolean; // default: false
hidePointer4?: boolean; // default: false
hidePointer5?: boolean; // default: false
strokeDashArray?: Array<number>;
};
```
@ -311,6 +312,12 @@ The above properties can be understood with this labelled diagram-
**Note** If you are using the `pointerConfig` prop, the scroll will be disabled automatically. This is because, it's difficult to achive both scrolling line and scrolling pointer simultaneously. So if you want to retain the scroll behaviour even after passing the `pointerConfig` prop, then set the property `activatePointersOnLongPress` to true inside the pointerConfig object. This will make the pointers visible only after long press. So, before the long press, user can can scroll the line. Once long pressed, scrolling will be disabled until the release of the long press.
The duration after which a press event will be considered as long press can be controlled using the `activatePointersDelay` property inside the pointerConfig object. The default value of activatePointersDelay is 150.
The <b>strokeDashArray</b> property lets us render a dashed/dotted strip along the pointer.
#### pointerLabelComponent
<b>pointerLabelComponent</b> is a function that returns the component to be rendered as a Label. It takes a single parameter - an array of items. So, if there are multiple data arrays, the parameter <b>items</b> will have the data item corresponding to each data array.
### onPress and strip related props

View File

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

View File

@ -22,6 +22,7 @@ import Svg, {
Circle,
Rect,
Text as CanvasText,
Line,
} from 'react-native-svg';
import {svgPath, bezierCommand} from '../utils';
import Rule from '../Components/lineSvg';
@ -347,6 +348,7 @@ type Pointer = {
hidePointer3?: boolean;
hidePointer4?: boolean;
hidePointer5?: boolean;
strokeDashArray?: Array<number>;
};
export const LineChart = (props: propTypes) => {
@ -2399,24 +2401,77 @@ export const LineChart = (props: propTypes) => {
}}
/>
)}
</View>
);
};
const renderStripAndLabel = () => {
let pointerItemLocal, pointerYLocal;
pointerItemLocal = [pointerItem];
let arr = [pointerY];
if (pointerY2 !== 0) {
arr.push(pointerY2);
pointerItemLocal.push(pointerItem2);
}
if (pointerY3 !== 0) {
arr.push(pointerY3);
pointerItemLocal.push(pointerItem3);
}
if (pointerY4 !== 0) {
arr.push(pointerY4);
pointerItemLocal.push(pointerItem4);
}
if (pointerY5 !== 0) {
arr.push(pointerY5);
pointerItemLocal.push(pointerItem5);
}
pointerYLocal = Math.min(...arr);
return (
<View
style={{
position: 'absolute',
left: pointerX + (pointerItemLocal[0].pointerShiftX || 0),
top: pointerYLocal,
}}>
{showPointerStrip && (
<View
style={{
position: 'absolute',
left: pointerRadius || pointerWidth / 2,
left: (pointerRadius || pointerWidth) - pointerStripWidth / 4,
top: pointerStripUptoDataPoint
? pointerRadius || pointerStripHeight / 2
: -pointerYLocal + 8,
height: pointerStripUptoDataPoint
? containerHeight - pointerYLocal - 10
: pointerStripHeight,
width: pointerStripWidth,
backgroundColor: pointerStripColor,
height: pointerStripUptoDataPoint
? containerHeight - pointerYLocal + 5 - xAxisThickness
: pointerStripHeight,
marginTop: pointerStripUptoDataPoint
? 0
: containerHeight - pointerStripHeight,
}}
/>
}}>
<Svg>
<Line
stroke={pointerStripColor}
strokeWidth={pointerStripWidth}
strokeDasharray={
pointerConfig.strokeDashArray
? pointerConfig.strokeDashArray
: ''
}
x1={0}
y1={0}
x2={0}
// strokeLinecap="round"
y2={
pointerStripUptoDataPoint
? containerHeight - pointerYLocal + 5 - xAxisThickness
: pointerStripHeight
}
/>
</Svg>
</View>
)}
{pointerLabelComponent && (
@ -2783,7 +2838,6 @@ export const LineChart = (props: propTypes) => {
endOpacity,
strokeDashArray,
)}
{pointerX ? renderPointer(lineNumber) : null}
</View>
);
};
@ -2985,7 +3039,6 @@ export const LineChart = (props: propTypes) => {
endOpacity,
strokeDashArray,
)}
{pointerX ? renderPointer(lineNumber) : null}
</Animated.View>
);
};
@ -3220,6 +3273,24 @@ export const LineChart = (props: propTypes) => {
strokeDashArray5,
)
: null}
{pointerX ? (
<View
style={{
position: 'absolute',
height:
containerHeight + 10 + horizSectionsBelow.length * stepHeight,
bottom: 60 + labelsExtraHeight,
width: totalWidth,
zIndex: 20,
}}>
{renderPointer(1)}
{points2 ? renderPointer(2) : null}
{points3 ? renderPointer(3) : null}
{points4 ? renderPointer(4) : null}
{points5 ? renderPointer(5) : null}
{renderStripAndLabel()}
</View>
) : null}
{data.map((item: itemType, index: number) => {
// console.log('item', item)
return (