Add circle chart change value

kevinzhow
Commit 4bbca5a12fe4e56b3f2350929896e7ee90518b91 4bbca5a1 1 parent 918d2e99
Showing 6 changed files with 68 additions and 45 deletions
PNChart/PNCircleChart.h
PNChart/PNCircleChart.m
PNChartDemo/Base.lproj/Main.storyboard
PNChartDemo/PCChartViewController.h
PNChartDemo/PCChartViewController.m
PNChartDemo/PCChartsTableViewController.m
--- a/PNChart/PNCircleChart.h
View file @4bbca5a
+++ b/PNChart/PNCircleChart.h
View file @4bbca5a
@@ -22,6 +22,7 @@ typedef NS_ENUM (NSUInteger, PNChartFormatType) {
 - (void)strokeChart;
 - (void)growChartByAmount:(NSNumber *)growAmount;
+- (void)updateChartByCurrent:(NSNumber *)current;
 - (id)initWithFrame:(CGRect)frame
               total:(NSNumber *)total
             current:(NSNumber *)current
@@ -37,7 +38,9 @@ typedef NS_ENUM (NSUInteger, PNChartFormatType) {
 @property (nonatomic) NSTimeInterval duration;
 @property (nonatomic) PNChartFormatType chartType;
+
 @property (nonatomic) CAShapeLayer *circle;
+@property (nonatomic) CAShapeLayer *gradientMask;
 @property (nonatomic) CAShapeLayer *circleBackground;
 @end
--- a/PNChart/PNCircleChart.m
View file @4bbca5a
+++ b/PNChart/PNCircleChart.m
View file @4bbca5a
@@ -116,14 +116,14 @@
     if (_strokeColorGradientStart) {
         // Add gradient
-        CAShapeLayer *gradientMask = [CAShapeLayer layer];
+        self.gradientMask = [CAShapeLayer layer];
-        gradientMask.fillColor = [[UIColor clearColor] CGColor];
+        self.gradientMask.fillColor = [[UIColor clearColor] CGColor];
-        gradientMask.strokeColor = [[UIColor blackColor] CGColor];
+        self.gradientMask.strokeColor = [[UIColor blackColor] CGColor];
-        gradientMask.lineWidth = _circle.lineWidth;
+        self.gradientMask.lineWidth = _circle.lineWidth;
-        gradientMask.lineCap = kCALineCapRound;
+        self.gradientMask.lineCap = kCALineCapRound;
         CGRect gradientFrame = CGRectMake(0, 0, 2*self.bounds.size.width, 2*self.bounds.size.height);
-        gradientMask.frame = gradientFrame;
+        self.gradientMask.frame = gradientFrame;
-        gradientMask.path = _circle.path;
+        self.gradientMask.path = _circle.path;
         CAGradientLayer *gradientLayer = [CAGradientLayer layer];
         gradientLayer.startPoint = CGPointMake(0.5,1.0);
@@ -136,13 +136,13 @@
                             ];
         gradientLayer.colors = colors;
-        [gradientLayer setMask:gradientMask];
+        [gradientLayer setMask:self.gradientMask];
         [_circle addSublayer:gradientLayer];
-        gradientMask.strokeEnd = [_current floatValue] / [_total floatValue];
+        self.gradientMask.strokeEnd = [_current floatValue] / [_total floatValue];
-        [gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
+        [self.gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
     }
 }
@@ -153,16 +153,27 @@
     NSNumber *updatedValue = [NSNumber numberWithFloat:[_current floatValue] + [growAmount floatValue]];
     // Add animation
+    [self updateChartByCurrent:updatedValue];
+}
+
+
+-(void)updateChartByCurrent:(NSNumber *)current{
+    // Add animation
     CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
     pathAnimation.duration = self.duration;
     pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
     pathAnimation.fromValue = @([_current floatValue] / [_total floatValue]);
-    pathAnimation.toValue = @([updatedValue floatValue] / [_total floatValue]);
+    pathAnimation.toValue = @([current floatValue] / [_total floatValue]);
-    _circle.strokeEnd   = [updatedValue floatValue] / [_total floatValue];
+    _circle.strokeEnd   = [current floatValue] / [_total floatValue];
+    
+    if (_strokeColorGradientStart) {
+        self.gradientMask.strokeEnd = _circle.strokeEnd;
+        [self.gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
+    }
     [_circle addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
-    [self.countingLabel countFrom:fmin([_current floatValue], [_total floatValue]) to:fmin([_current floatValue] + [growAmount floatValue], [_total floatValue]) withDuration:self.duration];
+    [self.countingLabel countFrom:fmin([_current floatValue], [_total floatValue]) to:fmin([current floatValue], [_total floatValue]) withDuration:self.duration];
-    _current = updatedValue;
+    _current = current;
 }
 @end
--- a/PNChartDemo/Base.lproj/Main.storyboard
View file @4bbca5a
+++ b/PNChartDemo/Base.lproj/Main.storyboard
View file @4bbca5a
@@ -26,14 +26,25 @@
                                     <action selector="changeValue:" destination="Tha-Wr-sPW" eventType="touchUpInside" id="zeG-Cp-Wjs"/>
                                 </connections>
                             </button>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="FUU-vZ-jMd">
+                                <rect key="frame" x="53" y="81" width="215" height="30"/>
+                                <fontDescription key="fontDescription" name="Avenir-Medium" family="Avenir" pointSize="23"/>
+                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
                         </subviews>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                         <constraints>
+                            <constraint firstItem="FUU-vZ-jMd" firstAttribute="top" secondItem="znr-YO-4a4" secondAttribute="bottom" constant="17" id="DLv-qJ-h7R"/>
+                            <constraint firstAttribute="centerX" secondItem="FUU-vZ-jMd" secondAttribute="centerX" id="YGT-a5-Zka"/>
                             <constraint firstItem="L3F-13-Wf5" firstAttribute="top" secondItem="znr-YO-4a4" secondAttribute="bottom" constant="300" id="ewm-kv-p8k"/>
                             <constraint firstAttribute="centerX" secondItem="L3F-13-Wf5" secondAttribute="centerX" id="zXw-WV-mro"/>
                         </constraints>
                     </view>
                     <navigationItem key="navigationItem" title="PNChart" id="Ukg-Sg-E2z"/>
+                    <connections>
+                        <outlet property="titleLabel" destination="FUU-vZ-jMd" id="dA3-KC-Ht4"/>
+                    </connections>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="kDa-u3-t6i" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
--- a/PNChartDemo/PCChartViewController.h
View file @4bbca5a
+++ b/PNChartDemo/PCChartViewController.h
View file @4bbca5a
@@ -14,6 +14,8 @@
 @property (nonatomic) PNLineChart * lineChart;
 @property (nonatomic) PNBarChart * barChart;
+@property (nonatomic) PNCircleChart * circleChart;
+@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
 - (IBAction)changeValue:(id)sender;
--- a/PNChartDemo/PCChartViewController.m
View file @4bbca5a
+++ b/PNChartDemo/PCChartViewController.m
View file @4bbca5a
@@ -13,13 +13,11 @@
 -(void)viewDidLoad
 {
     [super viewDidLoad];
+    self.titleLabel.textColor = PNFreshGreen;
     if ([self.title isEqualToString:@"Line Chart"]) {
-        UILabel * lineChartLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 90, SCREEN_WIDTH, 30)];
+
-        lineChartLabel.text = @"Line Chart";
+        self.titleLabel.text = @"Line Chart";
-        lineChartLabel.textColor = PNFreshGreen;
-        lineChartLabel.font = [UIFont fontWithName:@"Avenir-Medium" size:23.0];
-        lineChartLabel.textAlignment = NSTextAlignmentCenter;
         self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
         self.lineChart.yLabelFormat = @"%1.1f";
@@ -58,16 +56,12 @@
         [self.lineChart strokeChart];
         self.lineChart.delegate = self;
-        [self.view addSubview:lineChartLabel];
+
         [self.view addSubview:self.lineChart];
     }
     else if ([self.title isEqualToString:@"Bar Chart"])
     {
-        UILabel * barChartLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 90, SCREEN_WIDTH, 30)];
+        self.titleLabel.text = @"Bar Chart";
-        barChartLabel.text = @"Bar Chart";
-        barChartLabel.textColor = PNFreshGreen;
-        barChartLabel.font = [UIFont fontWithName:@"Avenir-Medium" size:23.0];
-        barChartLabel.textAlignment = NSTextAlignmentCenter;
         self.barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
         self.barChart.backgroundColor = [UIColor clearColor];
@@ -88,9 +82,25 @@
         self.barChart.delegate = self;
-        [self.view addSubview:barChartLabel];
         [self.view addSubview:self.barChart];
     }
