Skip to content

Commit 51d4a7c

Browse files
gvreddy04gvreddy04
authored
Features/demos setup (#2)
* Setup demos with Blazor.Bootstrtap
1 parent 8a0deda commit 51d4a7c

File tree

90 files changed

+3251
-621
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+3251
-621
lines changed

‎BlazorExpress.ChartJS.Demo.RCL/BlazorExpress.ChartJS.Demo.RCL.csproj

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
</ItemGroup>
1212

1313
<ItemGroup>
14+
<PackageReference Include="Blazor.Bootstrap" Version="3.0.0-preview.1" />
1415
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.5" />
1516
<PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />
1617
</ItemGroup>
@@ -20,7 +21,7 @@
2021
</ItemGroup>
2122

2223
<Target Name="EmbedDemos" BeforeTargets="PrepareForBuild">
23-
<!-- Let's embed demos sources into the assembly to show the source at runtime. -->
24+
<!-- Embed demo source code into the assembly to display the source code at runtime. -->
2425
<ItemGroup>
2526
<EmbeddedResource Include="Components\**\*Demo*.razor" />
2627
<EmbeddedResource Include="Components\**\*Snippet*" />

‎BlazorExpress.ChartJS.Demo.RCL/Components/Layout/EmptyLayout.razor

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
@namespace BlazroExpress.ChartJS.Demo.RCL
22
@inherits LayoutComponentBase
33

4-
<Skippy Url="https://github.com/vikramlearning/blazorbootstrap">
4+
<Skippy Url="https://github.com/BlazorExpress/BlazorExpress.ChartJS">
55
<i class="bi bi-star-fill"></i>
6-
<span>If you like Blazor Bootstrap, give it a star on GitHub!</span>
6+
<span>If you like BlazorExpress.ChartJS, give it a star on GitHub!</span>
77
<i class="bi bi-star-fill"></i>
88
</Skippy>
99

1010
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
1111
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
1212
<div class="d-lg-none" style="width: 1.5rem;"></div>
1313

14-
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Blazor Bootstrap">
15-
<img src="/images/logo/logo-white.svg" width="40" height="32" class="d-block my-1" alt="Blazor Bootstrap" />
14+
<a class="navbar-brand p-0 me-0 me-lg-2" href="@homeUrl" aria-label="BlazorExpress.ChartJS">
15+
<img src="/images/logo/logo-white.svg" width="40" height="32" class="d-block my-1" alt="BlazorExpress.ChartJS" />
1616
</a>
1717

1818
<div class="d-flex">
@@ -23,7 +23,7 @@
2323

2424
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
2525
<div class="offcanvas-header px-4 pb-0">
26-
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Blazor Bootstrap</h5>
26+
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">BlazorExpress.ChartJS</h5>
2727
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
2828
</div>
2929

@@ -77,20 +77,20 @@
7777
<div class="container py-4 py-md-5 px-4 px-md-3">
7878
<div class="row">
7979
<div class="col-lg-4 mb-3">
80-
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
81-
<img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap" />
82-
<span class="fs-5">Blazor Bootstrap</span>
80+
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="BlazorExpress.ChartJS">
81+
<img src="logo-180.png" width="40" height="32" class="d-block me-2" alt="BlazorExpress.ChartJS" />
82+
<span class="fs-5">BlazorExpress.ChartJS</span>
8383
</a>
8484
<ul class="list-unstyled small text-muted">
85-
<li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li>
86-
<li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
85+
<li class="mb-2">Designed and built with all the love in the world by the <strong><a href="@githubUrl">BlazorExpress.ChartJS</a></strong> team with the help of our contributors.</li>
86+
<li class="mb-2">Code licensed <a href="https://github.com/BlazorExpress/BlazorExpress.ChartJS/blob/main/LICENSE" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
8787
<li class="mb-2">Currently @version.</li>
8888
</ul>
8989
</div>
9090
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
9191
<h5>Links</h5>
9292
<ul class="list-unstyled">
93-
<li class="mb-2"><a href="/">Home</a></li>
93+
<li class="mb-2"><a href="@homeUrl">Home</a></li>
9494
<li class="mb-2"><a href="@docsUrl" target="_blank" rel="noopener">Docs</a></li>
9595
<li class="mb-2"><a href="@blogUrl" target="_blank" rel="noopener">Blog</a></li>
9696
<li class="mb-2"><a href="@githubUrl" target="_blank" rel="noopener">Github</a></li>
@@ -99,17 +99,15 @@
9999
<div class="col-6 col-lg-2 mb-3">
100100
<h5>Guides</h5>
101101
<ul class="list-unstyled">
102-
<li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li>
102+
<li class="mb-2"><a href="/getting-started">Getting started</a></li>
103103
<li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li>
104-
<li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li>
105104
</ul>
106105
</div>
107106
<div class="col-6 col-lg-2 mb-3">
108107
<h5>Community</h5>
109108
<ul class="list-unstyled">
110109
<li class="mb-2"><a href="@githubIssuesUrl" target="_blank" rel="noopener">Issues</a></li>
111110
<li class="mb-2"><a href="@githubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li>
112-
<li class="mb-2"><a href="@openCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li>
113111
<li class="mb-2"><a href="@stackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
114112
</ul>
115113
</div>

‎BlazorExpress.ChartJS.Demo.RCL/Components/Layout/EmptyLayout.razor.cs

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
public partial class EmptyLayout : LayoutComponentBase
44
{
55
private string version = default!;
6+
private string homeUrl = default!;
67
private string docsUrl = default!;
78
private string blogUrl = default!;
89
private string githubUrl = default!;
@@ -18,6 +19,7 @@ public partial class EmptyLayout : LayoutComponentBase
1819
protected override void OnInitialized()
1920
{
2021
version = $"v{Configuration["version"]}"; // example: v0.6.1
22+
homeUrl = $"{Configuration["urls:homeUrl"]}";
2123
docsUrl = $"{Configuration["urls:docs"]}";
2224
blogUrl = $"{Configuration["urls:blog"]}";
2325
githubUrl = $"{Configuration["urls:github"]}";

‎BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayout.razor

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,31 @@
1+
@using BlazorBootstrap
12
@namespace BlazorExpress.ChartJS.Demo.RCL
23
@inherits MainLayoutBase
34

45
<div class="bb-page">
56

7+
<Sidebar Href="/"
8+
ImageSrc="logo-180.png"
9+
Title="BlazorExpress.ChartJS"
10+
BadgeText="@Version"
11+
DataProvider="SidebarDataProvider"
12+
Style="--bb-sidebar-width: 300px !important;"/>
13+
614
<main class="bb-scrollbar">
715
<div class="content my-4 my-md-4 px-4">
816
@Body
917

1018
<Callout Class="text-center text-bold skippy border-0" HideHeading="true">
11-
<a href="@GithubUrl" class="text-decoration-none" b-09pcjsuuk4="">
12-
<i class="bi bi-star-fill" b-09pcjsuuk4=""></i>
13-
<span b-09pcjsuuk4="">If you like Blazor Bootstrap, give it a star on GitHub!</span>
14-
<i class="bi bi-star-fill" b-09pcjsuuk4=""></i>
19+
<a href="@GithubUrl" class="text-decoration-none">
20+
<i class="bi bi-star-fill"></i>
21+
<span>If you like BlazorExpress.ChartJS, give it a star on GitHub!</span>
22+
<i class="bi bi-star-fill"></i>
1523
</a>
1624
</Callout>
1725
</div>
1826

1927
<MainLayoutBaseFooter Version="@Version"
28+
HomeUrl="@HomeUrl"
2029
DocsUrl="@DocsUrl"
2130
BlogUrl="@BlogUrl"
2231
GithubUrl="@GithubUrl"

‎BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayout.razor.cs

+35
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,39 @@
22

33
public partial class MainLayout : MainLayoutBase
44
{
5+
internal override IEnumerable<NavItem> GetNavItems()
6+
{
7+
navItems ??= new List<NavItem>
8+
{
9+
new (){ Id = "1", Text = "Overview", Href = "/charts/overview", IconName = IconName.HouseDoorFill },
10+
new (){ Id = "2", Text = "Getting Started", Href = "/charts/getting-started", IconName = IconName.Palette2 },
11+
12+
new (){ Id = "3", Text = "Bar Chart", IconName = IconName.BarChartLineFill },
13+
new (){ Id = "301", Text = "Bar", Href = "/charts/bar-chart", IconName = IconName.BarChartLine, ParentId = "3", Match = NavLinkMatch.All },
14+
new (){ Id = "302", Text = "Horizontal", Href = "/charts/bar-chart/horizontal", IconName = IconName.BarChartLine, ParentId = "3", Match = NavLinkMatch.All },
15+
new (){ Id = "303", Text = "Stacked", Href = "/charts/bar-chart/stacked", IconName = IconName.BarChartLine, ParentId = "3", Match = NavLinkMatch.All },
16+
new (){ Id = "304", Text = "Data labels", Href = "/charts/bar-chart/data-labels", IconName = IconName.BarChartLine, ParentId = "3", Match = NavLinkMatch.All },
17+
new (){ Id = "305", Text = "Locale", Href = "/charts/bar-chart/locale", IconName = IconName.BarChartLine, ParentId = "3", Match = NavLinkMatch.All },
18+
19+
new (){ Id = "4", Text = "Doughnut Chart", IconName = IconName.CircleFill, },
20+
new (){ Id = "401", Text = "Doughnut", Href = "/charts/doughnut-chart", IconName = IconName.Circle, ParentId = "4", Match = NavLinkMatch.All },
21+
new (){ Id = "402", Text = "Data labels", Href = "/charts/doughnut-chart/doughnut-labels", IconName = IconName.Circle, ParentId = "4", Match = NavLinkMatch.All },
22+
new (){ Id = "403", Text = "Locale", Href = "/charts/doughnut-chart/locale", IconName = IconName.Circle, ParentId = "4", Match = NavLinkMatch.All },
23+
24+
new (){ Id = "5", Text = "Line Chart", IconName = IconName.GraphUpArrow },
25+
new (){ Id = "500", Text = "Line", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "5", Match = NavLinkMatch.All },
26+
new (){ Id = "500", Text = "Data labels", Href = "/charts/line-chart/data-labels", IconName = IconName.GraphUp, ParentId = "5", Match = NavLinkMatch.All },
27+
new (){ Id = "500", Text = "Tick configuration", Href = "/charts/line-chart/tick-configuration", IconName = IconName.GraphUp, ParentId = "5", Match = NavLinkMatch.All },
28+
new (){ Id = "500", Text = "Locale", Href = "/charts/line-chart/locale", IconName = IconName.GraphUp, ParentId = "5", Match = NavLinkMatch.All },
29+
30+
new (){ Id = "6", Text = "Pie Chart", IconName = IconName.PieChartFill },
31+
new (){ Id = "600", Text = "Pie", Href = "/charts/pie-chart", IconName = IconName.PieChart, ParentId = "6", Match = NavLinkMatch.All },
32+
new (){ Id = "600", Text = "Data labels", Href = "/charts/pie-chart/data-labels", IconName = IconName.PieChart, ParentId = "6", Match = NavLinkMatch.All },
33+
new (){ Id = "600", Text = "Legend position", Href = "/charts/pie-chart/legend", IconName = IconName.PieChart, ParentId = "6", Match = NavLinkMatch.All },
34+
new (){ Id = "600", Text = "Locale", Href = "/charts/pie-chart/locale", IconName = IconName.PieChart, ParentId = "6", Match = NavLinkMatch.All },
35+
36+
};
37+
38+
return navItems;
39+
}
540
}

‎BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBase.cs

+16
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
public class MainLayoutBase : LayoutComponentBase
44
{
55
private string version = default!;
6+
private string homeUrl = default!;
67
private string docsUrl = default!;
78
private string blogUrl = default!;
89
private string githubUrl = default!;
@@ -13,11 +14,15 @@ public class MainLayoutBase : LayoutComponentBase
1314
private string githubDiscussionsUrl = default!;
1415
private string stackoverflowUrl = default!;
1516

17+
internal Sidebar sidebar = default!;
18+
internal IEnumerable<NavItem> navItems = default!;
19+
1620
[Inject] public IConfiguration Configuration { get; set; } = default!;
1721

1822
protected override void OnInitialized()
1923
{
2024
version = $"v{Configuration["version"]}"; // example: v0.6.1
25+
homeUrl = $"{Configuration["urls:homeUrl"]}";
2126
docsUrl = $"{Configuration["urls:docs"]}";
2227
blogUrl = $"{Configuration["urls:blog"]}";
2328
githubUrl = $"{Configuration["urls:github"]}";
@@ -30,7 +35,18 @@ protected override void OnInitialized()
3035
base.OnInitialized();
3136
}
3237

38+
internal virtual async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
39+
{
40+
if (navItems is null)
41+
navItems = GetNavItems();
42+
43+
return await Task.FromResult(request.ApplyTo(navItems));
44+
}
45+
46+
internal virtual IEnumerable<NavItem> GetNavItems() => new List<NavItem>();
47+
3348
public string Version => version;
49+
public string HomeUrl => homeUrl;
3450
public string DocsUrl => docsUrl;
3551
public string BlogUrl => blogUrl;
3652
public string GithubUrl => githubUrl;

‎BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor

+10-11
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,39 @@
55
<div class="container px-4 px-md-3">
66
<div class="row">
77
<div class="col-lg-4 mb-3">
8-
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
9-
<img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap">
10-
<span class="fs-5">Blazor Bootstrap</span>
8+
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="@HomeUrl" aria-label="Bootstrap">
9+
<img src="logo-180.png" width="32" height="32" class="d-block me-2" alt="Blazor Bootstrap">
10+
<span class="fs-5">BlazorExpress.ChartJS</span>
1111
</a>
1212
<ul class="list-unstyled small text-muted">
13-
<li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li>
14-
<li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
13+
<li class="mb-2">Designed and built with all the love in the world by the <strong><a href="@GithubUrl">BlazorExpress.ChartJS</a></strong> team with the help of our contributors.</li>
14+
<li class="mb-2">Code licensed <a href="https://github.com/BlazorExpress/BlazorExpress.ChartJS/blob/main/LICENSE" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
1515
<li class="mb-2">Currently @Version.</li>
1616
</ul>
1717
</div>
1818
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
1919
<h5>Links</h5>
2020
<ul class="list-unstyled">
2121
<li class="mb-2"><a href="/">Home</a></li>
22-
<li class="mb-2"><a href="@DocsUrl" target="_blank" rel="noopener">Docs</a></li><!--!-->
23-
<li class="mb-2"><a href="@BlogUrl" target="_blank" rel="noopener">Blog</a></li>
22+
@* <li class="mb-2"><a href="@DocsUrl" target="_blank" rel="noopener">Docs</a></li>
23+
<li class="mb-2"><a href="@BlogUrl" target="_blank" rel="noopener">Blog</a></li> *@
2424
<li class="mb-2"><a href="@GithubUrl" target="_blank" rel="noopener">GitHub</a></li>
2525
</ul>
2626
</div>
2727
<div class="col-6 col-lg-2 mb-3">
2828
<h5>Guides</h5>
2929
<ul class="list-unstyled">
30-
<li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li>
30+
<li class="mb-2"><a href="/getting-started">Getting started</a></li>
3131
<li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li>
32-
<li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li>
32+
@* <li class="mb-2"><a href="#" target="_blank">Starter templates</a></li> *@
3333
</ul>
3434
</div>
3535
<div class="col-6 col-lg-2 mb-3">
3636
<h5>Community</h5>
3737
<ul class="list-unstyled">
3838
<li class="mb-2"><a href="@GithubIssuesUrl" target="_blank" rel="noopener">Issues</a></li>
3939
<li class="mb-2"><a href="@GithubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li>
40-
<li class="mb-2"><a href="@OpenCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li>
41-
<li class="mb-2"><a href="@StackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
40+
@* <li class="mb-2"><a href="@StackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li> *@
4241
</ul>
4342
</div>
4443
<div class="col-6 col-lg-2 mb-3"></div>

‎BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor.cs

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
public partial class MainLayoutBaseFooter : ComponentBase
44
{
55
[Parameter] public string? Version { get; set; }
6+
[Parameter] public string? HomeUrl { get; set; }
67
[Parameter] public string? DocsUrl { get; set; }
78
[Parameter] public string? BlogUrl { get; set; }
89
[Parameter] public string? GithubUrl { get; set; }

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation.razor

Whitespace-only changes.

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_01.razor

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@attribute [Route(pageUrl)]
2+
3+
<PageHeroSection PageUrl="@pageUrl"
4+
Title="@title"
5+
Heading="@heading"
6+
Description="@description"
7+
ImageUrl="@imageUrl" />
8+
9+
<Prerequisites />
10+
11+
<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
12+
<div class="mb-3">
13+
In the following example, a categorical 12-color palette is used.
14+
</div>
15+
<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
16+
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
17+
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
18+
</BlazorBootstrap.Callout>
19+
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
20+
21+
@code {
22+
private const string pageUrl = "/charts/bar-chart";
23+
private const string title = "Blazor Bar Chart";
24+
private const string heading = "Blazor Bar Chart";
25+
private const string description = "A Blazor bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
26+
private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update
27+
}

0 commit comments

Comments
 (0)