├── .babelrc
├── .buckconfig
├── .editorconfig
├── .eslintrc
├── .flowconfig
├── .github
├── issue_template.md
└── pull_request_template.md
├── .gitignore
├── .npmignore
├── .npmrc
├── .watchmanconfig
├── CHANGELOG.md
├── License.md
├── README.md
├── circle.yml
├── docs
├── _config.yml
├── bar
│ └── index.md
├── images
│ └── chart-screenshots.png
├── index.md
├── pie
│ └── index.md
├── radar
│ └── index.md
├── scatterplot
│ └── index.md
├── smoothline
│ └── index.md
├── stockline
│ └── index.md
└── tree
│ └── index.md
├── example
├── .babelrc
├── .buckconfig
├── .flowconfig
├── .gitattributes
├── .gitignore
├── .watchmanconfig
├── android
│ ├── app
│ │ ├── BUCK
│ │ ├── build.gradle
│ │ ├── proguard-rules.pro
│ │ └── src
│ │ │ └── main
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── java
│ │ │ └── com
│ │ │ │ └── example
│ │ │ │ ├── MainActivity.java
│ │ │ │ └── MainApplication.java
│ │ │ └── res
│ │ │ ├── mipmap-hdpi
│ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-mdpi
│ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xhdpi
│ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xxhdpi
│ │ │ └── ic_launcher.png
│ │ │ └── values
│ │ │ ├── strings.xml
│ │ │ └── styles.xml
│ ├── build.gradle
│ ├── gradle.properties
│ ├── gradle
│ │ └── wrapper
│ │ │ ├── gradle-wrapper.jar
│ │ │ └── gradle-wrapper.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── keystores
│ │ ├── BUCK
│ │ └── debug.keystore.properties
│ └── settings.gradle
├── app.json
├── index.android.js
├── index.ios.js
├── ios
│ ├── example-tvOS
│ │ └── Info.plist
│ ├── example-tvOSTests
│ │ └── Info.plist
│ ├── example.xcodeproj
│ │ ├── project.pbxproj
│ │ └── xcshareddata
│ │ │ └── xcschemes
│ │ │ ├── example-tvOS.xcscheme
│ │ │ └── example.xcscheme
│ ├── example
│ │ ├── AppDelegate.h
│ │ ├── AppDelegate.m
│ │ ├── Base.lproj
│ │ │ └── LaunchScreen.xib
│ │ ├── Images.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ └── Contents.json
│ │ │ └── Contents.json
│ │ ├── Info.plist
│ │ └── main.m
│ ├── exampleTests
│ │ ├── Info.plist
│ │ └── exampleTests.m
│ └── project.pbxproj
├── package.json
└── src
│ ├── App.js
│ ├── Home.js
│ ├── Menu.js
│ ├── bar
│ └── BarChartColumnBasic.js
│ ├── pie
│ ├── PieChartBasic.js
│ └── PieChartBasicAnimation.js
│ ├── radar
│ └── RadarChartBasic.js
│ ├── scatterplot
│ └── ScatterplotChartBasic.js
│ ├── smoothline
│ ├── SmoothLineChartBasic.js
│ ├── SmoothLineChartRegions.js
│ └── SmoothLineChartRegionsExtended.js
│ ├── stockline
│ ├── StockLineChartBasic.js
│ ├── StockLineChartDynamicLineRendering.js
│ ├── StockLineChartDynamicTickLabels.js
│ ├── StockLineChartGesture.js
│ └── StockLineChartStaticTickLabels.js
│ └── tree
│ └── TreeChartBasic.js
├── package-lock.json
├── package.json
└── src
├── Axis.js
├── Bar.js
├── GridAxis.js
├── Line.js
├── Pie.js
├── Radar.js
├── Scatterplot.js
├── SmoothLine.js
├── StockLine.js
├── Tree.js
├── __mocks__
└── react-native-svg.js
├── __tests__
├── SmoothLine
│ ├── SmoothLineBasic-test.js
│ ├── SmoothLineRegions-test.js
│ ├── SmoothLineRegionsExtended-test.js
│ └── __snapshots__
│ │ ├── SmoothLineBasic-test.js.snap
│ │ ├── SmoothLineRegions-test.js.snap
│ │ └── SmoothLineRegionsExtended-test.js.snap
├── pie
│ ├── PieBasic-test.js
│ └── __snapshots__
│ │ └── PieBasic-test.js.snap
├── scatterplot
│ ├── ScatterplotBasic-test.js
│ └── __snapshots__
│ │ └── ScatterplotBasic-test.js.snap
└── stockline
│ ├── StockLineBasic-test.js
│ ├── StockLineDynamicTickLabels-test.js
│ ├── StockLineStaticTickLabels-test.js
│ └── __snapshots__
│ ├── StockLineBasic-test.js.snap
│ ├── StockLineDynamicTickLabels-test.js.snap
│ └── StockLineStaticTickLabels-test.js.snap
├── index.js
└── util.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-native"]
3 | }
4 |
--------------------------------------------------------------------------------
/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 | [*.md]
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "globals": {
4 | "requestAnimationFrame": true
5 | },
6 | "rules": {
7 | "indent": [
8 | "error",
9 | 2,
10 | {"SwitchCase": 1}
11 | ],
12 | "quotes": [
13 | "error",
14 | "single",
15 | "avoid-escape"
16 | ],
17 | "linebreak-style": [
18 | "error",
19 | "unix"
20 | ],
21 | "semi": [
22 | "error",
23 | "never"
24 | ],
25 | "comma-dangle": 0,
26 | "no-var": 1,
27 |
28 | "react/jsx-boolean-value": [1,"always"],
29 | "react/jsx-no-undef": 1,
30 | "react/jsx-uses-react": 1,
31 | "react/jsx-uses-vars": 1,
32 | "react/no-danger": 1,
33 | "react/no-deprecated": 1,
34 | "react/no-did-mount-set-state": 1,
35 | "react/no-did-update-set-state": 1,
36 | "react/no-unknown-property": 1,
37 | "react/react-in-jsx-scope": 1,
38 | "react/require-extension": 1,
39 | "react/sort-comp": 1,
40 | "react/prefer-es6-class": 1,
41 |
42 | "react-native/no-unused-styles": 2,
43 | "react-native/split-platform-components": 2,
44 | },
45 | "env": {
46 | "es6": true,
47 | "node": true,
48 | "jasmine": true,
49 | "jest": true
50 | },
51 | "extends": "eslint:recommended",
52 | "ecmaFeatures": {
53 | "jsx": true,
54 | "experimentalObjectRestSpread": true
55 | },
56 | "plugins": [
57 | "react",
58 | "react-native",
59 | "babel"
60 | ]
61 | }
62 |
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 |
3 | # We fork some components by platform.
4 | .*/*.web.js
5 | .*/*.android.js
6 |
7 | # Some modules have their own node_modules with overlap
8 | .*/node_modules/node-haste/.*
9 |
10 | # Ugh
11 | .*/node_modules/babel.*
12 | .*/node_modules/babylon.*
13 | .*/node_modules/invariant.*
14 |
15 | # Ignore react and fbjs where there are overlaps, but don't ignore
16 | # anything that react-native relies on
17 | .*/node_modules/fbjs/lib/Map.js
18 | .*/node_modules/fbjs/lib/fetch.js
19 | .*/node_modules/fbjs/lib/ExecutionEnvironment.js
20 | .*/node_modules/fbjs/lib/ErrorUtils.js
21 |
22 | # Flow has a built-in definition for the 'react' module which we prefer to use
23 | # over the currently-untyped source
24 | .*/node_modules/react/react.js
25 | .*/node_modules/react/lib/React.js
26 | .*/node_modules/react/lib/ReactDOM.js
27 |
28 | .*/__mocks__/.*
29 | .*/__tests__/.*
30 |
31 | .*/commoner/test/source/widget/share.js
32 |
33 | # Ignore commoner tests
34 | .*/node_modules/commoner/test/.*
35 |
36 | # See https://github.com/facebook/flow/issues/442
37 | .*/react-tools/node_modules/commoner/lib/reader.js
38 |
39 | # Ignore jest
40 | .*/node_modules/jest-cli/.*
41 |
42 | # Ignore Website
43 | .*/website/.*
44 |
45 | # Ignore generators
46 | .*/local-cli/generator.*
47 |
48 | # Ignore BUCK generated folders
49 | .*\.buckd/
50 |
51 | .*/node_modules/is-my-json-valid/test/.*\.json
52 | .*/node_modules/iconv-lite/encodings/tables/.*\.json
53 | .*/node_modules/y18n/test/.*\.json
54 | .*/node_modules/spdx-license-ids/spdx-license-ids.json
55 | .*/node_modules/spdx-exceptions/index.json
56 | .*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
57 | .*/node_modules/resolve/lib/core.json
58 | .*/node_modules/jsonparse/samplejson/.*\.json
59 | .*/node_modules/json5/test/.*\.json
60 | .*/node_modules/ua-parser-js/test/.*\.json
61 | .*/node_modules/builtin-modules/builtin-modules.json
62 | .*/node_modules/binary-extensions/binary-extensions.json
63 | .*/node_modules/url-regex/tlds.json
64 | .*/node_modules/joi/.*\.json
65 | .*/node_modules/isemail/.*\.json
66 | .*/node_modules/tr46/.*\.json
67 |
68 |
69 | [include]
70 |
71 | [libs]
72 | node_modules/react-native/Libraries/react-native/react-native-interface.js
73 | node_modules/react-native/flow
74 | flow/
75 |
76 | [options]
77 | module.system=haste
78 |
79 | esproposal.class_static_fields=enable
80 | esproposal.class_instance_fields=enable
81 |
82 | munge_underscores=true
83 |
84 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
85 | 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\)$' -> 'RelativeImageStub'
86 |
87 | suppress_type=$FlowIssue
88 | suppress_type=$FlowFixMe
89 | suppress_type=$FixMe
90 |
91 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
92 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
93 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
94 |
95 | [version]
96 | ^0.22.0
97 |
--------------------------------------------------------------------------------
/.github/issue_template.md:
--------------------------------------------------------------------------------
1 | Before filing an issue please ensure the following boxes are checked, if applicable:
2 |
3 | - [ ] I have searched for existing issues
4 | - [ ] I have provided detailed instructions that can reproduce the issue (including code and data necessary)
5 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 | Thank you for contributing a pull request.
2 |
3 | Please ensure that you have signed the [CLA](https://docs.google.com/forms/d/19LpBBjykHPox18vrZvBbZUcK6gQTj7qv1O5hCduAZFU/viewform).
4 |
5 | - [ ] I have signed the CLA
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | .history
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Coverage tools
12 | lib-cov
13 | coverage
14 | coverage.html
15 | .cover*
16 |
17 | # Dependency directory
18 | node_modules
19 |
20 | # Example build directory
21 | example/dist
22 |
23 | # Editor and other tmp files
24 | *.swp
25 | *.un~
26 | *.iml
27 | *.ipr
28 | *.iws
29 | *.sublime-*
30 | .idea/
31 | *.DS_Store
32 |
33 | util/watchman-update-example-src/watchman-update-example-src.sh
34 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
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 |
24 | # node.js
25 | #
26 | node_modules/
27 | npm-debug.log
28 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | tag-version-prefix=""
--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ** Capital One built this project to help our engineers as well as users in the react native community. We have decided to focus on alternatives to react native, and, unfortunately, we are no longer able to fully support the project. We have archived the project oas of Mar 1 2018 where it will be available in a read-only state. Feel free to fork the project and maintain your own version. **
2 |
3 |
4 | react-native-pathjs-charts
5 | =======================
6 |
7 | [](https://badge.fury.io/js/react-native-pathjs-charts)
8 |
9 | This library is a cross-platform (iOS/Android) library of charts/graphs using [react-native-svg](https://github.com/magicismight/react-native-svg) and [paths-js](https://github.com/andreaferretti/paths-js) based on the excellent work done by Roman Samec in the [react-pathjs-chart](https://github.com/rsamec/react-pathjs-chart) library. The project is an early attempt at providing a ubiquitous solution for charts & graphs for React Native that offer a unified view across devices.
10 |
11 | Components include Pie charts, Bar charts, Smoothline charts, Stockline charts, Scatterplots, Tree graphs and Radar graphs. Since Paths-Js makes no assumptions about rendering, this library is perfect for using SVG path objects to render custom charts easily.
12 |
13 | This library is in its early stages, but I welcome contributors who would like to help make this the charting solution for React Native. Many of our mobile experiences need to create dashboards. Up to now, we've only been seeing libraries that are native bridges. Wouldn't it be great to have a cross platform solution that just worked?
14 |
15 | 
16 |
17 | ## Installation
18 |
19 | To add the library to your React Native project:
20 |
21 | ```
22 | npm install react-native-pathjs-charts --save
23 | react-native link react-native-svg
24 | ```
25 |
26 | For further information on usage, see the [docs](https://capitalone.github.io/react-native-pathjs-charts/)
27 |
28 |
29 | ## Current Features
30 |
31 | + Pie, Bar, Smoothline, Stockline, Scatterplot, Tree and Radar graphs
32 | + Configuration of format, labels, colors, axis, ticks, lines
33 | + No touch support (yet)
34 | + No animations (yet)
35 | + Chart information configurable based on data parameters which specify which variables are accessors
36 | + Rendering works on iOS/Android
37 | + No native dependencies for linking (except linking required by [react-native-svg](https://github.com/magicismight/react-native-svg))
38 |
39 | ## Example Application
40 |
41 | To run the example application (from a cloned repo):
42 |
43 | ```
44 | cd example
45 | npm install
46 | react-native link react-native-svg
47 | react-native run-ios
48 | # or
49 | react-native run-android
50 | ```
51 |
52 | ### Developing and Testing With The Example App
53 |
54 | As you are working on changing src files in this library and testing those changes against the example app, it is necessary to copy files to example/node_modules/react-native-pathjs-charts each time a change is made. To automate this, a `sync-rnpc` script has been added that will create a background process to watch for src file changes and automatically copy them. To enable this:
55 |
56 | ```
57 | cd example
58 | npm run sync-rnpc
59 | ```
60 |
61 | ## Todo
62 |
63 | For this library to really shine, there are a lot of improvements to be made. Here are some of my top ideas:
64 | + Add basic animations to draw the charts
65 | + Add touch functionality (as the react-native-svg library adds touch features)
66 | + Add the ability to absolutely position regular React-Native views in relation to SVG chart elements
67 | + More chart types
68 | + More axis controls (to control scale)
69 | + Add View component support to allow custom components instead of message when no data appears
70 | + Events
71 | + More documentation, information on configuration
72 | + Extended examples
73 | + Bug fixing, unit testing, cleanup
74 | + CICD pipeline with confirmed build success
75 |
76 |
77 | ## Contributing
78 |
79 | Contributors:
80 | We welcome your interest in Capital One’s Open Source Projects (the “Project”). Any Contributor to the project must accept and sign a CLA indicating agreement to the license terms. Except for the license granted in this CLA to Capital One and to recipients of software distributed by Capital One, you reserve all right, title, and interest in and to your contributions; this CLA does not impact your rights to use your own contributions for any other purpose.
81 |
82 | [Link to CLA](https://docs.google.com/forms/d/19LpBBjykHPox18vrZvBbZUcK6gQTj7qv1O5hCduAZFU/viewform)
83 |
84 | This project adheres to the [Open Source Code of Conduct](http://www.capitalone.io/codeofconduct/). By participating, you are expected to honor this code.
85 |
--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | machine:
2 | node:
3 | version: v6.1.0
4 |
5 | dependencies:
6 | pre:
7 | - echo -e "$NPM_USER\n$NPM_PASS\n$NPM_EMAIL" | npm login
8 | - npm --version
9 | - node --version
10 | post:
11 | - npm test -- --version
12 |
13 | test:
14 | override:
15 | - npm test
16 |
17 | deployment:
18 | release:
19 | tag: /[0-9]+(\.[0-9]+)*/
20 | commands:
21 | - npm publish
22 |
--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-minimal
--------------------------------------------------------------------------------
/docs/bar/index.md:
--------------------------------------------------------------------------------
1 | # Bar Charts
2 |
3 | Basic Column Chart
4 | ```javascript
5 | render() {
6 | let data = [
7 | [{
8 | "v": 49,
9 | "name": "apple"
10 | }, {
11 | "v": 42,
12 | "name": "apple"
13 | }],
14 | [{
15 | "v": 69,
16 | "name": "banana"
17 | }, {
18 | "v": 62,
19 | "name": "banana"
20 | }],
21 | [{
22 | "v": 29,
23 | "name": "grape"
24 | }, {
25 | "v": 15,
26 | "name": "grape"
27 | }]
28 | ]
29 |
30 | let options = {
31 | width: 300,
32 | height: 300,
33 | margin: {
34 | top: 20,
35 | left: 25,
36 | bottom: 50,
37 | right: 20
38 | },
39 | color: '#2980B9',
40 | gutter: 20,
41 | animate: {
42 | type: 'oneByOne',
43 | duration: 200,
44 | fillTransition: 3
45 | },
46 | axisX: {
47 | showAxis: true,
48 | showLines: true,
49 | showLabels: true,
50 | showTicks: true,
51 | zeroAxis: false,
52 | orient: 'bottom',
53 | label: {
54 | fontFamily: 'Arial',
55 | fontSize: 8,
56 | fontWeight: true,
57 | fill: '#34495E'
58 | }
59 | },
60 | axisY: {
61 | showAxis: true,
62 | showLines: true,
63 | showLabels: true,
64 | showTicks: true,
65 | zeroAxis: false,
66 | orient: 'left',
67 | label: {
68 | fontFamily: 'Arial',
69 | fontSize: 8,
70 | fontWeight: true,
71 | fill: '#34495E'
72 | }
73 | }
74 | }
75 |
76 | return (
77 |
78 |
79 |
80 | )
81 | }
82 | ```
83 |
--------------------------------------------------------------------------------
/docs/images/chart-screenshots.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/capitalone/react-native-pathjs-charts/857d4478dbb5d6b1b9f008e252d7be96e21fc390/docs/images/chart-screenshots.png
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | Chart Types
4 | - [Bar Charts]({{ site.baseurl }}{% link bar/index.md %})
5 | - [Pie Charts]({{ site.baseurl }}{% link pie/index.md %})
6 | - [Radar Charts]({{ site.baseurl }}{% link radar/index.md %})
7 | - [Scatterplot Charts]({{ site.baseurl }}{% link scatterplot/index.md %})
8 | - [SmoothLine Charts]({{ site.baseurl }}{% link smoothline/index.md %})
9 | - [StockLine Charts]({{ site.baseurl }}{% link stockline/index.md %})
10 | - [Tree Charts]({{ site.baseurl }}{% link tree/index.md %})
11 |
--------------------------------------------------------------------------------
/docs/pie/index.md:
--------------------------------------------------------------------------------
1 | # Pie Charts
2 |
3 | Basic Pie Chart
4 | ```javascript
5 | render() {
6 | let data = [{
7 | "name": "Washington",
8 | "population": 7694980
9 | }, {
10 | "name": "Oregon",
11 | "population": 2584160
12 | }, {
13 | "name": "Minnesota",
14 | "population": 6590667
15 | }, {
16 | "name": "Alaska",
17 | "population": 7284698
18 | }]
19 |
20 | let options = {
21 | margin: {
22 | top: 20,
23 | left: 20,
24 | right: 20,
25 | bottom: 20
26 | },
27 | width: 350,
28 | height: 350,
29 | color: '#2980B9',
30 | r: 50,
31 | R: 150,
32 | legendPosition: 'topLeft',
33 | animate: {
34 | type: 'oneByOne',
35 | duration: 200,
36 | fillTransition: 3
37 | },
38 | label: {
39 | fontFamily: 'Arial',
40 | fontSize: 8,
41 | fontWeight: true,
42 | color: '#ECF0F1'
43 | }
44 | }
45 |
46 | return (
47 |
48 |
52 |
53 | )
54 | }
55 |
56 | ```
57 |
--------------------------------------------------------------------------------
/docs/radar/index.md:
--------------------------------------------------------------------------------
1 | # Radar Charts
2 |
3 | Basic Radar Chart
4 | ```javascript
5 | render() {
6 | let data = [{
7 | "speed": 74,
8 | "balance": 29,
9 | "explosives": 40,
10 | "energy": 40,
11 | "flexibility": 30,
12 | "agility": 25,
13 | "endurance": 44
14 | }]
15 |
16 | let options = {
17 | width: 290,
18 | height: 290,
19 | margin: {
20 | top: 20,
21 | left: 20,
22 | right: 30,
23 | bottom: 20
24 | },
25 | r: 150,
26 | max: 100,
27 | fill: "#2980B9",
28 | stroke: "#2980B9",
29 | animate: {
30 | type: 'oneByOne',
31 | duration: 200
32 | },
33 | label: {
34 | fontFamily: 'Arial',
35 | fontSize: 14,
36 | fontWeight: true,
37 | fill: '#34495E'
38 | }
39 | }
40 |
41 | return (
42 |
43 |
44 |
45 | )
46 | }
47 | ```
48 |
--------------------------------------------------------------------------------
/docs/scatterplot/index.md:
--------------------------------------------------------------------------------
1 | # Scatterplot Charts
2 |
3 | Basic Scatterplot Chart
4 | ```javascript
5 | render() {
6 | let data = [
7 | [{
8 | "title": "Amapá",
9 | "rating": 4.47,
10 | "episode": 0
11 | }, {
12 | "title": "Santa Catarina",
13 | "rating": 3.3,
14 | "episode": 1
15 | }, {
16 | "title": "Minas Gerais",
17 | "rating": 6.46,
18 | "episode": 2
19 | }, {
20 | "title": "Amazonas",
21 | "rating": 3.87,
22 | "episode": 3
23 | }, {
24 | "title": "Mato Grosso do Sul",
25 | "rating": 2.8,
26 | "episode": 4
27 | }, {
28 | "title": "Mato Grosso do Sul",
29 | "rating": 2.05,
30 | "episode": 5
31 | }, {
32 | "title": "Tocantins",
33 | "rating": 7.28,
34 | "episode": 6
35 | }, {
36 | "title": "Roraima",
37 | "rating": 5.23,
38 | "episode": 7
39 | }, {
40 | "title": "Roraima",
41 | "rating": 7.76,
42 | "episode": 8
43 | }, {
44 | "title": "Amazonas",
45 | "rating": 2.26,
46 | "episode": 9
47 | }, {
48 | "title": "Mato Grosso do Sul",
49 | "rating": 2.46,
50 | "episode": 10
51 | }, {
52 | "title": "Santa Catarina",
53 | "rating": 7.59,
54 | "episode": 11
55 | }, {
56 | "title": "Acre",
57 | "rating": 3.74,
58 | "episode": 12
59 | }, {
60 | "title": "Amapá",
61 | "rating": 5.03,
62 | "episode": 13
63 | }, {
64 | "title": "Paraíba",
65 | "rating": 4.16,
66 | "episode": 14
67 | }, {
68 | "title": "Mato Grosso",
69 | "rating": 0.81,
70 | "episode": 15
71 | }, {
72 | "title": "Rio de Janeiro",
73 | "rating": 3.01,
74 | "episode": 16
75 | }, {
76 | "title": "Rio de Janeiro",
77 | "rating": 0,
78 | "episode": 17
79 | }, {
80 | "title": "Distrito Federal",
81 | "rating": 5.46,
82 | "episode": 18
83 | }, {
84 | "title": "São Paulo",
85 | "rating": 9.71,
86 | "episode": 19
87 | }, {
88 | "title": "Mato Grosso",
89 | "rating": 7.9,
90 | "episode": 20
91 | }, {
92 | "title": "Tocantins",
93 | "rating": 4.2,
94 | "episode": 21
95 | }, {
96 | "title": "Amapá",
97 | "rating": 6,
98 | "episode": 22
99 | }, {
100 | "title": "Paraná",
101 | "rating": 7.99,
102 | "episode": 23
103 | }, {
104 | "title": "Mato Grosso do Sul",
105 | "rating": 1.07,
106 | "episode": 24
107 | }, {
108 | "title": "Tocantins",
109 | "rating": 1.42,
110 | "episode": 25
111 | }, {
112 | "title": "Paraná",
113 | "rating": 5.94,
114 | "episode": 26
115 | }, {
116 | "title": "Maranhão",
117 | "rating": 3.17,
118 | "episode": 27
119 | }, {
120 | "title": "Maranhão",
121 | "rating": 1.58,
122 | "episode": 28
123 | }, {
124 | "title": "Rondônia",
125 | "rating": 6.12,
126 | "episode": 29
127 | }, {
128 | "title": "Roraima",
129 | "rating": 7.28,
130 | "episode": 30
131 | }, {
132 | "title": "Mato Grosso",
133 | "rating": 4.74,
134 | "episode": 31
135 | }, {
136 | "title": "Roraima",
137 | "rating": 1.47,
138 | "episode": 32
139 | }, {
140 | "title": "Alagoas",
141 | "rating": 9,
142 | "episode": 33
143 | }, {
144 | "title": "Amazonas",
145 | "rating": 0.43,
146 | "episode": 34
147 | }, {
148 | "title": "Mato Grosso do Sul",
149 | "rating": 8.61,
150 | "episode": 35
151 | }, {
152 | "title": "Tocantins",
153 | "rating": 0.6,
154 | "episode": 36
155 | }, {
156 | "title": "Maranhão",
157 | "rating": 9.62,
158 | "episode": 37
159 | }, {
160 | "title": "Rio de Janeiro",
161 | "rating": 4.79,
162 | "episode": 38
163 | }, {
164 | "title": "Santa Catarina",
165 | "rating": 7.71,
166 | "episode": 39
167 | }, {
168 | "title": "Piauí",
169 | "rating": 3.83,
170 | "episode": 40
171 | }, {
172 | "title": "Pernambuco",
173 | "rating": 8.19,
174 | "episode": 41
175 | }, {
176 | "title": "Bahia",
177 | "rating": 6.98,
178 | "episode": 42
179 | }, {
180 | "title": "Minas Gerais",
181 | "rating": 4.52,
182 | "episode": 43
183 | }]
184 | ]
185 |
186 | let options = {
187 | width: 290,
188 | height: 290,
189 | r: 2,
190 | margin: {
191 | top: 20,
192 | left: 40,
193 | bottom: 30,
194 | right: 30
195 | },
196 | fill: "#2980B9",
197 | stroke: "#3E90F0",
198 | animate: {
199 | type: 'delayed',
200 | duration: 200
201 | },
202 | label: {
203 | fontFamily: 'Arial',
204 | fontSize: 8,
205 | fontWeight: true,
206 | fill: '#34495E'
207 | },
208 | axisX: {
209 | showAxis: true,
210 | showLines: true,
211 | showLabels: true,
212 | showTicks: true,
213 | zeroAxis: false,
214 | orient: 'bottom',
215 | label: {
216 | fontFamily: 'Arial',
217 | fontSize: 8,
218 | fontWeight: true,
219 | fill: '#34495E'
220 | }
221 | },
222 | axisY: {
223 | showAxis: true,
224 | showLines: true,
225 | showLabels: true,
226 | showTicks: true,
227 | zeroAxis: false,
228 | orient: 'left',
229 | label: {
230 | fontFamily: 'Arial',
231 | fontSize: 8,
232 | fontWeight: true,
233 | fill: '#34495E'
234 | }
235 | }
236 | }
237 |
238 | return (
239 |
240 |
241 |
242 | )
243 | }
244 | ```
245 |
--------------------------------------------------------------------------------
/docs/smoothline/index.md:
--------------------------------------------------------------------------------
1 | # SmoothLine Charts
2 |
3 | Basic SmoothLine Chart
4 | ```javascript
5 | render() {
6 | let data = [
7 | [{
8 | "x": -10,
9 | "y": -1000
10 | }, {
11 | "x": -9,
12 | "y": -729
13 | }, {
14 | "x": -8,
15 | "y": -512
16 | }, {
17 | "x": -7,
18 | "y": -343
19 | }, {
20 | "x": -6,
21 | "y": -216
22 | }, {
23 | "x": -5,
24 | "y": -125
25 | }, {
26 | "x": -4,
27 | "y": -64
28 | }, {
29 | "x": -3,
30 | "y": -27
31 | }, {
32 | "x": -2,
33 | "y": -8
34 | }, {
35 | "x": -1,
36 | "y": -1
37 | }, {
38 | "x": 0,
39 | "y": 0
40 | }, {
41 | "x": 1,
42 | "y": 1
43 | }, {
44 | "x": 2,
45 | "y": 8
46 | }, {
47 | "x": 3,
48 | "y": 27
49 | }, {
50 | "x": 4,
51 | "y": 64
52 | }, {
53 | "x": 5,
54 | "y": 125
55 | }, {
56 | "x": 6,
57 | "y": 216
58 | }, {
59 | "x": 7,
60 | "y": 343
61 | }, {
62 | "x": 8,
63 | "y": 512
64 | }, {
65 | "x": 9,
66 | "y": 729
67 | }, {
68 | "x": 10,
69 | "y": 1000
70 | }],
71 | [{
72 | "x": -10,
73 | "y": 100
74 | }, {
75 | "x": -9,
76 | "y": 81
77 | }, {
78 | "x": -8,
79 | "y": 64
80 | }, {
81 | "x": -7,
82 | "y": 49
83 | }, {
84 | "x": -6,
85 | "y": 36
86 | }, {
87 | "x": -5,
88 | "y": 25
89 | }, {
90 | "x": -4,
91 | "y": 16
92 | }, {
93 | "x": -3,
94 | "y": 9
95 | }, {
96 | "x": -2,
97 | "y": 4
98 | }, {
99 | "x": -1,
100 | "y": 1
101 | }, {
102 | "x": 0,
103 | "y": 0
104 | }, {
105 | "x": 1,
106 | "y": 1
107 | }, {
108 | "x": 2,
109 | "y": 4
110 | }, {
111 | "x": 3,
112 | "y": 9
113 | }, {
114 | "x": 4,
115 | "y": 16
116 | }, {
117 | "x": 5,
118 | "y": 25
119 | }, {
120 | "x": 6,
121 | "y": 36
122 | }, {
123 | "x": 7,
124 | "y": 49
125 | }, {
126 | "x": 8,
127 | "y": 64
128 | }, {
129 | "x": 9,
130 | "y": 81
131 | }, {
132 | "x": 10,
133 | "y": 100
134 | }]
135 | ]
136 |
137 | let options = {
138 | width: 280,
139 | height: 280,
140 | color: '#2980B9',
141 | margin: {
142 | top: 20,
143 | left: 45,
144 | bottom: 25,
145 | right: 20
146 | },
147 | animate: {
148 | type: 'delayed',
149 | duration: 200
150 | },
151 | axisX: {
152 | showAxis: true,
153 | showLines: true,
154 | showLabels: true,
155 | showTicks: true,
156 | zeroAxis: false,
157 | orient: 'bottom',
158 | label: {
159 | fontFamily: 'Arial',
160 | fontSize: 14,
161 | fontWeight: true,
162 | fill: '#34495E'
163 | }
164 | },
165 | axisY: {
166 | showAxis: true,
167 | showLines: true,
168 | showLabels: true,
169 | showTicks: true,
170 | zeroAxis: false,
171 | orient: 'left',
172 | label: {
173 | fontFamily: 'Arial',
174 | fontSize: 14,
175 | fontWeight: true,
176 | fill: '#34495E'
177 | }
178 | }
179 | }
180 |
181 | return (
182 |
183 |
184 |
185 | )
186 | }
187 | ```
188 |
--------------------------------------------------------------------------------
/docs/stockline/index.md:
--------------------------------------------------------------------------------
1 | # StockLine Charts
2 |
3 | Basic StockLine Chart
4 | ```javascript
5 | render() {
6 | let data = [
7 | [{
8 | "x": 0,
9 | "y": 47782
10 | }, {
11 | "x": 1,
12 | "y": 48497
13 | }, {
14 | "x": 2,
15 | "y": 77128
16 | }, {
17 | "x": 3,
18 | "y": 73413
19 | }, {
20 | "x": 4,
21 | "y": 58257
22 | }, {
23 | "x": 5,
24 | "y": 40579
25 | }, {
26 | "x": 6,
27 | "y": 72893
28 | }, {
29 | "x": 7,
30 | "y": 60663
31 | }, {
32 | "x": 8,
33 | "y": 15715
34 | }, {
35 | "x": 9,
36 | "y": 40305
37 | }, {
38 | "x": 10,
39 | "y": 68592
40 | }, {
41 | "x": 11,
42 | "y": 95664
43 | }, {
44 | "x": 12,
45 | "y": 17908
46 | }, {
47 | "x": 13,
48 | "y": 22838
49 | }, {
50 | "x": 14,
51 | "y": 32153
52 | }, {
53 | "x": 15,
54 | "y": 56594
55 | }, {
56 | "x": 16,
57 | "y": 76348
58 | }, {
59 | "x": 17,
60 | "y": 46222
61 | }, {
62 | "x": 18,
63 | "y": 59304
64 | }],
65 | [{
66 | "x": 0,
67 | "y": 132189
68 | }, {
69 | "x": 1,
70 | "y": 61705
71 | }, {
72 | "x": 2,
73 | "y": 154976
74 | }, {
75 | "x": 3,
76 | "y": 81304
77 | }, {
78 | "x": 4,
79 | "y": 172572
80 | }, {
81 | "x": 5,
82 | "y": 140656
83 | }, {
84 | "x": 6,
85 | "y": 148606
86 | }, {
87 | "x": 7,
88 | "y": 53010
89 | }, {
90 | "x": 8,
91 | "y": 110783
92 | }, {
93 | "x": 9,
94 | "y": 196446
95 | }, {
96 | "x": 10,
97 | "y": 117057
98 | }, {
99 | "x": 11,
100 | "y": 186765
101 | }, {
102 | "x": 12,
103 | "y": 174908
104 | }, {
105 | "x": 13,
106 | "y": 75247
107 | }, {
108 | "x": 14,
109 | "y": 192894
110 | }, {
111 | "x": 15,
112 | "y": 150356
113 | }, {
114 | "x": 16,
115 | "y": 180360
116 | }, {
117 | "x": 17,
118 | "y": 175697
119 | }, {
120 | "x": 18,
121 | "y": 114967
122 | }],
123 | [{
124 | "x": 0,
125 | "y": 125797
126 | }, {
127 | "x": 1,
128 | "y": 256656
129 | }, {
130 | "x": 2,
131 | "y": 222260
132 | }, {
133 | "x": 3,
134 | "y": 265642
135 | }, {
136 | "x": 4,
137 | "y": 263902
138 | }, {
139 | "x": 5,
140 | "y": 113453
141 | }, {
142 | "x": 6,
143 | "y": 289461
144 | }, {
145 | "x": 7,
146 | "y": 293850
147 | }, {
148 | "x": 8,
149 | "y": 206079
150 | }, {
151 | "x": 9,
152 | "y": 240859
153 | }, {
154 | "x": 10,
155 | "y": 152776
156 | }, {
157 | "x": 11,
158 | "y": 297282
159 | }, {
160 | "x": 12,
161 | "y": 175177
162 | }, {
163 | "x": 13,
164 | "y": 169233
165 | }, {
166 | "x": 14,
167 | "y": 237827
168 | }, {
169 | "x": 15,
170 | "y": 242429
171 | }, {
172 | "x": 16,
173 | "y": 218230
174 | }, {
175 | "x": 17,
176 | "y": 161511
177 | }, {
178 | "x": 18,
179 | "y": 153227
180 | }]
181 | ]
182 | let options = {
183 | width: 250,
184 | height: 250,
185 | color: '#2980B9',
186 | margin: {
187 | top: 10,
188 | left: 35,
189 | bottom: 30,
190 | right: 10
191 | },
192 | animate: {
193 | type: 'delayed',
194 | duration: 200
195 | },
196 | axisX: {
197 | showAxis: true,
198 | showLines: true,
199 | showLabels: true,
200 | showTicks: true,
201 | zeroAxis: false,
202 | orient: 'bottom',
203 | tickValues: [],
204 | label: {
205 | fontFamily: 'Arial',
206 | fontSize: 8,
207 | fontWeight: true,
208 | fill: '#34495E'
209 | }
210 | },
211 | axisY: {
212 | showAxis: true,
213 | showLines: true,
214 | showLabels: true,
215 | showTicks: true,
216 | zeroAxis: false,
217 | orient: 'left',
218 | tickValues: [],
219 | label: {
220 | fontFamily: 'Arial',
221 | fontSize: 8,
222 | fontWeight: true,
223 | fill: '#34495E'
224 | }
225 | }
226 | }
227 |
228 | return (
229 |
230 |
231 |
232 | )
233 | }
234 | ```
235 |
--------------------------------------------------------------------------------
/docs/tree/index.md:
--------------------------------------------------------------------------------
1 | # Tree Charts
2 |
3 | Basic Tree Chart
4 | ```javascript
5 | render() {
6 | let data = {
7 | "name": "Root",
8 | "children": [{
9 | "name": "Santa Catarina",
10 | "children": [{
11 | "name": "Tromp"
12 | }, {
13 | "name": "Thompson"
14 | }, {
15 | "name": "Ryan"
16 | }]
17 | }, {
18 | "name": "Acre",
19 | "children": [{
20 | "name": "Dicki"
21 | }, {
22 | "name": "Armstrong"
23 | }, {
24 | "name": "Nitzsche"
25 | }]
26 | }]
27 | }
28 |
29 | let options = {
30 | margin: {
31 | top: 20,
32 | left: 50,
33 | right: 80,
34 | bottom: 20
35 | },
36 | width: 200,
37 | height: 200,
38 | fill: "#2980B9",
39 | stroke: "#3E90F0",
40 | r: 2,
41 | animate: {
42 | type: 'oneByOne',
43 | duration: 200,
44 | fillTransition: 3
45 | },
46 | label: {
47 | fontFamily: 'Arial',
48 | fontSize: 8,
49 | fontWeight: true,
50 | fill: '#34495E'
51 | }
52 | }
53 |
54 | return (
55 |
56 |
57 |
58 | )
59 | }
60 | ```
61 |
--------------------------------------------------------------------------------
/example/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-native"]
3 | }
4 |
--------------------------------------------------------------------------------
/example/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/example/.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 |
16 | ; Ignore polyfills
17 | .*/Libraries/polyfills/.*
18 |
19 | [include]
20 |
21 | [libs]
22 | node_modules/react-native/Libraries/react-native/react-native-interface.js
23 | node_modules/react-native/flow/
24 |
25 | [options]
26 | emoji=true
27 |
28 | module.system=haste
29 |
30 | experimental.strict_type_args=true
31 |
32 | munge_underscores=true
33 |
34 | 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'
35 |
36 | suppress_type=$FlowIssue
37 | suppress_type=$FlowFixMe
38 | suppress_type=$FlowFixMeProps
39 | suppress_type=$FlowFixMeState
40 | suppress_type=$FixMe
41 |
42 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
43 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
44 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
45 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
46 |
47 | unsafe.enable_getters_and_setters=true
48 |
49 | [version]
50 | ^0.56.0
51 |
--------------------------------------------------------------------------------
/example/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 |
--------------------------------------------------------------------------------
/example/.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 | yarn-error.log
38 |
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 |
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 |
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 |
--------------------------------------------------------------------------------
/example/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/example/android/app/BUCK:
--------------------------------------------------------------------------------
1 | # To learn about Buck see [Docs](https://buckbuild.com/).
2 | # To run your application with Buck:
3 | # - install Buck
4 | # - `npm start` - to start the packager
5 | # - `cd android`
6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8 | # - `buck install -r android/app` - compile, install and run application
9 | #
10 |
11 | lib_deps = []
12 |
13 | for jarfile in glob(['libs/*.jar']):
14 | name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
15 | lib_deps.append(':' + name)
16 | prebuilt_jar(
17 | name = name,
18 | binary_jar = jarfile,
19 | )
20 |
21 | for aarfile in glob(['libs/*.aar']):
22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
23 | lib_deps.append(':' + name)
24 | android_prebuilt_aar(
25 | name = name,
26 | aar = aarfile,
27 | )
28 |
29 | android_library(
30 | name = "all-libs",
31 | exported_deps = lib_deps,
32 | )
33 |
34 | android_library(
35 | name = "app-code",
36 | srcs = glob([
37 | "src/main/java/**/*.java",
38 | ]),
39 | deps = [
40 | ":all-libs",
41 | ":build_config",
42 | ":res",
43 | ],
44 | )
45 |
46 | android_build_config(
47 | name = "build_config",
48 | package = "com.example",
49 | )
50 |
51 | android_resource(
52 | name = "res",
53 | package = "com.example",
54 | res = "src/main/res",
55 | )
56 |
57 | android_binary(
58 | name = "app",
59 | keystore = "//android/keystores:debug",
60 | manifest = "src/main/AndroidManifest.xml",
61 | package_type = "debug",
62 | deps = [
63 | ":app-code",
64 | ],
65 | )
66 |
--------------------------------------------------------------------------------
/example/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 | # TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
54 | # See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
55 | -dontwarn android.text.StaticLayout
56 |
57 | # okhttp
58 |
59 | -keepattributes Signature
60 | -keepattributes *Annotation*
61 | -keep class okhttp3.** { *; }
62 | -keep interface okhttp3.** { *; }
63 | -dontwarn okhttp3.**
64 |
65 | # okio
66 |
67 | -keep class sun.misc.Unsafe { *; }
68 | -dontwarn java.nio.file.*
69 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
70 | -dontwarn okio.**
71 |
--------------------------------------------------------------------------------
/example/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
12 |
13 |
19 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/example/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.example;
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 "example";
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/example/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.example;
2 |
3 | import android.app.Application;
4 |
5 | import com.facebook.react.ReactApplication;
6 | import com.horcrux.svg.SvgPackage;
7 | import com.facebook.react.ReactNativeHost;
8 | import com.facebook.react.ReactPackage;
9 | import com.facebook.react.shell.MainReactPackage;
10 | import com.facebook.soloader.SoLoader;
11 |
12 | import java.util.Arrays;
13 | import java.util.List;
14 |
15 | public class MainApplication extends Application implements ReactApplication {
16 |
17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
18 | @Override
19 | public boolean getUseDeveloperSupport() {
20 | return BuildConfig.DEBUG;
21 | }
22 |
23 | @Override
24 | protected List getPackages() {
25 | return Arrays.asList(
26 | new MainReactPackage(),
27 | new SvgPackage()
28 | );
29 | }
30 | };
31 |
32 | @Override
33 | public ReactNativeHost getReactNativeHost() {
34 | return mReactNativeHost;
35 | }
36 |
37 | @Override
38 | public void onCreate() {
39 | super.onCreate();
40 | SoLoader.init(this, /* native exopackage */ false);
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/capitalone/react-native-pathjs-charts/857d4478dbb5d6b1b9f008e252d7be96e21fc390/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/capitalone/react-native-pathjs-charts/857d4478dbb5d6b1b9f008e252d7be96e21fc390/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/capitalone/react-native-pathjs-charts/857d4478dbb5d6b1b9f008e252d7be96e21fc390/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/capitalone/react-native-pathjs-charts/857d4478dbb5d6b1b9f008e252d7be96e21fc390/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | example
3 |
4 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/example/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:2.2.3'
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 |
--------------------------------------------------------------------------------
/example/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 |
--------------------------------------------------------------------------------
/example/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/capitalone/react-native-pathjs-charts/857d4478dbb5d6b1b9f008e252d7be96e21fc390/example/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/example/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.14.1-all.zip
6 |
--------------------------------------------------------------------------------
/example/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 |
--------------------------------------------------------------------------------
/example/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 |
--------------------------------------------------------------------------------
/example/android/keystores/BUCK:
--------------------------------------------------------------------------------
1 | keystore(
2 | name = "debug",
3 | properties = "debug.keystore.properties",
4 | store = "debug.keystore",
5 | visibility = [
6 | "PUBLIC",
7 | ],
8 | )
9 |
--------------------------------------------------------------------------------
/example/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 |
--------------------------------------------------------------------------------
/example/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'example'
2 | include ':react-native-svg'
3 | project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
4 |
5 | include ':app'
6 |
--------------------------------------------------------------------------------
/example/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "displayName": "example"
4 | }
--------------------------------------------------------------------------------
/example/index.android.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 | */
15 |
16 | 'use strict';
17 |
18 | import React, { AppRegistry } from 'react-native';
19 | import App from './src/App';
20 |
21 | AppRegistry.registerComponent('example', () => App);
22 |
--------------------------------------------------------------------------------
/example/index.ios.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 | */
15 |
16 | 'use strict';
17 |
18 | import React, { AppRegistry } from 'react-native';
19 | import App from './src/App';
20 |
21 | AppRegistry.registerComponent('example', () => App);
22 |
--------------------------------------------------------------------------------
/example/ios/example-tvOS/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 |
--------------------------------------------------------------------------------
/example/ios/example-tvOSTests/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 |
--------------------------------------------------------------------------------
/example/ios/example.xcodeproj/xcshareddata/xcschemes/example-tvOS.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
29 |
35 |
36 |
37 |
43 |
49 |
50 |
51 |
52 |
53 |
58 |
59 |
61 |
67 |
68 |
69 |
70 |
71 |
77 |
78 |
79 |
80 |
81 |
82 |
92 |
94 |
100 |
101 |
102 |
103 |
104 |
105 |
111 |
113 |
119 |
120 |
121 |
122 |
124 |
125 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
29 |
35 |
36 |
37 |
43 |
49 |
50 |
51 |
52 |
53 |
58 |
59 |
61 |
67 |
68 |
69 |
70 |
71 |
77 |
78 |
79 |
80 |
81 |
82 |
92 |
94 |
100 |
101 |
102 |
103 |
104 |
105 |
111 |
113 |
119 |
120 |
121 |
122 |
124 |
125 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/example/ios/example/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 |
--------------------------------------------------------------------------------
/example/ios/example/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
13 | #import
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:@"example"
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 |
--------------------------------------------------------------------------------
/example/ios/example/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 |
--------------------------------------------------------------------------------
/example/ios/example/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 | }
--------------------------------------------------------------------------------
/example/ios/example/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/example/ios/example/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | example
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | 1.0
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | 1
25 | LSRequiresIPhoneOS
26 |
27 | UILaunchStoryboardName
28 | LaunchScreen
29 | UIRequiredDeviceCapabilities
30 |
31 | armv7
32 |
33 | UISupportedInterfaceOrientations
34 |
35 | UIInterfaceOrientationPortrait
36 | UIInterfaceOrientationLandscapeLeft
37 | UIInterfaceOrientationLandscapeRight
38 |
39 | UIViewControllerBasedStatusBarAppearance
40 |
41 | NSLocationWhenInUseUsageDescription
42 |
43 | NSAppTransportSecurity
44 |
45 |
46 | NSExceptionDomains
47 |
48 | localhost
49 |
50 | NSExceptionAllowsInsecureHTTPLoads
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/example/ios/example/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 |
--------------------------------------------------------------------------------
/example/ios/exampleTests/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 |
--------------------------------------------------------------------------------
/example/ios/exampleTests/exampleTests.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
14 | #import
15 |
16 | #define TIMEOUT_SECONDS 600
17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
18 |
19 | @interface exampleTests : XCTestCase
20 |
21 | @end
22 |
23 | @implementation exampleTests
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 = [[[RCTSharedApplication() 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 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "start": "node node_modules/react-native/local-cli/cli.js start",
7 | "sync-rnpc": "rm -rf ./node_modules/react-native-pathjs-charts; sane '/usr/bin/rsync -v -a --exclude .git --exclude example --exclude node_modules ../ ./node_modules/react-native-pathjs-charts/' .. --glob='{**/*.json,**/*.js}'"
8 | },
9 | "dependencies": {
10 | "moment": "^2.17.1",
11 | "react": "16.0.0",
12 | "react-native": "0.50.3",
13 | "react-native-pathjs-charts": "file:../",
14 | "react-native-side-menu": "^1.0.0",
15 | "react-navigation": "^1.0.0-beta.9"
16 | },
17 | "devDependencies": {
18 | "babel-polyfill": "^6.22.0",
19 | "sane": "^1.4.1"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { AppRegistry, Text, StyleSheet, View, Button } from 'react-native'
23 | import { StackNavigator} from 'react-navigation';
24 | import SideMenu from 'react-native-side-menu'
25 |
26 | import BarChartColumnBasic from './bar/BarChartColumnBasic'
27 |
28 | import PieChartBasic from './pie/PieChartBasic'
29 | import PieChartBasicAnimation from './pie/PieChartBasicAnimation'
30 |
31 | import StockLineChartBasic from './stockline/StockLineChartBasic'
32 | import StockLineChartStaticTickLabels from './stockline/StockLineChartStaticTickLabels'
33 | import StockLineChartDynamicTickLabels from './stockline/StockLineChartDynamicTickLabels'
34 | import StockLineChartDynamicLineRendering from './stockline/StockLineChartDynamicLineRendering'
35 | import StockLineChartGesture from './stockline/StockLineChartGesture'
36 |
37 | import SmoothLineChartBasic from './smoothline/SmoothLineChartBasic'
38 | import SmoothLineChartRegions from './smoothline/SmoothLineChartRegions'
39 | import SmoothLineChartRegionsExtended from './smoothline/SmoothLineChartRegionsExtended'
40 |
41 | import ScatterplotChartBasic from './scatterplot/ScatterplotChartBasic'
42 |
43 | import RadarChartBasic from './radar/RadarChartBasic'
44 |
45 | import TreeChartBasic from './tree/TreeChartBasic'
46 |
47 | import Home from './Home'
48 |
49 | const styles = StyleSheet.create({
50 | container: {
51 | flex: 1,
52 | justifyContent: 'center',
53 | alignItems: 'center',
54 | backgroundColor: '#f7f7f7',
55 | },
56 | });
57 |
58 | class HomeScreen extends React.Component {
59 | static navigationOptions = {
60 | title: 'RNPC Example App',
61 | };
62 | render() {
63 | const { navigate } = this.props.navigation;
64 | return (
65 |
66 |
124 | );
125 | }
126 | }
127 |
128 | const App = StackNavigator({
129 | Home: { screen: HomeScreen },
130 | BarChartColumnBasic: { screen: BarChartColumnBasic },
131 | PieChartBasic: { screen: PieChartBasic },
132 | PieChartBasicAnimation: { screen: PieChartBasicAnimation },
133 | StockLineChartBasic: { screen: StockLineChartBasic },
134 | StockLineChartStaticTickLabels: { screen: StockLineChartStaticTickLabels },
135 | StockLineChartDynamicTickLabels: { screen: StockLineChartDynamicTickLabels },
136 | StockLineChartDynamicLineRendering: { screen: StockLineChartDynamicLineRendering },
137 | StockLineChartGesture: { screen: StockLineChartGesture },
138 | SmoothLineChartBasic: { screen: SmoothLineChartBasic },
139 | SmoothLineChartRegions: { screen: SmoothLineChartRegions },
140 | SmoothLineChartRegionsExtended: { screen: SmoothLineChartRegionsExtended },
141 | ScatterplotChartBasic: { screen: ScatterplotChartBasic },
142 | RadarChartBasic: { screen: RadarChartBasic },
143 | TreeChartBasic: { screen: TreeChartBasic },
144 | });
145 |
146 | AppRegistry.registerComponent('App', () => App);
147 | export default App;
148 |
--------------------------------------------------------------------------------
/example/src/Home.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { Text, View } from 'react-native'
23 |
24 | class Home extends Component {
25 | render() {
26 | return (
27 |
28 | Swipe from left to view menu of examples
29 |
30 | );
31 | }
32 | }
33 |
34 | export default Home;
35 |
--------------------------------------------------------------------------------
/example/src/Menu.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import {
23 | Dimensions,
24 | StyleSheet,
25 | ScrollView,
26 | View,
27 | Image,
28 | Text,
29 | } from 'react-native';
30 |
31 | const window = Dimensions.get('window');
32 |
33 | const styles = StyleSheet.create({
34 | menu: {
35 | flex: 1,
36 | width: window.width,
37 | height: window.height,
38 | backgroundColor: '#e7e7e7',
39 | padding: 20,
40 | paddingTop: 40,
41 | },
42 | group: {
43 | borderTopWidth: 1,
44 | borderTopColor: '#ccc',
45 | paddingTop: 5,
46 | marginTop: 10,
47 | },
48 | item: {
49 | fontSize: 14,
50 | fontWeight: '300',
51 | paddingTop: 5,
52 | },
53 | subitem: {
54 | fontSize: 12,
55 | fontWeight: '300',
56 | paddingTop: 5,
57 | paddingLeft: 20,
58 | },
59 | });
60 |
61 | class Menu extends Component {
62 | static propTypes = {
63 | onItemSelected: React.PropTypes.func.isRequired,
64 | };
65 |
66 | render() {
67 | return (
68 |
69 | this.props.onItemSelected('Home')}
71 | style={styles.item}>
72 | Home
73 |
74 |
75 | {/*Start Bar Charts*/}
76 |
77 |
78 | Bar Charts
79 |
80 | this.props.onItemSelected('BarChartColumnBasic')}
82 | style={styles.subitem}>
83 | Basic Column
84 |
85 |
86 | {/*End Bar Charts*/}
87 |
88 | {/*Start Pie Charts*/}
89 |
90 |
91 | Pie Charts
92 |
93 | this.props.onItemSelected('PieChartBasic')}
95 | style={styles.subitem}>
96 | Basic Pie
97 |
98 |
99 | {/*End Pie Charts*/}
100 |
101 | {/*Start StockLine Charts*/}
102 |
103 |
104 | StockLine Charts
105 |
106 | this.props.onItemSelected('StockLineChartBasic')}
108 | style={styles.subitem}>
109 | Basic StockLine
110 |
111 | this.props.onItemSelected('StockLineChartStaticTickLabels')}
113 | style={styles.subitem}>
114 | StockLine w/Static Tick Labels
115 |
116 | this.props.onItemSelected('StockLineChartDynamicTickLabels')}
118 | style={styles.subitem}>
119 | StockLine w/Dynamic Tick Labels
120 |
121 | this.props.onItemSelected('StockLineChartDynamicLineRendering')}
123 | style={styles.subitem}>
124 | StockLine w/Dynamic Line Rendering
125 |
126 |
127 | {/*End StockLine Charts*/}
128 |
129 | {/*Start SmoothLine Charts*/}
130 |
131 |
132 | SmoothLine Charts
133 |
134 | this.props.onItemSelected('SmoothLineChartBasic')}
136 | style={styles.subitem}>
137 | Basic SmoothLine
138 |
139 | this.props.onItemSelected('SmoothLineChartRegions')}
141 | style={styles.subitem}>
142 | SmoothLine w/Region Bands
143 |
144 | this.props.onItemSelected('SmoothLineChartRegionsExtended')}
146 | style={styles.subitem}>
147 | Extended SmoothLine w/Region Bands
148 |
149 |
150 | {/*End SmoothLine Charts*/}
151 |
152 | {/*Start Scatterplot Charts*/}
153 |
154 |
155 | Scatterplot Charts
156 |
157 | this.props.onItemSelected('ScatterplotChartBasic')}
159 | style={styles.subitem}>
160 | Basic Scatterplot
161 |
162 |
163 | {/*End Scatterplot Charts*/}
164 |
165 | {/*Start Radar Charts*/}
166 |
167 |
168 | Radar Charts
169 |
170 | this.props.onItemSelected('RadarChartBasic')}
172 | style={styles.subitem}>
173 | Basic Radar
174 |
175 |
176 | {/*End Radar Charts*/}
177 |
178 | {/*Start Tree Charts*/}
179 |
180 |
181 | Tree Charts
182 |
183 | this.props.onItemSelected('TreeChartBasic')}
185 | style={styles.subitem}>
186 | Basic Tree
187 |
188 |
189 | {/*End Tree Charts*/}
190 |
191 | );
192 | }
193 | }
194 |
195 | export default Menu;
196 |
--------------------------------------------------------------------------------
/example/src/bar/BarChartColumnBasic.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { Bar } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class BarChartColumnBasic extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `Bar (Column) - Basic`,
38 | });
39 | render() {
40 | let data = [
41 | [{
42 | "v": 49,
43 | "name": "apple"
44 | }, {
45 | "v": 42,
46 | "name": "apple"
47 | }],
48 | [{
49 | "v": 69,
50 | "name": "banana"
51 | }, {
52 | "v": 62,
53 | "name": "banana"
54 | }],
55 | [{
56 | "v": 29,
57 | "name": "grape"
58 | }, {
59 | "v": 15,
60 | "name": "grape"
61 | }]
62 | ]
63 |
64 | let options = {
65 | width: 300,
66 | height: 300,
67 | margin: {
68 | top: 20,
69 | left: 25,
70 | bottom: 50,
71 | right: 20
72 | },
73 | color: '#2980B9',
74 | gutter: 20,
75 | animate: {
76 | type: 'oneByOne',
77 | duration: 200,
78 | fillTransition: 3
79 | },
80 | axisX: {
81 | showAxis: true,
82 | showLines: true,
83 | showLabels: true,
84 | showTicks: true,
85 | zeroAxis: false,
86 | orient: 'bottom',
87 | label: {
88 | fontFamily: 'Arial',
89 | fontSize: 8,
90 | fontWeight: true,
91 | fill: '#34495E',
92 | rotate: 45
93 | }
94 | },
95 | axisY: {
96 | showAxis: true,
97 | showLines: true,
98 | showLabels: true,
99 | showTicks: true,
100 | zeroAxis: false,
101 | orient: 'left',
102 | label: {
103 | fontFamily: 'Arial',
104 | fontSize: 8,
105 | fontWeight: true,
106 | fill: '#34495E'
107 | }
108 | }
109 | }
110 |
111 | return (
112 |
113 |
114 |
115 | )
116 | }
117 | }
118 |
119 | export default BarChartColumnBasic;
120 |
--------------------------------------------------------------------------------
/example/src/pie/PieChartBasic.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { Pie } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class PieChartBasic extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `Pie - Basic`,
38 | });
39 | render() {
40 | let data = [{
41 | "name": "Washington",
42 | "population": 7694980
43 | }, {
44 | "name": "Oregon",
45 | "population": 2584160
46 | }, {
47 | "name": "Minnesota",
48 | "population": 6590667,
49 | "color": {'r':223,'g':154,'b':20}
50 | }, {
51 | "name": "Alaska",
52 | "population": 7284698
53 | }]
54 |
55 | let options = {
56 | margin: {
57 | top: 20,
58 | left: 20,
59 | right: 20,
60 | bottom: 20
61 | },
62 | width: 350,
63 | height: 350,
64 | color: '#2980B9',
65 | r: 50,
66 | R: 150,
67 | legendPosition: 'topLeft',
68 | animate: {
69 | type: 'oneByOne',
70 | duration: 200,
71 | fillTransition: 3
72 | },
73 | label: {
74 | fontFamily: 'Arial',
75 | fontSize: 8,
76 | fontWeight: true,
77 | color: '#ECF0F1'
78 | }
79 | }
80 |
81 | return (
82 |
83 |
108 |
109 | )
110 | }
111 | }
112 |
113 | export default PieChartBasic;
114 |
--------------------------------------------------------------------------------
/example/src/pie/PieChartBasicAnimation.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { Pie } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 |
29 | flex: 1,
30 | justifyContent: 'center',
31 | alignItems: 'center',
32 | backgroundColor: '#f7f7f7',
33 | },
34 | });
35 |
36 | class PieChartBasicAnimation extends Component {
37 | static navigationOptions = ({ navigation }) => ({
38 | title: `Pie - Basic - Animation`,
39 | });
40 | render() {
41 | let data = [{
42 | "name": "Washington",
43 | "population": 7694980
44 | },
45 | {
46 | "name": "Oregon",
47 | "population": 2584160
48 | }, {
49 | "name": "Minnesota",
50 | "population": 6590667,
51 | "color": {'r':223,'g':154,'b':20}
52 | }, {
53 | "name": "Alaska",
54 | "population": 7284698
55 | }
56 | ]
57 |
58 | let options = {
59 | margin: {
60 | top: 20,
61 | left: 20,
62 | right: 20,
63 | bottom: 20
64 | },
65 | width: 350,
66 | height: 350,
67 | color: '#2980B9',
68 | r: 50,
69 | R: 150,
70 | legendPosition: 'topLeft',
71 | animate: {
72 | enabled: true,
73 | type: 'oneByOne',
74 | duration: 200,
75 | fillTransition: 3
76 | },
77 | label: {
78 | fontFamily: 'Arial',
79 | fontSize: 8,
80 | fontWeight: true,
81 | color: '#ECF0F1'
82 | }
83 | }
84 |
85 | return (
86 |
87 |
113 |
114 | )
115 | }
116 | }
117 |
118 | export default PieChartBasicAnimation;
119 |
--------------------------------------------------------------------------------
/example/src/radar/RadarChartBasic.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { Radar } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class RadarChartBasic extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `Radar - Basic`,
38 | });
39 |
40 | onLabelPress = (label, value) => {
41 | alert(label + ':' + value);
42 | }
43 |
44 | render() {
45 | let data = [{
46 | "speed": 74,
47 | "balance": 29,
48 | "explosives": 40,
49 | "energy": 40,
50 | "flexibility": 30,
51 | "agility": 25,
52 | "endurance": 44
53 | }]
54 |
55 | let options = {
56 | width: 290,
57 | height: 290,
58 | margin: {
59 | top: 20,
60 | left: 20,
61 | right: 30,
62 | bottom: 20
63 | },
64 | r: 150,
65 | max: 100,
66 | fill: "#2980B9",
67 | stroke: "#2980B9",
68 | animate: {
69 | type: 'oneByOne',
70 | duration: 200
71 | },
72 | label: {
73 | fontFamily: 'Arial',
74 | fontSize: 14,
75 | fontWeight: true,
76 | fill: '#34495E',
77 | onLabelPress: this.onLabelPress
78 | }
79 | }
80 |
81 | return (
82 |
83 |
84 |
85 | )
86 | }
87 | }
88 |
89 | export default RadarChartBasic;
90 |
--------------------------------------------------------------------------------
/example/src/smoothline/SmoothLineChartBasic.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { SmoothLine } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class SmoothLineChartBasic extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `SmoothLine - Basic`,
38 | });
39 | render() {
40 | let data = [
41 | [{
42 | "x": -10,
43 | "y": -1000
44 | }, {
45 | "x": -9,
46 | "y": -729
47 | }, {
48 | "x": -8,
49 | "y": -512
50 | }, {
51 | "x": -7,
52 | "y": -343
53 | }, {
54 | "x": -6,
55 | "y": -216
56 | }, {
57 | "x": -5,
58 | "y": -125
59 | }, {
60 | "x": -4,
61 | "y": -64
62 | }, {
63 | "x": -3,
64 | "y": -27
65 | }, {
66 | "x": -2,
67 | "y": -8
68 | }, {
69 | "x": -1,
70 | "y": -1
71 | }, {
72 | "x": 0,
73 | "y": 0
74 | }, {
75 | "x": 1,
76 | "y": 1
77 | }, {
78 | "x": 2,
79 | "y": 8
80 | }, {
81 | "x": 3,
82 | "y": 27
83 | }, {
84 | "x": 4,
85 | "y": 64
86 | }, {
87 | "x": 5,
88 | "y": 125
89 | }, {
90 | "x": 6,
91 | "y": 216
92 | }, {
93 | "x": 7,
94 | "y": 343
95 | }, {
96 | "x": 8,
97 | "y": 512
98 | }, {
99 | "x": 9,
100 | "y": 729
101 | }, {
102 | "x": 10,
103 | "y": 1000
104 | }],
105 | [{
106 | "x": -10,
107 | "y": 100
108 | }, {
109 | "x": -9,
110 | "y": 81
111 | }, {
112 | "x": -8,
113 | "y": 64
114 | }, {
115 | "x": -7,
116 | "y": 49
117 | }, {
118 | "x": -6,
119 | "y": 36
120 | }, {
121 | "x": -5,
122 | "y": 25
123 | }, {
124 | "x": -4,
125 | "y": 16
126 | }, {
127 | "x": -3,
128 | "y": 9
129 | }, {
130 | "x": -2,
131 | "y": 4
132 | }, {
133 | "x": -1,
134 | "y": 1
135 | }, {
136 | "x": 0,
137 | "y": 0
138 | }, {
139 | "x": 1,
140 | "y": 1
141 | }, {
142 | "x": 2,
143 | "y": 4
144 | }, {
145 | "x": 3,
146 | "y": 9
147 | }, {
148 | "x": 4,
149 | "y": 16
150 | }, {
151 | "x": 5,
152 | "y": 25
153 | }, {
154 | "x": 6,
155 | "y": 36
156 | }, {
157 | "x": 7,
158 | "y": 49
159 | }, {
160 | "x": 8,
161 | "y": 64
162 | }, {
163 | "x": 9,
164 | "y": 81
165 | }, {
166 | "x": 10,
167 | "y": 100
168 | }]
169 | ]
170 |
171 | let options = {
172 | width: 280,
173 | height: 280,
174 | color: '#2980B9',
175 | margin: {
176 | top: 20,
177 | left: 45,
178 | bottom: 25,
179 | right: 20
180 | },
181 | animate: {
182 | type: 'delayed',
183 | duration: 200
184 | },
185 | axisX: {
186 | showAxis: true,
187 | showLines: true,
188 | showLabels: true,
189 | showTicks: true,
190 | zeroAxis: false,
191 | orient: 'bottom',
192 | label: {
193 | fontFamily: 'Arial',
194 | fontSize: 14,
195 | fontWeight: true,
196 | fill: '#34495E'
197 | }
198 | },
199 | axisY: {
200 | showAxis: true,
201 | showLines: true,
202 | showLabels: true,
203 | showTicks: true,
204 | zeroAxis: false,
205 | orient: 'left',
206 | label: {
207 | fontFamily: 'Arial',
208 | fontSize: 14,
209 | fontWeight: true,
210 | fill: '#34495E'
211 | }
212 | }
213 | }
214 |
215 | return (
216 |
217 |
218 |
219 | )
220 | }
221 | }
222 |
223 | export default SmoothLineChartBasic;
224 |
--------------------------------------------------------------------------------
/example/src/smoothline/SmoothLineChartRegions.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { SmoothLine } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class SmoothLineChartRegions extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `SmoothLine - Regions`,
38 | });
39 | render() {
40 | let data = [
41 | [{
42 | "x": -10,
43 | "y": -1000
44 | }, {
45 | "x": -9,
46 | "y": -729
47 | }, {
48 | "x": -8,
49 | "y": -512
50 | }, {
51 | "x": -7,
52 | "y": -343
53 | }, {
54 | "x": -6,
55 | "y": -216
56 | }, {
57 | "x": -5,
58 | "y": -125
59 | }, {
60 | "x": -4,
61 | "y": -64
62 | }, {
63 | "x": -3,
64 | "y": -27
65 | }, {
66 | "x": -2,
67 | "y": -8
68 | }, {
69 | "x": -1,
70 | "y": -1
71 | }, {
72 | "x": 0,
73 | "y": 0
74 | }, {
75 | "x": 1,
76 | "y": 1
77 | }, {
78 | "x": 2,
79 | "y": 8
80 | }, {
81 | "x": 3,
82 | "y": 27
83 | }, {
84 | "x": 4,
85 | "y": 64
86 | }, {
87 | "x": 5,
88 | "y": 125
89 | }, {
90 | "x": 6,
91 | "y": 216
92 | }, {
93 | "x": 7,
94 | "y": 343
95 | }, {
96 | "x": 8,
97 | "y": 512
98 | }, {
99 | "x": 9,
100 | "y": 729
101 | }, {
102 | "x": 10,
103 | "y": 1000
104 | }],
105 | [{
106 | "x": -10,
107 | "y": 100
108 | }, {
109 | "x": -9,
110 | "y": 81
111 | }, {
112 | "x": -8,
113 | "y": 64
114 | }, {
115 | "x": -7,
116 | "y": 49
117 | }, {
118 | "x": -6,
119 | "y": 36
120 | }, {
121 | "x": -5,
122 | "y": 25
123 | }, {
124 | "x": -4,
125 | "y": 16
126 | }, {
127 | "x": -3,
128 | "y": 9
129 | }, {
130 | "x": -2,
131 | "y": 4
132 | }, {
133 | "x": -1,
134 | "y": 1
135 | }, {
136 | "x": 0,
137 | "y": 0
138 | }, {
139 | "x": 1,
140 | "y": 1
141 | }, {
142 | "x": 2,
143 | "y": 4
144 | }, {
145 | "x": 3,
146 | "y": 9
147 | }, {
148 | "x": 4,
149 | "y": 16
150 | }, {
151 | "x": 5,
152 | "y": 25
153 | }, {
154 | "x": 6,
155 | "y": 36
156 | }, {
157 | "x": 7,
158 | "y": 49
159 | }, {
160 | "x": 8,
161 | "y": 64
162 | }, {
163 | "x": 9,
164 | "y": 81
165 | }, {
166 | "x": 10,
167 | "y": 100
168 | }]
169 | ]
170 |
171 | let regions = [{
172 | label: 'Level1',
173 | from: 1,
174 | to: 500,
175 | fill: '#c81212'
176 | }, {
177 | label: 'Level2',
178 | from: 500,
179 | to: 1000,
180 | fill: '#2d8023'
181 | }, {
182 | label: 'Level3',
183 | labelOffset: {
184 | left: 25,
185 | top: 50,
186 | },
187 | from: 1000,
188 | to: 1500,
189 | fill: '#6a2380'
190 | }, {
191 | label: 'Level4',
192 | from: 1500,
193 | to: 2000,
194 | fill: '#807623'
195 | }, {
196 | label: 'Level-1',
197 | from: -500,
198 | to: -1,
199 | fill: '#8fb9b3'
200 | }, {
201 | label: 'Level-2',
202 | from: -1000,
203 | to: -501,
204 | fill: '#e2d7c3'
205 | }]
206 |
207 | let regionStyling = {
208 | labelOffset: {
209 | left: 25,
210 | top: 5,
211 | },
212 | fillOpacity: 0.5
213 | }
214 |
215 | let options = {
216 | width: 280,
217 | height: 280,
218 | color: '#2980B9',
219 | margin: {
220 | top: 20,
221 | left: 45,
222 | bottom: 25,
223 | right: 20
224 | },
225 | animate: {
226 | type: 'delayed',
227 | duration: 200
228 | },
229 | axisX: {
230 | showAxis: true,
231 | showLines: true,
232 | showLabels: true,
233 | showTicks: true,
234 | zeroAxis: false,
235 | orient: 'bottom',
236 | label: {
237 | fontFamily: 'Arial',
238 | fontSize: 14,
239 | fontWeight: true,
240 | fill: '#34495E'
241 | }
242 | },
243 | axisY: {
244 | showAxis: true,
245 | showLines: true,
246 | showLabels: true,
247 | showTicks: true,
248 | zeroAxis: false,
249 | orient: 'left',
250 | label: {
251 | fontFamily: 'Arial',
252 | fontSize: 14,
253 | fontWeight: true,
254 | fill: '#34495E'
255 | }
256 | }
257 | }
258 |
259 | return (
260 |
261 |
263 |
264 | )
265 | }
266 | }
267 |
268 | export default SmoothLineChartRegions;
269 |
--------------------------------------------------------------------------------
/example/src/smoothline/SmoothLineChartRegionsExtended.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { SmoothLine } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class SmoothLineChartRegionsExtended extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `SmoothLine - Regions Extended`,
38 | });
39 | render() {
40 | let data = [
41 | [{
42 | "x": -10,
43 | "y": -1000
44 | }, {
45 | "x": -9,
46 | "y": -729
47 | }, {
48 | "x": -8,
49 | "y": -512
50 | }, {
51 | "x": -7,
52 | "y": -343
53 | }, {
54 | "x": -6,
55 | "y": -216
56 | }, {
57 | "x": -5,
58 | "y": -125
59 | }, {
60 | "x": -4,
61 | "y": -64
62 | }, {
63 | "x": -3,
64 | "y": -27
65 | }, {
66 | "x": -2,
67 | "y": -8
68 | }, {
69 | "x": -1,
70 | "y": -1
71 | }, {
72 | "x": 0,
73 | "y": 0
74 | }, {
75 | "x": 1,
76 | "y": 1
77 | }, {
78 | "x": 2,
79 | "y": 8
80 | }, {
81 | "x": 3,
82 | "y": 27
83 | }, {
84 | "x": 4,
85 | "y": 64
86 | }, {
87 | "x": 5,
88 | "y": 125
89 | }, {
90 | "x": 6,
91 | "y": 216
92 | }, {
93 | "x": 7,
94 | "y": 343
95 | }, {
96 | "x": 8,
97 | "y": 512
98 | }, {
99 | "x": 9,
100 | "y": 729
101 | }, {
102 | "x": 10,
103 | "y": 1000
104 | }],
105 | [{
106 | "x": -10,
107 | "y": 100
108 | }, {
109 | "x": -9,
110 | "y": 81
111 | }, {
112 | "x": -8,
113 | "y": 64
114 | }, {
115 | "x": -7,
116 | "y": 49
117 | }, {
118 | "x": -6,
119 | "y": 36
120 | }, {
121 | "x": -5,
122 | "y": 25
123 | }, {
124 | "x": -4,
125 | "y": 16
126 | }, {
127 | "x": -3,
128 | "y": 9
129 | }, {
130 | "x": -2,
131 | "y": 4
132 | }, {
133 | "x": -1,
134 | "y": 1
135 | }, {
136 | "x": 0,
137 | "y": 0
138 | }, {
139 | "x": 1,
140 | "y": 1
141 | }, {
142 | "x": 2,
143 | "y": 4
144 | }, {
145 | "x": 3,
146 | "y": 9
147 | }, {
148 | "x": 4,
149 | "y": 16
150 | }, {
151 | "x": 5,
152 | "y": 25
153 | }, {
154 | "x": 6,
155 | "y": 36
156 | }, {
157 | "x": 7,
158 | "y": 49
159 | }, {
160 | "x": 8,
161 | "y": 64
162 | }, {
163 | "x": 9,
164 | "y": 81
165 | }, {
166 | "x": 10,
167 | "y": 100
168 | }]
169 | ]
170 |
171 | let regions = [{
172 | label: 'Level1',
173 | from: 1,
174 | to: 500,
175 | fill: '#c81212'
176 | }, {
177 | label: 'Level2',
178 | from: 500,
179 | to: 1000,
180 | fill: '#2d8023'
181 | }, {
182 | label: 'Level3',
183 | from: 1000,
184 | to: 1500,
185 | fill: '#6a2380'
186 | }, {
187 | label: 'Level4',
188 | from: 1500,
189 | to: 2000,
190 | fill: '#807623'
191 | }, {
192 | label: 'Level-1',
193 | from: -500,
194 | to: -1,
195 | fill: '#8fb9b3'
196 | }, {
197 | label: 'Level-2',
198 | from: -1000,
199 | to: -501,
200 | fill: '#e2d7c3'
201 | }]
202 |
203 | let regionStyling = {
204 | labelOffset: {
205 | left: 25,
206 | top: 5,
207 | },
208 | fillOpacity: 0.5
209 | }
210 |
211 | let options = {
212 | width: 280,
213 | height: 280,
214 | color: '#2980B9',
215 | margin: {
216 | top: 20,
217 | left: 45,
218 | bottom: 25,
219 | right: 20
220 | },
221 | animate: {
222 | type: 'delayed',
223 | duration: 200
224 | },
225 | axisX: {
226 | showAxis: true,
227 | showLines: true,
228 | showLabels: true,
229 | showTicks: true,
230 | zeroAxis: false,
231 | orient: 'bottom',
232 | label: {
233 | fontFamily: 'Arial',
234 | fontSize: 14,
235 | fontWeight: true,
236 | fill: '#34495E'
237 | }
238 | },
239 | min: -1000,
240 | max: 2000,
241 | axisY: {
242 | showAxis: true,
243 | showLines: true,
244 | showLabels: true,
245 | showTicks: true,
246 | zeroAxis: false,
247 | orient: 'left',
248 | label: {
249 | fontFamily: 'Arial',
250 | fontSize: 14,
251 | fontWeight: true,
252 | fill: '#34495E'
253 | }
254 | }
255 | }
256 |
257 | return (
258 |
259 |
261 |
262 | )
263 | }
264 | }
265 |
266 | export default SmoothLineChartRegionsExtended;
267 |
--------------------------------------------------------------------------------
/example/src/stockline/StockLineChartDynamicTickLabels.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict';
20 |
21 | import React, { Component } from 'react';
22 | import { View, StyleSheet } from 'react-native';
23 |
24 | import { StockLine } from 'react-native-pathjs-charts';
25 | import moment from 'moment';
26 |
27 | const styles = StyleSheet.create({
28 | container: {
29 | flex: 1,
30 | justifyContent: 'center',
31 | alignItems: 'center',
32 | backgroundColor: '#f7f7f7',
33 | },
34 | });
35 |
36 | class StockLineChartDynamicTickLabels extends Component {
37 | static navigationOptions = ({ navigation }) => ({
38 | title: `StockLine - Dynamic Labels`,
39 | });
40 | render() {
41 | const data = [
42 | [{
43 | "x": 0,
44 | "y": 47782
45 | }, {
46 | "x": 1,
47 | "y": 48497
48 | }, {
49 | "x": 2,
50 | "y": 77128
51 | }, {
52 | "x": 3,
53 | "y": 73413
54 | }]
55 | ]
56 | const options = {
57 | width: 250,
58 | height: 250,
59 | color: '#2980B9',
60 | margin: {
61 | top: 10,
62 | left: 35,
63 | bottom: 30,
64 | right: 10
65 | },
66 | animate: {
67 | type: 'delayed',
68 | duration: 200
69 | },
70 | axisX: {
71 | showAxis: true,
72 | showLines: true,
73 | showLabels: true,
74 | showTicks: true,
75 | zeroAxis: false,
76 | orient: 'bottom',
77 | tickValues: [],
78 | labelFunction: ((v) => {
79 | let d = moment('2016-10-08 14:00','YYYY-MM-DD HH:mm')
80 | return d.add((v * 2),'hours').format('h:mm A')
81 | }),
82 | label: {
83 | fontFamily: 'Arial',
84 | fontSize: 8,
85 | fontWeight: true,
86 | fill: '#34495E'
87 | }
88 | },
89 | axisY: {
90 | showAxis: true,
91 | showLines: true,
92 | showLabels: true,
93 | showTicks: true,
94 | zeroAxis: false,
95 | orient: 'left',
96 | tickValues: [],
97 | label: {
98 | fontFamily: 'Arial',
99 | fontSize: 8,
100 | fontWeight: true,
101 | fill: '#34495E'
102 | }
103 | }
104 | };
105 |
106 | return (
107 |
108 |
109 |
110 | );
111 | }
112 | }
113 |
114 | export default StockLineChartDynamicTickLabels;
115 |
--------------------------------------------------------------------------------
/example/src/stockline/StockLineChartStaticTickLabels.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { StockLine } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class StockLineChartStaticTickLabels extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `StockLine - Static Labels`,
38 | });
39 | render() {
40 | let data = [
41 | [{
42 | "x": 0,
43 | "y": 47782
44 | }, {
45 | "x": 1,
46 | "y": 48497
47 | }, {
48 | "x": 2,
49 | "y": 77128
50 | }, {
51 | "x": 3,
52 | "y": 73413
53 | }, {
54 | "x": 4,
55 | "y": 58257
56 | }, {
57 | "x": 5,
58 | "y": 40579
59 | }, {
60 | "x": 6,
61 | "y": 72893
62 | }]
63 | ]
64 | let options = {
65 | width: 250,
66 | height: 250,
67 | color: '#2980B9',
68 | margin: {
69 | top: 10,
70 | left: 35,
71 | bottom: 30,
72 | right: 10
73 | },
74 | animate: {
75 | type: 'delayed',
76 | duration: 200
77 | },
78 | axisX: {
79 | showAxis: true,
80 | showLines: true,
81 | showLabels: true,
82 | showTicks: true,
83 | zeroAxis: false,
84 | orient: 'bottom',
85 | tickValues: [
86 | {value:'name1'},
87 | {value:'name2'},
88 | {value:'name3'},
89 | {value:'name4'},
90 | {value:'name5'},
91 | {value:'name6'},
92 | {value:'name7'}
93 | ],
94 | label: {
95 | fontFamily: 'Arial',
96 | fontSize: 8,
97 | fontWeight: true,
98 | fill: '#34495E'
99 | }
100 | },
101 | axisY: {
102 | showAxis: true,
103 | showLines: true,
104 | showLabels: true,
105 | showTicks: true,
106 | zeroAxis: false,
107 | orient: 'left',
108 | tickValues: [],
109 | label: {
110 | fontFamily: 'Arial',
111 | fontSize: 8,
112 | fontWeight: true,
113 | fill: '#34495E'
114 | }
115 | }
116 | }
117 |
118 | return (
119 |
120 |
121 |
122 | )
123 | }
124 | }
125 |
126 | export default StockLineChartStaticTickLabels;
127 |
--------------------------------------------------------------------------------
/example/src/tree/TreeChartBasic.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | 'use strict'
20 |
21 | import React, { Component } from 'react';
22 | import { View, Text, StyleSheet } from 'react-native';
23 |
24 | import { Tree } from 'react-native-pathjs-charts'
25 |
26 | const styles = StyleSheet.create({
27 | container: {
28 | flex: 1,
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 | backgroundColor: '#f7f7f7',
32 | },
33 | });
34 |
35 | class TreeChartBasic extends Component {
36 | static navigationOptions = ({ navigation }) => ({
37 | title: `Tree - Basic`,
38 | });
39 | render() {
40 | let data = {
41 | "name": "Root",
42 | "children": [{
43 | "name": "Santa Catarina",
44 | "children": [{
45 | "name": "Tromp"
46 | }, {
47 | "name": "Thompson"
48 | }, {
49 | "name": "Ryan"
50 | }]
51 | }, {
52 | "name": "Acre",
53 | "children": [{
54 | "name": "Dicki"
55 | }, {
56 | "name": "Armstrong"
57 | }, {
58 | "name": "Nitzsche"
59 | }]
60 | }]
61 | }
62 |
63 | let options = {
64 | margin: {
65 | top: 20,
66 | left: 50,
67 | right: 80,
68 | bottom: 20
69 | },
70 | width: 200,
71 | height: 200,
72 | fill: "#2980B9",
73 | stroke: "#3E90F0",
74 | r: 2,
75 | animate: {
76 | type: 'oneByOne',
77 | duration: 200,
78 | fillTransition: 3
79 | },
80 | label: {
81 | fontFamily: 'Arial',
82 | fontSize: 8,
83 | fontWeight: true,
84 | fill: '#34495E'
85 | }
86 | }
87 |
88 | return (
89 |
90 |
91 |
92 | )
93 | }
94 | }
95 |
96 | export default TreeChartBasic;
97 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-pathjs-charts",
3 | "version": "0.0.34",
4 | "description": "Cross platform React Native charting library based on path-js and react-native-svg",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/capitalone/react-native-pathjs-charts"
8 | },
9 | "main": "src/index.js",
10 | "scripts": {
11 | "start": "node_modules/react-native/packager/packager.sh",
12 | "lint": "eslint --ext .js,.jsx src",
13 | "test": "jest"
14 | },
15 | "keywords": [
16 | "react-native",
17 | "react-native-svg",
18 | "paths-js",
19 | "react-pathjs-chart",
20 | "ios",
21 | "android"
22 | ],
23 | "author": {
24 | "name": "Cale Hoopes",
25 | "email": "caledh@gmail.com",
26 | "url": "https://github.com/capitalone"
27 | },
28 | "license": "Apache-2.0",
29 | "maintainers": [
30 | {
31 | "name": "marzolfb",
32 | "email": "marzolfb@gmail.com"
33 | },
34 | {
35 | "name": "katscott",
36 | "email": "reineskat@gmail.com"
37 | }
38 | ],
39 | "dependencies": {
40 | "lodash": "^4.12.0",
41 | "paths-js": "^0.4.5",
42 | "react-native-svg": "~5.5.1"
43 | },
44 | "devDependencies": {
45 | "babel-jest": "*",
46 | "babel-preset-react-native": "^1.9.0",
47 | "diff": "^3.1.0",
48 | "jest": "*",
49 | "jest-react-native": "*",
50 | "react": "16.0.0",
51 | "react-dom": "16.0.0",
52 | "react-native": "0.50.3",
53 | "react-test-renderer": "16.0.0"
54 | },
55 | "jest": {
56 | "preset": "react-native",
57 | "modulePathIgnorePatterns": [
58 | "/example"
59 | ]
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/Bar.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import React,{Component} from 'react'
20 | import {Text as ReactText} from 'react-native'
21 | import Svg,{ G, Path, Text } from 'react-native-svg'
22 | import { Colors, Options, fontAdapt, cyclic, color, identity } from './util'
23 | import _ from 'lodash'
24 | import Axis from './Axis'
25 | import GridAxis from './GridAxis'
26 | const Bar = require('paths-js/bar')
27 |
28 | export default class BarChart extends Component {
29 |
30 | static defaultProps = {
31 | accessorKey:'',
32 | options: {
33 | width: 600,
34 | height: 600,
35 | margin: {top: 20, left: 20, bottom: 50, right: 20},
36 | color: '#2980B9',
37 | gutter: 20,
38 | animate: {
39 | type: 'oneByOne',
40 | duration: 200,
41 | fillTransition: 3
42 | },
43 | axisX: {
44 | showAxis: true,
45 | showLines: true,
46 | showLabels: true,
47 | showTicks: true,
48 | zeroAxis: false,
49 | orient: 'bottom',
50 | label: {
51 | fontFamily: 'Arial',
52 | fontSize: 14,
53 | bold: true,
54 | color: '#34495E',
55 | rotate: 45,
56 | }
57 | },
58 | axisY: {
59 | min: false,
60 | max: false,
61 | showAxis: true,
62 | showLines: true,
63 | showLabels: true,
64 | showTicks: true,
65 | zeroAxis: false,
66 | orient: 'left',
67 | label: {
68 | fontFamily: 'Arial',
69 | fontSize: 14,
70 | bold: true,
71 | color: '#34495E'
72 | }
73 | }
74 | }
75 | }
76 |
77 | color(i) {
78 | let color = this.props.options.color
79 | if (!_.isString(this.props.options.color)) color = color.color
80 | const pallete = this.props.pallete || Colors.mix(color || '#9ac7f7')
81 | return Colors.string(cyclic(pallete, i))
82 | }
83 |
84 | getMaxAndMin(values, scale) {
85 | const axisY = this.props.options.axisY
86 | let maxValue = axisY.max || 0
87 | let minValue = axisY.min || 0
88 |
89 | let max = _.max(values)
90 | if (max > maxValue) maxValue = max
91 | let min = _.min(values)
92 | if (min < minValue) minValue = min
93 |
94 | return {
95 | minValue: minValue,
96 | maxValue: maxValue,
97 | min: scale(minValue),
98 | max: scale(maxValue)
99 | }
100 | }
101 |
102 | render() {
103 | const noDataMsg = this.props.noDataMessage || 'No data available'
104 | if (this.props.data === undefined) return ({noDataMsg})
105 |
106 | let options = new Options(this.props)
107 | let accessor = this.props.accessor || identity(this.props.accessorKey)
108 |
109 | let chart = Bar({
110 | data: this.props.data,
111 | gutter: this.props.options.gutter || 10,
112 | width: options.chartWidth,
113 | height: options.chartHeight,
114 | accessor: accessor,
115 | min: this.props.options.axisY.min || undefined,
116 | max: this.props.options.axisY.max || undefined,
117 | })
118 |
119 | let values = chart.curves.map((curve) => accessor(curve.item))
120 | let chartArea = {x: {minValue: 0, maxValue: 200, min: 0, max: options.chartWidth},
121 | y: this.getMaxAndMin(values, chart.scale),
122 | margin:options.margin}
123 |
124 | let textStyle = fontAdapt(options.axisX.label)
125 | let labelOffset = this.props.options.axisX.label.offset || 20
126 |
127 | let lines = chart.curves.map(function (c, i) {
128 | let numDataGroups = this.props.data.length || 0
129 | let colorVariationVal = numDataGroups > 1 ? numDataGroups : 3
130 | let color = this.color(i % colorVariationVal)
131 | let stroke = Colors.darkenColor(color)
132 | return (
133 |
134 |
135 | {options.axisX.showLabels ?
136 |
141 | {c.item.name}
142 |
143 | : null}
144 |
145 | )
146 | }, this)
147 |
148 | return ()
155 | }
156 | }
157 |
--------------------------------------------------------------------------------
/src/GridAxis.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import React, { Component } from 'react'
20 | import { G, Path } from 'react-native-svg'
21 | import _ from 'lodash'
22 | import { AxisStruct } from './Axis'
23 |
24 | export default class GridAxis extends Component {
25 |
26 | render() {
27 | const { chartArea, options, scale } = this.props
28 | const horizontal = options.orient ==='top' || options.orient ==='bottom'
29 |
30 | const axis = new AxisStruct(scale,options,chartArea,horizontal).axis()
31 |
32 | if (typeof options.gridColor !== 'string') {
33 | options.gridColor = '#3E90F0'
34 | }
35 |
36 | if (typeof options.opacity !== 'number') {
37 | options.opacity = 0.5
38 | }
39 |
40 | const gridLines = options.showLines ? _.map(axis.lines, function (c, i) {
41 | return (
42 |
43 | )
44 | }) : []
45 |
46 | let offset = {
47 | x: chartArea.margin.left * -1,
48 | y: chartArea.margin.top * -1
49 | };
50 |
51 | let returnV =
52 | {gridLines}
53 | ;
54 |
55 | return returnV
56 |
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/Radar.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import React, {Component} from 'react'
20 | import {Text as ReactText} from 'react-native'
21 | import Svg,{ G, Path, Line, Text} from 'react-native-svg'
22 | import { Options, identity, styleSvg, fontAdapt } from './util'
23 | const Radar = require('paths-js/radar')
24 |
25 | function accessKeys(keys) {
26 | let a = {}
27 | for (let i in keys) {
28 | let key = keys[i]
29 | a[key] = identity(key)
30 | }
31 | return a
32 | }
33 |
34 | export default class RadarChart extends Component
35 | {
36 |
37 | static defaultProps = {
38 | options: {
39 | width: 600,
40 | height: 600,
41 | margin: {top: 20, left: 20, right: 20, bottom: 20},
42 | r: 300,
43 | max: 150,
44 | rings: 3,
45 | fill: '#2980B9',
46 | stroke: '#2980B9',
47 | animate: {
48 | type: 'oneByOne',
49 | duration: 200,
50 | fillTransition:3
51 | },
52 | label: {
53 | fontFamily: 'Arial',
54 | fontSize: 14,
55 | bold: true,
56 | color: '#34495E'
57 | }
58 | }
59 | }
60 |
61 | render() {
62 | const noDataMsg = this.props.noDataMessage || 'No data available'
63 | if (this.props.data === undefined) return ({noDataMsg})
64 |
65 | const options = new Options(this.props)
66 |
67 | const x = options.chartWidth / 2
68 | const y = options.chartHeight / 2
69 | const radius = Math.min(x, y)
70 |
71 | const center = this.props.center || [x, y]
72 |
73 | const keys = Object.keys(this.props.data[0])
74 | const keys_value = this.props.data[0];
75 | const chart = Radar({
76 | center: this.props.center || [x, y],
77 | r: this.props.options.r || radius,
78 | data: this.props.data,
79 | accessor: this.props.accessor || accessKeys(keys),
80 | max: this.props.options.max,
81 | rings: this.props.options.rings
82 | })
83 | const self = this
84 | const colors = styleSvg({}, self.props.options)
85 | const colorsFill = self.props.options.fill
86 | const curves = chart.curves.map(function (c, i) {
87 | const color = colorsFill instanceof Array ? colorsFill[i] : colorsFill;
88 | return ()
89 | })
90 |
91 | const length = chart.rings.length
92 | const rings = chart.rings.map(function (r, i) {
93 | if (i !== length - 1 ){
94 | return ()
95 | }
96 | })
97 |
98 | const textStyle = fontAdapt(options.label)
99 |
100 | const labels = chart.rings[length - 1].path.points().map(function (p, i) {
101 | function onLabelPress() {
102 | textStyle.onLabelPress(keys[i], keys_value[`${keys[i]}`]);
103 | }
104 |
105 | return (
106 |
107 |
108 | {keys[i]}
116 |
117 |
118 | )
119 | })
120 |
121 | return (
122 |
131 | );
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/src/Scatterplot.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import React, {Component} from 'react'
20 | import {Text as ReactText} from 'react-native'
21 | import Svg,{ Circle, G } from 'react-native-svg'
22 | import { Options, styleSvg } from './util'
23 | import Axis from './Axis'
24 | import GridAxis from './GridAxis'
25 | import _ from 'lodash'
26 |
27 | const Stock = require('paths-js/stock')
28 |
29 | export default class Scatterplot extends Component {
30 |
31 | static defaultProps = {
32 | xKey:'',
33 | yKey:'',
34 | options: {
35 | width: 600,
36 | height: 600,
37 | margin: {top: 40, left: 60, bottom: 30, right: 30},
38 | fill: '#2980B9',
39 | stroke: '#3E90F0',
40 | animate: {
41 | type: 'delayed',
42 | duration: 200,
43 | fillTransition:3
44 | },
45 | label: {
46 | fontFamily: 'Arial',
47 | fontSize: 14,
48 | bold: true,
49 | color: '#34495E'
50 | },
51 | axisX: {
52 | showAxis: true,
53 | showLines: true,
54 | showLabels: true,
55 | showTicks: true,
56 | zeroAxis: false,
57 | orient: 'bottom',
58 | label: {
59 | fontFamily: 'Arial',
60 | fontSize: 14,
61 | bold: true,
62 | color: '#34495E'
63 | }
64 | },
65 | axisY: {
66 | showAxis: true,
67 | showLines: true,
68 | showLabels: true,
69 | showTicks: true,
70 | zeroAxis: false,
71 | orient: 'left',
72 | label: {
73 | fontFamily: 'Arial',
74 | fontSize: 14,
75 | bold: true,
76 | color: '#34495E'
77 | }
78 | }
79 | }
80 | }
81 |
82 | getMaxAndMin(chart, key,scale) {
83 | let maxValue
84 | let minValue
85 | _.each(chart.curves, function (serie) {
86 | let values = _.map(serie.item, function (item) {
87 | return item[key]
88 | })
89 |
90 | let max = _.max(values)
91 | if (maxValue === undefined || max > maxValue) maxValue = max
92 | let min = _.min(values)
93 | if (minValue === undefined || min < minValue) minValue = min
94 | })
95 | return {
96 | minValue: minValue,
97 | maxValue: maxValue,
98 | min:scale(minValue),
99 | max:scale(maxValue)
100 | }
101 | }
102 |
103 | render() {
104 | const noDataMsg = this.props.noDataMessage || 'No data available'
105 | if (this.props.data === undefined) return ({noDataMsg})
106 |
107 | const options = new Options(this.props)
108 | const accessor = function (key) {
109 | return function (x) {
110 | return x[key]
111 | }
112 | }
113 |
114 | const chart = Stock({
115 | data: this.props.data,
116 | xaccessor: accessor(this.props.xKey),
117 | yaccessor: accessor(this.props.yKey),
118 | width: options.chartWidth,
119 | height: options.chartHeight,
120 | closed: false
121 | })
122 |
123 | const chartArea = {
124 | x:this.getMaxAndMin(chart,this.props.xKey,chart.xscale),
125 | y:this.getMaxAndMin(chart,this.props.yKey,chart.yscale),
126 | margin:options.margin
127 | }
128 |
129 | const colors = styleSvg({},options)
130 | const points = _.map(chart.curves, function (c) {
131 | return _.map(c.line.path.points(),function(p,j) {
132 | let render =
133 |
134 |
135 |
136 | return render
137 | },this)
138 | },this)
139 |
140 | return ()
149 | }
150 | }
151 |
--------------------------------------------------------------------------------
/src/SmoothLine.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import LineChart from './Line'
20 | const SmoothLine = require('paths-js/smooth-line')
21 |
22 | export default class SmoothLineChart extends LineChart {
23 | constructor(props) {
24 | super(props, SmoothLine)
25 | }
26 |
27 | static defaultProps = {
28 |
29 | options: {
30 | width: 600,
31 | height: 600,
32 | color: '#2980B9',
33 | margin: {top: 40, left: 60, bottom: 50, right: 20},
34 | animate: {
35 | type: 'delayed',
36 | duration: 200,
37 | fillTransition:3
38 | },
39 | axisX: {
40 | showAxis: true,
41 | showLines: true,
42 | showLabels: true,
43 | showTicks: true,
44 | zeroAxis: false,
45 | orient: 'bottom',
46 | label: {
47 | fontFamily: 'Arial',
48 | fontSize: 14,
49 | bold: true,
50 | color: '#34495E'
51 | }
52 | },
53 | axisY: {
54 | showAxis: true,
55 | showLines: true,
56 | showLabels: true,
57 | showTicks: true,
58 | zeroAxis: false,
59 | orient: 'left',
60 | label: {
61 | fontFamily: 'Arial',
62 | fontSize: 14,
63 | bold: true,
64 | color: '#34495E'
65 | }
66 | },
67 | cursorLine: {
68 | stroke: "white",
69 | strokeWidth: "1"
70 | },
71 | interaction: false
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/StockLine.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import LineChart from './Line.js'
20 |
21 | const StockLine = require('paths-js/stock')
22 |
23 | export default class StockLineChart extends LineChart {
24 | constructor(props) {
25 | super(props, StockLine)
26 | }
27 |
28 | static defaultProps = {
29 | options: {
30 | width: 600,
31 | height: 600,
32 | color: '#2980B9',
33 | margin: {top: 40, left: 60, bottom: 50, right: 20},
34 | animate: {
35 | type: 'delayed',
36 | duration: 200,
37 | fillTransition:3
38 | },
39 | axisX: {
40 | showAxis: true,
41 | showLines: true,
42 | showLabels: true,
43 | showTicks: true,
44 | zeroAxis: false,
45 | orient: 'bottom',
46 | label: {
47 | fontFamily: 'Arial',
48 | fontSize: 14,
49 | bold: true,
50 | color: '#34495E'
51 | }
52 | },
53 | axisY: {
54 | showAxis: true,
55 | showLines: true,
56 | showLabels: true,
57 | showTicks: true,
58 | zeroAxis: false,
59 | orient: 'left',
60 | label: {
61 | fontFamily: 'Arial',
62 | fontSize: 14,
63 | bold: true,
64 | color: '#34495E'
65 | }
66 | },
67 | cursorLine: {
68 | stroke: "white",
69 | strokeWidth: "1"
70 | },
71 | interaction: false
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/Tree.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import React, {Component} from 'react'
20 | import {Text as ReactText} from 'react-native'
21 | import Svg,{ Circle, G, Path, Text } from 'react-native-svg'
22 | import { Options, styleSvg, fontAdapt } from './util'
23 | import _ from 'lodash'
24 | const Tree = require('paths-js/tree')
25 |
26 | function children(x) {
27 | if(x.collapsed) {
28 | return []
29 | }
30 | else {
31 | return x.children || []
32 | }
33 | }
34 |
35 | export default class TreeChart extends Component {
36 |
37 | static defaultProps = {
38 | options: {
39 | margin: {top: 20, left: 50, right: 80, bottom: 20},
40 | width: 600,
41 | height: 600,
42 | fill: '#2980B9',
43 | stroke: '#3E90F0',
44 | r: 5,
45 | animate: {
46 | type: 'oneByOne',
47 | duration: 200,
48 | fillTransition: 3
49 | },
50 | label: {
51 | fontFamily: 'Arial',
52 | fontSize: 14,
53 | bold: true,
54 | fill: '#34495E'
55 | }
56 | }
57 | }
58 |
59 | render() {
60 | const noDataMsg = this.props.noDataMessage || 'No data available'
61 | if (this.props.data === undefined) return ({noDataMsg})
62 |
63 | const options = new Options(this.props)
64 | const tree = Tree({
65 | data: this.props.data,
66 | children: children,
67 | width: options.chartWidth,
68 | height: options.chartHeight
69 | })
70 | const colors = styleSvg({},options)
71 | const curves = _.map(tree.curves,function (c,i) {
72 | return
73 | })
74 |
75 | const fillOpacityStyle = 1
76 | const textStyle = fontAdapt(options.label)
77 | const r = options.r || 5
78 | const nodes = _.map(tree.nodes,function (n,index) {
79 |
80 | let text
81 |
82 | if (children(n.item).length > 0) {
83 | text = { n.item.name }
87 | } else {
88 | text = { n.item.name }
92 | }
93 |
94 | return (
95 |
96 | { text }
97 | )
98 | })
99 |
100 | return (
101 |
107 | )
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/__mocks__/react-native-svg.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import React from 'react'
19 |
20 |
21 | // const rnsvg = jest.genMockFromModule('react-native-svg');
22 | // module.exports = rnsvg;
23 |
24 | export default function(props) {
25 | return (
26 |
27 | {props.children}
28 |
29 | )
30 | }
31 |
32 | export const Rect = (props) => {
33 | return (
34 |
35 | )
36 | }
37 |
38 | export const Path = (props) => {
39 | return (
40 |
41 | {props.children}
42 |
43 | )
44 | }
45 |
46 | export const G = (props) => {
47 | return (
48 |
49 | {props.children}
50 |
51 | )
52 | }
53 |
54 | export const Svg = (props) => {
55 | return (
56 |
57 | {props.children}
58 |
59 | )
60 | }
61 |
62 | export const Text = (props) => {
63 | return (
64 |
65 | {props.children}
66 |
67 | )
68 | }
69 |
70 | export const Circle = (props) => {
71 | return (
72 |
73 | )
74 | }
75 |
--------------------------------------------------------------------------------
/src/__tests__/SmoothLine/SmoothLineBasic-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import SmoothLine from '../../SmoothLine'
21 | import renderer from 'react-test-renderer'
22 |
23 | let data = [
24 | [{
25 | "x": -10,
26 | "y": -1000
27 | }, {
28 | "x": -9,
29 | "y": -729
30 | }, {
31 | "x": -8,
32 | "y": -512
33 | }, {
34 | "x": -7,
35 | "y": -343
36 | }, {
37 | "x": -6,
38 | "y": -216
39 | }, {
40 | "x": -5,
41 | "y": -125
42 | }, {
43 | "x": -4,
44 | "y": -64
45 | }, {
46 | "x": -3,
47 | "y": -27
48 | }, {
49 | "x": -2,
50 | "y": -8
51 | }, {
52 | "x": -1,
53 | "y": -1
54 | }, {
55 | "x": 0,
56 | "y": 0
57 | }, {
58 | "x": 1,
59 | "y": 1
60 | }, {
61 | "x": 2,
62 | "y": 8
63 | }, {
64 | "x": 3,
65 | "y": 27
66 | }, {
67 | "x": 4,
68 | "y": 64
69 | }, {
70 | "x": 5,
71 | "y": 125
72 | }, {
73 | "x": 6,
74 | "y": 216
75 | }, {
76 | "x": 7,
77 | "y": 343
78 | }, {
79 | "x": 8,
80 | "y": 512
81 | }, {
82 | "x": 9,
83 | "y": 729
84 | }, {
85 | "x": 10,
86 | "y": 1000
87 | }],
88 | [{
89 | "x": -10,
90 | "y": 100
91 | }, {
92 | "x": -9,
93 | "y": 81
94 | }, {
95 | "x": -8,
96 | "y": 64
97 | }, {
98 | "x": -7,
99 | "y": 49
100 | }, {
101 | "x": -6,
102 | "y": 36
103 | }, {
104 | "x": -5,
105 | "y": 25
106 | }, {
107 | "x": -4,
108 | "y": 16
109 | }, {
110 | "x": -3,
111 | "y": 9
112 | }, {
113 | "x": -2,
114 | "y": 4
115 | }, {
116 | "x": -1,
117 | "y": 1
118 | }, {
119 | "x": 0,
120 | "y": 0
121 | }, {
122 | "x": 1,
123 | "y": 1
124 | }, {
125 | "x": 2,
126 | "y": 4
127 | }, {
128 | "x": 3,
129 | "y": 9
130 | }, {
131 | "x": 4,
132 | "y": 16
133 | }, {
134 | "x": 5,
135 | "y": 25
136 | }, {
137 | "x": 6,
138 | "y": 36
139 | }, {
140 | "x": 7,
141 | "y": 49
142 | }, {
143 | "x": 8,
144 | "y": 64
145 | }, {
146 | "x": 9,
147 | "y": 81
148 | }, {
149 | "x": 10,
150 | "y": 100
151 | }]
152 | ]
153 |
154 | let options = {
155 | width: 280,
156 | height: 280,
157 | color: '#2980B9',
158 | margin: {
159 | top: 20,
160 | left: 45,
161 | bottom: 25,
162 | right: 20
163 | },
164 | animate: {
165 | type: 'delayed',
166 | duration: 200
167 | },
168 | axisX: {
169 | showAxis: true,
170 | showLines: true,
171 | showLabels: true,
172 | showTicks: true,
173 | zeroAxis: false,
174 | orient: 'bottom',
175 | label: {
176 | fontFamily: 'Arial',
177 | fontSize: 14,
178 | fontWeight: true,
179 | fill: '#34495E'
180 | }
181 | },
182 | axisY: {
183 | showAxis: true,
184 | showLines: true,
185 | showLabels: true,
186 | showTicks: true,
187 | zeroAxis: false,
188 | orient: 'left',
189 | label: {
190 | fontFamily: 'Arial',
191 | fontSize: 14,
192 | fontWeight: true,
193 | fill: '#34495E'
194 | }
195 | }
196 | }
197 |
198 | it('renders an example chart correctly', () => {
199 | let tree = renderer.create(
200 |
201 | ).toJSON()
202 | expect(tree).toMatchSnapshot()
203 | })
204 |
--------------------------------------------------------------------------------
/src/__tests__/SmoothLine/SmoothLineRegions-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import SmoothLine from '../../SmoothLine'
21 | import renderer from 'react-test-renderer'
22 |
23 | let data = [
24 | [{
25 | "x": -10,
26 | "y": -1000
27 | }, {
28 | "x": -9,
29 | "y": -729
30 | }, {
31 | "x": -8,
32 | "y": -512
33 | }, {
34 | "x": -7,
35 | "y": -343
36 | }, {
37 | "x": -6,
38 | "y": -216
39 | }, {
40 | "x": -5,
41 | "y": -125
42 | }, {
43 | "x": -4,
44 | "y": -64
45 | }, {
46 | "x": -3,
47 | "y": -27
48 | }, {
49 | "x": -2,
50 | "y": -8
51 | }, {
52 | "x": -1,
53 | "y": -1
54 | }, {
55 | "x": 0,
56 | "y": 0
57 | }, {
58 | "x": 1,
59 | "y": 1
60 | }, {
61 | "x": 2,
62 | "y": 8
63 | }, {
64 | "x": 3,
65 | "y": 27
66 | }, {
67 | "x": 4,
68 | "y": 64
69 | }, {
70 | "x": 5,
71 | "y": 125
72 | }, {
73 | "x": 6,
74 | "y": 216
75 | }, {
76 | "x": 7,
77 | "y": 343
78 | }, {
79 | "x": 8,
80 | "y": 512
81 | }, {
82 | "x": 9,
83 | "y": 729
84 | }, {
85 | "x": 10,
86 | "y": 1000
87 | }],
88 | [{
89 | "x": -10,
90 | "y": 100
91 | }, {
92 | "x": -9,
93 | "y": 81
94 | }, {
95 | "x": -8,
96 | "y": 64
97 | }, {
98 | "x": -7,
99 | "y": 49
100 | }, {
101 | "x": -6,
102 | "y": 36
103 | }, {
104 | "x": -5,
105 | "y": 25
106 | }, {
107 | "x": -4,
108 | "y": 16
109 | }, {
110 | "x": -3,
111 | "y": 9
112 | }, {
113 | "x": -2,
114 | "y": 4
115 | }, {
116 | "x": -1,
117 | "y": 1
118 | }, {
119 | "x": 0,
120 | "y": 0
121 | }, {
122 | "x": 1,
123 | "y": 1
124 | }, {
125 | "x": 2,
126 | "y": 4
127 | }, {
128 | "x": 3,
129 | "y": 9
130 | }, {
131 | "x": 4,
132 | "y": 16
133 | }, {
134 | "x": 5,
135 | "y": 25
136 | }, {
137 | "x": 6,
138 | "y": 36
139 | }, {
140 | "x": 7,
141 | "y": 49
142 | }, {
143 | "x": 8,
144 | "y": 64
145 | }, {
146 | "x": 9,
147 | "y": 81
148 | }, {
149 | "x": 10,
150 | "y": 100
151 | }]
152 | ]
153 |
154 | let regions = [{
155 | label: 'Level1',
156 | from: 1,
157 | to: 500,
158 | fill: '#c81212'
159 | }, {
160 | label: 'Level2',
161 | from: 500,
162 | to: 1000,
163 | fill: '#2d8023'
164 | }, {
165 | label: 'Level3',
166 | labelOffset: {
167 | left: 25,
168 | top: 50,
169 | },
170 | from: 1000,
171 | to: 1500,
172 | fill: '#6a2380'
173 | }, {
174 | label: 'Level4',
175 | from: 1500,
176 | to: 2000,
177 | fill: '#807623'
178 | }, {
179 | label: 'Level-1',
180 | from: -500,
181 | to: -1,
182 | fill: '#8fb9b3'
183 | }, {
184 | label: 'Level-2',
185 | from: -1000,
186 | to: -501,
187 | fill: '#e2d7c3'
188 | }]
189 |
190 | let regionStyling = {
191 | labelOffset: {
192 | left: 25,
193 | top: 5,
194 | },
195 | fillOpacity: 0.5
196 | }
197 |
198 | let options = {
199 | width: 280,
200 | height: 280,
201 | color: '#2980B9',
202 | margin: {
203 | top: 20,
204 | left: 45,
205 | bottom: 25,
206 | right: 20
207 | },
208 | animate: {
209 | type: 'delayed',
210 | duration: 200
211 | },
212 | axisX: {
213 | showAxis: true,
214 | showLines: true,
215 | showLabels: true,
216 | showTicks: true,
217 | zeroAxis: false,
218 | orient: 'bottom',
219 | label: {
220 | fontFamily: 'Arial',
221 | fontSize: 14,
222 | fontWeight: true,
223 | fill: '#34495E'
224 | }
225 | },
226 | axisY: {
227 | showAxis: true,
228 | showLines: true,
229 | showLabels: true,
230 | showTicks: true,
231 | zeroAxis: false,
232 | orient: 'left',
233 | label: {
234 | fontFamily: 'Arial',
235 | fontSize: 14,
236 | fontWeight: true,
237 | fill: '#34495E'
238 | }
239 | }
240 | }
241 |
242 | it('renders an example chart correctly', () => {
243 | let tree = renderer.create(
244 |
245 | ).toJSON()
246 | expect(tree).toMatchSnapshot()
247 | })
248 |
--------------------------------------------------------------------------------
/src/__tests__/SmoothLine/SmoothLineRegionsExtended-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import SmoothLine from '../../SmoothLine'
21 | import renderer from 'react-test-renderer'
22 |
23 | let data = [
24 | [{
25 | "x": -10,
26 | "y": -1000
27 | }, {
28 | "x": -9,
29 | "y": -729
30 | }, {
31 | "x": -8,
32 | "y": -512
33 | }, {
34 | "x": -7,
35 | "y": -343
36 | }, {
37 | "x": -6,
38 | "y": -216
39 | }, {
40 | "x": -5,
41 | "y": -125
42 | }, {
43 | "x": -4,
44 | "y": -64
45 | }, {
46 | "x": -3,
47 | "y": -27
48 | }, {
49 | "x": -2,
50 | "y": -8
51 | }, {
52 | "x": -1,
53 | "y": -1
54 | }, {
55 | "x": 0,
56 | "y": 0
57 | }, {
58 | "x": 1,
59 | "y": 1
60 | }, {
61 | "x": 2,
62 | "y": 8
63 | }, {
64 | "x": 3,
65 | "y": 27
66 | }, {
67 | "x": 4,
68 | "y": 64
69 | }, {
70 | "x": 5,
71 | "y": 125
72 | }, {
73 | "x": 6,
74 | "y": 216
75 | }, {
76 | "x": 7,
77 | "y": 343
78 | }, {
79 | "x": 8,
80 | "y": 512
81 | }, {
82 | "x": 9,
83 | "y": 729
84 | }, {
85 | "x": 10,
86 | "y": 1000
87 | }],
88 | [{
89 | "x": -10,
90 | "y": 100
91 | }, {
92 | "x": -9,
93 | "y": 81
94 | }, {
95 | "x": -8,
96 | "y": 64
97 | }, {
98 | "x": -7,
99 | "y": 49
100 | }, {
101 | "x": -6,
102 | "y": 36
103 | }, {
104 | "x": -5,
105 | "y": 25
106 | }, {
107 | "x": -4,
108 | "y": 16
109 | }, {
110 | "x": -3,
111 | "y": 9
112 | }, {
113 | "x": -2,
114 | "y": 4
115 | }, {
116 | "x": -1,
117 | "y": 1
118 | }, {
119 | "x": 0,
120 | "y": 0
121 | }, {
122 | "x": 1,
123 | "y": 1
124 | }, {
125 | "x": 2,
126 | "y": 4
127 | }, {
128 | "x": 3,
129 | "y": 9
130 | }, {
131 | "x": 4,
132 | "y": 16
133 | }, {
134 | "x": 5,
135 | "y": 25
136 | }, {
137 | "x": 6,
138 | "y": 36
139 | }, {
140 | "x": 7,
141 | "y": 49
142 | }, {
143 | "x": 8,
144 | "y": 64
145 | }, {
146 | "x": 9,
147 | "y": 81
148 | }, {
149 | "x": 10,
150 | "y": 100
151 | }]
152 | ]
153 |
154 | let regions = [{
155 | label: 'Level1',
156 | from: 1,
157 | to: 500,
158 | fill: '#c81212'
159 | }, {
160 | label: 'Level2',
161 | from: 500,
162 | to: 1000,
163 | fill: '#2d8023'
164 | }, {
165 | label: 'Level3',
166 | from: 1000,
167 | to: 1500,
168 | fill: '#6a2380'
169 | }, {
170 | label: 'Level4',
171 | from: 1500,
172 | to: 2000,
173 | fill: '#807623'
174 | }, {
175 | label: 'Level-1',
176 | from: -500,
177 | to: -1,
178 | fill: '#8fb9b3'
179 | }, {
180 | label: 'Level-2',
181 | from: -1000,
182 | to: -501,
183 | fill: '#e2d7c3'
184 | }]
185 |
186 | let regionStyling = {
187 | labelOffset: {
188 | left: 25,
189 | top: 5,
190 | },
191 | fillOpacity: 0.5
192 | }
193 |
194 | let options = {
195 | width: 280,
196 | height: 280,
197 | color: '#2980B9',
198 | margin: {
199 | top: 20,
200 | left: 45,
201 | bottom: 25,
202 | right: 20
203 | },
204 | animate: {
205 | type: 'delayed',
206 | duration: 200
207 | },
208 | axisX: {
209 | showAxis: true,
210 | showLines: true,
211 | showLabels: true,
212 | showTicks: true,
213 | zeroAxis: false,
214 | orient: 'bottom',
215 | label: {
216 | fontFamily: 'Arial',
217 | fontSize: 14,
218 | fontWeight: true,
219 | fill: '#34495E'
220 | }
221 | },
222 | min: -1000,
223 | max: 2000,
224 | axisY: {
225 | showAxis: true,
226 | showLines: true,
227 | showLabels: true,
228 | showTicks: true,
229 | zeroAxis: false,
230 | orient: 'left',
231 | label: {
232 | fontFamily: 'Arial',
233 | fontSize: 14,
234 | fontWeight: true,
235 | fill: '#34495E'
236 | }
237 | }
238 | }
239 |
240 | it('renders an example chart correctly', () => {
241 | let tree = renderer.create(
242 |
243 | ).toJSON()
244 | expect(tree).toMatchSnapshot()
245 | })
246 |
--------------------------------------------------------------------------------
/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders an example chart correctly 1`] = `
4 |
8 |
13 |
18 |
23 |
28 |
35 |
42 |
51 |
60 |
63 |
68 |
76 |
77 |
78 |
81 |
86 |
94 |
95 |
96 |
97 |
98 |
99 | `;
100 |
--------------------------------------------------------------------------------
/src/__tests__/pie/PieBasic-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import Pie from '../../Pie'
21 | import renderer from 'react-test-renderer'
22 | import { diffJson } from 'diff'
23 |
24 | let data = [{
25 | "name": "Washington",
26 | "population": 7694980
27 | }, {
28 | "name": "Oregon",
29 | "population": 2584160
30 | }, {
31 | "name": "Minnesota",
32 | "population": 6590667,
33 | "color": {'r':223,'g':154,'b':20}
34 | }, {
35 | "name": "Alaska",
36 | "population": 7284698
37 | }]
38 |
39 | let options = {
40 | margin: {
41 | top: 20,
42 | left: 20,
43 | right: 20,
44 | bottom: 20
45 | },
46 | width: 350,
47 | height: 350,
48 | color: '#2980B9',
49 | r: 50,
50 | R: 150,
51 | legendPosition: 'topLeft',
52 | animate: {
53 | type: 'oneByOne',
54 | duration: 200,
55 | fillTransition: 3
56 | },
57 | label: {
58 | fontFamily: 'Arial',
59 | fontSize: 8,
60 | fontWeight: true,
61 | color: '#ECF0F1'
62 | }
63 | }
64 |
65 | it('renders using options property correctly', () => {
66 | let tree = renderer.create(
67 |
69 | ).toJSON()
70 | expect(tree).toMatchSnapshot()
71 | })
72 |
73 | it('renders using flattened properties correctly', () => {
74 | let tree = renderer.create(
75 |
78 | ).toJSON()
79 | expect(tree).toMatchSnapshot()
80 | })
81 |
82 | it('contains expected diff between flattened vs non-flattened option usage', () => {
83 | let treeUsingOptionsProp = renderer.create(
84 |
86 | ).toJSON()
87 |
88 | let treeUsingFlattenedProps = renderer.create(
89 |
92 | ).toJSON()
93 |
94 | let jsonDiff = diffJson(treeUsingOptionsProp, treeUsingFlattenedProps)
95 |
96 | const expectedRemoveCount = 4
97 | const expectedAddCount = 4
98 | var actualRemoveCount = 0
99 | var actualAddCount = 0
100 |
101 | jsonDiff.forEach((part) => {
102 | if (part.removed && part.value.trim()
103 | === '"d": "M NaN NaN A 150 150 0 0 1 NaN NaN L NaN NaN A 50 50 0 0 0 NaN NaN Z ",') {
104 | actualRemoveCount++
105 | }
106 | if (part.added && part.value.trim()
107 | === '"d": "M NaN NaN A 150 150 0 0 1 NaN NaN L NaN NaN A 10 10 0 0 0 NaN NaN Z ",') {
108 | actualAddCount++
109 | }
110 | })
111 | expect(actualRemoveCount).toBe(expectedRemoveCount)
112 | expect(actualAddCount).toBe(expectedAddCount)
113 |
114 | })
115 |
116 | it('renders with 1 data item correctly', () => {
117 | let data = [{"name": "Washington", "population": 7694980}]
118 | let tree = renderer.create(
119 |
121 | ).toJSON()
122 | expect(tree).toMatchSnapshot()
123 | })
124 |
--------------------------------------------------------------------------------
/src/__tests__/scatterplot/ScatterplotBasic-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import Axis from '../../Axis'
21 | import Scatterplot from '../../Scatterplot'
22 | import renderer from 'react-test-renderer'
23 |
24 | let data = [
25 | [{
26 | "title": "Amapá",
27 | "rating": 4.47,
28 | "episode": 0
29 | }, {
30 | "title": "Santa Catarina",
31 | "rating": 3.3,
32 | "episode": 1
33 | }, {
34 | "title": "Minas Gerais",
35 | "rating": 6.46,
36 | "episode": 2
37 | }, {
38 | "title": "Amazonas",
39 | "rating": 3.87,
40 | "episode": 3
41 | }, {
42 | "title": "Mato Grosso do Sul",
43 | "rating": 2.8,
44 | "episode": 4
45 | }, {
46 | "title": "Mato Grosso do Sul",
47 | "rating": 2.05,
48 | "episode": 5
49 | }, {
50 | "title": "Tocantins",
51 | "rating": 7.28,
52 | "episode": 6
53 | }, {
54 | "title": "Roraima",
55 | "rating": 5.23,
56 | "episode": 7
57 | }, {
58 | "title": "Roraima",
59 | "rating": 7.76,
60 | "episode": 8
61 | }, {
62 | "title": "Amazonas",
63 | "rating": 2.26,
64 | "episode": 9
65 | }, {
66 | "title": "Mato Grosso do Sul",
67 | "rating": 2.46,
68 | "episode": 10
69 | }, {
70 | "title": "Santa Catarina",
71 | "rating": 7.59,
72 | "episode": 11
73 | }, {
74 | "title": "Acre",
75 | "rating": 3.74,
76 | "episode": 12
77 | }, {
78 | "title": "Amapá",
79 | "rating": 5.03,
80 | "episode": 13
81 | }, {
82 | "title": "Paraíba",
83 | "rating": 4.16,
84 | "episode": 14
85 | }, {
86 | "title": "Mato Grosso",
87 | "rating": 0.81,
88 | "episode": 15
89 | }, {
90 | "title": "Rio de Janeiro",
91 | "rating": 3.01,
92 | "episode": 16
93 | }, {
94 | "title": "Rio de Janeiro",
95 | "rating": 0,
96 | "episode": 17
97 | }, {
98 | "title": "Distrito Federal",
99 | "rating": 5.46,
100 | "episode": 18
101 | }, {
102 | "title": "São Paulo",
103 | "rating": 9.71,
104 | "episode": 19
105 | }, {
106 | "title": "Mato Grosso",
107 | "rating": 7.9,
108 | "episode": 20
109 | }, {
110 | "title": "Tocantins",
111 | "rating": 4.2,
112 | "episode": 21
113 | }, {
114 | "title": "Amapá",
115 | "rating": 6,
116 | "episode": 22
117 | }, {
118 | "title": "Paraná",
119 | "rating": 7.99,
120 | "episode": 23
121 | }, {
122 | "title": "Mato Grosso do Sul",
123 | "rating": 1.07,
124 | "episode": 24
125 | }, {
126 | "title": "Tocantins",
127 | "rating": 1.42,
128 | "episode": 25
129 | }, {
130 | "title": "Paraná",
131 | "rating": 5.94,
132 | "episode": 26
133 | }, {
134 | "title": "Maranhão",
135 | "rating": 3.17,
136 | "episode": 27
137 | }, {
138 | "title": "Maranhão",
139 | "rating": 1.58,
140 | "episode": 28
141 | }, {
142 | "title": "Rondônia",
143 | "rating": 6.12,
144 | "episode": 29
145 | }, {
146 | "title": "Roraima",
147 | "rating": 7.28,
148 | "episode": 30
149 | }, {
150 | "title": "Mato Grosso",
151 | "rating": 4.74,
152 | "episode": 31
153 | }, {
154 | "title": "Roraima",
155 | "rating": 1.47,
156 | "episode": 32
157 | }, {
158 | "title": "Alagoas",
159 | "rating": 9,
160 | "episode": 33
161 | }, {
162 | "title": "Amazonas",
163 | "rating": 0.43,
164 | "episode": 34
165 | }, {
166 | "title": "Mato Grosso do Sul",
167 | "rating": 8.61,
168 | "episode": 35
169 | }, {
170 | "title": "Tocantins",
171 | "rating": 0.6,
172 | "episode": 36
173 | }, {
174 | "title": "Maranhão",
175 | "rating": 9.62,
176 | "episode": 37
177 | }, {
178 | "title": "Rio de Janeiro",
179 | "rating": 4.79,
180 | "episode": 38
181 | }, {
182 | "title": "Santa Catarina",
183 | "rating": 7.71,
184 | "episode": 39
185 | }, {
186 | "title": "Piauí",
187 | "rating": 3.83,
188 | "episode": 40
189 | }, {
190 | "title": "Pernambuco",
191 | "rating": 8.19,
192 | "episode": 41
193 | }, {
194 | "title": "Bahia",
195 | "rating": 6.98,
196 | "episode": 42
197 | }, {
198 | "title": "Minas Gerais",
199 | "rating": 4.52,
200 | "episode": 43
201 | }]
202 | ]
203 |
204 | let options = {
205 | width: 290,
206 | height: 290,
207 | r: 2,
208 | margin: {
209 | top: 20,
210 | left: 40,
211 | bottom: 30,
212 | right: 30
213 | },
214 | fill: "#2980B9",
215 | stroke: "#3E90F0",
216 | animate: {
217 | type: 'delayed',
218 | duration: 200
219 | },
220 | label: {
221 | fontFamily: 'Arial',
222 | fontSize: 8,
223 | fontWeight: true,
224 | fill: '#34495E'
225 | },
226 | axisX: {
227 | showAxis: true,
228 | showLines: true,
229 | showLabels: true,
230 | showTicks: true,
231 | zeroAxis: false,
232 | orient: 'bottom',
233 | label: {
234 | fontFamily: 'Arial',
235 | fontSize: 8,
236 | fontWeight: true,
237 | fill: '#34495E'
238 | }
239 | },
240 | axisY: {
241 | showAxis: true,
242 | showLines: true,
243 | showLabels: true,
244 | showTicks: true,
245 | zeroAxis: false,
246 | orient: 'left',
247 | label: {
248 | fontFamily: 'Arial',
249 | fontSize: 8,
250 | fontWeight: true,
251 | fill: '#34495E'
252 | }
253 | }
254 | }
255 |
256 | it('renders an example chart correctly', () => {
257 | let tree = renderer.create(
258 |
260 | ).toJSON()
261 | expect(tree).toMatchSnapshot()
262 | })
263 |
--------------------------------------------------------------------------------
/src/__tests__/stockline/StockLineBasic-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import StockLine from '../../StockLine'
21 | import renderer from 'react-test-renderer'
22 |
23 | let data = [
24 | [{
25 | "x": 0,
26 | "y": 47782
27 | }, {
28 | "x": 1,
29 | "y": 48497
30 | }, {
31 | "x": 2,
32 | "y": 77128
33 | }, {
34 | "x": 3,
35 | "y": 73413
36 | }, {
37 | "x": 4,
38 | "y": 58257
39 | }, {
40 | "x": 5,
41 | "y": 40579
42 | }, {
43 | "x": 6,
44 | "y": 72893
45 | }, {
46 | "x": 7,
47 | "y": 60663
48 | }, {
49 | "x": 8,
50 | "y": 15715
51 | }, {
52 | "x": 9,
53 | "y": 40305
54 | }, {
55 | "x": 10,
56 | "y": 68592
57 | }, {
58 | "x": 11,
59 | "y": 95664
60 | }, {
61 | "x": 12,
62 | "y": 17908
63 | }, {
64 | "x": 13,
65 | "y": 22838
66 | }, {
67 | "x": 14,
68 | "y": 32153
69 | }, {
70 | "x": 15,
71 | "y": 56594
72 | }, {
73 | "x": 16,
74 | "y": 76348
75 | }, {
76 | "x": 17,
77 | "y": 46222
78 | }, {
79 | "x": 18,
80 | "y": 59304
81 | }],
82 | [{
83 | "x": 0,
84 | "y": 132189
85 | }, {
86 | "x": 1,
87 | "y": 61705
88 | }, {
89 | "x": 2,
90 | "y": 154976
91 | }, {
92 | "x": 3,
93 | "y": 81304
94 | }, {
95 | "x": 4,
96 | "y": 172572
97 | }, {
98 | "x": 5,
99 | "y": 140656
100 | }, {
101 | "x": 6,
102 | "y": 148606
103 | }, {
104 | "x": 7,
105 | "y": 53010
106 | }, {
107 | "x": 8,
108 | "y": 110783
109 | }, {
110 | "x": 9,
111 | "y": 196446
112 | }, {
113 | "x": 10,
114 | "y": 117057
115 | }, {
116 | "x": 11,
117 | "y": 186765
118 | }, {
119 | "x": 12,
120 | "y": 174908
121 | }, {
122 | "x": 13,
123 | "y": 75247
124 | }, {
125 | "x": 14,
126 | "y": 192894
127 | }, {
128 | "x": 15,
129 | "y": 150356
130 | }, {
131 | "x": 16,
132 | "y": 180360
133 | }, {
134 | "x": 17,
135 | "y": 175697
136 | }, {
137 | "x": 18,
138 | "y": 114967
139 | }],
140 | [{
141 | "x": 0,
142 | "y": 125797
143 | }, {
144 | "x": 1,
145 | "y": 256656
146 | }, {
147 | "x": 2,
148 | "y": 222260
149 | }, {
150 | "x": 3,
151 | "y": 265642
152 | }, {
153 | "x": 4,
154 | "y": 263902
155 | }, {
156 | "x": 5,
157 | "y": 113453
158 | }, {
159 | "x": 6,
160 | "y": 289461
161 | }, {
162 | "x": 7,
163 | "y": 293850
164 | }, {
165 | "x": 8,
166 | "y": 206079
167 | }, {
168 | "x": 9,
169 | "y": 240859
170 | }, {
171 | "x": 10,
172 | "y": 152776
173 | }, {
174 | "x": 11,
175 | "y": 297282
176 | }, {
177 | "x": 12,
178 | "y": 175177
179 | }, {
180 | "x": 13,
181 | "y": 169233
182 | }, {
183 | "x": 14,
184 | "y": 237827
185 | }, {
186 | "x": 15,
187 | "y": 242429
188 | }, {
189 | "x": 16,
190 | "y": 218230
191 | }, {
192 | "x": 17,
193 | "y": 161511
194 | }, {
195 | "x": 18,
196 | "y": 153227
197 | }]
198 | ]
199 | let options = {
200 | width: 250,
201 | height: 250,
202 | color: '#2980B9',
203 | margin: {
204 | top: 10,
205 | left: 35,
206 | bottom: 30,
207 | right: 10
208 | },
209 | animate: {
210 | type: 'delayed',
211 | duration: 200
212 | },
213 | axisX: {
214 | showAxis: true,
215 | showLines: true,
216 | showLabels: true,
217 | showTicks: true,
218 | zeroAxis: false,
219 | orient: 'bottom',
220 | tickValues: [],
221 | label: {
222 | fontFamily: 'Arial',
223 | fontSize: 8,
224 | fontWeight: true,
225 | fill: '#34495E'
226 | }
227 | },
228 | axisY: {
229 | showAxis: true,
230 | showLines: true,
231 | showLabels: true,
232 | showTicks: true,
233 | zeroAxis: false,
234 | orient: 'left',
235 | tickValues: [],
236 | label: {
237 | fontFamily: 'Arial',
238 | fontSize: 8,
239 | fontWeight: true,
240 | fill: '#34495E'
241 | }
242 | }
243 | }
244 |
245 | it('renders an example chart correctly', () => {
246 | let tree = renderer.create(
247 |
249 | ).toJSON()
250 | expect(tree).toMatchSnapshot()
251 | })
252 |
--------------------------------------------------------------------------------
/src/__tests__/stockline/StockLineDynamicTickLabels-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import StockLine from '../../StockLine'
21 | import renderer from 'react-test-renderer'
22 |
23 | let data = [
24 | [{
25 | "x": 0,
26 | "y": 47782
27 | }, {
28 | "x": 1,
29 | "y": 48497
30 | }, {
31 | "x": 2,
32 | "y": 77128
33 | }, {
34 | "x": 3,
35 | "y": 73413
36 | }]
37 | ]
38 | let options = {
39 | width: 250,
40 | height: 250,
41 | color: '#2980B9',
42 | margin: {
43 | top: 10,
44 | left: 35,
45 | bottom: 30,
46 | right: 10
47 | },
48 | animate: {
49 | type: 'delayed',
50 | duration: 200
51 | },
52 | axisX: {
53 | showAxis: true,
54 | showLines: true,
55 | showLabels: true,
56 | showTicks: true,
57 | zeroAxis: false,
58 | orient: 'bottom',
59 | tickValues: [],
60 | labelFunction: ((v) => {
61 | let d = moment('2016-10-08 14:00','YYYY-MM-DD HH:mm')
62 | return d.add((v * 2),'hours').format('MM/DD/YY[\n]h:mm A')
63 | }),
64 | label: {
65 | fontFamily: 'Arial',
66 | fontSize: 8,
67 | fontWeight: true,
68 | fill: '#34495E'
69 | }
70 | },
71 | axisY: {
72 | showAxis: true,
73 | showLines: true,
74 | showLabels: true,
75 | showTicks: true,
76 | zeroAxis: false,
77 | orient: 'left',
78 | tickValues: [],
79 | label: {
80 | fontFamily: 'Arial',
81 | fontSize: 8,
82 | fontWeight: true,
83 | fill: '#34495E'
84 | }
85 | }
86 | }
87 |
88 | it('renders an example chart correctly', () => {
89 | let tree = renderer.create(
90 |
92 | ).toJSON()
93 | expect(tree).toMatchSnapshot()
94 | })
95 |
--------------------------------------------------------------------------------
/src/__tests__/stockline/StockLineStaticTickLabels-test.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 | import 'react-native'
19 | import React from 'react'
20 | import StockLine from '../../StockLine'
21 | import renderer from 'react-test-renderer'
22 |
23 | let data = [
24 | [{
25 | "x": 0,
26 | "y": 47782
27 | }, {
28 | "x": 1,
29 | "y": 48497
30 | }, {
31 | "x": 2,
32 | "y": 77128
33 | }, {
34 | "x": 3,
35 | "y": 73413
36 | }, {
37 | "x": 4,
38 | "y": 58257
39 | }, {
40 | "x": 5,
41 | "y": 40579
42 | }, {
43 | "x": 6,
44 | "y": 72893
45 | }]
46 | ]
47 | let options = {
48 | width: 250,
49 | height: 250,
50 | color: '#2980B9',
51 | margin: {
52 | top: 10,
53 | left: 35,
54 | bottom: 30,
55 | right: 10
56 | },
57 | animate: {
58 | type: 'delayed',
59 | duration: 200
60 | },
61 | axisX: {
62 | showAxis: true,
63 | showLines: true,
64 | showLabels: true,
65 | showTicks: true,
66 | zeroAxis: false,
67 | orient: 'bottom',
68 | tickValues: [
69 | {value:'name1'},
70 | {value:'name2'},
71 | {value:'name3'},
72 | {value:'name4'},
73 | {value:'name5'},
74 | {value:'name6'},
75 | {value:'name7'}
76 | ],
77 | label: {
78 | fontFamily: 'Arial',
79 | fontSize: 8,
80 | fontWeight: true,
81 | fill: '#34495E'
82 | }
83 | },
84 | axisY: {
85 | showAxis: true,
86 | showLines: true,
87 | showLabels: true,
88 | showTicks: true,
89 | zeroAxis: false,
90 | orient: 'left',
91 | tickValues: [],
92 | label: {
93 | fontFamily: 'Arial',
94 | fontSize: 8,
95 | fontWeight: true,
96 | fill: '#34495E'
97 | }
98 | }
99 | }
100 |
101 | it('renders an example chart correctly', () => {
102 | let tree = renderer.create(
103 |
105 | ).toJSON()
106 | expect(tree).toMatchSnapshot()
107 | })
108 |
--------------------------------------------------------------------------------
/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders an example chart correctly 1`] = `
4 |
8 |
13 |
18 |
23 |
28 |
35 |
42 |
49 |
58 |
67 |
76 |
79 |
84 |
92 |
93 |
94 |
97 |
102 |
110 |
111 |
112 |
113 |
114 |
115 | `;
116 |
--------------------------------------------------------------------------------
/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`renders an example chart correctly 1`] = `
4 |
8 |
13 |
18 |
23 |
28 |
35 |
44 |
47 |
52 |
60 |
61 |
62 |
65 |
70 |
78 |
79 |
80 |
81 |
82 |
83 | `;
84 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import Pie from './Pie'
20 | import Tree from './Tree'
21 | import Radar from './Radar'
22 | import Bar from './Bar'
23 | import SmoothLine from './SmoothLine'
24 | import StockLine from './StockLine'
25 | import Scatterplot from './Scatterplot.js'
26 |
27 | import 'core-js/es6/symbol'
28 | import 'core-js/fn/symbol/iterator'
29 |
30 | export {
31 | Pie,
32 | Tree,
33 | Bar,
34 | SmoothLine,
35 | StockLine,
36 | Scatterplot,
37 | Radar
38 | }
39 |
--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
1 | /*
2 | Copyright 2016 Capital One Services, LLC
3 |
4 | Licensed under the Apache License, Version 2.0 (the "License");
5 | you may not use this file except in compliance with the License.
6 | You may obtain a copy of the License at
7 |
8 | http://www.apache.org/licenses/LICENSE-2.0
9 |
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and limitations under the License.
14 |
15 | SPDX-Copyright: Copyright (c) Capital One Services, LLC
16 | SPDX-License-Identifier: Apache-2.0
17 | */
18 |
19 | import _ from 'lodash'
20 |
21 | export const cyclic = (coll, i) => { return coll[i % coll.length] }
22 | export const identity = (key) => { return function (x) { return x[key] }}
23 | export const color = (key) => { return function (x) { return x[key] } }
24 |
25 | export const styleSvg = (style = {}, sourceProps) => {
26 | if (sourceProps === undefined) return style
27 |
28 | if (sourceProps.fill) {
29 | style.fill = _.isString(sourceProps.fill) ? sourceProps.fill : sourceProps.fill.color
30 | style.fillOpacity = sourceProps.fill.alpha ? sourceProps.fill.alpha/100 : 1
31 | }
32 | if (sourceProps.stroke) {
33 | style.stroke = _.isString(sourceProps.stroke) ? sourceProps.stroke : sourceProps.stroke.color
34 | style.strokeOpacity = sourceProps.stroke.alpha ? sourceProps.stroke.alpha/100 : 1
35 | }
36 | if (sourceProps.strokeWidth)
37 | style.strokeWidth = sourceProps.strokeWidth
38 | return style
39 | }
40 |
41 | export const fontAdapt = (fontProps) => {
42 |
43 | const fill = fontProps.color ? (_.isString(fontProps.color) ? fontProps.color : fontProps.color.color ) : fontProps.fill
44 |
45 | return {
46 | fontFamily: fontProps.fontFamily,
47 | fontSize: fontProps.fontSize,
48 | rotate: fontProps.rotate || 0,
49 | fontWeight: fontProps.fontWeight ? 'bold' : 'normal',
50 | fontStyle: fontProps.fontStyle ? 'italic' : 'normal' ,
51 | fill: fill,
52 | onLabelPress: fontProps.onLabelPress
53 | }
54 | }
55 |
56 | class colours {
57 | cut(x) {
58 | return Math.min(255, Math.floor(Math.abs(x)))
59 | }
60 |
61 | multiply(factor) {
62 | return function (c) {
63 | return {
64 | r: this.cut(factor * c.r),
65 | g: this.cut(factor * c.g),
66 | b: this.cut(factor * c.b)
67 | }
68 | }.bind(this)
69 | }
70 |
71 | average(c1, c2) {
72 | return {
73 | r: this.cut((c1.r + c2.r) / 2),
74 | g: this.cut((c1.g + c2.g) / 2),
75 | b: this.cut((c1.b + c2.b) / 2)
76 | }
77 | }
78 |
79 | lighten(c){return this.multiply(1.2)(c)}
80 | darken(c){return this.multiply(0.8)(c)}
81 | darkenColor(c) {return this.string(this.darken(this.hexToRgb(c)))}
82 |
83 | mix(color1) {
84 | const c1 = this.hexToRgb(color1)
85 | const c2 = this.multiply(0.5)(c1)
86 | const c3 = this.average(c1, c2)
87 | return [this.lighten(c1), c1, this.darken(c1), this.lighten(c3), c3, this.darken(c3), this.lighten(c2), c2, this.darken(c2)]
88 | }
89 |
90 | string(c) {
91 | return this.rgbToHex(Math.floor(c.r),Math.floor(c.g),Math.floor(c.b))
92 | //return "rgb(" + (Math.floor(c.r)) + "," + (Math.floor(c.g)) + "," + (Math.floor(c.b)) + ")";
93 | }
94 | hexToRgb(hex) {
95 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
96 | return result ? {
97 | r: parseInt(result[1], 16),
98 | g: parseInt(result[2], 16),
99 | b: parseInt(result[3], 16)
100 | } : null
101 | }
102 | componentToHex(c) {
103 | const hex = c.toString(16)
104 | return hex.length == 1 ? '0' + hex : hex
105 | }
106 |
107 | rgbToHex(r, g, b) {
108 | return '#' + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b)
109 | }
110 | }
111 | export const Colors = new colours()
112 |
113 | export class Options {
114 |
115 | constructor(props) {
116 | this.props = props
117 | this.options = props.options || {}
118 | this.chartWidth = props.width || this.options.width || 400
119 | this.chartHeight = props.height || this.options.height || 400
120 | this.width = this.chartWidth + (this.margin.right || 0) + (this.margin.left || 0)
121 | this.height = this.chartHeight + (this.margin.top || 0) + (this.margin.bottom || 0)
122 | this.min = props.min || this.options.min
123 | this.max = props.max || this.options.max
124 | }
125 | get legendPosition(){ return this.props.legendPosition || (this.props.options && this.props.options.legendPosition) || 'topLeft'}
126 | get axisX() {return this.props.axisX || (this.props.options && this.props.options.axisX) || {}}
127 | get axisY() {return this.props.axisY || (this.props.options && this.props.options.axisY) || {}}
128 | get margin(){return this.props.margin || (this.props.options && this.props.options.margin) || {}}
129 | get stroke(){return this.props.stroke || (this.props.options && this.props.options.stroke)}
130 | get fill(){return this.props.fill || (this.props.options && this.props.options.fill)}
131 | get r(){return this.props.r || (this.props.options && this.props.options.r)}
132 | get R(){return this.props.R || (this.props.options && this.props.options.R)}
133 | get label(){return this.props.label || (this.props.options && this.props.options.label) || {}}
134 | get animate() {return this.props.animate || (this.props.options && this.props.options.animate) || {}}
135 | }
136 |
--------------------------------------------------------------------------------