Merge pull request #572 from apexcharts/update-apexcharts-4.4.0

Update to apexcharts 4.0.0

Author: joadan

src/Blazor-ApexCharts/ApexChart.razor

@@ -6,14 +6,19 @@
 <CascadingValue Value="(ApexChart<TItem>)this" Name="Chart">
     @ChildContent
 
-    @if (ApexPointTooltip != null)
+    <ApexCharts.Internal.ApexChartTooltip ApexTooltip="ApexPointTooltip" Data="tooltipData" TItem="TItem" JsApexchart="blazor_apexchart" ChartId="@chartId"   />
+
+   @*  @if (ApexPointTooltip != null)
     {
-        <span  id="apex-tooltip-@ChartId">
-            @if (tooltipData != null)
-            {
-                @ApexPointTooltip(tooltipData)
-            }
+        <span  id="apex-tooltip-@ChartId" style="display:none">
+            <span>
+                @if (tooltipData != null)
+                {
+                    @ApexPointTooltip(tooltipData)
+                }
+            </span>
+           
         </span>
-    }
+    } *@
 
 </CascadingValue>

src/Blazor-ApexCharts/ApexChart.razor.cs

@@ -6,6 +6,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Text.Json;
+using System.Threading;
 using System.Threading.Tasks;
 
 namespace ApexCharts

src/Blazor-ApexCharts/ApexChartTooltip.razor

@@ -0,0 +1,16 @@
+@namespace ApexCharts.Internal
+@typeparam TItem
+
+@if (ApexTooltip != null)
+{
+    <span style="display:none">
+        <span id="tooltip_source_@ChartId">
+            @if (Data != null)
+            {
+                @ApexTooltip(Data)
+            }
+        </span>
+    </span>
+}
+
+

src/Blazor-ApexCharts/ApexChartTooltip.razor.cs

@@ -0,0 +1,31 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace ApexCharts.Internal
+{
+    public partial class ApexChartTooltip<TItem> where TItem : class
+    {
+        /// <inheritdoc cref="ChartId"/>
+        [Parameter] public string ChartId { get; set; }
+
+        /// <inheritdoc cref="Tooltip"/>
+        [Parameter] public RenderFragment<HoverData<TItem>> ApexTooltip { get; set; }
+
+        /// <inheritdoc cref="HoverData{TItem}"/>
+        [Parameter] public HoverData<TItem> Data { get; set; }
+
+        /// <inheritdoc cref="IJSObjectReference"/>
+        [Parameter] public IJSObjectReference JsApexchart { get; set; }
+
+
+        /// <inheritdoc cref="OnAfterRenderAsync(bool)"/>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (JsApexchart != null)
+            {
+                await JsApexchart.InvokeVoidAsync("blazor_apexchart.copyTooltipContent", ChartId);
+            }
+        }
+    }
+}

src/Blazor-ApexCharts/Internal/JSLoader.cs

@@ -12,7 +12,7 @@ internal static class JSLoader
 {
     internal static async Task<IJSObjectReference> LoadAsync(IJSRuntime jsRuntime, string path = null)
     {
-        var javascriptPath = "./_content/Blazor-ApexCharts/js/blazor-apexcharts.js?ver=4";
+        var javascriptPath = "./_content/Blazor-ApexCharts/js/blazor-apexcharts.js?ver=5";
         if (!string.IsNullOrWhiteSpace(path)) { javascriptPath = path; }
 
         // load Module ftom ES6 script

src/Blazor-ApexCharts/Internal/Models/JSDataPointSelection.cs

@@ -21,5 +21,6 @@ internal class JSDataPointSelection
         /// The index of the data series being selected
         /// </summary>
         public int SeriesIndex { get; set; }
+
     }
 }

src/Blazor-ApexCharts/wwwroot/js/apexcharts.esm.js

@@ -1,4 +1,4 @@
-import ApexCharts from './apexcharts.esm.js?ver=4.3.0'
+import ApexCharts from './apexcharts.esm.js?ver=4.4.0'
 
 // export function for Blazor to point to the window.blazor_apexchart. To be compatible with the most JS Interop calls the window will be return.
 export function get_apexcharts() {
@@ -275,6 +275,20 @@ window.blazor_apexchart = {
         }
     },
 
+    copyTooltipContent(chartId) {
+
+        var sourceId = "tooltip_source_" + chartId;
+        var targetId = "tooltip_target_" + chartId;
+
+        var sourceElement = document.getElementById(sourceId);
+        var targetElement = document.getElementById(targetId);
+
+        if (sourceElement && targetElement) {
+            targetElement.innerHTML = sourceElement.innerHTML;
+        }
+
+    },
+
     dotNetRefs: new Map(),
 
     renderChart(dotNetObject, container, options, events) {
@@ -294,14 +308,19 @@ window.blazor_apexchart = {
                     seriesIndex: seriesIndex
                 };
 
-                dotNetObject.invokeMethodAsync('RazorTooltip', selection);
+                var targetId = "tooltip_target_" + w.globals.chartID;
+                var el = document.getElementById(targetId);
 
-                var sourceId = 'apex-tooltip-' + w.globals.chartID;
-                var source = document.getElementById(sourceId);
-                if (source) {
-                    return source;
+                if (el === null) {
+                    el = document.createElement("DIV");
+                    el.id = targetId;
                 }
-                return '...'
+               
+                dotNetObject.invokeMethodAsync('RazorTooltip', selection);
+
+                return el;
+
+               
             };
         }