Turn animations ON/OFF

examples/App.js

@@ -1,40 +1,26 @@
 import React from 'react'
-import { StyleSheet, Text, View, Button } from 'react-native'
+import { StyleSheet, View, Button } from 'react-native'
 import PureChart from './pure-chart'
 import moment from 'moment'
 export default class App extends React.Component {
   constructor (props) {
     super(props)
     this.generateData = this.generateData.bind(this)
+    this.generateHData = this.generateHData.bind(this)
     this.state = {
       data: [],
-      pieData: [{label: '사람', value: 110, color: 'red'}, {label: '동물', value: 140, color: 'green'} ],
-      pieData2: [{value: 220700.26, color: 'red'}, { value: 140700.89, color: 'yellow'} ],
-      pieData3: [{value: 220}, { value: 140} ]
+      pieData: [ {label: '사람', value: 110, color: 'red'}, {label: '동물', value: 140, color: 'green'} ],
+      pieData2: [ {value: 220700.26, color: 'red'}, { value: 140700.89, color: 'yellow' } ],
+      pieData3: [ {value: 220}, { value: 140 } ]
     }
   }
 
-  // 파이차트 테스트 하기
-  /*
-  componentDidMount () {
-
-    this.test = 0
-    setInterval(() => {
-      if (this.test < 360) {
-        this.test++
-        this.setState({
-          pieData: [this.test, 360 - this.test]
-        })
-      }
-    }, 5)
-  }
-  */
-
   generateData () {
-    var data = [{x: '1', y: 300}, { x: '2', y: null }, { x: '2', y: null }, {x: '3', y: null}, {x: '4', y: 400}]
+    var data = []
     var data2 = []
     var data3 = []
     var pieData = []
+    var data4 = []
     var startDate = moment()
     for (var i = 0; i < 10; i++) {
       startDate.add(1, 'days')
@@ -56,6 +42,12 @@ export default class App extends React.Component {
           y: Math.round(Math.random() * 1000)
         }
       )
+      data4.push(
+        {
+          x: startDate.format('YYYY-MM-DD'),
+          y: Math.round(Math.random() * 300)
+        }
+      )
     }
 
     for (let i = 0; i < 5; i++) {
@@ -65,62 +57,36 @@ export default class App extends React.Component {
       })
     }
 
-    // this.setState({data: [
-    //   {seriesName: 'test', data: data, color: '#ff4b00'},
-    //    {seriesName: 'test2', data: data2, color: '#0e95de'},
-    //    {seriesName: 'test3', data: data3, color: '#00c19b'}
-    // ]})
+    this.setState({data: [
+      {seriesName: 'test', data: data, color: '#ff4b00'},
+      {seriesName: 'test2', data: data2, color: '#0e95de'},
+      {seriesName: 'test3', data: data3, color: '#00c19b'}
+    ]})
+
+    // this.setState({
+    //   data: [
+    //     {
+    //       seriesName: 'test2', data: data.slice(), color: '#0e95de'
+    //     }
+    //   ],
+    //   pieData: pieData
+    // })
+  }
+
+  generateHData () {
+    var data1 = [{key: 'Points', value: 10}, {key: 'Assists', value: 17}, {key: 'Rebounds', value: 9}, {key: 'Steals', value: 3}, {key: 'Blocks', value: 18}]
 
     this.setState({
-      data: [
-        {
-          seriesName: 'test2', data: data.slice(), color: '#0e95de'
-        }
-      ],
-      pieData: pieData
+      data: data1
     })
   }
