diff --git a/App.js b/App.js
index 24a0f958..9b178032 100644
--- a/App.js
+++ b/App.js
@@ -1,13 +1,14 @@
import 'babel-polyfill'
import React from 'react'
-import { ScrollView, StatusBar, Dimensions, Text } from 'react-native'
+import {ScrollView, StatusBar, Dimensions, Text, View} from 'react-native'
import ScrollableTabView from 'react-native-scrollable-tab-view'
+import FlashMessage, {showMessage} from 'react-native-flash-message'
import LineChart from './src/line-chart'
import PieChart from './src/pie-chart'
import ProgressChart from './src/progress-chart'
import BarChart from './src/bar-chart'
import ContributionGraph from './src/contribution-graph'
-import { data, contributionData, pieChartData, progressChartData } from './data'
+import {data, contributionData, pieChartData, progressChartData} from './data'
// in Expo - swipe left to see the following styling, or create your own
const chartConfigs = [
@@ -49,7 +50,8 @@ const chartConfigs = [
backgroundGradientFrom: '#000000',
backgroundGradientTo: '#000000',
color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
- }, {
+ },
+ {
backgroundColor: '#0091EA',
backgroundGradientFrom: '#0091EA',
backgroundGradientTo: '#0091EA',
@@ -83,11 +85,11 @@ const chartConfigs = [
export default class App extends React.Component {
renderTabBar() {
- return
+ return
}
render() {
- const { width } = Dimensions.get('window')
+ const {width} = Dimensions.get('window')
const height = 220
return (
@@ -111,13 +113,21 @@ export default class App extends React.Component {
>
Bezier Line Chart
+ showMessage({
+ message: `${value}`,
+ description: 'You selected this value',
+ backgroundColor: getColor(0.9)
+ })
+ }
/>
+
Progress Chart
`rgba(134, 65, 244, ${opacity})` // optional
- },{
+ }, {
data: [
20,
10,
@@ -21,7 +21,7 @@ const data = {
87,
90
]
- },{
+ }, {
data: [
30,
90,
diff --git a/package.json b/package.json
index 51581694..3368fb35 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,21 @@
"name": "react-native-chart-kit",
"version": "2.2.1",
"devDependencies": {
- "babel-eslint": "^8.2.5",
- "eslint-config-xo-react": "^0.17.0",
- "eslint-plugin-react": "^7.10.0",
- "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+ "babel-eslint": "^10.0.1",
+ "babel-plugin-module-resolver": "^3.1.1",
+ "eslint-plugin-react-hooks": "^1.4.0",
+ "babel-polyfill": "^6.26.0",
+ "eslint-config-xo-react": "^0.19.0",
+ "eslint-plugin-react": "^7.12.4",
"expo": "32.0.1",
- "react": "16.5.0",
"jest-expo": "28.0.0",
"prop-types": "^15.6.2",
+ "react": "16.5.0",
+ "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-scrollable-tab-view": "^0.10.0",
+ "react-native-flash-message": "^0.1.10",
"react-test-renderer": "16.7.0",
- "xo": "^0.21.1",
- "babel-polyfill": "^6.26.0"
+ "xo": "^0.24.0"
},
"_main": "./node_modules/expo/AppEntry.js",
"main": "./index.js",
@@ -34,7 +37,6 @@
"react-native-svg": "> 6.4.1"
},
"dependencies": {
- "babel-plugin-module-resolver": "^3.1.1",
"lodash": "^4.17.11",
"paths-js": "^0.4.7",
"point-in-polygon": "^1.0.1"
@@ -44,21 +46,16 @@
"parser": "babel-eslint",
"space": true,
"semicolon": false,
+ "prettier": true,
"rules": {
"camelcase": "off",
"capitalized-comments": "off",
"new-cap": "off",
- "object-curly-spacing": [
- "error",
- "always"
- ],
- "import/no-unassigned-import": 0,
+ "import/no-unassigned-import": "off",
"react/forbid-component-props": "off",
- "react/prop-types": [
- 0
- ],
- "react/no-this-in-sfc": 0,
- "unicorn/filename-case": 0
+ "react/prop-types": "off",
+ "react/no-this-in-sfc": "off",
+ "unicorn/filename-case": "off"
},
"envs": [
"node",
diff --git a/src/line-chart.js b/src/line-chart.js
index 68d90197..521fefec 100644
--- a/src/line-chart.js
+++ b/src/line-chart.js
@@ -1,171 +1,238 @@
import React from 'react'
-import { View } from 'react-native'
-import {
- Svg,
- Circle,
- Polygon,
- Polyline,
- Path,
- Rect,
- G
-} from 'react-native-svg'
+import {View} from 'react-native'
+import {Svg, Circle, Polygon, Polyline, Path, Rect, G} from 'react-native-svg'
import AbstractChart from './abstract-chart'
class LineChart extends AbstractChart {
-
getColor = (dataset, opacity) => {
return (dataset.color || this.props.chartConfig.color)(opacity)
}
- getStrokeWidth = (dataset) => {
- return (dataset.strokeWidth || this.props.chartConfig.strokeWidth || 3)
+ getStrokeWidth = dataset => {
+ return dataset.strokeWidth || this.props.chartConfig.strokeWidth || 3
}
- getDatas = data => data.reduce((acc, item) => item.data ? [...acc, ...item.data] : acc,[])
+ getDatas = data =>
+ data.reduce((acc, item) => (item.data ? [...acc, ...item.data] : acc), [])
renderDots = config => {
- const { data, width, height, paddingTop, paddingRight } = config
- let output = [];
+ const {
+ data,
+ width,
+ height,
+ paddingTop,
+ paddingRight,
+ onDataPointClick
+ } = config
+ const output = []
const datas = this.getDatas(data)
- data.map((dataset,index)=>{
+ data.map((dataset, index) => {
dataset.data.map((x, i) => {
- output.push (
- )
+ const cx =
+ paddingRight + (i * (width - paddingRight)) / dataset.data.length
+ const cy =
+ (height / 4) *
+ 3 *
+ (1 - (x - Math.min(...datas)) / this.calcScaler(datas)) +
+ paddingTop
+ const onPress = () => {
+ if (!onDataPointClick) {
+ return
+ }
+
+ onDataPointClick({
+ value: x,
+ dataset,
+ getColor: opacity => this.getColor(dataset, opacity)
+ })
+ }
+
+ output.push(
+
+
+
+
+ )
})
})
- return (
- output
- )
+ return output
}
renderShadow = config => {
if (this.props.bezier) {
return this.renderBezierShadow(config)
}
- const { data, width, height, paddingRight, paddingTop } = config
- let output = [];
+
+ const {data, width, height, paddingRight, paddingTop} = config
+ const output = []
const datas = this.getDatas(data)
- config.data.map((dataset,index)=>{
- output.push (
+ config.data.map((dataset, index) => {
+ output.push(
- (paddingRight + (i * (width - paddingRight) / dataset.data.length)) +
- ',' +
- (((height / 4 * 3 * (1 - ((x - Math.min(...datas)) / this.calcScaler(datas)))) + paddingTop))
- ).join(' ') + ` ${paddingRight + ((width - paddingRight) / dataset.data.length * (dataset.data.length - 1))},${(height / 4 * 3) + paddingTop} ${paddingRight},${(height / 4 * 3) + paddingTop}`}
+ points={
+ dataset.data
+ .map(
+ (x, i) =>
+ paddingRight +
+ (i * (width - paddingRight)) / dataset.data.length +
+ ',' +
+ ((height / 4) *
+ 3 *
+ (1 - (x - Math.min(...datas)) / this.calcScaler(datas)) +
+ paddingTop)
+ )
+ .join(' ') +
+ ` ${paddingRight +
+ ((width - paddingRight) / dataset.data.length) *
+ (dataset.data.length - 1)},${(height / 4) * 3 +
+ paddingTop} ${paddingRight},${(height / 4) * 3 + paddingTop}`
+ }
fill="url(#fillShadowGradient)"
strokeWidth={0}
- />)
+ />
+ )
})
- return (
- output
- )
+ return output
}
renderLine = config => {
if (this.props.bezier) {
return this.renderBezierLine(config)
}
- const { width, height, paddingRight, paddingTop, data } = config
- let output = [];
- const datas = this.getDatas(data)
- data.map((dataset,index) => {
- const points = dataset.data.map((x, i) =>
- (paddingRight + (i * (width - paddingRight) / dataset.data.length)) +
- ',' +
- (((height / 4 * 3 * (1 - ((x - Math.min(...datas)) / this.calcScaler(datas))))) + paddingTop))
+ const {width, height, paddingRight, paddingTop, data} = config
+ const output = []
+ const datas = this.getDatas(data)
+ data.map((dataset, index) => {
+ const points = dataset.data.map(
+ (x, i) =>
+ paddingRight +
+ (i * (width - paddingRight)) / dataset.data.length +
+ ',' +
+ ((height / 4) *
+ 3 *
+ (1 - (x - Math.min(...datas)) / this.calcScaler(datas)) +
+ paddingTop)
+ )
- output.push (
+ output.push(
)
-
})
- return (
- output
- )
+ return output
}
getBezierLinePoints = (dataset, config) => {
-
- const { width, height, paddingRight, paddingTop, data } = config
- let output = [];
+ const {width, height, paddingRight, paddingTop, data} = config
if (dataset.data.length === 0) {
return 'M0,0'
}
const datas = this.getDatas(data)
- const x = i => Math.floor(paddingRight + i * (width - paddingRight) / dataset.data.length)
- const y = i => Math.floor(((height / 4 * 3 * (1 - ((dataset.data[i] - Math.min(...datas)) / this.calcScaler(datas)))) + paddingTop))
+ const x = i =>
+ Math.floor(
+ paddingRight + (i * (width - paddingRight)) / dataset.data.length
+ )
+ const y = i =>
+ Math.floor(
+ (height / 4) *
+ 3 *
+ (1 -
+ (dataset.data[i] - Math.min(...datas)) / this.calcScaler(datas)) +
+ paddingTop
+ )
- return [`M${x(0)},${y(0)}`].concat(dataset.data.slice(0, -1).map((_, i) => {
- const x_mid = (x(i) + x(i + 1)) / 2
- const y_mid = (y(i) + y(i + 1)) / 2
- const cp_x1 = (x_mid + x(i)) / 2
- const cp_x2 = (x_mid + x(i + 1)) / 2
- return `Q ${cp_x1}, ${y(i)}, ${x_mid}, ${y_mid}` +
- ` Q ${cp_x2}, ${y(i + 1)}, ${x(i + 1)}, ${y(i + 1)}`
- })).join(' ')
+ return [`M${x(0)},${y(0)}`]
+ .concat(
+ dataset.data.slice(0, -1).map((_, i) => {
+ const x_mid = (x(i) + x(i + 1)) / 2
+ const y_mid = (y(i) + y(i + 1)) / 2
+ const cp_x1 = (x_mid + x(i)) / 2
+ const cp_x2 = (x_mid + x(i + 1)) / 2
+ return (
+ `Q ${cp_x1}, ${y(i)}, ${x_mid}, ${y_mid}` +
+ ` Q ${cp_x2}, ${y(i + 1)}, ${x(i + 1)}, ${y(i + 1)}`
+ )
+ })
+ )
+ .join(' ')
}
renderBezierLine = config => {
- let output = [];
- config.data.map((dataset,index)=>{
- let result = this.getBezierLinePoints(dataset,config);
- output.push (
-
- )
- });
- return (
- output
- )
+ const output = []
+ config.data.map((dataset, index) => {
+ const result = this.getBezierLinePoints(dataset, config)
+ output.push(
+
+ )
+ })
+ return output
}
renderBezierShadow = config => {
- const { width, height, paddingRight, paddingTop, data } = config
- let output = [];
- data.map((dataset,index)=>{
- let d = this.getBezierLinePoints(dataset,config) +
- ` L${paddingRight + ((width - paddingRight) / dataset.data.length * (dataset.data.length - 1))},${(height / 4 * 3) + paddingTop} L${paddingRight},${(height / 4 * 3) + paddingTop} Z`
- output.push (
+ const {width, height, paddingRight, paddingTop, data} = config
+ const output = []
+ data.map((dataset, index) => {
+ const d =
+ this.getBezierLinePoints(dataset, config) +
+ ` L${paddingRight +
+ ((width - paddingRight) / dataset.data.length) *
+ (dataset.data.length - 1)},${(height / 4) * 3 +
+ paddingTop} L${paddingRight},${(height / 4) * 3 + paddingTop} Z`
+ output.push(
)
+ />
+ )
})
- return (
- output
- )
+ return output
}
render() {
const paddingTop = 16
const paddingRight = 64
- const { width, height, data, withShadow = true, withDots = true, withInnerLines = true, style = {}, decorator } = this.props
- const { labels = [] } = data
- const { borderRadius = 0 } = style
+ const {
+ width,
+ height,
+ data,
+ withShadow = true,
+ withDots = true,
+ withInnerLines = true,
+ style = {},
+ decorator,
+ onDataPointClick
+ } = this.props
+ const {labels = []} = data
+ const {borderRadius = 0} = style
const config = {
width,
height
@@ -173,10 +240,7 @@ class LineChart extends AbstractChart {
const datas = this.getDatas(data.datasets)
return (
-