Skip to content

Commit a19e19a

Browse files
gvreddy04gvreddy04
authored
Getting started page updates (#3)
1 parent 7512761 commit a19e19a

8 files changed

Lines changed: 147 additions & 16 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/GettingStarted.razor‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,51 @@
11
@attribute [Route(pageUrl)]
2+
@attribute [Route(pageUrl2)]
23

34
<PageHeroSection PageUrl="@pageUrl"
45
Title="@title"
56
Heading="@heading"
67
Description="@description"
78
ImageUrl="@imageUrl" />
89

9-
<Prerequisites />
10+
<SectionHeading Size="HeadingSize.H4" Text="Install Nuget Package" PageUrl="@pageUrl" HashTagName="install-nuget-package" />
11+
<div class="mb-3">
12+
Looking to quickly add <b>BlazorExpress.ChartJS</b> to your project? Use NuGet package manager.
13+
</div>
14+
<CodeSnippet File="~\Components\Pages\GettingStarted\Getting_Started_Snippet_01_Install.txt" />
1015

11-
<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
16+
<SectionHeading Size="HeadingSize.H4" Text="Add script references" PageUrl="@pageUrl" HashTagName="add-script-references" />
1217
<div class="mb-3">
13-
In the following example, a categorical 12-color palette is used.
18+
Insert the following references into the <b>body</b> section of the <b>wwwroot/index.html</b> file, immediately after the <b>_framework/blazor.webassembly.js</b> reference:
1419
</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(DoughnutChart_Demo_01_Examples)" Tabs="true" /> *@
20+
<CodeSnippet File="~\Components\Pages\GettingStarted\Getting_Started_Snippet_02_Scripts.html" />
21+
22+
<SectionHeading Size="HeadingSize.H4" Text="Register services" PageUrl="@pageUrl" HashTagName="register-services" />
23+
<div class="mb-3">
24+
Register tag helpers in <b>_Imports.razor</b>.
25+
</div>
26+
<CodeSnippet File="~\Components\Pages\GettingStarted\Getting_Started_Snippet_03_Register.txt" />
2027

2128
@code {
2229
private const string pageUrl = "/charts/getting-started";
23-
private const string title = "Blazor Doughnut Chart";
24-
private const string heading = "Blazor Doughnut Chart";
25-
private const string description = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.";
30+
private const string pageUrl2 = "/charts/getting-started/blazor-webassembly-net-8";
31+
private const string title = "Getting started - Blazor WebAssembly (.NET 8)";
32+
private const string heading = "Getting started - Blazor WebAssembly (.NET 8)";
33+
private const string description = "Get started with the Enterprise-class Component library built on the Blazor and Chart.js JavaScript library.";
2634
private const string imageUrl = "https://i.imgur.com/xEPhAsW.png";
35+
36+
[Inject]
37+
private NavigationManager _navigationManager { get; set; } = default!;
38+
39+
protected override void OnInitialized()
40+
{
41+
try
42+
{
43+
if (_navigationManager.Uri.Replace(_navigationManager.BaseUri, "").Contains("charts/getting-started"))
44+
_navigationManager.NavigateTo(pageUrl2);
45+
}
46+
catch
47+
{
48+
// do nothing
49+
}
50+
}
2751
}

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_01_Install.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Install-Package BlazorExpress.ChartJS -Version 1.0.0-preview1

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_02_Scripts.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
2+
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script src="_content/BlazorExpress.ChartJS/blazorexpress.chartjs.js"></script>

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_03_Register.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@using BlazorExpress.ChartJS

‎BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Index.razor‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<li><a href="/charts/pie-chart">Pie Chart</a></li>
2525
</ol>
2626

27-
<BlazorBootstrap.Callout Color="CalloutColor.Info">
27+
<BlazorBootstrap.Callout Color="BlazorBootstrap.CalloutColor.Info">
2828
We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions.
2929
</BlazorBootstrap.Callout>
3030

@@ -48,10 +48,11 @@
4848
try
4949
{
5050
if (_navigationManager.Uri.Replace(_navigationManager.BaseUri, "").Equals(""))
51-
_navigationManager.NavigateTo("/charts/overview");
52-
} catch
51+
_navigationManager.NavigateTo(pageUrl2);
52+
}
53+
catch
5354
{
5455
// do nothing
55-
}
56+
}
5657
}
5758
}

