Merge pull request #273 from apexcharts/improve-methods

Improved methods
apexcharts · Aug 27, 2023 · 2e61399 · 2e61399
2 parents 987db09 + 04d85f7
commit 2e61399
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 51 deletions.
diff --git a/docs/BlazorApexCharts.Docs/Components/Features/ChartSize/Basic.razor b/docs/BlazorApexCharts.Docs/Components/Features/ChartSize/Basic.razor
@@ -1,22 +1,22 @@
 
-    <Row>
-        <RowCol Auto>
-            <label class="form-label">Width</label>
-            <input type="number" @bind=@width class="form-control" />
-        </RowCol>
-        <RowCol Auto>
-              <label class="form-label">Height</label>
-            <input type="number" @bind=@height class="form-control" />
-        </RowCol>
-    </Row>
-
-    <Row class="mt-2 mb-2">
-        <RowCol Auto>
-            <Button BackgroundColor="TablerColor.Primary" OnClick="UpdateSize">Update Size</Button>
-        </RowCol>
-    </Row>
-
-    <div style="overflow-x:scroll;overflow-y:hidden">
+<Row>
+    <RowCol Auto>
+        <label class="form-label">Width</label>
+        <input type="number" @bind=@width class="form-control" />
+    </RowCol>
+    <RowCol Auto>
+        <label class="form-label">Height</label>
+        <input type="number" @bind=@height class="form-control" />
+    </RowCol>
+</Row>
+
+<Row class="mt-2 mb-2">
+    <RowCol Auto>
+        <Button BackgroundColor="TablerColor.Primary" OnClick="UpdateSize">Update Size</Button>
+    </RowCol>
+</Row>
+
+<div style="overflow-x:scroll;overflow-y:hidden">
     <ApexChart TItem="Order"
                Title="Scatter Sample"
                Width="@width"
@@ -39,7 +39,7 @@
                          YAggregate="@(e => e.Sum(e => e.NetValue))"
                          OrderByDescending="e=>e.Y" />
     </ApexChart>
-    </div>
+</div>
 
 
 @code {
@@ -50,7 +50,6 @@
 
     private async Task UpdateSize()
     {
-        await Task.Yield();
         await chart.UpdateOptionsAsync(false, false, false);
     }
 

diff --git a/docs/BlazorApexCharts.Docs/Components/Methods/UpdateOptions/Basic.razor b/docs/BlazorApexCharts.Docs/Components/Methods/UpdateOptions/Basic.razor
@@ -58,14 +58,12 @@
     private async Task RenderChart()
     {
         ToogleColor();
-        await Task.Delay(10);
         await chart.RenderAsync();
     }
 
     private async Task UpdateOptions()
     {
         ToogleColor();
-        await Task.Delay(10);
         await chart.UpdateOptionsAsync(redrawPaths, animate, false);
     }
 }
diff --git a/docs/BlazorApexCharts.Docs/Components/Methods/UpdateOptions/MaintainZoom.razor b/docs/BlazorApexCharts.Docs/Components/Methods/UpdateOptions/MaintainZoom.razor
@@ -63,9 +63,7 @@
 
         title = "Order Net Value " + dateString;
         seriesName = "Gross Value " + dateString;
-
-        await Task.Yield(); // We need this in order to update the title and series name
-     
+
         await chart.UpdateOptionsAsync(false, false, false, zoomOptions);
     }
 }
diff --git a/docs/BlazorApexCharts.Docs/Components/Methods/UpdateSeries/Basic.razor b/docs/BlazorApexCharts.Docs/Components/Methods/UpdateSeries/Basic.razor
@@ -1,34 +1,59 @@
-<DemoContainer>
+
+<DemoContainer>
 
-     <Button class="mb-2" OnClick=UpdateChartSeries BackgroundColor="TablerColor.Primary">Update Series</Button>
+    <Button class="mb-2" OnClick=UpdateChartSeries BackgroundColor="TablerColor.Primary">Update Series</Button>
 
