Merge pull request #216 from apexcharts/add-group-points

joadan · web-flow · commit 505417b15423 · 2023-03-27T13:23:26.000+02:00
Add group points
diff --git a/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json b/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json
@@ -3,7 +3,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "launchUrl": "heatmap-charts",
+      "launchUrl": "features/group-points",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
diff --git a/docs/BlazorApexCharts.Docs/Components/Features/Data/ChartData.razor b/docs/BlazorApexCharts.Docs/Components/Features/Data/ChartData.razor
@@ -2,6 +2,7 @@
 
 <DocExamples Title="Chart Data">
 
+
     <CodeSnippet Title="Data Async" ClassName=@typeof(DataAsync).ToString()>
         <Snippet>
             <DataAsync />
diff --git a/docs/BlazorApexCharts.Docs/Components/Features/GroupPoints/Basic.razor b/docs/BlazorApexCharts.Docs/Components/Features/GroupPoints/Basic.razor
@@ -0,0 +1,19 @@
+﻿<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Gross Value"
+               XAxisType = "XAxisType.Category"
+               GroupPoints="new ApexCharts.GroupPoints { MaxCount = 4}">
+
+        <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" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrdersForGroup();
+}
diff --git a/docs/BlazorApexCharts.Docs/Components/Features/GroupPoints/Group.razor b/docs/BlazorApexCharts.Docs/Components/Features/GroupPoints/Group.razor
@@ -0,0 +1,25 @@
+﻿@page "/features/group-points"
+
+<DocExamples Title="Group Points">
+    <Description>
+     <Alert BackgroundColor="TablerColor.Info">
+         Exprimental          
+     </Alert>
+    </Description>
+    <ChildContent>
+    <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
+        <Snippet>
+            <Basic />
+        </Snippet>
+    </CodeSnippet>
+
+    <CodeSnippet Title="Group Details" ClassName=@typeof(GroupDetails).ToString()>
+        <Description>
+            Click on the bars to get details. The grouped bar contain the grouped points.
+        </Description>
+        <Snippet>
+            <GroupDetails />
+        </Snippet>
+    </CodeSnippet>
+    </ChildContent>
+</DocExamples>
diff --git a/docs/BlazorApexCharts.Docs/Components/Features/GroupPoints/GroupDetails.razor b/docs/BlazorApexCharts.Docs/Components/Features/GroupPoints/GroupDetails.razor
@@ -0,0 +1,71 @@
+﻿<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Gross Value"
+               XAxisType="XAxisType.Category"
+               GroupPoints="@(new ApexCharts.GroupPoints {PercentageThreshold = 2, Name="*Others*"})"
+               OnDataPointSelection="SelectDataPoint">
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Bar"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderByDescending="e=>e.Y"
+                         DataPointMutator="PointMutator" />
+    </ApexChart>
+
+    @if (selected != null)
+    {
+        var point = (DataPoint<Order>)selected.DataPoint;
+
+        <h3 class="mt-3">@point.X - @point.Y</h3>
+
+        @if (point.GroupedPoints != null)
+        {
+            <ol>
+                @foreach (var gPoint in point.GroupedPoints)
+                {
+                    <li>@gPoint.X - @gPoint.Y</li>
+                }
+
+            </ol>
+        }
+    }
+
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrdersForGroup();
+    private SelectedData<Order> selected;
+    private void SelectDataPoint(SelectedData<Order> selected)
+    {
+        this.selected = selected;
+
+
+    }
+
+    private void PointMutator(DataPoint<Order> point)
+    {
+        switch (point.X.ToString())
+        {
+            case "France":
+                point.FillColor = "#e3001b";
+                break;
+            case "Brazil":
+                point.FillColor = "#005ba3";
+                break;
+            case "Sweden":
+                point.FillColor = "#ffd500";
+                break;
+            case "Spain":
+                point.FillColor = "#00783c";
+                break;
+            default:
+                point.FillColor = "#BFC9CA";
+                break;
+        }
+
+    }
+
+}
diff --git a/docs/BlazorApexCharts.Docs/Data/SampleData.cs b/docs/BlazorApexCharts.Docs/Data/SampleData.cs
@@ -46,7 +46,25 @@ public static List<Order> GetRandomOrders()
             return orders;
         }
 
