Shulou(Shulou.com)06/01 Report--

In this issue, the editor will bring you about how to use Blazor technology to encapsulate G2Plot to achieve Charts components. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Blazor is a framework for generating interactive client-side Web UI using .NET. At present, the community has just started, and there are not many related components. Fortunately, a group of enthusiasts are working hard to build the community. As a member of the community, I have also come to contribute some content. Here I will share and share my Blazor component ant-design-charts-blazor after encapsulating G2Plot.

Ant-design-charts-blazor belongs to an open source project of Ant Design of Blazor, and our goal is to make the best implementation of Ant Design in the Blazor ecosystem. Let's take a look at the current implementation chart.

Installation and use

Project address:

Ant-design-blazor/ant-design-charts-blazor github.com

Install Nuget package reference

$dotnet add package AntDesign.Charts

Introduce static files in wwwroot/index.html (WebAssembly) or Pages/_Host.razor (Server):

Add a namespace to _ Imports.razor

@ using AntDesign.Charts

Finally, you can reference it in the .razor component!

@ code {

Object [] data = new object [] {

New {year= "1991", value= 3}

New {year= "1992", value= 4}

New {year= "1993", value= 3.5}

New {year= "1994", value= 5}

New {year= "1995", value= 4.9}

New {year= "1996", value= 6}

New {year= "1997", value= 7}

New {year= "1998", value= 9}

New {year= "1999", value= 13}

}

LineConfig config = new LineConfig ()

{

Title = new Title ()

{

Visible = true

Text = "curve line chart"

}

Description = new Description ()

{

Visible = true

Text = "replace broken lines with smooth curves."

}

Padding = "auto"

ForceFit = true

XField = "year"

YField = "value"

Smooth = true

}

}

The use of components does not change much compared with the original G2Plot, mainly for the characteristics of C # syntax to add strong type support, attribute naming rules in line with C # syntax habits and so on.

So this article does not want to talk about how to use, I would like to talk about some difficulties and implementation methods encountered in the process of G2Plot encapsulation, hoping to make some modest contribution to the Blazor community.

Encapsulation of Config object

G2Plot is to pass in a Config object to configure the rendering content of the chart, and only need to give the necessary parameters, all of which is designed very reasonably.

But when using C # to implement the problem, when the Config object is passed to JS through InvokeVoidAsync, the object will contain all the properties, which is superfluous for G2Plot. Some default properties will be overwritten by the empty attributes brought in, and there will be problems with the chart display.

Of course, the simplest thing is to remove the attribute with the value of Null from the Config. Hey, that's what I did. Remove attributes that have no value by recursively traversing all the properties in the object.

Function isEmptyObj (o) {

For (let attr in o) return! 1

Return! 0

}

Function processArray (arr) {

For (let I = arr.length-1; I > = 0; iMury -) {

If (arr [I] = null | | arr [I] = undefined) arr.splice (I, 1)

Else if (typeof arr [I] = = 'object') removeNullItem (arr [I], arr, I)

}

Return arr.length = = 0

}

Function proccessObject (o) {

For (let attr in o) {

If (o [attr] = null | | o [attr] = undefined) delete o [attr]

Else if (typeof o [attr] = = 'object') {

RemoveNullItem (o [attr])

If (isEmptyObj (oattr)) delete o [attr]

}

}

}

/ / clear items with no value

Function removeNullItem (o, arr, I) {

Let s = ({}) .toString.call (o)

If (s = ='[object Array]') {

If (processArray (o) = true) {

If (arr) arr.splice (1)

}

} else if (s = ='[object Object]') {

ProccessObject (o)

If (arr & & isEmptyObj (o)) arr.splice (I, 1)

}

}

A problem is solved, there is a problem, JS/TS is a weakly typed language, attributes in his objects can be added arbitrarily during instantiation, but not C #, he is defined by the dead constraints, which encountered the following two problems:

Some configuration properties cannot exhaust all property definitions.

And as the wrapper of the component, it is impossible to follow up the changes in G2Plot's definition of Config without jet lag.

To solve these two problems, we need a similar weakly typed object in C#. At this time, I took a fancy to object, which can be defined as any type. It would be beautiful to use it as a Config parameter once and for all.

The ideal is beautiful, the reality is cruel. If you use object, then the strong type of C # will be completely lost, there is no hint when writing the chart configuration, it is basically written blindly, it is terrible, and the elegance of C # is gone.

Then an idea came to mind, why not use two configurations, one is strongly typed, the other is object, and then merge them into the final configuration to G2Plot, perfect.

The basic principle is to compare and merge the configuration objects passed into JS one by one through a recursion. The JS implementation code is as follows

Function deepObjectMerge (source, target) {

For (var key in target) {

If (source [key] & & source[ key] .toString () = = "[object Object]") {

DeepObjectMerge (source [key], target [key])

} else {

Source [key] = target [key]

}

}

Return source

}

The method to use in Blazor is as follows (part of the code)

Example 1

@ code {

LineConfig config1 = new LineConfig ()

{

XField = "date"

YField = "value"

}

Object otherConfig1 = new

{

= new object []

{

New {

Visible = true

Data = new object [] {new {date = "2019-05-01", value = 4.9}, new {date = "2019-10-01"}}

Label = new

{

Visible = true

Field = "festival"

}

}

}

}

}

G2Plot object method call

The chart generated by Config is a static, inanimate dead object, and we need to give it life by calling some of its functions, such as updating configuration, updating data, setting highlights, and so on.

Then the problem arises: the InvokeAsync method provided by IJSRuntime can only return objects that can be serialized into json, and the objects obtained through new G2Plot do not belong to this list, so how to get G2Plot objects in C # code is a difficult problem.

Fortunately, Blazor provides us with an ElementReference object, which can only be used as a reference to a Html object, not as a JS object, which is a bit of a pity, but it assigns us a unique Id.

The first step is to get div's ElementReference

@ code {

Protected ElementReference Ref

}

The second step is to construct the G2Plot object and put it into a JS object called "chartsContainer", with Ref.Id as the index

Const plot = new G2Plot [type] (domRef, config)

Plot.render ()

Window.AntDesignCharts.chartsContainer [domId] = plot

Third, if you need to call the method of the G2Plot object, then directly take the Ref.Id to the "chartsContainer" to find the object and call it. Here is the implementation of the "changeData" method.

ChangeData (domId, data, all) {

If (window.AntDesignCharts.chartsContainer [domId] = = undefined) return

Window.AntDesignCharts.chartsContainer [domId] .changeData (data, all)

}

The fourth step is to clean up the unused objects in "chartsContainer" when the component is destroyed.

Public async void Dispose ()

Await JS.InvokeVoidAsync (InteropDestroy, Ref.Id)

}

So far, most of the functions have been completed, and there are still some functions that need to be further tackled.

The above is the editor for you to share how to use Blazor technology to encapsulate G2Plot to achieve Charts components, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.