Merge branch 'ios_marker'

Example/README.md

@@ -27,3 +27,122 @@ cd ios
 pod install 
 
 react-native run-ios
+
+
+
+
+
+#A step by step tutorial to setup a new project
+
+
+
+
+	react-native init ForBeginner
+	cd ForBeginner
+	npm install --save react-native-charts-wrapper
+
+
+	# lodash and react-addons-update are used in tutorial, not required by your project.
+	npm install --save lodash
+	npm install --save react-addons-update
+
+
+	react-native link react-native-charts-wrapper
+
+	# copy example js to your project
+	cp -r  node_modules/react-native-charts-wrapper/Example/app .
+	cp node_modules/react-native-charts-wrapper/Example/index.android.js .
+	cp node_modules/react-native-charts-wrapper/Example/index.ios.js .
+
+
+
+
+update index.android.js and index.ios.js manually   
+replace    
+`AppRegistry.registerComponent('Example', () => Example);`   
+with   
+`AppRegistry.registerComponent('ForBeginner', () => Example);`
+
+
+
+
+
+## Android
+
+update android/build.gradle, add `maven { url "https://jitpack.io" }  ` in repositories
+
+
+
+
+react-native run-android
+
+
+That is all.
+
+
+## IOS
+
+
+
+
+
+
+
+create Podfile in ios with following content
+
+	use_frameworks!
+
+	target 'ForBeginner' do
+		pod 'SwiftyJSON', git: 'https://github.com/IBM-Swift/SwiftyJSON.git'
+		pod 'Charts', git: 'https://github.com/danielgindi/Charts.git'
+	end
+		
+	post_install do |installer|
+		installer.pods_project.targets.each do |target|
+		  target.build_configurations.each do |config|
+		    config.build_settings['SWIFT_VERSION'] = '3.0'
+		  end
+		end
+	end
+
+
+
+
+
+
+run `pod install`
+
+
+
+open ForBeginner.xcworkspace/
+
+
+`Add Files to ForBeginner`,  then choose directory of `node_modules/react-native-charts-wrapper/ios/ReactNativeCharts`
+
+
+choose Group ForBeginner, `new File -> Header File`, create `ForBeginner-Bridging-Header.h`
+
+
+replace content with 
+
+    #import "React/RCTBridge.h"
+    #import "React/RCTViewManager.h"
+    #import "React/RCTUIManager.h"
+    #import "React/UIView+React.h"
+    #import "React/RCTBridgeModule.h"
+    #import "React/RCTEventDispatcher.h"
+    #import "React/RCTEventEmitter.h"
+
+
+
+
+
+set `ForBeginner-Bridging-Header.h` in `Build Settings -> Swift Compiler - General -> Object-C Bridging Header`   
+
+
+set `No` in `Build Settings -> Swift Compiler - Version -> User Legacy Swift Language Version` 
+
+
+click run  or use `react-native run-ios`
+
+That is all.

Example/app/TimeSeriesLineChartScreen.js

