Merge pull request #205 from apexcharts/add-xAxisLabelClick-event

Added XAxisLabelClick

Author: joadan

docs/BlazorApexCharts.Docs/Components/Events/XAxisLabelClick/Basic.razor

@@ -0,0 +1,49 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value"
+               OnXAxisLabelClick=XAxisLabelClick
+               @ref=chart>
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderByDescending="e=>e.X" />
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Net Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.NetValue))"
+                         OrderByDescending="e=>e.X" />
+    </ApexChart>
+</DemoContainer>
+
+@if (selectedData != null)
+{
+    <Alert BackgroundColor="TablerColor.Primary">
+        <h3>You clicked: @selectedData.Caption [@selectedData.LabelIndex] </h3>
+
+        @foreach (var seriesPoint in selectedData.SeriesPoints)
+        {
+            var dataPoint = (DataPoint<Order>)seriesPoint.DataPoint;
+            <div>@seriesPoint.Series.Name: @dataPoint.Y</div>
+        }
+
+    </Alert>
+}
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private XAxisLabelClicked<Order> selectedData;
+    private ApexChart<Order> chart;
+
+    private void XAxisLabelClick(XAxisLabelClicked<Order> data)
+    {
+        selectedData = data;
+
+    }
+}

docs/BlazorApexCharts.Docs/Components/Events/XAxisLabelClick/DateTime.razor

@@ -0,0 +1,102 @@
+<DemoContainer>
+    <ApexChart TItem="Order" Title="Orders Value"
+               XAxisType="XAxisType.Datetime"
+               Options="options"
+               OnXAxisLabelClick=XAxisLabelClick
+               Debug>
+
+        <ApexPointSeries TItem="Order"
+                         Items="SampleData.GetOrders()"
+                         Name="Net Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.OrderDate.FirstDayOfMonth())"
+                         YAggregate="@(e => e.Sum(e => e.NetValue))"
+                         OrderBy="e=>e.X" />
+
+        <ApexPointSeries TItem="Order"
+                         Items="SampleData.GetOrders()"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.OrderDate.FirstDayOfMonth())"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderBy="e=>e.X" />
+    </ApexChart>
+
+    @if (selectedData != null)
+    {
+        <Alert BackgroundColor="TablerColor.Primary">
+            <h3>You clicked: @selectedData.Caption [@selectedData.LabelIndex] </h3>
+
+            @foreach (var seriesPoint in selectedData.SeriesPoints)
+            {
+                var dataPoint = (DataPoint<Order>)seriesPoint.DataPoint;
+                <div>@seriesPoint.Series.Name - @dataPoint.Y</div>
+            }
+
+        </Alert>
+    }
+
+</DemoContainer>
+
+@code {
+    private ApexChartOptions<Order> options = new ApexCharts.ApexChartOptions<Order>();
+    private XAxisLabelClicked<Order> selectedData;
+    private void XAxisLabelClick(XAxisLabelClicked<Order> data)
+    {
+   
+        selectedData = data;
+
+    }
+
+    protected override void OnInitialized()
+    {
+
+        options.Debug = true;
+        options.ForecastDataPoints = new ForecastDataPoints
+            {
+                Count = 3,
+                DashArray = 4,
+                FillOpacity = 0.5,
+            };
+        options.Tooltip = new ApexCharts.Tooltip { X = new TooltipX { Format = @"MMMM \ yyyy" } };
+        options.Subtitle = new Subtitle { OffsetY = 15, Text = "DateTime sample with options" };
+        options.Tooltip = new ApexCharts.Tooltip
+            {
+                Y = new TooltipY
+                {
+                    Title = new TooltipYTitle { Formatter = @"function(name) { return name + ':' }" },
+                    Formatter = @"function(value, { series, seriesIndex, dataPointIndex, w }) { return '$' + value }"
+                },
+            };
+        options.Xaxis = new XAxis
+            {
+                Title = new AxisTitle
+                {
+                    OffsetY = 5,
+                    Text = "Month",
+                    Style = new AxisTitleStyle { FontSize = "14px", Color = "lightgrey" }
+                },
+                AxisBorder = new AxisBorder
+                {
+                    Height = 2
+                }
+            };
+        options.Yaxis = new List<YAxis>();
+        options.Yaxis.Add(new YAxis
+            {
+                DecimalsInFloat = 0,
+                Labels = new YAxisLabels { Rotate = -45, Style = new AxisLabelStyle { FontSize = "10px" } },
+                Title = new AxisTitle { Text = "Value", Style = new AxisTitleStyle { FontSize = "14px", Color = "lightgrey" } }
+            });
+
+        options.Annotations = new Annotations { Yaxis = new List<AnnotationsYAxis>() };
+        options.Annotations.Yaxis.Add(new AnnotationsYAxis
+            {
+                Y = 50000,
+                BorderWidth = 2,
+                StrokeDashArray = 5,
+                BorderColor = "red",
+                Label = new Label { Text = "Monthly Target" }
+            });
+    }
+}

