Added Legend Click Event

joadan · joadan · commit 7d49d5aef68e · 2022-02-20T21:15:11.000+01:00
diff --git a/docs/BlazorApexCharts.Docs/Components/Events/DataPointSelection/Basic.razor b/docs/BlazorApexCharts.Docs/Components/Events/DataPointSelection/Basic.razor
diff --git a/docs/BlazorApexCharts.Docs/Components/Events/DataPointSelection/DataPointSelection.razor b/docs/BlazorApexCharts.Docs/Components/Events/DataPointSelection/DataPointSelection.razor
@@ -1,15 +1,15 @@
-﻿@page "/chart-events"
+﻿@page "/events/data-point-selection"
 
-<DocExamples Title="Chart Events">
+<DocExamples Title="Data Point Selection">
 
     <Description>
         Click on a datapoint to trigger the event
     </Description>
 
     <ChildContent>
-        <CodeSnippet Title="Data point select" ClassName=@typeof(DataPointSelection).ToString()>
+        <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
             <Snippet>
-                <DataPointSelection />
+                <Basic />
             </Snippet>
         </CodeSnippet>
     </ChildContent>
diff --git a/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/Basic.razor b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/Basic.razor
@@ -0,0 +1,45 @@
+﻿<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value"
+               OnLegendClicked=LegendClicked
+               @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 (legendClicked != null)
+{
+    <Alert BackgroundColor="TablerColor.Primary">
+        <h3>You clicked series @legendClicked.Series.Name</h3>
+        <span>Collapsed: @legendClicked.Collapsed</span>
+    </Alert>
+
+
+
+}
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private LegendClicked<Order> legendClicked;
+    private ApexChart<Order> chart;
+
+    private void LegendClicked(LegendClicked<Order> legend)
+    {
+        legendClicked = legend;
+    }
+    }
diff --git a/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor
@@ -0,0 +1,18 @@
+﻿@page "/events/legend-click"
+
+<DocExamples Title="Legend Clicked">
+
+    <Description>
+        Click on Legend to trigger a 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
@@ -94,10 +94,16 @@
             </SubMenu>
         </NavbarMenuItem>
 
-        <NavbarMenuItem Href="chart-events" Text="Events">
+        <NavbarMenuItem Text="Events">
             <MenuItemIcon>
                 <Icon class="icon" Elements="@Icons.Bolt" />
             </MenuItemIcon>
+            <SubMenu>
+                <NavbarMenuItem Text="Data Point Selection" Href="events/data-point-selection" />
+                <NavbarMenuItem Text="Legend Click" Href="events/legend-click" />
+  
+                
+            </SubMenu>
         </NavbarMenuItem>
 
         <NavbarMenuItem Text="Features">
diff --git a/src/Blazor-ApexCharts/ApexChart.razor.cs b/src/Blazor-ApexCharts/ApexChart.razor.cs
@@ -1,4 +1,5 @@
-﻿using BlazorApexCharts;
+﻿using ApexCharts.Series;
+using BlazorApexCharts;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System;
@@ -20,6 +21,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<SelectedData<TItem>> OnDataPointSelection { get; set; }
+        [Parameter] public EventCallback<LegendClicked<TItem>> OnLegendClicked { get; set; }
+
         [Parameter] public EventCallback OnRendered { get; set; }
         [Parameter] public Func<decimal, string> FormatYAxisLabel { get; set; }
 
@@ -379,6 +382,14 @@ private void PrepareChart()
             FixLineDataSelection();
             UpdateDataForNoAxisCharts();
             SetDotNetFormatters();
+            SetEvents();
+        }
+
+        private void SetEvents()
+        {
+            Options.HasDataPointSelection = OnDataPointSelection.HasDelegate;
+            Options.HasLegendClick = OnLegendClicked.HasDelegate;
+
         }
 
         private async Task RenderChartAsync()
@@ -492,7 +503,27 @@ public string GetFormattedYAxisValue(object value)
         }
 
         [JSInvokable]