+
   render () {
     return (
       <View style={styles.container}>
         <View style={{padding: 20, marginTop: 100}}>
-          <PureChart type={'line'}
-            data={this.state.data}
-            width={'100%'}
-            height={100}
-            onPress={(a) => {
-              console.log('onPress', a)
-            }}
-            xAxisColor={'black'}
-            yAxisColor={'red'}
-            xAxisGridLineColor={'red'}
-            yAxisGridLineColor={'red'}
-            minValue={10}
-            labelColor={'red'}
-            showEvenNumberXaxisLabel={false}
-            customValueRenderer={(index, point) => {
-              if (index < 3) return null
-              return (
-                <Text style={{textAlign: 'center'}}>{point.y}</Text>
-              )
-            }}
-            />
-          {/* <PureChart type={'bar'}
-            data={this.state.data}
-            height={100}
-            xAxisColor={'red'}
-            yAxisColor={'red'}
-            xAxisGridLineColor={'red'}
-            yAxisGridLineColor={'red'}
-            labelColor={'red'}
-            numberOfYAxisGuideLine={10} />
-          <PureChart type={'line'} data={this.state.data} />
-          <PureChart type={'bar'} data={this.state.data} />
-          <PureChart type={'pie'} data={this.state.pieData} /> */}
-          <Button style={{marginTop: 20}} title='Generate chart data' onPress={this.generateData}>
-            <Text>Generate chart data</Text>
-          </Button>
-
+          <PureChart type={'bar-horizontal'} data={this.state.data} highlightColor={'red'} height={300} />
+          <Button title='data generate' onPress={this.generateData} />
         </View>
       </View>
     )

examples/app.json

@@ -1,30 +1,5 @@
 {
   "expo": {
-    "name": "react-native-pure-chart",
-    "slug": "expotest",
-    "privacy": "public",
-    "sdkVersion": "34.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true
-    }
+    "sdkVersion": "29.0.0"
   }
 }

examples/package.json

@@ -1,5 +1,14 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
+  "name": "react-native-pure-chart-example",
+  "version": "0.0.1",
+  "description": "",
+  "devDependencies": {
+    "babel-preset-expo": "^4.0.0",
+    "jest-expo": "^29.0.0",
+    "react-native-scripts": "1.3.1",
+    "react-test-renderer": "16.3.1"
+  },
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -8,16 +17,10 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^34.0.1",
-    "moment": "^2.24.0",
-    "prop-types": "^15.7.2",
-    "react": "16.8.3",
-    "react-dom": "^16.8.6",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
-    "react-native-web": "^0.11.4"
-  },
-  "devDependencies": {
-    "babel-preset-expo": "^6.0.0"
-  },
-  "private": true
-}
+    "expo": "^29.0.0",
+    "moment": "^2.19.1",
+    "prop-types": "^15.6.0",
+    "react": "16.3.1",
+    "react-native": "^0.55.4"
+  }
+}

examples/pure-chart/common.js

@@ -2,10 +2,6 @@ import _ from 'lodash'
 import React from 'react'
 import {View, Text} from 'react-native'
 
-const SINGLE_SERIES_WITH_NUMBERS = 0
-const SINGLE_SERIES_WITH_OBJECTS = 1
-const MULTI_SERIES = 2
-
 function flattenData (data) {
   let numberCount = 0
   let objectWithYCount = 0
@@ -363,3 +359,95 @@ export const drawXAxisLabels = (sortedData, gap, color = '#000000', showEvenNumb
     </View>
   )
 }
+
+export const drawHorizontalYAxisLabels = (arr, width) => {
+  return (
+    <View style={{
+      width: width,
+      height: 33,
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start'
+    }}>
+
+      {arr.length === 0 ? (
+        <View
+          key={'guide0'}
+          style={{
+            left: 0,
+            position: 'absolute'
+          }}>
+          <Text style={{fontSize: 11}}>0</Text>
+        </View>
+      ) : arr.map((v, i) => {
+        if (v[1] > width) return null
+        return (
+          <View
+            key={'guide' + i}
+            style={{
+              left: v[1] - 5,
+              position: 'absolute'
+            }}>
+            <Text style={{fontSize: 11}}>{v[0]}</Text>
+          </View>
+        )
+      })}
+
+    </View>
+  )
+}
+
+export const drawHorizontalXAxisLabels = (sortedData, gap) => {
+  return (
+    <View style={{
+      height: '100%',
+      paddingHorizontal: 10,
+      width: 30,
+      borderWidth: 1,
+      borderColor: 'black'
+    }}>
+      {sortedData.map((data, i) => {
+        return (
+          <View key={'label' + i} style={{
+            position: 'absolute',
+            top: data['gap'],
+            width: gap,
+            alignItems: 'center'
+          }}>
+            <Text style={{fontSize: 9}}>
+              {
+                data['x']
+              }
+            </Text>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+export const drawHorizontalGuideLine = (arr) => {
+  return (
+    <View style={{
+      width: '100%',
+      height: '100%',
+      position: 'absolute'
+    }}>
+
+      {arr.map((v, i) => {
+        return (
+          <View
+            key={'guide' + i}
+            style={{
+              width: 1,
+              height: '100%',
+              borderWidth: 1,
+              borderColor: '#e0e0e0',
+              left: v[1],
+              position: 'absolute'
+            }} />
+        )
+      })}
+
+    </View>
+  )
+}