@@ -32,12 +32,11 @@ class TimeSeriesLineChartScreen extends React.Component {
         maxSizePercent: 0.5,
         custom: {
           colors: [processColor('red'), processColor('red')],
-          // labels: ['REFER', 'USER',]
+          labels: ['REFER', 'USER',]
         }
       },
       marker: {
         enabled: true,
-        // type: 'rectangle',
         markerColor: processColor('grey'),
         textColor: processColor('white'),
         markerFontSize: 14,
@@ -74,15 +73,18 @@ class TimeSeriesLineChartScreen extends React.Component {
                 }
               }
             }, {
-              values: [{x: 5, y: 90, marker: "eat eat eat, never\n stop eat"},
+              values: [
+                {x: 1, y: 11000, marker: "a very long long long long long long long long \nmarker at top left"},
+                {x: 5, y: 90, marker: "eat eat eat, never\n stop eat"},
                 {x: 10, y: 130},
+                {x: 15, y: 11000, marker: "test top center marker"},
                 {x: 50, y: 2000, marker: "eat more"},
-                {x: 90, y: 9000, marker: "your are overweight, eat less"}],
+                {x: 90, y: 9000, marker: "your are overweight, eat less"},
+                {x: 100, y: 11000, marker: "test top right marker"}],
+
               label: 'user',
               config: {
                 lineWidth: 1,
-                drawCubic: true,
-                drawCubicIntensity: 0.4,
                 circleRadius: 5,
                 highlightEnabled: true,
                 drawHighlightIndicators: true,
@@ -151,10 +153,12 @@ class TimeSeriesLineChartScreen extends React.Component {
 
             dragDecelerationEnabled={true}
             dragDecelerationFrictionCoef={0.99}
-            yAxis={{left:{valueFormatter:"percent"}}}
+            yAxis={{left:{valueFormatter:"percent", axisMaximum:11000}}}
 
             keepPositionOnRotation={false}
 
+            xAxis={{position:'BOTTOM'}}
+
             onSelect={this.handleSelect.bind(this)}
 
           />

Example/ios/Example/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,5 +1,15 @@
 {
   "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
     {
       "idiom" : "iphone",
       "size" : "29x29",

README.md

@@ -28,6 +28,11 @@ React Native Charts Wrapper is built on MPAndroidChart(v3.0.1) & Charts(v3.0.1),
 * CandleStick
 
 ## Setup
+
+A step by step tutorial to set up a new project can be found [here](https://github.com/wuxudong/react-native-charts-wrapper/tree/master/Example)
+
+
+
 Library can be easily installed using NPM:
 
 `npm install --save react-native-charts-wrapper`

android/src/main/java/com/github/wuxudong/rncharts/markers/RNRectangleMarkerView.java

@@ -18,83 +18,103 @@
 import java.util.Map;
 
 public class RNRectangleMarkerView extends MarkerView {
-
+    
     private RelativeLayout markerContent;
     private TextView tvContent;
-
+    
     private Drawable backgroundLeft = getResources().getDrawable(R.drawable.rectangle_marker_left);
     private Drawable background = getResources().getDrawable(R.drawable.rectangle_marker);
     private Drawable backgroundRight = getResources().getDrawable(R.drawable.rectangle_marker_right);
-
+
+    private Drawable backgroundTopLeft = getResources().getDrawable(R.drawable.rectangle_marker_top_left);
+    private Drawable backgroundTop = getResources().getDrawable(R.drawable.rectangle_marker_top);
+    private Drawable backgroundTopRight = getResources().getDrawable(R.drawable.rectangle_marker_top_right);
+
+
     public RNRectangleMarkerView(Context context) {
         super(context, R.layout.rectangle_marker);
-
+        
         tvContent = (TextView) findViewById(R.id.rectangle_tvContent);
         markerContent = (RelativeLayout) findViewById(R.id.rectangle_markerContent);
     }
-
+    
     @Override
     public void refreshContent(Entry e, Highlight highlight) {
         String text = "";
-
+        
         if (e instanceof CandleEntry) {
             CandleEntry ce = (CandleEntry) e;
             text = Utils.formatNumber(ce.getClose(), 2, true);
         } else {
             text = Utils.formatNumber(e.getY(), 0, true);
         }
-
+        
         if (e.getData() instanceof Map) {
             if(((Map) e.getData()).containsKey("marker")) {
                 text = ((Map) e.getData()).get("marker").toString();
             }
         }
-
+        
         tvContent.setText(text);
-
+        
         super.refreshContent(e, highlight);
     }
-
+    
     @Override
     public MPPointF getOffset() {
         return new MPPointF( -(getWidth() / 2), -getHeight());
     }
-
+    
     @Override
     public MPPointF getOffsetForDrawingAtPoint(float posX, float posY) {
-
+        
         MPPointF offset = getOffset();
-
+        
         MPPointF offset2 = new MPPointF();
-
+        
         offset2.x = offset.x;
         offset2.y = offset.y;
-
+        
         Chart chart = getChartView();
-
+        
         float width = getWidth();
         float height = getHeight();
-
+        
         if (posX + offset2.x < 0) {
             offset2.x = 0;
-
-            markerContent.setBackground(backgroundLeft);
-
+
+            if (posY + offset2.y < 0) {
+                offset2.y = 0;
+                tvContent.setBackground(backgroundTopLeft);
+            } else {
+                tvContent.setBackground(backgroundLeft);
+            }
+
         } else if (chart != null && posX + width + offset2.x > chart.getWidth()) {
             offset2.x = - width;
-
-            markerContent.setBackground(backgroundRight);
+
+            if (posY + offset2.y < 0) {
+                offset2.y = 0;
+                tvContent.setBackground(backgroundTopRight);
+            } else {
+                tvContent.setBackground(backgroundRight);
+            }
         } else {
-            markerContent.setBackground(background);
+            if (posY + offset2.y < 0) {
+                offset2.y = 0;
+                tvContent.setBackground(backgroundTop);
+            } else {
+                tvContent.setBackground(background);
+            }
         }
-
+        
         return offset2;
     }
-
+    
     public TextView getTvContent() {
         return tvContent;
     }
-
+    
     public RelativeLayout getMarkerContent() {
         return markerContent;
     }

android/src/main/res/layout/rectangle_marker.xml

@@ -3,18 +3,14 @@
     android:id="@+id/rectangle_markerContent"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
-    android:minHeight="40dp"
-    android:background="@drawable/rectangle_marker" >
+    >
 
     <TextView
         android:id="@+id/rectangle_tvContent"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+        android:background="@drawable/rectangle_marker"
         android:layout_centerHorizontal="true"
-        android:layout_marginTop="7dp"
-	android:layout_marginBottom="7dp"
-        android:layout_marginLeft="5dp"
-        android:layout_marginRight="5dp"
         android:text=""
         android:gravity="center"
         android:textSize="12sp"