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.
MIT License
348 stars 51 forks source link

Component Render Error #416

Open LiamDGuru opened 6 months ago

LiamDGuru commented 6 months ago

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

LiamDGuru commented 6 months ago

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

sean-mcl commented 3 months ago

Will check it out next week. :)

sean-mcl commented 3 months ago

I cant reproduce it on my side :/