Merge pull request #380 from jacekpapiniak/Add-legend-click-event

Add legend click event

Plotly.Blazor.Examples/Components/LegendClick.razor

@@ -0,0 +1,76 @@
+@using Plotly.Blazor.LayoutLib
+@using Plotly.Blazor.Interop
+<PlotlyChart style="height: 60vh; min-height: 350px" @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart"
+             LegendClickAction="LegendClickAction" AfterRender="SubscribeEvents"/>
+
+@if (LegendInfo != null)
+{
+    <MudText>Curve number: @LegendInfo.CurveNumber</MudText>
+    <MudText>ExpandedIndex: @LegendInfo.ExpandedIndex</MudText>
+}
+
+@code
+{
+    [CascadingParameter]
+    private MudTheme Theme { get; set; }
+
+    private PlotlyChart chart;
+    private Config config;
+    private Layout layout;
+    private IList<ITrace> data;    
+    private LegendEventDataPoint LegendInfo { get; set; }
+
+    /// <inheritdoc />
+    protected override void OnInitialized()
+    {
+        config = new Config
+        {
+            Responsive = true
+        };
+
+        layout = new Layout
+        {
+            Title = new Title
+            {
+                Text = GetType().Name
+            },
+            PaperBgColor = Theme.PaletteDark.Surface.ToString(),
+            PlotBgColor = Theme.PaletteDark.Surface.ToString(),
+            Font = new Font
+            {
+                Color = Theme.PaletteDark.TextPrimary.ToString()
+            },
+            ShowLegend = true,
+            BarMode = BarModeEnum.Stack
+        };
+
+        data = new List<ITrace>
+        {
+            new Bar
+            {
+                X = new List<object> { "giraffes", "orangutans", "monkeys" },
+                Y = new List<object> { 20, 14, 23 },
+                Name = "SF Zoo"
+            },
+            new Bar
+            {
+                X = new List<object> { "giraffes", "orangutans", "monkeys" },
+                Y = new List<object> { 12, 18, 29 },
+                Name = "LA Zoo"
+            }
+        };
+
+        base.OnInitialized();
+    }
+
+    public void LegendClickAction(LegendEventDataPoint eventData)
+    {
+        LegendInfo = eventData;
+        StateHasChanged();
+    }
+
+    public async void SubscribeEvents()
+    {
+        await chart.SubscribeLegendClickEvent();
+    }
+}

Plotly.Blazor.Examples/Pages/LegendClickPage.razor

@@ -0,0 +1,5 @@
+@page "/legendclick"
+
+<Example Title="Legend Click Event" Url="Plotly.Blazor.Examples/Components/LegendClick.razor">
+    <LegendClick/>
+</Example>

Plotly.Blazor.Examples/Shared/NavMenu.razor

@@ -21,8 +21,9 @@
         <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}scattergl")">ScatterGl</MudNavLink>
         <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}indicator")">Indicator</MudNavLink>
         <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}smith")">Smith</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}hover")">HoverEvent</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}click")">ClickEvent</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}relayout")">RelayoutEvent</MudNavLink>
+        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}hover")">Hover Event</MudNavLink>
+        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}click")">Click Event</MudNavLink>
+        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}legendclick")">Legend Click Event</MudNavLink>
+        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}relayout")">Relayout Event</MudNavLink>
     </MudNavMenu>
 </MudDrawer>

Plotly.Blazor.Generator/src/PlotlyChart.razor.cs

@@ -637,6 +637,13 @@ public async Task PrependTraces(IEnumerable<IEnumerable<object>> x, IEnumerable<
             await JsRuntime.PrependTraces(objectReference, xArr, yArr, indicesArr, max, cancellationToken);
         }
 
+        /// <summary>
+        ///     Defines the action that should happen when the LegendClickAction is triggered.
+        ///     Objects are currently required for accomodating different plot value types
+        /// </summary>
+        [Parameter]
+        public Action<LegendEventDataPoint> LegendClickAction { get; set; }
+
         /// <summary>
         ///     Defines the action that should happen when the ClickEvent is triggered.
         ///     Objects are currently required for accommodating different plot value types
