mirror of https://github.com/flutter/samples.git
Brett Morgan
2 years ago
committed by
GitHub
parent
e93776ae04
commit
88145ea4ca
@ -1,27 +0,0 @@
|
|||||||
Copyright 2019 The Chromium Authors. All rights reserved.
|
|
||||||
|
|
||||||
Redistribution and use in source and binary forms, with or without
|
|
||||||
modification, are permitted provided that the following conditions are
|
|
||||||
met:
|
|
||||||
|
|
||||||
* Redistributions of source code must retain the above copyright
|
|
||||||
notice, this list of conditions and the following disclaimer.
|
|
||||||
* Redistributions in binary form must reproduce the above
|
|
||||||
copyright notice, this list of conditions and the following
|
|
||||||
disclaimer in the documentation and/or other materials provided
|
|
||||||
with the distribution.
|
|
||||||
* Neither the name of Google Inc. nor the names of its
|
|
||||||
contributors may be used to endorse or promote products derived
|
|
||||||
from this software without specific prior written permission.
|
|
||||||
|
|
||||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
|
||||||
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
||||||
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
||||||
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
|
||||||
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
||||||
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
|
||||||
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
|
||||||
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
|
||||||
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
||||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
||||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
A visualization for
|
|
||||||
[Flutter GitHub repository](https://github.com/flutter/flutter/) metadata.
|
|
||||||
|
|
||||||
Created for Google by [Larva Labs](http://larvalabs.com/), a team of creative
|
|
||||||
technologists who make things for Android, iPhone, and the Web.
|
|
||||||
|
|
||||||
## 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.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
include: package:flutter_lints/flutter.yaml
|
|
||||||
|
|
||||||
linter:
|
|
||||||
rules:
|
|
||||||
avoid_print: false
|
|
||||||
prefer_single_quotes: true
|
|
||||||
|
Before Width: | Height: | Size: 13 KiB |
|
|
File diff suppressed because it is too large
Load Diff
|
|
|
@ -1,79 +0,0 @@
|
|||||||
import 'package:github_dataviz/mathutils.dart';
|
|
||||||
|
|
||||||
class ControlPointAndValue {
|
|
||||||
late int point;
|
|
||||||
double? value;
|
|
||||||
|
|
||||||
ControlPointAndValue() {
|
|
||||||
value = 0;
|
|
||||||
point = 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class CatmullInterpolator implements Interpolator {
|
|
||||||
List<Point2D> controlPoints;
|
|
||||||
|
|
||||||
CatmullInterpolator(this.controlPoints);
|
|
||||||
|
|
||||||
@override
|
|
||||||
double get(double v) {
|
|
||||||
for (int i = 2; i < controlPoints.length - 1; i++) {
|
|
||||||
if (controlPoints[i].x >= v) {
|
|
||||||
double t = (v - controlPoints[i - 1].x) /
|
|
||||||
(controlPoints[i].x - controlPoints[i - 1].x);
|
|
||||||
double p0 = controlPoints[i - 2].y;
|
|
||||||
double p1 = controlPoints[i - 1].y;
|
|
||||||
double p2 = controlPoints[i].y;
|
|
||||||
double p3 = controlPoints[i + 1].y;
|
|
||||||
return 0.5 *
|
|
||||||
((2 * p1) +
|
|
||||||
(p2 - p0) * t +
|
|
||||||
(2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t +
|
|
||||||
(3 * p1 - p0 - 3 * p2 + p3) * t * t * t);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Will be unreachable if the control points were set up right
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ControlPointAndValue progressiveGet(ControlPointAndValue cpv) {
|
|
||||||
double? v = cpv.value;
|
|
||||||
for (int i = cpv.point; i < controlPoints.length - 1; i++) {
|
|
||||||
if (controlPoints[i].x >= v!) {
|
|
||||||
double t = (v - controlPoints[i - 1].x) /
|
|
||||||
(controlPoints[i].x - controlPoints[i - 1].x);
|
|
||||||
double p0 = controlPoints[i - 2].y;
|
|
||||||
double p1 = controlPoints[i - 1].y;
|
|
||||||
double p2 = controlPoints[i].y;
|
|
||||||
double p3 = controlPoints[i + 1].y;
|
|
||||||
cpv.value = 0.5 *
|
|
||||||
((2 * p1) +
|
|
||||||
(p2 - p0) * t +
|
|
||||||
(2 * p0 - 5 * p1 + 4 * p2 - p3) * t * t +
|
|
||||||
(3 * p1 - p0 - 3 * p2 + p3) * t * t * t);
|
|
||||||
cpv.point = i;
|
|
||||||
return cpv;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Will be unreachable if the control points were set up right
|
|
||||||
return cpv;
|
|
||||||
}
|
|
||||||
|
|
||||||
static void test() {
|
|
||||||
final controlPoints = <Point2D>[];
|
|
||||||
controlPoints.add(Point2D(-1, 1));
|
|
||||||
controlPoints.add(Point2D(0, 1));
|
|
||||||
controlPoints.add(Point2D(1, -1));
|
|
||||||
controlPoints.add(Point2D(3, 4));
|
|
||||||
controlPoints.add(Point2D(10, -2));
|
|
||||||
controlPoints.add(Point2D(11, -2));
|
|
||||||
CatmullInterpolator catmull = CatmullInterpolator(controlPoints);
|
|
||||||
print(catmull.get(0));
|
|
||||||
print(catmull.get(1));
|
|
||||||
print(catmull.get(2));
|
|
||||||
print(catmull.get(5));
|
|
||||||
print(catmull.get(7));
|
|
||||||
print(catmull.get(8));
|
|
||||||
print(catmull.get(10));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
class Constants {
|
|
||||||
static const Color backgroundColor = Color(0xFF000020);
|
|
||||||
static const Color timelineLineColor = Color(0x60FFFFFF);
|
|
||||||
static const Color milestoneColor = Color(0x40FFFFFF);
|
|
||||||
static const Color milestoneTimelineColor = Colors.white;
|
|
||||||
}
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
class ContributionData {
|
|
||||||
int weekTime;
|
|
||||||
int add;
|
|
||||||
int delete;
|
|
||||||
int change;
|
|
||||||
|
|
||||||
ContributionData(this.weekTime, this.add, this.delete, this.change);
|
|
||||||
|
|
||||||
static ContributionData fromJson(Map<String, dynamic> jsonMap) {
|
|
||||||
ContributionData data = ContributionData(
|
|
||||||
jsonMap['w'], jsonMap['a'], jsonMap['d'], jsonMap['c']);
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
class DataSeries {
|
|
||||||
String label;
|
|
||||||
List<int> series;
|
|
||||||
|
|
||||||
DataSeries(this.label, this.series);
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
class StatForWeek {
|
|
||||||
int weekIndex;
|
|
||||||
int stat;
|
|
||||||
|
|
||||||
StatForWeek(this.weekIndex, this.stat);
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
class User {
|
|
||||||
int id;
|
|
||||||
String username;
|
|
||||||
String avatarUrl;
|
|
||||||
|
|
||||||
User(this.id, this.username, this.avatarUrl);
|
|
||||||
|
|
||||||
static User fromJson(Map<String, dynamic> jsonMap) {
|
|
||||||
User user = User(jsonMap['id'], jsonMap['login'], jsonMap['avatar_url']);
|
|
||||||
return user;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import 'package:github_dataviz/data/contribution_data.dart';
|
|
||||||
import 'package:github_dataviz/data/user.dart';
|
|
||||||
|
|
||||||
class UserContribution {
|
|
||||||
User user;
|
|
||||||
List<ContributionData> contributions;
|
|
||||||
|
|
||||||
UserContribution(this.user, this.contributions);
|
|
||||||
|
|
||||||
static UserContribution fromJson(Map<String, dynamic> jsonMap) {
|
|
||||||
List<ContributionData> contributionList = (jsonMap['weeks'] as List)
|
|
||||||
.map((e) => ContributionData.fromJson(e))
|
|
||||||
.toList();
|
|
||||||
var userContribution =
|
|
||||||
UserContribution(User.fromJson(jsonMap['author']), contributionList);
|
|
||||||
return userContribution;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import 'package:intl/intl.dart';
|
|
||||||
|
|
||||||
class WeekLabel {
|
|
||||||
int? weekNum;
|
|
||||||
String label;
|
|
||||||
|
|
||||||
WeekLabel(this.weekNum, this.label);
|
|
||||||
|
|
||||||
WeekLabel.forDate(DateTime date, this.label) {
|
|
||||||
int year = getYear(date);
|
|
||||||
int weekOfYearNum = getWeekNumber(date);
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,336 +0,0 @@
|
|||||||
import 'dart:math';
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'package:github_dataviz/catmull.dart';
|
|
||||||
import 'package:github_dataviz/constants.dart';
|
|
||||||
import 'package:github_dataviz/data/data_series.dart';
|
|
||||||
import 'package:github_dataviz/data/week_label.dart';
|
|
||||||
import 'package:github_dataviz/mathutils.dart';
|
|
||||||
|
|
||||||
class LayeredChart extends StatefulWidget {
|
|
||||||
final List<DataSeries> dataToPlot;
|
|
||||||
final List<WeekLabel> milestones;
|
|
||||||
final double animationValue;
|
|
||||||
|
|
||||||
const LayeredChart(this.dataToPlot, this.milestones, this.animationValue,
|
|
||||||
{Key? key})
|
|
||||||
: super(key: key);
|
|
||||||
|
|
||||||
@override
|
|
||||||
State<LayeredChart> createState() {
|
|
||||||
return _LayeredChartState();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class _LayeredChartState extends State<LayeredChart> {
|
|
||||||
late List<Path> paths;
|
|
||||||
late List<Path> capPaths;
|
|
||||||
late List<double> maxValues;
|
|
||||||
late double theta;
|
|
||||||
late double graphHeight;
|
|
||||||
late List<TextPainter> labelPainter;
|
|
||||||
late List<TextPainter> milestonePainter;
|
|
||||||
Size? lastSize;
|
|
||||||
|
|
||||||
void buildPaths(
|
|
||||||
Size size,
|
|
||||||
List<DataSeries> dataToPlot,
|
|
||||||
List<WeekLabel> milestones,
|
|
||||||
int numPoints,
|
|
||||||
double graphGap,
|
|
||||||
double margin,
|
|
||||||
double capTheta,
|
|
||||||
double capSize) {
|
|
||||||
double screenRatio = size.width / size.height;
|
|
||||||
double degrees = MathUtils.clampedMap(screenRatio, 0.5, 2.5, 50, 5);
|
|
||||||
theta = pi * degrees / 180;
|
|
||||||
graphHeight = MathUtils.clampedMap(screenRatio, 0.5, 2.5, 50, 150);
|
|
||||||
|
|
||||||
int m = dataToPlot.length;
|
|
||||||
paths = [];
|
|
||||||
capPaths = [];
|
|
||||||
maxValues = [];
|
|
||||||
for (int i = 0; i < m; i++) {
|
|
||||||
int n = dataToPlot[i].series.length;
|
|
||||||
maxValues.add(0);
|
|
||||||
for (int j = 0; j < n; j++) {
|
|
||||||
double v = dataToPlot[i].series[j].toDouble();
|
|
||||||
if (v > maxValues[i]) {
|
|
||||||
maxValues[i] = v;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
double totalGap = m * graphGap;
|
|
||||||
double xIndent = totalGap / tan(capTheta);
|
|
||||||
double startX = margin + xIndent;
|
|
||||||
double endX = size.width - margin;
|
|
||||||
double startY = size.height;
|
|
||||||
double endY = startY - (endX - startX) * tan(theta);
|
|
||||||
double xWidth = (endX - startX) / numPoints;
|
|
||||||
double capRangeX = capSize * cos(capTheta);
|
|
||||||
double tanCapTheta = tan(capTheta);
|
|
||||||
final curvePoints = <double>[];
|
|
||||||
for (int i = 0; i < m; i++) {
|
|
||||||
List<int> series = dataToPlot[i].series;
|
|
||||||
int n = series.length;
|
|
||||||
final controlPoints = <Point2D>[];
|
|
||||||
controlPoints.add(Point2D(-1, 0));
|
|
||||||
double last = 0;
|
|
||||||
for (int j = 0; j < n; j++) {
|
|
||||||
double v = series[j].toDouble();
|
|
||||||
controlPoints.add(Point2D(j.toDouble(), v));
|
|
||||||
last = v;
|
|
||||||
}
|
|
||||||
controlPoints.add(Point2D(n.toDouble(), last));
|
|
||||||
CatmullInterpolator curve = CatmullInterpolator(controlPoints);
|
|
||||||
ControlPointAndValue cpv = ControlPointAndValue();
|
|
||||||
for (int j = 0; j < numPoints; j++) {
|
|
||||||
cpv.value = MathUtils.map(
|
|
||||||
j.toDouble(), 0, (numPoints - 1).toDouble(), 0, (n - 1).toDouble());
|
|
||||||
curve.progressiveGet(cpv);
|
|
||||||
curvePoints.add(MathUtils.map(
|
|
||||||
max(0, cpv.value!), 0, maxValues[i].toDouble(), 0, graphHeight));
|
|
||||||
}
|
|
||||||
paths.add(Path());
|
|
||||||
capPaths.add(Path());
|
|
||||||
paths[i].moveTo(startX, startY);
|
|
||||||
capPaths[i].moveTo(startX, startY);
|
|
||||||
for (int j = 0; j < numPoints; j++) {
|
|
||||||
double v = curvePoints[j];
|
|
||||||
int k = j + 1;
|
|
||||||
double xDist = xWidth;
|
|
||||||
double capV = v;
|
|
||||||
while (k < numPoints && xDist <= capRangeX) {
|
|
||||||
double cy = curvePoints[k] + xDist * tanCapTheta;
|
|
||||||
capV = max(capV, cy);
|
|
||||||
k++;
|
|
||||||
xDist += xWidth;
|
|
||||||
}
|
|
||||||
double x = MathUtils.map(
|
|
||||||
j.toDouble(), 0, (numPoints - 1).toDouble(), startX, endX);
|
|
||||||
double baseY = MathUtils.map(
|
|
||||||
j.toDouble(), 0, (numPoints - 1).toDouble(), startY, endY);
|
|
||||||
double y = baseY - v;
|
|
||||||
double cY = baseY - capV;
|
|
||||||
paths[i].lineTo(x, y);
|
|
||||||
if (j == 0) {
|
|
||||||
int k = capRangeX ~/ xWidth;
|
|
||||||
double mx = MathUtils.map(
|
|
||||||
-k.toDouble(), 0, (numPoints - 1).toDouble(), startX, endX);
|
|
||||||
double my = MathUtils.map(
|
|
||||||
-k.toDouble(), 0, (numPoints - 1).toDouble(), startY, endY) -
|
|
||||||
capV;
|
|
||||||
capPaths[i].lineTo(mx, my);
|
|
||||||
}
|
|
||||||
capPaths[i].lineTo(x, cY);
|
|
||||||
}
|
|
||||||
paths[i].lineTo(endX, endY);
|
|
||||||
paths[i].lineTo(endX, endY + 1);
|
|
||||||
paths[i].lineTo(startX, startY + 1);
|
|
||||||
paths[i].close();
|
|
||||||
capPaths[i].lineTo(endX, endY);
|
|
||||||
capPaths[i].lineTo(endX, endY + 1);
|
|
||||||
capPaths[i].lineTo(startX, startY + 1);
|
|
||||||
capPaths[i].close();
|
|
||||||
}
|
|
||||||
labelPainter = [];
|
|
||||||
for (int i = 0; i < dataToPlot.length; i++) {
|
|
||||||
TextSpan span = TextSpan(
|
|
||||||
style: const TextStyle(
|
|
||||||
color: Color.fromARGB(255, 255, 255, 255), fontSize: 12),
|
|
||||||
text: dataToPlot[i].label.toUpperCase());
|
|
||||||
TextPainter tp = TextPainter(
|
|
||||||
text: span,
|
|
||||||
textAlign: TextAlign.left,
|
|
||||||
textDirection: TextDirection.ltr);
|
|
||||||
tp.layout();
|
|
||||||
labelPainter.add(tp);
|
|
||||||
}
|
|
||||||
milestonePainter = [];
|
|
||||||
for (int i = 0; i < milestones.length; i++) {
|
|
||||||
TextSpan span = TextSpan(
|
|
||||||
style: const TextStyle(
|
|
||||||
color: Color.fromARGB(255, 255, 255, 255), fontSize: 10),
|
|
||||||
text: milestones[i].label.toUpperCase());
|
|
||||||
TextPainter tp = TextPainter(
|
|
||||||
text: span,
|
|
||||||
textAlign: TextAlign.left,
|
|
||||||
textDirection: TextDirection.ltr);
|
|
||||||
tp.layout();
|
|
||||||
milestonePainter.add(tp);
|
|
||||||
}
|
|
||||||
lastSize = Size(size.width, size.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Container(
|
|
||||||
color: Constants.backgroundColor,
|
|
||||||
child: CustomPaint(
|
|
||||||
foregroundPainter: _ChartPainter(this, widget.dataToPlot,
|
|
||||||
widget.milestones, 80, 50, 50, 12, 500, widget.animationValue),
|
|
||||||
child: Container()));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class _ChartPainter extends CustomPainter {
|
|
||||||
static List<Color?> colors = [
|
|
||||||
Colors.red[900],
|
|
||||||
const Color(0xffc4721a),
|
|
||||||
Colors.lime[900],
|
|
||||||
Colors.green[900],
|
|
||||||
Colors.blue[900],
|
|
||||||
Colors.purple[900],
|
|
||||||
];
|
|
||||||
static List<Color?> capColors = [
|
|
||||||
Colors.red[500],
|
|
||||||
Colors.amber[500],
|
|
||||||
Colors.lime[500],
|
|
||||||
Colors.green[500],
|
|
||||||
Colors.blue[500],
|
|
||||||
Colors.purple[500],
|
|
||||||
];
|
|
||||||
|
|
||||||
List<DataSeries> dataToPlot;
|
|
||||||
List<WeekLabel> milestones;
|
|
||||||
|
|
||||||
double margin;
|
|
||||||
double graphGap;
|
|
||||||
late double capTheta;
|
|
||||||
double capSize;
|
|
||||||
int numPoints;
|
|
||||||
double amount = 1.0;
|
|
||||||
|
|
||||||
late Paint pathPaint;
|
|
||||||
late Paint capPaint;
|
|
||||||
late Paint textPaint;
|
|
||||||
late Paint milestonePaint;
|
|
||||||
late Paint linePaint;
|
|
||||||
late Paint fillPaint;
|
|
||||||
|
|
||||||
_LayeredChartState state;
|
|
||||||
|
|
||||||
_ChartPainter(
|
|
||||||
this.state,
|
|
||||||
this.dataToPlot,
|
|
||||||
this.milestones,
|
|
||||||
this.margin,
|
|
||||||
this.graphGap,
|
|
||||||
double capDegrees,
|
|
||||||
this.capSize,
|
|
||||||
this.numPoints,
|
|
||||||
this.amount) {
|
|
||||||
capTheta = pi * capDegrees / 180;
|
|
||||||
pathPaint = Paint();
|
|
||||||
pathPaint.style = PaintingStyle.fill;
|
|
||||||
capPaint = Paint();
|
|
||||||
capPaint.style = PaintingStyle.fill;
|
|
||||||
textPaint = Paint();
|
|
||||||
textPaint.color = const Color(0xFFFFFFFF);
|
|
||||||
milestonePaint = Paint();
|
|
||||||
milestonePaint.color = Constants.milestoneColor;
|
|
||||||
milestonePaint.style = PaintingStyle.stroke;
|
|
||||||
milestonePaint.strokeWidth = 2;
|
|
||||||
linePaint = Paint();
|
|
||||||
linePaint.style = PaintingStyle.stroke;
|
|
||||||
linePaint.strokeWidth = 0.5;
|
|
||||||
fillPaint = Paint();
|
|
||||||
fillPaint.style = PaintingStyle.fill;
|
|
||||||
fillPaint.color = const Color(0xFF000000);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void paint(Canvas canvas, Size size) {
|
|
||||||
if (dataToPlot.isEmpty) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.lastSize == null ||
|
|
||||||
size.width != state.lastSize!.width ||
|
|
||||||
size.height != state.lastSize!.height) {
|
|
||||||
print('Building paths, lastsize = ${state.lastSize}');
|
|
||||||
state.buildPaths(size, dataToPlot, milestones, numPoints, graphGap,
|
|
||||||
margin, capTheta, capSize);
|
|
||||||
}
|
|
||||||
int m = dataToPlot.length;
|
|
||||||
int numWeeks = dataToPlot[0].series.length;
|
|
||||||
// How far along to draw
|
|
||||||
double totalGap = m * graphGap;
|
|
||||||
double xIndent = totalGap / tan(capTheta);
|
|
||||||
double dx = xIndent / (m - 1);
|
|
||||||
double startX = margin + xIndent;
|
|
||||||
double endX = size.width - margin;
|
|
||||||
double startY = size.height;
|
|
||||||
double endY = startY - (endX - startX) * tan(state.theta);
|
|
||||||
// MILESTONES
|
|
||||||
{
|
|
||||||
for (int i = 0; i < milestones.length; i++) {
|
|
||||||
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);
|
|
||||||
double x2 = x1 - xIndent;
|
|
||||||
double y2 = y1 - graphGap * (m - 1);
|
|
||||||
x1 += dx * 0.5;
|
|
||||||
y1 += graphGap * 0.5;
|
|
||||||
double textY = y1 + 5;
|
|
||||||
double textX = x1 + 5 * tan(capTheta);
|
|
||||||
canvas.drawLine(Offset(x1, y1), Offset(x2, y2), milestonePaint);
|
|
||||||
canvas.save();
|
|
||||||
TextPainter tp = state.milestonePainter[i];
|
|
||||||
canvas.translate(textX, textY);
|
|
||||||
canvas.skew(tan(capTheta * 1.0), -tan(state.theta));
|
|
||||||
canvas.translate(-tp.width / 2, 0);
|
|
||||||
tp.paint(canvas, const Offset(0, 0));
|
|
||||||
canvas.restore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (int i = m - 1; i >= 0; i--) {
|
|
||||||
canvas.save();
|
|
||||||
canvas.translate(-dx * i, -graphGap * i);
|
|
||||||
|
|
||||||
{
|
|
||||||
// TEXT LABELS
|
|
||||||
canvas.save();
|
|
||||||
double textPosition = 0.2;
|
|
||||||
double textX = MathUtils.map(textPosition, 0, 1, startX, endX);
|
|
||||||
double textY = MathUtils.map(textPosition, 0, 1, startY, endY) + 5;
|
|
||||||
canvas.translate(textX, textY);
|
|
||||||
TextPainter tp = state.labelPainter[i];
|
|
||||||
canvas.skew(0, -tan(state.theta));
|
|
||||||
canvas.drawRect(
|
|
||||||
Rect.fromLTWH(-1, -1, tp.width + 2, tp.height + 2), fillPaint);
|
|
||||||
tp.paint(canvas, const Offset(0, 0));
|
|
||||||
canvas.restore();
|
|
||||||
}
|
|
||||||
|
|
||||||
linePaint.color = capColors[i]!;
|
|
||||||
canvas.drawLine(Offset(startX, startY), Offset(endX, endY), linePaint);
|
|
||||||
|
|
||||||
Path clipPath = Path();
|
|
||||||
clipPath.moveTo(startX - capSize, startY + 11);
|
|
||||||
clipPath.lineTo(endX, endY + 1);
|
|
||||||
clipPath.lineTo(endX, endY - state.graphHeight - capSize);
|
|
||||||
clipPath.lineTo(startX - capSize, startY - state.graphHeight - capSize);
|
|
||||||
clipPath.close();
|
|
||||||
canvas.clipPath(clipPath);
|
|
||||||
|
|
||||||
pathPaint.color = colors[i]!;
|
|
||||||
capPaint.color = capColors[i]!;
|
|
||||||
double offsetX = MathUtils.map(1 - amount, 0, 1, startX, endX);
|
|
||||||
double offsetY = MathUtils.map(1 - amount, 0, 1, startY, endY);
|
|
||||||
canvas.translate(offsetX - startX, offsetY - startY);
|
|
||||||
canvas.drawPath(state.capPaths[i], capPaint);
|
|
||||||
canvas.drawPath(state.paths[i], pathPaint);
|
|
||||||
|
|
||||||
canvas.restore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,259 +0,0 @@
|
|||||||
// Copyright 2018 The Chromium Authors. All rights reserved.
|
|
||||||
// Use of this source code is governed by a BSD-style license that can be
|
|
||||||
// found in the LICENSE file.
|
|
||||||
|
|
||||||
import 'dart:collection';
|
|
||||||
import 'dart:convert';
|
|
||||||
|
|
||||||
import 'package:http/http.dart' as http;
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'package:github_dataviz/constants.dart';
|
|
||||||
import 'package:github_dataviz/data/contribution_data.dart';
|
|
||||||
import 'package:github_dataviz/data/data_series.dart';
|
|
||||||
import 'package:github_dataviz/data/stat_for_week.dart';
|
|
||||||
import 'package:github_dataviz/data/user_contribution.dart';
|
|
||||||
import 'package:github_dataviz/data/week_label.dart';
|
|
||||||
import 'package:github_dataviz/layered_chart.dart';
|
|
||||||
import 'package:github_dataviz/mathutils.dart';
|
|
||||||
import 'package:github_dataviz/timeline.dart';
|
|
||||||
|
|
||||||
class MainLayout extends StatefulWidget {
|
|
||||||
const MainLayout({Key? key}) : super(key: key);
|
|
||||||
|
|
||||||
@override
|
|
||||||
State<MainLayout> createState() => _MainLayoutState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _MainLayoutState extends State<MainLayout> with TickerProviderStateMixin {
|
|
||||||
AnimationController? _animation;
|
|
||||||
List<UserContribution>? contributions;
|
|
||||||
List<StatForWeek>? starsByWeek;
|
|
||||||
List<StatForWeek>? forksByWeek;
|
|
||||||
List<StatForWeek>? pushesByWeek;
|
|
||||||
List<StatForWeek>? issueCommentsByWeek;
|
|
||||||
List<StatForWeek>? pullRequestActivityByWeek;
|
|
||||||
late List<WeekLabel> weekLabels;
|
|
||||||
|
|
||||||
static const double earlyInterpolatorFraction = 0.8;
|
|
||||||
static final EarlyInterpolator interpolator =
|
|
||||||
EarlyInterpolator(earlyInterpolatorFraction);
|
|
||||||
double animationValue = 1.0;
|
|
||||||
double interpolatedAnimationValue = 1.0;
|
|
||||||
bool timelineOverride = false;
|
|
||||||
|
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
|
|
||||||
createAnimation(0);
|
|
||||||
|
|
||||||
weekLabels = [];
|
|
||||||
weekLabels.add(WeekLabel.forDate(DateTime(2019, 2, 26), 'v1.2'));
|
|
||||||
weekLabels.add(WeekLabel.forDate(DateTime(2018, 12, 4), 'v1.0'));
|
|
||||||
// weekLabels.add(WeekLabel.forDate(new DateTime(2018, 9, 19), "Preview 2"));
|
|
||||||
weekLabels.add(WeekLabel.forDate(DateTime(2018, 6, 21), 'Preview 1'));
|
|
||||||
// weekLabels.add(WeekLabel.forDate(new DateTime(2018, 5, 7), "Beta 3"));
|
|
||||||
weekLabels.add(WeekLabel.forDate(DateTime(2018, 2, 27), 'Beta 1'));
|
|
||||||
weekLabels.add(WeekLabel.forDate(DateTime(2017, 5, 1), 'Alpha'));
|
|
||||||
weekLabels.add(WeekLabel(48, 'Repo Made Public'));
|
|
||||||
|
|
||||||
loadGitHubData();
|
|
||||||
}
|
|
||||||
|
|
||||||
void createAnimation(double startValue) {
|
|
||||||
_animation?.dispose();
|
|
||||||
_animation = AnimationController(
|
|
||||||
value: startValue,
|
|
||||||
duration: const Duration(milliseconds: 14400),
|
|
||||||
vsync: this,
|
|
||||||
)..repeat();
|
|
||||||
_animation!.addListener(() {
|
|
||||||
setState(() {
|
|
||||||
if (!timelineOverride) {
|
|
||||||
animationValue = _animation!.value;
|
|
||||||
interpolatedAnimationValue = interpolator.get(animationValue);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
// Combined contributions data
|
|
||||||
List<DataSeries> dataToPlot = [];
|
|
||||||
if (contributions != null) {
|
|
||||||
List<int> series = [];
|
|
||||||
for (UserContribution userContrib in contributions!) {
|
|
||||||
for (int i = 0; i < userContrib.contributions.length; i++) {
|
|
||||||
ContributionData data = userContrib.contributions[i];
|
|
||||||
if (series.length > i) {
|
|
||||||
series[i] = series[i] + data.add;
|
|
||||||
} else {
|
|
||||||
series.add(data.add);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dataToPlot.add(DataSeries('Added Lines', series));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (starsByWeek != null) {
|
|
||||||
dataToPlot
|
|
||||||
.add(DataSeries('Stars', starsByWeek!.map((e) => e.stat).toList()));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (forksByWeek != null) {
|
|
||||||
dataToPlot
|
|
||||||
.add(DataSeries('Forks', forksByWeek!.map((e) => e.stat).toList()));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pushesByWeek != null) {
|
|
||||||
dataToPlot
|
|
||||||
.add(DataSeries('Pushes', pushesByWeek!.map((e) => e.stat).toList()));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (issueCommentsByWeek != null) {
|
|
||||||
dataToPlot.add(DataSeries(
|
|
||||||
'Issue Comments', issueCommentsByWeek!.map((e) => e.stat).toList()));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pullRequestActivityByWeek != null) {
|
|
||||||
dataToPlot.add(DataSeries('Pull Request Activity',
|
|
||||||
pullRequestActivityByWeek!.map((e) => e.stat).toList()));
|
|
||||||
}
|
|
||||||
|
|
||||||
LayeredChart layeredChart =
|
|
||||||
LayeredChart(dataToPlot, weekLabels, interpolatedAnimationValue);
|
|
||||||
|
|
||||||
const double timelinePadding = 60.0;
|
|
||||||
|
|
||||||
var timeline = Timeline(
|
|
||||||
numWeeks: dataToPlot.isNotEmpty ? dataToPlot.last.series.length : 0,
|
|
||||||
animationValue: interpolatedAnimationValue,
|
|
||||||
weekLabels: weekLabels,
|
|
||||||
mouseDownCallback: (double xFraction) {
|
|
||||||
setState(() {
|
|
||||||
timelineOverride = true;
|
|
||||||
_animation?.stop();
|
|
||||||
interpolatedAnimationValue = xFraction;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
mouseMoveCallback: (double xFraction) {
|
|
||||||
setState(() {
|
|
||||||
interpolatedAnimationValue = xFraction;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
mouseUpCallback: () {
|
|
||||||
setState(() {
|
|
||||||
timelineOverride = false;
|
|
||||||
createAnimation(
|
|
||||||
interpolatedAnimationValue * earlyInterpolatorFraction);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
Column mainColumn = Column(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
mainAxisSize: MainAxisSize.max,
|
|
||||||
children: [
|
|
||||||
Expanded(child: layeredChart),
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.only(
|
|
||||||
left: timelinePadding,
|
|
||||||
right: timelinePadding,
|
|
||||||
bottom: timelinePadding),
|
|
||||||
child: timeline,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
|
|
||||||
return Container(
|
|
||||||
color: Constants.backgroundColor,
|
|
||||||
child:
|
|
||||||
Directionality(textDirection: TextDirection.ltr, child: mainColumn),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_animation?.dispose();
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
Future loadGitHubData() async {
|
|
||||||
String contributorsJsonStr =
|
|
||||||
(await http.get(Uri.parse('assets/github_data/contributors.json')))
|
|
||||||
.body;
|
|
||||||
List jsonObjs = jsonDecode(contributorsJsonStr) as List;
|
|
||||||
List<UserContribution> contributionList =
|
|
||||||
jsonObjs.map((e) => UserContribution.fromJson(e)).toList();
|
|
||||||
print(
|
|
||||||
'Loaded ${contributionList.length} code contributions to /flutter/flutter repo.');
|
|
||||||
|
|
||||||
int numWeeksTotal = contributionList[0].contributions.length;
|
|
||||||
|
|
||||||
String starsByWeekStr =
|
|
||||||
(await http.get(Uri.parse('assets/github_data/stars.tsv'))).body;
|
|
||||||
List<StatForWeek> starsByWeekLoaded =
|
|
||||||
summarizeWeeksFromTSV(starsByWeekStr, numWeeksTotal);
|
|
||||||
|
|
||||||
String forksByWeekStr =
|
|
||||||
(await http.get(Uri.parse('assets/github_data/forks.tsv'))).body;
|
|
||||||
List<StatForWeek> forksByWeekLoaded =
|
|
||||||
summarizeWeeksFromTSV(forksByWeekStr, numWeeksTotal);
|
|
||||||
|
|
||||||
String commitsByWeekStr =
|
|
||||||
(await http.get(Uri.parse('assets/github_data/commits.tsv'))).body;
|
|
||||||
List<StatForWeek> commitsByWeekLoaded =
|
|
||||||
summarizeWeeksFromTSV(commitsByWeekStr, numWeeksTotal);
|
|
||||||
|
|
||||||
String commentsByWeekStr =
|
|
||||||
(await http.get(Uri.parse('assets/github_data/comments.tsv'))).body;
|
|
||||||
List<StatForWeek> commentsByWeekLoaded =
|
|
||||||
summarizeWeeksFromTSV(commentsByWeekStr, numWeeksTotal);
|
|
||||||
|
|
||||||
String pullRequestActivityByWeekStr =
|
|
||||||
(await http.get(Uri.parse('assets/github_data/pull_requests.tsv')))
|
|
||||||
.body;
|
|
||||||
List<StatForWeek> pullRequestActivityByWeekLoaded =
|
|
||||||
summarizeWeeksFromTSV(pullRequestActivityByWeekStr, numWeeksTotal);
|
|
||||||
|
|
||||||
setState(() {
|
|
||||||
contributions = contributionList;
|
|
||||||
starsByWeek = starsByWeekLoaded;
|
|
||||||
forksByWeek = forksByWeekLoaded;
|
|
||||||
pushesByWeek = commitsByWeekLoaded;
|
|
||||||
issueCommentsByWeek = commentsByWeekLoaded;
|
|
||||||
pullRequestActivityByWeek = pullRequestActivityByWeekLoaded;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
List<StatForWeek> summarizeWeeksFromTSV(
|
|
||||||
String statByWeekStr, int numWeeksTotal) {
|
|
||||||
List<StatForWeek> loadedStats = [];
|
|
||||||
HashMap<int, StatForWeek> statMap = HashMap();
|
|
||||||
statByWeekStr.split('\n').forEach((s) {
|
|
||||||
List<String> split = s.split('\t');
|
|
||||||
if (split.length == 2) {
|
|
||||||
int weekNum = int.parse(split[0]);
|
|
||||||
statMap[weekNum] = StatForWeek(weekNum, int.parse(split[1]));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
print('Loaded ${statMap.length} weeks.');
|
|
||||||
|
|
||||||
// Convert into a list by week, but fill in empty weeks with 0
|
|
||||||
for (int i = 0; i < numWeeksTotal; i++) {
|
|
||||||
StatForWeek? starsForWeek = statMap[i];
|
|
||||||
if (starsForWeek == null) {
|
|
||||||
loadedStats.add(StatForWeek(i, 0));
|
|
||||||
} else {
|
|
||||||
loadedStats.add(starsForWeek);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return loadedStats;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
void main() {
|
|
||||||
runApp(const Center(child: MainLayout()));
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
abstract class Interpolator {
|
|
||||||
double get(double x);
|
|
||||||
}
|
|
||||||
|
|
||||||
class EarlyInterpolator implements Interpolator {
|
|
||||||
double amount;
|
|
||||||
|
|
||||||
EarlyInterpolator(this.amount);
|
|
||||||
|
|
||||||
@override
|
|
||||||
double get(double x) {
|
|
||||||
if (x >= amount) {
|
|
||||||
return 1;
|
|
||||||
} else {
|
|
||||||
return MathUtils.map(x, 0, amount, 0, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Point2D {
|
|
||||||
double x, y;
|
|
||||||
|
|
||||||
Point2D(this.x, this.y);
|
|
||||||
}
|
|
||||||
|
|
||||||
class MathUtils {
|
|
||||||
static double map(double x, double a, double b, double u, double v) {
|
|
||||||
double p = (x - a) / (b - a);
|
|
||||||
return u + p * (v - u);
|
|
||||||
}
|
|
||||||
|
|
||||||
static double clampedMap(double x, double a, double b, double u, double v) {
|
|
||||||
if (x <= a) {
|
|
||||||
return u;
|
|
||||||
} else if (x >= b) {
|
|
||||||
return v;
|
|
||||||
} else {
|
|
||||||
double p = (x - a) / (b - a);
|
|
||||||
return u + p * (v - u);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
static double clamp(double x, double a, double b) {
|
|
||||||
if (x < a) return a;
|
|
||||||
if (x > b) return b;
|
|
||||||
return x;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,227 +0,0 @@
|
|||||||
import 'dart:collection';
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'package:github_dataviz/constants.dart';
|
|
||||||
import 'package:github_dataviz/data/week_label.dart';
|
|
||||||
import 'package:github_dataviz/mathutils.dart';
|
|
||||||
|
|
||||||
typedef MouseDownCallback = void Function(double xFraction);
|
|
||||||
typedef MouseMoveCallback = void Function(double xFraction);
|
|
||||||
typedef MouseUpCallback = void Function();
|
|
||||||
|
|
||||||
class Timeline extends StatefulWidget {
|
|
||||||
final int numWeeks;
|
|
||||||
final double animationValue;
|
|
||||||
final List<WeekLabel> weekLabels;
|
|
||||||
|
|
||||||
final MouseDownCallback? mouseDownCallback;
|
|
||||||
final MouseMoveCallback? mouseMoveCallback;
|
|
||||||
final MouseUpCallback? mouseUpCallback;
|
|
||||||
|
|
||||||
const Timeline(
|
|
||||||
{required this.numWeeks,
|
|
||||||
required this.animationValue,
|
|
||||||
required this.weekLabels,
|
|
||||||
this.mouseDownCallback,
|
|
||||||
this.mouseMoveCallback,
|
|
||||||
this.mouseUpCallback,
|
|
||||||
Key? key})
|
|
||||||
: super(key: key);
|
|
||||||
|
|
||||||
@override
|
|
||||||
State<Timeline> createState() {
|
|
||||||
return _TimelineState();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class _TimelineState extends State<Timeline> {
|
|
||||||
HashMap<String, TextPainter> labelPainters = HashMap();
|
|
||||||
|
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
for (int year = 2015; year < 2020; year++) {
|
|
||||||
String yearLabel = '$year';
|
|
||||||
labelPainters[yearLabel] =
|
|
||||||
_makeTextPainter(Constants.timelineLineColor, yearLabel);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var weekLabel in widget.weekLabels) {
|
|
||||||
labelPainters[weekLabel.label] =
|
|
||||||
_makeTextPainter(Constants.milestoneTimelineColor, weekLabel.label);
|
|
||||||
labelPainters['${weekLabel.label}_red'] =
|
|
||||||
_makeTextPainter(Colors.redAccent, weekLabel.label);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return GestureDetector(
|
|
||||||
behavior: HitTestBehavior.translucent,
|
|
||||||
onHorizontalDragDown: (DragDownDetails details) {
|
|
||||||
final mouseDownCallback = widget.mouseDownCallback;
|
|
||||||
if (mouseDownCallback != null) {
|
|
||||||
mouseDownCallback(
|
|
||||||
_getClampedXFractionLocalCoords(context, details.globalPosition));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onHorizontalDragEnd: (DragEndDetails details) {
|
|
||||||
final mouseUpCallback = widget.mouseUpCallback;
|
|
||||||
if (mouseUpCallback != null) {
|
|
||||||
mouseUpCallback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onHorizontalDragUpdate: (DragUpdateDetails details) {
|
|
||||||
final mouseMoveCallback = widget.mouseMoveCallback;
|
|
||||||
if (mouseMoveCallback != null) {
|
|
||||||
mouseMoveCallback(
|
|
||||||
_getClampedXFractionLocalCoords(context, details.globalPosition));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
child: CustomPaint(
|
|
||||||
foregroundPainter: _TimelinePainter(
|
|
||||||
this, widget.numWeeks, widget.animationValue, widget.weekLabels),
|
|
||||||
child: Container(
|
|
||||||
height: 200,
|
|
||||||
)),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
TextPainter _makeTextPainter(Color color, String label) {
|
|
||||||
TextSpan span =
|
|
||||||
TextSpan(style: TextStyle(color: color, fontSize: 12), text: label);
|
|
||||||
TextPainter tp = TextPainter(
|
|
||||||
text: span,
|
|
||||||
textAlign: TextAlign.left,
|
|
||||||
textDirection: TextDirection.ltr);
|
|
||||||
tp.layout();
|
|
||||||
return tp;
|
|
||||||
}
|
|
||||||
|
|
||||||
double _getClampedXFractionLocalCoords(
|
|
||||||
BuildContext context, Offset globalOffset) {
|
|
||||||
final RenderBox box = context.findRenderObject() as RenderBox;
|
|
||||||
final Offset localOffset = box.globalToLocal(globalOffset);
|
|
||||||
return MathUtils.clamp(localOffset.dx / context.size!.width, 0, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class _TimelinePainter extends CustomPainter {
|
|
||||||
_TimelineState state;
|
|
||||||
|
|
||||||
late Paint mainLinePaint;
|
|
||||||
late 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.state, this.numWeeks, this.animationValue, this.weekLabels) {
|
|
||||||
mainLinePaint = Paint();
|
|
||||||
mainLinePaint.style = PaintingStyle.stroke;
|
|
||||||
mainLinePaint.color = Constants.timelineLineColor;
|
|
||||||
milestoneLinePaint = Paint();
|
|
||||||
milestoneLinePaint.style = PaintingStyle.stroke;
|
|
||||||
milestoneLinePaint.color = Constants.milestoneTimelineColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void paint(Canvas canvas, Size size) {
|
|
||||||
double labelHeight = 20;
|
|
||||||
double labelHeightDoubled = labelHeight * 2;
|
|
||||||
|
|
||||||
double mainLineY = size.height / 2;
|
|
||||||
canvas.drawLine(
|
|
||||||
Offset(0, mainLineY), Offset(size.width, mainLineY), mainLinePaint);
|
|
||||||
|
|
||||||
double currTimeX = size.width * animationValue;
|
|
||||||
canvas.drawLine(
|
|
||||||
Offset(currTimeX, labelHeightDoubled),
|
|
||||||
Offset(currTimeX, size.height - labelHeightDoubled),
|
|
||||||
milestoneLinePaint);
|
|
||||||
|
|
||||||
{
|
|
||||||
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 - 1) % 4 == 0) {
|
|
||||||
// Month
|
|
||||||
lineHeight = size.height / 8;
|
|
||||||
}
|
|
||||||
|
|
||||||
double currX = (week / numWeeks.toDouble()) * size.width;
|
|
||||||
if (lineHeight > 0) {
|
|
||||||
double margin = (size.height - lineHeight) / 2;
|
|
||||||
double currTimeXDiff = (currTimeX - currX) / size.width;
|
|
||||||
if (currTimeXDiff > 0) {
|
|
||||||
var mappedValue =
|
|
||||||
MathUtils.clampedMap(currTimeXDiff, 0, 0.025, 0, 1);
|
|
||||||
var lerpedColor = Color.lerp(Constants.milestoneTimelineColor,
|
|
||||||
Constants.timelineLineColor, mappedValue)!;
|
|
||||||
mainLinePaint.color = lerpedColor;
|
|
||||||
} else {
|
|
||||||
mainLinePaint.color = Constants.timelineLineColor;
|
|
||||||
}
|
|
||||||
canvas.drawLine(Offset(currX, margin),
|
|
||||||
Offset(currX, size.height - margin), mainLinePaint);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isYear) {
|
|
||||||
var yearLabel = '$yearNumber';
|
|
||||||
state.labelPainters[yearLabel]!
|
|
||||||
.paint(canvas, 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;
|
|
||||||
var timelineXDiff = (currTimeX - currX) / size.width;
|
|
||||||
double maxTimelineDiff = 0.08;
|
|
||||||
TextPainter textPainter = state.labelPainters[weekLabel.label]!;
|
|
||||||
if (timelineXDiff > 0 &&
|
|
||||||
timelineXDiff < maxTimelineDiff &&
|
|
||||||
animationValue < 1) {
|
|
||||||
var mappedValue =
|
|
||||||
MathUtils.clampedMap(timelineXDiff, 0, maxTimelineDiff, 0, 1);
|
|
||||||
var lerpedColor = Color.lerp(
|
|
||||||
Colors.redAccent, Constants.milestoneTimelineColor, mappedValue)!;
|
|
||||||
milestoneLinePaint.strokeWidth =
|
|
||||||
MathUtils.clampedMap(timelineXDiff, 0, maxTimelineDiff, 6, 1);
|
|
||||||
milestoneLinePaint.color = lerpedColor;
|
|
||||||
} else {
|
|
||||||
milestoneLinePaint.strokeWidth = 1;
|
|
||||||
milestoneLinePaint.color = Constants.milestoneTimelineColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
double lineHeight = size.height / 2;
|
|
||||||
double margin = (size.height - lineHeight) / 2;
|
|
||||||
canvas.drawLine(Offset(currX, margin),
|
|
||||||
Offset(currX, size.height - margin), milestoneLinePaint);
|
|
||||||
|
|
||||||
textPainter.paint(
|
|
||||||
canvas, Offset(currX, size.height - labelHeightDoubled));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
name: github_dataviz
|
|
||||||
|
|
||||||
environment:
|
|
||||||
sdk: ">=2.17.0-0 <3.0.0"
|
|
||||||
|
|
||||||
dependencies:
|
|
||||||
flutter:
|
|
||||||
sdk: flutter
|
|
||||||
intl: ^0.17.0
|
|
||||||
http: ^0.13.4
|
|
||||||
|
|
||||||
dev_dependencies:
|
|
||||||
flutter_lints: ^2.0.1
|
|
||||||
|
|
||||||
flutter:
|
|
||||||
assets:
|
|
||||||
- preview.png
|
|
||||||
- github_data/
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title></title>
|
|
||||||
<script defer src="main.dart.js" type="application/javascript"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in new issue