-        public static List<Order> GetOrders()
+        public static List<Order> GetOrdersForGroup()
+        {
+            var orders = GetOrders();
+
+            orders.Add(new Order { CustomerName = "Expansion Inc", Country = "Andorra", OrderDate = DateTimeOffset.Now.AddDays(-12), GrossValue = 1234, DiscountPercentage = 21, OrderType = OrderType.Contract });
+            orders.Add(new Order { CustomerName = "Expansion Inc", Country = "Andorra", OrderDate = DateTimeOffset.Now.AddDays(-2), GrossValue = 12, DiscountPercentage = 14, OrderType = OrderType.Mail });
+
+            orders.Add(new Order { CustomerName = "Trick Corp.", Country = "San Marino", OrderDate = DateTimeOffset.Now.AddDays(-10), GrossValue = 3543, DiscountPercentage = 11, OrderType = OrderType.Web });
+            orders.Add(new Order { CustomerName = "Trick Corp.", Country = "San Marino", OrderDate = DateTimeOffset.Now.AddDays(-4), GrossValue = 126, DiscountPercentage = 17, OrderType = OrderType.Contract });
+
+            orders.Add(new Order { CustomerName = "Restless Group", Country = "Monaco", OrderDate = DateTimeOffset.Now.AddDays(-14), GrossValue = 1266, DiscountPercentage = 13, OrderType = OrderType.Web });
+
+
+
+            return orders;
+
+        }
+
+            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 });
diff --git a/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor b/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor
@@ -127,6 +127,7 @@
                 <NavbarMenuItem Text="Data" Href="features/chart-data" />
                 <NavbarMenuItem Text="Export" Href="features/export" />
                 <NavbarMenuItem Text="Formatters" Href="features/formatters" />
+                <NavbarMenuItem Text="Group Points" Href="features/group-points" />
                 <NavbarMenuItem Text="Legend" Href="features/legend" />
                 <NavbarMenuItem Text="Performance" Href="features/performance" />
                 <NavbarMenuItem Text="Size" Href="features/chart-size" />
diff --git a/src/Blazor-ApexCharts/ApexChart.razor.cs b/src/Blazor-ApexCharts/ApexChart.razor.cs
@@ -36,6 +36,7 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
 
         [Parameter] public EventCallback OnRendered { get; set; }
         [Parameter] public Func<decimal, string> FormatYAxisLabel { get; set; }
+        [Parameter] public GroupPoints GroupPoints { get; set; }
 
         private ChartSerializer chartSerializer = new();
         public List<IApexSeries<TItem>> Series => apexSeries;
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs b/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs
@@ -18,6 +18,11 @@ public class DataPoint<TItem> : IDataPoint<TItem>
         public IEnumerable<TItem> Items { get; set; }
 
         public object Extra { get; set; }
+
+
+        [JsonIgnore]
+        public List<DataPoint<TItem>> GroupedPoints { get; internal set; }
+
     }
 
     public class DataPointGoal
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/ListPoint.cs b/src/Blazor-ApexCharts/Models/DataPoints/ListPoint.cs
@@ -1,9 +1,5 @@
-﻿using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
+﻿using System.Collections.Generic;
 using System.Text.Json.Serialization;
-using System.Threading.Tasks;
 
 namespace ApexCharts
 {
diff --git a/src/Blazor-ApexCharts/Models/GroupValues.cs b/src/Blazor-ApexCharts/Models/GroupValues.cs
@@ -0,0 +1,27 @@
+﻿
+namespace ApexCharts
+{
+    public class GroupPoints
+    {
+        /// <summary>
+        /// Indicates the max number of points to show, excluding the grouped values.
+        /// </summary>
+        public int? MaxCount { get; set; }
+
+        /// <summary>
+        /// Indicates the min number of points to show, excluding the grouped values.
+        /// </summary>
+        public int? MinCount { get; set; }
+
+        /// <summary>
+        /// The precentage value that indicate if a value should be grouped.
+        /// </summary>
+        public decimal? PercentageThreshold { get; set; }
+
+        public string Name { get; set; } = "Other";
+       
+    }
+
+  
+
+}
diff --git a/src/Blazor-ApexCharts/Series/ApexPointSeries.cs b/src/Blazor-ApexCharts/Series/ApexPointSeries.cs
@@ -57,7 +57,7 @@ public ChartType GetChartType()
             }
         }
 