+    @if (forecasts != null)
+    {
+        <ApexChart TItem="WeatherForecast"
+                   Title="Temp C"
+                   XAxisType="XAxisType.Datetime"
+        @ref="chart">
+
+            <ApexPointSeries TItem="WeatherForecast"
+                             Items="forecasts"
+                             Name="Temp C"
+                             XValue="@(e => e.Date.ToUnixTimeMilliseconds())"
+                             YAggregate="@(e => e.Sum(f => f.TemperatureC))"
+                             SeriesType="SeriesType.Bar"
+                             Color="#005ba3" />
+        </ApexChart>
+    }
 
-    <ApexChart TItem="Order"
-               Title="Order Gross Value"
-     @ref=chart>
 
-        <ApexPointSeries TItem="Order"
-                         Items="orders"
-                         Name="Gross Value"
-                         SeriesType="SeriesType.Pie"
-                         XValue="@(e => e.Country)"
-                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
-                         OrderByDescending="e=>e.X" />
-    </ApexChart>
 </DemoContainer>
 
 <div>
-@message
+    <Table Items="forecasts">
+        <Column Item="WeatherForecast" Property="e=> e.Date">
+            <Template>
+                @context.Date.ToString("D")
+            </Template>
+        </Column>
+        <Column Item="WeatherForecast" Property="e=> e.TemperatureC" />
+        <Column Item="WeatherForecast" Property="e=> e.Summary" />
+    </Table>
 </div>
 @code {
-    private List<Order> orders { get; set; } = SampleData.GetOrders();
-    private ApexChart<Order> chart;
+    private List<WeatherForecast> forecasts { get; set; }
+    private ApexChart<WeatherForecast> chart;
     private string message;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDataAsync();
+
+        await base.OnInitializedAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        forecasts = (await SampleData.GetForecastAsync(DateTime.Today)).ToList();
+    }
+
     private async Task UpdateChartSeries()
     {
-        var order = orders.First();
-        message = order.Country;
-        order.GrossValue = order.GrossValue * (decimal)1.6; 
+        await LoadDataAsync();
         await chart.UpdateSeriesAsync(true);
     }
-    }
+}
diff --git a/docs/BlazorApexCharts.Docs/Components/Methods/UpdateSeries/FillColor.razor b/docs/BlazorApexCharts.Docs/Components/Methods/UpdateSeries/FillColor.razor
@@ -32,7 +32,6 @@
         var order = orders.First();
         message = order.Country;
         order.GrossValue = order.GrossValue * (decimal)1.6; 
-       // await chart.UpdateSeriesAsync(true);
         await chart.UpdateOptionsAsync(false, false, false);
     }
 

diff --git a/docs/BlazorApexCharts.Docs/Data/SampleData.cs b/docs/BlazorApexCharts.Docs/Data/SampleData.cs
@@ -2,21 +2,38 @@
 using Bogus;
 using System;
 using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
 
 namespace BlazorApexCharts.Docs
 {
     public static class SampleData
     {
+        private static readonly string[] Summaries = new[]
+{
+        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+    };
+
+        public static Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
+        {
+            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                Date = startDate.AddDays(index),
+                TemperatureC = Random.Shared.Next(-20, 55),
+                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+            }).ToArray());
+        }
+
         public static List<BoxPlotSample> GetBoxPlotData()
         {
 
             var now = DateTimeOffset.Now;
             var result = new List<BoxPlotSample>();
 
-            result.Add(new BoxPlotSample { Name = "Eva", EventDate=now.AddDays(-10), Min = 40, Q1 = 52, Median = 56.59m, Q3 = 60, Max = 63.85m } );
+            result.Add(new BoxPlotSample { Name = "Eva", EventDate = now.AddDays(-10), Min = 40, Q1 = 52, Median = 56.59m, Q3 = 60, Max = 63.85m });
             result.Add(new BoxPlotSample { Name = "Jonas", EventDate = now.AddDays(-9), Min = 43.66m, Q1 = 44.99m, Median = 51.35m, Q3 = 52.95m, Max = 59.42m });
             result.Add(new BoxPlotSample { Name = "Bart", EventDate = now.AddDays(-8), Min = 52.76m, Q1 = 57.35m, Median = 59.15m, Q3 = 63.03m, Max = 67.98m });
-            result.Add(new BoxPlotSample { Name = "Cecilia", EventDate = now.AddDays(-7), Min = 48m, Q1 = 49m, Median = 52m, Q3 = 62m, Max =68m });
+            result.Add(new BoxPlotSample { Name = "Cecilia", EventDate = now.AddDays(-7), Min = 48m, Q1 = 49m, Median = 52m, Q3 = 62m, Max = 68m });
             result.Add(new BoxPlotSample { Name = "Ann", EventDate = now.AddDays(-6), Min = 38m, Q1 = 41m, Median = 45m, Q3 = 52m, Max = 55m });
             return result;
         }
