Merge pull request #66 from apexcharts/fill-color

joadan · web-flow · commit 2834b661fe84 · 2022-03-31T15:25:43.000+02:00
Added Support for PointColor
diff --git a/docs/BlazorApexCharts.Docs.Server/Program.cs b/docs/BlazorApexCharts.Docs.Server/Program.cs
@@ -1,11 +1,5 @@
 using Microsoft.AspNetCore.Hosting;
-using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.Hosting;
-using Microsoft.Extensions.Logging;
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
 
 namespace BlazorApexCharts.Docs.Server
 {
diff --git a/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json b/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json
@@ -11,7 +11,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "launchUrl": "rangebar-charts#grouped",
+      "launchUrl": "pie-charts",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/BarCharts/BarCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/BarCharts/BarCharts.razor
@@ -14,6 +14,12 @@
         </Snippet>
     </CodeSnippet>
 
+    <CodeSnippet Title="Point Colors" ClassName=@typeof(PointColors).ToString()>
+        <Snippet>
+            <PointColors />
+        </Snippet>
+    </CodeSnippet>
+
     <CodeSnippet Title=Horizontal ClassName=@typeof(Horizontal).ToString()>
         <Snippet>
             <Horizontal />
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/BarCharts/PointColors.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/BarCharts/PointColors.razor
@@ -0,0 +1,30 @@
+﻿<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value">
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderByDescending="e=>e.Y"
+                         SeriesType="SeriesType.Bar"
+                         Color="#005ba3"
+                         PointColor="e=> GetColor(e)" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+
+    private string GetColor(Order order)
+    {
+        if (order.Country == "France")
+        {
+            return "#ffd500";
+        }
+        return null;
+    }
+
+
+    }
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/BubbleCharts/BubbleCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/BubbleCharts/BubbleCharts.razor
@@ -8,4 +8,11 @@
         </Snippet>
     </CodeSnippet>
 
+    
+    <CodeSnippet Title="Point Colors" ClassName=@typeof(PointColors).ToString()>
+        <Snippet>
+            <PointColors />
+        </Snippet>
+    </CodeSnippet>
+
 </DocExamples>
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/BubbleCharts/PointColors.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/BubbleCharts/PointColors.razor
@@ -0,0 +1,30 @@
+﻿<DemoContainer>
+    <ApexChart TItem="SupportIncident"
+               Title="Support Incidents">
+
+    @foreach (var data in incidents.GroupBy(e=> e.Source))
+   {
+         <ApexBubbleSeries TItem="SupportIncident"
+                    Items="data.ToList()"
+                    Name="@data.Key.ToString()"
+                     XValue="@(e => e.WeekName)"
+                    YAggregate="@(e => (decimal)e.Sum(e => e.LeadTime))"
+                    ZAggregate="@(e => (int)e.Average(e => e.Severity))"
+                    PointColor = "e=> GetPointColor(e) "/>
+   }
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidents(); 
+
+    private string GetPointColor(SupportIncident incident)
+    {
+        if (incident.Severity > 70)
+        {
+            return "#ba4e8e";
+        }
+        return null;
+    }
+
+    }
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/PieCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/PieCharts.razor
@@ -8,4 +8,10 @@
         </Snippet>
     </CodeSnippet>
 
+     <CodeSnippet Title="Point Color" ClassName=@typeof(PointColor).ToString()>
+        <Snippet>
+             <PointColor/>
+        </Snippet>
+    </CodeSnippet>
+
 </DocExamples>
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/PointColor.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/PointColor.razor
@@ -0,0 +1,39 @@
+﻿<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Gross Value">
+
+        <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.Y"
+                         PointColor="e=> GetPointColor(e)" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+
+    private string GetPointColor(Order order)
+    {
+        switch (order.Country)
+        {
+            case "France":
+                return "#e3001b";
+            case "Brazil":
+                return "#005ba3";
+            case "Sweden":
+                return "#ffd500";
+            case "Spain":
+                return "#00783c";
+                default:
+                 return "#87775d";
+        }
+
+
+       
+    }
+
+    }
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/RangeBarCharts/PointColors.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/RangeBarCharts/PointColors.razor
@@ -0,0 +1,32 @@
+﻿<DemoContainer>
+    <ApexChart TItem="SupportIncident"
+               Title="Incident Severity"
+               Options=options>
+
+        <ApexRangeSeries TItem="SupportIncident"
+                         Items="incidents"
+                         XValue="e=> e.Source.ToString()"
+                         YValue="e=> e.Severity"
+                         PointColor="e=> e.PointColor" />
+
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidentsForRange();
+    private ApexChartOptions<SupportIncident> options;
+
+    protected override void OnInitialized()
+    {
+        options = new ApexChartOptions<SupportIncident>
+            {
+                PlotOptions = new PlotOptions
+                {
+                    Bar = new PlotOptionsBar
+                    {
+                        Horizontal = true
+                    }
+                }
+            };
+    }
+    }
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/RangeBarCharts/RangeBarCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/RangeBarCharts/RangeBarCharts.razor
@@ -20,4 +20,10 @@
         </Snippet>
     </CodeSnippet>
 
