Adding Rally App to Flutter Samples (#135)

material_studies/rally/lib/charts/line_chart.dart

@@ -0,0 +1,193 @@
+// Copyright 2019-present the Flutter authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+
+import 'package:rally/colors.dart';
+import 'package:rally/data.dart';
+
+class RallyLineChart extends StatelessWidget {
+  RallyLineChart({this.events = const []}) : assert(events != null);
+
+  final List<DetailedEventData> events;
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(painter: RallyLineChartPainter(context, events));
+  }
+}
+
+class RallyLineChartPainter extends CustomPainter {
+  RallyLineChartPainter(this.context, this.events);
+
+  final BuildContext context;
+
+  // Events to plot on the line as points.
+  final List<DetailedEventData> events;
+
+  // Number of days to plot.
+  // This is hardcoded to reflect the dummy data, but would be dynamic in a real
+  // app.
+  final int numDays = 52;
+
+  // Beginning of window. The end is this plus numDays.
+  // This is hardcoded to reflect the dummy data, but would be dynamic in a real
+  // app.
+  final DateTime startDate = DateTime.utc(2018, 12, 1);
+
+  // Ranges uses to lerp the pixel points.
+  // This is hardcoded to reflect the dummy data, but would be dynamic in a real
+  // app.
+  final double maxAmount = 3000.0; // minAmount is assumed to be 0.0
+
+  // The number of milliseconds in a day. This is the inherit period fot the
+  // points in this line.
+  static const int millisInDay = 24 * 60 * 60 * 1000;
+
+  // Amount to shift the tick drawing by so that the sunday ticks do not start
+  // on the edge.
+  final int tickShift = 3;
+
+  // Arbitrary unit of space for absolute positioned painting.
+  final double space = 16.0;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    double ticksTop = size.height - space * 5;
+    double labelsTop = size.height - space * 2;
+    _drawLine(
+      canvas,
+      Rect.fromLTWH(0.0, 0.0, size.width, ticksTop),
+    );
+    _drawXAxisTicks(
+      canvas,
+      Rect.fromLTWH(0.0, ticksTop, size.width, labelsTop - ticksTop),
+    );
+    _drawXAxisLabels(
+      canvas,
+      Rect.fromLTWH(0.0, labelsTop, size.width, size.height - labelsTop),
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return false;
+  }
+
+  void _drawLine(Canvas canvas, Rect rect) {
+    final linePaint = Paint()
+      ..color = RallyColors.accountColor(2)
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 2.0;
+
+    // Arbitrary value for the first point. In a real app, a wider range of
+    // points would be used that go beyond the boundaries of the screen.
+    double lastAmount = 800.0;
+
+    // Try changing this value between 1, 7, 15, etc.
+    int smoothing = 7;
+
+    // Align the points with equal deltas (1 day) as a cumulative sum.
+    int startMillis = startDate.millisecondsSinceEpoch;
+    final points = [
+      Offset(0.0, (maxAmount - lastAmount) / maxAmount * rect.height)
+    ];
+    for (int i = 0; i < numDays + smoothing; i++) {
+      int endMillis = startMillis + millisInDay * 1;
+      final filteredEvents = events.where((e) {
+        return startMillis <= e.date.millisecondsSinceEpoch &&
+            e.date.millisecondsSinceEpoch <= endMillis;
+      }).toList();
+      lastAmount += filteredEvents.fold<num>(0.0, (sum, e) => sum + e.amount);
+      double x = i / numDays * rect.width;
+      double y = (maxAmount - lastAmount) / maxAmount * rect.height;
+      points.add(Offset(x, y));
+      startMillis = endMillis;
+    }
+
+    final Path path = Path();
+    path.moveTo(points[0].dx, points[0].dy);
+    for (int i = 1; i < points.length - smoothing; i += smoothing) {
+      double x1 = points[i].dx;
+      double y1 = points[i].dy;
+      double x2 = (x1 + points[i + smoothing].dx) / 2;
+      double y2 = (y1 + points[i + smoothing].dy) / 2;
+      path.quadraticBezierTo(x1, y1, x2, y2);
+    }
+    canvas.drawPath(path, linePaint);
+  }
+
+  /// Draw the X-axis increment markers at constant width intervals.
+  void _drawXAxisTicks(Canvas canvas, Rect rect) {
+    double dayTop = (rect.top + rect.bottom) / 2;
+    for (int i = 0; i < numDays; i++) {
+      double x = rect.width / numDays * i;
+      canvas.drawRect(
+        Rect.fromPoints(
+          Offset(x, i % 7 == tickShift ? rect.top : dayTop),
+          Offset(x, rect.bottom),
+        ),
+        Paint()
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 1.0
+          ..color = RallyColors.gray25,
+      );
+    }
+  }
+
+  /// Set X-axis labels under the X-axis increment markers.
+  void _drawXAxisLabels(Canvas canvas, Rect rect) {
+    final selectedLabelStyle = Theme.of(context).textTheme.body1.copyWith(
+          fontWeight: FontWeight.w700,
+        );
+    final unselectedLabelStyle = Theme.of(context).textTheme.body1.copyWith(
+          fontWeight: FontWeight.w700,
+          color: RallyColors.gray25,
+        );
+
+    final leftLabel = TextPainter(
+      text: TextSpan(
+        text: 'AUGUST 2019',
+        style: unselectedLabelStyle,
+      ),
+      textDirection: TextDirection.ltr,
+    );
+    leftLabel.layout();
+    leftLabel.paint(canvas, Offset(rect.left + space / 2, rect.center.dy));
+
+    final centerLabel = TextPainter(
+      text: TextSpan(text: 'SEPTEMBER 2019', style: selectedLabelStyle),
+      textDirection: TextDirection.ltr,
+    );
+    centerLabel.layout();
+    final double x = (rect.width - centerLabel.width) / 2;
+    final double y = rect.center.dy;
+    centerLabel.paint(canvas, Offset(x, y));
+
+    final rightLabel = TextPainter(
+      text: TextSpan(
+        text: 'OCTOBER 2019',
+        style: unselectedLabelStyle,
+      ),
+      textDirection: TextDirection.ltr,
+    );
+    rightLabel.layout();
+    rightLabel.paint(
+      canvas,
+      Offset(rect.right - centerLabel.width - space / 2, rect.center.dy),
+    );
+  }
+}