Merge pull request #83 from apexcharts/custom-tooltip

Custom tooltip

Author: joadan

docs/BlazorApexCharts.Docs/Components/Events/DataPointHover/Basic.razor

@@ -0,0 +1,57 @@
+<Row>
+    <RowCol Md=12 Lg=6>
+        <ApexChart TItem="Order"
+                   Title="Order Net Value"
+                   OnDataPointEnter="DataPointEnter"
+                   OnDataPointLeave=DataPointLeave>
+
+            <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" />
+
+            <ApexPointSeries TItem="Order"
+                             Items="Orders"
+                             Name="Gross Value"
+                             SeriesType="SeriesType.Bar"
+                             XValue="@(e => e.Country)"
+                             YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                             OrderByDescending="e=>e.X" />
+        </ApexChart>
+    </RowCol>
+    <RowCol Md=12 Lg=6>
+        @if (hoverData != null)
+        {
+            <Row>
+                <RowCol Auto>
+                    <div class=p-3>
+                        @{
+                            var dataPoint = (DataPoint<Order>)hoverData.DataPoint;
+                            <h1>@hoverData.DataPoint.X</h1>
+                            <div>Name: @hoverData.Series.Name</div>
+                            <div>Value: @dataPoint.Y?.ToString("N0")</div>
+                        }
+                    </div>
+                </RowCol>
+            </Row>
+        }
+    </RowCol>
+</Row>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private HoverData<Order> hoverData;
+
+    public void DataPointEnter(HoverData<Order> hoverData)
+    {
+        this.hoverData = hoverData;
+    }
+
+    public void DataPointLeave(HoverData<Order> hoverData)
+    {
+        this.hoverData = null;
+    }
+    }

docs/BlazorApexCharts.Docs/Components/Events/DataPointHover/DataPointHover.razor

@@ -0,0 +1,18 @@
+@page "/events/data-point-hover"
+
+<DocExamples Title="Data Point Hover">
+
+    <Description>
+        Move the mouse over an datapoint to trigger an event
+    </Description>
+
+    <ChildContent>
+        <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
+            <Snippet>
+                <Basic />
+            </Snippet>
+        </CodeSnippet>
+    </ChildContent>
+
+
+</DocExamples>

docs/BlazorApexCharts.Docs/Components/Features/Formatters/FormatterSamples.razor

@@ -1,7 +1,6 @@
 @page "/features/formatters"
 
 <DocExamples Title="Formatters">
-       
 
      <CodeSnippet Title="Use javascript" ClassName=@typeof(UseJavascript).ToString()>
         <Snippet>
@@ -37,5 +36,4 @@
 
 
 
-
 </DocExamples>

docs/BlazorApexCharts.Docs/Components/Features/Tooltips/CustomTooltip.razor

@@ -0,0 +1,64 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value"
+               Options=options>
+
+        <ApexPointTooltip>
+            <div class="p-1">
+                @{
+                    var dataPoint = (DataPoint<Order>)context.DataPoint;
+                    <h3>@context.DataPoint.X</h3>
+
+                    <Row class="mb-2">
+                        <RowCol Auto>
+                            <Badge style="background-color:#FF0000">Gross Value</Badge>
+                        </RowCol>
+                        <RowCol Auto>
+                            <span class="@(context.SeriesIndex == 0 ? "strong": "")">
+                                @dataPoint.Items.Sum(e=> e.GrossValue).ToString("n0")
+                            </span>
+                        </RowCol>
+                    </Row>
+
+                    <Row>
+                        <RowCol Auto>
+                            <Badge style="background-color:#000080">Net Value</Badge>
+                        </RowCol>
+                        <RowCol Auto>
+                            <span class="@(context.SeriesIndex == 1 ? "strong": "")">
+                                @dataPoint.Items.Sum(e=> e.NetValue).ToString("n0")
+                            </span>
+                        </RowCol>
+                    </Row>
+                }
+            </div>
+        </ApexPointTooltip>
+
+        <ChildContent>
+            <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.Y"
+                             Stroke="@(new SeriesStroke { Color = "#FF0000", Width=4})" />
+
+            <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.Y"
+                             Stroke="@(new SeriesStroke { Color = "#000080", Width=4})" />
+        </ChildContent>
+    </ApexChart>
+
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+    private ApexChartOptions<Order> options { get; set; } = new ApexChartOptions<Order>();
+
+    }

docs/BlazorApexCharts.Docs/Components/Features/Tooltips/Tooltips.razor

