add readme and scrollable props plus fixes

Author: nhannah

README.md

@@ -0,0 +1,52 @@
+# react-native-slide-charts
+
+[![Version](https://img.shields.io/npm/v/react-native-slide-charts.svg)](https://www.npmjs.com/package/react-native-slide-charts)
+[![NPM](https://img.shields.io/npm/dm/react-native-slide-charts.svg)](https://www.npmjs.com/package/react-native-slide-charts)
+
+`react-native-slide-charts` uses [`react-native-svg`](https://github.com/react-native-community/react-native-svg), [`d3`](https://github.com/d3/d3), and [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) to create interactive charts.
+
+## [Check out the demo in expo](https://snack.expo.io/@nhannah/react-native-slide-charts)
+
+## Features
+
+### Bar Chart
+
+### Area Chart
+
+TODO: Gifs
+
+---
+
+## Installation
+
+---
+
+```console
+$ npm install react-native-slide-charts --save
+```
+
+or
+
+```console
+$ yarn add react-native-slide-charts
+```
+
+### Peer Dependencies
+
+`react-native-slide-charts` depends on three peer dependencies with native modules that must be installed alongside it. Follow the installation instructions for both iOS and Android for all three packages.
+
+| Package                                                                                               | Minimum Version | Maximum Version |
+| ----------------------------------------------------------------------------------------------------- | --------------- | --------------- |
+| [`react-native-svg`](https://github.com/react-native-community/react-native-svg)                      | 7.0.0           | 9.x             |
+| [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler)    | 1.1.0           | 1.x             |
+| [`react-native-haptic-feedback`](https://github.com/milk-and-cookies-io/react-native-haptic-feedback) | 1.8.0           | 1.x             |
+
+#### NOTICE:
+
+Make sure the version of the native module packages chosen works with the `react-native` version of the project. Manually linking the projects may be required depending on the version and platform.
+
+---
+
+## Usage
+
+---

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-slide-charts",
   "version": "0.0.6",
-  "description": "React Native slide charts uses d3 and react-native-gesture-handler to create interactive charts.",
+  "description": "React Native Slide Charts uses react-native-svg, d3, and react-native-gesture-handler to create interactive charts.",
   "homepage": "https://github.com/connectedcars/react-native-slide-charts",
   "repository": {
     "type": "git",

src/lib/SlideAreaChart.tsx

@@ -356,7 +356,7 @@ class SlideAreaChart extends Component<SlideAreaChartComponentProps, State> {
   }
 
   renderTouchable() {
-    const { onPress, axisWidth, shouldCancelWhenOutside, paddingLeft, paddingRight } = this.props
+    const { onPress, axisWidth, shouldCancelWhenOutside, paddingLeft, paddingRight, scrollable } = this.props
     const { x } = this.state
 
     /**
@@ -394,7 +394,7 @@ class SlideAreaChart extends Component<SlideAreaChartComponentProps, State> {
           shouldCancelWhenOutside={shouldCancelWhenOutside}
           minPointers={0}
           activeOffsetX={[-3, 3]}
-          failOffsetY={[-6, 6]}
+          failOffsetY={scrollable ? [-6, 6] : undefined}
           onGestureEvent={Animated.event([{ nativeEvent: { x } }], { useNativeDriver: true })}
 
           /**

src/lib/SlideBarChart.tsx

@@ -356,7 +356,7 @@ class SlideBarChart extends Component<SlideBarChartComponentProps, State> {
   }
 
   renderTouchable() {
-    const { onPress, axisWidth, shouldCancelWhenOutside, paddingLeft, paddingRight } = this.props
+    const { onPress, axisWidth, shouldCancelWhenOutside, paddingLeft, paddingRight, scrollable } = this.props
     const { x } = this.state
 
     /**
@@ -390,7 +390,7 @@ class SlideBarChart extends Component<SlideBarChartComponentProps, State> {
           shouldCancelWhenOutside={shouldCancelWhenOutside}
           minPointers={0}
           activeOffsetX={[-3, 3]}
-          failOffsetY={[-6, 6]}
+          failOffsetY={scrollable ? [-6, 6] : undefined}
           onGestureEvent={Animated.event([{ nativeEvent: { x } }], { useNativeDriver: true })}
 
           /**

src/lib/components/chartComponents/axis/XAxis.tsx

@@ -66,7 +66,7 @@ class XAxis extends Component<XAxisComponentProps> {
       axisLabelAlignment, scaleY, yRange, labelTopPadding, axisLabelStyle, height, labelBottomOffset,
       axisLabel, data, width, scaleX, axisMarkerLabels, axisWidth, paddingLeft, paddingRight
     } = this.props
-    const stopX = data.length > 0 ? scaleX(data[data.length - 1].x) : width - paddingRight
+    const stopX = data.length > 1 ? scaleX(data[data.length - 1].x) : width - paddingRight
 
     // Align label at start, end, or center of graph
     const labelAnchor = axisLabelAlignment === XAxisLabelAlignment.right ? 'end' :

src/lib/components/toolTip/ToolTip.tsx

@@ -50,9 +50,11 @@ class ToolTip extends Component<ToolTipComponentProps, State> {
   ) => {
     this.realPercentage = realPercentage
     this.toolTipPosition = { x, y, cursorMarkerHeight, standoff }
-    const { borderRadius } = this.props
+    const { borderRadius, lockTriangleCenter } = this.props
     const width = this.props.width ?? this.state.width
-    const labelPosition = x - (width / 10) - borderRadius - ((width - (width / 5) - (2 * borderRadius)) * realPercentage)
+    const labelPosition = lockTriangleCenter ?
+      x - (width / 2) :
+      x - (width / 10) - borderRadius - ((width - (width / 5) - (2 * borderRadius)) * realPercentage)
     if (this.toolTip.current != null) {
       this.toolTip.current.setNativeProps({
         top: y - cursorMarkerHeight / 2 - (this.state.height + width / 5) - standoff,
@@ -71,9 +73,11 @@ class ToolTip extends Component<ToolTipComponentProps, State> {
 
   // Set toolTip X position only
   setNativeToolTipPositionPropX = (x: number, realPercentage: number) => {
-    const { borderRadius } = this.props
+    const { borderRadius, lockTriangleCenter } = this.props
     const width = this.props.width ?? this.state.width
-    const labelPosition = x - (width / 10) - borderRadius - ((width - (width / 5) - (2 * borderRadius)) * realPercentage)
+    const labelPosition = lockTriangleCenter ?
+      x - (width / 2) :
+      x - (width / 10) - borderRadius - ((width - (width / 5) - (2 * borderRadius)) * realPercentage)
     if (this.toolTip.current != null) {
       this.toolTip.current.setNativeProps({ left: labelPosition })
     }

src/lib/utils/types.ts

@@ -25,6 +25,7 @@ type SharedChartComponentProps = {
   showIndicatorCallback?: (opacity: number) => void
   onPress?: () => void
   style?: StyleProp<ViewStyle>
+  scrollable?: boolean
 }
 
 type SharedChartProps = SharedChartComponentProps & {