feat: add basic support for SVG generator.

Add heat map example.

samples/HeatMap/Components/Pages/Error.razor

@@ -0,0 +1,36 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
+
+@code{
+    [CascadingParameter]
+    private HttpContext? HttpContext { get; set; }
+
+    private string? RequestId { get; set; }
+    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+}

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"
+        };
+    }
+
+}

samples/HeatMap/Components/Pages/NotFound.razor

@@ -0,0 +1,5 @@
+@page "/not-found"
+@layout MainLayout
+
+<h3>Not Found</h3>
+<p>Sorry, the content you are looking for does not exist.</p>