+    else if ([self.title isEqualToString:@"Circle Chart"])
+    {
+        self.titleLabel.text = @"Circle Chart";
+
+        
+        self.circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0)
+                                                                     total:@100
+                                                                   current:@60
+                                                                 clockwise:YES
+                                                                    shadow:YES];
+        self.circleChart.backgroundColor = [UIColor clearColor];
+        [self.circleChart setStrokeColor:PNGreen];
+        [self.circleChart setStrokeColorGradientStart:[UIColor blueColor]];
+        [self.circleChart strokeChart];
+        
+        [self.view addSubview:self.circleChart];
+    }
 }
@@ -138,6 +148,10 @@
         [self.barChart setXLabels:@[@"Jan 1",@"Jan 2",@"Jan 3",@"Jan 4",@"Jan 5",@"Jan 6",@"Jan 7"]];
         [self.barChart updateChartData:@[@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30),@(arc4random() % 30)]];
     }
+    else if ([self.title isEqualToString:@"Circle Chart"])
+    {
+        [self.circleChart updateChartByCurrent:@(arc4random() % 100)];
+    }
 }
--- a/PNChartDemo/PCChartsTableViewController.m
View file @4bbca5a
+++ b/PNChartDemo/PCChartsTableViewController.m
View file @4bbca5a
@@ -32,25 +32,7 @@
     } else if ([segue.identifier isEqualToString:@"circleChart"])
     {
         //Add circle chart
-        UILabel * circleChartLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 90, SCREEN_WIDTH, 30)];
+
-        circleChartLabel.text = @"Circle Chart";
-        circleChartLabel.textColor = PNFreshGreen;
-        circleChartLabel.font = [UIFont fontWithName:@"Avenir-Medium" size:23.0];
-        circleChartLabel.textAlignment = NSTextAlignmentCenter;
-
-        PNCircleChart * circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0)
-                                                                     total:@100
-                                                                   current:@60
-                                                                 clockwise:YES
-                                                                    shadow:YES];
-        circleChart.backgroundColor = [UIColor clearColor];
-        [circleChart setStrokeColor:PNGreen];
-        [circleChart setStrokeColorGradientStart:[UIColor blueColor]];
-        [circleChart strokeChart];
-
-        [viewController.view addSubview:circleChartLabel];
-
-        [viewController.view addSubview:circleChart];
         viewController.title = @"Circle Chart";
     } else if ([segue.identifier isEqualToString:@"pieChart"])