Skip to content

Commit 2804093

Browse files
joadanjoadan
authored
Merge pull request #290 from thirstyape/4-add-remaining-events
4 add remaining events
2 parents 3d2fce8 + bd7b080 commit 2804093

File tree

17 files changed

+861
-18
lines changed

17 files changed

+861
-18
lines changed

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<ApexChart TItem="TimeSeries"
2+
Title="Value"
3+
Height="150"
4+
XAxisType="XAxisType.Datetime"
5+
OnBeforeResetZoom="BeforeResetZoom">
6+
7+
<ApexPointSeries TItem="TimeSeries"
8+
Items="timeSeries"
9+
Name="Value"
10+
SeriesType="SeriesType.Line"
11+
XValue="@(e => e.Date.ToUnixTimeMilliseconds())"
12+
YValue="@( e=> e.Value)"
13+
Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
14+
</ApexChart>
15+
16+
@if (IsReset)
17+
{
18+
<h3 class="mt-2">Zoom Reset</h3>
19+
<Row>
20+
<RowCol Auto>
21+
Zoom has been reset @ResetCount times
22+
</RowCol>
23+
</Row>
24+
}
25+
26+
@code {
27+
private List<TimeSeries> timeSeries = new TimeSeriesGenerator(100).TimeSeries;
28+
private int ResetCount;
29+
private bool IsReset;
30+
31+
private SelectionXAxis BeforeResetZoom(object zoomedData)
32+
{
33+
ResetCount++;
34+
IsReset = true;
35+
StateHasChanged();
36+
37+
return new SelectionXAxis()
38+
{
39+
Max = timeSeries.Max(e => e.Date).AddDays(7).ToUnixTimeMilliseconds(),
40+
Min = timeSeries.Min(e => e.Date).AddDays(-7).ToUnixTimeMilliseconds()
41+
};
42+
}
43+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@page "/events/before-reset-zoom"
2+
3+
<DocExamples Title="Before Reset Zoom">
4+
5+
<Description>
6+
Click the home icon on the chart to reset the zoom
7+
</Description>
8+
9+
<ChildContent>
10+
<CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
11+
<Snippet>
12+
<Basic />
13+
</Snippet>
14+
</CodeSnippet>
15+
16+
17+
</ChildContent>
18+
19+
</DocExamples>

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<ApexChart TItem="TimeSeries"
2+
Title="Value"
3+
Height="150"
4+
XAxisType="XAxisType.Datetime"
5+
OnBeforeZoom="BeforeZoom">
6+
7+
<ApexPointSeries TItem="TimeSeries"
8+
Items="timeSeries"
9+
Name="Value"
10+
SeriesType="SeriesType.Line"
11+
XValue="@(e => e.Date.ToUnixTimeMilliseconds())"
12+
YValue="@( e=> e.Value)"
13+
Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
14+
</ApexChart>
15+
16+
@if (HasTriggered)
17+
{
18+
<h3 class="mt-2">Zoom</h3>
19+
<Row>
20+
<RowCol Auto>
21+
Adjusted min from @originalMin to @newMin
22+
</RowCol>
23+
<RowCol Auto>
24+
Adjusted max from @originalMax to @newMax
25+
</RowCol>
26+
</Row>
27+
}
28+
29+
@code {
30+
private List<TimeSeries> timeSeries = new TimeSeriesGenerator(100).TimeSeries;
31+
private bool HasTriggered;
32+
33+
private DateTimeOffset originalMin;
34+
private DateTimeOffset newMin;
35+
private DateTimeOffset originalMax;
36+
private DateTimeOffset newMax;
37+
38+
private SelectionXAxis BeforeZoom(SelectionXAxis zoomedData)
39+
{
40+
var difference = zoomedData.Max - zoomedData.Min;
41+
42+
originalMax = DateTimeOffset.FromUnixTimeMilliseconds((long)zoomedData.Max);
43+
newMax = DateTimeOffset.FromUnixTimeMilliseconds((long)(zoomedData.Max + (difference * 0.1M)));
44+
originalMin = DateTimeOffset.FromUnixTimeMilliseconds((long)zoomedData.Min);
45+
newMin = DateTimeOffset.FromUnixTimeMilliseconds((long)(zoomedData.Min - (difference * 0.1M)));
46+
47+
HasTriggered = true;
48+
StateHasChanged();
49+
50+
return new SelectionXAxis()
51+
{
52+
Max = zoomedData.Max + (difference * 0.1M),
53+
Min = zoomedData.Min - (difference * 0.1M)
54+
};
55+
}
56+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@page "/events/before-zoom"
2+
3+
<DocExamples Title="Before Zoom">
4+
5+
<ChildContent>
6+
<CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
7+
<Snippet>
8+
<Basic />
9+
</Snippet>
10+
</CodeSnippet>
11+
12+
13+
</ChildContent>
14+
15+
</DocExamples>

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<DemoContainer>
2+
<ApexChart TItem="Order"
3+
Title="Order Data"
4+
Options="Options"
5+
OnAnimationEnd="OnAnimationEnd"
6+
OnBeforeMount="OnBeforeMount"
7+
OnMounted="OnMounted"
8+
OnUpdated="OnUpdated"
9+
@ref=Chart>
10+
11+
<ApexPointSeries TItem="Order"
12+
Items="Orders"
13+
SeriesType="@SeriesType.Area"
14+
Name="Gross Value"
15+
XValue="@(e => e.Country)"
16+
YAggregate="@(e => e.Sum(e => e.GrossValue))"
17+
OrderByDescending="e=>e.Y" />
18+
19+
<ApexPointSeries TItem="Order"
20+
Items="Orders"
21+
SeriesType="@SeriesType.Area"
22+
Name="Net Value"
23+
XValue="@(e => e.Country)"
24+
YAggregate="@(e => e.Sum(e => e.NetValue))"
25+
OrderByDescending="e=>e.Y" />
26+
</ApexChart>
27+
</DemoContainer>
28+
29+
<br />
30+
<br />
31+
32+
<h1>Chart Setup Progress (@(Progress.Count / 4D * 100)%)</h1>
33+
<ul>
34+
@foreach (var item in Progress)
35+
{
36+
<li>@item</li>
37+
}
38+
</ul>
39+
40+
@code {
41+
private List<Order> Orders { get; set; }
42+
private ApexChart<Order> Chart;
43+
private List<string> Progress = new();
44+
45+
private ApexChartOptions<Order> Options { get; set; } = new()
46+
{
47+
NoData = new ApexCharts.NoData { Text = "No Data..." }
48+
};
49+
50+
protected override async Task OnInitializedAsync()
51+
{
52+
await LoadData();
53+
}
54+
55+
private async Task LoadData()
56+
{
57+
await Task.Delay(3000); //Simulate Slow api
58+
59+
Orders = SampleData.GetOrders();
60+
StateHasChanged();
61+
await Chart.UpdateSeriesAsync(true);
62+
}
63+
64+
private void OnBeforeMount()
65+
{
66+
Progress.Add("Preparing to mount chart");
67+
}
68+
69+
private void OnMounted()
70+
{
71+
Progress.Add("Chart has been mounted");
72+
}
73+
74+
private void OnAnimationEnd()
75+
{
76+
Progress.Add("Animating chart complete");
77+
}
78+
79+
private void OnUpdated()
80+
{
81+
Progress.Add("Chart data updated");
82+
}
83+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@page "/events/chart-setup"
2+
3+
<DocExamples Title="Chart Setup">
4+
5+
<CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
6+
<Snippet>
7+
<Basic />
8+
</Snippet>
9+
</CodeSnippet>
10+
11+
</DocExamples>

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<DemoContainer>
2+
<ApexChart TItem="Order"
3+
Title="Order Net Value"
4+
OnClick=OnClick
5+
@ref=chart>
6+
7+
<ApexPointSeries TItem="Order"
8+
Items="Orders"
9+
Name="Gross Value"
10+
SeriesType="SeriesType.Line"
11+
XValue="@(e => e.Country)"
12+
YAggregate="@(e => e.Sum(e => e.GrossValue))"
13+
OrderByDescending="e=>e.X" />
14+
15+
<ApexPointSeries TItem="Order"
16+
Items="Orders"
17+
Name="Net Value"
18+
SeriesType="SeriesType.Line"
19+
XValue="@(e => e.Country)"
20+
YAggregate="@(e => e.Sum(e => e.NetValue))"
21+
OrderByDescending="e=>e.X" />
22+
</ApexChart>
23+
</DemoContainer>
24+
25+
@if (selectedData != null && selectedData.DataPoint != null)
26+
{
27+
<Alert BackgroundColor="TablerColor.Primary">
28+
<h3>You clicked @selectedData.DataPoint.X @selectedData.DataPoint.Items.Sum(e=> e.NetValue) (@selectedData.DataPoint.Items.Sum(e=> e.GrossValue)) </h3>
29+
</Alert>
30+
}
31+
else if (selectedData != null)
32+
{
33+
<Alert BackgroundColor="TablerColor.Primary">
34+
<h3>You clicked the chart but not a data point</h3>
35+
</Alert>
36+
}
37+
38+
@code {
39+
private List<Order> Orders { get; set; } = SampleData.GetOrders();
40+
private SelectedData<Order> selectedData;
41+
private ApexChart<Order> chart;
42+
43+
private void OnClick(SelectedData<Order> data)
44+
{
45+
selectedData = data;
46+
}
47+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@page "/events/click"
2+
3+
<DocExamples Title="Click">
4+
5+
<Description>
6+
Click on the chart to trigger 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/Events/MouseHover/Basic.razor

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

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@page "/events/mouse-hover"
2+
3+
<DocExamples Title="Mouse Hover">
4+
5+
<Description>
6+
Move the mouse over the chart to trigger 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>

0 commit comments

Comments
 (0)