+        <CodeSnippet Title="Point Colors" ClassName=@typeof(PointColors).ToString()>
+        <Snippet>
+            <PointColors />
+        </Snippet>
+    </CodeSnippet>
+
 </DocExamples>
diff --git a/docs/BlazorApexCharts.Docs/Data/SampleData.cs b/docs/BlazorApexCharts.Docs/Data/SampleData.cs
@@ -111,7 +111,8 @@ public static List<SupportIncident> GetSupportIncidents(int severityMin = 0, int
             .RuleFor(o => o.Severity, f => f.Random.Number(severityMin, severityMax))
             .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.WeekNumber, f => f.Random.Number(1, 20))
+            .RuleFor(o => o.PointColor, f=> f.Internet.Color());
 
             var test = fakeIncidents.Generate(300);
             return test;
@@ -122,14 +123,14 @@ public static List<SupportIncident> GetSupportIncidentsForRange()
         {
             return new List<SupportIncident>
            {
-               new SupportIncident { Source = IncidentSource.Customer, Severity = 20},
-               new SupportIncident { Source = IncidentSource.Customer, Severity = 35},
-               new SupportIncident { Source = IncidentSource.Integration, Severity = 5},
-               new SupportIncident { Source = IncidentSource.Integration, Severity = 70},
-               new SupportIncident { Source = IncidentSource.Internal, Severity = 55},
-               new SupportIncident { Source = IncidentSource.Internal, Severity = 83},
-               new SupportIncident { Source = IncidentSource.ThridParty, Severity = 12},
-               new SupportIncident { Source = IncidentSource.ThridParty, Severity = 24},
+               new SupportIncident { Source = IncidentSource.Customer, Severity = 20, PointColor="#e3001b"},
+               new SupportIncident { Source = IncidentSource.Customer, Severity = 35,  PointColor="#e3001b"},
+               new SupportIncident { Source = IncidentSource.Integration, Severity = 5, PointColor="#005ba3"},
+               new SupportIncident { Source = IncidentSource.Integration, Severity = 70,PointColor="#005ba3"},
+               new SupportIncident { Source = IncidentSource.Internal, Severity = 55, PointColor="#ffd500"},
+               new SupportIncident { Source = IncidentSource.Internal, Severity = 83, PointColor="#ffd500"},
+               new SupportIncident { Source = IncidentSource.ThridParty, Severity = 12, PointColor="#00783c"},
+               new SupportIncident { Source = IncidentSource.ThridParty, Severity = 24, PointColor="#00783c"},
            };
         }
 
diff --git a/docs/BlazorApexCharts.Docs/Data/SupportIncident.cs b/docs/BlazorApexCharts.Docs/Data/SupportIncident.cs
@@ -7,6 +7,7 @@ public class SupportIncident
         public int LeadTime { get; set; }
         public int Severity { get; set; }
         public IncidentSource Source { get; set; }
+        public string PointColor { get; set; }
 
     }
     public enum IncidentSource