@@ -0,0 +1,12 @@
+@page "/features/tooltip"
+
+<DocExamples Title="Tooltip">
+
+     <CodeSnippet Title="Custom" ClassName=@typeof(CustomTooltip).ToString()>
+        <Snippet>
+            <CustomTooltip />
+        </Snippet>
+    </CodeSnippet>
+
+   
+</DocExamples>

docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

@@ -99,10 +99,10 @@
                 <Icon class="icon" IconType="@Icons.Bolt" />
             </MenuItemIcon>
             <SubMenu>
+                 <NavbarMenuItem Text="Data Point Hover" Href="events/data-point-hover" />
                 <NavbarMenuItem Text="Data Point Selection" Href="events/data-point-selection" />
                 <NavbarMenuItem Text="Legend Click" Href="events/legend-click" />
 
-
             </SubMenu>
         </NavbarMenuItem>
 
@@ -118,6 +118,7 @@
                 <NavbarMenuItem Text="Legend" Href="features/legend" />
                 <NavbarMenuItem Text="Performance" Href="features/performance" />
                 <NavbarMenuItem Text="Syncronized charts" Href="features/syncronized" />
+                <NavbarMenuItem Text="Tooltip" Href="features/tooltip" />
             </SubMenu>
 
         </NavbarMenuItem>

src/Blazor-ApexCharts/ApexChart.razor

@@ -1,8 +1,18 @@
-
-@typeparam TItem
+@typeparam TItem
 @namespace ApexCharts
 
 <div @ref=ChartContainer id="@chartId" />
 <CascadingValue Value="(ApexChart<TItem>)this" Name="Chart">
     @ChildContent
+
+    @if (ApexPointTooltip != null)
+    {
+        <div style="display:none" id="apex-tooltip-@ChartId">
+            @if (tooltipData != null)
+            {
+                @ApexPointTooltip(tooltipData)
+            }
+        </div>
+    }
+
 </CascadingValue>

src/Blazor-ApexCharts/ApexChart.razor.cs

@@ -15,13 +15,16 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
         [Inject] private IServiceProvider ServiceProvider { get; set; }
         [Inject] private IJSRuntime JSRuntime { get; set; }
         [Parameter] public RenderFragment ChildContent { get; set; }
+        [Parameter] public RenderFragment<HoverData<TItem>> ApexPointTooltip { get; set; }
         [Parameter] public ApexChartOptions<TItem> Options { get; set; } = new ApexChartOptions<TItem>();
         [Parameter] public string Title { get; set; }
         [Parameter] public XAxisType? XAxisType { get; set; }
         [Parameter] public bool Debug { get; set; }
         [Parameter] public object Width { get; set; }
         [Parameter] public object Height { get; set; }
         [Parameter] public EventCallback<SelectedData<TItem>> OnDataPointSelection { get; set; }
+        [Parameter] public EventCallback<HoverData<TItem>> OnDataPointEnter { get; set; }
+        [Parameter] public EventCallback<HoverData<TItem>> OnDataPointLeave { get; set; }
         [Parameter] public EventCallback<LegendClicked<TItem>> OnLegendClicked { get; set; }
 
         [Parameter] public EventCallback OnRendered { get; set; }
@@ -36,7 +39,9 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
         private bool isReady;
         private bool forceRender = true;
         private string chartId;
-        public string ChartId => ChartId;
+        private HoverData<TItem> tooltipData;
+
+        public string ChartId => chartId;
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
@@ -214,8 +219,8 @@ private void UpdateDataForNoAxisCharts()
             var noAxisSeries = Options.Series.First();
             Options.Labels = noAxisSeries.Data.Select(e => e.X?.ToString()).ToList();
 
-            var colors = noAxisSeries.Data.Where(e=> !string.IsNullOrWhiteSpace(e.FillColor)).Select(e => e.FillColor).ToList();
-            if(colors.Any())
+            var colors = noAxisSeries.Data.Where(e => !string.IsNullOrWhiteSpace(e.FillColor)).Select(e => e.FillColor).ToList();
+            if (colors.Any())
             {
                 Options.Colors = colors;
             }
