in web/github_dataviz/lib/timeline.dart [137:221]
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));
}
}
}