feat: add basic support for SVG generator.

Add heat map example.
2026-01-07 22:03:22 +08:00
parent da764bd99f
commit 909448d9f5
40 changed files with 3099 additions and 2 deletions
--- a/samples/HeatMap/Components/Pages/Home.razor
+++ b/samples/HeatMap/Components/Pages/Home.razor
@@ -0,0 +1,125 @@
+@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"
+        };
+    }
+
+}