Merge pull request #434 from LayTec-AG/feature/event-for-3d-plots

Use different navbar in examples
LayTec-AG · Jun 17, 2024 · f3fc751 · f3fc751
2 parents d04403f + b5005d5
commit f3fc751
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 31 deletions.
diff --git a/Plotly.Blazor.Examples/Pages/Scatter3DPage.razor b/Plotly.Blazor.Examples/Pages/Scatter3DPage.razor
@@ -1,4 +1,4 @@
-@page "/Scatter3DPage"
+@page "/scatter-3d"
 
 
 <Example Title="Scatter Chart 3D" Url="Plotly.Blazor.Examples/Components/RibbonChart.razor">

diff --git a/Plotly.Blazor.Examples/Shared/NavMenu.razor b/Plotly.Blazor.Examples/Shared/NavMenu.razor
@@ -5,31 +5,15 @@
 </MudPaper>
 
 <MudDrawer @bind-Open="@open" ClipMode="DrawerClipMode.Never" Breakpoint="Breakpoint.Xl" Elevation="0" Variant="@DrawerVariant.Responsive">
-    <MudNavMenu>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}")">Scatter</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}Scatter3DPage")">Scatter3D</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}live-data")">Live Data</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}bar")">Bar</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}pie")">Pie</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}box")">Box</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}candlestick")">Candlestick</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}multipleaxes")">Multiple Axes</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}shapes")">Shapes</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}map")">Map</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}surface")">Surface</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}ribbon")">Ribbon</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}heatmap")">HeatMap</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}scattergl")">ScatterGl</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}indicator")">Indicator</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}smith")">Smith</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}line-polar")">Line Polar</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}area-polar")">Area Polar</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}categorical-polar")">Categorical Polar</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}direction-polar")">Polar Direction</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}sector-polar")">Polar Sector</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}hover")">Hover Event</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}click")">Click Event</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}legendclick")">Legend Click Event</MudNavLink>
-        <MudNavLink Match="NavLinkMatch.All" Href="@($"{NavManager.BaseUri}relayout")">Relayout Event</MudNavLink>
-    </MudNavMenu>
+    <MudPaper Class="d-flex flex-column overflow-x-auto pa-4 gap-4" Height="100vh">
+        @foreach (var pageInfo in pageInfos)
+        {
+            var uri = new Uri(NavManager.Uri);
+            var color = uri.AbsolutePath.TrimStart('/').Equals(pageInfo.Page.TrimStart('/')) ? Color.Primary : Color.Default;
+            var href = $"{NavManager.BaseUri}{pageInfo.Page}";
+
+            <MudLink Class="d-flex" Color="@color" Typo="Typo.h4" Href="@href">@pageInfo.Title</MudLink>
+        }
+    </MudPaper>
+
 </MudDrawer>
diff --git a/Plotly.Blazor.Examples/Shared/NavMenu.razor.cs b/Plotly.Blazor.Examples/Shared/NavMenu.razor.cs
@@ -1,6 +1,5 @@
-using System;
-using System.Dynamic;
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
 
 namespace Plotly.Blazor.Examples.Shared
 {
@@ -10,6 +9,56 @@ public partial class NavMenu
 
         [Inject] private NavigationManager NavManager { get; set; }
 
+        protected override void OnInitialized()
+        {
+            NavManager.LocationChanged += HandleLocationChanged;
+        }
+
+        private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
+        {
+            InvokeAsync(StateHasChanged);
+        }
+
+        public void Dispose()
+        {
+            NavManager.LocationChanged -= HandleLocationChanged;
+        }
+
+        private class PageInfo
+        {
+            public string Page { get; set; }
+            public string Title { get; set; }
+        }
+
+        private List<PageInfo> pageInfos = new()
+        {
+            new() { Page = "", Title = "Scatter"},
+            new() { Page = "scatter-3d", Title = "Scatter3D" },
+            new() { Page = "live-data", Title = "Live Data" },
+            new() { Page = "bar", Title = "Bar" },
+            new() { Page = "pie", Title = "Pie" },
+            new() { Page = "box", Title = "Box" },
+            new() { Page = "candlestick", Title = "Candlestick" },
+            new() { Page = "multipleaxes", Title = "Multiple Axes" },
+            new() { Page = "shapes", Title = "Shapes" },
+            new() { Page = "map", Title = "Map" },
+            new() { Page = "surface", Title = "Surface" },
+            new() { Page = "ribbon", Title = "Ribbon" },
+            new() { Page = "heatmap", Title = "HeatMap" },
+            new() { Page = "scattergl", Title = "ScatterGl" },
+            new() { Page = "indicator", Title = "Indicator" },
+            new() { Page = "smith", Title = "Smith" },
+            new() { Page = "line-polar", Title = "Line Polar" },
+            new() { Page = "area-polar", Title = "Area Polar" },
+            new() { Page = "categorical-polar", Title = "Categorical Polar" },
+            new() { Page = "direction-polar", Title = "Polar Direction" },
+            new() { Page = "sector-polar", Title = "Polar Sector" },
+            new() { Page = "hover", Title = "Hover Event" },
+            new() { Page = "click", Title = "Click Event" },
+            new() { Page = "legendclick", Title = "Legend Click Event" },
+            new() { Page = "relayout", Title = "Relayout Event" }
+        };
+
         private void OpenOrCloseDrawer()
         {
             open = !open;

diff --git a/Plotly.Blazor/Plotly.Blazor.xml b/Plotly.Blazor/Plotly.Blazor.xml
@@ -885,6 +885,14 @@
                  In some cases this may be not be set.
             </remarks>
         </member>
+        <member name="P:Plotly.Blazor.Interop.RelayoutEventData.ZRange">
+            <summary>
+                The z-axis of the layout. [z0, z1].
+            </summary>
+            <remarks>
+                 In some cases this may be not be set.
+            </remarks>
+        </member>
         <member name="T:Plotly.Blazor.ITrace">
             <summary>
                 The trace interface.