feat: add yRange

rainbow-me · Oct 27, 2020 · 3188f34 · 3188f34
1 parent a795dd5
commit 3188f34
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/Example/ios/Podfile.lock b/Example/ios/Podfile.lock
@@ -302,7 +302,7 @@ PODS:
     - React
   - RNReactNativeHapticFeedback (1.10.0):
     - React
-  - RNReanimated (2.0.0-alpha.6):
+  - RNReanimated (2.0.0-alpha.7):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -510,7 +510,7 @@ SPEC CHECKSUMS:
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
   RNGestureHandler: b6b359bb800ae399a9c8b27032bdbf7c18f08a08
   RNReactNativeHapticFeedback: 22c5ecf474428766c6b148f96f2ff6155cd7225e
-  RNReanimated: 6bd3347e383cee6eb879a1a7d6c748934a015a05
+  RNReanimated: c40c29429b22a1564e505b789132cfcef456c6bd
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   Yoga: 7740b94929bbacbddda59bf115b5317e9a161598
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

diff --git a/Example/package.json b/Example/package.json
@@ -19,7 +19,7 @@
     "react-native": "0.63.2",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-haptic-feedback": "^1.10.0",
-    "react-native-reanimated": "^2.0.0-alpha.6",
+    "react-native-reanimated": "^2.0.0-alpha.7",
     "react-native-redash": "^14.2.4",
     "react-native-shadow-stack": "^0.0.5",
     "react-native-svg": "^12.1.0",

diff --git a/Example/yarn.lock b/Example/yarn.lock
@@ -5560,10 +5560,10 @@ react-native-haptic-feedback@^1.10.0:
   resolved "https://registry.yarnpkg.com/react-native-haptic-feedback/-/react-native-haptic-feedback-1.10.0.tgz#869d2e7179a17226becf43173c6f6495038524a0"
   integrity sha512-2aEXYTLrQq2N3phaGJ23V0x6qsIz4j1vhTck9A7geTfW7J54mOfk1Pr4Y1WEMMKptFA9p78kZHBb31IIE+g37w==
 
-react-native-reanimated@^2.0.0-alpha.6:
-  version "2.0.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.0.0-alpha.6.tgz#d3b55127e8202a12b9073c97086dfe85283c9e08"
-  integrity sha512-VlclQ4dlHM7e8F8HBgwqUQTfCNK3k+h13aL/9k/JMqx4CrUAWe2RYdsRWxurV3YrK0RYdjpM4AvmxqGvJKWuWA==
+react-native-reanimated@^2.0.0-alpha.7:
+  version "2.0.0-alpha.7"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.0.0-alpha.7.tgz#20b9852df6aeab9fc0efb938527bf47ae954370a"
+  integrity sha512-dAOkt087c3uSm9oTe8cDIKHbZ+D6X951OG/SWzGAOWaR9GH/JW5N++YjmxQX2IK1vFlYNCMfBnxjTuWT6QHfmQ==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.10.4"
     fbjs "^1.0.0"

diff --git a/README.md b/README.md
@@ -105,6 +105,7 @@ It's important to have it as a separated component because under this component
   - The `complex` strategy uses approach explained [here](https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74) using cubic splines. It's parametrized by `smoothingFactor`.
   - The `simple` strategy is a bit simplified `complex` strategy using quadratic splines. It's parametrized by `smoothingFactor`.
 - `smoothingFactor`. Is a value from `0` to `1` defining how smooth a presentation should be. `0` means no smoothing, and it's the default. `smoothingFactor` has an impact if `smoothingStrategy` is `simple` or `complex`.
+- `yRange`. 2-elements array with numbers describing minY and maxY in this order. When not applied, charts are automatically adjusted vertically. However, when data are monotonical, they might present incorrectly without bounding due to numerical issues. 
 
 ### `ChartPath`
 This component is used for showing the path itself.

diff --git a/src/charts/linear/ChartPath.js b/src/charts/linear/ChartPath.js
@@ -55,16 +55,18 @@ function combineConfigs(a, b) {
   return r;
 }
 
-const parse = data => {
+const parse = (data, yRange) => {
   const { greatestY, smallestY } = findYExtremes(data);
+  const minY = yRange ? yRange[0] : smallestY.y;
+  const maxY = yRange ? yRange[1] : greatestY.y;
   const smallestX = data[0];
   const greatestX = data[data.length - 1];
   return [
     data.map(({ x, y }) => ({
       originalX: x,
       originalY: y,
       x: (x - smallestX.x) / (greatestX.x - smallestX.x),
-      y: 1 - (y - smallestY.y) / (greatestY.y - smallestY.y),
+      y: 1 - (y - minY) / (maxY - minY),
     })),
     {
       greatestX,
@@ -202,7 +204,7 @@ export default function ChartPathProvider({
     if (!data || !data.points || data.points.length === 0) {
       return;
     }
-    const [parsedData] = parse(data.points);
+    const [parsedData] = parse(data.points, data.yRange);
     const [parsedoriginalData, newExtremes] = parse(
       data.nativePoints || data.points
     );