-
-
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayout.razor.cs
deleted file mode 100644
index 108bc737..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayout.razor.cs
+++ /dev/null
@@ -1,45 +0,0 @@
-namespace BlazorExpress.ChartJS.Demo.RCL;
-
-public partial class MainLayout : MainLayoutBase
-{
- internal override IEnumerable GetNavItems()
- {
- navItems ??= new List
- {
- new (){ Id = "1", Text = "Overview", Href = "/charts/overview", IconName = IconName.HouseDoorFill },
-
- new (){ Id = "2", Text = "Getting Started", IconName = IconName.Rulers },
- new (){ Id = "201", Text = "Blazor WebAssembly (.NET 8)", Href = "/charts/getting-started/blazor-webassembly-net-8", IconName = IconName.BrowserEdge, ParentId = "2" },
- new (){ Id = "202", Text = "Blazor WebApp Server (.NET 8)", Href = "/charts/getting-started/blazor-webapp-server-global-net-8", IconName = IconName.Pc, ParentId = "2", },
- new (){ Id = "202", Text = "Blazor WebApp Auto (.NET 8)", Href = "/charts/getting-started/blazor-webapp-auto-global-net-8", IconName = IconName.BrowserSafari, ParentId = "2" },
-
- new (){ Id = "3", Text = "Bar Chart", IconName = IconName.BarChartLineFill },
- new (){ Id = "300", Text = "API Documentation", Href = "/charts/bar-chart/api-documentation", IconName = IconName.FileText, ParentId = "3", },
- new (){ Id = "301", Text = "Bar", Href = "/charts/bar-chart", IconName = IconName.BarChartLine, ParentId = "3", Match = NavLinkMatch.All },
- new (){ Id = "302", Text = "Horizontal", Href = "/charts/bar-chart/horizontal", IconName = IconName.BarChartSteps, ParentId = "3", },
- new (){ Id = "303", Text = "Stacked", Href = "/charts/bar-chart/stacked", IconName = IconName.ViewStacked, ParentId = "3", },
- new (){ Id = "304", Text = "Data labels", Href = "/charts/bar-chart/data-labels", IconName = IconName.Bookmarks, ParentId = "3", },
- new (){ Id = "305", Text = "Locale", Href = "/charts/bar-chart/locale", IconName = IconName.Translate, ParentId = "3", },
-
- new (){ Id = "4", Text = "Doughnut Chart", IconName = IconName.CircleFill, },
- new (){ Id = "400", Text = "API Documentation", Href = "/charts/doughnut-chart/api-documentation", IconName = IconName.FileText, ParentId = "4", },
- new (){ Id = "401", Text = "Doughnut", Href = "/charts/doughnut-chart", IconName = IconName.Circle, ParentId = "4", Match = NavLinkMatch.All },
- new (){ Id = "402", Text = "Data labels", Href = "/charts/doughnut-chart/doughnut-labels", IconName = IconName.Bookmarks, ParentId = "4", Match = NavLinkMatch.All },
-
- new (){ Id = "5", Text = "Line Chart", IconName = IconName.GraphUpArrow },
- new (){ Id = "500", Text = "API Documentation", Href = "/charts/line-chart/api-documentation", IconName = IconName.FileText, ParentId = "5", },
- new (){ Id = "501", Text = "Line", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "5", Match = NavLinkMatch.All },
- new (){ Id = "502", Text = "Data labels", Href = "/charts/line-chart/data-labels", IconName = IconName.Bookmarks, ParentId = "5", Match = NavLinkMatch.All },
- new (){ Id = "503", Text = "Tick configuration", Href = "/charts/line-chart/tick-configuration", IconName = IconName.GearWideConnected, ParentId = "5", Match = NavLinkMatch.All },
- new (){ Id = "504", Text = "Locale", Href = "/charts/line-chart/locale", IconName = IconName.Translate, ParentId = "5", Match = NavLinkMatch.All },
-
- new (){ Id = "6", Text = "Pie Chart", IconName = IconName.PieChartFill },
- new (){ Id = "600", Text = "API Documentation", Href = "/charts/pie-chart/api-documentation", IconName = IconName.FileText, ParentId = "6", },
- new (){ Id = "601", Text = "Pie", Href = "/charts/pie-chart", IconName = IconName.PieChart, ParentId = "6", Match = NavLinkMatch.All },
- new (){ Id = "602", Text = "Data labels", Href = "/charts/pie-chart/data-labels", IconName = IconName.Bookmarks, ParentId = "6", Match = NavLinkMatch.All },
- new (){ Id = "603", Text = "Legend position", Href = "/charts/pie-chart/legend", IconName = IconName.Signpost, ParentId = "6", Match = NavLinkMatch.All },
- };
-
- return navItems;
- }
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayout.razor.css b/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayout.razor.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBase.cs b/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBase.cs
deleted file mode 100644
index 5f3c6859..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBase.cs
+++ /dev/null
@@ -1,59 +0,0 @@
-namespace BlazorExpress.ChartJS.Demo.RCL;
-
-public class MainLayoutBase : LayoutComponentBase
-{
- private string version = default!;
- private string homeUrl = default!;
- private string docsUrl = default!;
- private string blogUrl = default!;
- private string githubUrl = default!;
- private string twitterUrl = default!;
- private string linkedInUrl = default!;
- private string openCollectiveUrl = default!;
- private string githubIssuesUrl = default!;
- private string githubDiscussionsUrl = default!;
- private string stackoverflowUrl = default!;
-
- internal Sidebar sidebar = default!;
- internal IEnumerable navItems = default!;
-
- [Inject] public IConfiguration _configuration { get; set; } = default!;
-
- protected override void OnInitialized()
- {
- version = $"v{_configuration["version"]}"; // example: v0.6.1
- homeUrl = $"{_configuration["urls:homeUrl"]}";
- docsUrl = $"{_configuration["urls:docs"]}";
- blogUrl = $"{_configuration["urls:blog"]}";
- githubUrl = $"{_configuration["urls:github"]}";
- twitterUrl = $"{_configuration["urls:twitter"]}";
- linkedInUrl = $"{_configuration["urls:linkedin"]}";
- openCollectiveUrl = $"{_configuration["urls:opencollective"]}";
- githubIssuesUrl = $"{_configuration["urls:github_issues"]}";
- githubDiscussionsUrl = $"{_configuration["urls:github_discussions"]}";
- stackoverflowUrl = $"{_configuration["urls:stackoverflow"]}";
- base.OnInitialized();
- }
-
- internal virtual async Task SidebarDataProvider(SidebarDataProviderRequest request)
- {
- if (navItems is null)
- navItems = GetNavItems();
-
- return await Task.FromResult(request.ApplyTo(navItems));
- }
-
- internal virtual IEnumerable GetNavItems() => new List();
-
- public string Version => version;
- public string HomeUrl => homeUrl;
- public string DocsUrl => docsUrl;
- public string BlogUrl => blogUrl;
- public string GithubUrl => githubUrl;
- public string TwitterUrl => twitterUrl;
- public string LinkedInUrl => linkedInUrl;
- public string OpenCollectiveUrl => openCollectiveUrl;
- public string GithubIssuesUrl => githubIssuesUrl;
- public string GithubDiscussionsUrl => githubDiscussionsUrl;
- public string StackoverflowUrl => stackoverflowUrl;
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBase.css b/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBase.css
deleted file mode 100644
index 710ea05e..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBase.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.page {
- position: relative;
- display: flex;
- flex-direction: column;
-}
-
-.main {
- flex: 1;
- overflow-x: hidden;
- /*width: 100%;*/
-}
-
-.sidebar {
- background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
- background-color: #f7f7f7;
- border-bottom: 1px solid #d6d5d5;
- justify-content: flex-end;
- height: 3.5rem;
- display: flex;
- align-items: center;
-}
-
- .top-row ::deep a, .top-row .btn-link {
- white-space: nowrap;
- margin-left: 1.5rem;
- }
-
- .top-row a:first-child {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
-@media (max-width: 640.98px) {
- .top-row:not(.auth) {
- display: none;
- }
-
- .top-row.auth {
- justify-content: space-between;
- }
-
- .top-row a, .top-row .btn-link {
- margin-left: 0;
- }
-}
-
-@media (min-width: 641px) {
- .page {
- flex-direction: row;
- }
-
- .sidebar {
- width: 260px !important;
- height: 100vh !important;
- overflow-y: auto !important;
- position: sticky !important;
- top: 0 !important;
- }
-
- .top-row {
- position: sticky;
- top: 0;
- z-index: 1;
- }
-
- .main > div {
- padding-left: 2rem !important;
- padding-right: 1.5rem !important;
- }
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor
deleted file mode 100644
index dc46502c..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor
+++ /dev/null
@@ -1,46 +0,0 @@
-@namespace BlazorExpress.ChartJS.Demo.RCL
-@inherits ComponentBase
-
-
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseServices.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseServices.razor
deleted file mode 100644
index 854acff2..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseServices.razor
+++ /dev/null
@@ -1,2 +0,0 @@
-@namespace BlazorExpress.ChartJS.Demo.RCL
-@inherits ComponentBase
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_00_API_Documentation.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_00_API_Documentation.razor
deleted file mode 100644
index 35a326da..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_00_API_Documentation.razor
+++ /dev/null
@@ -1,85 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- BarChartDataset implements IChartDataset.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- BarChartOptions implements ChartOptions.
-
-
-
-
-
-
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/bar-chart/api-documentation";
- private const string title = "Blazor Bar Chart - API Documentation";
- private const string heading = "Blazor Bar Chart - API Documentation";
- private const string description = "This documentation provides a comprehensive reference for the Blazor Bar Chart component, guiding you through its functionalities and configuration options.";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_01.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_01.razor
deleted file mode 100644
index f6ad97b7..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_01.razor
+++ /dev/null
@@ -1,27 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-
- In the following example, a categorical 12-color palette is used.
-
-
- 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.
-
-
-
-@code {
- private const string pageUrl = "/charts/bar-chart";
- private const string title = "Blazor Bar Chart";
- private const string heading = "Blazor Bar Chart";
- 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.";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_02.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_02.razor
deleted file mode 100644
index c8bf6606..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_02.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/bar-chart/horizontal";
- private const string title = "Blazor Bar Chart - Horizontal";
- private const string heading = "Blazor Bar Chart - Horizontal";
- 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.";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_03.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_03.razor
deleted file mode 100644
index 895e8d14..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_03.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/bar-chart/stacked";
- private const string title = "Blazor Bar Chart - Stacked";
- private const string heading = "Blazor Bar Chart - Stacked";
- 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.";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_04.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_04.razor
deleted file mode 100644
index 3f76c21f..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_04.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/bar-chart/data-labels";
- private const string title = "Blazor Bar Chart - Data labels";
- private const string heading = "Blazor Bar Chart - Data labels";
- 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.";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_05.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_05.razor
deleted file mode 100644
index fb66eff3..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChartDocumentation_05.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/bar-chart/locale";
- private const string title = "Blazor Bar Chart - Locale";
- private const string heading = "Blazor Bar Chart - Locale";
- private const string description = "By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_00_API_Documentation.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_00_API_Documentation.razor
deleted file mode 100644
index 37d01f66..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_00_API_Documentation.razor
+++ /dev/null
@@ -1,76 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- DoughnutChartDataset implements IChartDataset.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- DoughnutChartOptions implements ChartOptions.
-
-
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/doughnut-chart/api-documentation";
- private const string title = "Blazor Doughnut Chart - API Documentation";
- private const string heading = "Blazor Doughnut Chart - API Documentation";
- private const string description = "This documentation provides a comprehensive reference for the Blazor Doughnut Chart component, guiding you through its functionalities and configuration options.";
- private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_01.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_01.razor
deleted file mode 100644
index 187f7dbc..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_01.razor
+++ /dev/null
@@ -1,27 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-
- In the following example, a categorical 12-color palette is used.
-
-
- 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.
-
-
-
-@code {
- private const string pageUrl = "/charts/doughnut-chart";
- 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 imageUrl = "https://i.imgur.com/xEPhAsW.png";
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_02.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_02.razor
deleted file mode 100644
index fd69b6e4..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/DoughnutCharts/DoughnutChartDocumentation_02.razor
+++ /dev/null
@@ -1,18 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/doughnut-chart/doughnut-labels";
- 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 imageUrl = "https://i.imgur.com/xEPhAsW.png";
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_01_WebAssembly/GettingStarted.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_01_WebAssembly/GettingStarted.razor
deleted file mode 100644
index bd9bf2ef..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_01_WebAssembly/GettingStarted.razor
+++ /dev/null
@@ -1,59 +0,0 @@
-@attribute [Route(pageUrl)]
-@attribute [Route(pageUrl2)]
-
-
-
-
-
- Looking to quickly add BlazorExpress.ChartJS to your project? Use NuGet package manager.
-
- Insert the following references into the body section of the wwwroot/index.html file, immediately after the _framework/blazor.webassembly.js reference:
-
-
-
-
-
- Register tag helpers in _Imports.razor.
-
-
-
-@code {
- private const string pageUrl = "/charts/getting-started";
- 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";
- private string version = default!;
-
- [Inject]
- private NavigationManager _navigationManager { get; set; } = default!;
-
- [Inject]
- private IConfiguration _configuration { get; set; } = default!;
-
- protected override void OnInitialized()
- {
- try
- {
- version = _configuration["version"]!;
-
- 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/NET8_01_WebAssembly/Getting_Started_Snippet_02_Register.txt b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_01_WebAssembly/Getting_Started_Snippet_02_Register.txt
deleted file mode 100644
index 6b2af1d4..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_01_WebAssembly/Getting_Started_Snippet_02_Register.txt
+++ /dev/null
@@ -1 +0,0 @@
-@using BlazorExpress.ChartJS
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_02_WebApp_Server_Global/GettingStarted.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_02_WebApp_Server_Global/GettingStarted.razor
deleted file mode 100644
index ffb49ad6..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_02_WebApp_Server_Global/GettingStarted.razor
+++ /dev/null
@@ -1,51 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
- Looking to quickly add BlazorExpress.ChartJS to your project? Use NuGet package manager.
-
- Insert the following references into the body section of the Components/App.razor file, immediately after the _framework/blazor.web.js reference:
-
-
-
-@code {
- private const string pageUrl = "/charts/getting-started/blazor-webapp-auto-global-net-8";
- private const string title = "Getting started - Blazor WebApp (.NET 8) - Interactive render mode Auto - Global location";
- private const string heading = "Getting started - Blazor WebApp (.NET 8) - Interactive render mode Auto - Global location";
- 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/C5ObC3A.png";
- private string version = default!;
-
- [Inject]
- private IConfiguration _configuration { get; set; } = default!;
-
- protected override void OnInitialized()
- {
- try
- {
- version = _configuration["version"]!;
- }
- catch
- {
- // do nothing
- }
- }
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_03_WebApp_Auto/Getting_Started_Snippet_01_Scripts.html b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_03_WebApp_Auto/Getting_Started_Snippet_01_Scripts.html
deleted file mode 100644
index 9105166d..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_03_WebApp_Auto/Getting_Started_Snippet_01_Scripts.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_03_WebApp_Auto/Getting_Started_Snippet_02_Register.txt b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_03_WebApp_Auto/Getting_Started_Snippet_02_Register.txt
deleted file mode 100644
index 6b2af1d4..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/NET8_03_WebApp_Auto/Getting_Started_Snippet_02_Register.txt
+++ /dev/null
@@ -1 +0,0 @@
-@using BlazorExpress.ChartJS
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_01_BarChart.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_01_BarChart.razor
deleted file mode 100644
index 2edbfd72..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_01_BarChart.razor
+++ /dev/null
@@ -1,87 +0,0 @@
-
-
-@code {
- private BarChart barChart = default!;
- private BarChartOptions barChartOptions = default!;
- private ChartData chartData = default!;
-
- private int datasetsCount = 0;
- private int labelsCount = 0;
- private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
- private Random random = new();
-
- protected override void OnInitialized()
- {
- chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
- barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- await barChart.InitializeAsync(chartData, barChartOptions);
- }
- await base.OnAfterRenderAsync(firstRender);
- }
-
- #region Data Preparation
-
- private List GetDefaultDataSets(int numberOfDatasets)
- {
- var datasets = new List();
-
- for (var index = 0; index < numberOfDatasets; index++)
- {
- datasets.Add(GetRandomBarChartDataset());
- }
-
- return datasets;
- }
-
- private BarChartDataset GetRandomBarChartDataset()
- {
- var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
-
- datasetsCount += 1;
-
- return new BarChartDataset()
- {
- Label = $"Product {datasetsCount}",
- Data = GetRandomData(),
- BackgroundColor = new List { c.ToRgbString() },
- BorderColor = new List { c.ToRgbString() },
- BorderWidth = new List { 0 },
- };
- }
-
- private List GetRandomData()
- {
- var data = new List();
- for (var index = 0; index < labelsCount; index++)
- {
- data.Add(random.Next(200));
- }
-
- return data;
- }
-
- private List GetDefaultDataLabels(int numberOfLabels)
- {
- var labels = new List();
- for (var index = 0; index < numberOfLabels; index++)
- {
- labels.Add(GetNextDataLabel());
- }
-
- return labels;
- }
-
- private string GetNextDataLabel()
- {
- labelsCount += 1;
- return months[labelsCount - 1];
- }
-
- #endregion Data Preparation
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_02_DoughnutChart.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_02_DoughnutChart.razor
deleted file mode 100644
index 9795f1e0..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_02_DoughnutChart.razor
+++ /dev/null
@@ -1,93 +0,0 @@
-
-
-@code {
- private DoughnutChart doughnutChart = default!;
- private DoughnutChartOptions doughnutChartOptions = default!;
- private ChartData chartData = default!;
- private string[]? backgroundColors;
-
- private int datasetsCount = 0;
- private int dataLabelsCount = 0;
-
- private Random random = new();
-
- protected override void OnInitialized()
- {
- backgroundColors = ColorUtility.CategoricalTwelveColors;
- chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };
-
- doughnutChartOptions = new();
- doughnutChartOptions.Responsive = true;
- doughnutChartOptions.Plugins.Title!.Text = "2022 - Sales";
- doughnutChartOptions.Plugins.Title.Display = true;
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- await doughnutChart.InitializeAsync(chartData, doughnutChartOptions);
- }
- await base.OnAfterRenderAsync(firstRender);
- }
-
- #region Data Preparation
-
- private List GetDefaultDataSets(int numberOfDatasets)
- {
- var datasets = new List();
-
- for (var index = 0; index < numberOfDatasets; index++)
- {
- datasets.Add(GetRandomDoughnutChartDataset());
- }
-
- return datasets;
- }
-
- private DoughnutChartDataset GetRandomDoughnutChartDataset()
- {
- datasetsCount += 1;
- return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
- }
-
- private List GetRandomData()
- {
- var data = new List();
- for (var index = 0; index < dataLabelsCount; index++)
- {
- data.Add(random.Next(0, 100));
- }
-
- return data;
- }
-
- private List GetRandomBackgroundColors()
- {
- var colors = new List();
- for (var index = 0; index < dataLabelsCount; index++)
- {
- colors.Add(backgroundColors![index]);
- }
-
- return colors;
- }
-
- private List GetDefaultDataLabels(int numberOfLabels)
- {
- var labels = new List();
- for (var index = 0; index < numberOfLabels; index++)
- {
- labels.Add(GetNextDataLabel());
- dataLabelsCount += 1;
- }
-
- return labels;
- }
-
- private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";
-
- private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];
-
- #endregion Data Preparation
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_03_LineChart.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_03_LineChart.razor
deleted file mode 100644
index da00931b..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_03_LineChart.razor
+++ /dev/null
@@ -1,92 +0,0 @@
-
-
-@code {
- private LineChart lineChart = default!;
- private LineChartOptions lineChartOptions = default!;
- private ChartData chartData = default!;
-
- private int datasetsCount;
- private int labelsCount;
-
- private Random random = new();
-
- protected override void OnInitialized()
- {
- chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
- lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- await lineChart.InitializeAsync(chartData, lineChartOptions);
- }
- await base.OnAfterRenderAsync(firstRender);
- }
-
- #region Data Preparation
-
- private List GetDefaultDataSets(int numberOfDatasets)
- {
- var datasets = new List();
-
- for (var index = 0; index < numberOfDatasets; index++)
- {
- datasets.Add(GetRandomLineChartDataset());
- }
-
- return datasets;
- }
-
- private LineChartDataset GetRandomLineChartDataset()
- {
- var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
-
- datasetsCount += 1;
-
- return new LineChartDataset
- {
- Label = $"Team {datasetsCount}",
- Data = GetRandomData(),
- BackgroundColor = new List { c.ToRgbString() },
- BorderColor = new List { c.ToRgbString() },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { c.ToRgbString() },
- PointRadius = new List { 0 }, // hide points
- PointHoverRadius = new List { 4 }
- };
- }
-
- private List GetRandomData()
- {
- var data = new List();
- for (var index = 0; index < labelsCount; index++)
- {
- data.Add(random.Next(200));
- }
-
- return data;
- }
-
- private List GetDefaultDataLabels(int numberOfLabels)
- {
- var labels = new List();
- for (var index = 0; index < numberOfLabels; index++)
- {
- labels.Add(GetNextDataLabel());
- }
-
- return labels;
- }
-
- private string GetNextDataLabel()
- {
- labelsCount += 1;
- return $"Day {labelsCount}";
- }
-
- #endregion Data Preparation
-
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_04_PieChart.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_04_PieChart.razor
deleted file mode 100644
index 7ab35e80..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_04_PieChart.razor
+++ /dev/null
@@ -1,93 +0,0 @@
-
-
-@code {
- private PieChart pieChart = default!;
- private PieChartOptions pieChartOptions = default!;
- private ChartData chartData = default!;
- private string[]? backgroundColors;
-
- private int datasetsCount = 0;
- private int dataLabelsCount = 0;
-
- private Random random = new();
-
- protected override void OnInitialized()
- {
- backgroundColors = ColorUtility.CategoricalTwelveColors;
- chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) };
-
- pieChartOptions = new();
- pieChartOptions.Responsive = true;
- pieChartOptions.Plugins.Title!.Text = "2022 - Sales";
- pieChartOptions.Plugins.Title.Display = true;
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- await pieChart.InitializeAsync(chartData, pieChartOptions);
- }
- await base.OnAfterRenderAsync(firstRender);
- }
-
- #region Data Preparation
-
- private List GetDefaultDataSets(int numberOfDatasets)
- {
- var datasets = new List();
-
- for (var index = 0; index < numberOfDatasets; index++)
- {
- datasets.Add(GetRandomPieChartDataset());
- }
-
- return datasets;
- }
-
- private PieChartDataset GetRandomPieChartDataset()
- {
- datasetsCount += 1;
- return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
- }
-
- private List GetRandomData()
- {
- var data = new List();
- for (var index = 0; index < dataLabelsCount; index++)
- {
- data.Add(random.Next(0, 100));
- }
-
- return data;
- }
-
- private List GetRandomBackgroundColors()
- {
- var colors = new List();
- for (var index = 0; index < dataLabelsCount; index++)
- {
- colors.Add(backgroundColors![index]);
- }
-
- return colors;
- }
-
- private List GetDefaultDataLabels(int numberOfLabels)
- {
- var labels = new List();
- for (var index = 0; index < numberOfLabels; index++)
- {
- labels.Add(GetNextDataLabel());
- dataLabelsCount += 1;
- }
-
- return labels;
- }
-
- private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}";
-
- private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount];
-
- #endregion Data Preparation
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_99_Example.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_99_Example.razor
deleted file mode 100644
index 0f69a26e..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Charts_Demo_99_Example.razor
+++ /dev/null
@@ -1,112 +0,0 @@
-
-
-
-@code {
- private BarChart barChart = default!;
- private LineChart lineChart = default!;
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- await RenderManhattanAsync();
- await RenderWormAsync();
- }
-
- await base.OnAfterRenderAsync(firstRender);
- }
-
- private async Task RenderManhattanAsync()
- {
- var data = new ChartData
- {
- Labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
- Datasets = new List()
- {
- new BarChartDataset()
- {
- Label = "India",
- Data = new List{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
- BackgroundColor = new List{ "rgb(88, 80, 141)" },
- CategoryPercentage = 0.8,
- BarPercentage = 1,
- },
- new BarChartDataset()
- {
- Label = "England",
- Data = new List{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
- BackgroundColor = new List { "rgb(255, 166, 0)" },
- CategoryPercentage = 0.8,
- BarPercentage = 1,
- }
- }
- };
-
- var options = new BarChartOptions();
-
- options.Interaction.Mode = InteractionMode.Index;
-
- options.Plugins.Title!.Text = "MANHATTAN";
- options.Plugins.Title.Display = true;
- options.Plugins.Title.Font = new ChartFont { Size = 20 };
-
- options.Responsive = true;
-
- options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
- options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };
-
- await barChart.InitializeAsync(data, options);
- }
-
- private async Task RenderWormAsync()
- {
- var data = new ChartData
- {
- Labels = new List { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
- Datasets = new List()
- {
- new LineChartDataset()
- {
- Label = "India",
- Data = new List{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
- BackgroundColor = new List{ "rgb(88, 80, 141)" },
- BorderColor = new List{ "rgb(88, 80, 141)" },
- BorderWidth = new List{2},
- HoverBorderWidth = new List{4},
- PointBackgroundColor = new List{ "rgb(88, 80, 141)" },
- PointBorderColor = new List{ "rgb(88, 80, 141)" },
- PointRadius = new List{0}, // hide points
- PointHoverRadius = new List{4},
- },
- new LineChartDataset()
- {
- Label = "England",
- Data = new List{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
- BackgroundColor = new List{ "rgb(255, 166, 0)" },
- BorderColor = new List{ "rgb(255, 166, 0)" },
- BorderWidth = new List{2},
- HoverBorderWidth = new List{4},
- PointBackgroundColor = new List{ "rgb(255, 166, 0)" },
- PointBorderColor = new List{ "rgb(255, 166, 0)" },
- PointRadius = new List{0}, // hide points
- PointHoverRadius = new List{4},
- }
- }
- };
-
- var options = new LineChartOptions();
-
- options.Interaction.Mode = InteractionMode.Index;
-
- options.Plugins.Title!.Text = "WORM";
- options.Plugins.Title.Display = true;
- options.Plugins.Title.Font = new ChartFont { Size = 20 };
-
- options.Responsive = true;
-
- options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
- options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };
-
- await lineChart.InitializeAsync(data, options);
- }
-}
\ 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
deleted file mode 100644
index 57fe0fb8..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Index.razor
+++ /dev/null
@@ -1,73 +0,0 @@
-@attribute [Route(pageUrl)]
-@attribute [Route(pageUrl2)]
-
-@title | BlazorExpress.ChartJS Components
-
-
-
-
Blazor Charts
-
- Blazor Express charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.
-
-
-@* *@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
At this moment we are supporting four blazor chart types.
- In the following example, a categorical 12-color palette is used.
-
-
- 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.
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/line-chart";
- private const string title = "Blazor Line Chart";
- private const string heading = "Blazor Line Chart";
- private const string description = "A Blazor line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
- private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_02.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_02.razor
deleted file mode 100644
index bb82f9dc..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_02.razor
+++ /dev/null
@@ -1,18 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/line-chart/data-labels";
- private const string title = "Blazor Line Chart";
- private const string heading = "Blazor Line Chart";
- private const string description = "A Blazor line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
- private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_03.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_03.razor
deleted file mode 100644
index 312de48c..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_03.razor
+++ /dev/null
@@ -1,18 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/line-chart/tick-configuration";
- private const string title = "Blazor Line Chart";
- private const string heading = "Blazor Line Chart";
- private const string description = "A Blazor line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
- private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_04.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_04.razor
deleted file mode 100644
index 91dbc03d..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChartDocumentation_04.razor
+++ /dev/null
@@ -1,22 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
- By default, the chart is using the default locale of the platform on which it is running.
- In the following example, you will see the chart in the German locale (de_DE).
-
-
-
-@code {
- private const string pageUrl = "/charts/line-chart/locale";
- private const string title = "Blazor Line Chart";
- private const string heading = "Blazor Line Chart";
- private const string description = "A Blazor line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
- private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_01_B_Examples.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_01_B_Examples.razor
deleted file mode 100644
index 2787412e..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_01_B_Examples.razor
+++ /dev/null
@@ -1,79 +0,0 @@
-
-
-@code {
- private LineChart lineChart = default!;
- private LineChartOptions lineChartOptions = default!;
- private ChartData chartData = default!;
-
- protected override void OnInitialized()
- {
- var colors = ColorUtility.CategoricalTwelveColors;
-
- var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
- var datasets = new List();
-
- var dataset1 = new LineChartDataset
- {
- Label = "Windows",
- Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[0] },
- PointRadius = new List { 0 }, // hide points
- PointHoverRadius = new List { 4 }
- };
- datasets.Add(dataset1);
-
- var dataset2 = new LineChartDataset
- {
- Label = "macOS",
- Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[1] },
- PointRadius = new List { 0 }, // hide points
- PointHoverRadius = new List { 4 }
- };
- datasets.Add(dataset2);
-
- var dataset3 = new LineChartDataset
- {
- Label = "Other",
- Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[2] },
- PointRadius = new List { 0 }, // hide points
- PointHoverRadius = new List { 4 }
- };
- datasets.Add(dataset3);
-
- chartData = new ChartData { Labels = labels, Datasets = datasets };
-
- lineChartOptions = new();
- lineChartOptions.Responsive = true;
- lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
-
- lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
- lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
-
- lineChartOptions.Plugins.Title!.Text = "Operating system";
- lineChartOptions.Plugins.Title.Display = true;
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- await lineChart.InitializeAsync(chartData, lineChartOptions);
- }
- await base.OnAfterRenderAsync(firstRender);
- }
-
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_02_Datalabels.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_02_Datalabels.razor
deleted file mode 100644
index 9350a1d0..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_02_Datalabels.razor
+++ /dev/null
@@ -1,97 +0,0 @@
-@using BlazorExpress.ChartJS.Enums
-
-
-@code {
- private LineChart lineChart = default!;
- private LineChartOptions lineChartOptions = default!;
- private ChartData chartData = default!;
-
- protected override void OnInitialized()
- {
- var colors = ColorUtility.CategoricalTwelveColors;
-
- var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
- var datasets = new List();
-
- var dataset1 = new LineChartDataset
- {
- Label = "Windows",
- Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[0] },
- PointRadius = new List { 3 }, // show points
- PointHoverRadius = new List { 4 },
-
- // datalabels
- Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End }
- };
- datasets.Add(dataset1);
-
- var dataset2 = new LineChartDataset
- {
- Label = "macOS",
- Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[1] },
- PointRadius = new List { 3 }, // show points
- PointHoverRadius = new List { 4 },
-
- // datalabels
- Datalabels = new() { Alignment = Alignment.End, Anchor = Anchor.End }
- };
- datasets.Add(dataset2);
-
- var dataset3 = new LineChartDataset
- {
- Label = "Other",
- Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[2] },
- PointRadius = new List { 3 }, // show points
- PointHoverRadius = new List { 4 },
-
- // datalabels
- Datalabels = new() { Alignment = Alignment.Start, Anchor = Anchor.Start }
- };
- datasets.Add(dataset3);
-
- chartData = new ChartData
- {
- Labels = labels,
- Datasets = datasets
- };
-
- lineChartOptions = new();
- lineChartOptions.Responsive = true;
- lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
-
- lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
- lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
-
- lineChartOptions.Plugins.Title!.Text = "Operating system";
- lineChartOptions.Plugins.Title.Display = true;
-
- // datalabels
- lineChartOptions.Plugins.Datalabels.Color = "white";
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- // pass the plugin name to enable the data labels
- await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { "ChartDataLabels" });
- }
- await base.OnAfterRenderAsync(firstRender);
- }
-
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_04_Locale.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_04_Locale.razor
deleted file mode 100644
index ddc83610..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/LineCharts/LineChart_Demo_04_Locale.razor
+++ /dev/null
@@ -1,80 +0,0 @@
-
-
-@code {
- private LineChart lineChart = default!;
- private LineChartOptions lineChartOptions = default!;
- private ChartData chartData = default!;
-
- protected override void OnInitialized()
- {
- var colors = ColorUtility.CategoricalTwelveColors;
-
- var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
- var datasets = new List();
-
- var dataset1 = new LineChartDataset
- {
- Label = "Windows",
- Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[0] },
- PointRadius = new List { 0 }, // hide points
- PointHoverRadius = new List { 4 }
- };
- datasets.Add(dataset1);
-
- var dataset2 = new LineChartDataset
- {
- Label = "macOS",
- Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[1] },
- PointRadius = new List { 0 }, // hide points
- PointHoverRadius = new List { 4 }
- };
- datasets.Add(dataset2);
-
- var dataset3 = new LineChartDataset
- {
- Label = "Other",
- Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 2 },
- HoverBorderWidth = new List { 4 },
- PointBackgroundColor = new List { colors[2] },
- PointRadius = new List { 0 }, // hide points
- PointHoverRadius = new List { 4 }
- };
- datasets.Add(dataset3);
-
- chartData = new ChartData { Labels = labels, Datasets = datasets };
-
- lineChartOptions = new();
- lineChartOptions.Locale = "de-DE";
- lineChartOptions.Responsive = true;
- lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };
-
- lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "2019", Display = true };
- lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
-
- lineChartOptions.Plugins.Title!.Text = "Operating system";
- lineChartOptions.Plugins.Title.Display = true;
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- {
- await lineChart.InitializeAsync(chartData, lineChartOptions);
- }
- await base.OnAfterRenderAsync(firstRender);
- }
-
-}
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_00_API_Documentation.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_00_API_Documentation.razor
deleted file mode 100644
index edd4fbfd..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_00_API_Documentation.razor
+++ /dev/null
@@ -1,76 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- PieChartDataset implements IChartDataset.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- PieChartOptions implements ChartOptions.
-
-
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/pie-chart/api-documentation";
- private const string title = "Blazor Pie Chart - API Documentation";
- private const string heading = "Blazor Pie Chart - API Documentation";
- private const string description = "This documentation provides a comprehensive reference for the Blazor Pie Chart component, guiding you through its functionalities and configuration options.";
- private const string imageUrl = "https://i.imgur.com/dDpIuzk.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_01.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_01.razor
deleted file mode 100644
index 5bfd1b9b..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_01.razor
+++ /dev/null
@@ -1,27 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-
- In the following example, a categorical 12-color palette is used.
-
-
- 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.
-
-
-
-@code {
- private const string pageUrl = "/charts/pie-chart";
- private const string title = "Blazor Pie Chart";
- private const string heading = "Blazor Pie Chart";
- private const string description = "A Blazor pie chart component is a circular chart that shows the proportional values of different categories.";
- private const string imageUrl = "https://i.imgur.com/ieBupT2.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_02.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_02.razor
deleted file mode 100644
index 29c109ec..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_02.razor
+++ /dev/null
@@ -1,18 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
-
-@code {
- private const string pageUrl = "/charts/pie-chart/data-labels";
- private const string title = "Blazor Pie Chart";
- private const string heading = "Blazor Pie Chart";
- private const string description = "A Blazor pie chart component is a circular chart that shows the proportional values of different categories.";
- private const string imageUrl = "https://i.imgur.com/ieBupT2.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_03.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_03.razor
deleted file mode 100644
index eb2379c5..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/PieCharts/PieChartDocumentation_03.razor
+++ /dev/null
@@ -1,21 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
-
- This sample demonstrates how to change the position of the chart legend.
-
-
-
-@code {
- private const string pageUrl = "/charts/pie-chart/legend";
- private const string title = "Blazor Pie Chart";
- private const string heading = "Blazor Pie Chart";
- private const string description = "A Blazor pie chart component is a circular chart that shows the proportional values of different categories.";
- private const string imageUrl = "https://i.imgur.com/ieBupT2.png";
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Demo.razor b/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Demo.razor
deleted file mode 100644
index f1085ccc..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Demo.razor
+++ /dev/null
@@ -1,90 +0,0 @@
-@using BlazorBootstrap
-@namespace BlazorExpress.ChartJS.Demo.RCL
-@inherits ComponentBase
-
-@if (ShowCodeOnly)
-{
-
-
- razor
-
-
-
-
-
-
-
-
-
- @if (snippet is not null)
- {
- @snippet.Trim()
- }
-
-
-
-
-}
-else if (!Tabs)
-{
-
-
-
-
-
- razor
-
-
-
-
-
-
-
-
-
- @if (snippet is not null)
- {
- @snippet.Trim()
- }
-
-
-
-
-}
-else // Tabs = true
-{
-
-
-
- Example
-
-
-
-
-
-
-
-
-
- View Source
-
-
-
-
-
-
-
-
-
-
- @if (snippet is not null)
- {
- @snippet.Trim()
- }
-
-
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Skippy.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Skippy.razor.cs
deleted file mode 100644
index e4a59a04..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Skippy.razor.cs
+++ /dev/null
@@ -1,10 +0,0 @@
-namespace BlazroExpress.ChartJS.Demo.RCL;
-
-public partial class Skippy : ComponentBase
-{
- [Parameter]
- public string Url { get; set; } = default!;
-
- [Parameter]
- public RenderFragment ChildContent { get; set; } = default!;
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Skippy.razor.css b/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Skippy.razor.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Snippet.cs b/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Snippet.cs
deleted file mode 100644
index 76c20057..00000000
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Snippet.cs
+++ /dev/null
@@ -1,79 +0,0 @@
-namespace BlazorExpress.ChartJS.Demo.RCL;
-
-public class Snippet : ComponentBase
-{
- #region Members
-
- private string? snippet;
-
- #endregion
-
- #region Methods
-
- protected override void BuildRenderTree(RenderTreeBuilder builder)
- {
- builder.OpenElement(300, "div");
- builder.AddAttribute(301, "class", "highlight show-code-only");
-
- builder.OpenElement(400, "pre");
-
- builder.OpenElement(500, "code");
- builder.AddAttribute(501, "class", LanguageCode.ToLanguageCssClass());
-
- if (snippet != null)
- builder.AddContent(600, snippet.Trim());
-
- builder.CloseElement(); // end: code
- builder.CloseElement(); // end: pre
- builder.CloseElement(); // end: div
- }
-
- protected override async Task OnAfterRenderAsync(bool firstRender)
- {
- if (firstRender)
- await JS.InvokeVoidAsync("highlightCode");
-
- await base.OnAfterRenderAsync(firstRender);
- }
-
- protected override async Task OnParametersSetAsync()
- {
- if (snippet is null)
- {
- if (!string.IsNullOrWhiteSpace(FilePath))
- {
- var resourceName = FilePath.Replace("~", typeof(Snippet).Assembly.GetName().Name).Replace("/", ".").Replace("\\", ".");
-
- using (var stream = typeof(Snippet).Assembly.GetManifestResourceStream(resourceName)!)
- {
- try
- {
- if (stream is null)
- return;
-
- using (var reader = new StreamReader(stream))
- {
- snippet = await reader.ReadToEndAsync();
- }
- }
- catch (Exception ex)
- {
- Console.WriteLine(ex.Message);
- }
- }
- }
- }
- }
-
- #endregion
-
- #region Properties
-
- [Inject] protected IJSRuntime JS { get; set; } = null!;
-
- [Parameter] public LanguageCode LanguageCode { get; set; } = LanguageCode.Razor;
-
- [Parameter] public string? FilePath { get; set; }
-
- #endregion
-}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoAppConstants.cs b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoAppConstants.cs
new file mode 100644
index 00000000..8913c91e
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoAppConstants.cs
@@ -0,0 +1,6 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public static class DemoAppConstants
+{
+ public static Type ProjectRootClassType => typeof(App);
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoImageSrcConstants.cs b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoImageSrcConstants.cs
new file mode 100644
index 00000000..530da88c
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoImageSrcConstants.cs
@@ -0,0 +1,16 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public static class DemoImageSrcConstants
+{
+ #region Fields and Constants
+
+ public const string BarChart = "https://i.imgur.com/FGgEMp6.jpg";
+ public const string DoughnutChart = "https://i.imgur.com/FGgEMp6.jpg";
+ public const string LineChart = "https://i.imgur.com/FGgEMp6.jpg";
+ public const string PieChart = "https://i.imgur.com/FGgEMp6.jpg";
+ public const string PolarAreaChart = "https://i.imgur.com/FGgEMp6.jpg";
+ public const string RadarChart = "https://i.imgur.com/FGgEMp6.jpg";
+ public const string ScatterChart = "https://i.imgur.com/FGgEMp6.jpg";
+
+ #endregion
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoRouteConstants.cs b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoRouteConstants.cs
new file mode 100644
index 00000000..efecaf3f
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoRouteConstants.cs
@@ -0,0 +1,60 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public static class DemoRouteConstants
+{
+ public const string Home_Prefix = "/";
+
+ public const string Blog_Prefix = "/blog";
+ public const string Demos_Prefix = "/demos";
+ public const string Docs_Prefix = "/docs";
+
+ #region Blog
+
+ public const string Blog_Home = Blog_Prefix + "/home";
+
+ #endregion
+
+ #region Demos
+
+ // Charts
+ public const string Demos_BarChart = Demos_Prefix + "/bar-chart";
+ public const string Demos_BubbleChart = Demos_Prefix + "/bubble-chart";
+ public const string Demos_DoughnutChart = Demos_Prefix + "/doughnut-chart";
+ public const string Demos_LineChart = Demos_Prefix + "/line-chart";
+ public const string Demos_PieChart = Demos_Prefix + "/pie-chart";
+ public const string Demos_PolarAreaChart = Demos_Prefix + "/polar-area-chart";
+ public const string Demos_RadarChart = Demos_Prefix + "/radar-chart";
+ public const string Demos_ScatterChart = Demos_Prefix + "/scatter-chart";
+
+ // Utils
+ public const string Demos_Utils_Prefix = Demos_Prefix + "/utils";
+ public const string Demos_ColorUtils = Demos_Utils_Prefix + "/color-utility";
+
+ #endregion
+
+ #region Docs
+
+ // Getting Started
+ public const string Docs_Getting_Started_Prefix = Docs_Prefix + "/getting-started";
+ public const string Docs_Getting_Started_Introduction = Docs_Getting_Started_Prefix + "/introduction";
+ public const string Docs_Getting_Started_Blazor_WebAssembly_NET8 = Docs_Getting_Started_Prefix + "/blazor-webassembly-net-8";
+ public const string Docs_Getting_Started_Blazor_WebApp_NET_8_Interactive_Render_Mode_Server_Global_Location = Docs_Getting_Started_Prefix + "/blazor-webapp-server-global-net-8";
+ public const string Docs_Getting_Started_Blazor_WebApp_NET_8_Interactive_Render_Mode_Auto_Global_Location = Docs_Getting_Started_Prefix + "/blazor-webapp-auto-global-net-8";
+ public const string Docs_Getting_Started_MAUI_NET_8 = Docs_Getting_Started_Prefix + "/maui-blazor-net-8";
+
+ // Charts
+ public const string Docs_BarChart = Docs_Prefix + "/bar-chart";
+ public const string Docs_BubbleChart = Docs_Prefix + "/bubble-chart";
+ public const string Docs_DoughnutChart = Docs_Prefix + "/doughnut-chart";
+ public const string Docs_LineChart = Docs_Prefix + "/line-chart";
+ public const string Docs_PieChart = Docs_Prefix + "/pie-chart";
+ public const string Docs_PolarAreaChart = Docs_Prefix + "/polar-area-chart";
+ public const string Docs_RadarChart = Docs_Prefix + "/radar-chart";
+ public const string Docs_ScatterChart = Docs_Prefix + "/scatter-chart";
+
+ // Utils
+ public const string Docs_Utils_Prefix = Docs_Prefix + "/utils";
+ public const string Docs_ColorUtils = Docs_Utils_Prefix + "/color-utility";
+
+ #endregion
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Constants/StringConstants.cs b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoStringConstants.cs
similarity index 70%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Constants/StringConstants.cs
rename to BlazorExpress.ChartJS.Demo.RCL/Constants/DemoStringConstants.cs
index 0fc7176f..dabd9e70 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Constants/StringConstants.cs
+++ b/BlazorExpress.ChartJS.Demo.RCL/Constants/DemoStringConstants.cs
@@ -1,14 +1,20 @@
namespace BlazorExpress.ChartJS.Demo.RCL;
-internal static class StringConstants
+public static class DemoStringConstants
{
#region Fields and Constants
+ public const string NugetPackageName = "BlazorExpress.ChartJS";
+ public const string NugetPackageDisplayName = "BlazorExpress ChartJS";
+
+ public const string PageTitle_Suffix = " | BlazorExpress ChartJS: An enterprise-grade open-source component library from the Blazor Express team.";
+
public const string Nullable = "Nullable";
public const string PropertyTypeNameInt16 = "Int16";
public const string PropertyTypeNameInt32 = "Int32";
public const string PropertyTypeNameInt64 = "Int64";
public const string PropertyTypeNameChar = "Char";
+ public const string PropertyTypeNameStringComparison = "StringComparison";
public const string PropertyTypeNameString = "String";
public const string PropertyTypeNameSingle = "Single"; // float
public const string PropertyTypeNameDecimal = "Decimal";
@@ -23,6 +29,7 @@ internal static class StringConstants
public const string PropertyTypeNameInt32CSharpTypeKeyword = "int";
public const string PropertyTypeNameInt64CSharpTypeKeyword = "long";
public const string PropertyTypeNameCharCSharpTypeKeyword = "char";
+ public const string PropertyTypeNameStringComparisonCSharpTypeKeyword = "StringComparison";
public const string PropertyTypeNameStringCSharpTypeKeyword = "string";
public const string PropertyTypeNameSingleCSharpTypeKeyword = "float";
public const string PropertyTypeNameDecimalCSharpTypeKeyword = "decimal";
@@ -33,5 +40,9 @@ internal static class StringConstants
public const string PropertyTypeNameEnumCSharpTypeKeyword = "enum";
public const string PropertyTypeNameGuidCSharpTypeKeyword = "Guid";
+ public const string StaticAssets_RootPath = "_content/BlazorExpress.ChartJS.Demo.RCL";
+ public const string StaticAssets_Icons_Path = StaticAssets_RootPath + "/icons";
+ public const string StaticAssets_Icons_Logo_png = StaticAssets_Icons_Path + "/logo.png";
+
#endregion
}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Enums/DemoPageLinkCategory.cs b/BlazorExpress.ChartJS.Demo.RCL/Enums/DemoPageLinkCategory.cs
new file mode 100644
index 00000000..495531cb
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Enums/DemoPageLinkCategory.cs
@@ -0,0 +1,18 @@
+using System.ComponentModel;
+
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public enum DemoPageLinkCategory
+{
+ [Description("All")]
+ All,
+
+ [Description("Getting Started")]
+ GettingStarted,
+
+ [Description("Charts")]
+ Charts,
+
+ [Description("Utils")]
+ Utils
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/BlogMainLayout.razor b/BlazorExpress.ChartJS.Demo.RCL/Layout/BlogMainLayout.razor
new file mode 100644
index 00000000..cd3289b3
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/BlogMainLayout.razor
@@ -0,0 +1,70 @@
+@namespace BlazorExpress.ChartJS.Demo.RCL
+@inherits MainLayoutBase
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @Body
+
+
+
+
+
+
+
+
+
+
+
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/BlogMainLayout.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Layout/BlogMainLayout.razor.cs
new file mode 100644
index 00000000..1b74c009
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/BlogMainLayout.razor.cs
@@ -0,0 +1,88 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public partial class BlogMainLayout : MainLayoutBase
+{
+ #region Fields and Constants
+
+ private bool isSidebarVisible = false;
+ private HashSet linkGroups = new();
+ private Menu menuRef = default!;
+
+ #endregion
+
+ #region Methods
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await JS.InvokeVoidAsync("initializeTheme");
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ protected override void OnInitialized()
+ {
+ if (!linkGroups.Any())
+ linkGroups = GetLinkGroups();
+
+ base.OnInitialized();
+ }
+
+ private HashSet GetLinkGroups()
+ {
+ var groups = new HashSet();
+
+ // GETTING STARTED
+ groups.Add(new LinkGroup
+ {
+ Name = "Getting Started",
+ CssClass = "is-size-7 has-text-weight-bold has-text-danger",
+ Links = [
+ new Link { Href = DemoRouteConstants.Docs_Getting_Started_Prefix, Text = "Getting started" }
+ ]
+ });
+
+ // CHARTS
+ groups.Add(new LinkGroup
+ {
+ Name = "Charts",
+ CssClass = "is-size-7 has-text-weight-bold has-text-warning",
+ Links = [
+ new Link { Href = DemoRouteConstants.Docs_BarChart, Text = "Bar chart" },
+ new Link { Href = DemoRouteConstants.Docs_DoughnutChart, Text = "Doughnut chart" },
+ new Link { Href = DemoRouteConstants.Docs_LineChart, Text = "Line chart" },
+ new Link { Href = DemoRouteConstants.Docs_PieChart, Text = "Pie chart" },
+ new Link { Href = DemoRouteConstants.Docs_PolarAreaChart, Text = "PolarArea chart" },
+ new Link { Href = DemoRouteConstants.Docs_RadarChart, Text = "Radar chart" },
+ new Link { Href = DemoRouteConstants.Docs_ScatterChart, Text = "Scatter chart" }
+ ]
+ });
+
+ // UTILS
+ groups.Add(new LinkGroup
+ {
+ Name = "UTILS",
+ CssClass = "is-size-7 has-text-weight-bold has-text-info",
+ Links = [
+ new Link { Href = DemoRouteConstants.Demos_ColorUtils, Text = "Color Utils" },
+ ]
+ });
+
+ return groups;
+ }
+
+ private Task SetAutoTheme() => SetTheme("system");
+
+ private Task SetDarkTheme() => SetTheme("dark");
+
+ private Task SetLightTheme() => SetTheme("light");
+
+ private async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
+
+ private void ToggleSidebarSection()
+ {
+ @menuRef.Toggle();
+ }
+
+ #endregion
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor b/BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor
new file mode 100644
index 00000000..ff70a162
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor
@@ -0,0 +1,67 @@
+@namespace BlazorExpress.ChartJS.Demo.RCL
+@inherits MainLayoutBase
+
+
+
+
+
+
+
+
+
+
+
+ @Body
+
+
+
+
+
+
+
+
+
+
+
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor.cs
new file mode 100644
index 00000000..511f36cf
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor.cs
@@ -0,0 +1,79 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public partial class DemosMainLayout : MainLayoutBase
+{
+ #region Fields and Constants
+
+ private bool isSidebarVisible = false;
+ private HashSet linkGroups = new();
+ private Menu menuRef = default!;
+
+ #endregion
+
+ #region Methods
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await JS.InvokeVoidAsync("initializeTheme");
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ protected override void OnInitialized()
+ {
+ if (!linkGroups.Any())
+ linkGroups = GetLinkGroups();
+
+ base.OnInitialized();
+ }
+
+ private HashSet GetLinkGroups()
+ {
+ var groups = new HashSet();
+
+ // CHARTS
+ groups.Add(new LinkGroup
+ {
+ Name = "Charts",
+ CssClass = "is-size-7 has-text-weight-bold has-text-warning",
+ Links = [
+ new Link { Href = DemoRouteConstants.Demos_BarChart, Text = "Bar chart" },
+ new Link { Href = DemoRouteConstants.Demos_BubbleChart, Text = "Bubble chart" },
+ new Link { Href = DemoRouteConstants.Demos_DoughnutChart, Text = "Doughnut chart" },
+ new Link { Href = DemoRouteConstants.Demos_LineChart, Text = "Line chart" },
+ new Link { Href = DemoRouteConstants.Demos_PieChart, Text = "Pie chart" },
+ new Link { Href = DemoRouteConstants.Demos_PolarAreaChart, Text = "PolarArea chart" },
+ new Link { Href = DemoRouteConstants.Demos_RadarChart, Text = "Radar chart" },
+ new Link { Href = DemoRouteConstants.Demos_ScatterChart, Text = "Scatter chart" }
+ ]
+ });
+
+ // UTILS
+ groups.Add(new LinkGroup
+ {
+ Name = "UTILS",
+ CssClass = "is-size-7 has-text-weight-bold has-text-info",
+ Links = [
+ new Link { Href = DemoRouteConstants.Demos_ColorUtils, Text = "Color Utils" },
+ ]
+ });
+
+ return groups;
+ }
+
+ private Task SetAutoTheme() => SetTheme("system");
+
+ private Task SetDarkTheme() => SetTheme("dark");
+
+ private Task SetLightTheme() => SetTheme("light");
+
+ private async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
+
+ private void ToggleSidebarSection()
+ {
+ @menuRef.Toggle();
+ }
+
+ #endregion
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor b/BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor
new file mode 100644
index 00000000..cd3289b3
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor
@@ -0,0 +1,70 @@
+@namespace BlazorExpress.ChartJS.Demo.RCL
+@inherits MainLayoutBase
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @Body
+
+
+
+
+
+
+
+
+
+
+
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor.cs
new file mode 100644
index 00000000..a65b6f39
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor.cs
@@ -0,0 +1,93 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public partial class DocsMainLayout : MainLayoutBase
+{
+ #region Fields and Constants
+
+ private bool isSidebarVisible = false;
+ private HashSet linkGroups = new();
+ private Menu menuRef = default!;
+
+ #endregion
+
+ #region Methods
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await JS.InvokeVoidAsync("initializeTheme");
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ protected override void OnInitialized()
+ {
+ if (!linkGroups.Any())
+ linkGroups = GetLinkGroups();
+
+ base.OnInitialized();
+ }
+
+ private HashSet GetLinkGroups()
+ {
+ var groups = new HashSet();
+
+ // GETTING STARTED
+ groups.Add(new LinkGroup
+ {
+ Name = "GETTING STARTED",
+ CssClass = "is-size-7 has-text-weight-bold has-text-danger",
+ Links = [
+ new Link { Href = DemoRouteConstants.Docs_Getting_Started_Introduction, Text = "Introduction" },
+ new Link { Href = DemoRouteConstants.Docs_Getting_Started_Blazor_WebAssembly_NET8, Text = "Blazor WebAssembly (.NET 8)" },
+ new Link { Href = DemoRouteConstants.Docs_Getting_Started_Blazor_WebApp_NET_8_Interactive_Render_Mode_Server_Global_Location, Text = "Blazor WebApp (.NET 8) Server" },
+ //new Link { Href = RouteConstants.Docs_Getting_Started_WebApp_Auto_NET_8, Text = "Blazor WebApp (.NET 8) Auto" },
+ //new Link { Href = RouteConstants.Docs_Getting_Started_MAUI_NET_8, Text = "MAUI Blazor Hybrid App (.NET 8)" },
+ ]
+ });
+
+ // CHARTS
+ groups.Add(new LinkGroup
+ {
+ Name = "Charts",
+ CssClass = "is-size-7 has-text-weight-bold has-text-warning",
+ Links = [
+ new Link { Href = DemoRouteConstants.Docs_BarChart, Text = "Bar chart" },
+ new Link { Href = DemoRouteConstants.Docs_BubbleChart, Text = "Bubble chart" },
+ new Link { Href = DemoRouteConstants.Docs_DoughnutChart, Text = "Doughnut chart" },
+ new Link { Href = DemoRouteConstants.Docs_LineChart, Text = "Line chart" },
+ new Link { Href = DemoRouteConstants.Docs_PieChart, Text = "Pie chart" },
+ new Link { Href = DemoRouteConstants.Docs_PolarAreaChart, Text = "PolarArea chart" },
+ new Link { Href = DemoRouteConstants.Docs_RadarChart, Text = "Radar chart" },
+ new Link { Href = DemoRouteConstants.Docs_ScatterChart, Text = "Scatter chart" }
+ ]
+ });
+
+ // UTILS
+ groups.Add(new LinkGroup
+ {
+ Name = "UTILS",
+ CssClass = "is-size-7 has-text-weight-bold has-text-info",
+ Links = [
+ new Link { Href = DemoRouteConstants.Demos_ColorUtils, Text = "Color Utils" },
+ ]
+ });
+
+ return groups;
+ }
+
+ private Task SetAutoTheme() => SetTheme("system");
+
+ private Task SetDarkTheme() => SetTheme("dark");
+
+ private Task SetLightTheme() => SetTheme("light");
+
+ private async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName);
+
+ private void ToggleSidebarSection()
+ {
+ @menuRef.Toggle();
+ }
+
+ #endregion
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/EmptyLayout.razor b/BlazorExpress.ChartJS.Demo.RCL/Layout/EmptyLayout.razor
new file mode 100644
index 00000000..d75560f5
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/EmptyLayout.razor
@@ -0,0 +1,2 @@
+@namespace BlazroExpress.ChartJS.Demo.RCL
+@inherits MainLayoutBase
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/EmptyLayout.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Layout/EmptyLayout.razor.cs
new file mode 100644
index 00000000..6e6867c1
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/EmptyLayout.razor.cs
@@ -0,0 +1,5 @@
+namespace BlazroExpress.ChartJS.Demo.RCL;
+
+public partial class EmptyLayout : MainLayoutBase
+{
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor
new file mode 100644
index 00000000..90bb5d74
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor
@@ -0,0 +1,33 @@
+@namespace BlazorExpress.ChartJS.Demo.RCL
+@inherits MainLayoutBase
+
+
+
+
+
+
+
+ @Body
+
+
+
+
+
+
+
+
+
+
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor.cs
new file mode 100644
index 00000000..fc8bd82d
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor.cs
@@ -0,0 +1,24 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public partial class MainLayout : MainLayoutBase
+{
+ #region Fields and Constants
+
+ private bool isSidebarVisible = false;
+ //private HashSet linkGroups = new();
+ private Menu menuRef = default!;
+
+ #endregion
+
+ #region Methods
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await JS.InvokeVoidAsync("initializeTheme");
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ #endregion
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/EmptyLayout.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBase.cs
similarity index 55%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Layout/EmptyLayout.razor.cs
rename to BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBase.cs
index 228bb3ff..c3a44451 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/EmptyLayout.razor.cs
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBase.cs
@@ -1,12 +1,13 @@
-namespace BlazroExpress.ChartJS.Demo.RCL;
+namespace BlazorExpress.ChartJS.Demo.RCL;
-public partial class EmptyLayout : LayoutComponentBase
+public class MainLayoutBase : LayoutComponentBase
{
private string version = default!;
- private string homeUrl = default!;
+ private string dotNetVersion = default!;
private string docsUrl = default!;
private string blogUrl = default!;
private string githubUrl = default!;
+ private string nugetUrl = default!;
private string twitterUrl = default!;
private string linkedInUrl = default!;
private string openCollectiveUrl = default!;
@@ -16,20 +17,34 @@ public partial class EmptyLayout : LayoutComponentBase
[Inject] public IConfiguration Configuration { get; set; } = default!;
+ [Inject] protected IJSRuntime JS { get; set; } = default!;
+
protected override void OnInitialized()
{
version = $"v{Configuration["version"]}"; // example: v0.6.1
- homeUrl = $"{Configuration["urls:homeUrl"]}";
+ dotNetVersion = $".NET {Configuration["dotNetVersion"]}"; // example: 9.0.0
docsUrl = $"{Configuration["urls:docs"]}";
blogUrl = $"{Configuration["urls:blog"]}";
githubUrl = $"{Configuration["urls:github"]}";
+ nugetUrl = $"{Configuration["urls:nuget"]}";
twitterUrl = $"{Configuration["urls:twitter"]}";
linkedInUrl = $"{Configuration["urls:linkedin"]}";
openCollectiveUrl = $"{Configuration["urls:opencollective"]}";
githubIssuesUrl = $"{Configuration["urls:github_issues"]}";
githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
-
- base.OnInitialized();
}
+
+ public string Version => version;
+ public string DotNetVersion => dotNetVersion;
+ public string DocsUrl => docsUrl;
+ public string BlogUrl => blogUrl;
+ public string GithubUrl => githubUrl;
+ public string NuGetUrl => nugetUrl;
+ public string TwitterUrl => twitterUrl;
+ public string LinkedInUrl => linkedInUrl;
+ public string OpenCollectiveUrl => openCollectiveUrl;
+ public string GithubIssuesUrl => githubIssuesUrl;
+ public string GithubDiscussionsUrl => githubDiscussionsUrl;
+ public string StackoverflowUrl => stackoverflowUrl;
}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor
new file mode 100644
index 00000000..d706ada0
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor
@@ -0,0 +1,57 @@
+@namespace BlazorExpress.ChartJS.Demo.RCL
+@inherits ComponentBase
+
+
\ No newline at end of file
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor.cs b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor.cs
similarity index 85%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor.cs
rename to BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor.cs
index aaa22b08..c76c13d7 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor.cs
+++ b/BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor.cs
@@ -3,10 +3,11 @@
public partial class MainLayoutBaseFooter : ComponentBase
{
[Parameter] public string? Version { get; set; }
- [Parameter] public string? HomeUrl { get; set; }
+ [Parameter] public string? DotNetVersion { get; set; }
[Parameter] public string? DocsUrl { get; set; }
[Parameter] public string? BlogUrl { get; set; }
[Parameter] public string? GithubUrl { get; set; }
+ [Parameter] public string? NugetUrl { get; set; }
[Parameter] public string? TwitterUrl { get; set; }
[Parameter] public string? LinkedInUrl { get; set; }
[Parameter] public string? OpenCollectiveUrl { get; set; }
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Models/PageLink.cs b/BlazorExpress.ChartJS.Demo.RCL/Models/PageLink.cs
new file mode 100644
index 00000000..cfabc651
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Models/PageLink.cs
@@ -0,0 +1,16 @@
+using BlazorExpress.Bulma.Docx;
+
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public class PageLink
+{
+ public int Id { get; set; }
+ public BootstrapIconName IconName { get; set; } = default!;
+ public string Href { get; set; } = default!;
+ public string Text { get; set; } = default!;
+ public int SortOrder { get; set; }
+ public HashSet Categories { get; set; } = new();
+ public PageLinkStatus Status { get; set; }
+ public bool IsActive { get; set; }
+ public bool ExcludedFromHomePage { get; set; } = false;
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor
new file mode 100644
index 00000000..203605bd
--- /dev/null
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor
@@ -0,0 +1,102 @@
+@attribute [Route(pageUrl)]
+@attribute [Route(pageUrl2)]
+@layout DemosMainLayout
+
+
+
+
+
+ @((MarkupString)pageDescription)
+
+
+
+
+
+
+
+
+
+ The Bar Chart component visualizes data as vertical bars, making it easy to compare values across categories or track changes over time.
+
+ How to use:
+
+
Add the BarChart component to your page.
+
Provide Labels for the X-axis categories and one or more Datasets for the Y-axis values.
+
Customize appearance and behavior using the Options property (e.g., colors, tooltips, axis settings).
+
Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.
+
+ This demo showcases the essential setup for a bar chart and demonstrates how to bind your data for quick visualization.
+
+
+
+
+
+
+ The Horizontal Bar Chart displays data values as horizontal bars, making it ideal for comparing categories with long labels or when you want to emphasize comparison between values.
+
+ How to use:
+
+
Use the BarChart component and set the IndexAxis option to 'y' to render bars horizontally.
+
Provide your data and labels as you would for a standard bar chart.
+
Customize colors and appearance using the available palette utilities or your own color set.
+
+ Refer to the demo code below for a working example and configuration options.
+
+
+
+
+
+
+ The Stacked Bar Chart allows you to display multiple data series stacked on top of each other, making it easy to compare the total and individual contributions of each series for every category.
+
+ How to use:
+
+
Use the BarChart component and configure the Options.Scales.X.Stacked and Options.Scales.Y.Stacked properties to true to enable stacking.
+
Provide multiple datasets in your chart data, each representing a different series to be stacked.
+
Customize colors for each dataset using palette utilities or your own color set for better distinction.
+
Refer to the demo code below for a working example and further configuration options.
+
+
+
+
+
+
+
+ The Stacked Bar Chart with Data Labels enhances the standard stacked bar chart by displaying value labels directly on each bar segment. This makes it easier to read and compare the values of each dataset within a category.
+
+ How to use:
+
+
Use the BarChart component and enable stacking by setting Options.Scales.X.Stacked and Options.Scales.Y.Stacked to true.
+
Add multiple datasets to your chart data to represent different series.
+
Enable data labels by configuring the chart's plugins, such as Options.Plugins.Datalabels.Display = true.
+
Customize the appearance and formatting of data labels as needed for your scenario.
+
+ Refer to the demo code below for a working example and further configuration options.
+
+
+
+
+
+
+ The Locale demo shows how to localize number and date formatting in your bar chart.
+
+ How to use:
+
+
Set the Locale property on the BarChart component to your desired culture code (e.g., "fr-FR" for French).
+
Number and date labels in the chart will automatically format according to the specified locale.
+
This is useful for displaying charts to users in different regions with appropriate formatting.
+
+ Refer to the demo code below for a working example and configuration options.
+
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_BarChart;
+ private const string pageUrl2 = DemoRouteConstants.Demos_Prefix;
+ private const string pageTitle = "Bar Chart";
+ private const string pageDescription = "The Blazor Bar Chart component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
+ private const string metaTitle = "Blazor Bar Chart";
+ private const string metaDescription = "The Blazor Bar Chart component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
+ private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo
+}
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_01_Examples.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_01_Examples.razor
similarity index 80%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_01_Examples.razor
rename to BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_01_Examples.razor
index 0a462d75..c66b5d30 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_01_Examples.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_01_Examples.razor
@@ -1,11 +1,11 @@
-
-
-
-
-
+
+
+
+
+
@code {
@@ -47,7 +47,7 @@
{
var count = barChartDataset.Data.Count;
- var newData = new List();
+ var newData = new List();
for (var i = 0; i < count; i++)
{
newData.Add(random.Next(200));
@@ -125,18 +125,18 @@
datasetsCount += 1;
return new BarChartDataset()
- {
- Label = $"Product {datasetsCount}",
- Data = GetRandomData(),
- BackgroundColor = new List { c.ToRgbString() },
- BorderColor = new List { c.ToRgbString() },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = $"Product {datasetsCount}",
+ Data = GetRandomData(),
+ BackgroundColor = new List { c.ToRgbString() },
+ BorderColor = new List { c.ToRgbString() },
+ BorderWidth = new List { 0 },
+ };
}
- private List GetRandomData()
+ private List GetRandomData()
{
- var data = new List();
+ var data = new List();
for (var index = 0; index < labelsCount; index++)
{
data.Add(random.Next(200));
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_02_Horizontal_BarChart.razor
similarity index 80%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
rename to BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_02_Horizontal_BarChart.razor
index 213700cc..6ec4123f 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_02_Horizontal_BarChart.razor
@@ -11,12 +11,12 @@
var datasets = new List();
var dataset1 = new BarChartDataset()
- {
- Data = new List { 55000, 15000, 18000, 21000 },
- BackgroundColor = new List { ColorUtility.CategoricalTwelveColors[0] },
- BorderColor = new List { ColorUtility.CategoricalTwelveColors[0] },
- BorderWidth = new List { 0 },
- };
+ {
+ Data = new List { 55000, 15000, 18000, 21000 },
+ BackgroundColor = new List { ColorUtility.CategoricalTwelveColors[0] },
+ BorderColor = new List { ColorUtility.CategoricalTwelveColors[0] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset1);
chartData = new ChartData { Labels = labels, Datasets = datasets };
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor
similarity index 63%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
rename to BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor
index 1b1b5515..0b98e51b 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_03_Stacked_BarChart.razor
@@ -13,33 +13,33 @@
var datasets = new List();
var dataset1 = new BarChartDataset()
- {
- Label = "Windows",
- Data = new List { 28000, 8000, 2000, 17000 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "Windows",
+ Data = new List { 28000, 8000, 2000, 17000 },
+ BackgroundColor = new List { colors[0] },
+ BorderColor = new List { colors[0] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset1);
var dataset2 = new BarChartDataset()
- {
- Label = "macOS",
- Data = new List { 8000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "macOS",
+ Data = new List { 8000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[1] },
+ BorderColor = new List { colors[1] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset2);
var dataset3 = new BarChartDataset()
- {
- Label = "Other",
- Data = new List { 28000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "Other",
+ Data = new List { 28000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[2] },
+ BorderColor = new List { colors[2] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset3);
chartData = new ChartData { Labels = labels, Datasets = datasets };
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
similarity index 62%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
rename to BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
index 06746562..60e6fdce 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_04_Stacked_BarChart_with_Datalabels.razor
@@ -13,40 +13,40 @@
var datasets = new List();
var dataset1 = new BarChartDataset()
- {
- Label = "Windows",
- Data = new List { 28000, 8000, 2000, 17000 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "Windows",
+ Data = new List { 28000, 8000, 2000, 17000 },
+ BackgroundColor = new List { colors[0] },
+ BorderColor = new List { colors[0] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset1);
var dataset2 = new BarChartDataset()
- {
- Label = "macOS",
- Data = new List { 8000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "macOS",
+ Data = new List { 8000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[1] },
+ BorderColor = new List { colors[1] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset2);
var dataset3 = new BarChartDataset()
- {
- Label = "Other",
- Data = new List { 28000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "Other",
+ Data = new List { 28000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[2] },
+ BorderColor = new List { colors[2] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset3);
chartData = new ChartData
- {
- Labels = labels,
- Datasets = datasets
- };
+ {
+ Labels = labels,
+ Datasets = datasets
+ };
barChartOptions = new();
barChartOptions.Responsive = true;
diff --git a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_05_Locale.razor b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_05_Locale.razor
similarity index 63%
rename from BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_05_Locale.razor
rename to BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_05_Locale.razor
index 28b1c2c7..5f9a8d4f 100644
--- a/BlazorExpress.ChartJS.Demo.RCL/Components/Pages/BarCharts/BarChart_Demo_05_Locale.razor
+++ b/BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_05_Locale.razor
@@ -13,33 +13,33 @@
var datasets = new List();
var dataset1 = new BarChartDataset()
- {
- Label = "Windows",
- Data = new List { 28000, 8000, 2000, 17000 },
- BackgroundColor = new List { colors[0] },
- BorderColor = new List { colors[0] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "Windows",
+ Data = new List { 28000, 8000, 2000, 17000 },
+ BackgroundColor = new List { colors[0] },
+ BorderColor = new List { colors[0] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset1);
var dataset2 = new BarChartDataset()
- {
- Label = "macOS",
- Data = new List { 8000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[1] },
- BorderColor = new List { colors[1] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "macOS",
+ Data = new List { 8000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[1] },
+ BorderColor = new List { colors[1] },
+ BorderWidth = new List { 0 },
+ };
datasets.Add(dataset2);
var dataset3 = new BarChartDataset()
- {
- Label = "Other",
- Data = new List { 28000, 10000, 14000, 8000 },
- BackgroundColor = new List { colors[2] },
- BorderColor = new List { colors[2] },
- BorderWidth = new List { 0 },
- };
+ {
+ Label = "Other",
+ Data = new List
- BlazorExpress.ChartJS
-
- 
-
-
-
-
-
-
-
-