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