-        public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> items) 
+        public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> items)
         {
 
             if (items == null)
@@ -67,7 +67,7 @@ public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> item
 
 
             IEnumerable<DataPoint<TItem>> data;
-           
+
 
             if (YValue != null)
             {
@@ -96,6 +96,8 @@ public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> item
                 return new List<IDataPoint<TItem>>();
             }
 
+            data = GroupData(data.ToList());
+
 
             if (OrderBy != null)
             {
@@ -109,12 +111,89 @@ public IEnumerable<IDataPoint<TItem>> GenerateDataPoints(IEnumerable<TItem> item
             return UpdateDataPoints(data, DataPointMutator);
         }
 
+        private List<DataPoint<TItem>> GroupData(List<DataPoint<TItem>> dataPoints)
+        {
+            if (Chart.GroupPoints == null || !dataPoints.Any())
+            {
+                return dataPoints;
+            }
+
+            if (Chart.XAxisType != XAxisType.Category)
+            {
+                throw new Exception("If chart GroupValues is specified then XAxisType must be set to Category.");
+            }
+
+            if (Chart.GroupPoints.PercentageThreshold == null && Chart.GroupPoints.MaxCount == null)
+            {
+                return dataPoints;
+            }
+
+
+            var newData = new List<DataPoint<TItem>>();
+            decimal? thresholdValue = null;
+            var maxCount = Chart.GroupPoints.MaxCount;
+            int currentCount = 0;
+            var groupedPoint = new DataPoint<TItem>
+            {
+                GroupedPoints = new List<DataPoint<TItem>>()
+            };
+
+            if (Chart.GroupPoints.PercentageThreshold != null)
+            {
+                thresholdValue = (decimal)(dataPoints.Sum(e => e.Y) * ((decimal)Chart.GroupPoints.PercentageThreshold / 100));
+            }
+
+            foreach (var dataPoint in dataPoints.OrderByDescending(e => e.Y))
+            {
+
+                if(ShouldGroup(maxCount, currentCount, dataPoint.Y, thresholdValue))
+                {
+                    groupedPoint.GroupedPoints.Add(dataPoint);
+                }
+                else
+                {
+                    newData.Add(dataPoint);
+                    currentCount++;
+                }
+            }
+
+            if (groupedPoint.GroupedPoints.Any())
+            {
+                groupedPoint.X = Chart.GroupPoints.Name;
+                groupedPoint.Y = groupedPoint.GroupedPoints.Sum(e => e.Y);
+                newData.Add(groupedPoint);
+            }
+
+            return newData;
+        }
+
+        private bool ShouldGroup(int? maxCount, int currentCount, decimal? currentValue, decimal? thresholdValue)
+        {
+            if(maxCount == null && thresholdValue == null)
+            {
+                return false;
+            }
+
+            if(maxCount != null && currentCount >= maxCount)
+            {
+                return true;
+            }
+
+            if (thresholdValue != null && currentValue < thresholdValue)
+            {
+                return true;
+            }
+            return false;
+
+       }
+
+
         public void Dispose()
         {
             GC.SuppressFinalize(this);
             Chart.RemoveSeries(this);
         }
 
-     
+
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`"IIS Express": {`
`4`	`4`	`"commandName": "IISExpress",`
`5`	`5`	`"launchBrowser": true,`
`6`		`- "launchUrl": "heatmap-charts",`
	`6`	`+ "launchUrl": "features/group-points",`
`7`	`7`	`"environmentVariables": {`
`8`	`8`	`"ASPNETCORE_ENVIRONMENT": "Development"`
`9`	`9`	`}`