@@ -657,6 +664,17 @@ public async Task PrependTraces(IEnumerable<IEnumerable<object>> x, IEnumerable<
         [Parameter]
         public Action<RelayoutEventData> RelayoutAction { get; set; }
 
+        /// <summary>
+        ///     Method which is called by JSRuntime once a plot has been clicked, to invoke the passed in ClickAction.
+        ///     Objects are currently required for accommodating different plot value types.
+        /// </summary>
+        //// <param name = "eventData"></param>
+        [JSInvokable("LegendClickEvent")]
+        public void LegendClickEvent(LegendEventDataPoint eventData)
+        {
+            LegendClickAction?.Invoke(eventData);
+        }
+
         /// <summary>
         ///     Method which is called by JSRuntime once a plot has been clicked, to invoke the passed in ClickAction.
         ///     Objects are currently required for accommodating different plot value types.
@@ -688,6 +706,16 @@ public void RelayoutEvent(RelayoutEventData obj)
             RelayoutAction?.Invoke(obj);
         }
 
+        /// <summary>
+        ///     Subscribes to the legend click event of the chart.
+        /// </summary>
+        /// <param name = "cancellationToken">CancellationToken</param>
+        /// <returns>Task</returns>
+        public async Task SubscribeLegendClickEvent(CancellationToken cancellationToken = default)
+        {
+            await JsRuntime.SubscribeLegendClickEvent(objectReference, cancellationToken);
+        }
+
         /// <summary>
         ///     Subscribes to the click event of the chart.
         /// </summary>

Plotly.Blazor.Generator/src/PlotlyJsInterop.cs

@@ -193,6 +193,17 @@ await jsRuntime.InvokeVoidAsync($"{PlotlyInterop}.restyle", cancellationToken,
             objectReference.Value.Id, trace?.PrepareJsInterop(SerializerOptions), indices);
     }
 
+    /// <summary>
+    ///     Can be used to subscribe click events for legend.
+    /// </summary>
+    /// <param name="jsRuntime">The js runtime.</param>
+    /// <param name="objectReference">The object reference.</param>
+    /// <param name="cancellationToken">CancellationToken</param>
+    public static async Task SubscribeLegendClickEvent(this IJSRuntime jsRuntime, DotNetObjectReference<PlotlyChart> objectReference, CancellationToken cancellationToken)
+    {
+        await jsRuntime.InvokeVoidAsync($"{PlotlyInterop}.subscribeLegendClickEvent", cancellationToken, objectReference, objectReference.Value.Id);
+    }
+
     /// <summary>
     ///     Can be used to subscribe click events for points.
     /// </summary>

Plotly.Blazor.Generator/src/wwwroot/plotly-interop.js

@@ -59,6 +59,17 @@
     downloadImage: function (id, format, height, width, filename) {
         return window.Plotly.downloadImage(id, { format: format, height: height, width: width, filename: filename });
     },
