Merge pull request #63 from apexcharts/xaxis-groups

Added Support for XAxis groups

Author: joadan

docs/BlazorApexCharts.Docs/Components/ChartTypes/BarCharts/Basic.razor

@@ -22,4 +22,4 @@
 
 @code {
     private List<Order> Orders { get; set; } = SampleData.GetOrders();
-    }
+}

docs/BlazorApexCharts.Docs/Components/ChartTypes/BoxPlotCharts/Basic.razor

@@ -10,4 +10,4 @@
 
 @code {
     private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidents(30,60);
-    }
+    }

docs/BlazorApexCharts.Docs/Components/Features/Annotations/Basic.razor

@@ -27,6 +27,7 @@
 
     protected override void OnInitialized()
     {
+       
         options.Annotations = new Annotations
             {
                 Xaxis = new List<AnnotationsXAxis> { new AnnotationsXAxis

docs/BlazorApexCharts.Docs/Components/Features/Axis/AxisSamples.razor

@@ -0,0 +1,13 @@
+@page "/features/axis"
+
+<DocExamples Title="Axis">
+
+     <CodeSnippet Title="XAxis Groups" ClassName=@typeof(XAxisGroupsChart).ToString()>
+        <Snippet>
+            <XAxisGroupsChart />
+        </Snippet>
+    </CodeSnippet>
+
+
+
+</DocExamples>

docs/BlazorApexCharts.Docs/Components/Features/Axis/XAxisGroupsChart.razor

@@ -0,0 +1,44 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value"
+               Options=options>
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         SeriesType="SeriesType.Bar" />
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Net Value"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.NetValue))"
+                         SeriesType="SeriesType.Bar" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private ApexChartOptions<Order> options { get; set; } = new();
+
+    protected override void OnInitialized()
+    {
+        options.Xaxis = new XAxis
+            {
+                Group = new XAxisGroups
+                {
+                    Style = new XAxisGroupStyle { FontSize = "20px" },
+                    Groups = new List<XAxisGroup> {
+                        new XAxisGroup { Title = "Group 1", Cols = 2 },
+                        new XAxisGroup { Title = "Group 2", Cols = 2 }
+                    }
+                }
+            };
+
+        options.Legend = new Legend { Position = LegendPosition.Top };
+
+    }
+
+}

docs/BlazorApexCharts.Docs/Data/SampleData.cs

@@ -59,11 +59,19 @@ public static List<Order> GetOrders()
             orders.Add(new Order { CustomerName = "Ani Vent", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-17), GrossValue = 2134, DiscountPrecentage = 34, OrderType = OrderType.Phone });
             orders.Add(new Order { CustomerName = "Ani Vent", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-27), GrossValue = 11345, DiscountPrecentage = 12, OrderType = OrderType.Phone });
             orders.Add(new Order { CustomerName = "Ani Vent", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-124), GrossValue = 17002, DiscountPrecentage = 32, OrderType = OrderType.Mail });
-
             orders.Add(new Order { CustomerName = "Cali Inc", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-10), GrossValue = 77000, DiscountPrecentage = 17, OrderType = OrderType.Web });
             orders.Add(new Order { CustomerName = "Cali Inc", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-110), GrossValue = 120000, DiscountPrecentage = 23, OrderType = OrderType.Web });
             orders.Add(new Order { CustomerName = "Cali Inc", Country = "France", OrderDate = DateTimeOffset.Now.AddDays(-243), GrossValue = 44000, DiscountPrecentage = 8, OrderType = OrderType.Web });
 
+
+            orders.Add(new Order { CustomerName = "Chart Inc", Country = "Brazil", OrderDate = DateTimeOffset.Now.AddDays(-11), GrossValue = 2345, DiscountPrecentage = 11, OrderType = OrderType.Phone });
+            orders.Add(new Order { CustomerName = "Chart Inc", Country = "Brazil", OrderDate = DateTimeOffset.Now.AddDays(-14), GrossValue = 34567, DiscountPrecentage = 22, OrderType = OrderType.Phone });
+            orders.Add(new Order { CustomerName = "Chart Inc", Country = "Brazil", OrderDate = DateTimeOffset.Now.AddDays(-121), GrossValue = 45662, DiscountPrecentage = 23, OrderType = OrderType.Mail });
+            orders.Add(new Order { CustomerName = "Chart Inc", Country = "Brazil", OrderDate = DateTimeOffset.Now.AddDays(-11), GrossValue = 66000, DiscountPrecentage = 11, OrderType = OrderType.Web });
+            orders.Add(new Order { CustomerName = "Chart Inc", Country = "Brazil", OrderDate = DateTimeOffset.Now.AddDays(-90), GrossValue = 10000, DiscountPrecentage = 8, OrderType = OrderType.Web });
+            orders.Add(new Order { CustomerName = "Chart Inc", Country = "Brazil", OrderDate = DateTimeOffset.Now.AddDays(-123), GrossValue = 69000, DiscountPrecentage = 25, OrderType = OrderType.Web });
+
+
             return orders;
         }
 

docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

@@ -113,6 +113,7 @@
 
             <SubMenu>
                 <NavbarMenuItem Text="Annotations" Href="features/annotations" />
+                 <NavbarMenuItem Text="Axis" Href="features/axis" />
                 <NavbarMenuItem Text="Formatters" Href="features/formatters" />
                 <NavbarMenuItem Text="Legend" Href="features/legend" />
                 <NavbarMenuItem Text="Performance" Href="features/performance" />

src/Blazor-ApexCharts/Blazor-ApexCharts.csproj

@@ -21,6 +21,9 @@
 
 
   <ItemGroup>
+    <Content Update="wwwroot\js\apex-charts.debug.js">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Update="wwwroot\js\apex-charts.min.js">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>

src/Blazor-ApexCharts/Models/ApexChartOptions.cs

@@ -1294,6 +1294,29 @@ public class XAxis
         public AxisTitle Title { get; set; }
         public AxisTooltip Tooltip { get; set; }
         public XAxisType? Type { get; set; }
+        public XAxisGroups Group { get; set; }
+    }
+
+    public class XAxisGroups
+    {
+        public List<XAxisGroup> Groups { get; set; }
+        public XAxisGroupStyle Style { get; set; }
+
+    }
+
+    public class XAxisGroup
+    {
+        public string Title { get; set; }
+        public int Cols { get; set; }
+    }
+
+    public class XAxisGroupStyle
+    {
+        public List<string> Colors { get; set; }
+        public string FontSize { get; set; }
+        public string FontFamily { get; set; }
+        public string FontWeight { get; set; }
+        public string CssClass { get; set; }
     }
 
     public enum TickPlacement