Skip to content

Commit

Permalink
fix lint, make labels optional for abstract chart
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hermanya
Hermanya committed Jul 4, 2018
1 parent b98a5a0 commit 7b7ccae
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 32 deletions.
3 changes: 2 additions & 1 deletion App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 0 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 9 additions & 10 deletions src/abstract-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()}
Expand All @@ -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"
Expand All @@ -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()}
Expand Down
2 changes: 0 additions & 2 deletions src/bar-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
31 changes: 15 additions & 16 deletions src/line-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ 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
return data.map((x, i) => {
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)}
Expand All @@ -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}
/>)
Expand All @@ -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))

Expand All @@ -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) => {
Expand All @@ -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}
/>)
Expand All @@ -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,
Expand All @@ -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
})}
Expand All @@ -150,7 +151,7 @@ class LineChart extends AbstractChart {
})}
{this.renderVerticalLabels({
...config,
labels: data.labels,
labels,
paddingRight,
paddingTop
})}
Expand All @@ -164,8 +165,7 @@ class LineChart extends AbstractChart {
...config,
data: data.datasets[0].data,
paddingRight,
paddingTop,
labels: data.labels
paddingTop
})}
{withDots && this.renderDots({
...config,
Expand All @@ -177,7 +177,6 @@ class LineChart extends AbstractChart {
</View>
)
}

}

export default LineChart

0 comments on commit 7b7ccae

Please sign in to comment.