-        public void DataPointSelected(DataPointSelection<TItem> selectedDataPoints)
+        public void LegendClicked(JSLegendClicked jsLegendClicked)
+        {
+
+            var series = Options.Series.ElementAt(jsLegendClicked.SeriesIndex);
+            var legendClicked = new LegendClicked<TItem>
+            {
+                Series = series,
+                Collapsed = jsLegendClicked.Collapsed
+            };
+            //Invert if Toggle series is set to flase (default == true)
+            var toggleSeries = Options?.Legend?.OnItemClick?.ToggleDataSeries;
+            if (toggleSeries != false)
+            {
+                legendClicked.Collapsed = !legendClicked.Collapsed;
+            }
+
+            OnLegendClicked.InvokeAsync(legendClicked);
+        }
+
+        [JSInvokable]
+        public void DataPointSelected(JSDataPointSelection selectedDataPoints)
         {
             if (OnDataPointSelection.HasDelegate)
             {
@@ -501,9 +532,9 @@ public void DataPointSelected(DataPointSelection<TItem> selectedDataPoints)
 
                 var selection = new SelectedData<TItem>
                 {
-                    Series = series, 
+                    Series = series,
                     DataPoint = dataPoint,
-                    IsSelected = selectedDataPoints.SelectedDataPoints.Any(e=> e!= null && e.Any(e=> e != null && e.HasValue)),
+                    IsSelected = selectedDataPoints.SelectedDataPoints.Any(e => e != null && e.Any(e => e != null && e.HasValue)),
                 };
 
                 OnDataPointSelection.InvokeAsync(selection);
diff --git a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
@@ -7,6 +7,8 @@ namespace ApexCharts
     public class ApexChartOptions<TItem> where TItem : class
     {
         public bool Debug { get; set; }
+        public bool HasDataPointSelection { get; internal set; }
+        public bool HasLegendClick { get; internal set; }
 
         /// <summary>
         /// Annotations options
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/JSDataPointSelection.cs b/src/Blazor-ApexCharts/Models/DataPoints/JSDataPointSelection.cs
@@ -2,14 +2,12 @@
 
 namespace ApexCharts
 {
-    public class DataPointSelection<TItem> where TItem : class
+    public class JSDataPointSelection
     {
         public List<List<int?>> SelectedDataPoints { get; set; }
         public int DataPointIndex { get; set; }
         public int SeriesIndex { get; set; }
 
-        public IDataPoint<TItem> DataPoint { get; set; }
-        public object Label { get; set; }
     }
 
 
diff --git a/src/Blazor-ApexCharts/Series/JSLegendClicked.cs b/src/Blazor-ApexCharts/Series/JSLegendClicked.cs
@@ -0,0 +1,8 @@
+﻿namespace ApexCharts.Series
+{
+    public class JSLegendClicked
+    {
+        public int SeriesIndex { get; set; }
+        public bool Collapsed { get; set; }
+    }
+}
diff --git a/src/Blazor-ApexCharts/Series/LegendClicked.cs b/src/Blazor-ApexCharts/Series/LegendClicked.cs
@@ -0,0 +1,8 @@
+﻿namespace ApexCharts
+{
+    public class LegendClicked<TItem> where TItem : class
+    {
+        public Series<TItem> Series { get; set; }
+        public bool Collapsed { get; set; }
+    }
+}
diff --git a/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js b/src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js
@@ -196,17 +196,32 @@
 
         options.dotNetObject = dotNetObject;
 
-     
+
         options.chart.events = {
             dataPointSelection: (event, chartContext, config) => {
 
+                if (chartContext.opts.hasDataPointSelection === false) {
+                    return;
+                }
                 var selection = {
                     dataPointIndex: config.dataPointIndex,
                     seriesIndex: config.seriesIndex,
                     selectedDataPoints: config.selectedDataPoints
                 }
-
                 dotNetObject.invokeMethodAsync('DataPointSelected', selection);
+            },
+
+            legendClick: (chartContext, seriesIndex, config) => {
+                if (chartContext.opts.hasLegendClick === false) {
+                    return;
+                }
+                var legendClick = {
+
+                    seriesIndex: seriesIndex,
+                    collapsed: config.globals.collapsedSeriesIndices.indexOf(seriesIndex) !== -1
+                }
+
+                dotNetObject.invokeMethodAsync('LegendClicked', legendClick);
             }
         }
 

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,8 @@ namespace ApexCharts`
`7`	`7`	`public class ApexChartOptions<TItem> where TItem : class`
`8`	`8`	`{`
`9`	`9`	`public bool Debug { get; set; }`
	`10`	`+ public bool HasDataPointSelection { get; internal set; }`
	`11`	`+ public bool HasLegendClick { get; internal set; }`
`10`	`12`
`11`	`13`	`/// <summary>`
`12`	`14`	`/// Annotations options`
Original file line number	Diff line number	Diff line change
`@@ -2,14 +2,12 @@`
`2`	`2`
`3`	`3`	`namespace ApexCharts`
`4`	`4`	`{`
`5`		`- public class DataPointSelection<TItem> where TItem : class`
	`5`	`+ public class JSDataPointSelection`
`6`	`6`	`{`
`7`	`7`	`public List<List<int?>> SelectedDataPoints { get; set; }`
`8`	`8`	`public int DataPointIndex { get; set; }`
`9`	`9`	`public int SeriesIndex { get; set; }`
`10`	`10`
`11`		`- public IDataPoint<TItem> DataPoint { get; set; }`
`12`		`- public object Label { get; set; }`
`13`	`11`	`}`
`14`	`12`
`15`	`13`