Merge pull request #121 from apexcharts/add-selection-event

Add selection event

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

@@ -11,7 +11,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "launchUrl": "methods/multi-charts",
+      "launchUrl": "events/zoomed",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

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

@@ -0,0 +1,95 @@
+<ApexChart TItem="TimeSeries"
+           Title="Value"
+           Options=options1
+           Height="150"
+           XAxisType="XAxisType.Datetime"
+          >
+
+    <ApexPointSeries TItem="TimeSeries"
+                     Items="data"
+                     Name="Value"
+                     SeriesType="SeriesType.Line"
+                     XValue="@(e => e.Date)"
+                     YAggregate="@(e => e.Sum(e => e.Value))"
+                     OrderBy="e=>e.X"
+                     Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
+</ApexChart>
+
+<ApexChart TItem="TimeSeries"
+           Title="Quantity"
+           Options=options2
+           Height="150"
+           XAxisType="XAxisType.Datetime"
+            OnBrushScrolled=BrushScroll>
+
+    <ApexPointSeries TItem="TimeSeries"
+                     Items="data"
+                     Name="Quantity"
+                     SeriesType="SeriesType.Bar"
+                     XValue="@(e => e.Date)"
+                     YValue="@(e => e.Quantity)"
+                     OrderBy="e=>e.X"
+                     Stroke="@(new SeriesStroke { Width = 2, Color="#E51C15"})" />
+</ApexChart>
+
+<h3 class="mt-2">Selection</h3>
+    <Row>
+        <RowCol Auto>
+            XAxis Min: @XMin.ToString("d")
+        </RowCol>
+        <RowCol Auto>
+             XAxis Max: @XMax.ToString("d")
+        </RowCol>
+    </Row>
+
+@code {
+    private List<TimeSeries> data { get; set; } = new TimeSeriesGenerator(100).TimeSeries;
+    private ApexChartOptions<TimeSeries> options1 = new();
+    private ApexChartOptions<TimeSeries> options2 = new();
+
+    private DateTimeOffset XMin;
+    private DateTimeOffset XMax;
+
+    protected override void OnInitialized()
+    {
+        const string mainChartId = "mainChart";
+
+        options1.Chart.Id = mainChartId;
+        options1.Chart.Toolbar = new Toolbar { AutoSelected = AutoSelected.Pan, Show = false };
+
+        XMin = data.Min(e => e.Date).AddDays(30);
+        XMax = XMin.AddDays(40);
+
+        options2.Chart.Toolbar = new Toolbar { Show = false };
+        options2.Xaxis = new XAxis { TickPlacement = TickPlacement.On };
+        options2.Chart.Brush = new ApexCharts.Brush { Enabled = true, Target = mainChartId };
+        options2.Chart.Selection = new Selection
+            {
+                Enabled = true,
+                Xaxis = new SelectionXaxis
+                {
+                    Min = XMin.ToUnixTimeMilliseconds(),
+                    Max = XMax.ToUnixTimeMilliseconds()
+                }
+            };
+    }
+
+  private void BrushScroll(SelectionData<TimeSeries> selection)
+    {
+
+        var min = selection?.XAxis?.Min;
+        if (min != null)
+        {
+            XMin = DateTimeOffset.FromUnixTimeMilliseconds((long)min);
+        }
+
+
+         var max = selection?.XAxis?.Max;
+        if (max != null)
+        {
+            XMax = DateTimeOffset.FromUnixTimeMilliseconds((long)max);
+        }
+
+    }
+
+    }

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

@@ -0,0 +1,12 @@
+@page "/events/brush-scrolled"
+
+<DocExamples Title="BrushScrolled">
+
+    <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
+        <Snippet>
+            <Basic />
+        </Snippet>
+    </CodeSnippet>
+
+
+</DocExamples>

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

@@ -0,0 +1,78 @@
+<ApexChart TItem="TimeSeries"
+           Title="Quantity"
+           Options=options
+           Height="150"
+           XAxisType="XAxisType.Datetime"
+           OnSelection=Selected>
+
+    <ApexPointSeries TItem="TimeSeries"
+                     Items="data"
+                     Name="Quantity"
+                     SeriesType="SeriesType.Bar"
+                     XValue="@(e => e.Date)"
+                     YValue="@(e => e.Quantity)"
+                     OrderBy="e=>e.X"
+                     Stroke="@(new SeriesStroke { Width = 2, Color="#E51C15"})" />
+</ApexChart>
+
+
+<h3 class="mt-2">Selection</h3>
+    <Row>
+        <RowCol Auto>
+            XAxis Min: @XMin?.ToString("d")
+        </RowCol>
+        <RowCol Auto>
+             XAxis Min: @XMax?.ToString("d")
+        </RowCol>
+    </Row>
+
+@code {
+    private List<TimeSeries> data { get; set; } = new TimeSeriesGenerator(100).TimeSeries;
+    private ApexChartOptions<TimeSeries> options = new();
+    private SelectionData<TimeSeries> currentSelection;
+
+    private DateTimeOffset? XMin;
+    private DateTimeOffset? XMax;
+
+    protected override void OnInitialized()
+    {
+        var selectionStart = data.Min(e => e.Date).AddDays(30);
+        options.Chart.Toolbar = new Toolbar { Show = false };
+        options.Xaxis = new XAxis { TickPlacement = TickPlacement.On };
+        options.Chart.Brush = new ApexCharts.Brush { Enabled = true };
+        options.Chart.Selection = new ApexCharts.Selection
+            {
+                Enabled = true,
+                Xaxis = new SelectionXaxis
+                {
+                    Min = selectionStart.ToUnixTimeMilliseconds(),
+                    Max = selectionStart.AddDays(40).ToUnixTimeMilliseconds()
+                }
+            };
+    }
+
+    private void Selected(SelectionData<TimeSeries> selection)
+    {
+        currentSelection = selection;
+
+        var min = selection?.XAxis?.Min;
+        if (min != null)
+        {
+            XMin = DateTimeOffset.FromUnixTimeMilliseconds((long)min);
+        }
+        else
+        {
+            min = null;
+        }
+
+         var max = selection?.XAxis?.Max;
+        if (max != null)
+        {
+            XMax = DateTimeOffset.FromUnixTimeMilliseconds((long)max);
+        }
+        else
+        {
+            max = null;
+        }
+    }
+    }

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

