Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 7a34178

Browse filesBrowse files
dimodiCopilot
dimodi
and
Copilot
authored
Polish new Financial Dashboard sample app (#329)
* Polish new Financial Dashboard sample app * Make StockChart data more random * Add Volume information to StockChart * Update sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/StockPointService.cs Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Investments.razor Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/SearchService.cs Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/SearchService.cs --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent a179eb3 commit 7a34178
Copy full SHA for 7a34178

File tree

Expand file treeCollapse file tree

12 files changed

+298
-129
lines changed
Filter options
Expand file treeCollapse file tree

12 files changed

+298
-129
lines changed

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Layout/MainLayout.razor

Copy file name to clipboardExpand all lines: sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Layout/MainLayout.razor
+49-3Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@layout TelerikLayout
33

44
@inject NavigationManager NavManager
5+
@inject SearchService SearchService
56
@inject UserService UserService
67

78
<TelerikMediaQuery Media="(min-width: 1201px)" OnChange="@( (bool matches) => IsOverMaxWidth = matches )" />
@@ -34,9 +35,15 @@
3435
</AppBarSection>
3536
<AppBarSpacer />
3637
<AppBarSection>
37-
<TelerikAutoComplete Placeholder="Search"
38+
<TelerikAutoComplete OnRead="@OnAutoCompleteRead"
39+
TItem="@SearchablePage"
40+
@bind-Value="@AutoCompleteValue"
41+
ValueField="@nameof(SearchablePage.Title)"
42+
Filterable="true"
43+
FilterOperator="@StringFilterOperator.Contains"
44+
OnChange="@OnAutoCompleteValueChange"
45+
Placeholder="Search app content or components"
3846
Rounded="@ThemeConstants.AutoComplete.Rounded.Large"
39-
TItem="@string"
4047
Class="search-textbox">
4148
<AutoCompletePrefixTemplate>
4249
<TelerikSvgIcon Icon="@SvgIconsNS.SvgIcon.Search" />
@@ -95,7 +102,7 @@
95102
</div>
96103

97104
@code {
98-
private IEnumerable<NavItem> DrawerData { get; set; } = new List<NavItem>() {
105+
private readonly IEnumerable<NavItem> DrawerData = new List<NavItem>() {
99106
new NavItem("Menu", SvgIconsNS.SvgIcon.Menu, string.Empty),
100107
new NavItem(),
101108
new NavItem("Overview", SvgIconsNS.SvgIcon.Grid, "/blazor-financial-dashboard/"),
@@ -111,6 +118,8 @@
111118

112119
private NavItem? DrawerSelectedItem { get; set; }
113120

121+
private string AutoCompleteValue { get; set; } = string.Empty;
122+
114123
private bool IsOverMaxWidth { get; set; }
115124
private bool IsLargeScreen { get; set; }
116125
private bool IsMediumOrLargeScreen { get; set; }
@@ -152,6 +161,43 @@
152161
}
153162
}
154163

164+
private void OnAutoCompleteValueChange(object currentValue)
165+
{
166+
string currentStringValue = currentValue?.ToString()?.ToLowerInvariant() ?? "";
167+
168+
if (string.IsNullOrEmpty(currentStringValue))
169+
{
170+
return;
171+
}
172+
173+
SearchablePage? matchedPage = FilteredAutoCompleteData.FirstOrDefault(x => x.Title.ToLowerInvariant().Contains(currentStringValue));
174+
175+
if (matchedPage is not null && matchedPage.Title != DrawerSelectedItem?.Text)
176+
{
177+
NavItem? matchedNavItem = DrawerData.FirstOrDefault(x => x.Text == matchedPage.Title);
178+
179+
if (matchedNavItem is not null)
180+
{
181+
DrawerSelectedItem = matchedNavItem;
182+
NavManager.NavigateTo(matchedNavItem.Url);
183+
AutoCompleteValue = string.Empty;
184+
FilteredAutoCompleteData = new();
185+
}
186+
}
187+
}
188+
189+
private List<SearchablePage> FilteredAutoCompleteData { get; set; } = new();
190+
191+
private async Task OnAutoCompleteRead(AutoCompleteReadEventArgs args)
192+
{
193+
var result = await SearchService.Read(args.Request);
194+
195+
args.Data = result.Data;
196+
args.Total = result.Total;
197+
198+
FilteredAutoCompleteData = result.Data.Cast<SearchablePage>().ToList();
199+
}
200+
155201
protected override async Task OnInitializedAsync()
156202
{
157203
await GetAppUser();

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Investments.razor

Copy file name to clipboardExpand all lines: sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Investments.razor
+79-108Lines changed: 79 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@inherits ResponsiveComponent
44

55
@inject InvestmentService InvestmentService
6+
@inject StockPointService StockPointService
67

78
<PageTitle>Investments</PageTitle>
89

@@ -48,113 +49,70 @@
4849
</UICard>
4950

5051
<UICard Title="Stock Chart">
52+
<TelerikTabStrip @bind-ActiveTabIndex="@TabStripActiveTabIndex" Class="no-content-padding">
5153

52-
@* Navigator basic setup *@
53-
54-
<TelerikStockChart @ref="@StockChartRef"
55-
DateField="@nameof(StockDataPoint.Date)"
56-
Height="480px">
57-
58-
<StockChartNavigator>
59-
60-
<StockChartNavigatorSeriesItems>
61-
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
62-
Name="Product 1"
63-
Data="@StockChartProduct1Data"
64-
Field="@nameof(StockDataPoint.High)"
65-
CategoryField="@nameof(StockDataPoint.Date)">
66-
</StockChartNavigatorSeries>
67-
68-
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
69-
Name="Product 2"
70-
Data="@StockChartProduct2Data"
71-
Field="@nameof(StockDataPoint.High)"
72-
CategoryField="@nameof(StockDataPoint.Date)">
73-
</StockChartNavigatorSeries>
74-
</StockChartNavigatorSeriesItems>
75-
76-
</StockChartNavigator>
77-
78-
<StockChartCategoryAxes>
79-
<StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Months"></StockChartCategoryAxis>
80-
</StockChartCategoryAxes>
81-
82-
<StockChartSeriesItems>
83-
<StockChartSeries Type="StockChartSeriesType.Candlestick"
84-
Name="Product 1"
85-
Data="@StockChartProduct1Data"
86-
OpenField="@nameof(StockDataPoint.Open)"
87-
CloseField="@nameof(StockDataPoint.Close)"
88-
HighField="@nameof(StockDataPoint.High)"
89-
LowField="@nameof(StockDataPoint.Low)">
90-
<StockChartSeriesTooltip Visible="false"></StockChartSeriesTooltip>
91-
</StockChartSeries>
92-
93-
<StockChartSeries Type="StockChartSeriesType.Candlestick"
94-
Name="Product 2"
95-
Data="@StockChartProduct2Data"
96-
OpenField="@nameof(StockDataPoint.Open)"
97-
CloseField="@nameof(StockDataPoint.Close)"
98-
HighField="@nameof(StockDataPoint.High)"
99-
LowField="@nameof(StockDataPoint.Low)">
100-
<StockChartSeriesTooltip Visible="false"></StockChartSeriesTooltip>
101-
</StockChartSeries>
102-
</StockChartSeriesItems>
103-
104-
</TelerikStockChart>
105-
106-
@code {
107-
public List<StockDataPoint> StockChartProduct1Data { get; set; }
108-
public List<StockDataPoint> StockChartProduct2Data { get; set; }
109-
110-
public async Task GenerateChartData()
111-
{
112-
StockChartProduct1Data = new List<StockDataPoint>()
113-
{
114-
new StockDataPoint(new DateTime(2019, 1, 1), 41.62m, 40.12m, 41.69m, 39.81m, 2632000),
115-
new StockDataPoint(new DateTime(2019, 2, 1), 39.88m, 40.12m, 41.12m, 39.75m, 3584700),
116-
new StockDataPoint(new DateTime(2019, 3, 1), 42m, 42.62m, 43.31m, 41.38m, 7631700),
117-
new StockDataPoint(new DateTime(2019, 4, 1), 42.25m, 43.06m, 43.31m, 41.12m, 4922200)
118-
};
119-
120-
StockChartProduct2Data = new List<StockDataPoint>()
121-
{
122-
new StockDataPoint(new DateTime(2019, 1, 1), 39m, 38m, 44m, 37m, 26320),
123-
new StockDataPoint(new DateTime(2019, 2, 1), 37m, 38m, 41m, 40m, 35847),
124-
new StockDataPoint(new DateTime(2019, 3, 1), 42m, 43m, 45m, 41m, 76317),
125-
new StockDataPoint(new DateTime(2019, 4, 1), 40m, 42m, 43m, 42m, 49222)
126-
};
127-
128-
await Task.FromResult(StockChartProduct1Data);
129-
await Task.FromResult(StockChartProduct2Data);
130-
}
131-
132-
public class StockDataPoint
54+
@foreach (var stockChartItem in StockChartData)
13355
{
134-
public StockDataPoint() { }
135-
136-
public StockDataPoint(DateTime date, decimal open, decimal close, decimal high, decimal low, int volume)
137-
{
138-
Date = date;
139-
Open = open;
140-
Close = close;
141-
High = high;
142-
Low = low;
143-
Volume = volume;
144-
}
145-
public DateTime Date { get; set; }
146-
147-
public decimal Open { get; set; }
148-
149-
public decimal Close { get; set; }
150-
151-
public decimal High { get; set; }
152-
153-
public decimal Low { get; set; }
154-
155-
public int Volume { get; set; }
56+
<TabStripTab Title="@stockChartItem.Value.Name" @key="@stockChartItem">
57+
<TelerikStockChart @ref="stockChartItem.Value.StockChartRef"
58+
DateField="@nameof(StockPoint.Date)"
59+
Width="96%"
60+
Height="480px">
61+
62+
<StockChartNavigator>
63+
<StockChartNavigatorSeriesItems>
64+
<StockChartNavigatorSeries Type="StockChartSeriesType.Line"
65+
Name="@stockChartItem.Value.Name"
66+
Data="@stockChartItem.Value.StockChartData"
67+
Field="@nameof(StockPoint.High)"
68+
CategoryField="@nameof(StockPoint.Date)"
69+
Color="var(--kendo-color-series-c)">
70+
</StockChartNavigatorSeries>
71+
</StockChartNavigatorSeriesItems>
72+
</StockChartNavigator>
73+
74+
<StockChartCategoryAxes>
75+
<StockChartCategoryAxis BaseUnit="@ChartCategoryAxisBaseUnit.Fit"
76+
AxisCrossingValue="@(new object[] { 0, int.MaxValue })" />
77+
</StockChartCategoryAxes>
78+
79+
<StockChartValueAxes>
80+
<StockChartValueAxis Name="candle-axis" Min="0" Max="60" />
81+
<StockChartValueAxis Name="volumne-axis" Min="0" Max="400_000" />
82+
</StockChartValueAxes>
83+
84+
<StockChartSeriesItems>
85+
<StockChartSeries Type="StockChartSeriesType.Candlestick"
86+
Name="@stockChartItem.Value.Name"
87+
Data="@stockChartItem.Value.StockChartData"
88+
OpenField="@nameof(StockPoint.Open)"
89+
CloseField="@nameof(StockPoint.Close)"
90+
HighField="@nameof(StockPoint.High)"
91+
LowField="@nameof(StockPoint.Low)"
92+
Aggregate="@ChartSeriesAggregate.Avg"
93+
Color="var(--kendo-color-series-c)"
94+
Axis="candle-axis">
95+
</StockChartSeries>
96+
<StockChartSeries Type="StockChartSeriesType.Column"
97+
Name="@stockChartItem.Value.Name"
98+
Data="@stockChartItem.Value.StockChartData"
99+
Field="@nameof(StockPoint.Volume)"
100+
Aggregate="@ChartSeriesAggregate.Sum"
101+
Color="var(--kendo-color-series-c)"
102+
Axis="volumne-axis">
103+
<StockChartSeriesTooltip>
104+
<Template>
105+
@{ var dataItem = (StockPoint)context.DataItem; }
106+
@dataItem.Volume.ToString("C2")
107+
</Template>
108+
</StockChartSeriesTooltip>
109+
</StockChartSeries>
110+
</StockChartSeriesItems>
111+
112+
</TelerikStockChart>
113+
</TabStripTab>
156114
}
157-
}
115+
</TelerikTabStrip>
158116

159117
</UICard>
160118

@@ -163,7 +121,17 @@
163121
private List<AssetInfo> ListViewData { get; set; } = new();
164122

165123
private TelerikChart? PieChartRef { get; set; }
166-
private TelerikStockChart? StockChartRef { get; set; }
124+
125+
private int TabStripActiveTabIndex { get; set; }
126+
127+
private Dictionary<int, InvestmentStockChart> StockChartData { get; set; } = new()
128+
{
129+
{ 0, new InvestmentStockChart() { Name = "Solar Flux"} },
130+
{ 1, new InvestmentStockChart() { Name = "Quantum" } },
131+
{ 2, new InvestmentStockChart() { Name = "Neopharm" } },
132+
{ 3, new InvestmentStockChart() { Name = "Solaris" } },
133+
{ 4, new InvestmentStockChart() { Name = "Globefin Bank" } }
134+
};
167135

168136
private string GetChangeColor(double amount)
169137
{
@@ -179,7 +147,7 @@
179147
public override Task OnViewPortResize()
180148
{
181149
PieChartRef?.Refresh();
182-
StockChartRef?.Refresh();
150+
StockChartData[TabStripActiveTabIndex].StockChartRef?.Refresh();
183151

184152
return base.OnViewPortResize();
185153
}
@@ -189,8 +157,11 @@
189157
PieChartData = await InvestmentService.ReadTotalInvestments();
190158
ListViewData = await InvestmentService.ReadTopMovers();
191159

192-
await GenerateChartData();
160+
foreach (var item in StockChartData)
161+
{
162+
item.Value.StockChartData = await StockPointService.Read();
163+
}
193164

194165
await base.OnInitializedAsync();
195166
}
196-
}
167+
}

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Settings.razor

Copy file name to clipboardExpand all lines: sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Settings.razor
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<h1>Settings</h1>
99

10-
<UICard Title="Personal Information" ColSpanOnLargeScreen="8" ColSpanOnMediumScreen="6">
10+
<UICard Title="Personal Information" ColSpanOnLargeScreen="12" ColSpanOnMediumScreen="12">
1111
<TelerikForm Model="@AppUser"
1212
Columns="@( IsLargeScreen ? 2 : 1 )"
1313
ColumnSpacing="var(--kendo-spacing-4)"
@@ -28,10 +28,6 @@
2828
</TelerikForm>
2929
</UICard>
3030

31-
<UICard Title="Calendar" ColSpanOnLargeScreen="4" ColSpanOnMediumScreen="6">
32-
<TelerikCalendar Size="@ThemeConstants.Calendar.Size.Small" />
33-
</UICard>
34-
3531
<UICard Title="Card Information" ColSpanOnLargeScreen="8" ColSpanOnMediumScreen="6">
3632
<TelerikForm Model="@UserCard"
3733
Columns="@( IsLargeScreen ? 2 : 1 )"
@@ -58,7 +54,11 @@
5854
</TelerikForm>
5955
</UICard>
6056

61-
<UICard Title="Weather" ColSpanOnLargeScreen="4" ColSpanOnMediumScreen="6"></UICard>
57+
<UICard Title="Calendar" ColSpanOnLargeScreen="4" ColSpanOnMediumScreen="6">
58+
<TelerikCalendar Size="@ThemeConstants.Calendar.Size.Small" />
59+
</UICard>
60+
61+
@* <UICard Title="Weather" ColSpanOnLargeScreen="4" ColSpanOnMediumScreen="6"></UICard> *@
6262

6363
<TelerikNotification @ref="@NotificationRef"
6464
HorizontalPosition="@NotificationHorizontalPosition.Center"

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Shared/UICard.razor

Copy file name to clipboardExpand all lines: sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Shared/UICard.razor
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="uicard k-col-span-12 k-col-span-md-@ColSpanOnMediumScreen k-col-span-lg-@ColSpanOnLargeScreen
2-
k-d-flex k-flex-col k-gap-@TitleGap k-p-4 k-bg-surface-alt k-overflow-x-auto k-rounded-xl">
2+
k-d-flex k-flex-col k-gap-@TitleGap k-p-4 k-bg-surface-alt k-rounded-xl">
33
<div class="k-d-flex k-flex-col k-gap-1">
44
<h2>@Title</h2>
55
@if (!string.IsNullOrEmpty(SubTitle))
@@ -29,11 +29,11 @@
2929
public string TitleGap { get; set; } = "4";
3030

3131
[Parameter]
32-
public string ContentGap { get; set; } = "0";
33-
34-
[Parameter]
35-
public string ContentClass { get; set; } = string.Empty;
36-
32+
public string ContentGap { get; set; } = "0";
33+
34+
[Parameter]
35+
public string ContentClass { get; set; } = string.Empty;
36+
3737
[Parameter]
3838
public RenderFragment? ChildContent { get; set; }
3939
}

‎sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Data/InvestmentStockChart.cs

Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using Telerik.Blazor.Components;
2+
3+
namespace BlazorFinancialDashboard.Data;
4+
5+
public class InvestmentStockChart
6+
{
7+
public string Name { get; set; } = string.Empty;
8+
9+
public List<StockPoint> StockChartData { get; set; } = new();
10+
11+
public TelerikStockChart? StockChartRef { get; set; }
12+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.