@@ -224,14 +229,15 @@ private void UpdateDataForNoAxisCharts()
 
         private bool ShouldFixDataSelection()
         {
-            if (!OnDataPointSelection.HasDelegate || !Options.Series.Any()) { return false; }
+            if ((!OnDataPointSelection.HasDelegate && !OnDataPointEnter.HasDelegate && ApexPointTooltip == null) || !Options.Series.Any()) { return false; }
 
-            if(Options.Chart?.Type != null && Options.Chart.Type == ChartType.Line || Options.Chart.Type == ChartType.Area || Options.Chart.Type == ChartType.Radar)
+            if (Options.Chart?.Type != null && Options.Chart.Type == ChartType.Line || Options.Chart.Type == ChartType.Area || Options.Chart.Type == ChartType.Radar)
             {
                 return true;
             }
 
-            if(Options.Series.Any(e=> e.Type == MixedType.Line || e.Type == MixedType.Area)) {
+            if (Options.Series.Any(e => e.Type == MixedType.Line || e.Type == MixedType.Area))
+            {
                 return true;
             }
 
@@ -406,11 +412,31 @@ private void PrepareChart()
             UpdateDataForNoAxisCharts();
             SetDotNetFormatters();
             SetEvents();
+            SetCustomTooltip();
+        }
+
+        private void SetCustomTooltip()
+        {
+            if (ApexPointTooltip == null) { return; }
+            if (Options.Tooltip == null) {  Options.Tooltip = new Tooltip(); }
+            var customTooltip = @"function({series, seriesIndex, dataPointIndex, w}) {
+                                var sourceId = 'apex-tooltip-' + w.globals.chartID;
+                                var source = document.getElementById(sourceId);
+                                if (source) {
+                                return source.innerHTML;
+                                }
+                                return '...'
+                                }";
+
+            Options.Tooltip.Custom = customTooltip;
+
         }
 
         private void SetEvents()
         {
             Options.HasDataPointSelection = OnDataPointSelection.HasDelegate;
+            Options.HasDataPointEnter = OnDataPointEnter.HasDelegate || ApexPointTooltip != null;
+            Options.HasDataPointLeave = OnDataPointLeave.HasDelegate;
             Options.HasLegendClick = OnLegendClicked.HasDelegate;
 
         }
@@ -559,13 +585,68 @@ public void DataPointSelected(JSDataPointSelection selectedDataPoints)
 
                 var selection = new SelectedData<TItem>
                 {
+                    Chart = this,
                     Series = series,
                     DataPoint = dataPoint,
                     IsSelected = selectedDataPoints.SelectedDataPoints.Any(e => e != null && e.Any(e => e != null && e.HasValue)),
+                    DataPointIndex = selectedDataPoints.DataPointIndex,
+                    SeriesIndex = selectedDataPoints.SeriesIndex
                 };
 
                 OnDataPointSelection.InvokeAsync(selection);
             }
         }
+
+        [JSInvokable]
+        public void DataPointEnter(JSDataPointSelection selectedDataPoints)
+        {
+            if (OnDataPointEnter.HasDelegate || ApexPointTooltip != null)
+            {
+                var series = Options.Series.ElementAt(selectedDataPoints.SeriesIndex);
+                var dataPoint = series.Data.ElementAt(selectedDataPoints.DataPointIndex);
+
+                var hoverData = new HoverData<TItem>
+                {
+                    Chart = this,
+                    Series = series,
+                    DataPoint = dataPoint,
+                    DataPointIndex = selectedDataPoints.DataPointIndex,
+                    SeriesIndex = selectedDataPoints.SeriesIndex
+                };
+
+                OnDataPointEnter.InvokeAsync(hoverData);
+
+                if (ApexPointTooltip != null)
+                {
+                    tooltipData = hoverData;
+                    StateHasChanged();
+                }
+
+              
+
+            }
+        }
+
+        [JSInvokable]
+        public void DataPointLeave(JSDataPointSelection selectedDataPoints)
+        {
+            if (OnDataPointLeave.HasDelegate)
+            {
+                var series = Options.Series.ElementAt(selectedDataPoints.SeriesIndex);
+                var dataPoint = series.Data.ElementAt(selectedDataPoints.DataPointIndex);
+
+                var hoverData = new HoverData<TItem>
+                {
+                    Chart = this,
+                    Series = series,
+                    DataPoint = dataPoint,
+                    DataPointIndex = selectedDataPoints.DataPointIndex,
+                    SeriesIndex = selectedDataPoints.SeriesIndex
+                };
+
+                OnDataPointLeave.InvokeAsync(hoverData);
+            }
+        }
+
     }
 }

src/Blazor-ApexCharts/Models/ApexChartOptions.cs

@@ -8,6 +8,8 @@ public class ApexChartOptions<TItem> where TItem : class
     {
         public bool Debug { get; set; }
         public bool HasDataPointSelection { get; internal set; }
+        public bool HasDataPointEnter { get; internal set; }
+        public bool HasDataPointLeave { get; internal set; }
         public bool HasLegendClick { get; internal set; }
 
         /// <summary>