feat: Improve readability of history and streak charts

References: #432
pull/460/head
Christoph Hennemann 7 years ago
parent 178061475e
commit 2bf0cdb009

@ -73,14 +73,14 @@ public class HistoryChart extends ScrollableChart
private int colors[]; private int colors[];
private int textColors[];
private RectF baseLocation; private RectF baseLocation;
private int primaryColor; private int primaryColor;
private boolean isBackgroundTransparent; private boolean isBackgroundTransparent;
private int textColor;
private int reverseTextColor; private int reverseTextColor;
private boolean isEditable; private boolean isEditable;
@ -235,7 +235,7 @@ public class HistoryChart extends ScrollableChart
headerOverflow = 0; headerOverflow = 0;
previousMonth = ""; previousMonth = "";
previousYear = ""; previousYear = "";
pTextHeader.setColor(textColor); pTextHeader.setColor(textColors[1]);
updateDate(); updateDate();
GregorianCalendar currentDate = (GregorianCalendar) baseDate.clone(); GregorianCalendar currentDate = (GregorianCalendar) baseDate.clone();
@ -352,6 +352,9 @@ public class HistoryChart extends ScrollableChart
GregorianCalendar date, GregorianCalendar date,
int checkmarkOffset) int checkmarkOffset)
{ {
pSquareFg.setColor(textColors[0]);
if (checkmarkOffset >= checkmarks.length) pSquareBg.setColor(colors[0]); if (checkmarkOffset >= checkmarks.length) pSquareBg.setColor(colors[0]);
else else
{ {
@ -359,12 +362,15 @@ public class HistoryChart extends ScrollableChart
if(checkmark == 0) pSquareBg.setColor(colors[0]); if(checkmark == 0) pSquareBg.setColor(colors[0]);
else if(checkmark < target) else if(checkmark < target)
{ {
pSquareBg.setColor(isNumerical ? textColor : colors[1]); pSquareBg.setColor(isNumerical ? textColors[1] : colors[1]);
}
else
{
pSquareBg.setColor(colors[2]);
pSquareFg.setColor(textColors[2]);
} }
else pSquareBg.setColor(colors[2]);
} }
pSquareFg.setColor(reverseTextColor);
canvas.drawRect(location, pSquareBg); canvas.drawRect(location, pSquareBg);
String text = Integer.toString(date.get(Calendar.DAY_OF_MONTH)); String text = Integer.toString(date.get(Calendar.DAY_OF_MONTH));
canvas.drawText(text, location.centerX(), canvas.drawText(text, location.centerX(),
@ -411,7 +417,11 @@ public class HistoryChart extends ScrollableChart
colors[0] = Color.argb(16, 255, 255, 255); colors[0] = Color.argb(16, 255, 255, 255);
colors[1] = Color.argb(128, red, green, blue); colors[1] = Color.argb(128, red, green, blue);
colors[2] = primaryColor; colors[2] = primaryColor;
textColor = Color.WHITE;
textColors = new int[3];
textColors[2] = Color.WHITE;
textColors[1] = Color.WHITE;
textColors[0] = Color.WHITE;
reverseTextColor = Color.WHITE; reverseTextColor = Color.WHITE;
} }
else else
@ -420,9 +430,13 @@ public class HistoryChart extends ScrollableChart
colors[0] = res.getColor(R.attr.lowContrastTextColor); colors[0] = res.getColor(R.attr.lowContrastTextColor);
colors[1] = Color.argb(127, red, green, blue); colors[1] = Color.argb(127, red, green, blue);
colors[2] = primaryColor; colors[2] = primaryColor;
textColor = res.getColor(R.attr.mediumContrastTextColor);
reverseTextColor = textColors = new int[3];
res.getColor(R.attr.highContrastReverseTextColor); textColors[2] = res.getColor(R.attr.highContrastReverseTextColor);
textColors[1] = res.getColor(R.attr.mediumContrastTextColor);
textColors[0] = res.getColor(R.attr.lowContrastReverseTextColor);
reverseTextColor = res.getColor(R.attr.highContrastReverseTextColor);
} }
} }

@ -45,6 +45,7 @@ public class StreakChart extends View
private long maxLength; private long maxLength;
private int[] colors; private int[] colors;
private int[] textColors;
private RectF rect; private RectF rect;
@ -70,8 +71,6 @@ public class StreakChart extends View
private int textColor; private int textColor;
private int reverseTextColor;
public StreakChart(Context context) public StreakChart(Context context)
{ {
super(context); super(context);
@ -207,7 +206,7 @@ public class StreakChart extends View
float yOffset = rect.centerY() + 0.3f * em; float yOffset = rect.centerY() + 0.3f * em;
paint.setColor(reverseTextColor); paint.setColor(percentageToTextColor(percentage));
paint.setTextAlign(Paint.Align.CENTER); paint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(Long.toString(streak.getLength()), rect.centerX(), canvas.drawText(Long.toString(streak.getLength()), rect.centerX(),
yOffset, paint); yOffset, paint);
@ -217,7 +216,7 @@ public class StreakChart extends View
String startLabel = dateFormat.format(streak.getStart().toJavaDate()); String startLabel = dateFormat.format(streak.getStart().toJavaDate());
String endLabel = dateFormat.format(streak.getEnd().toJavaDate()); String endLabel = dateFormat.format(streak.getEnd().toJavaDate());
paint.setColor(textColor); paint.setColor(textColors[1]);
paint.setTextAlign(Paint.Align.RIGHT); paint.setTextAlign(Paint.Align.RIGHT);
canvas.drawText(startLabel, gap - textMargin, yOffset, paint); canvas.drawText(startLabel, gap - textMargin, yOffset, paint);
@ -252,8 +251,11 @@ public class StreakChart extends View
colors[2] = Color.argb(192, red, green, blue); colors[2] = Color.argb(192, red, green, blue);
colors[1] = Color.argb(96, red, green, blue); colors[1] = Color.argb(96, red, green, blue);
colors[0] = res.getColor(R.attr.lowContrastTextColor); colors[0] = res.getColor(R.attr.lowContrastTextColor);
textColor = res.getColor(R.attr.mediumContrastTextColor);
reverseTextColor = res.getColor(R.attr.highContrastReverseTextColor); textColors = new int[3];
textColors[2] = res.getColor(R.attr.highContrastReverseTextColor);
textColors[1] = res.getColor(R.attr.mediumContrastTextColor);
textColors[0] = res.getColor(R.attr.lowContrastReverseTextColor);
} }
private void initPaints() private void initPaints()
@ -271,6 +273,12 @@ public class StreakChart extends View
return colors[0]; return colors[0];
} }
private int percentageToTextColor(float percentage)
{
if (percentage >= 0.8f) return textColors[2];
return textColors[0];
}
private void updateMaxMinLengths() private void updateMaxMinLengths()
{ {
maxLength = 0; maxLength = 0;

@ -132,6 +132,10 @@
style="@style/About.Item" style="@style/About.Item"
android:text="Victor Yu"/> android:text="Victor Yu"/>
<TextView
style="@style/About.Item"
android:text="Christoph Hennemann"/>
</LinearLayout> </LinearLayout>
<LinearLayout <LinearLayout

Loading…
Cancel
Save