Blazor.FamilyChart 0.0.0

Blazor Family Chart

This is a wrapper library for family-chart and it is only compatible with Blazor WASM.

Current family-chart version packaged in this library: 0.9.0.

Installation

Usage

First register Blazor.FamilyChart dependencies:

builder.Services.AddFamilyChart();

This library depends on the library Blazor.Core in which provides the feature to help serialize/deserialize C# callback to Javascript. To ensure Blazor.FamilyChart work correctly, you must call RegisterCallbackReviverAsync() from the Blazor.Core library.

var webHost = builder.Build();

await webHost.RegisterCallbackReviverAsync();
await webHost.RunAsync();

Now you can use FamilyChartComponent like this

<FamilyChartComponent
  ChartId="my-family"
  PostFirstRender="@ConfigureAsync"
  InitialData="@([new()
  {
    Id = "john",
    Data = new()
    {
      Gender = Gender.Male,
      Extensions = new Dictionary<string, object?> { ["firstName"] = "John", ["lastName"] = "Smith" }
    },
    Relationships = new(),
  }])"
  Style="width:100%;height:500px;margin:auto;background-color:rgb(33,33,33);color:#fff;"/>

@code {
  private async Task ConfigureAsync(FamilyChartComponent component)
  {
    await component.Chart.SetTransitionTimeAsync(1000);
    await component.Chart.SetSingleParentEmptyCardAsync(true, new() { Label = "ADD"} );
    await component.Chart.SetShowSiblingsOfMainAsync(true);
    await component.Chart.SetOrientationVerticalAsync();
    
    await component.CardHtml.SetCardDisplayAsync(["firstName", "lastName"]);
    await component.CardHtml.SetMiniTreeAsync(true);
    await component.CardHtml.SetCardDimAsync(null);
    await component.CardHtml.SetStyleAsync(Blazor.FamilyChart.Models.CardHtml.CardHtmlStyle.ImageCircleRect);
    await component.CardHtml.SetOnHoverPathToMainAsync();

    await component.EditTree.FixedAsync();
    await component.EditTree.SetFieldsAsync(["firstName", "lastName"]);
    await component.EditTree.SetEditFirstAsync(true);
    await component.EditTree.SetCardClickOpenAsync();

    await component.Chart.UpdateTreeAsync(new() { Initial = true });
  }
}

Serialize/deserialize derived types

If you have classes that inhereit from classes in this library, then you need to use the following extension method, UseTypeInfoResolver. This allows serializing your derived classes with all of their properties.

This method accepts a type resolver and this library includes PolymorphicTypeResolver out of the box so that you can get started quickly.

var webHost = builder
  .Build()
  .UseTypeInfoResolver<PolymorphicTypeResolver>(typeInfoResolver =>
  {
    typeInfoResolver.AddDerivedTypes<BaseClass>(typeof(DeriveClass));
  });

await webHost.RegisterCallbackReviverAsync();
await webHost.RunAsync();

Design

This library aims to expose the methods and functionality in family-chart as much as possible. Thus all methods and classes mirror with what is defined in family-chart.

The followings classes are what you would use to interact and configure your family chart.

• Chart.cs --> Chart.ts
• CardHtml.cs --> CardHtmlClass.ts
• EditTree.cs --> EditTree.ts

The methods in these classes mirror with the methods defined in the TS library. If there is a difference, it will be noted in the XML comment.

Extensions

There can be functionalities that aren't possible to do in Blazor (perhaps due to my lack of experience) or not implemented yet in the original family-chart. So in those cases, this library will define its own extension to satisfy those cases.

Those extensions will be defined in FamilyChartComponent so that it is separated from the "core" classes (mentioned above). Those core classes are meant to be 1-1 with the family-chart library. Thus anything that is custom, extra, etc... will be defined somewhere else like in FamilyChartComponent.