Attack! Blazor! 》Chapter 1 7. Charts

Time:2021-4-23

Attack! Blazor! 》It’s a video of blazor zero foundation introductory course, which I cooperated with Mr. Zhang Shanyou. This course can let a programmer who has never been in contact with blazor master the ability to develop blazor applications.
Video address:https://space.bilibili.com/48…
Blazor webassembly is a single page application (SPA) framework, which is used to generate interactive client-side web applications using. Net. It uses C # instead of JavaScript to write front-end code
Due to the limited space, some codes are omitted in this serieshttps://github.com/TimChen44/…

Author: Chen Chaochao
As a contributor of Ant Design blazor project, he has more than ten years of working experience and has been working on architecture and product development based on. Net technology stack for a long time. Now he works in Chint Group.
Email: [email protected]
You are welcome to contact me if you have any questions. We will make progress together.

I don’t want to talk about the role of the chart. If we want to make the system bigger, we need it. As a bonus item, we naturally need to quote todo.

Chart control selection

At present, there is no excellent blazor native chart control, which is one of the important tasks that we need to improve blazor ecology in the future.

However, there is no need to be disappointed. Blazor supports C # calling JS, and vice versa. Therefore, there are many blazor components in the community that can use this technology to repack the chart control of the existing JS version.

Here I recommend the blazor component ant design charts blazor after I encapsulate g2plot.

Document address:https://ant-design-blazor.git…
Source code address:https://github.com/ant-design…
Introduction of technology implementation mode:https://zhuanlan.zhihu.com/p/…
https://www.bilibili.com/vide…

Transform todo

Reference component

  • By command or visual interfaceToDo.Clientadd toAntDesign.Chartsassembly
$ dotnet add package AntDesign.Charts

Attack! Blazor! 》Chapter 1 7. Charts

  • staywwwroot/index.html(webassembly) orPages/_Host.razor(server) to introduce static files
<script></script>
<script></script>
  • stay_Imports.razorAdd a namespace to
@using AntDesign.Charts

Adding the charts namespace to the global reference has the advantage of omitting the full naming path when using it. However, please note that when the components in chart have the same name as other components, whether chart components or other components need to be supplemented with the full naming path. Considering that chart does not use many pages, I will not add it in my habit_Imports.razorIn the middle.

Statistics page

Let’s use the histogram to make a statistical chart of the number of daily tasks

ChartAmountDto.cs

stayToDo.SharedCreate entities to display data in a project.

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

DayField stores the date text.
TypeIt stores importance information, including two values of “normal” and “important”. This is also used for grouping display in charts.
ValueStore specific values.

ChartController.cs

stayToDo.ServerNew projectChartControllerThe controller is used to provide the data needed by the chart.

[ApiController]
[Route("api/[controller]/[action]")]
public class ChartController
{
    TodoContext Context;

    public ChartController(TodoContext context)
    {
        Context = context;
    }

    //Daily to do
    public List<ChartAmountDto> GetAmountDto()
    {
        return Context.Task.GroupBy(x => new { x.PlanTime, x.IsImportant }).Select(x => new ChartAmountDto()
        {
            Day = x.Key.PlanTime.ToString("yy-MM-dd"),
            Type = x. Key.IsImportant  ? normal: important,
            Value = x.Count(),
        }).ToList();
    }
}

By grouping the plan date and importance, and then counting the grouping results, the partial data structure returned by the interface is 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

stayToDo.ClientProject additionStatistics.razorAnd fill in the following code

@page "/statistics"

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

AntDesign.Charts.StackedColumnAdd chart controls through the full path.
@ref="@amountChart"Provides a way to refer to a component instance, and then declare a variable to store the component reference.
Config="amountConfig"The configuration chart shows the configuration.
TItem="ChartAmountDto"Define the chart data type.

add toStatistics.razor.csDocuments.

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,
            Text = "daily agent quantity statistics"
        },
        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;Variable is used to store the component instance reference, and then we can use this object to perform various operations on the chart component.

StackedColumnConfig amountConfigThe configuration of stacked histogram is defined

  • Text = "daily agent quantity statistics"The title text is defined
  • XField = "day"The field name of the x-axis binding
  • YField = "value"The field name of the y-axis binding

Note: the binding field name here is case sensitive. Generally, the dto field name of C # will adopt the big hump format. However, converting dto to JSON will change the field name to the small hump format by default, so pay attention to the difference of the field name here.

  • Meta = new {day = new {alias = date}}definitiondayThe text displayed on the state axis of the field
  • Color = new[] { "#ae331b", "#1a6179" }The color of the histogram. If not specified, the component will use the default color
  • StackField = "type"The stacked fields are defined

For more attribute configuration, please refer to the document of g2plot componenthttps://antv-g2plot.gitee.io/…

MainLayout.razor

add toStatisticsmenu item

<MenuItem RouterLink="/statistics" RouterMatch="NavLinkMatch.Prefix">
    Statistics
</MenuItem>
Operation effect

Attack! Blazor! 》Chapter 1 7. Charts

sparkline

Charts, charts, charts, so we need to combine our charts with our agent list.

Our agent record has planned date and deadline, so we can combine the current date to make a mini chart of the remaining time progress.

TaskItem

TaskItem.razorAdd the following code to the

<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 first calculate the remaining time, the result is between 0 and 1, and then use theRingProgressComponent display, if the task has been completed, the default value is 0.
AntDesign.Charts.RingProgressRound progress Mini chart.
Data="progress"Chart value
Config="progressConfig"Chart configuration

Finally, add some styles to beautify the position

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

stayTaskItem.razor.csAdd mini map configuration to

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

As time goes by, the remaining time decreases, and the blue part of the circular precision becomes less and less
Attack! Blazor! 》Chapter 1 7. Charts

Notice of next reply

Next time, we will welcome the final return of todo application. Let’s demonstrate how to deploy blazor application through some virtual scenes.

Learning materials

Learn more about blazor:https://aka.ms/LearnBlazor

Recommended Today

Analysis of super comprehensive MySQL statement locking (Part 1)

A series of articles: Analysis of super comprehensive MySQL statement locking (Part 1) Analysis of super comprehensive MySQL statement locking (Part 2) Analysis of super comprehensive MySQL statement locking (Part 2) Preparation in advance Build a system to store heroes of the Three KingdomsheroTable: CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY […]