Merge pull request #363 from apexcharts/add-sample

added dynamic donut sample
apexcharts · Dec 19, 2023 · 33d2d69 · 33d2d69
2 parents 65a84af + 3e3d720
commit 33d2d69
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/DonutCharts/DonutCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/DonutCharts/DonutCharts.razor
@@ -1,16 +1,16 @@
 @page "/donut-charts"
 
-<DocExamples Title="Donut Charts" >
+<DocExamples Title="Donut Charts">
 
     <CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
         <Snippet>
-             <Basic/>
+            <Basic />
         </Snippet>
     </CodeSnippet>
 
-      <CodeSnippet Title=Total ClassName=@typeof(Total).ToString()>
+    <CodeSnippet Title=Total ClassName=@typeof(Total).ToString()>
         <Snippet>
-             <Total/>
+            <Total />
         </Snippet>
     </CodeSnippet>
 
@@ -20,4 +20,10 @@
         </Snippet>
     </CodeSnippet>
 
-</DocExamples>
+    <CodeSnippet Title="Dynamic" ClassName=@typeof(Dynamic).ToString()>
+        <Snippet>
+            <Dynamic />
+        </Snippet>
+    </CodeSnippet>
+
+</DocExamples>
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/DonutCharts/Dynamic.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/DonutCharts/Dynamic.razor
@@ -0,0 +1,61 @@
+<DemoContainer>
+    <Button class="mb-2" OnClick=UpdateChartSeries BackgroundColor="TablerColor.Primary">Update Series</Button>
+
+    @if (forecasts != null)
+    {
+        <ApexChart TItem="WeatherForecast"
+                   Title="Temp C"
+        @ref="chart">
+
+            <ApexPointSeries TItem="WeatherForecast"
+                             Items="forecasts"
+                             Name="Temp C"
+                             XValue="@(e => e.Summary)"
+                             YValue="@(e => e.TemperatureC)"
+                             SeriesType="SeriesType.Donut" />
+        </ApexChart>
+    }
+</DemoContainer>
+
+<div>
+    <Table Items="forecasts">
+        <Column Item="WeatherForecast" Property="e=> e.Summary" />
+        <Column Item="WeatherForecast" Property="e=> e.TemperatureC" />
+    </Table>
+</div>
+
+@code {
+    private List<WeatherForecast> forecasts { get; set; }
+    private ApexChart<WeatherForecast> chart;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync(2); // get small sample first
+
+        await base.OnInitializedAsync();
+    }
+
+    private async Task LoadDataAsync(int? limit)
+    {
+        var tempForecast = await SampleData.GetForecastAsync(DateTime.Today);
+
+        var groupedData = tempForecast.GroupBy(x => x.Summary)
+                          .Select(x => new WeatherForecast()
+                              {
+                                  Date = x.First().Date,
+                                  Summary = x.First().Summary,
+                                  TemperatureC = x.Sum(y => Math.Abs(y.TemperatureC)) // easier to compare with positive values
+                              })
+                          .ToList();
+
+        forecasts = limit.HasValue
+            ? groupedData.Take(limit.Value).ToList()
+            : groupedData.ToList();
+    }
+
+    private async Task UpdateChartSeries()
+    {
+        await LoadDataAsync(null); // get full sample on update
+               await chart.UpdateOptionsAsync(true, true, false);
+    }
+}