add StyledCenterText support for PieChart

wuxudong · Nov 21, 2017 · a66a669 · a66a669
1 parent 924ade0
commit a66a669
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 6 deletions.
diff --git a/Example/app/PieChartScreen.js b/Example/app/PieChartScreen.js
@@ -84,7 +84,7 @@ class PieChartScreen extends React.Component {
               rotationAngle={45}
               drawSliceText={true}
               usePercentValues={false}
-              centerText={'Pie center text!'}
+              styledCenterText={{text:'Pie center text!', color: processColor('pink'), size: 20}}
               centerTextRadiusPercent={100}
               holeRadius={40}
               holeColor={processColor('#f0f0f0')}

diff --git a/Example/ios/Example.xcodeproj/project.pbxproj b/Example/ios/Example.xcodeproj/project.pbxproj
@@ -352,7 +352,7 @@
 		424CA40F1E851A1000E2422D /* PieDataExtract.swift */ = {isa = PBXFileReference; fileEncoding = 4; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = PieDataExtract.swift; sourceTree = "<group>"; tabWidth = 4; };
 		424CA4101E851A1000E2422D /* RNPieChartManager.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RNPieChartManager.swift; sourceTree = "<group>"; };
 		424CA4111E851A1000E2422D /* RNPieChartManagerBridge.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNPieChartManagerBridge.m; sourceTree = "<group>"; };
-		424CA4121E851A1000E2422D /* RNPieChartView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RNPieChartView.swift; sourceTree = "<group>"; };
+		424CA4121E851A1000E2422D /* RNPieChartView.swift */ = {isa = PBXFileReference; fileEncoding = 4; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = RNPieChartView.swift; sourceTree = "<group>"; tabWidth = 4; };
 		424CA4141E851A1000E2422D /* RadarDataExtract.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadarDataExtract.swift; sourceTree = "<group>"; };
 		424CA4151E851A1000E2422D /* RNRadarChartManager.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RNRadarChartManager.swift; sourceTree = "<group>"; };
 		424CA4161E851A1000E2422D /* RNRadarChartManagerBridge.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNRadarChartManagerBridge.m; sourceTree = "<group>"; };

diff --git a/android/src/main/java/com/github/wuxudong/rncharts/charts/PieChartManager.java b/android/src/main/java/com/github/wuxudong/rncharts/charts/PieChartManager.java
@@ -3,6 +3,8 @@
 
 import android.view.View;
 
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.github.mikephil.charting.charts.PieChart;
@@ -11,6 +13,7 @@
 import com.github.wuxudong.rncharts.data.DataExtract;
 import com.github.wuxudong.rncharts.data.PieDataExtract;
 import com.github.wuxudong.rncharts.listener.RNOnChartValueSelectedListener;
+import com.github.wuxudong.rncharts.utils.BridgeUtils;
 
 public class PieChartManager extends ChartBaseManager<PieChart, PieEntry> {
 
@@ -46,6 +49,23 @@ public void setCenterText(PieChart chart, String text) {
         chart.setCenterText(text);
     }
 
+    @ReactProp(name = "styledCenterText")
+    public void setStyledCenterText(PieChart chart, ReadableMap propMap) {
+        if (BridgeUtils.validate(propMap, ReadableType.String, "text")) {
+            chart.setCenterText(propMap.getString("text"));
+        } else {
+            chart.setCenterText("");
+        }
+
+        if (BridgeUtils.validate(propMap, ReadableType.Number, "color")) {
+            chart.setCenterTextColor(propMap.getInt("color"));
+        }
+
+        if (BridgeUtils.validate(propMap, ReadableType.Number, "size")) {
+            chart.setCenterTextSize((float) propMap.getDouble("size"));
+        }
+    }
+
     @ReactProp(name = "centerTextRadiusPercent")
     public void setCenterTextRadiusPercent(PieChart chart, float radiusPercent) {
         chart.setCenterTextRadiusPercent(radiusPercent);

diff --git a/ios/ReactNativeCharts/pie/RNPieChartManagerBridge.m b/ios/ReactNativeCharts/pie/RNPieChartManagerBridge.m
@@ -11,6 +11,7 @@ @interface RCT_EXTERN_MODULE(RNPieChartManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(drawEntryLabels, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(usePercentValues, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(centerText, NSString)
+RCT_EXPORT_VIEW_PROPERTY(styledCenterText, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(centerTextRadiusPercent, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(holeRadius, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(holeColor, NSInteger)

diff --git a/ios/ReactNativeCharts/pie/RNPieChartView.swift b/ios/ReactNativeCharts/pie/RNPieChartView.swift
@@ -16,8 +16,7 @@ class RNPieChartView: RNChartViewBase {
     override var dataExtract: DataExtract {
         return _dataExtract
     }
-
-
+
     override init(frame: CoreGraphics.CGRect) {
 
         self._chart = PieChartView(frame: frame)
@@ -48,6 +47,45 @@ class RNPieChartView: RNChartViewBase {
         chart.centerText = text
     }
 
+    func setStyledCenterText(_ data: NSDictionary) {
+        let json = BridgeUtils.toJson(data)
+
+        var attrString: NSMutableAttributedString?
+        if json["text"].string == nil
+        {
+            attrString = nil
+        }
+        else
+        {
+            #if os(OSX)
+                let paragraphStyle = NSParagraphStyle.default().mutableCopy() as! NSMutableParagraphStyle
+            #else
+                let paragraphStyle = NSParagraphStyle.default.mutableCopy() as! NSMutableParagraphStyle
+            #endif
+            paragraphStyle.lineBreakMode = NSLineBreakMode.byTruncatingTail
+            paragraphStyle.alignment = .center
+
+
+            var color : NSUIColor?
+            if json["color"].int != nil {
+                color = RCTConvert.uiColor(json["color"].intValue)
+            } else {
+                color = UIColor.black
+            }
+
+            let fontSize = json["size"].number != nil ? CGFloat(json["size"].numberValue) : CGFloat(12)
+
+            attrString = NSMutableAttributedString(string: json["text"].stringValue)
+            attrString?.setAttributes([
+                NSForegroundColorAttributeName: color!,
+                NSFontAttributeName: NSUIFont.systemFont(ofSize: fontSize),
+                NSParagraphStyleAttributeName: paragraphStyle
+                ], range: NSMakeRange(0, attrString!.length))
+        }
+
+        chart.centerAttributedText = attrString
+
+    }
 
     func setCenterTextRadiusPercent(_ radiusPercent: NSNumber) {
         chart.centerTextRadiusPercent = CGFloat(radiusPercent) / 100.0
@@ -101,6 +139,5 @@ class RNPieChartView: RNChartViewBase {
 
         pieChartDataSet?.entryLabelColor = chart.entryLabelColor
         pieChartDataSet?.entryLabelFont = chart.entryLabelFont
-  }
-
+    }
 }
diff --git a/lib/PieChart.js b/lib/PieChart.js
@@ -16,6 +16,11 @@ const iface = {
     usePercentValues: PropTypes.bool,
 
     centerText: PropTypes.string,
+    styledCenterText: PropTypes.shape({
+      text: PropTypes.string,
+      color: PropTypes.number,
+      size: PropTypes.number
+    }),
     centerTextRadiusPercent: PropTypes.number,
     holeRadius: PropTypes.number,
     holeColor: PropTypes.number,