Skip to content

Commit e575b71

Browse files
joadanjoadan
authored
Merge pull request #121 from apexcharts/add-selection-event
Add selection event
2 parents a44a4ca + 175930f commit e575b71

File tree

15 files changed

+429
-54
lines changed

15 files changed

+429
-54
lines changed

‎docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"IIS Express": {
1212
"commandName": "IISExpress",
1313
"launchBrowser": true,
14-
"launchUrl": "methods/multi-charts",
14+
"launchUrl": "events/zoomed",
1515
"environmentVariables": {
1616
"ASPNETCORE_ENVIRONMENT": "Development"
1717
}

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<ApexChart TItem="TimeSeries"
2+
Title="Value"
3+
Options=options1
4+
Height="150"
5+
XAxisType="XAxisType.Datetime"
6+
>
7+
8+
<ApexPointSeries TItem="TimeSeries"
9+
Items="data"
10+
Name="Value"
11+
SeriesType="SeriesType.Line"
12+
XValue="@(e => e.Date)"
13+
YAggregate="@(e => e.Sum(e => e.Value))"
14+
OrderBy="e=>e.X"
15+
Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
16+
</ApexChart>
17+
18+
<ApexChart TItem="TimeSeries"
19+
Title="Quantity"
20+
Options=options2
21+
Height="150"
22+
XAxisType="XAxisType.Datetime"
23+
OnBrushScrolled=BrushScroll>
24+
25+
<ApexPointSeries TItem="TimeSeries"
26+
Items="data"
27+
Name="Quantity"
28+
SeriesType="SeriesType.Bar"
29+
XValue="@(e => e.Date)"
30+
YValue="@(e => e.Quantity)"
31+
OrderBy="e=>e.X"
32+
Stroke="@(new SeriesStroke { Width = 2, Color="#E51C15"})" />
33+
</ApexChart>
34+
35+
<h3 class="mt-2">Selection</h3>
36+
<Row>
37+
<RowCol Auto>
38+
XAxis Min: @XMin.ToString("d")
39+
</RowCol>
40+
<RowCol Auto>
41+
XAxis Max: @XMax.ToString("d")
42+
</RowCol>
43+
</Row>
44+
45+
@code {
46+
private List<TimeSeries> data { get; set; } = new TimeSeriesGenerator(100).TimeSeries;
47+
private ApexChartOptions<TimeSeries> options1 = new();
48+
private ApexChartOptions<TimeSeries> options2 = new();
49+
50+
private DateTimeOffset XMin;
51+
private DateTimeOffset XMax;
52+
53+
protected override void OnInitialized()
54+
{
55+
const string mainChartId = "mainChart";
56+
57+
options1.Chart.Id = mainChartId;
58+
options1.Chart.Toolbar = new Toolbar { AutoSelected = AutoSelected.Pan, Show = false };
59+
60+
XMin = data.Min(e => e.Date).AddDays(30);
61+
XMax = XMin.AddDays(40);
62+
63+
options2.Chart.Toolbar = new Toolbar { Show = false };
64+
options2.Xaxis = new XAxis { TickPlacement = TickPlacement.On };
65+
options2.Chart.Brush = new ApexCharts.Brush { Enabled = true, Target = mainChartId };
66+
options2.Chart.Selection = new Selection
67+
{
68+
Enabled = true,
69+
Xaxis = new SelectionXaxis
70+
{
71+
Min = XMin.ToUnixTimeMilliseconds(),
72+
Max = XMax.ToUnixTimeMilliseconds()
73+
}
74+
};
75+
}
76+
77+
private void BrushScroll(SelectionData<TimeSeries> selection)
78+
{
79+
80+
var min = selection?.XAxis?.Min;
81+
if (min != null)
82+
{
83+
XMin = DateTimeOffset.FromUnixTimeMilliseconds((long)min);
84+
}
85+
86+
87+
var max = selection?.XAxis?.Max;
88+
if (max != null)
89+
{
90+
XMax = DateTimeOffset.FromUnixTimeMilliseconds((long)max);
91+
}
92+
93+
}
94+
95+
}

‎docs/BlazorApexCharts.Docs/Components/Events/BrushedScrolled/BrushScrolled.razor

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

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<ApexChart TItem="TimeSeries"
2+
Title="Quantity"
3+
Options=options
4+
Height="150"
5+
XAxisType="XAxisType.Datetime"
6+
OnSelection=Selected>
7+
8+
<ApexPointSeries TItem="TimeSeries"
9+
Items="data"
10+
Name="Quantity"
11+
SeriesType="SeriesType.Bar"
12+
XValue="@(e => e.Date)"
13+
YValue="@(e => e.Quantity)"
14+
OrderBy="e=>e.X"
15+
Stroke="@(new SeriesStroke { Width = 2, Color="#E51C15"})" />
16+
</ApexChart>
17+
18+
19+
<h3 class="mt-2">Selection</h3>
20+
<Row>
21+
<RowCol Auto>
22+
XAxis Min: @XMin?.ToString("d")
23+
</RowCol>
24+
<RowCol Auto>
25+
XAxis Min: @XMax?.ToString("d")
26+
</RowCol>
27+
</Row>
28+
29+
@code {
30+
private List<TimeSeries> data { get; set; } = new TimeSeriesGenerator(100).TimeSeries;
31+
private ApexChartOptions<TimeSeries> options = new();
32+
private SelectionData<TimeSeries> currentSelection;
33+
34+
private DateTimeOffset? XMin;
35+
private DateTimeOffset? XMax;
36+
37+
protected override void OnInitialized()
38+
{
39+
var selectionStart = data.Min(e => e.Date).AddDays(30);
40+
options.Chart.Toolbar = new Toolbar { Show = false };
41+
options.Xaxis = new XAxis { TickPlacement = TickPlacement.On };
42+
options.Chart.Brush = new ApexCharts.Brush { Enabled = true };
43+
options.Chart.Selection = new ApexCharts.Selection
44+
{
45+
Enabled = true,
46+
Xaxis = new SelectionXaxis
47+
{
48+
Min = selectionStart.ToUnixTimeMilliseconds(),
49+
Max = selectionStart.AddDays(40).ToUnixTimeMilliseconds()
50+
}
51+
};
52+
}
53+
54+
private void Selected(SelectionData<TimeSeries> selection)
55+
{
56+
currentSelection = selection;
57+
58+
var min = selection?.XAxis?.Min;
59+
if (min != null)
60+
{
61+
XMin = DateTimeOffset.FromUnixTimeMilliseconds((long)min);
62+
}
63+
else
64+
{
65+
min = null;
66+
}
67+
68+
var max = selection?.XAxis?.Max;
69+
if (max != null)
70+
{
71+
XMax = DateTimeOffset.FromUnixTimeMilliseconds((long)max);
72+
}
73+
else
74+
{
75+
max = null;
76+
}
77+
}
78+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@page "/events/selection"
2+
3+
<DocExamples Title="Selection">
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/Zoomed/Basic.razor

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<ApexChart TItem="TimeSeries"
2+
Title="Value"
3+
Height="150"
4+
XAxisType="XAxisType.Datetime"
5+
OnZoomed=Zoom>
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+
<h3 class="mt-2">Zoomed</h3>
17+
<Row>
18+
<RowCol Auto>
19+
XAxis Min: @xMin
20+
</RowCol>
21+
<RowCol Auto>
22+
XAxis Max: @xMax
23+
</RowCol>
24+
</Row>
25+
26+
27+
@code {
28+
private List<TimeSeries> timeSeries = new TimeSeriesGenerator(100).TimeSeries;
29+
private DateTimeOffset xMin;
30+
private DateTimeOffset xMax;
31+
32+
33+
private void Zoom(ZoomedData<TimeSeries> zoomedData)
34+
{
35+
36+
if(zoomedData.XAxis?.Min == null)
37+
{
38+
xMin = timeSeries.Min(e => e.Date);
39+
}
40+
else
41+
{
42+
xMin = DateTimeOffset.FromUnixTimeMilliseconds((long)zoomedData.XAxis.Min);
43+
}
44+
45+
46+
if(zoomedData.XAxis?.Max == null)
47+
{
48+
xMax = timeSeries.Max(e => e.Date);
49+
}
50+
else
51+
{
52+
xMax = DateTimeOffset.FromUnixTimeMilliseconds((long)zoomedData.XAxis.Max);
53+
}
54+
}
55+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@page "/events/zoomed"
2+
3+
<DocExamples Title="Zoomed">
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/Features/Performance/Basic.razor

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
@using System.Diagnostics
22
@using System.Text.Json
33

4-
5-
6-
74
<ItemSelect Label="Datapoints" Items=points @bind-SelectedValue=pointsToLoad Changed=LoadData />
85

9-
106
<ApexChart TItem="TimeSeries"
117
Title="Value"
128
Height="150"
@@ -22,7 +18,6 @@
2218
Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
2319
</ApexChart>
2420

25-
2621
@if (isLoading)
2722
{
2823
<h3>Loading<span class="animated-dots"></span></h3>
@@ -32,7 +27,6 @@ else
3227
<h3>@message</h3>
3328
}
3429

35-
3630
@code {
3731
private ApexChart<TimeSeries> chart;
3832
private List<int> points = new List<int> { 100, 1000, 5000, 10000, 15000, 20000 };

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,12 @@
105105
<Icon class="icon" IconType="@Icons.Bolt" />
106106
</MenuItemIcon>
107107
<SubMenu>
108+
<NavbarMenuItem Text="Brush Scrolled" Href="events/brush-scrolled" />
108109
<NavbarMenuItem Text="Data Point Hover" Href="events/data-point-hover" />
109110
<NavbarMenuItem Text="Data Point Selection" Href="events/data-point-selection" />
110111
<NavbarMenuItem Text="Legend Click" Href="events/legend-click" />
111-
112+
<NavbarMenuItem Text="Selection" Href="events/selection" />
113+
<NavbarMenuItem Text="Zoomed" Href="events/zoomed" />
112114
</SubMenu>
113115
</NavbarMenuItem>
114116

0 commit comments

Comments
 (0)