status-im/react-native-gifted-charts
2
0
Fork 0
mirror of https://github.com/status-im/react-native-gifted-charts.git synced 2025-02-22 16:48:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

added the prop customDataPoint to render a custom component as the data points

Browse Source
This commit is contained in:
Abhinandan Kushwaha 2021-12-02 18:55:03 +05:30
parent ad2a132666
commit 62835a4010
4 changed files with 82 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
App.js
View File

@ -51,7 +51,7 @@ const App = () => {
height={300}
maxValue={360}
showLine
initialSpacing={20}
initialSpacing={30}
// showVerticalLines
lineConfig={{
// isAnimated: true,
@ -135,12 +135,26 @@ const App = () => {
data={data}
// data2={lineData1}
areaChart
initialSpacing={10}
initialSpacing={20}
customDataPoint={() => {
return (
<View
style={{
height: 10,
width: 10,
backgroundColor: 'red',
borderWidth: 2,
borderColor: 'blue',
borderRadius: 5,
}}
/>
);
}}
onPress={(item, index) => {
console.log('index-->', index);
setData(data => {
item.dataPointColor = 'green';
item.dataPointRadius = 6;
// item.dataPointRadius = 5;
item.dataPointText = item.value;
// item.dataPointShape = 'rectangular';
// item.dataPointWidth = 10;
@ -160,9 +174,9 @@ const App = () => {
textFontSize={18}
textColor={'green'}
stripWidth={1}
stripHeight={200}
// stripHeight={200}
stripOpacity={0.4}
// stripHeight={200}
stripOpacity={1}
curved
isAnimated
animationDuration={2000}
@ -172,9 +186,9 @@ const App = () => {
color={'rgb(78, 0, 142)'}
yAxisColor={'rgb(78, 0, 142)'}
xAxisColor={'rgb(78, 0, 142)'}
dataPointsColor={'rgb(78, 0, 142)'}
dataPointsWidth={8}
dataPointsHeight={8}
// dataPointsColor={'yellow'}
dataPointsWidth={22}
dataPointsHeight={22}
xAxisThickness={3}
yAxisThickness={3}
dataPointsRadius={4}

1
docs/LineChart/LineChartProps.md
View File

@ -174,6 +174,7 @@ type referenceConfigType = {
| textFontSize | number | Font size of the dataPointText | \_ |
| textShiftX | number | To shift the dataPointText text horizontally | 0 |
| textShiftY | number | To shift the dataPointText text vertically | 0 |
| customDataPoint | Function | A callback function to render a custom component as the data points | \_ |
---

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-native-gifted-charts",
"version": "0.2.0",
"version": "0.2.1",
"description": "The most complete library for Bar, Line, Area, Pie and Donut charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
"main": "src/index.tsx",
"files": [

101
src/LineChart/index.tsx
View File

@ -138,6 +138,7 @@ type propTypes = {
dataPointsRadius3?: number;
dataPointsColor3?: string;
dataPointsShape3?: string;
customDataPoint?: Function;
startFillColor?: string;
endFillColor?: string;
@ -1182,24 +1183,18 @@ export const LineChart = (props: propTypes) => {
)}
{index === selectedIndex && showStripOnPress ? (
<Rect
x={
initialSpacing / 2 +
(spacing * index - stripWidth) +
stripWidth / 2 +
1
}
x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
y={
stripHeight
? containerHeight - stripHeight + 8
: containerHeight -
dataPointsHeight / 2 +
15 -
20 -
(item.value * containerHeight) / maxValue
}
width={stripWidth}
height={
stripHeight ||
containerHeight - dataPointsHeight / 2 + 10 - 0
stripHeight || containerHeight - dataPointsHeight / 2 + 20
}
opacity={stripOpacity}
fill={stripColor}
@ -1207,26 +1202,44 @@ export const LineChart = (props: propTypes) => {
) : null}
</>
) : null}
{props.customDataPoint ? (
<View
style={{
position: 'absolute',
height: dataPointsHeight,
width: dataPointsWidth,
// backgroundColor: 'orange',
top:
containerHeight - (item.value * containerHeight) / maxValue,
left: initialSpacing - dataPointsWidth + spacing * index,
justifyContent: 'center',
alignItems: 'center',
}}>
{props.customDataPoint()}
</View>
) : null}
{dataPointsShape === 'rectangular' ? (
<Fragment key={index}>
<Rect
x={initialSpacing - dataPointsWidth + spacing * index}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue
}
width={dataPointsWidth}
height={dataPointsHeight}
fill={
showDataPointOnPress
? index === selectedIndex
? dataPointsColor
: 'none'
: dataPointsColor
}
/>
{props.customDataPoint ? null : (
<Rect
x={initialSpacing - dataPointsWidth + spacing * index}
y={
containerHeight -
dataPointsHeight / 2 +
10 -
(item.value * containerHeight) / maxValue
}
width={dataPointsWidth}
height={dataPointsHeight}
fill={
showDataPointOnPress
? index === selectedIndex
? dataPointsColor
: 'none'
: dataPointsColor
}
/>
)}
{text ? (
!showTextOnPress || index === selectedIndex ? (
<CanvasText
@ -1255,22 +1268,24 @@ export const LineChart = (props: propTypes) => {
</Fragment>
) : (
<Fragment key={index}>
<Circle
cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
cy={
containerHeight +
10 -
(item.value * containerHeight) / maxValue
}
r={dataPointsRadius}
fill={
showDataPointOnPress
? index === selectedIndex
? dataPointsColor
: 'none'
: dataPointsColor
}
/>
{props.customDataPoint ? null : (
<Circle
cx={initialSpacing - dataPointsWidth / 2 + spacing * index}
cy={
containerHeight +
10 -
(item.value * containerHeight) / maxValue
}
r={dataPointsRadius}
fill={
showDataPointOnPress
? index === selectedIndex
? dataPointsColor
: 'none'
: dataPointsColor
}
/>
)}
{text ? (
!showTextOnPress || index === selectedIndex ? (
<CanvasText