First version of timeline and labels.

Author: megamattron

lib/constants.dart

@@ -0,0 +1,5 @@
+import 'package:flutter_web_ui/ui.dart';
+
+class Constants {
+  static final Color backgroundColor = const Color(0xFF000020); 
+}

lib/data/week_label.dart

@@ -0,0 +1,32 @@
+import 'package:intl/intl.dart';
+
+class WeekLabel {
+  int weekNum;
+  String label;
+
+  WeekLabel(this.weekNum, this.label);
+
+  WeekLabel.forDate(DateTime date, String label) {
+    this.label = label;
+    int year = getYear(date);
+    int weekOfYearNum = getWeekNumber(date);
+    this.weekNum = 9 + ((year - 2015) * 52) + weekOfYearNum;
+  }
+
+  int getYear(DateTime date) {
+    return int.parse(DateFormat("y").format(date));
+  }
+
+  int getWeekNumber(DateTime date) {
+    int dayOfYear = int.parse(DateFormat("D").format(date));
+    return ((dayOfYear - date.weekday + 10) / 7).floor();
+  }
+
+
+}
+
+void main() {
+  var weekLabel = WeekLabel.forDate(new DateTime(2019, 2, 26), "Testing");
+  print("${weekLabel.weekNum}");
+
+}

lib/layered_chart.dart

@@ -1,22 +1,22 @@
 import 'dart:math';
 
 import 'package:flutter_web.examples.github_dataviz/catmull.dart';
+import 'package:flutter_web.examples.github_dataviz/constants.dart';
 import 'package:flutter_web.examples.github_dataviz/data/data_series.dart';
 import 'package:flutter_web.examples.github_dataviz/data/milestone.dart';
