126 lines
4.4 KiB
Plaintext
126 lines
4.4 KiB
Plaintext
@page "/"
|
|
@using BlazorSvgComponents.Models
|
|
@using HotMap.Services
|
|
@using HotMap.Utils
|
|
@inject HeatMapService HeatMapInstance
|
|
|
|
<PageTitle>Heat Map!</PageTitle>
|
|
|
|
|
|
<div class="w-full">
|
|
<p class="text-2xl">
|
|
Heat map below:
|
|
</p>
|
|
<div>
|
|
<SvgContainer Width="800" Height="400" ViewBox="@GetHeatMapViewBox()">
|
|
<SvgGroup Transform="@(SvgTransform.CreateBuilder().Translate(23, 10).Build())">
|
|
@foreach ((int i, string text) in _monthIndexes)
|
|
{
|
|
<SvgText Content="@text" Transform="@MonthTextTransform(i)" Class="text-[10px]"/>
|
|
}
|
|
</SvgGroup>
|
|
<SvgGroup Transform="@(SvgTransform.CreateBuilder().Translate(2, 24).Build())">
|
|
@foreach ((string text, int i) in Weekdays.Select((s, i) => (s, i)))
|
|
{
|
|
<SvgText Content="@text" Transform="@(DayTextTransform(i))" Class="text-[10px]"/>
|
|
}
|
|
</SvgGroup>
|
|
<SvgGroup Transform="@(SvgTransform.CreateBuilder().Translate(25, 15).Build())">
|
|
@foreach ((HeatMapGroupByWeek itemsByItem, int i) in _groupsByWeek.WithIndex())
|
|
{
|
|
<SvgGroup Transform="@(WeekGridTransform(i))">
|
|
@foreach ((HeatMapItem item, int j) in itemsByItem.Items.WithIndex())
|
|
{
|
|
<Rectangle Width="@Width" Height="@Width" Transform="@(WeekdayGridTransform(j))"
|
|
Class="@(GetColorByContribution(item.Contributions))"/>
|
|
}
|
|
</SvgGroup>
|
|
}
|
|
</SvgGroup>
|
|
</SvgContainer>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private const int Width = 10;
|
|
private const int Spacing = 2;
|
|
|
|
private readonly record struct MonthIndex(int Pos, string Month);
|
|
|
|
private readonly List<MonthIndex> _monthIndexes = [];
|
|
private readonly List<HeatMapGroupByWeek> _groupsByWeek = [];
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
base.OnInitialized();
|
|
|
|
_groupsByWeek.AddRange(HeatMapInstance.GetItemsByWeek());
|
|
|
|
// To get the last item, we skip the first item.
|
|
// So index of current item is i + 1, and index of last item is i.
|
|
foreach ((HeatMapGroupByWeek group, int i) in _groupsByWeek.Skip(1).WithIndex())
|
|
{
|
|
if (group.Monday.Month == _groupsByWeek[i].Monday.Month)
|
|
{
|
|
continue;
|
|
}
|
|
|
|
// If current week item is not in the same month as the last week item.
|
|
_monthIndexes.Add(new MonthIndex(i + 1, Months[group.Monday.Month - 1]));
|
|
}
|
|
}
|
|
|
|
private SvgViewBox GetHeatMapViewBox()
|
|
{
|
|
int width = 25 + Width * _groupsByWeek.Count + Spacing * (_groupsByWeek.Count - 1);
|
|
int height = 15 + Width * 7 + Spacing * 6;
|
|
|
|
// Add an extra 10 pixels to make sure nothing is hidden.
|
|
return new SvgViewBox(0, 0, width + 10, height + 10);
|
|
}
|
|
|
|
private static readonly List<string> Months =
|
|
[
|
|
"1月", "2月", "3月", "4月", "5月", "6月",
|
|
"7月", "8月", "9月", "10月", "11月", "12月"
|
|
];
|
|
|
|
// private static readonly List<string> Weekdays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
|
|
private static readonly List<string> Weekdays = ["周一", "周三", "周五"];
|
|
|
|
private static SvgTransform WeekdayGridTransform(int y)
|
|
{
|
|
return SvgTransform.CreateBuilder().Translate(0, y * (Width + Spacing)).Build();
|
|
}
|
|
|
|
private static SvgTransform WeekGridTransform(int x)
|
|
{
|
|
return SvgTransform.CreateBuilder().Translate(x * (Width + Spacing)).Build();
|
|
}
|
|
|
|
private static SvgTransform MonthTextTransform(int x)
|
|
{
|
|
return SvgTransform.CreateBuilder().Translate(x * (Width + Spacing)).Build();
|
|
}
|
|
|
|
private static SvgTransform DayTextTransform(int y)
|
|
{
|
|
// We only show Monday, Wednesday and Friday, so there are two days between texts.
|
|
return SvgTransform.CreateBuilder().Translate(0, y * 2 * (Width + Spacing)).Build();
|
|
}
|
|
|
|
private static string GetColorByContribution(int contribution)
|
|
{
|
|
return contribution switch
|
|
{
|
|
0 => "fill-gray-200",
|
|
1 or 2 => "fill-blue-100",
|
|
3 or 4 => "fill-blue-300",
|
|
5 or 6 => "fill-blue-500",
|
|
7 or 8 => "fill-blue-700",
|
|
_ => "fill-blue-800"
|
|
};
|
|
}
|
|
|
|
}
|