-
-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Charts update + demos update
- Loading branch information
Showing
84 changed files
with
3,119 additions
and
1,093 deletions.
There are no files selected for viewing
40 changes: 40 additions & 0 deletions
40
BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChartDocumentation.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| @page "/charts/bar-chart" | ||
|
|
||
| <PageTitle>@title</PageTitle> | ||
|
|
||
| <MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" /> | ||
|
|
||
| <h1>Blazor Bar Chart</h1> | ||
| <div class="lead mb-3"> | ||
| A Blazor Bootstrap 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. | ||
| </div> | ||
|
|
||
| <SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" /> | ||
| <div class="mb-3"> | ||
| In the following example, a categorical 12-color palette is used. | ||
| </div> | ||
| <Callout Heading="TIP" Type="CalloutType.Tip"> | ||
| For data visualization, you can use the predefined palettes <code>ColorBuilder.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorBuilder.CategoricalSixColors</code> 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. | ||
| </Callout> | ||
| <Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" /> | ||
|
|
||
| <SectionHeading Size="HeadingSize.H4" Text="Horizontal bar chart" PageUrl="@pageUrl" HashTagName="horizontal-bar-chart" /> | ||
| <Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" /> | ||
|
|
||
| <SectionHeading Size="HeadingSize.H4" Text="Stacked bar chart" PageUrl="@pageUrl" HashTagName="stacked-bar-chart" /> | ||
| <Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" /> | ||
|
|
||
| <SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" /> | ||
| <div class="my-3"> | ||
| 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 <b>German</b> locale (<b>de_DE</b>). | ||
| </div> | ||
| <Demo Type="typeof(BarChart_Demo_04_Locale)" Tabs="true" /> | ||
|
|
||
| @code { | ||
| private string pageUrl = "/charts/bar-chart"; | ||
| private string title = "Blazor Bar Chart"; | ||
| private string description = "A Blazor Bootstrap 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 string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
...trap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <BarChart @ref="barChart" Height="300" Class="mb-4" /> | ||
|
|
||
| @code { | ||
| private BarChart barChart = default!; | ||
| private BarChartOptions barChartOptions = default!; | ||
| private ChartData chartData = default!; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" }; | ||
| var datasets = new List<IChartDataset>(); | ||
|
|
||
| var dataset1 = new BarChartDataset() | ||
| { | ||
| Data = new List<double> { 55000, 15000, 18000, 21000 }, | ||
| BackgroundColor = new List<string> { ColorBuilder.CategoricalTwelveColors[0] }, | ||
| BorderColor = new List<string> { ColorBuilder.CategoricalTwelveColors[0] }, | ||
| BorderWidth = new List<double> { 0 }, | ||
| }; | ||
| datasets.Add(dataset1); | ||
|
|
||
| chartData = new ChartData { | ||
| Labels = labels, | ||
| Datasets = datasets }; | ||
|
|
||
| barChartOptions = new BarChartOptions(); | ||
| barChartOptions.Responsive = true; | ||
| barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; | ||
| barChartOptions.IndexAxis = "y"; | ||
|
|
||
| barChartOptions.Scales.X.Title.Text = "Visitors"; | ||
| barChartOptions.Scales.X.Title.Display = true; | ||
|
|
||
| barChartOptions.Scales.Y.Title.Text = "Browser"; | ||
| barChartOptions.Scales.Y.Title.Display = true; | ||
|
|
||
| barChartOptions.Plugins.Legend.Display = false; | ||
| } | ||
|
|
||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (firstRender) | ||
| { | ||
| await barChart.InitializeAsync(chartData, barChartOptions); | ||
| } | ||
| await base.OnAfterRenderAsync(firstRender); | ||
| } | ||
| } |
77 changes: 77 additions & 0 deletions
77
...otstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <BarChart @ref="barChart" Height="300" Class="mb-4" /> | ||
|
|
||
| @code { | ||
| private BarChart barChart = default!; | ||
| private BarChartOptions barChartOptions = default!; | ||
| private ChartData chartData = default!; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| var colors = ColorBuilder.CategoricalTwelveColors; | ||
|
|
||
| var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" }; | ||
| var datasets = new List<IChartDataset>(); | ||
|
|
||
| var dataset1 = new BarChartDataset() | ||
| { | ||
| Label = "Windows", | ||
| Data = new List<double> { 28000, 8000, 2000, 17000 }, | ||
| BackgroundColor = new List<string> { colors[0] }, | ||
| BorderColor = new List<string> { colors[0] }, | ||
| BorderWidth = new List<double> { 0 }, | ||
| }; | ||
| datasets.Add(dataset1); | ||
|
|
||
| var dataset2 = new BarChartDataset() | ||
| { | ||
| Label = "macOS", | ||
| Data = new List<double> { 8000, 10000, 14000, 8000 }, | ||
| BackgroundColor = new List<string> { colors[1] }, | ||
| BorderColor = new List<string> { colors[1] }, | ||
| BorderWidth = new List<double> { 0 }, | ||
| }; | ||
| datasets.Add(dataset2); | ||
|
|
||
| var dataset3 = new BarChartDataset() | ||
| { | ||
| Label = "Other", | ||
| Data = new List<double> { 28000, 10000, 14000, 8000 }, | ||
| BackgroundColor = new List<string> { colors[2] }, | ||
| BorderColor = new List<string> { colors[2] }, | ||
| BorderWidth = new List<double> { 0 }, | ||
| }; | ||
| datasets.Add(dataset3); | ||
|
|
||
| chartData = new ChartData | ||
| { | ||
| Labels = labels, | ||
| Datasets = datasets | ||
| }; | ||
|
|
||
| barChartOptions = new(); | ||
| barChartOptions.Responsive = true; | ||
| barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; | ||
| barChartOptions.IndexAxis = "y"; | ||
|
|
||
| barChartOptions.Scales.X.Title.Text = "Visitors"; | ||
| barChartOptions.Scales.X.Title.Display = true; | ||
|
|
||
| barChartOptions.Scales.Y.Title.Text = "Browser"; | ||
| barChartOptions.Scales.Y.Title.Display = true; | ||
|
|
||
| barChartOptions.Scales.X.Stacked = true; | ||
| barChartOptions.Scales.Y.Stacked = true; | ||
|
|
||
| barChartOptions.Plugins.Title.Text = "Operating system"; | ||
| barChartOptions.Plugins.Title.Display = true; | ||
| } | ||
|
|
||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (firstRender) | ||
| { | ||
| await barChart.InitializeAsync(chartData, barChartOptions); | ||
| } | ||
| await base.OnAfterRenderAsync(firstRender); | ||
| } | ||
| } |
78 changes: 78 additions & 0 deletions
78
BlazorBootstrap.Demo.Hosted/Client/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <BarChart @ref="barChart" Height="300" Class="mb-4" /> | ||
|
|
||
| @code { | ||
| private BarChart barChart = default!; | ||
| private BarChartOptions barChartOptions = default!; | ||
| private ChartData chartData = default!; | ||
|
|
||
| protected override void OnInitialized() | ||
| { | ||
| var colors = ColorBuilder.CategoricalTwelveColors; | ||
|
|
||
| var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" }; | ||
| var datasets = new List<IChartDataset>(); | ||
|
|
||
| var dataset1 = new BarChartDataset() | ||
| { | ||
| Label = "Windows", | ||
| Data = new List<double> { 28000, 8000, 2000, 17000 }, | ||
| BackgroundColor = new List<string> { colors[0] }, | ||
| BorderColor = new List<string> { colors[0] }, | ||
| BorderWidth = new List<double> { 0 }, | ||
| }; | ||
| datasets.Add(dataset1); | ||
|
|
||
| var dataset2 = new BarChartDataset() | ||
| { | ||
| Label = "macOS", | ||
| Data = new List<double> { 8000, 10000, 14000, 8000 }, | ||
| BackgroundColor = new List<string> { colors[1] }, | ||
| BorderColor = new List<string> { colors[1] }, | ||
| BorderWidth = new List<double> { 0 }, | ||
| }; | ||
| datasets.Add(dataset2); | ||
|
|
||
| var dataset3 = new BarChartDataset() | ||
| { | ||
| Label = "Other", | ||
| Data = new List<double> { 28000, 10000, 14000, 8000 }, | ||
| BackgroundColor = new List<string> { colors[2] }, | ||
| BorderColor = new List<string> { colors[2] }, | ||
| BorderWidth = new List<double> { 0 }, | ||
| }; | ||
| datasets.Add(dataset3); | ||
|
|
||
| chartData = new ChartData | ||
| { | ||
| Labels = labels, | ||
| Datasets = datasets | ||
| }; | ||
|
|
||
| barChartOptions = new(); | ||
| barChartOptions.Locale = "de-DE"; | ||
| barChartOptions.Responsive = true; | ||
| barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; | ||
| barChartOptions.IndexAxis = "y"; | ||
|
|
||
| barChartOptions.Scales.X.Title.Text = "Visitors"; | ||
| barChartOptions.Scales.X.Title.Display = true; | ||
|
|
||
| barChartOptions.Scales.Y.Title.Text = "Browser"; | ||
| barChartOptions.Scales.Y.Title.Display = true; | ||
|
|
||
| barChartOptions.Scales.X.Stacked = true; | ||
| barChartOptions.Scales.Y.Stacked = true; | ||
|
|
||
| barChartOptions.Plugins.Title.Text = "Operating system"; | ||
| barChartOptions.Plugins.Title.Display = true; | ||
| } | ||
|
|
||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| if (firstRender) | ||
| { | ||
| await barChart.InitializeAsync(chartData, barChartOptions); | ||
| } | ||
| await base.OnAfterRenderAsync(firstRender); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.