Merge pull request #485 from apexcharts/fix-legend-click-no-axis

Fixed OnLegendClick on NoAxisChart
apexcharts · Jul 15, 2024 · 7f74c0d · 7f74c0d
2 parents 6bcc426 + 07a024d
commit 7f74c0d
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 15 deletions.
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/LabelFormatter.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/LabelFormatter.razor
@@ -1,6 +1,6 @@
 <DemoContainer>
     <ApexChart TItem="Order"
-               Title="Order Gross Value" Options=options Debug>
+               Title="Order Gross Value" Options=options>
 
         <ApexPointSeries TItem="Order"
                          Items="Orders"
@@ -25,6 +25,5 @@
             return w.config.series[seriesIndex];}"
             };
 
-
     }
-}
+   }
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadarCharts/DataLabels.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/RadarCharts/DataLabels.razor
@@ -1,30 +1,30 @@
 <DemoContainer>
     <ApexChart TItem="Order"
-               Title="Order Value">
+               Title="Order Value" OnXAxisLabelClick=XAxisLabelClick>
 
         <ApexPointSeries TItem="Order"
                          Items="orders"
                          Name="Gross Value"
                          SeriesType="SeriesType.Radar"
                          XValue="@(e => e.Country)"
                          YAggregate="@(e => e.Sum(e => e.GrossValue))"
-                         OrderByDescending="e=>e.Y"
-                         ShowDataLabels />
+                         ShowDataLabels
+                         OrderByDescending="e=>e.Y" />
 
         <ApexPointSeries TItem="Order"
                          Items="orders"
                          Name="Net Value"
                          SeriesType="SeriesType.Radar"
                          XValue="@(e => e.Country)"
                          YAggregate="@(e => e.Sum(e => e.NetValue))"
-                         OrderByDescending="e=>e.Y"
-                          />
+                         OrderByDescending="e=>e.Y" />
     </ApexChart>
 </DemoContainer>
 
 @code {
     private List<Order> orders { get; set; } = SampleData.GetOrders();
-
-
-
-    }
+    private void XAxisLabelClick(XAxisLabelClicked<Order> data)
+    {
+        var gg = data.LabelIndex;
+    }
+}
diff --git a/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor
@@ -12,6 +12,12 @@
                 <Basic />
             </Snippet>
         </CodeSnippet>
+
+        <CodeSnippet Title="No Axis Chart" ClassName=@typeof(NoAxisChart).ToString()>
+            <Snippet>
+                <NoAxisChart />
+            </Snippet>
+        </CodeSnippet>
     </ChildContent>
 
 

diff --git a/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/NoAxisChart.razor b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/NoAxisChart.razor
@@ -0,0 +1,39 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Gross Value"  OnLegendClicked="LegendClicked">
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         SeriesType="SeriesType.Pie"
+                         XValue="@(e => e.Country)"
+                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                         OrderByDescending="e=>e.Y"
+                          />
+    </ApexChart>
+
+    @if(currentLegend != null)
+    {
+        <Alert BackgroundColor="TablerColor.Primary">
+            <h3>You clicked @currentLegend.DataPoint.X</h3>
+
+        </Alert>
+    }
+
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+
+
+    private LegendClicked<Order> currentLegend = null;
+    protected override void OnInitialized()
+    {
+
+    }
+
+    private void LegendClicked(LegendClicked<Order> data)
+    {
+        currentLegend = data;
+    }
+}
diff --git a/src/Blazor-ApexCharts/Internal/JSHandler.cs b/src/Blazor-ApexCharts/Internal/JSHandler.cs
@@ -146,11 +146,23 @@ public void JSSelected(JSSelection jsSelection)
         [JSInvokable]
         public void JSLegendClicked(JSLegendClicked jsLegendClicked)
         {
-            var series = ChartReference.Options.Series.ElementAt(jsLegendClicked.SeriesIndex);
+            Series<TItem> series = null;
+            IDataPoint<TItem> point = null;
+            if (ChartReference.IsNoAxisChart)
+            {
+                series = ChartReference.Options.Series.First();
+                point = series.Data.ElementAt(jsLegendClicked.SeriesIndex);
+            }
+            else
+            {
+                series = ChartReference.Options.Series.ElementAt(jsLegendClicked.SeriesIndex);
+            }
+
             var legendClicked = new LegendClicked<TItem>
             {
                 Series = series,
-                Collapsed = jsLegendClicked.Collapsed
+                Collapsed = jsLegendClicked.Collapsed,
+                DataPoint = point,
             };
 
             //Invert if Toggle series is set to flase (default == true)

diff --git a/src/Blazor-ApexCharts/Series/LegendClicked.cs b/src/Blazor-ApexCharts/Series/LegendClicked.cs
@@ -14,6 +14,12 @@ public class LegendClicked<TItem> where TItem : class
         /// <summary>
         /// Specifies whether the series associated with the legend item is collapsed
         /// </summary>
-        public bool Collapsed { get; set; }
+        public bool Collapsed { get; set; }
+
+        /// <summary>
+        /// The clicked datapoint, Only valid for no axis charts
+        /// </summary>
+        public IDataPoint<TItem> DataPoint { get; set; }
+
     }
 }