Blazer! Blazer! Blazor is a new application for developers who have never worked with Blazor. Blazor is a new application for developers.


Video Address:
https://space.bilibili.com/48…


Blazor WebAssembly is a single-page application (SPA) framework for generating interactive client-side Web applications using.NET, using C# instead of JavaScript to write front-end code


Due to the limited space in this series of articles, part of the code has been omitted. The complete example code is:
https://github.com/TimChen44/…

Author: Chen Chaochao


Ant Design Blazor project contributor, has more than 10 years of experience, long term based on. NET technology stack architecture and product development work, now working in Chint Group.


Email address: [email protected]


Readers are welcome to contact me if you have any questions. We will make progress together.

I won’t talk about the use of charts, which are essential to making the system as good as possible. As a bonus point, we should also give our TODO reference a wave.

Chart control selection

Currently, there is no good Blazor native Chart control, which is one of the important tasks we need to improve the Blazor ecosystem in the future.

Blazor supports C# calls to JS, and vice versa, so there are a number of Blazor components available in the community that use this technique to reinstall existing JS versions of the Chart control.

Here I recommend that I package G2Plot’s Blazor component, ant-design-charts-blazor.

Document address: https://ant-design-blazor.git… Source address: https://github.com/ant-design… Technology implementation is introduced: https://zhuanlan.zhihu.com/p/… https://www.bilibili.com/vide…

Transform the ToDo

Refer to the component

  • By command or visual interfaceToDo.ClientaddAntDesign.Chartscomponent
$ dotnet add package AntDesign.Charts

  • inwwwroot/index.html(WebAssembly) orPages/_Host.razorIntroducing static files in (Server) :
<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
<script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
  • in_Imports.razorAdd a namespace to the
@using AntDesign.Charts

Adding the Charts namespace to the global reference has the advantage of omitting the full named path when used. However, please note that when a component in Chart has the same name with another component, both the Chart component and other components need to add the full named path. Considering that Chart does not use many pages, it is my custom not to add it
_Imports.razorIn the.

Statistics page

Let’s use a bar chart to chart the number of daily todos

ChartAmountDto.cs

Create an entity to display the data in the todo.shared project.

public class ChartAmountDto { public string Day { get; set; } public string Type { get; set; } public int Value { get; set; }}

The Day field stores the date text. Type stores importance information, including two values of “ordinary” and “important”, which is also used for grouping display in the chart. Value stores a specific number.

ChartController.cs

Create a new ChartController controller in the todo. Server project to provide the data needed for the chart.

[ApiController] [Route("api/[controller]/[action]")] public class ChartController { TodoContext Context; public ChartController(TodoContext context) { Context = context; } / / number of daily to-do public List < ChartAmountDto > GetAmountDto () {return Context. Task. GroupBy (x = > new {x.P lanTime, x.IsImportant }).Select(x => new ChartAmountDto() { Day = x.Key.PlanTime.ToString("yy-MM-dd"), Type = x.Key.IsImportant ? If (Value = x.count (),}).tolist (); }}

By grouping scheduled dates and importance, and then counting the grouping results, the interface returns a partial data structure as follows

[{" day ", "20-09-25", "value" : 2, "type" : "important"}, {" day ":" 20-10-10 ", "value" : 9, "type" : "important"}, {" day ", "20-10-11", "value" : 6, "type" : "important"}, {" day ":" 20-10-14 ", "value" : 2, "type" : "important"}, {" day ", "20-10-17", "value" : 6, "type" : "important"}, {" day ":" 21-01-28 ", "value" : 1, "type" : "important"}]
Statistics.razor

Add statistics.razor to the todo.client project and fill in the following code

@page "/statistics"

<Spin Spinning="isLoading">
    <AntDesign.Charts.StackedColumn @ref="@amountChart" Config="amountConfig" TItem="ChartAmountDto" />
</Spin>

AntDesign. Charts. StackedColumn through the complete path to add the chart controls. @ref=” @amountchart “provides a way to refer to a component instance and then declare a variable to hold the component’s reference. Config=”amountConfig” configuration chart shows the configuration. Ttem =” ChartAmountDTO “defines the chart data type.

Add the statistics.razor.cs file.

public partial class Statistics { [Inject] public HttpClient Http { get; set; } bool isLoading = false; IChartComponent amountChart; readonly StackedColumnConfig amountConfig = new StackedColumnConfig { Title = new Title { Visible = true, }, ForceFit = true, Padding = "auto", xField = "day", yField = "value", YAxis = new ValueAxis {Min = 0,}, Meta = new {day = new {Alias = "date"},}, Color = new[] {"#ae331b", "#1a6179"}, StackField = "type" }; protected async override Task OnInitializedAsync() { isLoading = true; var amountData = await Http.GetFromJsonAsync<List<ChartAmountDto>>($"api/Chart/GetAmountDto"); await amountChart.ChangeData(amountData); await base.OnInitializedAsync(); isLoading = false; }}

IChartComponent amountChart; Variables are used to hold the component instance reference, which can then be used to perform various operations on the Chart component.

StackedColumnConfig AmountConfig defines the configuration of the stacking histogram

  • Text = "Daily statistics on the number of commissions"The header text is defined
  • XField = "day"The field name of the X-axis binding
  • YField = "value"The name of the Y-axis bound field

Note: The name of the bound field is case sensitive. Typically, the name of the DTO class in C # will be humped. However, by default, the name of the field will be humped.

  • Meta = new {day = new {Alias = "date"}}definedayThe text displayed on the state axis of the field
  • Color = new[] { "#ae331b", "#1a6179" }The color of the histogram. If not specified, the component uses the default color
  • StackField = "type"Define the stacked fields

The G2Plot component’s documentation is available for more information on the configuration of properties: https://antv-g2plot.gitee.io/…

MainLayout.razor

Add a statistics menu item

<MenuItem routerLink ="/statistics" routerMatch =" navLinkMatch.prefix "> statistics </MenuItem>
Running effect

Mini figure

Chart, chart, chart and chart, so we need to combine our chart with our to-do list.

We have scheduled dates and due dates in our agency records, so we can combine the current dates to create a mini-chart of the rest of the time.

TaskItem

Add the following code to TaskItem. Razor

<div class="chart">
    @{
        double progress = 0;
        if (Item.IsFinish == false && Item.Deadline.HasValue)
            progress = (double)Item.Deadline.Value.Subtract(DateTime.Now).TotalHours / (double)Item.Deadline.Value.Subtract(Item.PlanTime).TotalHours;
    }
    <AntDesign.Charts.RingProgress Data="progress" Config="progressConfig"></AntDesign.Charts.RingProgress>
</div>

We calculate the remaining time, and the result is between 0 and 1. Then we use the RingProgress component to display the default value of 0 if the task has already completed. AntDesign. Charts. RingProgress circular progress mini figure. Data=” Progress “chart value Config=” ProgressConfig” chart configuration

Finally, add some styles and beautify the location

.task-card-item .chart {
    margin-left: 8px;
}

Add a mini-diagram configuration in TaskItem. Razor.cs

readonly RingProgressConfig progressConfig = new RingProgressConfig
{
    Width = 30,
    Height = 30,
};
Running effect

As time passes and the remaining time decreases, the circular precision will be less and less blue

Time back to the trailer

Next time we get to the end of the TODO application, we’ll show you how to deploy a Blazor application with some virtual scenarios.

Learning materials

More information about Blazor learning: https://aka.ms/LearnBlazor