Merge pull request #196 from apexcharts/add-marker-click-event

Added MarkerClick
apexcharts · Jan 20, 2023 · 123aec3 · 123aec3
2 parents 60bfc46 + ff0656d
commit 123aec3
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 0 deletions.
diff --git a/docs/BlazorApexCharts.Docs/Components/Events/MarkerClick/Basic.razor b/docs/BlazorApexCharts.Docs/Components/Events/MarkerClick/Basic.razor
@@ -0,0 +1,42 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value"
+               OnMarkerClick=MarkerClick
+               @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.DataPoint.X  @selectedData.DataPoint.Items.Sum(e=> e.NetValue) (@selectedData.DataPoint.Items.Sum(e=> e.GrossValue))  </h3>
+    </Alert>
+}
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private SelectedData<Order> selectedData;
+    private ApexChart<Order> chart;
+
+    private void MarkerClick(SelectedData<Order> data)
+    {
+        selectedData = data;
+
+    }
+}
diff --git a/docs/BlazorApexCharts.Docs/Components/Events/MarkerClick/MarkerClick.razor b/docs/BlazorApexCharts.Docs/Components/Events/MarkerClick/MarkerClick.razor
@@ -0,0 +1,18 @@
+@page "/events/marker-click"
+
+<DocExamples Title="Marker Click">
+
+    <Description>
+        Click on a marker to trigger an event
+    </Description>
+
+    <ChildContent>
+        <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
+            <Snippet>
+                <Basic />
+            </Snippet>
+        </CodeSnippet>
+    </ChildContent>
+
+
+</DocExamples>
diff --git a/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor b/docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor
@@ -109,6 +109,7 @@
                 <NavbarMenuItem Text="Data Point Hover" Href="events/data-point-hover" />
                 <NavbarMenuItem Text="Data Point Selection" Href="events/data-point-selection" />
                 <NavbarMenuItem Text="Legend Click" Href="events/legend-click" />
+                <NavbarMenuItem Text="Marker Click" Href="events/marker-click" />
                 <NavbarMenuItem Text="Selection" Href="events/selection" />
                 <NavbarMenuItem Text="Zoomed" Href="events/zoomed" />
             </SubMenu>

diff --git a/src/Blazor-ApexCharts/ApexChart.razor.cs b/src/Blazor-ApexCharts/ApexChart.razor.cs
@@ -22,6 +22,8 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
         [Parameter] public bool Debug { get; set; }
         [Parameter] public object Width { get; set; }
         [Parameter] public object Height { 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; }
         [Parameter] public EventCallback<HoverData<TItem>> OnDataPointLeave { get; set; }
@@ -469,6 +471,7 @@ private void SetEvents()
             Options.HasDataPointEnter = OnDataPointEnter.HasDelegate || ApexPointTooltip != null;
             Options.HasDataPointLeave = OnDataPointLeave.HasDelegate;
             Options.HasLegendClick = OnLegendClicked.HasDelegate;
+            Options.HasMarkerClick = OnMarkerClick.HasDelegate;
             Options.HasSelection = OnSelection.HasDelegate;
             Options.HasBrushScrolled = OnBrushScrolled.HasDelegate;
             Options.HasZoomed = OnZoomed.HasDelegate;
@@ -649,6 +652,29 @@ public void JSLegendClicked(JSLegendClicked jsLegendClicked)
             OnLegendClicked.InvokeAsync(legendClicked);
         }
 
+        [JSInvokable("JSMarkerClick")]
+        public void JSMarkerClick(JSDataPointSelection selectedDataPoints)
+        {
+            if (OnMarkerClick.HasDelegate)
+            {
+                var series = Options.Series.ElementAt(selectedDataPoints.SeriesIndex);
+                var dataPoint = series.Data.ElementAt(selectedDataPoints.DataPointIndex);
+
+                var selection = new SelectedData<TItem>
+                {
+                    Chart = this,
+                    Series = series,
+                    DataPoint = dataPoint,
+                    IsSelected = selectedDataPoints.SelectedDataPoints?.Any(e => e != null && e.Any(e => e != null && e.HasValue)) ?? false,
+                    DataPointIndex = selectedDataPoints.DataPointIndex,
+                    SeriesIndex = selectedDataPoints.SeriesIndex
+                };
+
+                OnMarkerClick.InvokeAsync(selection);
+            }
+        }
+
+
         [JSInvokable("JSDataPointSelected")]
         public void JSDataPointSelected(JSDataPointSelection selectedDataPoints)
         {

diff --git a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
@@ -12,6 +12,7 @@ public class ApexChartOptions<TItem> where TItem : class
         public bool HasDataPointEnter { get; internal set; }
         public bool HasDataPointLeave { get; internal set; }
         public bool HasLegendClick { get; internal set; }
+        public bool HasMarkerClick { get; internal set; }
         public bool HasSelection { get; internal set; }
         public bool HasBrushScrolled { get; internal set; }
         public bool HasZoomed { get; internal set; }

diff --git a/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js b/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js
@@ -238,6 +238,18 @@
             }
         };
 
+        if (options.hasMarkerClick === true) {
+            options.chart.events.markerClick = function (event, chartContext, config) {
+                var selection = {
+                    dataPointIndex: config.dataPointIndex,
+                    seriesIndex: config.seriesIndex,
+                    selectedDataPoints: config.selectedDataPoints
+                }
+                dotNetObject.invokeMethodAsync('JSMarkerClick', selection);
+            }
+        };
+
+
         if (options.hasLegendClick === true) {
             options.chart.events.legendClick = function (chartContext, seriesIndex, config) {
                 var legendClick = {