jackfiled/BlazorSvgComponents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add basic support for SVG generator.

Browse Source 
Add heat map example.
This commit is contained in:
jackfiled
2026-01-07 22:03:22 +08:00
parent da764bd99f
commit 909448d9f5
40 changed files with 3099 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
samples/HeatMap/Components/App.razor Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<ResourcePreloader />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["HeatMap.styles.css"]" />
<link rel="stylesheet" href="@Assets["tailwind.g.css"]" />
<ImportMap />
<HeadOutlet />
</head>
<body>
<Routes />
<ReconnectModal />
<script src="@Assets["_framework/blazor.web.js"]"></script>
</body>
</html>

9
samples/HeatMap/Components/Layout/MainLayout.razor Normal file
View File

@@ -0,0 +1,9 @@
@inherits LayoutComponentBase
@Body
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
<a href="." class="reload">Reload</a>
<span class="dismiss">🗙</span>
</div>

20
samples/HeatMap/Components/Layout/MainLayout.razor.css Normal file
View File

@@ -0,0 +1,20 @@
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}

31
samples/HeatMap/Components/Layout/ReconnectModal.razor Normal file
View File

@@ -0,0 +1,31 @@
<script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>
<dialog id="components-reconnect-modal" data-nosnippet>
<div class="components-reconnect-container">
<div class="components-rejoining-animation" aria-hidden="true">
<div></div>
<div></div>
</div>
<p class="components-reconnect-first-attempt-visible">
Rejoining the server...
</p>
<p class="components-reconnect-repeated-attempt-visible">
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
</p>
<p class="components-reconnect-failed-visible">
Failed to rejoin.<br />Please retry or reload the page.
</p>
<button id="components-reconnect-button" class="components-reconnect-failed-visible">
Retry
</button>
<p class="components-pause-visible">
The session has been paused by the server.
</p>
<button id="components-resume-button" class="components-pause-visible">
Resume
</button>
<p class="components-resume-failed-visible">
Failed to resume the session.<br />Please reload the page.
</p>
</div>
</dialog>

157
samples/HeatMap/Components/Layout/ReconnectModal.razor.css Normal file
View File

@@ -0,0 +1,157 @@
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
display: block;
}
#components-reconnect-modal {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p {
margin: 0;
text-align: center;
}
#components-reconnect-modal button {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active {
background-color: #6b9ed2;
}
.components-rejoining-animation {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}

63
samples/HeatMap/Components/Layout/ReconnectModal.razor.js Normal file
View File

@@ -0,0 +1,63 @@
// Set up event handlers
const reconnectModal = document.getElementById("components-reconnect-modal");
reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
const retryButton = document.getElementById("components-reconnect-button");
retryButton.addEventListener("click", retry);
const resumeButton = document.getElementById("components-resume-button");
resumeButton.addEventListener("click", resume);
function handleReconnectStateChanged(event) {
if (event.detail.state === "show") {
reconnectModal.showModal();
} else if (event.detail.state === "hide") {
reconnectModal.close();
} else if (event.detail.state === "failed") {
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
} else if (event.detail.state === "rejected") {
location.reload();
}
}
async function retry() {
document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
try {
// Reconnect will asynchronously return:
// - true to mean success
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
// - exception to mean we didn't reach the server (this can be sync or async)
const successful = await Blazor.reconnect();
if (!successful) {
// We have been able to reach the server, but the circuit is no longer available.
// We'll reload the page so the user can continue using the app as quickly as possible.
const resumeSuccessful = await Blazor.resumeCircuit();
if (!resumeSuccessful) {
location.reload();
} else {
reconnectModal.close();
}
}
} catch (err) {
// We got an exception, server is currently unavailable
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
}
}
async function resume() {
try {
const successful = await Blazor.resumeCircuit();
if (!successful) {
location.reload();
}
} catch {
location.reload();
}
}
async function retryWhenDocumentBecomesVisible() {
if (document.visibilityState === "visible") {
await retry();
}
}

36
samples/HeatMap/Components/Pages/Error.razor Normal file
View File

@@ -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;
}

125
samples/HeatMap/Components/Pages/Home.razor Normal file
View File

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

5
samples/HeatMap/Components/Pages/NotFound.razor Normal file
View File

@@ -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>

6
samples/HeatMap/Components/Routes.razor Normal file
View File

@@ -0,0 +1,6 @@
<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="routeData" Selector="h1" />
</Found>
</Router>

12
samples/HeatMap/Components/_Imports.razor Normal file
View File

@@ -0,0 +1,12 @@
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using HotMap
@using HotMap.Components
@using HotMap.Components.Layout
@using BlazorSvgComponents