Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update documentation links and fix naming inconsistencies #100

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update documentation links and fix naming inconsistencies #100

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ It's a part of the [Rainbow.me project](https://rainbow.me/).

## Installation

1. Install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/next/fundamentals/installation) in the newest version.
2.
Install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/next/fundamentals/installation) in the newest version.

```bash
yarn add @rainbow-me/animated-charts
```
Expand Down Expand Up @@ -90,7 +90,7 @@ The code above generates the chart below:
### Linear charts

### `ChartPathProvider`
The whole chart's structure has to be wrapped with `ChartProvider`. It's responsible for data managing and itself does not have a visual impact on the layout. Under the hood, it uses context API to simplify manipulation with other components. The rule is to use one data series for each wrapper.
The whole chart's structure has to be wrapped with `ChartPathProvider`. It's responsible for data managing and itself does not have a visual impact on the layout. Under the hood, it uses context API to simplify manipulation with other components. The rule is to use one data series for each wrapper.
It's important to have it as a separated component because under this component it's possible `useChartData` hook and put `ChartDot` component. However, if you don't need those features, you can pass `data` directly to `ChartPath` and drop this wrapper.

| Prop name | type | default / obligatory | description |
Expand All @@ -113,18 +113,18 @@ This component is used for showing the path itself.
| Prop name | type | default / obligatory | description |
|--------------------------------------|------------|------------------------|-------------|
| `smoothingWhileTransitioningEnabled` | `number` | `false` | Although smoothing is not complex computing, it might impact performance in some low-end devices so while having a big set of data it might be worth disable smoothing while transitioning. |
| `height` | `number` | obligatory | Height od the SVG canvas |
| `width` | `number` | obligatory | Width od the SVG canvas |
| `height` | `number` | obligatory | Height of the SVG canvas |
| `width` | `number` | obligatory | Width of the SVG canvas |
| `strokeWidth` | `number` | `1` | Width of the path. |
| `selectedStrokeWidth` | `number` | `1` | Width of the path selected. |
| `gestureEnabled` | `boolean` | `true` | Defines if interaction with the chart should be allowed or not |
| `longPressGestureHandlerProps` | `object` | `{maxDist: 100000, minDurationMs: 0, shouldCancelWhenOutside: false}` | Under the hood we're using `LongPressGestureHandler` for handling interactions. It's recommended to not override its props. However, it might be useful while interacting with another GH. |
| `selectedOpacity` | `number` | `0.7` | Target opacity of the path while touching the chart.
| `hitSlop` | `number` | `0` | While scrubbing the chart touching edges of the screen you may want make points on the edges more accessible. With `hitSlop` it's possible to access points on edges doubling the speed of scrubbing beyond this margin. |
| `hapticsEnabled` | `boolean` | `false` | On pressing in/out on the chart it might be expected to make haptic feedback. It will happen with `hapticsEnabled` set to `true`. |
| `springConfig` | object | `{damping: 15, mass: 1, stiffness: 600}` | Object [defining the spring animation](https://docs.swmansion.com/react-native-reanimated/docs/next/animations). This spring is used for a dot's scale.
| `timingFeedbackConfig` | object | `{duration: 80}` | Object [defining the timing animation](https://docs.swmansion.com/react-native-reanimated/docs/next/animations). `timingFeedbackConfig` is used for a path's opacity and width.
| `timingAnimationConfig` | object | `{duration: 300}` | Object [defining the timing animation](https://docs.swmansion.com/react-native-reanimated/docs/next/animations). `timingAnimationConfig` is used for the transition between chart's data.
| `springConfig` | object | `{damping: 15, mass: 1, stiffness: 600}` | Object [defining the spring animation](https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring). This spring is used for a dot's scale.
| `timingFeedbackConfig` | object | `{duration: 80}` | Object [defining the timing animation](https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming). `timingFeedbackConfig` is used for a path's opacity and width.
| `timingAnimationConfig` | object | `{duration: 300}` | Object [defining the timing animation](https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming). `timingAnimationConfig` is used for the transition between chart's data.
| ...rest | `object` | `{}` | Props applied to SVG [Path](https://github.com/react-native-community/react-native-svg#path). |


Expand Down Expand Up @@ -192,7 +192,7 @@ E.g.
`o--------------Min------------o---------o---------o---------o`

### `bSplineInterpolation({ degree = 3, ...params })`
`bSplineInterpolation` is inspired by [victorian lib](https://github.com/networkcube/vistorian/blob/17e2be9b51267509ea67b5984421d8c03558d928/core/lib/BSpline.js)
`bSplineInterpolation` is inspired by [vistorian lib](https://github.com/networkcube/vistorian/blob/17e2be9b51267509ea67b5984421d8c03558d928/core/lib/BSpline.js)
and uses [B-spline](https://en.wikipedia.org/wiki/B-spline) interpolation of a given `degree`.

### `monotoneCubicInterpolation({ ...params })`
Expand Down Expand Up @@ -238,4 +238,4 @@ There're a few things left to make it polished regarding linear charts:

## License

Reanimated library is licensed under [The MIT License](LICENSE).
React Native Animated Charts is licensed under [The MIT License](LICENSE).