add grade displayed above the chart

@@ -20,4 +20,8 @@
 @property (nonatomic) CGFloat barRadius;
 @property (nonatomic) CAShapeLayer *gradientMask;
 
+@property (nonatomic) CAShapeLayer *gradeLayer;
+@property (nonatomic) CATextLayer* textLayer;
+
+
 @end

@@ -8,6 +8,7 @@
 
 #import "PNBar.h"
 #import "PNColor.h"
+#import <CoreText/CoreText.h>
 
 @implementation PNBar
 
@@ -39,11 +40,13 @@
 - (void)setGrade:(float)grade
 {
     NSLog(@"New garde %f",grade);
+    
+    CGFloat startPosY = (1 - grade) * self.frame.size.height;
 
     UIBezierPath *progressline = [UIBezierPath bezierPath];
 
     [progressline moveToPoint:CGPointMake(self.frame.size.width / 2.0, self.frame.size.height)];
-    [progressline addLineToPoint:CGPointMake(self.frame.size.width / 2.0, (1 - grade) * self.frame.size.height)];
+    [progressline addLineToPoint:CGPointMake(self.frame.size.width / 2.0, startPosY)];
 
     [progressline setLineWidth:1.0];
     [progressline setLineCapStyle:kCGLineCapSquare];
@@ -73,6 +76,12 @@
             // Add gradient
             [self.gradientMask addAnimation:pathAnimation forKey:@"animationKey"];
             self.gradientMask.path = progressline.CGPath;
+            
+            // add text
+            [self setGradeFrame:grade startPosY:startPosY];
+            CABasicAnimation* opacityAnimation = [self fadeAnimation];
+            [self.textLayer addAnimation:opacityAnimation forKey:nil];
+
         }
         
     }else{
@@ -115,6 +124,11 @@
             
             self.gradientMask.strokeEnd = 1.0;
             [self.gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
+            
+            //set grade
+            [self setGradeFrame:grade startPosY:startPosY];
+            CABasicAnimation* opacityAnimation = [self fadeAnimation];
+            [self.textLayer addAnimation:opacityAnimation forKey:nil];
         }
     }
     
@@ -153,4 +167,55 @@
 }
 
 
+// add number display on the top of bar
+-(CGPathRef)gradePath:(CGRect)rect
+{
+    return nil;
+}
+
+-(CATextLayer*)textLayer
+{
+    if (!_textLayer) {
+        _textLayer = [[CATextLayer alloc]init];
+        [_textLayer setString:@"0"];
+        [_textLayer setAlignmentMode:kCAAlignmentCenter];
+        [_textLayer setForegroundColor:[[UIColor blackColor] CGColor]];
+    }
+
+    return _textLayer;
+}
+
+-(void)setGradeFrame:(CGFloat)grade startPosY:(CGFloat)startPosY
+{
+    CGFloat textheigt = self.bounds.size.width;
+    CGFloat textWidth = self.bounds.size.width;
+    CGFloat textStartPosY;
+    
+    
+    if (startPosY < textheigt) {
+        textStartPosY = startPosY;
+    }
+    else {
+        textStartPosY = startPosY - textheigt;
+    }
+    
+    [_chartLine addSublayer:self.textLayer];
+    [self.textLayer setFontSize:textheigt/2];
+
+    [self.textLayer setString:[[NSString alloc]initWithFormat:@"%ld",(NSInteger)(grade*100)]];
+    [self.textLayer setFrame:CGRectMake(0, textStartPosY, textWidth,  textheigt)];
+    self.textLayer.contentsScale = [UIScreen mainScreen].scale;
+
+}
+
+-(CABasicAnimation*)fadeAnimation
+{
+    CABasicAnimation* fadeAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
+    fadeAnimation.fromValue = [NSNumber numberWithFloat:0.0];
+    fadeAnimation.toValue = [NSNumber numberWithFloat:1.0];
+    fadeAnimation.duration = 2.0;
+    
+    return fadeAnimation;
+}
+
 @end

@@ -11,6 +11,7 @@
 #import "PNChartLabel.h"
 #import "PNLineChartData.h"
 #import "PNLineChartDataItem.h"
+#import <CoreText/CoreText.h>
 
 @interface PNLineChart ()
 
@@ -21,6 +22,9 @@
 @property (nonatomic) NSMutableArray *pointPath;       // Array of point path, one for each line
 @property (nonatomic) NSMutableArray *endPointsOfPath;      // Array of start and end points of each line path, one for each line
 
+// display grade
+@property (nonatomic) NSMutableArray *gradeStringPaths;
+
 @end
 
 @implementation PNLineChart
