Bug: Using dynamic options fails in v5.1.0

[thirstyape]

I recently updated my NuGet package from version 3.5.0 to version 5.1.0 and on any charts that use dynamic options an error occurs either right away or on data being changed. This worked without issue in 3.5.0.

Microsoft.JSInterop.JSException: TypeError: Cannot read properties of undefined (reading 'toString')
 ---> TypeError: Cannot read properties of undefined (reading 'toString')
   --- End of inner exception stack trace ---
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeJS(String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSInProcessRuntime.Invoke[IJSVoidResult](String identifier, Int64 targetInstanceId, Object[] args)
   at Microsoft.JSInterop.Implementation.JSInProcessObjectReference.Invoke[IJSVoidResult](String identifier, Object[] args)
   at Microsoft.JSInterop.JSInProcessObjectReferenceExtensions.InvokeVoid(IJSInProcessObjectReference jsObjectReference, String identifier, Object[] args)
   at ApexCharts.ApexChart`1.<InvokeVoidJsAsync>d__178[[my.component, my-project, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at ApexCharts.ApexChart`1.<RenderChartAsync>d__219[[my.component, my-project, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at ApexCharts.ApexChart`1.<OnAfterRenderAsync>d__175[[my.component, my-project, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

The chart is implemented as follows. I also tried changing the Items= to use a collection that is a property of the component; but that did not help.

<ApexChart TItem="GroupSummary" Height='"100%"' Options="GroupChartOptions(GetGroupName(group.Key), InputModel.From, InputModel.To)">
    <ApexPointSeries Name="Group Summary"
        Items="GetGroupDetails(group)"
        SeriesType="SeriesType.Donut"
        XValue="x => x.Name"
        YValue="x => (decimal)Math.Round(x.Total.TotalHours, 2)"
        ShowDataLabels="true"
        PointColor="x => x.Color" />
</ApexChart>

The options function looks like this.

private static ApexChartOptions<GroupSummary> GroupChartOptions(string? group, DateOnly from, DateOnly to) => new()
{
	Chart = new()
	{
		Toolbar = new()
		{
			Export = new()
			{
				Csv = new() { Filename = $"Group_Summary_{group}_{from:d}_to_{to:d}" },
				Png = new() { Filename = $"Group_Summary_{group}_{from:d}_to_{to:d}" },
				Svg = new() { Filename = $"Group_Summary_{group}_{from:d}_to_{to:d}" }
			}
		}
	},
	PlotOptions = new()
	{
		Pie = new PlotOptionsPie
		{
			Donut = new() { Labels = new() { Total = new() { Show = true, FontSize = "2.5rem" } } }
		}
	},
	Yaxis =
	[
		new() { DecimalsInFloat = 2 }
	]
};

[joadan]

Hi,

I believe I know what has changed, I'll take a look.
Please note that it's relly not dynamic in that sense, as it stands now every time the component asks for the options a new object is returned. This is will not autmatically re-render the chart, and also I don't believe that is the desired behavior.

I would not recomend set it up like this, It's better to have one chart options object per component.

[thirstyape]

The issue there is that I have several situations where I use a foreach loop. This is fairly common and the amount of datapoints is variable. Additionally, when supporting multiple grouping options the charts need to change as well. Using the @key= from below will force the razor to re-render provided a unique value is used.

@foreach (KeyValuePair<long, object> group in GetGroups()) 
{
    <div @key=group.Key>
        <ApexChart />
    </div>
}

Would your recommendation be to use a dictionary to store the options and datapoints?

[hgirma]

having similar exception as reported above, I don't have any code changes, just nuget update and the chart fails to load the second time around, it loads fine on first nav, but coming back to the page a second time around throws the exception.

What I noticed is that chart: id is missing the second time around

I tried disposing the chart when changing page after implementing IDisposable, but result is the same