@@ -0,0 +1,15 @@
+@page "/events/selection"
+
+<DocExamples Title="Selection">
+
+    <ChildContent>
+        <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
+            <Snippet>
+                <Basic />
+            </Snippet>
+        </CodeSnippet>
+
+
+    </ChildContent>
+
+</DocExamples>

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

@@ -0,0 +1,55 @@
+<ApexChart TItem="TimeSeries"
+           Title="Value"
+           Height="150"
+           XAxisType="XAxisType.Datetime"
+           OnZoomed=Zoom>
+
+    <ApexPointSeries TItem="TimeSeries"
+                     Items="timeSeries"
+                     Name="Value"
+                     SeriesType="SeriesType.Line"
+                     XValue="@(e => e.Date.ToUnixTimeMilliseconds())"
+                     YValue="@( e=> e.Value)"
+                     Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
+</ApexChart>
+
+<h3 class="mt-2">Zoomed</h3>
+    <Row>
+        <RowCol Auto>
+            XAxis Min: @xMin
+        </RowCol>
+        <RowCol Auto>
+             XAxis Max: @xMax
+        </RowCol>
+    </Row>
+
+
+@code {
+    private List<TimeSeries> timeSeries = new TimeSeriesGenerator(100).TimeSeries;
+    private DateTimeOffset xMin;
+    private DateTimeOffset xMax;
+
+
+    private void Zoom(ZoomedData<TimeSeries> zoomedData)
+    {
+
+        if(zoomedData.XAxis?.Min == null)
+        {
+            xMin = timeSeries.Min(e => e.Date);
+        }
+        else
+        {
+            xMin = DateTimeOffset.FromUnixTimeMilliseconds((long)zoomedData.XAxis.Min);
+        }
+
+
+        if(zoomedData.XAxis?.Max == null)
+        {
+            xMax = timeSeries.Max(e => e.Date);
+        }
+        else
+        {
+            xMax = DateTimeOffset.FromUnixTimeMilliseconds((long)zoomedData.XAxis.Max);
+        }
+    }
+    }

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

@@ -0,0 +1,15 @@
+@page "/events/zoomed"
+
+<DocExamples Title="Zoomed">
+
+    <ChildContent>
+        <CodeSnippet Title="Basic" ClassName=@typeof(Basic).ToString()>
+            <Snippet>
+                <Basic />
+            </Snippet>
+        </CodeSnippet>
+
+
+    </ChildContent>
+
+</DocExamples>

docs/BlazorApexCharts.Docs/Components/Features/Performance/Basic.razor

@@ -1,12 +1,8 @@
 @using System.Diagnostics
 @using System.Text.Json
 
-
-
-
 <ItemSelect Label="Datapoints" Items=points @bind-SelectedValue=pointsToLoad Changed=LoadData />
 
-
 <ApexChart TItem="TimeSeries"
            Title="Value"
            Height="150"
@@ -22,7 +18,6 @@
                      Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
 </ApexChart>
 
-
 @if (isLoading)
 {
     <h3>Loading<span class="animated-dots"></span></h3>
@@ -32,7 +27,6 @@ else
     <h3>@message</h3>
 }
 
-
 @code {
     private ApexChart<TimeSeries> chart;
     private List<int> points = new List<int> { 100, 1000, 5000, 10000, 15000, 20000 };

docs/BlazorApexCharts.Docs/Shared/MainNavigation.razor

@@ -105,10 +105,12 @@
                 <Icon class="icon" IconType="@Icons.Bolt" />
             </MenuItemIcon>
             <SubMenu>
+                <NavbarMenuItem Text="Brush Scrolled" Href="events/brush-scrolled" />
                 <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" />
-
+                <NavbarMenuItem Text="Selection" Href="events/selection" />
+                <NavbarMenuItem Text="Zoomed" Href="events/zoomed" />
             </SubMenu>
         </NavbarMenuItem>