@@ -312,6 +316,7 @@
 {
     _chartPath = [[NSMutableArray alloc] init];
     _pointPath = [[NSMutableArray alloc] init];
+    _gradeStringPaths = [NSMutableArray array];
 
     [self calculateChartPath:_chartPath andPointsPath:_pointPath andPathKeyPoints:_pathPoints andPathStartEndPoints:_endPointsOfPath];
     // Draw each line
@@ -350,6 +355,12 @@
         }
 
         [CATransaction commit];
+        
+        NSMutableArray* textLayerArray = [self.gradeStringPaths objectAtIndex:lineIndex];
+        for (CATextLayer* textLayer in textLayerArray) {
+            CABasicAnimation* fadeAnimation = [self fadeAnimation];
+            [textLayer addAnimation:fadeAnimation forKey:nil];
+        }
 
         UIGraphicsEndImageContext();
     }
@@ -374,6 +385,10 @@
         [chartPath insertObject:progressline atIndex:lineIndex];
         [pointsPath insertObject:pointPath atIndex:lineIndex];
         
+        
+        NSMutableArray* gradePathArray = [NSMutableArray array];
+        [self.gradeStringPaths addObject:gradePathArray];
+        
         if (!_showLabel) {
             _chartCavanHeight = self.frame.size.height - 2 * _yLabelHeight;
             _chartCavanWidth = self.frame.size.width;
@@ -411,6 +426,11 @@
                 [pointPath moveToPoint:CGPointMake(circleCenter.x + (inflexionWidth / 2), circleCenter.y)];
                 [pointPath addArcWithCenter:circleCenter radius:inflexionWidth / 2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
                 
+                //jet text display text
+                CATextLayer* textLayer = [self createTextLayer];
+                [self setGradeFrame:textLayer grade:yValue pointCenter:circleCenter width:inflexionWidth];
+                [gradePathArray addObject:textLayer];
+                
                 if ( i != 0 ) {
                     
                     // calculate the point for line
@@ -442,6 +462,11 @@
                 [pointPath addLineToPoint:CGPointMake(squareCenter.x - (inflexionWidth / 2), squareCenter.y + (inflexionWidth / 2))];
                 [pointPath closePath];
                 
+                // text display text
+                CATextLayer* textLayer = [self createTextLayer];
+                [self setGradeFrame:textLayer grade:yValue pointCenter:squareCenter width:inflexionWidth];
+                [gradePathArray addObject:textLayer];
+                
                 if ( i != 0 ) {
                     
                     // calculate the point for line
@@ -475,6 +500,11 @@
                 [pointPath addLineToPoint:endPoint];
                 [pointPath closePath];
                 
+                // text display text
+                CATextLayer* textLayer = [self createTextLayer];
+                [self setGradeFrame:textLayer grade:yValue pointCenter:middlePoint width:inflexionWidth];
+                [gradePathArray addObject:textLayer];
+                
                 if ( i != 0 ) {
                     // calculate the point for triangle
                     float distance = sqrt(pow(x - last_x, 2) + pow(y - last_y, 2) ) * 1.4 ;
@@ -963,4 +993,48 @@
     return squareImageView;
 }
 
+#pragma mark setter and getter
+
+-(CATextLayer*)createTextLayer
+{
+    CATextLayer * textLayer = [[CATextLayer alloc]init];
+    [textLayer setString:@"0"];
+    [textLayer setAlignmentMode:kCAAlignmentCenter];
+    [textLayer setForegroundColor:[[UIColor blackColor] CGColor]];
+    return textLayer;
+}
+
+-(void)setGradeFrame:(CATextLayer*)textLayer grade:(CGFloat)grade pointCenter:(CGPoint)pointCenter width:(CGFloat)width
+{
+    CGFloat textheigt = width*3;
+    CGFloat textWidth = width*4;
+    CGFloat textStartPosY;
+    
+    if (pointCenter.y > textheigt) {
+        textStartPosY = pointCenter.y - textheigt;
+    }
+    else {
+        textStartPosY = pointCenter.y;
+    }
+    
+    [self.layer addSublayer:textLayer];
+    [textLayer setFontSize:textheigt/2];
+    
+    [textLayer setString:[[NSString alloc]initWithFormat:@"%ld",(NSInteger)(grade*100)]];
+    [textLayer setFrame:CGRectMake(0, 0, textWidth,  textheigt)];
+    [textLayer setPosition:CGPointMake(pointCenter.x, textStartPosY)];
+    textLayer.contentsScale = [UIScreen mainScreen].scale;
+
+}
+
+-(CABasicAnimation*)fadeAnimation
+{
+    CABasicAnimation* fadeAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
+    fadeAnimation.fromValue = [NSNumber numberWithFloat:0.0];
+    fadeAnimation.toValue = [NSNumber numberWithFloat:1.0];
+    fadeAnimation.duration = 2.0;
+    
+    return fadeAnimation;
+}
+
 @end