docs/BlazorApexCharts.Docs/Components/Events/XAxisLabelClick/XAxisLabelClickDocs.razor

@@ -0,0 +1,26 @@
+@page "/events/xaxis-label-click"
+
+<DocExamples Title="X Axis Label Click">
+
+    <Description>
+        Click on a XAxis label to trigger an event
+    </Description>
+
+    <ChildContent>
+
+        <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
+            <Snippet>
+                <Basic />
+            </Snippet>
+        </CodeSnippet>
+
+        <CodeSnippet Title="DateTime" ClassName=@typeof(DateTime).ToString()>
+            <Snippet>
+                <DateTime />
+            </Snippet>
+        </CodeSnippet>
+    
+    </ChildContent>
+
+
+</DocExamples>

docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

@@ -111,6 +111,7 @@
                 <NavbarMenuItem Text="Legend Click" Href="events/legend-click" />
                 <NavbarMenuItem Text="Marker Click" Href="events/marker-click" />
                 <NavbarMenuItem Text="Selection" Href="events/selection" />
+                <NavbarMenuItem Text="XAxisLabelClick" Href="events/xaxis-label-click" />
                 <NavbarMenuItem Text="Zoomed" Href="events/zoomed" />
             </SubMenu>
         </NavbarMenuItem>

src/Blazor-ApexCharts/ApexChart.razor.cs

@@ -23,6 +23,8 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
         [Parameter] public object Width { get; set; }
         [Parameter] public object Height { get; set; }
 
+
+        [Parameter] public EventCallback<XAxisLabelClicked<TItem>> OnXAxisLabelClick { get; set; }
         [Parameter] public EventCallback<SelectedData<TItem>> OnMarkerClick { get; set; }
         [Parameter] public EventCallback<SelectedData<TItem>> OnDataPointSelection { get; set; }
         [Parameter] public EventCallback<HoverData<TItem>> OnDataPointEnter { get; set; }
@@ -349,7 +351,7 @@ public virtual async Task AppendDataAsync(IEnumerable<TItem> items)
 
         public virtual async Task ZoomXAsync(ZoomOptions zoomOptions)
         {
-            if(zoomOptions == null) {  throw new ArgumentNullException(nameof(zoomOptions)); }
+            if (zoomOptions == null) { throw new ArgumentNullException(nameof(zoomOptions)); }
             await JSRuntime.InvokeVoidAsync("blazor_apexchart.zoomX", Options.Chart.Id, zoomOptions.Start, zoomOptions.End);
         }
 
@@ -472,6 +474,7 @@ private void SetEvents()
             Options.HasDataPointLeave = OnDataPointLeave.HasDelegate;
             Options.HasLegendClick = OnLegendClicked.HasDelegate;
             Options.HasMarkerClick = OnMarkerClick.HasDelegate;
