Sankey Diagram rendering issue

Radzen.Blazor Components
1

In Server Interactive render mode there is an issue with the Sankey Diagram when (at least) placed inside a Tabs component. It works fine in WebAssembly like in your example, but in server interactive mode it renders rarely and seemingly at random and is blank the rest of the time.

The following is the test code I used:

<RadzenTabs>
    <Tabs>
        <RadzenTabsItem Text="Test0">
            <RadzenCard>
                <RadzenChart>
                    <RadzenPieSeries Data="@(flows)" Title="Targets" CategoryProperty="Target" ValueProperty="Value">
                        <RadzenSeriesDataLabels Visible="false" />
                    </RadzenPieSeries>
                </RadzenChart>
            </RadzenCard>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Test1">
            <RadzenSankeyDiagram TItem="FlowData"
                                 Data="@flows"
                                 SourceProperty="Source"
                                 TargetProperty="Target"
                                 ValueProperty="Value">
            </RadzenSankeyDiagram>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Test2">
            <RadzenCard>
                <RadzenSankeyDiagram TItem="FlowData"
                                     Data="@flows"
                                     SourceProperty="Source"
                                     TargetProperty="Target"
                                     ValueProperty="Value">
                </RadzenSankeyDiagram>
            </RadzenCard>
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

@code {
    public class FlowData
    {
        public string Source { get; set; } = null!;
        public string Target { get; set; } = null!;
        public double Value { get; set; }
    }

    private List<FlowData> flows = new List<FlowData>
    {
        new FlowData { Source = "A", Target = "C", Value = 10 },
        new FlowData { Source = "A", Target = "D", Value = 15 },
        new FlowData { Source = "B", Target = "C", Value = 20 },
        new FlowData { Source = "B", Target = "D", Value = 25 },
        new FlowData { Source = "C", Target = "E", Value = 15 },
        new FlowData { Source = "C", Target = "F", Value = 10 },
        new FlowData { Source = "C", Target = "G", Value = 5 },
        new FlowData { Source = "D", Target = "E", Value = 20 },
        new FlowData { Source = "D", Target = "F", Value = 15 },
        new FlowData { Source = "D", Target = "G", Value = 5 }
    };
}
2

Seems to work fine in the attached app.

sankey
Blazor9Server.zip (141.5 KB)

3

You're right, I found the issue. I hadn't updated the css files to go with the new update (we have a few color modifications and don't want to compile from sass every time, so we compile css in your project and copy it over with a few modifications).

I should have considered that earlier, but the inconsistency of it sometimes rendering and sometimes not was getting to me. That and the fact it worked on my WebAssembly test that had out of date css too, just sent me down the wrong rabbit hole haha.

Thanks so much for the help despite the answer being something dumb on my part. Love the new component! It works great for showing process/status flows.

image
image567×339 14.6 KB