From 7b7ccae4006666297cee7776336a8b0de8d45076 Mon Sep 17 00:00:00 2001
From: Herman Starikov <hermanstarikov@gmail.com>
Date: Wed, 4 Jul 2018 18:32:03 -0400
Subject: [PATCH] fix lint, make labels optional for abstract chart

---
 App.js                |  3 ++-
 README.md             |  2 --
 package.json          |  4 +++-
 src/abstract-chart.js | 19 +++++++++----------
 src/bar-chart.js      |  2 --
 src/line-chart.js     | 31 +++++++++++++++----------------
 6 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/App.js b/App.js
index 464f9644..9b2542e7 100644
--- a/App.js
+++ b/App.js
@@ -85,8 +85,9 @@ export default class App extends React.Component {
   renderTabBar() {
     return <StatusBar hidden/>
   }
+
   render() {
-    const width = Dimensions.get('window').width
+    const { width } = Dimensions.get('window')
     const height = 220
     return (
       <ScrollableTabView renderTabBar={this.renderTabBar}>
diff --git a/README.md b/README.md
index c0b6bf56..0c2a18b8 100644
--- a/README.md
+++ b/README.md
@@ -275,8 +275,6 @@ Renders background horizontal lines like in the Line Chart and Bar Chart. Takes
   height: Number,
   // how many lines to render
   count: Number,
-  // how many labels there will be on X axes - used to calculate offsets between the lines
-  labelCount: Number,
   // top padding from the chart top edge
   paddingTop: Number
 }
diff --git a/package.json b/package.json
index 1d9a8dad..141be729 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,9 @@
       "react/forbid-component-props": "off",
       "react/prop-types": [
         0
-      ]
+      ],
+      "react/no-this-in-sfc": 0,
+      "unicorn/filename-case": 0
     },
     "envs": [
       "node",
diff --git a/src/abstract-chart.js b/src/abstract-chart.js
index 3a9ff2b2..e41506ac 100644
--- a/src/abstract-chart.js
+++ b/src/abstract-chart.js
@@ -9,10 +9,9 @@ import {
 } from 'react-native-svg'
 
 class AbstractChart extends Component {
-
   renderHorizontalLines = config => {
-    const { count, width, height, labelCount, paddingTop, paddingRight } = config
-    return [...Array(count)].map((_, i) => {
+    const { count, width, height, paddingTop, paddingRight } = config
+    return [...new Array(count)].map((_, i) => {
       return (
         <Line
           key={Math.random()}
@@ -29,31 +28,31 @@ class AbstractChart extends Component {
   }
 
   renderHorizontalLabels = config => {
-    const { count, data, width, height, labelsCount, paddingTop, paddingRight, yLabelsOffset = 12 } = config
-    return [...Array(count)].map((_, i) => {
+    const { count, data, height, paddingTop, paddingRight, yLabelsOffset = 12 } = config
+    return [...new Array(count)].map((_, i) => {
       return (
         <Text
           key={Math.random()}
           x={paddingRight - yLabelsOffset}
           textAnchor="end"
-          y={(height * 3 / 4) - ((height-paddingTop) / count * i) + 12}
+          y={(height * 3 / 4) - ((height - paddingTop) / count * i) + 12}
           fontSize={12}
           fill={this.props.chartConfig.color(0.5)}
-        >{(((Math.max(...data) - Math.min(...data)) / (count-1) * i) + Math.min(...data)).toFixed(2)}
+        >{(((Math.max(...data) - Math.min(...data)) / (count - 1) * i) + Math.min(...data)).toFixed(2)}
         </Text>
       )
     })
   }
 
   renderVerticalLabels = config => {
-    const { labels, width, height, paddingRight, paddingTop, horizontalOffset = 0 } = config
+    const { labels = [], width, height, paddingRight, paddingTop, horizontalOffset = 0 } = config
     const fontSize = 12
     return labels.map((label, i) => {
       return (
         <Text
           key={Math.random()}
           x={((width - paddingRight) / labels.length * (i)) + paddingRight + horizontalOffset}
-          y={(height * 3 / 4) + paddingTop + (fontSize*2)}
+          y={(height * 3 / 4) + paddingTop + (fontSize * 2)}
           fontSize={fontSize}
           fill={this.props.chartConfig.color(0.5)}
           textAnchor="middle"
@@ -65,7 +64,7 @@ class AbstractChart extends Component {
 
   renderVerticalLines = config => {
     const { data, width, height, paddingTop, paddingRight } = config
-    return [...Array(data.length)].map((_, i) => {
+    return [...new Array(data.length)].map((_, i) => {
       return (
         <Line
           key={Math.random()}
diff --git a/src/bar-chart.js b/src/bar-chart.js
index fd60660d..59e331e6 100644
--- a/src/bar-chart.js
+++ b/src/bar-chart.js
@@ -70,14 +70,12 @@ class BarChart extends AbstractChart {
           {this.renderHorizontalLines({
             ...config,
             count: 4,
-            labelCount: data.labels.length,
             paddingTop
           })}
           {this.renderHorizontalLabels({
             ...config,
             count: 4,
             data: data.datasets[0].data,
-            labelsCount: data.labels.length,
             paddingTop
           })}
           {this.renderVerticalLabels({
diff --git a/src/line-chart.js b/src/line-chart.js
index 4aec0fe6..6da3e493 100644
--- a/src/line-chart.js
+++ b/src/line-chart.js
@@ -11,7 +11,7 @@ import {
 import AbstractChart from './abstract-chart'
 
 class LineChart extends AbstractChart {
-  calcScaler = (data) => (Math.max(...data) - Math.min(...data)) || 1
+  calcScaler = data => (Math.max(...data) - Math.min(...data)) || 1
 
   renderDots = config => {
     const { data, width, height, paddingTop, paddingRight } = config
@@ -19,7 +19,7 @@ class LineChart extends AbstractChart {
       return (
         <Circle
           key={Math.random()}
-          cx={paddingRight + i * (width - paddingRight) / data.length}
+          cx={paddingRight + (i * (width - paddingRight) / data.length)}
           cy={((height / 4 * 3 * (1 - ((x - Math.min(...data)) / this.calcScaler(data)))) + paddingTop)}
           r="4"
           fill={this.props.chartConfig.color(0.7)}
@@ -31,14 +31,14 @@ class LineChart extends AbstractChart {
     if (this.props.bezier) {
       return this.renderBezierShadow(config)
     }
-    const { data, width, height, paddingRight, paddingTop, labels } = config
+    const { data, width, height, paddingRight, paddingTop } = config
     return (
       <Polygon
         points={data.map((x, i) =>
-        (paddingRight + i * (width - paddingRight) / data.length) +
+          (paddingRight + (i * (width - paddingRight) / data.length)) +
         ',' +
          (((height / 4 * 3 * (1 - ((x - Math.min(...data)) / this.calcScaler(data)))) + paddingTop))
-      ).join(' ') + ` ${paddingRight + (width-paddingRight)/labels.length*(labels.length - 1)},${(height / 4 * 3) + paddingTop} ${paddingRight},${(height / 4 * 3) + paddingTop}`}
+        ).join(' ') + ` ${paddingRight + ((width - paddingRight) / data.length * (data.length - 1))},${(height / 4 * 3) + paddingTop} ${paddingRight},${(height / 4 * 3) + paddingTop}`}
         fill="url(#fillShadowGradient)"
         strokeWidth={0}
       />)
@@ -50,7 +50,7 @@ class LineChart extends AbstractChart {
     }
     const { width, height, paddingRight, paddingTop, data } = config
     const points = data.map((x, i) =>
-      (paddingRight + i * (width - paddingRight) / data.length) +
+      (paddingRight + (i * (width - paddingRight) / data.length)) +
       ',' +
        (((height / 4 * 3 * (1 - ((x - Math.min(...data)) / this.calcScaler(data))))) + paddingTop))
 
@@ -66,7 +66,9 @@ class LineChart extends AbstractChart {
 
   getBezierLinePoints = config => {
     const { width, height, paddingRight, paddingTop, data } = config
-    if (data.length == 0) return "M0,0";
+    if (data.length === 0) {
+      return 'M0,0'
+    }
     const x = i => Math.floor(paddingRight + i * (width - paddingRight) / data.length)
     const y = i => Math.floor(((height / 4 * 3 * (1 - ((data[i] - Math.min(...data)) / this.calcScaler(data)))) + paddingTop))
     return [`M${x(0)},${y(0)}`].concat(data.slice(0, -1).map((_, i) => {
@@ -91,11 +93,11 @@ class LineChart extends AbstractChart {
   }
 
   renderBezierShadow = config => {
-    const { width, height, paddingRight, paddingTop, labels } = config
+    const { width, height, paddingRight, paddingTop, data } = config
     return (
       <Path
         d={this.getBezierLinePoints(config) +
-          ` L${paddingRight + (width - paddingRight)/labels.length*(labels.length-1)},${(height / 4 * 3) + paddingTop} L${paddingRight},${(height / 4 * 3) + paddingTop} Z`}
+          ` L${paddingRight + ((width - paddingRight) / data.length * (data.length - 1))},${(height / 4 * 3) + paddingTop} L${paddingRight},${(height / 4 * 3) + paddingTop} Z`}
         fill="url(#fillShadowGradient)"
         strokeWidth={0}
       />)
@@ -105,6 +107,7 @@ class LineChart extends AbstractChart {
     const paddingTop = 16
     const paddingRight = 48
     const { width, height, data, withShadow = true, withDots = true, style = {} } = this.props
+    const { labels = [] } = data
     const { borderRadius = 0 } = style
     const config = {
       width,
@@ -129,16 +132,14 @@ class LineChart extends AbstractChart {
           {this.renderHorizontalLines({
             ...config,
             count: 4,
-            labelCount: data.labels.length,
             paddingTop,
             paddingRight
           })}
           {this.renderHorizontalLabels({
             ...config,
-            count: (Math.min(...data.datasets[0].data) === Math.max(...data.datasets[0].data))?
+            count: (Math.min(...data.datasets[0].data) === Math.max(...data.datasets[0].data)) ?
               1 : 4,
             data: data.datasets[0].data,
-            labelsCount: data.labels.length,
             paddingTop,
             paddingRight
           })}
@@ -150,7 +151,7 @@ class LineChart extends AbstractChart {
           })}
           {this.renderVerticalLabels({
             ...config,
-            labels: data.labels,
+            labels,
             paddingRight,
             paddingTop
           })}
@@ -164,8 +165,7 @@ class LineChart extends AbstractChart {
             ...config,
             data: data.datasets[0].data,
             paddingRight,
-            paddingTop,
-            labels: data.labels
+            paddingTop
           })}
           {withDots && this.renderDots({
             ...config,
@@ -177,7 +177,6 @@ class LineChart extends AbstractChart {
       </View>
     )
   }
-
 }
 
 export default LineChart