+            Options.HasXAxisLabelClick = OnXAxisLabelClick.HasDelegate;
             Options.HasSelection = OnSelection.HasDelegate;
             Options.HasBrushScrolled = OnBrushScrolled.HasDelegate;
             Options.HasZoomed = OnZoomed.HasDelegate;
@@ -652,6 +655,29 @@ public void JSLegendClicked(JSLegendClicked jsLegendClicked)
             OnLegendClicked.InvokeAsync(legendClicked);
         }
 
+        [JSInvokable("JSXAxisLabelClick")]
+        public void JSXAxisLabelClick(JSXAxisLabelClick jsXAxisLabelClick)
+        {
+            if (OnXAxisLabelClick.HasDelegate)
+            {
+                var data = new XAxisLabelClicked<TItem>();
+                data.LabelIndex = jsXAxisLabelClick.LabelIndex;
+                data.Caption = jsXAxisLabelClick.Caption;
+                data.SeriesPoints = new List<SeriesDataPoint<TItem>>();
+
+                foreach (var series in Options.Series)
+                {
+                    data.SeriesPoints.Add(new SeriesDataPoint<TItem>
+                    {
+                        Series = series,
+                        DataPoint = series.Data.ElementAt(jsXAxisLabelClick.LabelIndex)
+                    });
+                }
+
+                OnXAxisLabelClick.InvokeAsync(data);
+            }
+        }
+
         [JSInvokable("JSMarkerClick")]
         public void JSMarkerClick(JSDataPointSelection selectedDataPoints)
         {

src/Blazor-ApexCharts/Models/ApexChartOptions.cs

@@ -13,6 +13,8 @@ public class ApexChartOptions<TItem> where TItem : class
         public bool HasDataPointLeave { get; internal set; }
         public bool HasLegendClick { get; internal set; }
         public bool HasMarkerClick { get; internal set; }
+        public bool HasXAxisLabelClick { get; internal set; }
+       
         public bool HasSelection { get; internal set; }
         public bool HasBrushScrolled { get; internal set; }
         public bool HasZoomed { get; internal set; }

src/Blazor-ApexCharts/Models/DataPoints/JSDataPointSelection.cs

@@ -7,11 +7,15 @@ public class JSDataPointSelection
         public List<List<int?>> SelectedDataPoints { get; set; }
         public int DataPointIndex { get; set; }
         public int SeriesIndex { get; set; }
-
     }
 
+    public class JSXAxisLabelClick
+    {
+        public int LabelIndex { get; set; }
+        public string Caption { get; set; }
+    }
 
-    public class SelectedData<TItem> where TItem:class
+    public class SelectedData<TItem> where TItem : class
     {
         public ApexChart<TItem> Chart { get; set; }
         public Series<TItem> Series { get; set; }

src/Blazor-ApexCharts/Series/XAxisLabelClicked.cs

@@ -0,0 +1,20 @@
+using System.Collections.Generic;
+
+namespace ApexCharts
+{
+    public class XAxisLabelClicked<TItem> where TItem : class
+    {
+        public int LabelIndex { get; set; }
+        public string Caption { get; set; }
+        public List<SeriesDataPoint<TItem>> SeriesPoints { get; set; }
+
+    }
+
+    public class SeriesDataPoint<TItem> where TItem : class
+    {
+        public Series<TItem> Series { get; set; }
+        public IDataPoint<TItem> DataPoint { get; set; }
+  
+    }
+
+}

src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js

@@ -249,7 +249,17 @@
             }
         };
 
+        if (options.hasXAxisLabelClick === true) {
+            options.chart.events.xAxisLabelClick = function (event, chartContext, config) {
+                var data = {
+                    labelIndex: config.labelIndex,
+                    caption: event.target.innerHTML
+                };
+                dotNetObject.invokeMethodAsync('JSXAxisLabelClick', data);
+            }
+        };
 
+       
         if (options.hasLegendClick === true) {
             options.chart.events.legendClick = function (chartContext, seriesIndex, config) {
                 var legendClick = {