diff --git a/src/Blazor-ApexCharts/ApexChart.razor.cs b/src/Blazor-ApexCharts/ApexChart.razor.cs
@@ -58,6 +58,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         protected override void OnParametersSet()
         {
+            if (Options == null) { Options = new ApexChartOptions<TItem>(); }
             if (Options.Chart == null) { Options.Chart = new Chart(); }
 
             if (string.IsNullOrEmpty(chartId))
@@ -216,6 +217,14 @@ private void UpdateDataForNoAxisCharts()
 
             var noAxisSeries = Options.Series.First();
             Options.Labels = noAxisSeries.Data.Select(e => e.X?.ToString()).ToList();
+
+            var colors = noAxisSeries.Data.Where(e=> !string.IsNullOrWhiteSpace(e.FillColor)).Select(e => e.FillColor).ToList();
+            if(colors.Any())
+            {
+                Options.Colors = colors;
+            }
+           
+
         }
 
         private void FixLineDataSelection()
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/BubblePoint.cs b/src/Blazor-ApexCharts/Models/DataPoints/BubblePoint.cs
@@ -6,7 +6,8 @@ namespace ApexCharts
 {
     public class BubblePoint<TItem> : IDataPoint<TItem>
     {
-      
+        public string FillColor { get; set; }
+
         public object X { get; set; }
 
         [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
@@ -17,7 +18,6 @@ public class BubblePoint<TItem> : IDataPoint<TItem>
       
         [JsonIgnore]
         public IEnumerable<TItem> Items { get; set; }
-
-     
+    
     }
 }
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs b/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs
@@ -7,6 +7,7 @@ namespace ApexCharts
   
     public class DataPoint<TItem> : IDataPoint<TItem>
     {
+        public string FillColor { get; set; }
         public object X { get; set; }
         
         [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/IDataPoint.cs b/src/Blazor-ApexCharts/Models/DataPoints/IDataPoint.cs
@@ -6,6 +6,7 @@ public interface IDataPoint<TItem>
     {
         IEnumerable<TItem> Items { get; set; }
         object X { get; set; }
+        string FillColor { get; set; }
               
     }
 }
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/ListPoint.cs b/src/Blazor-ApexCharts/Models/DataPoints/ListPoint.cs
@@ -9,6 +9,7 @@ namespace ApexCharts
 {
     public class ListPoint<TItem> : IDataPoint<TItem>
     {
+        public string FillColor { get; set; }
         public object X { get; set; }
         [JsonIgnore(Condition = JsonIgnoreCondition.Never)]
         public IEnumerable<decimal?> Y { get; set; }
diff --git a/src/Blazor-ApexCharts/Series/ApexBaseSeries.cs b/src/Blazor-ApexCharts/Series/ApexBaseSeries.cs
@@ -1,6 +1,7 @@
 ﻿using Microsoft.AspNetCore.Components;
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Linq.Expressions;
 using System.Threading.Tasks;
 
@@ -16,6 +17,8 @@ public abstract class ApexBaseSeries<TItem> : ComponentBase where TItem : class
         [Parameter] public IEnumerable<TItem> Items { get; set; }
         [Parameter] public SeriesStroke Stroke { get; set; }
         [Parameter] public string Color { get; set; }
+
+        [Parameter] public Func<TItem, string> PointColor { get; set; }
         public async Task Toggle()
         {
             await Chart?.ToggleSeriesAsync(Name);
@@ -31,5 +34,17 @@ public async Task Hide()
             await Chart?.HideSeriesAsync(Name);
         }
 
+        public string GetPointColor(TItem item)
+        {
+            if (PointColor == null || item == null) { return null; }
+            return PointColor.Invoke(item);
+        }
+
+        public string GetPointColor(IEnumerable<TItem> items)
+        {
+            if (PointColor == null || items == null || !items.Any()) { return null; }
+            return PointColor.Invoke(items.First());
+        }
+
     }
 }
diff --git a/src/Blazor-ApexCharts/Series/ApexBubbleSeries.cs b/src/Blazor-ApexCharts/Series/ApexBubbleSeries.cs
@@ -11,7 +11,7 @@ public class ApexBubbleSeries<TItem> : ApexBaseSeries<TItem>, IApexSeries<TItem>
     {
         [Parameter] public Func<IEnumerable<TItem>, decimal> YAggregate { get; set; }
         [Parameter] public Func<IEnumerable<TItem>, decimal> ZAggregate { get; set; }
-        [Parameter] public Func< BubblePoint<TItem>, object> OrderBy { get; set; }
+        [Parameter] public Func<BubblePoint<TItem>, object> OrderBy { get; set; }
         [Parameter] public Func<BubblePoint<TItem>, object> OrderByDescending { get; set; }
 
         protected override void OnInitialized()
@@ -32,7 +32,8 @@ public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> item
                 X = d.Key,
                 Y = YAggregate.Invoke(d),
                 Z = ZAggregate.Invoke(d),
-                Items = d.ToList()
+                Items = d.ToList(),
+                FillColor = GetPointColor(d)
             });
 
             if (OrderBy != null)
diff --git a/src/Blazor-ApexCharts/Series/ApexPointSeries.cs b/src/Blazor-ApexCharts/Series/ApexPointSeries.cs
@@ -52,7 +52,7 @@ public ChartType GetChartType()
                 case SeriesType.Treemap:
                     return ChartType.Treemap;
                 default:
-                    throw new SystemException($"SeriesType {SeriesType} can not be converted to CartType");
+                    throw new SystemException($"SeriesType {SeriesType} can not be converted to ChartType");
             }
         }
 
@@ -66,7 +66,8 @@ public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> item
                 {
                     X = XValue.Invoke(e),
                     Y = YValue.Invoke(e),
-                    Items = new List<TItem> { e }
+                    Items = new List<TItem> { e },
+                    FillColor = GetPointColor(e)
                 });
 
             }
@@ -77,7 +78,8 @@ public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> item
                {
                    X = d.Key,
                    Y = YAggregate.Invoke(d),
-                   Items = d.ToList()
+                   Items = d.ToList(),
+                   FillColor = GetPointColor(d)
                });
             }
             else
diff --git a/src/Blazor-ApexCharts/Series/ApexRangeSeries.cs b/src/Blazor-ApexCharts/Series/ApexRangeSeries.cs

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`"IIS Express": {`
`12`	`12`	`"commandName": "IISExpress",`
`13`	`13`	`"launchBrowser": true,`
`14`		`- "launchUrl": "rangebar-charts#grouped",`
	`14`	`+ "launchUrl": "pie-charts",`
`15`	`15`	`"environmentVariables": {`
`16`	`16`	`"ASPNETCORE_ENVIRONMENT": "Development"`
`17`	`17`	`}`