From 6a2fb18c4279c0adf2d294d80c523412df3dab9e Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 14 Jun 2024 18:42:43 +0530 Subject: [PATCH] Getting started page updates --- .../Pages/GettingStarted/GettingStarted.razor | 46 ++++++-- .../Getting_Started_Snippet_01_Install.txt | 1 + .../Getting_Started_Snippet_02_Scripts.html | 4 + .../Getting_Started_Snippet_03_Register.txt | 1 + .../Components/Pages/Home/Index.razor | 9 +- .../Components/Shared/CodeSnippet.cs | 100 ++++++++++++++++++ .../BlazorExpress.ChartJS.csproj | 2 +- BlazorExpress.ChartJS/wwwroot/background.png | Bin 378 -> 0 bytes 8 files changed, 147 insertions(+), 16 deletions(-) create mode 100644 BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_01_Install.txt create mode 100644 BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_02_Scripts.html create mode 100644 BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_03_Register.txt create mode 100644 BlazorExpress.ChartJS.Demo.RCL/Components/Shared/CodeSnippet.cs delete mode 100644 BlazorExpress.ChartJS/wwwroot/background.png diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/GettingStarted.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/GettingStarted.razor index 07c6a7a..4d82d32 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/GettingStarted.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/GettingStarted.razor @@ -1,4 +1,5 @@ @attribute [Route(pageUrl)] +@attribute [Route(pageUrl2)] - + +
+ Looking to quickly add BlazorExpress.ChartJS to your project? Use NuGet package manager. +
+ - +
- In the following example, a categorical 12-color palette is used. + Insert the following references into the body section of the wwwroot/index.html file, immediately after the _framework/blazor.webassembly.js reference:
- - For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. - 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. - -@* *@ + + + +
+ Register tag helpers in _Imports.razor. +
+ @code { private const string pageUrl = "/charts/getting-started"; - private const string title = "Blazor Doughnut Chart"; - private const string heading = "Blazor Doughnut Chart"; - 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."; + private const string pageUrl2 = "/charts/getting-started/blazor-webassembly-net-8"; + private const string title = "Getting started - Blazor WebAssembly (.NET 8)"; + private const string heading = "Getting started - Blazor WebAssembly (.NET 8)"; + private const string description = "Get started with the Enterprise-class Component library built on the Blazor and Chart.js JavaScript library."; private const string imageUrl = "https://i.imgur.com/xEPhAsW.png"; + + [Inject] + private NavigationManager _navigationManager { get; set; } = default!; + + protected override void OnInitialized() + { + try + { + if (_navigationManager.Uri.Replace(_navigationManager.BaseUri, "").Contains("charts/getting-started")) + _navigationManager.NavigateTo(pageUrl2); + } + catch + { + // do nothing + } + } } \ No newline at end of file diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_01_Install.txt b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_01_Install.txt new file mode 100644 index 0000000..140e693 --- /dev/null +++ b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_01_Install.txt @@ -0,0 +1 @@ +Install-Package BlazorExpress.ChartJS -Version 1.0.0-preview1 \ No newline at end of file diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_02_Scripts.html b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_02_Scripts.html new file mode 100644 index 0000000..9105166 --- /dev/null +++ b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_02_Scripts.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_03_Register.txt b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_03_Register.txt new file mode 100644 index 0000000..6b2af1d --- /dev/null +++ b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_03_Register.txt @@ -0,0 +1 @@ +@using BlazorExpress.ChartJS \ No newline at end of file diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Index.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Index.razor index e47fd9a..ac23452 100644 --- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Index.razor +++ b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Index.razor @@ -24,7 +24,7 @@
  • Pie Chart
    • - + We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions. @@ -48,10 +48,11 @@ try { if (_navigationManager.Uri.Replace(_navigationManager.BaseUri, "").Equals("")) - _navigationManager.NavigateTo("/charts/overview"); - } catch + _navigationManager.NavigateTo(pageUrl2); + } + catch { // do nothing - } + } } } diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/CodeSnippet.cs b/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/CodeSnippet.cs new file mode 100644 index 0000000..e849506 --- /dev/null +++ b/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/CodeSnippet.cs @@ -0,0 +1,100 @@ +namespace BlazorExpress.ChartJS.Demo.RCL; + +public class CodeSnippet : ComponentBase +{ + #region Members + + private string? code; + + #endregion + + #region Methods + + protected override async Task OnParametersSetAsync() + { + if (code is null) + { + if (!string.IsNullOrWhiteSpace(File)) + { + var resourceName = File.Replace("~", typeof(CodeSnippet).Assembly.GetName().Name).Replace("/", ".").Replace("\\", "."); + + using (var stream = typeof(CodeSnippet).Assembly.GetManifestResourceStream(resourceName)!) + { + try + { + if (stream is null) + return; + + using (var reader = new StreamReader(stream)) + { + code = await reader.ReadToEndAsync(); + } + } + catch (Exception ex) + { + Console.WriteLine(ex.Message); + } + } + } + } + } + + private string? GetLanguageFromFileExtension() + { + if (string.IsNullOrWhiteSpace(File)) + return null; + + return Path.GetExtension(File).ToLower() switch + { + ".razor" => "cshtml", + ".cshtml" => "cshtml", + ".html" => "html", + ".css" => "css", + ".cs" => "csharp", + ".txt" => "none", + ".js" => "js", + _ => null + }; + } + + protected override void BuildRenderTree(RenderTreeBuilder builder) + { + // no base call + builder.AddMarkupContent(0, ""); + + builder.OpenElement(300, "div"); + builder.AddAttribute(301, "class", "highlight show-code-only"); + builder.OpenElement(400, "pre"); + builder.OpenElement(401, "code"); + builder.AddAttribute(402, "class", $"language-{Language ?? GetLanguageFromFileExtension() ?? "cshtml"}"); + if (code != null) + { + builder.AddContent(403, code.Trim()); + } + builder.CloseElement(); // end: code + builder.CloseElement(); // end: pre + builder.CloseElement(); + + builder.AddMarkupContent(700, ""); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await JS.InvokeVoidAsync("highlightCode"); + + await base.OnAfterRenderAsync(firstRender); + } + + #endregion + + #region Properties + + [Inject] protected IJSRuntime JS { get; set; } = null!; + + [Parameter] public string? Language { get; set; } + + [Parameter] public string? File { get; set; } + + #endregion +} diff --git a/BlazorExpress.ChartJS/BlazorExpress.ChartJS.csproj b/BlazorExpress.ChartJS/BlazorExpress.ChartJS.csproj index c41ba8d..119edf9 100644 --- a/BlazorExpress.ChartJS/BlazorExpress.ChartJS.csproj +++ b/BlazorExpress.ChartJS/BlazorExpress.ChartJS.csproj @@ -11,7 +11,7 @@ https://chartjs.blazorexpress.com https://github.com/BlazorExpress/BlazorExpress.ChartJS README.md - Blazor, Charts, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart + Blazor, BlazorExpress, Charts, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart An open-source, production-ready Blazor charts component library built on the Blazor and Chart.js JavaScript library. Vikram Reddy diff --git a/BlazorExpress.ChartJS/wwwroot/background.png b/BlazorExpress.ChartJS/wwwroot/background.png deleted file mode 100644 index e15a3bde6e2bdb380df6a0b46d7ed00bdeb0aaa8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 378 zcmeAS@N?(olHy`uVBq!ia0vp^x**KK1SGdsl%54rjKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1qucLCF%=h?3y^w370~qEv>0#LT=By}Z;C1rt33 zJwr2>%=KS^ie7oTIEF;HpS|GCbyPusHSqiXaCu3qf)82(9Gq&mZq2{Kq}M*X&MWtJ zSi1Jo7ZzfImg%g=t(qo=wsSR2lZoP(Rj#3wacN=q0?Br(rXzgZEGK2$ID{|A=5S{xJEuzSH>!M+7wSY6hB<=-E^*n0W7 S8wY^CX7F_Nb6Mw<&;$S{dxtsz