LayTec-AG / Plotly.Blazor

This library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Component Render Error

LiamDGuru opened this issue · comments

On initially rendering the chart everything is laid out perfectly works as expected. Upon leaving the page with the PlotlyChart and reentering, the Plotly component gets broken down and spread across the page. I'm not able to find a difference in the HTML but there are differences in the Computed values.

Below is the Code:

@rendermode InteractiveServer
@page "/scatter-plot-server"
@using Plotly.Blazor.Traces.ScatterGlLib
@using Plotly.Blazor.LayoutLib
@using Plotly.Blazor.LayoutLib.YAxisLib
@using System.Diagnostics
@using Title = Plotly.Blazor.LayoutLib.Title
<h3>Scatter Plot Server</h3>

<MudContainer>
    <PlotlyChart @rendermode="InteractiveServer" style="width: 70vw" @bind-Config="_config" @bind-Layout="_layout" @bind-Data="_data" @ref="_chart" AfterRender="AddData" />
</MudContainer>
<MudContainer>
    <MudButton @onclick="()=>AddData(100000)" Variant="Variant.Filled" Color="Color.Primary">Add Data</MudButton>
    <MudButton @onclick="()=>AddData(100000)" Variant="Variant.Filled" Color="Color.Primary">Live Data</MudButton>
</MudContainer>

@code {
    [CascadingParameter] private MudTheme Theme { get; set; } = new MudTheme();
    PlotlyChart _chart = new PlotlyChart();
    Config _config = new Config();
    Layout _layout = new Layout();
    IList<ITrace> _data = new List<ITrace>
    {
        new Plotly.Blazor.Traces.ScatterGl()
        {
            Name = "ScatterTrace",
            Mode = ModeFlag.Lines | ModeFlag.Markers,
            X = new List<object>{1,2,3},
            Y = new List<object>{1,2,3}
        },
        new Plotly.Blazor.Traces.ScatterGl()
        {
            Name = "ScatterTrace2",
            Mode = ModeFlag.Lines | ModeFlag.Markers,
            X = new List<object>{5,6,7},
            Y = new List<object>{5,6,7}
        }
    };
    protected override void OnInitialized()
    {
        _config = new Config
        {
            Responsive = true
        };
        _layout = new Layout
        {
            Title = new Title
            {
                Text = GetType().Name
            },
            PaperBgColor = Theme.PaletteDark.Surface.ToString(),
            PlotBgColor = Theme.PaletteDark.Surface.ToString(),
            Font = new Font
            {
                Color = Theme.PaletteDark.TextPrimary.ToString()
            },
            YAxis = new List<YAxis>
            {
                new()
                {
                    Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
                    {
                        Text = "ScatterTrace"
                    }
                },
                new()
                {
                    Title = new Plotly.Blazor.LayoutLib.YAxisLib.Title
                    {
                        Text = "ScatterTrace2"
                    },
                }
            }
        };
        _data = new List<ITrace>
        {
            new ScatterGl()
            {
                Name = "ScatterTrace",
                Mode = ModeFlag.Lines | ModeFlag.Markers,
                X = new List<object> { 1, 2, 3 },
                Y = new List<object> { 1, 2, 3 }
            },
            new ScatterGl()
            {
                Name = "ScatterTrace2",
                Mode = ModeFlag.Lines | ModeFlag.Markers,
                X = new List<object> { 5, 6, 7 },
                Y = new List<object> { 5, 6, 7 }
            }
        };
        base.OnInitialized();
    }

    private async void AddData()
    {
        await AddData(1000);
    }

    private async Task AddData(int count = 100)
    {
        if (_chart.Data.FirstOrDefault() is Plotly.Blazor.Traces.ScatterGl scatter)
        {
            var (x, y) = Helper.GenerateData(scatter.X.Count + 1, scatter.X.Count + 1 + count);
            await _chart.ExtendTrace(x, y, _data.IndexOf(scatter));
        }

        if (_chart.Data.Skip(1).FirstOrDefault() is Plotly.Blazor.Traces.ScatterGl scatter2)
        {
            var (x, y) = Helper.GenerateData(scatter2.X.Count + 1, scatter2.X.Count + 1 + count);
            await _chart.ExtendTrace(x, y, _data.IndexOf(scatter2));
        }
    }

image
image
image
image

Hitting F5 from the page rerenders back to working correctly. But after initial rendering, leaving the page and coming back has it broken.

Will check it out next week. :)

I cant reproduce it on my side :/