+import 'package:flutter_web.examples.github_dataviz/data/week_label.dart';
 import 'package:flutter_web.examples.github_dataviz/mathutils.dart';
 import 'package:flutter_web/material.dart';
 import 'package:flutter_web/widgets.dart';
 import 'package:flutter_web/painting.dart';
 
 class LayeredChart extends StatefulWidget {
   List<DataSeries> dataToPlot;
-  List<Milestone> milestones;
+  List<WeekLabel> milestones;
   double animationValue;
 
-  static EarlyInterpolator interpolator = new EarlyInterpolator(0.8);
-
   LayeredChart(this.dataToPlot, this.milestones, animationValue) {
-    this.animationValue = interpolator.get(animationValue);
+    this.animationValue = animationValue;
   }
 
   @override
@@ -34,7 +34,7 @@ class LayeredChartState extends State<LayeredChart> {
   List<TextPainter> milestonePainter;
   Size lastSize = null;
 
-  void buildPaths(Size size, List<DataSeries> dataToPlot, List<Milestone> milestones, int numPoints, double graphHeight, double graphGap, double margin, double theta, double capTheta, double capSize) {
+  void buildPaths(Size size, List<DataSeries> dataToPlot, List<WeekLabel> milestones, int numPoints, double graphHeight, double graphGap, double margin, double theta, double capTheta, double capSize) {
     int m = dataToPlot.length;
     paths = new List<Path>(m);
     capPaths = new List<Path>(m);
@@ -132,15 +132,15 @@ class LayeredChartState extends State<LayeredChart> {
   @override
   Widget build(BuildContext context) {
     return new Container(
-        color: const Color(0xFF000020),
+        color: Constants.backgroundColor,
         child: new CustomPaint(foregroundPainter: new ChartPainter(this, widget.dataToPlot, widget.milestones, 80, 200, 110, 10, 50, 10, 500, widget.animationValue), child: new Container()));
   }
 }
 
 class ChartPainter extends CustomPainter {
 
   List<DataSeries> dataToPlot;
-  List<Milestone> milestones;
+  List<WeekLabel> milestones;
 
   double margin;
   double graphHeight;
@@ -201,6 +201,7 @@ class ChartPainter extends CustomPainter {
       Colors.purple[500],
     ];
     int m = dataToPlot.length;
+    int numWeeks = dataToPlot[0].series.length;
     // How far along to draw
     double totalGap = m * graphGap;
     double xIndent = totalGap / tan(capTheta);
@@ -218,8 +219,8 @@ class ChartPainter extends CustomPainter {
     // MILESTONES
     {
       for (int i = 0; i < milestones.length; i++) {
-        Milestone milestone = milestones[i];
-        double p = milestone.position + (1 - amount);
+        WeekLabel milestone = milestones[i];
+        double p = (milestone.weekNum.toDouble() / numWeeks) + (1 - amount);
         if (p < 1) {
           double x1 = MathUtils.map(p, 0, 1, startX, endX);
           double y1 = MathUtils.map(p, 0, 1, startY, endY);

lib/main.dart

@@ -6,12 +6,15 @@ import 'dart:collection';
 import 'dart:convert';
 import 'dart:html';
 
+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/data_series.dart';
 import 'package:flutter_web.examples.github_dataviz/data/milestone.dart';
 import 'package:flutter_web.examples.github_dataviz/data/stat_for_week.dart';
 import 'package:flutter_web.examples.github_dataviz/data/user_contribution.dart';
+import 'package:flutter_web.examples.github_dataviz/data/week_label.dart';
 import 'package:flutter_web.examples.github_dataviz/layered_chart.dart';
+import 'package:flutter_web.examples.github_dataviz/mathutils.dart';
 import 'package:flutter_web.examples.github_dataviz/timeline.dart';
 import 'package:flutter_web/io.dart';
 import 'package:flutter_web/material.dart';
@@ -31,7 +34,11 @@ class _MainLayoutState extends State<MainLayout>
   List<StatForWeek> pushesByWeek;
   List<StatForWeek> issueCommentsByWeek;
   List<StatForWeek> pullRequestActivityByWeek;
+  List<WeekLabel> weekLabels;
+
+  static EarlyInterpolator interpolator = new EarlyInterpolator(0.8);
   double animationValue = 1.0;
+  double interpolatedAnimationValue;
 
   @override
   void initState() {
@@ -46,9 +53,19 @@ class _MainLayoutState extends State<MainLayout>
     _animation.addListener(() {
       setState(() {
         animationValue = _animation.value;
+        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, 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"));
 
     loadGitHubData();
   }
@@ -98,25 +115,28 @@ class _MainLayoutState extends State<MainLayout>
     milestones.add(new Milestone(new DateTime.now(), 0.25, "Beta"));
     milestones.add(new Milestone(new DateTime.now(), 0.7, "1.0"));
 
-    LayeredChart layeredChart = new LayeredChart(dataToPlot, milestones, animationValue);
+    LayeredChart layeredChart = new LayeredChart(dataToPlot, weekLabels, interpolatedAnimationValue);
 
-    List<ContributionData> timelineData = new List<ContributionData>();
-    if (contributions != null) {
-      timelineData = contributions[0].contributions;
-    }
-    Timeline timeline = new Timeline(timelineData);
+    Timeline timeline = new Timeline(dataToPlot != null ? dataToPlot.last.series.length : 0, interpolatedAnimationValue);
 
     Column mainColumn = new Column(
       mainAxisAlignment: MainAxisAlignment.center,
       mainAxisSize: MainAxisSize.max,
       children: <Widget>[
         new Expanded(child: layeredChart),
+        Padding(
+          padding: const EdgeInsets.all(60.0),
+          child: timeline,
+        ),
       ],
     );
 
-    return new Directionality(
-        textDirection: TextDirection.ltr,
-        child: mainColumn
+    return new Container(
+      color: Constants.backgroundColor,
+      child: new Directionality(
+          textDirection: TextDirection.ltr,
+          child: mainColumn
+      ),
     );
   }
 

lib/timeline.dart

@@ -2,9 +2,10 @@ import 'package:flutter_web.examples.github_dataviz/data/contribution_data.dart'
 import 'package:flutter_web/material.dart';
 
 class Timeline extends StatefulWidget {
-  List<ContributionData> contributions;
+  int numWeeks;
+  double animationValue;
 
-  Timeline(this.contributions);
+  Timeline(this.numWeeks, this.animationValue);
 
   @override
   State<StatefulWidget> createState() {
@@ -15,7 +16,76 @@ class Timeline extends StatefulWidget {
 class TimelineState extends State<Timeline> {
   @override
   Widget build(BuildContext context) {
-    var totalLoaded = widget.contributions != null ? widget.contributions.length : 0;
-    return new Text("Weeks loaded: ${totalLoaded}");
+    return new Container(
+        child: new CustomPaint(foregroundPainter: new TimelinePainter(widget.numWeeks, widget.animationValue), child: new Container(height: 200,)));
   }
+}
+
+class TimelinePainter extends CustomPainter {
+
+  Paint mainLinePaint;
+
+  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)
+
+  int yearNumber = 2015;
+
+  TimelinePainter(this.numWeeks, this.animationValue) {
+    mainLinePaint = new Paint();
+    mainLinePaint.style = PaintingStyle.stroke;
+    mainLinePaint.color = lineColor;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+
+    double yearHeight = 20;
+
+    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);
+    }
+    
+    {
+      for (int week=0; week<numWeeks; week++) {
+        double lineHeight = size.height/32;
+        bool isYear = false;
+        if ((week - 9) % 52 == 0) {
+          // Year
+          isYear = true;
+          lineHeight = size.height/2;
+        } else if (week % 4 == 0) {
+          // Month
+          lineHeight = size.height/8;
+        }
+
+        double currX = (week / numWeeks.toDouble()) * size.width;
+        if (lineHeight > 0) {
+          double margin = (size.height - lineHeight) / 2;
+          canvas.drawLine(new Offset(currX, margin), new Offset(currX, size.height - margin), mainLinePaint);
+        }
+
+        if (isYear) {
+          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));
+          yearNumber++;
+        }
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return true;
+  }
+
+
 }

readme.md

@@ -33,3 +33,8 @@
 
     Open <http://localhost:8080> in Chrome and you should see `Hello World` in
     red text in the upper-left corner.
+
+
+## Data Notes
+
+The data starts the week of Oct 19, 2014 which is the first commit. This is week 0 in our data arrays, but it is week 43 in 2014. Year boundaries are then offset by 9 weeks.