Skip to content

Commit bd7b080

Browse files
thirstyapethirstyape
committed
Bugfix and Docs update
Add docs page for BeforeResetZoom Add docs page for BeforeZoom Add docs page for Scrolled Add docs page for Click Add docs page for MouseMove and MouseLeave Add docs page for BeforeMount, Mount, AnimationEnd, and Updated Fix serialization issue in JS beforeZoom callback
1 parent d028d64 commit bd7b080

File tree

14 files changed

+468
-1
lines changed

14 files changed

+468
-1
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)