From c4177e8876ddc124ae9d7b4481e7d92d2d8b5c9e Mon Sep 17 00:00:00 2001
From: Luechen Christopher <luechenchris@gmail.com>
Date: Fri, 6 May 2022 15:56:59 -0500
Subject: [PATCH] feat: add prop yAxisLabelInterval

---
 README.md             |  8 +++++---
 src/AbstractChart.tsx | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 0152c721..0978eeaf 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,7 @@ import {
     yAxisLabel="$"
     yAxisSuffix="k"
     yAxisInterval={1} // optional, defaults to 1
+    yAxisLabelInterval={1} // optional, defaults to 1
     chartConfig={{
       backgroundColor: "#e26a00",
       backgroundGradientFrom: "#fb8c00",
@@ -154,8 +155,8 @@ const data = {
 | Property                | Type                    | Description                                                                                                                                                                                                                    |
 | ----------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | data                    | Object                  | Data for the chart - see example above                                                                                                                                                                                         |
-| width                   | Number                  | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive                                                                                                                                    |
-| height                  | Number                  | Height of the chart                                                                                                                                                                                                            |
+| width                   | number                  | Width of the chart, use 'Dimensions' library to get the width of your screen for responsive                                                                                                                                    |
+| height                  | number                  | Height of the chart                                                                                                                                                                                                            |
 | withDots                | boolean                 | Show dots on the line - default: True                                                                                                                                                                                          |
 | withShadow              | boolean                 | Show shadow for line - default: True                                                                                                                                                                                           |
 | withInnerLines          | boolean                 | Show inner dashed lines - default: True                                                                                                                                                                                        |
@@ -168,7 +169,8 @@ const data = {
 | yAxisLabel              | string                  | Prepend text to horizontal labels -- default: ''                                                                                                                                                                               |
 | yAxisSuffix             | string                  | Append text to horizontal labels -- default: ''                                                                                                                                                                                |
 | xAxisLabel              | string                  | Prepend text to vertical labels -- default: ''                                                                                                                                                                                 |
-| yAxisInterval           | string                  | Display y axis line every {x} input. -- default: 1                                                                                                                                                                             |
+| yAxisInterval           | number                  | Display y axis line every {x} input. -- default: 1    
+| yAxisLabelInterval      | number                  | Display y axis label every {x} input. -- default: 1                                                                                                                                                                          |
 | chartConfig             | Object                  | Configuration object for the chart, see example config object above                                                                                                                                                            |
 | decorator               | Function                | This function takes a [whole bunch](https://github.com/indiespirit/react-native-chart-kit/blob/master/src/line-chart/LineChart.tsx#L827) of stuff and can render extra elements, such as data point info or additional markup. |
 | onDataPointClick        | Function                | Callback that takes `{value, dataset, getColor}`                                                                                                                                                                               |
diff --git a/src/AbstractChart.tsx b/src/AbstractChart.tsx
index 4f7b124f..7cf58380 100644
--- a/src/AbstractChart.tsx
+++ b/src/AbstractChart.tsx
@@ -11,6 +11,7 @@ export interface AbstractChartProps {
   yAxisSuffix?: string;
   yLabelsOffset?: number;
   yAxisInterval?: number;
+  yAxisLabelInterval?: number;
   xAxisLabel?: string;
   xLabelsOffset?: number;
   hidePointsAtIndex?: number[];
@@ -41,7 +42,7 @@ export const DEFAULT_X_LABELS_HEIGHT_PERCENTAGE = 0.75;
 class AbstractChart<
   IProps extends AbstractChartProps,
   IState extends AbstractChartState
-> extends Component<AbstractChartProps & IProps, AbstractChartState & IState> {
+  > extends Component<AbstractChartProps & IProps, AbstractChartState & IState> {
   calcScaler = (data: number[]) => {
     if (this.props.fromZero && this.props.fromNumber) {
       return Math.max(...data, this.props.fromNumber) - Math.min(...data, 0) || 1;
@@ -50,7 +51,7 @@ class AbstractChart<
     } else if (this.props.fromNumber) {
       return (
         Math.max(...data, this.props.fromNumber) -
-          Math.min(...data, this.props.fromNumber) || 1
+        Math.min(...data, this.props.fromNumber) || 1
       );
     } else {
       return Math.max(...data) - Math.min(...data) || 1;
@@ -221,8 +222,8 @@ class AbstractChart<
         count === 1 && this.props.fromZero
           ? paddingTop + 4
           : height * verticalLabelsHeightPercentage -
-            (basePosition / count) * i +
-            paddingTop;
+          (basePosition / count) * i +
+          paddingTop;
       return (
         <Text
           rotation={horizontalLabelRotation}
@@ -267,7 +268,8 @@ class AbstractChart<
     const {
       xAxisLabel = "",
       xLabelsOffset = 0,
-      hidePointsAtIndex = []
+      hidePointsAtIndex = [],
+      yAxisLabelInterval = 1
     } = this.props;
 
     const fontSize = 12;
@@ -281,7 +283,9 @@ class AbstractChart<
       if (hidePointsAtIndex.includes(i)) {
         return null;
       }
-
+      if (i % yAxisLabelInterval) {
+        return null;
+      }
       const x =
         (((width - paddingRight) / labels.length) * i +
           paddingRight +
@@ -339,12 +343,12 @@ class AbstractChart<
             key={Math.random()}
             x1={Math.floor(
               ((width - paddingRight) / (data.length / yAxisInterval)) * i +
-                paddingRight
+              paddingRight
             )}
             y1={0}
             x2={Math.floor(
               ((width - paddingRight) / (data.length / yAxisInterval)) * i +
-                paddingRight
+              paddingRight
             )}
             y2={height * verticalLabelsHeightPercentage + paddingTop}
             {...this.getPropsForBackgroundLines()}