Skip to content

Commit 7a34178

Browse 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 <[email protected]> * Update sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Investments.razor Co-authored-by: Copilot <[email protected]> * Update sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/SearchService.cs Co-authored-by: Copilot <[email protected]> * Update sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/SearchService.cs --------- Co-authored-by: Copilot <[email protected]>
1 parent a179eb3 commit 7a34178

File tree

12 files changed

+298
-129
lines changed

12 files changed

+298
-129
lines changed

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

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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‎

Lines 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)