Show milestones on timeline. Add repo public milestone.

Author: megamattron

lib/constants.dart

@@ -1,5 +1,8 @@
+import 'package:flutter_web/material.dart';
 import 'package:flutter_web_ui/ui.dart';
 
 class Constants {
   static final Color backgroundColor = const Color(0xFF000020); 
+  static final Color timelineLineColor = Colors.white;
+  static final Color milestoneColor = new Color(0x40FFFFFF);
 }

lib/layered_chart.dart

@@ -172,7 +172,7 @@ class ChartPainter extends CustomPainter {
     textPaint = new Paint();
     textPaint.color = new Color(0xFFFFFFFF);
     milestonePaint = new Paint();
-    milestonePaint.color = new Color(0x40FFFFFF);
+    milestonePaint.color = Constants.milestoneColor;
     milestonePaint.style = PaintingStyle.stroke;
     milestonePaint.strokeWidth = 2;
     linePaint = new Paint();

lib/main.dart

@@ -52,19 +52,20 @@ class _MainLayoutState extends State<MainLayout>
     _animation.addListener(() {
       setState(() {
         animationValue = _animation.value;
-        interpolatedAnimationValue = interpolator.get(animationValue);
+//        interpolatedAnimationValue = interpolator.get(animationValue);
       });
 //      print("New anim value ${value}");
     });
 
     weekLabels = new List();
     weekLabels.add(WeekLabel.forDate(new DateTime(2019, 2, 26), "v1.2"));
     weekLabels.add(WeekLabel.forDate(new DateTime(2018, 12, 4), "v1.0"));
-    weekLabels.add(WeekLabel.forDate(new DateTime(2018, 9, 19), "Preview 2"));
-//    weekLabels.add(WeekLabel.forDate(new DateTime(2018, 6, 21), "Preview 1"));
+//    weekLabels.add(WeekLabel.forDate(new DateTime(2018, 9, 19), "Preview 2"));
+    weekLabels.add(WeekLabel.forDate(new DateTime(2018, 6, 21), "Preview 1"));
 //    weekLabels.add(WeekLabel.forDate(new DateTime(2018, 5, 7), "Beta 3"));
     weekLabels.add(WeekLabel.forDate(new DateTime(2018, 2, 27), "Beta 1"));
     weekLabels.add(WeekLabel.forDate(new DateTime(2017, 5, 1), "Alpha"));
+    weekLabels.add(new WeekLabel(48, "Repo Made Public"));
 
     loadGitHubData();
   }
@@ -110,7 +111,7 @@ class _MainLayoutState extends State<MainLayout>
 
     LayeredChart layeredChart = new LayeredChart(dataToPlot, weekLabels, interpolatedAnimationValue);
 
-    Timeline timeline = new Timeline(dataToPlot != null && dataToPlot.length > 0 ? dataToPlot.last.series.length : 0, interpolatedAnimationValue);
+    Timeline timeline = new Timeline(dataToPlot != null && dataToPlot.length > 0 ? dataToPlot.last.series.length : 0, interpolatedAnimationValue, weekLabels);
 
     Column mainColumn = new Column(
       mainAxisAlignment: MainAxisAlignment.center,

lib/timeline.dart

@@ -1,11 +1,14 @@
+import 'package:flutter_web.examples.github_dataviz/constants.dart';
 import 'package:flutter_web.examples.github_dataviz/data/contribution_data.dart';
+import 'package:flutter_web.examples.github_dataviz/data/week_label.dart';
 import 'package:flutter_web/material.dart';
 
 class Timeline extends StatefulWidget {
   int numWeeks;
   double animationValue;
-
-  Timeline(this.numWeeks, this.animationValue);
+  List<WeekLabel> weekLabels;
+  
+  Timeline(this.numWeeks, this.animationValue, this.weekLabels);
 
   @override
   State<StatefulWidget> createState() {
@@ -17,39 +20,49 @@ class TimelineState extends State<Timeline> {
   @override
   Widget build(BuildContext context) {
     return new Container(
-        child: new CustomPaint(foregroundPainter: new TimelinePainter(widget.numWeeks, widget.animationValue), child: new Container(height: 200,)));
+        child: new CustomPaint(
+            foregroundPainter: new TimelinePainter(widget.numWeeks, widget.animationValue, widget.weekLabels),
+            child: new Container(height: 200,))
+    );
   }
 }
 
 class TimelinePainter extends CustomPainter {
 
   Paint mainLinePaint;
+  Paint milestoneLinePaint;
 
   Color lineColor = Colors.white;
 
   int numWeeks;
   double animationValue;
   int weekYearOffset = 9; // Week 0 in our data is 9 weeks before the year boundary (i.e. week 43)
 
+  List<WeekLabel> weekLabels;
+
   int yearNumber = 2015;
 
-  TimelinePainter(this.numWeeks, this.animationValue) {
+  TimelinePainter(this.numWeeks, this.animationValue, this.weekLabels) {
     mainLinePaint = new Paint();
     mainLinePaint.style = PaintingStyle.stroke;
-    mainLinePaint.color = lineColor;
+    mainLinePaint.color = Constants.timelineLineColor;
+    milestoneLinePaint = new Paint();
+    milestoneLinePaint.style = PaintingStyle.stroke;
+    milestoneLinePaint.color = Constants.milestoneColor;
   }
 
   @override
   void paint(Canvas canvas, Size size) {
 
-    double yearHeight = 20;
+    double labelHeight = 20;
+    double labelHeightDoubled = labelHeight*2;
 
     double mainLineY = size.height/2;
     canvas.drawLine(new Offset(0, mainLineY), new Offset(size.width, mainLineY), mainLinePaint);
 
     {
       double currWeekX = size.width * animationValue;
-      canvas.drawLine(new Offset(currWeekX, yearHeight), new Offset(currWeekX, size.height - yearHeight), mainLinePaint);
+      canvas.drawLine(new Offset(currWeekX, labelHeightDoubled), new Offset(currWeekX, size.height - labelHeightDoubled), mainLinePaint);
     }
 
     {
@@ -60,7 +73,7 @@ class TimelinePainter extends CustomPainter {
           // Year
           isYear = true;
           lineHeight = size.height/2;
-        } else if (week % 4 == 0) {
+        } else if ((week - 1) % 4 == 0) {
           // Month
           lineHeight = size.height/8;
         }
@@ -75,11 +88,27 @@ class TimelinePainter extends CustomPainter {
           TextSpan span = new TextSpan(style: new TextStyle(color: Color.fromARGB(255, 255, 255, 255), fontSize: 12), text: "${yearNumber}");
           TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
           tp.layout();
-          tp.paint(canvas, new Offset(currX, size.height - yearHeight));
+          tp.paint(canvas, new Offset(currX, size.height - labelHeight));
           yearNumber++;
         }
       }
     }
+    
+    {
+      for (int i = 0; i<weekLabels.length; i++) {
+        WeekLabel weekLabel = weekLabels[i];
+        double currX = (weekLabel.weekNum / numWeeks.toDouble()) * size.width;
+        double lineHeight = size.height/2;
+        double margin = (size.height - lineHeight) / 2;
+        canvas.drawLine(new Offset(currX, margin), new Offset(currX, size.height - margin), milestoneLinePaint);
+
+        TextSpan span = new TextSpan(style: new TextStyle(color: Constants.milestoneColor, fontSize: 12), text: weekLabel.label);
+        TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
+        tp.layout();
+        tp.paint(canvas, new Offset(currX, size.height - labelHeightDoubled));
+
+      }
+    }
   }
 
   @override