Skip to content

Commit 5a6dd2a

Browse files
gvreddy04gvreddy04
authored
Demos and Docs update (#746)
* Demos, Docs update
1 parent 6e65322 commit 5a6dd2a

File tree

9 files changed

+270
-46
lines changed

9 files changed

+270
-46
lines changed

‎BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"version": "3.0.0-preview.1",
33
"release": {
4-
"short_description": "Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
4+
"short_description": "Charts, Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
55
},
66
"urls": {
77
"docs": "//docs.blazorbootstrap.com/docs/getting-started/blazor-webassembly",

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor

+3
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@
4242
<SectionHeading Size="HeadingSize.H4" Text="Data labels" PageUrl="@pageUrl" HashTagName="data-labels" />
4343
<Demo Type="typeof(LineChart_Demo_04_Datalabels)" Tabs="true" />
4444

45+
<SectionHeading Size="HeadingSize.H4" Text="Tick Configuration" PageUrl="@pageUrl" HashTagName="tick-configuration" />
46+
<Demo Type="typeof(LineChart_Demo_05_Tick_Configuration)" Tabs="true" />
47+
4548
@code {
4649
private readonly string pageUrl = "/charts/line-chart";
4750
private readonly string title = "Blazor Line Chart";

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<LineChart @ref="lineChart" Width="500" Height="200" />
2+
3+
<div class="mt-5">
4+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToStart()"> Alignment: start </Button>
5+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToCenter()"> Alignment: center (default) </Button>
6+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="async () => await ChangeTicksAlignmentToEnd()"> Alignment: end </Button>
7+
</div>
8+
9+
@code {
10+
private LineChart lineChart = default!;
11+
private LineChartOptions lineChartOptions = default!;
12+
private ChartData chartData = default!;
13+
14+
private int datasetsCount;
15+
private int labelsCount;
16+
17+
private Random random = new();
18+
19+
protected override void OnInitialized()
20+
{
21+
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
22+
lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
23+
24+
// set ticks color
25+
lineChartOptions.Scales.X!.Ticks = new ChartAxesTicks { Color = "red" };
26+
lineChartOptions.Scales.Y!.Ticks = new ChartAxesTicks { Color = ColorUtility.CategoricalTwelveColors[4] };
27+
}
28+
29+
protected override async Task OnAfterRenderAsync(bool firstRender)
30+
{
31+
if (firstRender)
32+
{
33+
await lineChart.InitializeAsync(chartData, lineChartOptions);
34+
}
35+
await base.OnAfterRenderAsync(firstRender);
36+
}
37+
38+
private async Task ChangeTicksAlignmentToStart()
39+
{
40+
lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.Start;
41+
await lineChart.UpdateAsync(chartData, lineChartOptions);
42+
}
43+
44+
private async Task ChangeTicksAlignmentToCenter()
45+
{
46+
lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.Center;
47+
await lineChart.UpdateAsync(chartData, lineChartOptions);
48+
}
49+
50+
private async Task ChangeTicksAlignmentToEnd()
51+
{
52+
lineChartOptions.Scales.X!.Ticks!.TicksAlignment = TicksAlignment.End;
53+
await lineChart.UpdateAsync(chartData, lineChartOptions);
54+
}
55+
56+
#region Data Preparation
57+
58+
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
59+
{
60+
var datasets = new List<IChartDataset>();
61+
62+
for (var index = 0; index < numberOfDatasets; index++)
63+
{
64+
datasets.Add(GetRandomLineChartDataset());
65+
}
66+
67+
return datasets;
68+
}
69+
70+
private LineChartDataset GetRandomLineChartDataset()
71+
{
72+
var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
73+
74+
datasetsCount += 1;
75+
76+
return new LineChartDataset
77+
{
78+
Label = $"Team {datasetsCount}",
79+
Data = GetRandomData(),
80+
BackgroundColor = new List<string> { c.ToRgbString() },
81+
BorderColor = new List<string> { c.ToRgbString() },
82+
BorderWidth = new List<double> { 2 },
83+
HoverBorderWidth = new List<double> { 4 },
84+
PointBackgroundColor = new List<string> { c.ToRgbString() },
85+
PointRadius = new List<int> { 0 }, // hide points
86+
PointHoverRadius = new List<int> { 4 }
87+
};
88+
}
89+
90+
private List<double> GetRandomData()
91+
{
92+
var data = new List<double>();
93+
for (var index = 0; index < labelsCount; index++)
94+
{
95+
data.Add(random.Next(200));
96+
}
97+
98+
return data;
99+
}
100+
101+
private List<string> GetDefaultDataLabels(int numberOfLabels)
102+
{
103+
var labels = new List<string>();
104+
for (var index = 0; index < numberOfLabels; index++)
105+
{
106+
labels.Add(GetNextDataLabel());
107+
}
108+
109+
return labels;
110+
}
111+
112+
private string GetNextDataLabel()
113+
{
114+
labelsCount += 1;
115+
return $"Day {labelsCount}";
116+
}
117+
118+
#endregion Data Preparation
119+
120+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor

+13-13
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
</div>
7878
<div class="col-sm-4 mb-2">
7979
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts">
80-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartLineFill" class="me-2" /> Charts</h4>
80+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartLineFill" class="me-2" /> Charts <Badge Color="BadgeColor.Success">Updated</Badge></h4>
8181
</a>
8282
</div>
8383
<div class="col-sm-4 mb-2">
@@ -87,7 +87,7 @@
8787
</div>
8888
<div class="col-sm-4 mb-2">
8989
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/confirm-dialog">
90-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.QuestionDiamondFill" class="me-2" /> Confirm Dialog <Badge Color="BadgeColor.Success">Updated</Badge></h4>
90+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.QuestionDiamondFill" class="me-2" /> Confirm Dialog</h4>
9191
</a>
9292
</div>
9393
<div class="col-sm-4 mb-2">
@@ -117,7 +117,7 @@
117117
</div>
118118
<div class="col-sm-4 mb-2">
119119
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/modals">
120-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Modals</h4>
120+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Modals <Badge Color="BadgeColor.Success">Updated</Badge></h4>
121121
</a>
122122
</div>
123123
<div class="col-sm-4 mb-2">
@@ -137,7 +137,7 @@
137137
</div>
138138
<div class="col-sm-4 mb-2">
139139
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/pdf-viewer">
140-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer <Badge Color="BadgeColor.Success">Updated</Badge></h4>
140+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer</h4>
141141
</a>
142142
</div>
143143
<div class="col-sm-4 mb-2">
@@ -162,7 +162,7 @@
162162
</div>
163163
<div class="col-sm-4 mb-2">
164164
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ribbon">
165-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon <Badge Color="BadgeColor.Danger">New</Badge></h4>
165+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon</h4>
166166
</a>
167167
</div>
168168
<div class="col-sm-4 mb-2">
@@ -172,17 +172,17 @@
172172
</div>
173173
<div class="col-sm-4 mb-2">
174174
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar">
175-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar</h4>
175+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar <Badge Color="BadgeColor.Success">Updated</Badge></h4>
176176
</a>
177177
</div>
178178
<div class="col-sm-4 mb-2">
179179
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar2">
180-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ListNested" class="me-2" /> Sidebar 2</h4>
180+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ListNested" class="me-2" /> Sidebar 2 <Badge Color="BadgeColor.Success">Updated</Badge></h4>
181181
</a>
182182
</div>
183183
<div class="col-sm-4 mb-2">
184184
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sortable-list">
185-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowsMove" class="me-2" /> Sortable List <Badge Color="BadgeColor.Danger">Preview</Badge></h4>
185+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ArrowsMove" class="me-2" /> Sortable List</h4>
186186
</a>
187187
</div>
188188
<div class="col-sm-4 mb-2">
@@ -197,7 +197,7 @@
197197
</div>
198198
<div class="col-sm-4 mb-2">
199199
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/tabs">
200-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowPlus" class="me-2" /> Tabs <Badge Color="BadgeColor.Success">Updated</Badge></h4>
200+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowPlus" class="me-2" /> Tabs</h4>
201201
</a>
202202
</div>
203203
<div class="col-sm-4 mb-2">
@@ -270,22 +270,22 @@
270270
<div class="row g-3 mt-5">
271271
<div class="col-sm-4 mb-2">
272272
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/bar-chart">
273-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartFill" class="me-2" /> Bar Chart</h4>
273+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartFill" class="me-2" /> Bar Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
274274
</a>
275275
</div>
276276
<div class="col-sm-4 mb-2">
277277
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/doughnut-chart">
278-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CircleFill" class="me-2" /> Doughnut Chart</h4>
278+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CircleFill" class="me-2" /> Doughnut Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
279279
</a>
280280
</div>
281281
<div class="col-sm-4 mb-2">
282282
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/line-chart">
283-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUp" class="me-2" /> Line Chart</h4>
283+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUp" class="me-2" /> Line Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
284284
</a>
285285
</div>
286286
<div class="col-sm-4 mb-2">
287287
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/pie-chart">
288-
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.PieChart" class="me-2" /> Pie Chart</h4>
288+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.PieChart" class="me-2" /> Pie Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
289289
</a>
290290
</div>
291291
</div>

‎BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
66

7-
<h1>Blazor Sortable List <Badge Color="BadgeColor.Danger">Preview</Badge></h1>
7+
<h1>Blazor Sortable List</h1>
88
<div class="lead mb-3">
99
The Blazor Bootstrap Sortable List component, built on top of <b>SortableJS</b>, enables drag-and-drop reordering of lists.
1010
</div>

‎BlazorBootstrap.Demo.Server/appsettings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"AllowedHosts": "*",
99
"version": "3.0.0-preview.1",
1010
"release": {
11-
"short_description": "Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
11+
"short_description": "Charts, Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
1212
},
1313
"urls": {
1414
"docs": "//docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8",

‎BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"version": "3.0.0-preview.1",
33
"release": {
4-
"short_description": "Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
4+
"short_description": "Charts, Grid, Modal, Sidebar, Sidebar2 updates, and other improvements!!!"
55
},
66
"urls": {
77
"docs": "//docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8",

0 commit comments

Comments
 (0)