+    subscribeLegendClickEvent: function (dotNetObj, id) {
+        var plot = document.getElementById(id);
+        plot.on('plotly_legendclick', function (data) {
+            console.log("title: " + data.layout.title.text + " curveNumber:" + data.curveNumber + " expandedIndex:" + data.expandedIndex)
+
+            dotNetObj.invokeMethodAsync('LegendClickEvent', {
+                CurveNumber: data.curveNumber,
+                ExpandedIndex: data.expandedIndex
+            })
+        })
+    },
     subscribeClickEvent: function (dotNetObj, id) {
         var plot = document.getElementById(id);
         plot.on('plotly_click', function (data) {

Plotly.Blazor/Interop/EventDataPoint.cs

@@ -56,4 +56,20 @@ public class EventDataPoint
         /// </summary>
         public object Lon { get; set; }
     }
+
+    /// <summary>
+    ///     A single event can have one selected point.
+    /// </summary>
+    public class LegendEventDataPoint
+    {
+        /// <summary>
+        //      The zero-based point number. Can be used to identify the trace.
+        /// </summary>
+        public object CurveNumber { get; set; }
+
+        /// <summary>
+        ///     The zero-based point number. Can be used to identify the expanded trace
+        /// </summary>
+        public object ExpandedIndex { get; set; }
+    }
 }

Plotly.Blazor/Plotly.Blazor.xml

@@ -849,6 +849,17 @@
                 The Lon as an object to be compatible to multiple data types.
             </summary>
         </member>
+        <member name="T:Plotly.Blazor.Interop.LegendEventDataPoint">
+            <summary>
+                A single event can have one selected point.
+            </summary>
+        </member>
+        <!-- Badly formed XML comment ignored for member "P:Plotly.Blazor.Interop.LegendEventDataPoint.CurveNumber" -->
+        <member name="P:Plotly.Blazor.Interop.LegendEventDataPoint.ExpandedIndex">
+            <summary>
+                The zero-based point number. Can be used to identify the expanded trace
+            </summary>
+        </member>
         <member name="T:Plotly.Blazor.Interop.RelayoutEventData">
             <summary>
                 This class is used to parse the event data from the relayout jsinterop action.
@@ -20447,6 +20458,12 @@
             <exception cref="T:System.InvalidOperationException">Data lists are not initialized</exception>
             <returns>Task</returns>
         </member>
+        <member name="P:Plotly.Blazor.PlotlyChart.LegendClickAction">
+            <summary>
+                Defines the action that should happen when the LegendClickAction is triggered.
+                Objects are currently required for accomodating different plot value types
+            </summary>
+        </member>
         <member name="P:Plotly.Blazor.PlotlyChart.ClickAction">
             <summary>
                 Defines the action that should happen when the ClickEvent is triggered.
@@ -20464,6 +20481,12 @@
                 Defines the action that should happen when the RelayoutEvent is triggered.
             </summary>
         </member>
+        <member name="M:Plotly.Blazor.PlotlyChart.LegendClickEvent(Plotly.Blazor.Interop.LegendEventDataPoint)">
+            <summary>
+                Method which is called by JSRuntime once a plot has been clicked, to invoke the passed in ClickAction.
+                Objects are currently required for accommodating different plot value types.
+            </summary>
+        </member>
         <member name="M:Plotly.Blazor.PlotlyChart.ClickEvent(System.Collections.Generic.IEnumerable{Plotly.Blazor.Interop.EventDataPoint})">
             <summary>
                 Method which is called by JSRuntime once a plot has been clicked, to invoke the passed in ClickAction.
@@ -20482,6 +20505,13 @@
                 Method which is called by JSRuntime when the chart's layout has changed.
             </summary>
         </member>
+        <member name="M:Plotly.Blazor.PlotlyChart.SubscribeLegendClickEvent(System.Threading.CancellationToken)">
+            <summary>
+                Subscribes to the legend click event of the chart.
+            </summary>
+            <param name = "cancellationToken">CancellationToken</param>
+            <returns>Task</returns>
+        </member>
         <member name="M:Plotly.Blazor.PlotlyChart.SubscribeClickEvent(System.Threading.CancellationToken)">
             <summary>
                 Subscribes to the click event of the chart.
@@ -20638,6 +20668,14 @@
             <param name="objectReference">The object reference.</param>
             <param name="cancellationToken">CancellationToken</param>
         </member>
+        <member name="M:Plotly.Blazor.PlotlyJsInterop.SubscribeLegendClickEvent(Microsoft.JSInterop.IJSRuntime,Microsoft.JSInterop.DotNetObjectReference{Plotly.Blazor.PlotlyChart},System.Threading.CancellationToken)">
+            <summary>
+                Can be used to subscribe click events for legend.
+            </summary>
+            <param name="jsRuntime">The js runtime.</param>
+            <param name="objectReference">The object reference.</param>
+            <param name="cancellationToken">CancellationToken</param>
+        </member>
         <member name="M:Plotly.Blazor.PlotlyJsInterop.SubscribeHoverEvent(Microsoft.JSInterop.IJSRuntime,Microsoft.JSInterop.DotNetObjectReference{Plotly.Blazor.PlotlyChart},System.Threading.CancellationToken)">
             <summary>
                 Can be used to subscribe hover events for points.

Plotly.Blazor/PlotlyChart.razor

@@ -7,5 +7,4 @@
 @using Plotly.Blazor;
 @implements IDisposable
 
-<div style="min-height: 350px; height: 100%" @attributes="AdditionalAttributes" id="@Id"></div>
-
+<div style="min-height: 350px; height: 100%" @attributes="AdditionalAttributes" id="@Id"></div>

Plotly.Blazor/PlotlyChart.razor.cs

@@ -637,6 +637,13 @@ public async Task PrependTraces(IEnumerable<IEnumerable<object>> x, IEnumerable<
             await JsRuntime.PrependTraces(objectReference, xArr, yArr, indicesArr, max, cancellationToken);
         }
 
+        /// <summary>
+        ///     Defines the action that should happen when the LegendClickAction is triggered.
+        ///     Objects are currently required for accomodating different plot value types
+        /// </summary>
+        [Parameter]
+        public Action<LegendEventDataPoint> LegendClickAction { get; set; }
+
         /// <summary>
         ///     Defines the action that should happen when the ClickEvent is triggered.
         ///     Objects are currently required for accommodating different plot value types
@@ -657,6 +664,17 @@ public async Task PrependTraces(IEnumerable<IEnumerable<object>> x, IEnumerable<
         [Parameter]
         public Action<RelayoutEventData> RelayoutAction { get; set; }
 
+        /// <summary>
+        ///     Method which is called by JSRuntime once a plot has been clicked, to invoke the passed in ClickAction.
+        ///     Objects are currently required for accommodating different plot value types.
+        /// </summary>
+        //// <param name = "eventData"></param>
+        [JSInvokable("LegendClickEvent")]
+        public void LegendClickEvent(LegendEventDataPoint eventData)
+        {
+            LegendClickAction?.Invoke(eventData);
+        }
+
         /// <summary>
         ///     Method which is called by JSRuntime once a plot has been clicked, to invoke the passed in ClickAction.
         ///     Objects are currently required for accommodating different plot value types.
@@ -688,6 +706,16 @@ public void RelayoutEvent(RelayoutEventData obj)
             RelayoutAction?.Invoke(obj);
         }
 
+        /// <summary>
+        ///     Subscribes to the legend click event of the chart.
+        /// </summary>
+        /// <param name = "cancellationToken">CancellationToken</param>
+        /// <returns>Task</returns>
+        public async Task SubscribeLegendClickEvent(CancellationToken cancellationToken = default)
+        {
+            await JsRuntime.SubscribeLegendClickEvent(objectReference, cancellationToken);
+        }
+
         /// <summary>
         ///     Subscribes to the click event of the chart.
         /// </summary>

Plotly.Blazor/PlotlyJsInterop.cs

@@ -204,6 +204,17 @@ public static async Task SubscribeClickEvent(this IJSRuntime jsRuntime, DotNetOb
         await jsRuntime.InvokeVoidAsync($"{PlotlyInterop}.subscribeClickEvent", cancellationToken, objectReference, objectReference.Value.Id);
     }
 
+    /// <summary>
+    ///     Can be used to subscribe click events for legend.
+    /// </summary>
+    /// <param name="jsRuntime">The js runtime.</param>
+    /// <param name="objectReference">The object reference.</param>
+    /// <param name="cancellationToken">CancellationToken</param>
+    public static async Task SubscribeLegendClickEvent(this IJSRuntime jsRuntime, DotNetObjectReference<PlotlyChart> objectReference, CancellationToken cancellationToken)
+    {
+        await jsRuntime.InvokeVoidAsync($"{PlotlyInterop}.subscribeLegendClickEvent", cancellationToken, objectReference, objectReference.Value.Id);
+    }
+
     /// <summary>
     ///     Can be used to subscribe hover events for points.
     /// </summary>

Plotly.Blazor/wwwroot/plotly-interop.js

@@ -59,6 +59,17 @@
     downloadImage: function (id, format, height, width, filename) {
         return window.Plotly.downloadImage(id, { format: format, height: height, width: width, filename: filename });
     },
+    subscribeLegendClickEvent: function (dotNetObj, id) {
+        var plot = document.getElementById(id);
+        plot.on('plotly_legendclick', function (data) {
+            console.log("title: " + data.layout.title.text + " curveNumber:" + data.curveNumber + " expandedIndex:" + data.expandedIndex)
+
+           dotNetObj.invokeMethodAsync('LegendClickEvent', {
+               CurveNumber: data.curveNumber,
+               ExpandedIndex: data.expandedIndex
+           })
+        })
+    },
     subscribeClickEvent: function (dotNetObj, id) {
         var plot = document.getElementById(id);
         plot.on('plotly_click', function (data) {