├── .watchmanconfig ├── web ├── i18n │ └── .gitkeep ├── style │ ├── header.scss │ ├── page │ │ ├── .gitkeep │ │ └── chart-page.scss │ ├── footer.scss │ ├── components │ │ └── .gitkeep │ └── main.scss ├── build.sh ├── config │ ├── app.js │ ├── samplePieChartData.js │ ├── common.js │ ├── sampleAreaChartData.js │ ├── sampleBarChartData.js │ └── chartConfigs.js ├── patch-recharts.sh ├── ui │ ├── layout │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ └── DefaultLayout.jsx │ ├── App.jsx │ ├── components │ │ └── recharts │ │ │ ├── CustomizedTooltipContent.jsx │ │ │ ├── CustomizedCursor.jsx │ │ │ ├── Label.jsx │ │ │ ├── formatters.jsx │ │ │ └── generateCategoricalChart.js │ └── page │ │ └── ChartPage.jsx ├── redux │ ├── action │ │ └── stats.js │ ├── store.js │ └── reducer │ │ └── stats.js ├── main.jsx ├── package.json ├── webpack.config.js ├── lib │ └── strings.js └── webpack.production.config.js ├── .gitattributes ├── resources ├── charts-1.png ├── charts-2.png └── structure.png ├── android ├── app │ ├── src │ │ └── main │ │ │ ├── res │ │ │ ├── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ └── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── java │ │ │ └── com │ │ │ │ └── rncharts │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── AndroidManifest.xml │ ├── BUCK │ ├── proguard-rules.pro │ └── build.gradle ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── keystores │ ├── debug.keystore.properties │ └── BUCK ├── settings.gradle ├── build.gradle ├── gradle.properties ├── gradlew.bat └── gradlew ├── .buckconfig ├── redux ├── action │ └── stats.js ├── reducer │ └── stats.js └── store.js ├── index.android.js ├── index.ios.js ├── __tests__ ├── index.ios.js └── index.android.js ├── config └── app.js ├── styles ├── components │ └── chartHeader.js ├── screens │ └── chartScreen.js └── common.js ├── ios ├── RNCharts │ ├── AppDelegate.h │ ├── main.m │ ├── Images.xcassets │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── AppDelegate.m │ ├── Info.plist │ └── Base.lproj │ │ └── LaunchScreen.xib ├── RNChartsTests │ ├── Info.plist │ └── RNChartsTests.m └── RNCharts.xcodeproj │ ├── xcshareddata │ └── xcschemes │ │ └── RNCharts.xcscheme │ └── project.pbxproj ├── .gitignore ├── package.json ├── App.js ├── components └── ChartHeader.js ├── .flowconfig ├── screens └── ChartScreen.js └── README.md /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /web/i18n/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/style/header.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/style/page/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/style/footer.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /web/style/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /web/build.sh: -------------------------------------------------------------------------------- 1 | sh ./patch-recharts.sh 2 | 3 | yarn build 4 | 5 | echo 'Finished!' 6 | -------------------------------------------------------------------------------- /resources/charts-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/resources/charts-1.png -------------------------------------------------------------------------------- /resources/charts-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/resources/charts-2.png -------------------------------------------------------------------------------- /resources/structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/resources/structure.png -------------------------------------------------------------------------------- /web/config/app.js: -------------------------------------------------------------------------------- 1 | import common from './common'; 2 | 3 | export default { 4 | ...common 5 | } 6 | -------------------------------------------------------------------------------- /web/config/samplePieChartData.js: -------------------------------------------------------------------------------- 1 | export default { 2 | uv: 4000, 3 | pv: 2400, 4 | amt: 2400 5 | } 6 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RNCharts 3 | 4 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /web/patch-recharts.sh: -------------------------------------------------------------------------------- 1 | cp -f ./ui/components/recharts/generateCategoricalChart.js ./node_modules/recharts/lib/chart 2 | 3 | echo 'Patched!' 4 | -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thoqbk/RNCharts/HEAD/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /redux/action/stats.js: -------------------------------------------------------------------------------- 1 | import config from "../../config/app.js"; 2 | 3 | let sendPoints = (points) => { 4 | } 5 | 6 | export default { 7 | sendPoints 8 | } 9 | -------------------------------------------------------------------------------- /android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /web/ui/layout/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | export default class Footer extends Component { 4 | 5 | render() { 6 | return 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /web/config/common.js: -------------------------------------------------------------------------------- 1 | export default { 2 | language: 'vi', 3 | chart: { 4 | commonFontSize: 13, 5 | commonFontFamily: 'Arial' 6 | }, 7 | charts: require('./chartConfigs.js').default 8 | } 9 | -------------------------------------------------------------------------------- /redux/reducer/stats.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | } 3 | 4 | export default (state = initialState, action) => { 5 | switch(action.type) { 6 | default: { 7 | return state; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'RNCharts' 2 | 3 | include ':app', ':react-native-webview-bridge' 4 | project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android') -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /web/redux/action/stats.js: -------------------------------------------------------------------------------- 1 | import config from "../../config/app.js"; 2 | import queryString from 'query-string'; 3 | 4 | let getPoints = () => { 5 | return { 6 | type: 'stats.getPoints' 7 | } 8 | } 9 | 10 | export default { 11 | getPoints 12 | } 13 | -------------------------------------------------------------------------------- /web/ui/layout/Header.jsx: -------------------------------------------------------------------------------- 1 | import config from "../../config/app.js"; 2 | import React, {Component} from 'react'; 3 | 4 | export default class Header extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return
12 | } 13 | } 14 | -------------------------------------------------------------------------------- /index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import App from './App.js'; 9 | import {AppRegistry} from 'react-native'; 10 | 11 | AppRegistry.registerComponent('RNCharts', () => App); 12 | -------------------------------------------------------------------------------- /index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import App from './App.js'; 9 | import {AppRegistry} from 'react-native'; 10 | 11 | AppRegistry.registerComponent('RNCharts', () => App); 12 | -------------------------------------------------------------------------------- /__tests__/index.ios.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.ios.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /__tests__/index.android.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.android.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /redux/store.js: -------------------------------------------------------------------------------- 1 | import config from '../config/app.js'; 2 | import {combineReducers, createStore, applyMiddleware} from 'redux'; 3 | import statsReducer from './reducer/stats.js'; 4 | import thunk from 'redux-thunk'; 5 | 6 | const rootReducer = combineReducers({ 7 | stats: statsReducer 8 | }); 9 | 10 | let store = createStore(rootReducer, applyMiddleware(thunk)); 11 | 12 | export default store; 13 | -------------------------------------------------------------------------------- /web/redux/store.js: -------------------------------------------------------------------------------- 1 | import config from '../config/app.js'; 2 | import {combineReducers, createStore, applyMiddleware} from 'redux'; 3 | import statsReducer from './reducer/stats.js'; 4 | import thunk from 'redux-thunk'; 5 | 6 | const rootReducer = combineReducers({ 7 | stats: statsReducer, 8 | }); 9 | 10 | let store = createStore(rootReducer, applyMiddleware(thunk)); 11 | 12 | export default store; 13 | -------------------------------------------------------------------------------- /web/config/sampleAreaChartData.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | {id: '0:00', uv: 4000, pv: 2400, amt: 2400}, 3 | {id: '5:00', uv: 3000, pv: 1398, amt: 2210}, 4 | {id: '8:00', uv: 2000, pv: 9800, amt: 2290}, 5 | {id: '12:00', uv: 2780, pv: 3908, amt: 2000}, 6 | {id: '14:00', uv: 1890, pv: 4800, amt: 2181}, 7 | {id: '18:00', uv: 2390, pv: 3800, amt: 2900}, 8 | {id: '23:59', uv: 3490, pv: 4300, amt: 2100}, 9 | ]; 10 | -------------------------------------------------------------------------------- /web/config/sampleBarChartData.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | {id: '2:00', uv: 4000, pv: 2400, amt: 2400}, 3 | {id: '5:00', uv: 3000, pv: 1398, amt: 2210}, 4 | {id: '8:00', uv: 2000, pv: 9800, amt: 2290}, 5 | {id: '11:00', uv: 2780, pv: 3908, amt: 2000}, 6 | {id: '14:00', uv: 1890, pv: 4800, amt: 2181}, 7 | {id: '17:00', uv: 2390, pv: 3800, amt: 2500}, 8 | {id: '20:00', uv: 3490, pv: 4300, amt: 2100}, 9 | ]; 10 | -------------------------------------------------------------------------------- /config/app.js: -------------------------------------------------------------------------------- 1 | import {Dimensions} from 'react-native'; 2 | 3 | const DEBUG = false; 4 | 5 | let config = { 6 | chartPage: 'http://localhost:9000', 7 | // chartPage: 'http://10.0.2.2:9000', // for Android 8 | chartScrollbarWidth: 8, 9 | headerHeight: 60, 10 | screenWidth: Dimensions.get('window').width, 11 | screenHeight: Dimensions.get('window').height, 12 | } 13 | 14 | if(DEBUG) { 15 | config.debug = true; 16 | } 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/rncharts/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.rncharts; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "RNCharts"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /web/style/main.scss: -------------------------------------------------------------------------------- 1 | @import './header.scss'; 2 | 3 | @import './footer.scss'; 4 | 5 | @import './page/chart-page.scss'; 6 | 7 | body { 8 | padding: 0px; 9 | margin: 0px; 10 | font-family: "Helvetica Neue", Arial; 11 | font-size: 13px; 12 | overflow-x: hidden; 13 | background-color: #171717; 14 | } 15 | 16 | a { 17 | cursor: pointer; 18 | } 19 | 20 | * { 21 | cursor: default; 22 | -webkit-user-select: none; 23 | -moz-user-select: none; 24 | -ms-user-select: none; 25 | user-select: none; 26 | } 27 | -------------------------------------------------------------------------------- /styles/components/chartHeader.js: -------------------------------------------------------------------------------- 1 | import config from '../../config/app.js'; 2 | import commonStyles from '../common.js'; 3 | 4 | const styles = { 5 | container: { 6 | ...commonStyles.headerContainerStyle, 7 | flexDirection: 'row', 8 | alignItems: 'center' 9 | }, 10 | title: { 11 | color: 'white', 12 | // borderWidth: 1, borderColor: 'red', 13 | width: commonStyles.screenWidth, 14 | textAlign: 'center', 15 | fontSize: commonStyles.fontSize 16 | } 17 | } 18 | 19 | export default styles; 20 | -------------------------------------------------------------------------------- /ios/RNCharts/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /ios/RNCharts/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | android/app/libs 42 | *.keystore 43 | -------------------------------------------------------------------------------- /web/main.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {render} from 'react-dom'; 3 | import App from "./ui/App.jsx"; 4 | import store from "./redux/store.js"; 5 | import {Provider} from "react-redux"; 6 | import {AppContainer} from 'react-hot-loader'; 7 | import "./style/main.scss"; 8 | 9 | /** 10 | * http://thoqbk.github.io/ 11 | * Tho Q Luong 12 | * Nov 26, 2016 13 | */ 14 | 15 | let provider = 16 | 17 | 18 | 19 | ; 20 | 21 | render(provider, document.getElementById('app')); 22 | 23 | if (module.hot) { 24 | module.hot.accept(); 25 | } 26 | -------------------------------------------------------------------------------- /styles/screens/chartScreen.js: -------------------------------------------------------------------------------- 1 | import config from '../../config/app.js'; 2 | import common from '../common.js'; 3 | 4 | export default { 5 | container: { 6 | flex: 1, 7 | justifyContent: 'center', 8 | alignItems: 'center', 9 | backgroundColor: common.bgColor 10 | }, 11 | browser: { 12 | width: config.screenWidth, 13 | height: config.screenHeight - config.headerHeight, 14 | backgroundColor: common.bgColor 15 | }, 16 | headerStyle: common.headerStyle, 17 | headerTitleStyle: common.headerTitleStyle, 18 | logout: { 19 | paddingRight: 5 20 | }, 21 | logoutText: { 22 | color: 'white', 23 | marginTop: -2 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RNCharts", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "react": "15.4.2", 11 | "react-native": "0.39.0", 12 | "react-navigation": "^1.0.0-beta.13", 13 | "react-redux": "^5.0.6", 14 | "redux": "^3.7.2", 15 | "redux-thunk": "^2.2.0", 16 | "react-native-webview-bridge": "^0.33.0" 17 | }, 18 | "devDependencies": { 19 | "babel-jest": "21.2.0", 20 | "babel-preset-react-native": "4.0.0", 21 | "jest": "21.2.1", 22 | "react-test-renderer": "15.4.2" 23 | }, 24 | "jest": { 25 | "preset": "react-native" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {Provider} from 'react-redux'; 3 | import {StackNavigator} from 'react-navigation'; 4 | import ChartScreen from './screens/ChartScreen.js'; 5 | import commonStyles from './styles/common.js'; 6 | import store from './redux/store.js'; 7 | 8 | /** 9 | * http://thoqbk.github.io/ 10 | * Tho Q Luong 11 | * Nov 26, 2016 12 | */ 13 | 14 | const AppNavigator = StackNavigator({ 15 | Chart: {screen: ChartScreen} 16 | }, { 17 | cardStyle: { 18 | backgroundColor: commonStyles.bgColor, 19 | }, 20 | initialRouteName: 'Chart' 21 | }); 22 | 23 | export default class App extends Component { 24 | 25 | render() { 26 | return 27 | 28 | 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /ios/RNCharts/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /components/ChartHeader.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {View, Text, TextInput, Image, StatusBar} from 'react-native'; 3 | import {NavigationActions} from 'react-navigation'; 4 | import styles from '../styles/components/chartHeader.js'; 5 | import commonStyles from '../styles/common.js'; 6 | 7 | /** 8 | * http://thoqbk.github.io/ 9 | * Tho Q Luong 10 | * Nov 26, 2016 11 | */ 12 | 13 | export default class ChartHeader extends Component { 14 | render() { 15 | return 16 | 17 | RNCharts 18 | 19 | } 20 | 21 | handleBackPress() { 22 | const back = NavigationActions.back({}); 23 | this.props.dispatch(back); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /web/ui/layout/DefaultLayout.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import Header from './Header.jsx'; 3 | import Footer from './Footer.jsx'; 4 | import {bindActionCreators} from 'redux'; 5 | import {connect} from 'react-redux'; 6 | 7 | /** 8 | * http://thoqbk.github.io/ 9 | * Tho Q Luong 10 | * Nov 26, 2016 11 | */ 12 | 13 | class DefaultLayout extends Component { 14 | 15 | render() { 16 | return
17 |
18 | {this.props.children} 19 |
20 |
21 | } 22 | } 23 | 24 | const mapStateToProps = (state) => { 25 | return { 26 | currentUser: state.currentUser 27 | }; 28 | }; 29 | 30 | const mapActionsToProps = (dispatch) => bindActionCreators({ 31 | }, dispatch); 32 | 33 | export default connect(mapStateToProps, mapActionsToProps)(DefaultLayout); 34 | -------------------------------------------------------------------------------- /ios/RNChartsTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /web/ui/App.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {bindActionCreators} from 'redux'; 3 | import {connect} from 'react-redux'; 4 | import {IndexRoute, Router, Route, Link, browserHistory} from 'react-router'; 5 | import DefaultLayout from "./layout/DefaultLayout.jsx"; 6 | import ChartPage from './page/ChartPage.jsx'; 7 | 8 | /** 9 | * http://thoqbk.github.io/ 10 | * Tho Q Luong 11 | * Nov 26, 2016 12 | */ 13 | 14 | const routes = 15 | 16 | 17 | 18 | 19 | 20 | class App extends Component { 21 | 22 | constructor(props) { 23 | super(props); 24 | } 25 | 26 | render() { 27 | return routes; 28 | } 29 | } 30 | 31 | let mapStateToProps = (state) => { 32 | return { 33 | }; 34 | }; 35 | 36 | let mapActionsToProps = (dispatch) => bindActionCreators({ 37 | }, dispatch); 38 | 39 | export default connect(mapStateToProps, mapActionsToProps)(App); 40 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /styles/common.js: -------------------------------------------------------------------------------- 1 | import config from '../config/app.js'; 2 | import {Platform, Dimensions} from 'react-native'; 3 | 4 | // Copy from react-navigation/src/views/Header/Header.js 5 | const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56; 6 | const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0; 7 | const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56; 8 | 9 | const HEADER_COLOR = 'rgba(18, 18, 18, 0.9)'; 10 | const BG_COLOR = '#171717'; 11 | 12 | 13 | const SCREEN_WIDTH = Dimensions.get('window').width; 14 | const SCREEN_HEIGHT = Dimensions.get('window').height; 15 | const BORDER_COLOR = '#2C2C2C'; 16 | 17 | export default { 18 | headerContainerStyle: { 19 | width: SCREEN_WIDTH, 20 | height: APPBAR_HEIGHT + STATUSBAR_HEIGHT, 21 | backgroundColor: HEADER_COLOR, 22 | paddingTop: STATUSBAR_HEIGHT - 8, 23 | borderBottomWidth: 1, 24 | borderBottomColor: BORDER_COLOR 25 | }, 26 | headerTitleStyle: { 27 | color: 'white', 28 | marginTop: -2 29 | }, 30 | headerBgColor: HEADER_COLOR, 31 | grayTextColor: '#929292', 32 | orangeTextColor: '#f90', 33 | borderColor: BORDER_COLOR, 34 | bgColor: BG_COLOR, 35 | fontSize: 15, 36 | 37 | screenWidth: SCREEN_WIDTH, 38 | screenHeight: SCREEN_HEIGHT, 39 | headerHeight: APPBAR_HEIGHT + STATUSBAR_HEIGHT 40 | } 41 | -------------------------------------------------------------------------------- /web/ui/components/recharts/CustomizedTooltipContent.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import config from '../../../config/app.js'; 3 | import Strings from '../../../lib/strings.js'; 4 | import Formatters from './formatters.jsx'; 5 | 6 | /** 7 | * http://thoqbk.github.io/ 8 | * Tho Q Luong 9 | * Nov 26, 2016 10 | */ 11 | 12 | export default class CustomizedTooltipContent extends Component { 13 | render() { 14 | const {payload, chartConfig} = this.props; 15 | if(payload == null || payload.length == 0) { 16 | return null; 17 | } 18 | let contents = []; 19 | for(let itemConfig of chartConfig.items) { 20 | for(let point of payload) { 21 | if(point.dataKey != itemConfig.dataKey) { 22 | continue; 23 | } 24 | let value = point.value; 25 | let prettyValue = Strings.toPretty(value); 26 | let style = { 27 | color: itemConfig.color 28 | } 29 | contents.push( 30 | 31 | {prettyValue == 'NA' ? '' : prettyValue} 32 | 33 | ); 34 | } 35 | } 36 | if(contents.length == 0) { 37 | return null; 38 | } 39 | return
40 | {contents} 41 |
42 | } 43 | } 44 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/rncharts/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.rncharts; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage; 13 | 14 | import java.util.Arrays; 15 | import java.util.List; 16 | 17 | public class MainApplication extends Application implements ReactApplication { 18 | 19 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 20 | @Override 21 | protected boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | return Arrays.asList( 28 | new MainReactPackage(), 29 | new WebViewBridgePackage() 30 | ); 31 | } 32 | }; 33 | 34 | @Override 35 | public ReactNativeHost getReactNativeHost() { 36 | return mReactNativeHost; 37 | } 38 | 39 | @Override 40 | public void onCreate() { 41 | super.onCreate(); 42 | SoLoader.init(this, /* native exopackage */ false); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /ios/RNCharts/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"RNCharts" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/Libraries/react-native/react-native-interface.js 21 | node_modules/react-native/flow 22 | flow/ 23 | 24 | [options] 25 | module.system=haste 26 | 27 | experimental.strict_type_args=true 28 | 29 | munge_underscores=true 30 | 31 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 32 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 33 | 34 | suppress_type=$FlowIssue 35 | suppress_type=$FlowFixMe 36 | suppress_type=$FixMe 37 | 38 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-5]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 39 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-5]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 40 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 41 | 42 | unsafe.enable_getters_and_setters=true 43 | 44 | [version] 45 | ^0.35.0 46 | -------------------------------------------------------------------------------- /web/ui/components/recharts/CustomizedCursor.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import config from '../../../config/app.js'; 3 | import Strings from '../../../lib/strings.js'; 4 | import Formatters from './formatters.jsx'; 5 | 6 | /** 7 | * http://thoqbk.github.io/ 8 | * Tho Q Luong 9 | * Nov 26, 2016 10 | */ 11 | 12 | export default class CustomizedCursor extends Component { 13 | render() { 14 | const {points, payload, width, height, left, right, stroke} = this.props; 15 | const b1 = points == null || points.length != 2; 16 | const b2 = payload == null || payload.length == 0; 17 | if(b1 || b2) { 18 | return null; 19 | } 20 | const x = points[0].x; 21 | const y1 = points[0].y; 22 | const y2 = points[1].y; 23 | let cursorLabel = Formatters.xTickFormatter(payload[0].payload.id, true); 24 | let textWidth = Strings.textWidth( 25 | cursorLabel, 26 | config.chart.commonFontFamily + ' ' + config.chart.commonFontSize + 'px' 27 | ); 28 | 29 | let minTextX = left; 30 | let maxTextX = left + width - textWidth; 31 | 32 | let textX = x - textWidth / 2; 33 | if(textX > maxTextX) { 34 | textX = maxTextX; 35 | } else if(textX < minTextX) { 36 | textX = minTextX; 37 | } 38 | return 39 | 41 | {cursorLabel} 42 | 43 | 44 | 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /web/ui/components/recharts/Label.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import Strings from '../../../lib/strings.js'; 3 | import config from '../../../config/app.js'; 4 | import Formatters from './formatters.jsx'; 5 | 6 | /** 7 | * http://thoqbk.github.io/ 8 | * Tho Q Luong 9 | * Nov 26, 2016 10 | */ 11 | 12 | export default class Label extends Component { 13 | render () { 14 | const {stroke, value, points, index, onlyLastPoint, dataKey} = this.props; 15 | let notNullIndex = _.findLastIndex(points, point => point[dataKey] != null); 16 | let b = (index == notNullIndex && onlyLastPoint === true) 17 | || onlyLastPoint !== true; 18 | if(b) { 19 | let prettyValue = Strings.toPretty(value); 20 | if(prettyValue == 'NA') { 21 | return null; 22 | } 23 | // ELSE: 24 | let fontSize = config.chart.commonFontSize; 25 | let fontFamily = config.chart.commonFontFamily; 26 | let padding = 2; 27 | let textWidth = Strings.d3TextWidth( 28 | prettyValue, 29 | fontFamily, 30 | fontSize 31 | ); 32 | let x = this.props.x - padding; 33 | let y = this.props.y - padding; 34 | // x = 0; 35 | return 36 | 38 | 39 | 42 | {prettyValue} 43 | 44 | 45 | } 46 | return null; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rn-charts-react", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "webpack-dev-server --progress --config webpack.config.js", 9 | "build": "NODE_ENV=production webpack --progress --config webpack.production.config.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "babel-core": "^6.11.4", 16 | "babel-loader": "^6.2.4", 17 | "babel-preset-react": "^6.11.1", 18 | "babel-preset-react-hmre": "^1.1.1", 19 | "babel-preset-stage-0": "^6.5.0", 20 | "css-loader": "^0.23.1", 21 | "extract-text-webpack-plugin": "^1.0.1", 22 | "html-webpack-plugin": "^2.28.0", 23 | "node-sass": "^3.8.0", 24 | "react-hot-loader": "^3.0.0-beta.1", 25 | "sass-loader": "^4.0.0", 26 | "source-map-loader": "^0.1.5", 27 | "style-loader": "^0.13.1", 28 | "webpack": "^1.13.1", 29 | "webpack-dev-middleware": "^1.6.1", 30 | "webpack-dev-server": "^1.14.1", 31 | "webpack-hot-middleware": "^2.12.2", 32 | "babel-preset-es2015": "^6.24.1", 33 | "extract-text-webpack-plugin": "^1.0.1", 34 | "json-loader": "^0.5.7" 35 | }, 36 | "dependencies": { 37 | "react": "^15.2.1", 38 | "react-dom": "^15.2.1", 39 | "redux-react-router": "^1.0.0-beta3", 40 | "redux-thunk": "^2.1.0", 41 | "react-redux": "^4.4.5", 42 | "react-router": "^2.6.1", 43 | "redux": "^3.5.2", 44 | "react-router-redux": "^4.0.5", 45 | "js-cookie": "^2.1.3", 46 | "lodash": "^4.15.0", 47 | "moment": "^2.18.1", 48 | "query-string": "^4.2.3", 49 | "recharts": "1.0.0-alpha.4" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /web/style/page/chart-page.scss: -------------------------------------------------------------------------------- 1 | $subHeaderBgColor: rgba(15, 15, 15, 0.9); 2 | $subHeaderBorder: 1px solid #2C2C2C; 3 | $activeTextColor: #FF9900; 4 | $normalTextColor: white; 5 | 6 | .gt-charts { 7 | padding-top: 20px; 8 | padding-bottom: 50px; 9 | color: $normalTextColor; 10 | } 11 | 12 | .gt-chart { 13 | position: relative; 14 | margin-top: 10px; 15 | .gt-tooltip-contents { 16 | position: absolute; 17 | z-index: 10; 18 | padding-top: 0px; 19 | top: -10px; 20 | left: 0px; 21 | width: 100%; 22 | height: 30px; 23 | text-align: center; 24 | .header { 25 | float: left; 26 | padding-left: 5px; 27 | font-weight: bold; 28 | } 29 | } 30 | } 31 | 32 | ul.legend-content { 33 | text-align: right; 34 | transform: translateY(-15px); 35 | li { 36 | display: inline-block; 37 | padding-left: 20px; 38 | span.dot { 39 | font-size: 30px; 40 | position: absolute; 41 | transform: translate(-15px, -12px); 42 | } 43 | } 44 | } 45 | 46 | g.xAxis { 47 | g.recharts-cartesian-axis-ticks { 48 | text { 49 | transform: translateY(8px); 50 | } 51 | } 52 | } 53 | 54 | g.yAxis { 55 | g.recharts-cartesian-axis-ticks { 56 | text { 57 | // transform: translateX(0px); 58 | } 59 | } 60 | } 61 | 62 | #temp-svg-text-width { 63 | position: absolute; 64 | top: 0px; 65 | left: 0px; 66 | } 67 | 68 | .recharts-tooltip-wrapper { 69 | z-index: 9; 70 | transform: translateY(-10px) !important; 71 | width: 100%; 72 | background-color: #171717; 73 | .gt-items { 74 | text-align: right; 75 | .gt-item { 76 | text-align: center; 77 | display: inline; 78 | padding-left: 0px; 79 | padding-right: 30px; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /web/redux/reducer/stats.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash'; 2 | 3 | const defaultPoints = { 4 | revenue: [], 5 | ordersCount: [], 6 | profit: [], 7 | productsCount: [], 8 | barChartData: [], 9 | areaChartData: [], 10 | pieChartData: {} 11 | } 12 | 13 | let cloneDefaultPoints = () => { 14 | return JSON.parse(JSON.stringify(defaultPoints)); 15 | } 16 | 17 | const initialState = { 18 | loading: false, 19 | points: cloneDefaultPoints() 20 | } 21 | 22 | export default (state = initialState, action) => { 23 | switch(action.type) { 24 | case 'stats.getPoints': { 25 | return getPoints(state, action); 26 | } 27 | default: { 28 | return state; 29 | } 30 | } 31 | } 32 | 33 | let getPoints = (state, action) => { 34 | return { 35 | ...state, 36 | points: loadPoints() 37 | } 38 | } 39 | 40 | // Utils ----------------------------------------------------------------------- 41 | let loadPoints = () => { 42 | let points = { 43 | ...require('../../config/sampleLineChartData.js').default 44 | } 45 | points.barChartData = require('../../config/sampleBarChartData.js').default 46 | points.areaChartData = require('../../config/sampleAreaChartData.js').default 47 | points.pieChartData = require('../../config/samplePieChartData.js').default 48 | for(let key of Object.keys(points)) { 49 | let data = points[key]; 50 | if(!Array.isArray(data) || data.length == 0) { 51 | continue; 52 | } 53 | // change point.id to number. Ex: '10:20' to 10 * 60 + 20 = 620 54 | for(let point of data) { 55 | if(point.id == null) { 56 | continue; 57 | } 58 | let oldIdParts = point.id.split('\:'); 59 | point.id = parseInt(oldIdParts[0]) * 60 + parseInt(oldIdParts[1]); 60 | } 61 | } 62 | return points; 63 | } 64 | -------------------------------------------------------------------------------- /android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.rncharts', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.rncharts', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /web/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | var webpack = require("webpack"); 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | devtool: "eval", 7 | entry: [ 8 | "whatwg-fetch", 9 | "react-hot-loader/patch", 10 | "webpack-dev-server/client?http://0.0.0.0:9000", 11 | "webpack/hot/only-dev-server", 12 | "./main.jsx" 13 | ], 14 | output: { 15 | path: path.join(__dirname, "build"), 16 | filename: "bundle.js", 17 | publicPath: '/' 18 | }, 19 | plugins: [ 20 | new webpack.HotModuleReplacementPlugin(), 21 | new HtmlWebpackPlugin({ 22 | hash: true, 23 | filename: "index.html", 24 | template: "build/template.html" 25 | }) 26 | ], 27 | 28 | devServer: { 29 | colors: true, 30 | historyApiFallback: true, 31 | inline: false, 32 | port: 9000, 33 | hot: true, 34 | host: "0.0.0.0", 35 | contentBase: "./build", 36 | disableHostCheck: true // 'Invalid host header' 37 | }, 38 | 39 | module: { 40 | loaders: [{ 41 | test: /\.(js|jsx)$/, 42 | loader: "babel", 43 | query: { 44 | "presets": ["es2015", "stage-0", "react"], 45 | "plugins": ["react-hot-loader/babel"] 46 | }, 47 | include : __dirname, 48 | exclude: [ 49 | path.join(__dirname, "style"), 50 | path.join(__dirname, "node_modules"), 51 | path.join(__dirname, "build"), 52 | ] 53 | }, { 54 | test: /\.scss$/, 55 | include: path.join(__dirname, "style"), 56 | loaders: ["style", "css", "sass"] 57 | }, { 58 | test: /\.(png|jpg|woff|woff2|eot|ttf|svg|gif)/, 59 | loader: 'file-loader' 60 | }, { 61 | include: /\.json$/, 62 | loaders: ["json-loader"] 63 | }] 64 | } 65 | }; 66 | -------------------------------------------------------------------------------- /ios/RNCharts/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /web/lib/strings.js: -------------------------------------------------------------------------------- 1 | import config from '../config/app.js'; 2 | 3 | /** 4 | * Is empty, null or all spaces string 5 | */ 6 | let isEmpty = (s) => { 7 | return s == null || (s + '').replace(/\s/g, "").length == 0; 8 | }; 9 | 10 | /** 11 | * Convert string or number to pretty format 12 | * Example: 1000 to 1,000 13 | */ 14 | const TO_PRETTY_SEPERATOR = '.'; 15 | const TO_PRETTY_NA = 'NA'; 16 | 17 | let toPretty = (count) => { 18 | if (count == null || count.toString().match(/^\-?[0-9]+(\.[0-9]+)?$/) == null) { 19 | return TO_PRETTY_NA; 20 | } 21 | count = Math.round(count); 22 | return count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, TO_PRETTY_SEPERATOR); 23 | }; 24 | 25 | let isInt = (n) => { 26 | return Number(n) === n && n % 1 === 0; 27 | } 28 | 29 | let isFloat = (n) => { 30 | return Number(n) === n && n % 1 !== 0; 31 | } 32 | 33 | let textWidth = (text, font) => { 34 | var canvas = textWidth.canvas || (textWidth.canvas = document.createElement("canvas")); 35 | var context = canvas.getContext("2d"); 36 | context.font = font; 37 | var metrics = context.measureText(text); 38 | return metrics.width; 39 | } 40 | 41 | window.d3TextWidthCache = {}; 42 | 43 | let d3TextWidth = (text, fontFamily, fontSize) => { 44 | let key = text + '-' + fontFamily + '-' + fontSize; 45 | if(window.d3TextWidthCache[key] != null) { 46 | return window.d3TextWidthCache[key]; 47 | } 48 | let retVal = 0; 49 | d3.select('#temp-svg-text-width') 50 | .append('g') 51 | .selectAll('.dummyText') 52 | .data([text]) 53 | .enter() 54 | .append("text") 55 | .attr("font-family", fontFamily) 56 | .attr("font-size", fontSize + 'px') 57 | .text(d => d) 58 | .each(function(e, i) { 59 | retVal = this.getComputedTextLength(); 60 | this.remove(); 61 | }); 62 | window.d3TextWidthCache[key] = retVal; 63 | return retVal; 64 | } 65 | 66 | export default { 67 | isEmpty, 68 | toPretty, 69 | isInt, 70 | isFloat, 71 | textWidth, 72 | d3TextWidth 73 | } 74 | -------------------------------------------------------------------------------- /web/ui/components/recharts/formatters.jsx: -------------------------------------------------------------------------------- 1 | import Strings from '../../../lib/strings.js'; 2 | import config from '../../../config/app.js'; 3 | import React from 'react'; 4 | 5 | /** 6 | * http://thoqbk.github.io/ 7 | * Tho Q Luong 8 | * Nov 26, 2016 9 | */ 10 | 11 | let xTickFormatter = (value, cursor) => { 12 | let h = Math.floor(value / 60); 13 | if(cursor !== true) { 14 | return h; 15 | } 16 | let m = value % 60; 17 | return (h < 10 ? '0' : '') + h + ':' +(m < 10 ? '0' : '') + m; 18 | } 19 | 20 | let yTickFormatter = (value) => { 21 | let b = value == null || Strings.isInt(value) || Strings.isFloat(value); 22 | if(!b) { 23 | return value; 24 | } 25 | // ELSE: 26 | const oneM = Math.pow(10, 6); 27 | const oneB = Math.pow(10, 9); 28 | if(Math.abs(value) > oneB && value % oneB == 0) { //B 29 | return Strings.toPretty(Math.round(value / oneB)) + ' B'; 30 | } 31 | if(Math.abs(value) > oneM && value % oneM == 0) { //M 32 | return Strings.toPretty(Math.round(value / oneM)) + ' M'; 33 | } 34 | return Strings.toPretty(value); 35 | } 36 | 37 | let renderLegendContent = (chartConfig, props) => { 38 | const {payload} = props; 39 | return
    40 | { 41 | payload.map((entry, idx) => { 42 | let itemConfig = _.find(chartConfig.items, (item) => item.dataKey == entry.dataKey); 43 | let label = 'invalid-datakey-' + entry.dataKey; 44 | if(itemConfig != null) { 45 | label = itemConfig.label; 46 | } else if(chartConfig.type == 'pie') { 47 | label = entry.value; 48 | } 49 | let style = { 50 | color: entry.color 51 | } 52 | return
  • 53 | • 54 | {label} 55 |
    • 56 | }) 57 | } 58 |
59 | } 60 | 61 | export default { 62 | xTickFormatter, 63 | yTickFormatter, 64 | renderLegendContent 65 | } 66 | -------------------------------------------------------------------------------- /web/webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 4 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | 6 | module.exports = { 7 | devtool: false, 8 | entry: { 9 | app: "./main.jsx" 10 | }, 11 | output: { 12 | path: path.join(__dirname, 'build'), 13 | filename: 'bundle.js', 14 | publicPath: '/' 15 | }, 16 | plugins: [ 17 | new webpack.DefinePlugin({ 18 | 'process.env': { 19 | 'NODE_ENV': JSON.stringify('production') 20 | } 21 | }), 22 | new webpack.optimize.DedupePlugin(), //dedupe similar code 23 | new webpack.optimize.UglifyJsPlugin({minimize: true}), 24 | new webpack.optimize.AggressiveMergingPlugin(), //Merge chunks 25 | new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", { 26 | disable: false, 27 | allChunks: true 28 | }), 29 | new HtmlWebpackPlugin({ 30 | hash: true, 31 | filename: "index.html", 32 | template: "build/template.html" 33 | }), 34 | new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 35 | ], 36 | 37 | module: { 38 | loaders: [{ 39 | test: /\.(js|jsx)$/, 40 | loader: "babel", 41 | query: { 42 | "presets": ["es2015", "stage-0", "react"], 43 | "plugins": ["react-hot-loader/babel"] 44 | }, 45 | exclude: [ 46 | path.join(__dirname, "style"), 47 | path.join(__dirname, "node_modules"), 48 | path.join(__dirname, "build"), 49 | path.join(__dirname, "ui/components/recharts/generateCategoricalChart.js"), 50 | ] 51 | }, { 52 | test: /\.css$/, // Only .css files 53 | loader: ExtractTextPlugin.extract( 54 | "style-loader", 55 | "css-loader?sourceMap" 56 | ) 57 | }, { 58 | test: /\.scss$/, 59 | include: path.join(__dirname, 'style'), 60 | loaders: ['style', 'css', 'sass'] 61 | }, { 62 | test: /\.(png|jpg|woff|woff2|eot|ttf|svg|gif)/, loader: 'file-loader' 63 | }] 64 | } 65 | }; 66 | -------------------------------------------------------------------------------- /ios/RNChartsTests/RNChartsTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface RNChartsTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation RNChartsTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /screens/ChartScreen.js: -------------------------------------------------------------------------------- 1 | import {bindActionCreators} from 'redux'; 2 | import {connect} from 'react-redux'; 3 | import React, {Component} from 'react'; 4 | import {View} from 'react-native'; 5 | import WebViewBridge from 'react-native-webview-bridge'; 6 | import styles from '../styles/screens/chartScreen.js'; 7 | import ChartHeader from '../components/ChartHeader.js'; 8 | import config from '../config/app.js'; 9 | 10 | /** 11 | * http://thoqbk.github.io/ 12 | * Tho Q Luong 13 | * Nov 26, 2016 14 | */ 15 | 16 | class ChartScreen extends Component { 17 | 18 | static navigationOptions = ({navigation}) => { 19 | const {params = {}} = navigation.state; 20 | return { 21 | header: 24 | } 25 | } 26 | 27 | constructor(props) { 28 | super(props); 29 | this.state = { 30 | locked: false, 31 | loaded: false 32 | } 33 | } 34 | 35 | render() { 36 | let contentInset = { 37 | right: -1 * config.chartScrollbarWidth, 38 | top: 0, 39 | bottom: 0, 40 | left: 0 41 | } 42 | let browserStyle = { 43 | ...styles.browser, 44 | } 45 | if(!this.state.loaded) { 46 | browserStyle.opacity = 0; 47 | } 48 | let browser = ; 57 | return 58 | {browser} 59 | 60 | } 61 | 62 | handleBridgeMessage(m) { 63 | try { 64 | let json = JSON.parse(m); 65 | switch(json.type) { 66 | case 'webViewBridge.lock': { 67 | this.setState({ 68 | locked: true 69 | }); 70 | break; 71 | } 72 | case 'webViewBridge.unlock': { 73 | this.setState({ 74 | locked: false 75 | }); 76 | break; 77 | } 78 | default: { 79 | console.log('Unknown message: ', json); 80 | } 81 | } 82 | } catch(e) { 83 | console.log('Invalid json message'); 84 | } 85 | } 86 | 87 | handleLoadEnd() { 88 | this.setState({ 89 | loaded: true 90 | }); 91 | } 92 | 93 | buildUrl() { 94 | return config.chartPage; 95 | } 96 | } 97 | 98 | let mapStateToProps = (state) => { 99 | return { 100 | currentUser: state.currentUser 101 | }; 102 | }; 103 | 104 | let mapActionsToProps = (dispatch) => bindActionCreators({ 105 | }, dispatch); 106 | 107 | export default connect(mapStateToProps, mapActionsToProps)(ChartScreen); 108 | -------------------------------------------------------------------------------- /web/config/chartConfigs.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | dataKey: 'ordersCount', 4 | label: 'Orders', 5 | items: [ 6 | { 7 | dataKey: 'yesterday', 8 | color: '#E14823', 9 | label: 'Yesterday' 10 | }, { 11 | dataKey: 'lastWeek', 12 | color: '#E0B805', 13 | label: 'Last Week' 14 | }, 15 | { 16 | dataKey: 'today', 17 | color: '#3580D5', 18 | label: 'Today', 19 | lastPointLabel: true 20 | } 21 | ] 22 | }, { 23 | label: 'Bar Chart', 24 | type: 'bar', 25 | dataKey: 'barChartData', 26 | items: [ 27 | { 28 | dataKey: 'uv', 29 | color: '#E14823', 30 | label: 'Yesterday' 31 | }, { 32 | dataKey: 'pv', 33 | color: '#3580D5', 34 | label: 'Last Week' 35 | } 36 | ] 37 | }, { 38 | label: 'Area Chart', 39 | type: 'area', 40 | dataKey: 'areaChartData', 41 | items: [ 42 | { 43 | dataKey: 'uv', 44 | color: '#E14823', 45 | label: 'Yesterday' 46 | }, { 47 | dataKey: 'pv', 48 | color: '#3580D5', 49 | label: 'Last Week' 50 | } 51 | ] 52 | }, { 53 | label: 'Pie Chart', 54 | type: 'pie', 55 | dataKey: 'pieChartData', 56 | items: [ 57 | { 58 | dataKey: 'uv', 59 | color: '#E14823', 60 | label: 'Yesterday' 61 | }, { 62 | dataKey: 'pv', 63 | color: '#3580D5', 64 | label: 'Last Week' 65 | }, { 66 | dataKey: 'amt', 67 | color: '#E0B805', 68 | label: 'Last Week' 69 | } 70 | ] 71 | }, { 72 | dataKey: 'revenue', 73 | label: 'Revenue', 74 | items: [ 75 | { 76 | dataKey: 'yesterday', 77 | color: '#E14823', 78 | label: 'Yesterday' 79 | }, { 80 | dataKey: 'lastWeek', 81 | color: '#E0B805', 82 | label: 'Last Week' 83 | }, { 84 | dataKey: 'today', 85 | color: '#3580D5', 86 | label: 'Today', 87 | lastPointLabel: true 88 | } 89 | ] 90 | }, { 91 | dataKey: 'profit', 92 | label: 'Profit', 93 | items: [ 94 | { 95 | dataKey: 'yesterday', 96 | color: '#E14823', 97 | label: 'Yesterday' 98 | }, { 99 | dataKey: 'lastWeek', 100 | color: '#E0B805', 101 | label: 'Last Week' 102 | }, { 103 | dataKey: 'today', 104 | color: '#3580D5', 105 | label: 'Today', 106 | lastPointLabel: true 107 | } 108 | ] 109 | }, { 110 | dataKey: 'productsCount', 111 | label: 'Products', 112 | items: [ 113 | { 114 | dataKey: 'yesterday', 115 | color: '#E14823', 116 | label: 'Yesterday' 117 | }, { 118 | dataKey: 'lastWeek', 119 | color: '#E0B805', 120 | label: 'Last Week' 121 | }, { 122 | dataKey: 'today', 123 | color: '#3580D5', 124 | label: 'Today', 125 | lastPointLabel: true 126 | } 127 | ] 128 | } 129 | ] 130 | -------------------------------------------------------------------------------- /ios/RNCharts/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /ios/RNCharts.xcodeproj/xcshareddata/xcschemes/RNCharts.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.rncharts" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | compile project(':react-native-webview-bridge') 133 | } 134 | 135 | // Run this once to be able to run the application with BUCK 136 | // puts all compile dependencies into folder libs for BUCK to use 137 | task copyDownloadableDepsToLibs(type: Copy) { 138 | from configurations.compile 139 | into 'libs' 140 | } 141 | -------------------------------------------------------------------------------- /web/ui/page/ChartPage.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {bindActionCreators} from 'redux'; 3 | import {connect} from 'react-redux'; 4 | import config from "../../config/app.js"; 5 | import Strings from '../../lib/strings.js' 6 | import { 7 | LineChart, BarChart, Line, Bar, AreaChart, Area, 8 | PieChart, Pie, Cell, 9 | XAxis, YAxis, CartesianGrid, Legend, ReferenceLine, Tooltip 10 | } from 'recharts'; 11 | import Formatters from '../components/recharts/formatters.jsx'; 12 | import CustomizedCursor from '../components/recharts/CustomizedCursor.jsx'; 13 | import CustomizedTooltipContent from '../components/recharts/CustomizedTooltipContent.jsx'; 14 | import Label from '../components/recharts/Label.jsx'; 15 | import statsActions from '../../redux/action/stats.js'; 16 | 17 | /** 18 | * http://thoqbk.github.io/ 19 | * Tho Q Luong 20 | * Nov 26, 2016 21 | */ 22 | 23 | const Y_AXIS_WIDTH = 70; 24 | const MARGIN_RIGHT = 30; 25 | 26 | const TICKS = [0, 4, 8, 12, 16, 20, 24].map(id => id * 60); 27 | 28 | class ChartPage extends Component { 29 | 30 | constructor(props) { 31 | super(props); 32 | this.state = { 33 | chartWidth: 0, 34 | chartHeight: 240, 35 | activeChartConfig: null, 36 | activeTooltipContents: {}, // map of line dataKey -> value 37 | activeX: -1 38 | } 39 | } 40 | 41 | componentWillMount() { 42 | this.props.getPoints(); 43 | $(window).resize(() => { 44 | this.setState({ 45 | chartWidth: $(window).width() 46 | }); 47 | }); 48 | // fire resize: 49 | $(window).trigger('resize'); 50 | } 51 | 52 | componentWillUnmount() { 53 | $(window).off('resize'); 54 | } 55 | 56 | render() { 57 | let charts = config.charts.map((chartConfig, idx) => { 58 | return this.renderChart(chartConfig); 59 | }); 60 | return
61 | {charts} 62 |
63 | } 64 | 65 | renderChart(chartConfig) { 66 | let label = chartConfig.label; 67 | let Chart = LineChart; 68 | if(chartConfig.type == 'bar') { 69 | Chart = BarChart; 70 | } else if(chartConfig.type == 'area') { 71 | Chart = AreaChart; 72 | } else if(chartConfig.type == 'pie') { 73 | Chart = PieChart; 74 | } 75 | let props = { 76 | width:this.state.chartWidth, 77 | height: this.state.chartHeight, 78 | lock: this.handleLock.bind(this), 79 | unlock: this.handleUnlock.bind(this), 80 | margin: {top: 5, right: MARGIN_RIGHT, left: 0, bottom: 5} 81 | } 82 | if(chartConfig.type != 'pie') { 83 | props.data = this.props.stats.points[chartConfig.dataKey]; 84 | } 85 | return
86 |
87 | {label} 88 |
89 | 90 | 91 | {this.renderChartBody(chartConfig)} 92 | 93 |
94 | } 95 | 96 | renderChartBody(chartConfig) { 97 | let legendStyle = { 98 | visibility: this.isShowingTooltipContents(chartConfig) ? 'hidden' : 'visible' 99 | } 100 | let retVal = []; 101 | if(chartConfig.type != 'pie') { 102 | retVal.push( 103 | Formatters.xTickFormatter(value)} /> 107 | ); 108 | retVal.push( 109 | 113 | ); 114 | retVal.push( 115 | 116 | ); 117 | retVal.push( 118 | } 119 | key='tooltip' 120 | content={} 121 | /> 122 | ); 123 | retVal.push(this.renderCursor(chartConfig)); 124 | } 125 | retVal.push( 126 | Formatters.renderLegendContent(chartConfig, props)} /> 129 | ); 130 | retVal.push(this.renderChartItems(chartConfig)); 131 | 132 | // return 133 | return retVal; 134 | } 135 | 136 | renderChartItems(chartConfig) { 137 | if(chartConfig.type == 'pie') { 138 | return this.renderPies(chartConfig); 139 | } 140 | return chartConfig.items.map((itemConfig, idx) => { 141 | let label = null; 142 | if(itemConfig.lastPointLabel) { 143 | label =