add readme and scrollable props plus fixes

connectedcars · Jan 21, 2020 · bf461a9 · bf461a9
1 parent e900be4
commit bf461a9
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 10 deletions.
diff --git a/README.md b/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
+
+---
diff --git a/package.json b/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",

diff --git a/src/lib/SlideAreaChart.tsx b/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 })}
 
  /**

diff --git a/src/lib/SlideBarChart.tsx b/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 })}
 
  /**

diff --git a/src/lib/components/chartComponents/axis/XAxis.tsx b/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' :

diff --git a/src/lib/components/toolTip/ToolTip.tsx b/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 })
  }

diff --git a/src/lib/utils/types.ts b/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 & {