Skip to content

Commit 4c877f0

Browse files
joadanjoadan
committed
Added MouseEnterLeave events
Added support for custom Tooltip
1 parent 1a3701c commit 4c877f0

File tree

12 files changed

+271
-76
lines changed

12 files changed

+271
-76
lines changed

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
<Row>
3+
<RowCol Md=12 Lg=6>
4+
<ApexChart TItem="Order"
5+
Title="Order Net Value"
6+
OnDataPointEnter="DataPointEnter"
7+
OnDataPointLeave=DataPointLeave>
8+
9+
<ApexPointSeries TItem="Order"
10+
Items="Orders"
11+
Name="Net Value"
12+
SeriesType="SeriesType.Line"
13+
XValue="@(e => e.Country)"
14+
YAggregate="@(e => e.Sum(e => e.NetValue))"
15+
OrderByDescending="e=>e.X" />
16+
17+
<ApexPointSeries TItem="Order"
18+
Items="Orders"
19+
Name="Gross Value"
20+
SeriesType="SeriesType.Bar"
21+
XValue="@(e => e.Country)"
22+
YAggregate="@(e => e.Sum(e => e.GrossValue))"
23+
OrderByDescending="e=>e.X" />
24+
</ApexChart>
25+
</RowCol>
26+
<RowCol Md=12 Lg=6>
27+
@if (hoverData != null)
28+
{
29+
<Row>
30+
<RowCol Auto>
31+
<div class=p-3>
32+
@{
33+
var dataPoint = (DataPoint<Order>)hoverData.DataPoint;
34+
<h1>@hoverData.DataPoint.X</h1>
35+
<div>Name: @hoverData.Series.Name</div>
36+
<div>Value: @dataPoint.Y?.ToString("N0")</div>
37+
}
38+
</div>
39+
</RowCol>
40+
</Row>
41+
}
42+
</RowCol>
43+
</Row>
44+
45+
46+
47+
48+
49+
50+
@code {
51+
private List<Order> Orders { get; set; } = SampleData.GetOrders();
52+
private HoverData<Order> hoverData;
53+
54+
public void DataPointEnter(HoverData<Order> hoverData)
55+
{
56+
this.hoverData = hoverData;
57+
}
58+
59+
public void DataPointLeave(HoverData<Order> hoverData)
60+
{
61+
this.hoverData = null;
62+
}
63+
64+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@page "/events/data-point-hover"
2+
3+
<DocExamples Title="Data Point Hover">
4+
5+
<Description>
6+
Move the mouse over an datapoint to triger an event
7+
</Description>
8+
9+
<ChildContent>
10+
<CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
11+
<Snippet>
12+
<Basic />
13+
</Snippet>
14+
</CodeSnippet>
15+
</ChildContent>
16+
17+
18+
</DocExamples>

‎docs/BlazorApexCharts.Docs/Components/Features/Formatters/CustomTooltip.razor

Lines changed: 0 additions & 49 deletions
This file was deleted.

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
@page "/features/formatters"
22

33
<DocExamples Title="Formatters">
4-
5-
<CodeSnippet Title="Custom Tooltip" ClassName=@typeof(CustomTooltip).ToString()>
6-
<Snippet>
7-
<CustomTooltip />
8-
</Snippet>
9-
</CodeSnippet>
104

11-
@*
125
<CodeSnippet Title="Use javascript" ClassName=@typeof(UseJavascript).ToString()>
136
<Snippet>
147
<UseJavascript />
@@ -39,8 +32,7 @@
3932
<Snippet>
4033
<UseDotnet />
4134
</Snippet>
42-
</CodeSnippet>*@
43-
35+
</CodeSnippet>
4436

4537

4638

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<DemoContainer>
2+
<ApexChart TItem="Order"
3+
Title="Order Net Value"
4+
Options=options>
5+
6+
<ApexPointTooltip>
7+
<div class="p-1">
8+
@{
9+
var dataPoint = (DataPoint<Order>)context.DataPoint;
10+
<h3>@context.DataPoint.X</h3>
11+
12+
<Row class="mb-2">
13+
<RowCol Auto>
14+
<Badge style="background-color:#FF0000">Gross Value</Badge>
15+
</RowCol>
16+
<RowCol Auto>
17+
<span class="@(context.SeriesIndex == 0 ? "strong": "")">
18+
@dataPoint.Items.Sum(e=> e.GrossValue).ToString("n0")
19+
</span>
20+
</RowCol>
21+
</Row>
22+
23+
<Row>
24+
<RowCol Auto>
25+
<Badge style="background-color:#000080">Net Value</Badge>
26+
</RowCol>
27+
<RowCol Auto>
28+
<span class="@(context.SeriesIndex == 1 ? "strong": "")">
29+
@dataPoint.Items.Sum(e=> e.NetValue).ToString("n0")
30+
</span>
31+
</RowCol>
32+
</Row>
33+
}
34+
</div>
35+
</ApexPointTooltip>
36+
37+
<ChildContent>
38+
<ApexPointSeries TItem="Order"
39+
Items="Orders"
40+
Name="Gross Value"
41+
SeriesType="SeriesType.Line"
42+
XValue="@(e => e.Country)"
43+
YAggregate="@(e => e.Sum(e => e.GrossValue))"
44+
OrderByDescending="e=>e.Y"
45+
Stroke="@(new SeriesStroke { Color = "#FF0000", Width=4})" />
46+
47+
<ApexPointSeries TItem="Order"
48+
Items="Orders"
49+
Name="Net Value"
50+
SeriesType="SeriesType.Line"
51+
XValue="@(e => e.Country)"
52+
YAggregate="@(e => e.Sum(e => e.NetValue))"
53+
OrderByDescending="e=>e.Y"
54+
Stroke="@(new SeriesStroke { Color = "#000080", Width=4})" />
55+
</ChildContent>
56+
</ApexChart>
57+
58+
</DemoContainer>
59+
60+
@code {
61+
private List<Order> Orders { get; set; } = SampleData.GetOrders();
62+
private ApexChartOptions<Order> options { get; set; } = new ApexChartOptions<Order>();
63+
64+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@page "/features/tooltip"
2+
3+
<DocExamples Title="Tooltip">
4+
5+
<CodeSnippet Title="Custom" ClassName=@typeof(CustomTooltip).ToString()>
6+
<Snippet>
7+
<CustomTooltip />
8+
</Snippet>
9+
</CodeSnippet>
10+
11+
12+
</DocExamples>

‎docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@
9999
<Icon class="icon" IconType="@Icons.Bolt" />
100100
</MenuItemIcon>
101101
<SubMenu>
102+
<NavbarMenuItem Text="Data Point Hover" Href="events/data-point-hover" />
102103
<NavbarMenuItem Text="Data Point Selection" Href="events/data-point-selection" />
103104
<NavbarMenuItem Text="Legend Click" Href="events/legend-click" />
104105

105-
106106
</SubMenu>
107107
</NavbarMenuItem>
108108

@@ -118,6 +118,7 @@
118118
<NavbarMenuItem Text="Legend" Href="features/legend" />
119119
<NavbarMenuItem Text="Performance" Href="features/performance" />
120120
<NavbarMenuItem Text="Syncronized charts" Href="features/syncronized" />
121+
<NavbarMenuItem Text="Tooltip" Href="features/tooltip" />
121122
</SubMenu>
122123

123124
</NavbarMenuItem>

‎src/Blazor-ApexCharts/ApexChart.razor

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1-
2-
@typeparam TItem
1+
@typeparam TItem
32
@namespace ApexCharts
43

54
<div @ref=ChartContainer id="@chartId" />
65
<CascadingValue Value="(ApexChart<TItem>)this" Name="Chart">
76
@ChildContent
7+
8+
@if (ApexPointTooltip != null)
9+
{
10+
<div style="display:none" id="apex-tooltip-@ChartId">
11+
@if (tooltipData != null)
12+
{
13+
@ApexPointTooltip(tooltipData)
14+
}
15+
</div>
16+
}
17+
818
</CascadingValue>

0 commit comments

Comments
 (0)