@@ -65,7 +82,7 @@ public static List<Order> GetOrdersForGroup()
 
         }
 
-            public static List<Order> GetOrders()
+        public static List<Order> GetOrders()
         {
             var orders = new List<Order>();
             orders.Add(new Order { CustomerName = "Odio Corporation", Country = "Sweden", OrderDate = DateTimeOffset.Now.AddDays(-12), GrossValue = 34531, DiscountPercentage = 21, OrderType = OrderType.Contract });
@@ -115,7 +132,7 @@ public static List<Project> GetProjects()
             result.Add(new Project { Name = "Design", StartDate = DateTime.Now.AddDays(-30), EndDate = DateTime.Now.AddDays(-10), Score = 20 });
             result.Add(new Project { Name = "Construct", StartDate = DateTime.Now.AddDays(-20), EndDate = DateTime.Now.AddDays(-5), Score = -12 });
             result.Add(new Project { Name = "Install", StartDate = DateTime.Now.AddDays(-14), EndDate = DateTime.Now.AddDays(0), Score = -4 });
-            result.Add(new Project { Name = "Train", StartDate = DateTime.Now.AddDays(-18), EndDate = DateTime.Now.AddDays(5),  Score = 26 });
+            result.Add(new Project { Name = "Train", StartDate = DateTime.Now.AddDays(-18), EndDate = DateTime.Now.AddDays(5), Score = 26 });
             return result;
 
         }
@@ -145,7 +162,7 @@ public static List<SupportIncident> GetSupportIncidents(int severityMin = 0, int
             .RuleFor(o => o.Source, f => f.PickRandom<IncidentSource>())
              .RuleFor(o => o.LeadTime, f => f.Random.Number(1, 10))
             .RuleFor(o => o.WeekNumber, f => f.Random.Number(1, 20))
-            .RuleFor(o => o.PointColor, f=> f.Internet.Color());
+            .RuleFor(o => o.PointColor, f => f.Internet.Color());
 
             var test = fakeIncidents.Generate(300);
             return test;

diff --git a/docs/BlazorApexCharts.Docs/Data/WeatherForecast.cs b/docs/BlazorApexCharts.Docs/Data/WeatherForecast.cs
@@ -0,0 +1,19 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace BlazorApexCharts.Docs
+{
+    public class WeatherForecast
+    {
+        public DateTime Date { get; set; }
+
+        public int TemperatureC { get; set; }
+
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+
+        public string Summary { get; set; }
+    }
+}
diff --git a/src/Blazor-ApexCharts/ApexChart.razor.cs b/src/Blazor-ApexCharts/ApexChart.razor.cs
@@ -663,6 +663,7 @@ public virtual async Task RemoveAnnotationAsync(string id)
         /// </remarks>
         public virtual async Task UpdateOptionsAsync(bool redrawPaths, bool animate, bool updateSyncedCharts, ZoomOptions zoom = null)
         {
+            await Task.Yield();
             PrepareChart();
             var json = Serialize(Options);
             await JSRuntime.InvokeVoidAsync("blazor_apexchart.updateOptions", Options.Chart.Id, json, redrawPaths, animate, updateSyncedCharts, zoom);
@@ -680,6 +681,7 @@ public virtual async Task UpdateOptionsAsync(bool redrawPaths, bool animate, boo
         /// </remarks>
         public virtual async Task UpdateSeriesAsync(bool animate = true)
         {
+            await Task.Yield();
             SetSeries();
             UpdateDataForNoAxisCharts();
             var jsonSeries = Serialize(Options.Series);
@@ -768,6 +770,7 @@ private void SetEvents()
 
         private async Task RenderChartAsync()
         {
+            await Task.Yield();
             forceRender = false;
             PrepareChart();
             var jsonOptions = Serialize(Options);