Merge pull request #514 from apexcharts/annotation-point-event

Fixed Annotation events
apexcharts · Oct 6, 2024 · d06a099 · d06a099
2 parents c18210f + d7b4fa5
commit d06a099
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 16 deletions.
diff --git a/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json b/docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json
@@ -11,7 +11,7 @@
     "BlazorApexCharts.Docs.Server": {
       "commandName": "Project",
       "launchBrowser": true,
-      "launchUrl": "features/responsive",
+      "launchUrl": "features/annotations",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },

diff --git a/docs/BlazorApexCharts.Docs/Components/Features/Annotations/AnnotationsSamples.razor b/docs/BlazorApexCharts.Docs/Components/Features/Annotations/AnnotationsSamples.razor
@@ -2,19 +2,25 @@
 
 <DocExamples Title="Annotations" >
 
-    <CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
+@*     <CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
         <Snippet>
              <Basic/>
         </Snippet>
-    </CodeSnippet>
+    </CodeSnippet> *@
 
-    <CodeSnippet Title=Events ClassName=@typeof(Events).ToString()>
+        <CodeSnippet Title="Point Events" ClassName=@typeof(PointEvents).ToString()>
         <Snippet>
-            <Events />
+            <PointEvents />
         </Snippet>
     </CodeSnippet>
 
-    <CodeSnippet Title="DateTime" ClassName=@typeof(DateTime).ToString()>
+@*     <CodeSnippet Title="Label Events" ClassName=@typeof(LabelEvents).ToString()>
+        <Snippet>
+            <LabelEvents />
+        </Snippet>
+    </CodeSnippet> *@
+
+@*     <CodeSnippet Title="DateTime" ClassName=@typeof(DateTime).ToString()>
         <Snippet>
             <DateTime />
         </Snippet>
@@ -24,11 +30,7 @@
         <Snippet>
             <Multiline />
         </Snippet>
-    </CodeSnippet>
-@*     <CodeSnippet Title=Horizontal ClassName=@typeof(Horizontal).ToString()>
-        <Snippet>
-            <Horizontal />
-        </Snippet>
     </CodeSnippet> *@
 
+
 </DocExamples>
diff --git a/...ponents/Features/Annotations/Events.razor → ...ts/Features/Annotations/LabelEvents.razor b/...ponents/Features/Annotations/Events.razor → ...ts/Features/Annotations/LabelEvents.razor
@@ -5,9 +5,7 @@
                OnAnnotationLabelClick="AnnotationEvent"
                OnAnnotationLabelMouseEnter="AnnotationEvent"
                OnAnnotationLabelMouseLeave="AnnotationEvent"
-               OnAnnotationPointClick="AnnotationEvent"
-               OnAnnotationPointMouseEnter="AnnotationEvent"
-               OnAnnotationPointMouseLeave="AnnotationEvent"
+
                Debug>
 
         <ApexPointSeries TItem="Order"

diff --git a/docs/BlazorApexCharts.Docs/Components/Features/Annotations/PointEvents.razor b/docs/BlazorApexCharts.Docs/Components/Features/Annotations/PointEvents.razor
@@ -0,0 +1,77 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Scatter Sample"
+               Options=options
+               OnAnnotationPointClick="AnnotationEvent"
+               OnAnnotationPointMouseEnter="AnnotationEvent"
+               OnAnnotationPointMouseLeave="AnnotationEvent"
+
+               Debug>
+
+        <ApexPointSeries TItem="Order"
+                         Items="orders"
+                         Name="% Gross"
+                         SeriesType="SeriesType.Bar"
+                         XValue="@(e => e.DiscountPercentage)"
+                         YValue="@(e => e.GrossValue)"
+                         OrderByDescending="e=>e.X" />
+
+        <ApexPointSeries TItem="Order"
+                         Items="orders"
+                         SeriesType="SeriesType.Bar"
+                         Name="% Net"
+                         XValue="@(e => e.DiscountPercentage)"
+                         YValue="@(e => e.NetValue)"
+                         OrderByDescending="e=>e.X" />
+    </ApexChart>
+
+    <h3 class="mt-3">@message</h3>
+
+</DemoContainer>
+
+@code {
+    private List<Order> orders { get; set; } = SampleData.GetOrders();
+    private ApexChartOptions<Order> options = new ApexChartOptions<Order>();
+
+    private string message;
+
+    protected override void OnInitialized()
+    {
+
+        options.Annotations = new Annotations
+            {
+
+
+                Points = new List<AnnotationsPoint> { new AnnotationsPoint
+                        {
+                           Label = new Label {
+                                Text = "Point 1",
+                                Style = new Style{ Background="yellow" }
+                           },
+                         X = 20,
+                         Y = 50000
+                        },
+                        new AnnotationsPoint
+                        {
+                           Label = new Label {
+                                Text = "Point 2",
+                                Style = new Style{ Background="red" }
+                           },
+                         X = 40,
+                         Y = 60000
+                        }
+                        }
+
+
+
+            };
+    }
+
+
+    private void AnnotationEvent(AnnotationEvent<Order> e)
+    {
+        message = $"{e.EventType} {e.Target}: '{e.Annotation?.Label?.Text}' [{e.AnnotationId}]";
+    }
+
+
+}
diff --git a/src/Blazor-ApexCharts/Models/ApexChartOptions.cs b/src/Blazor-ApexCharts/Models/ApexChartOptions.cs
@@ -400,7 +400,7 @@ public class AnnotationsPoint : IAnnotation
 
         internal void SetEventFunction(AnnotationEventType eventType)
         {
-            var eventFunction = "function(annotation, e) {this.w.config.dotNetObject.invokeMethodAsync('JSAnnotationPointEvent',{id: annotation.id, eventType: '" + eventType.ToString() + "'});}";
+            var eventFunction = "function(annotation, e) {window.blazor_apexchart.getDotNetObjectReference(undefined, this.w).invokeMethodAsync('JSAnnotationPointEvent',{id: annotation.id, eventType: '" + eventType.ToString() + "'});}";
 
             switch (eventType)
             {
@@ -522,7 +522,7 @@ public class Label
 
         internal void SetEventFunction(AnnotationEventType eventType)
         {
-            var eventFunction = "function(annotation, e) {this.w.config.dotNetObject.invokeMethodAsync('JSAnnotationLabelEvent',{id: annotation.id, eventType: '" + eventType.ToString() + "'});}";
+            var eventFunction = "function(annotation, e) {window.blazor_apexchart.getDotNetObjectReference(undefined, this.w).invokeMethodAsync('JSAnnotationLabelEvent',{id: annotation.id, eventType: '" + eventType.ToString() + "'});}";
 
             switch (eventType)
             {