mirror of
https://github.com/status-im/react-native-gifted-charts.git
synced 2025-02-22 08:38:07 +00:00
Merge pull request #335 from Abhinandan-Kushwaha/development
Development
This commit is contained in:
Abhinandan Kushwaha
GitHub
commit
2696017183
@ -24,6 +24,7 @@
|
||||
| isAnimated | Boolean | To show animated Line or Area Chart. Animation occurs when the chart load for the first time | false |
|
||||
| animateOnDataChange | Boolean | To show animation on change in data. A smooth transition takes place between the iold and new line | false |
|
||||
| onDataChangeAnimationDuration | number | Duration (milliseconds) in which the transition animation takes place on a change in data | 400 |
|
||||
| onPress | Function | The callback function that handles the press event. `item` and `index` are received as props | \_ |
|
||||
| scrollToEnd | Boolean | When set to true, the chart automatically scrolls to the rightmost data point | false |
|
||||
| scrollAnimation | Boolean | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost data point | true |
|
||||
| initialSpacing | number | distance of the first data point from the Y axis | 20 |
|
||||
@ -53,7 +54,7 @@ So, all the three must be used together. Using any 1 or 2 of them may produce ab
|
||||
| Key | Value type | Description |
|
||||
| ------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| value | number | Value of the item representing representing its position |
|
||||
| onPress | function | Function called on pressing the bar |
|
||||
| onPress | function | Function called on pressing the data point |
|
||||
| label | string | Label text appearing under the X axis |
|
||||
| labelTextStyle | object | Style object for the label text appearing under the X axis |
|
||||
| labelComponent | Function | custom label component appearing under the X axis |
|
||||
@ -405,25 +406,25 @@ When the chart is scrolled after pressing, it returns the index of the data poin
|
||||
When the chart is released, it returns the index -1.<br/>
|
||||
|
||||
|
||||
### onPress and strip related props
|
||||
### onFocus and strip related props
|
||||
|
||||
Line or Area charts can be made interactive by allowing users to press on the chart and highlight that particular data point. For example-
|
||||
|
||||
<img src='../../demos/focusPoint.gif' alt='' height=450 width=300/>
|
||||
|
||||
To achieve this the `pressEnabled` props must be set to true. In addition, use below props like `focusedDataPointShape`, `focusedDataPointColor`, `focusedDataPointRadius` to focus the pressed data point. The prop `onPress` can be used to pass a function that will be called when the press event is triggered.
|
||||
To achieve this the `focusEnabled` props must be set to true. In addition, use below props like `focusedDataPointShape`, `focusedDataPointColor`, `focusedDataPointRadius` to focus the pressed data point. The prop `onFocus` can be used to pass a function that will be called when a data point is focused.
|
||||
|
||||
| Prop | Type | Description | Default value |
|
||||
| ---------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
|
||||
| pressEnabled | Boolean | If set true, allows users to press on the chart (press event can be then handled using the `onPress` prop) | false |
|
||||
| showDataPointOnPress | Boolean | If set true, it shows the data point corresponding to the pressed area of the chart | false |
|
||||
| showStripOnPress | Boolean | If set true, it shows a vertical strip corresponding to the pressed area of the chart | false |
|
||||
| showTextOnPress | Boolean | If set true, it shows the data point text corresponding to the pressed area of the chart | false |
|
||||
| focusEnabled | Boolean | If set true, allows users to press on the chart and focuses the nearest data point (focus event can be then handled using the `onFocus` prop) | false |
|
||||
| onFocus | Function | The callback function that handles the focus event. `item` and `index` are received as props | \_ |
|
||||
| showDataPointOnFocus | Boolean | If set true, it shows the data point corresponding to the focused area of the chart | false |
|
||||
| showStripOnFocus | Boolean | If set true, it shows a vertical strip corresponding to the focused area of the chart | false |
|
||||
| showTextOnFocus | Boolean | If set true, it shows the data point text corresponding to the focused area of the chart | false |
|
||||
| stripHeight | number | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart | height of the data point |
|
||||
| stripWidth | number | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart | 2 |
|
||||
| stripColor | ColorValue | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | color of the line |
|
||||
| stripColor | ColorValue | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | 'orange' |
|
||||
| stripOpacity | number | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart | (startOpacity+endOpacity)/2 |
|
||||
| onPress | Function | The callback function that handles the press event. `item` and `index` are received as props | \_ |
|
||||
| unFocusOnPressOut | Boolean | If set true, it unselects/unfocuses the focused/selected data point | true |
|
||||
| delayBeforeUnFocus | number | Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point | 300 |
|
||||
| focusedDataPointShape | String | Shape of the data points when focused due to press event | item.dataPointsShape OR dataPointsShape |
|
||||
@ -433,16 +434,24 @@ To achieve this the `pressEnabled` props must be set to true. In addition, use b
|
||||
| focusedDataPointRadius | number | Radius of the data points when focused due to press event | item.dataPointsRadius OR dataPointsRadius |
|
||||
| focusedCustomDataPoint | Function | Custom data point when focused due to press event | item.customDataPoint OR customDataPoint |
|
||||
|
||||
#### Example of onPress :
|
||||
#### Example of onFocus :
|
||||
|
||||
```js
|
||||
onPress={(item, index) => {
|
||||
onFocus={(item, index) => {
|
||||
Alert.alert(item.value)
|
||||
}}
|
||||
```
|
||||
|
||||
Above code changes the pressed data point's color and radius. Since in this example, we are changing the data on the onPress event, the data must be a state variable.
|
||||
***Note*** Some props have been renamed in version `1.3.2`
|
||||
Here is the list of prop names changed in version `1.3.2`-
|
||||
|
||||
| Prop name prior to version `1.3.2` | Prop name in and after `1.3.2` |
|
||||
| ---------------------------------- | -------------------------------------------------------------- |
|
||||
| pressEnabled | focusEnabled |
|
||||
| onPress | onFocus (onPress also exists but has diffferent functionality) |
|
||||
| showDataPointOnPress | showDataPointOnFocus |
|
||||
| showStripOnPress | showStripOnFocus |
|
||||
| showTextOnPress | showTextOnFocus |
|
||||
---
|
||||
|
||||
### Props for Area Chart
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-native-gifted-charts",
|
||||
"version": "1.3.1",
|
||||
"version": "1.3.2",
|
||||
"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": [
|
||||
|
||||
@ -55,10 +55,11 @@ type propTypes = {
|
||||
rulesLength?: number;
|
||||
rulesColor?: ColorValue;
|
||||
rulesThickness?: number;
|
||||
pressEnabled?: Boolean;
|
||||
showDataPointOnPress?: Boolean;
|
||||
showStripOnPress?: Boolean;
|
||||
showTextOnPress?: Boolean;
|
||||
focusEnabled?: Boolean;
|
||||
onFocus?: Function;
|
||||
showDataPointOnFocus?: Boolean;
|
||||
showStripOnFocus?: Boolean;
|
||||
showTextOnFocus?: Boolean;
|
||||
stripHeight?: number;
|
||||
stripWidth?: number;
|
||||
stripColor?: ColorValue | String | any;
|
||||
@ -713,10 +714,10 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
|
||||
const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
|
||||
|
||||
const pressEnabled = props.pressEnabled || false;
|
||||
const showDataPointOnPress = props.showDataPointOnPress || false;
|
||||
const showStripOnPress = props.showStripOnPress || false;
|
||||
const showTextOnPress = props.showTextOnPress || false;
|
||||
const focusEnabled = props.focusEnabled || false;
|
||||
const showDataPointOnFocus = props.showDataPointOnFocus || false;
|
||||
const showStripOnFocus = props.showStripOnFocus || false;
|
||||
const showTextOnFocus = props.showTextOnFocus || false;
|
||||
const stripHeight = props.stripHeight;
|
||||
const stripWidth = props.stripWidth === 0 ? 0 : props.stripWidth || 2;
|
||||
const stripColor = props.stripColor || color;
|
||||
@ -917,8 +918,8 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
|
||||
const onStripPress = (item, index) => {
|
||||
setSelectedIndex(index);
|
||||
if (props.onPress) {
|
||||
props.onPress(item, index);
|
||||
if (props.onFocus) {
|
||||
props.onFocus(item, index);
|
||||
}
|
||||
};
|
||||
|
||||
@ -964,16 +965,13 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
item.dataPointHeight ||
|
||||
dataPtsHeight;
|
||||
dataPointsColor =
|
||||
item.focusedDataPointColor ||
|
||||
props.focusedDataPointColor ||
|
||||
item.dataPointColor ||
|
||||
dataPtsColor;
|
||||
item.focusedDataPointColor || props.focusedDataPointColor || 'orange';
|
||||
dataPointsRadius =
|
||||
item.focusedDataPointRadius ||
|
||||
props.focusedDataPointRadius ||
|
||||
item.dataPointRadius ||
|
||||
dataPtsRadius;
|
||||
if (showTextOnPress) {
|
||||
if (showTextOnFocus) {
|
||||
text = item.dataPointText;
|
||||
}
|
||||
customDataPoint =
|
||||
@ -989,7 +987,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
dataPointsHeight = item.dataPointHeight || dataPtsHeight;
|
||||
dataPointsColor = item.dataPointColor || dataPtsColor;
|
||||
dataPointsRadius = item.dataPointRadius || dataPtsRadius;
|
||||
if (showTextOnPress) {
|
||||
if (showTextOnFocus) {
|
||||
text = '';
|
||||
}
|
||||
customDataPoint = item.customDataPoint || props.customDataPoint;
|
||||
@ -1006,7 +1004,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
{pressEnabled ? (
|
||||
{focusEnabled ? (
|
||||
<>
|
||||
{unFocusOnPressOut ? (
|
||||
<Rect
|
||||
@ -1033,7 +1031,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
</>
|
||||
) : null}
|
||||
{item.showStrip ||
|
||||
(pressEnabled && index === selectedIndex && showStripOnPress) ? (
|
||||
(focusEnabled && index === selectedIndex && showStripOnFocus) ? (
|
||||
<Rect
|
||||
x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
|
||||
y={
|
||||
@ -1082,7 +1080,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
width={dataPointsWidth}
|
||||
height={dataPointsHeight}
|
||||
fill={
|
||||
showDataPointOnPress
|
||||
showDataPointOnFocus
|
||||
? index === selectedIndex
|
||||
? dataPointsColor
|
||||
: 'none'
|
||||
@ -1110,7 +1108,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
}
|
||||
r={dataPointsRadius}
|
||||
fill={
|
||||
showDataPointOnPress
|
||||
showDataPointOnFocus
|
||||
? index === selectedIndex
|
||||
? dataPointsColor
|
||||
: 'none'
|
||||
@ -1128,7 +1126,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
</Fragment>
|
||||
)}
|
||||
{dataPointLabelComponent ? (
|
||||
!showTextOnPress || index === selectedIndex ? (
|
||||
!showTextOnFocus || index === selectedIndex ? (
|
||||
<View
|
||||
style={[
|
||||
styles.customDataPointContainer,
|
||||
@ -1157,7 +1155,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
</View>
|
||||
) : null
|
||||
) : text || item.dataPointText ? (
|
||||
!showTextOnPress || index === selectedIndex ? (
|
||||
!showTextOnFocus || index === selectedIndex ? (
|
||||
<CanvasText
|
||||
fill={item.textColor || textColor}
|
||||
fontSize={item.textFontSize || textFontSize}
|
||||
@ -1174,7 +1172,7 @@ export const LineChartBicolor = (props: propTypes) => {
|
||||
(item.value * containerHeight) / maxValue +
|
||||
(item.textShiftY || props.textShiftY || 0)
|
||||
}>
|
||||
{!showTextOnPress ? item.dataPointText : text}
|
||||
{!showTextOnFocus ? item.dataPointText : text}
|
||||
</CanvasText>
|
||||
) : null
|
||||
) : null}
|
||||
|
||||
@ -78,10 +78,11 @@ type propTypes = {
|
||||
rulesLength?: number;
|
||||
rulesColor?: ColorValue;
|
||||
rulesThickness?: number;
|
||||
pressEnabled?: Boolean;
|
||||
showDataPointOnPress?: Boolean;
|
||||
showStripOnPress?: Boolean;
|
||||
showTextOnPress?: Boolean;
|
||||
focusEnabled?: Boolean;
|
||||
onFocus?: Function;
|
||||
showDataPointOnFocus?: Boolean;
|
||||
showStripOnFocus?: Boolean;
|
||||
showTextOnFocus?: Boolean;
|
||||
stripHeight?: number;
|
||||
stripWidth?: number;
|
||||
stripColor?: ColorValue | String | any;
|
||||
@ -1985,10 +1986,10 @@ export const LineChart = (props: propTypes) => {
|
||||
const dashWidth = props.dashWidth === 0 ? 0 : props.dashWidth || 4;
|
||||
const dashGap = props.dashGap === 0 ? 0 : props.dashGap || 8;
|
||||
|
||||
const pressEnabled = props.pressEnabled || false;
|
||||
const showDataPointOnPress = props.showDataPointOnPress || false;
|
||||
const showStripOnPress = props.showStripOnPress || false;
|
||||
const showTextOnPress = props.showTextOnPress || false;
|
||||
const focusEnabled = props.focusEnabled || false;
|
||||
const showDataPointOnFocus = props.showDataPointOnFocus || false;
|
||||
const showStripOnFocus = props.showStripOnFocus || false;
|
||||
const showTextOnFocus = props.showTextOnFocus || false;
|
||||
const stripHeight = props.stripHeight;
|
||||
const stripWidth = props.stripWidth === 0 ? 0 : props.stripWidth || 2;
|
||||
const stripColor = props.stripColor || color1;
|
||||
@ -2225,8 +2226,8 @@ export const LineChart = (props: propTypes) => {
|
||||
|
||||
const onStripPress = (item, index) => {
|
||||
setSelectedIndex(index);
|
||||
if (props.onPress) {
|
||||
props.onPress(item, index);
|
||||
if (props.onFocus) {
|
||||
props.onFocus(item, index);
|
||||
}
|
||||
};
|
||||
|
||||
@ -2272,16 +2273,13 @@ export const LineChart = (props: propTypes) => {
|
||||
item.dataPointHeight ||
|
||||
dataPtsHeight;
|
||||
dataPointsColor =
|
||||
item.focusedDataPointColor ||
|
||||
props.focusedDataPointColor ||
|
||||
item.dataPointColor ||
|
||||
dataPtsColor;
|
||||
item.focusedDataPointColor || props.focusedDataPointColor || 'orange';
|
||||
dataPointsRadius =
|
||||
item.focusedDataPointRadius ||
|
||||
props.focusedDataPointRadius ||
|
||||
item.dataPointRadius ||
|
||||
dataPtsRadius;
|
||||
if (showTextOnPress) {
|
||||
if (showTextOnFocus) {
|
||||
text = item.dataPointText;
|
||||
}
|
||||
customDataPoint =
|
||||
@ -2297,7 +2295,7 @@ export const LineChart = (props: propTypes) => {
|
||||
dataPointsHeight = item.dataPointHeight || dataPtsHeight;
|
||||
dataPointsColor = item.dataPointColor || dataPtsColor;
|
||||
dataPointsRadius = item.dataPointRadius || dataPtsRadius;
|
||||
if (showTextOnPress) {
|
||||
if (showTextOnFocus) {
|
||||
text = '';
|
||||
}
|
||||
customDataPoint = item.customDataPoint || props.customDataPoint;
|
||||
@ -2314,7 +2312,7 @@ export const LineChart = (props: propTypes) => {
|
||||
|
||||
return (
|
||||
<Fragment key={index}>
|
||||
{pressEnabled ? (
|
||||
{focusEnabled ? (
|
||||
<>
|
||||
{unFocusOnPressOut ? (
|
||||
<Rect
|
||||
@ -2341,7 +2339,7 @@ export const LineChart = (props: propTypes) => {
|
||||
</>
|
||||
) : null}
|
||||
{item.showStrip ||
|
||||
(pressEnabled && index === selectedIndex && showStripOnPress) ? (
|
||||
(focusEnabled && index === selectedIndex && showStripOnFocus) ? (
|
||||
<Rect
|
||||
x={initialSpacing + (spacing * index - dataPointsWidth / 2)}
|
||||
y={
|
||||
@ -2390,7 +2388,7 @@ export const LineChart = (props: propTypes) => {
|
||||
width={dataPointsWidth}
|
||||
height={dataPointsHeight}
|
||||
fill={
|
||||
showDataPointOnPress
|
||||
showDataPointOnFocus
|
||||
? index === selectedIndex
|
||||
? dataPointsColor
|
||||
: 'none'
|
||||
@ -2418,7 +2416,7 @@ export const LineChart = (props: propTypes) => {
|
||||
}
|
||||
r={dataPointsRadius}
|
||||
fill={
|
||||
showDataPointOnPress
|
||||
showDataPointOnFocus
|
||||
? index === selectedIndex
|
||||
? dataPointsColor
|
||||
: 'none'
|
||||
@ -2436,7 +2434,7 @@ export const LineChart = (props: propTypes) => {
|
||||
</Fragment>
|
||||
)}
|
||||
{dataPointLabelComponent ? (
|
||||
!showTextOnPress || index === selectedIndex ? (
|
||||
!showTextOnFocus || index === selectedIndex ? (
|
||||
<View
|
||||
style={[
|
||||
styles.customDataPointContainer,
|
||||
@ -2465,7 +2463,7 @@ export const LineChart = (props: propTypes) => {
|
||||
</View>
|
||||
) : null
|
||||
) : text || item.dataPointText ? (
|
||||
!showTextOnPress || index === selectedIndex ? (
|
||||
!showTextOnFocus || index === selectedIndex ? (
|
||||
<CanvasText
|
||||
fill={item.textColor || textColor}
|
||||
fontSize={item.textFontSize || textFontSize}
|
||||
@ -2482,7 +2480,7 @@ export const LineChart = (props: propTypes) => {
|
||||
(item.value * containerHeight) / maxValue +
|
||||
(item.textShiftY || props.textShiftY || 0)
|
||||
}>
|
||||
{!showTextOnPress ? item.dataPointText : text}
|
||||
{!showTextOnFocus ? item.dataPointText : text}
|
||||
</CanvasText>
|
||||
) : null
|
||||
) : null}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
8. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
|
||||
9. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
|
||||
10. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
|
||||
|
||||
11. Add about endSpacing in docs
|
||||
|
||||
## Architecture Enhancement
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user