‎BlazorExpress.ChartJS.Demo.RCL/Components/Shared/CodeSnippet.cs‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
namespace BlazorExpress.ChartJS.Demo.RCL;
2+
3+
public class CodeSnippet : ComponentBase
4+
{
5+
#region Members
6+
7+
private string? code;
8+
9+
#endregion
10+
11+
#region Methods
12+
13+
protected override async Task OnParametersSetAsync()
14+
{
15+
if (code is null)
16+
{
17+
if (!string.IsNullOrWhiteSpace(File))
18+
{
19+
var resourceName = File.Replace("~", typeof(CodeSnippet).Assembly.GetName().Name).Replace("/", ".").Replace("\\", ".");
20+
21+
using (var stream = typeof(CodeSnippet).Assembly.GetManifestResourceStream(resourceName)!)
22+
{
23+
try
24+
{
25+
if (stream is null)
26+
return;
27+
28+
using (var reader = new StreamReader(stream))
29+
{
30+
code = await reader.ReadToEndAsync();
31+
}
32+
}
33+
catch (Exception ex)
34+
{
35+
Console.WriteLine(ex.Message);
36+
}
37+
}
38+
}
39+
}
40+
}
41+
42+
private string? GetLanguageFromFileExtension()
43+
{
44+
if (string.IsNullOrWhiteSpace(File))
45+
return null;
46+
47+
return Path.GetExtension(File).ToLower() switch
48+
{
49+
".razor" => "cshtml",
50+
".cshtml" => "cshtml",
51+
".html" => "html",
52+
".css" => "css",
53+
".cs" => "csharp",
54+
".txt" => "none",
55+
".js" => "js",
56+
_ => null
57+
};
58+
}
59+
60+
protected override void BuildRenderTree(RenderTreeBuilder builder)
61+
{
62+
// no base call
63+
builder.AddMarkupContent(0, "<!--googleoff: index-->");
64+
65+
builder.OpenElement(300, "div");
66+
builder.AddAttribute(301, "class", "highlight show-code-only");
67+
builder.OpenElement(400, "pre");
68+
builder.OpenElement(401, "code");
69+
builder.AddAttribute(402, "class", $"language-{Language ?? GetLanguageFromFileExtension() ?? "cshtml"}");
70+
if (code != null)
71+
{
72+
builder.AddContent(403, code.Trim());
73+
}
74+
builder.CloseElement(); // end: code
75+
builder.CloseElement(); // end: pre
76+
builder.CloseElement();
77+
78+
builder.AddMarkupContent(700, "<!--googleon: index-->");
79+
}
80+
81+
protected override async Task OnAfterRenderAsync(bool firstRender)
82+
{
83+
if (firstRender)
84+
await JS.InvokeVoidAsync("highlightCode");
85+
86+
await base.OnAfterRenderAsync(firstRender);
87+
}
88+
89+
#endregion
90+
91+
#region Properties
92+
93+
[Inject] protected IJSRuntime JS { get; set; } = null!;
94+
95+
[Parameter] public string? Language { get; set; }
96+
97+
[Parameter] public string? File { get; set; }
98+
99+
#endregion
100+
}

‎BlazorExpress.ChartJS/BlazorExpress.ChartJS.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<PackageProjectUrl>https://chartjs.blazorexpress.com</PackageProjectUrl>
1212
<RepositoryUrl>https://github.com/BlazorExpress/BlazorExpress.ChartJS</RepositoryUrl>
1313
<PackageReadmeFile>README.md</PackageReadmeFile>
14-
<PackageTags>Blazor, Charts, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart</PackageTags>
14+
<PackageTags>Blazor, BlazorExpress, Charts, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart</PackageTags>
1515
<Description>An open-source, production-ready Blazor charts component library built on the Blazor and Chart.js JavaScript library.</Description>
1616
<Authors>Vikram Reddy</Authors>
1717
<!--<Company>your_company</Company>-->

‎BlazorExpress.ChartJS/wwwroot/background.png‎

-378 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)