Skip to content

Commit 0ab2f7a

Browse files
committed
Demos updates
1 parent b7b3b04 commit 0ab2f7a

8 files changed

Lines changed: 50 additions & 25 deletions

File tree

BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
<div class="p-5">
4949
<Button Class="bi bi-box-arrow-right menu-toggle-button ml-1 mt-0 mb-1" @onclick="ToggleSidebarSection" />
5050
@Body
51+
<DoYouKnow />
5152
<Notification Class="has-text-centered" Color="NotificationColor.Link" HideDeleteButton="true">
5253
<a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
5354
<i class="bi bi-star-fill"></i>

BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
<div class="p-5">
4949
<Button Class="bi bi-box-arrow-right menu-toggle-button ml-1 mt-0 mb-1" @onclick="ToggleSidebarSection" />
5050
@Body
51+
<DoYouKnow Class="mt-3" />
5152
<Notification Class="has-text-centered mt-3" Color="NotificationColor.Link" HideDeleteButton="true">
5253
<a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
5354
<i class="bi bi-star-fill"></i>

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@
9393
@code {
9494
private const string pageUrl = RouteConstants.Demos_BarChart;
9595
private const string pageTitle = "Bar Chart";
96-
private const string pageDescription = "The <code>Bar Chart</code> component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
96+
private const string pageDescription = "The <code>Blazor Bar Chart</code> component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
9797
private const string metaTitle = "Blazor Bar Chart";
98-
private const string metaDescription = "The Bar Chart component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
98+
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.";
9999
private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo
100100
}

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/DoughnutChart/DoughnutChartDocumentation.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
@code {
5050
private const string pageUrl = RouteConstants.Demos_DoughnutChart;
5151
private const string pageTitle = "Doughnut Chart";
52-
private const string pageDescription = "Explore interactive Blazor Doughnut Chart demos with real-world examples. Learn how to visualize data, customize chart options, and implement data labels using the Blazor Doughnut Chart component.";
52+
private const string pageDescription = "Explore interactive <code>Blazor Doughnut Chart</code> demos with real-world examples. Learn how to visualize data, customize chart options, and implement data labels using the Blazor Doughnut Chart component.";
5353
private const string metaTitle = "Blazor Doughnut Chart Demo & Examples";
5454
private const string metaDescription = "Explore interactive Blazor Doughnut Chart demos with real-world examples. Learn how to visualize data, customize chart options, and implement data labels using the Blazor Doughnut Chart component.";
5555
private const string imageUrl = "https://i.imgur.com/xEPhAsW.png"; // TODO: Update with the actual image URL for the Doughnut Chart demo

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<Prerequisites PageUrl="@pageUrl" />
1515

16-
<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
1717
<Block>
1818
The <strong>Line Chart</strong> component visualizes data trends using connected data points, making it ideal for tracking changes over time or comparing multiple series.
1919
<br /><br />
@@ -35,7 +35,7 @@
3535
<Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
3636
</Section>
3737

38-
<Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels">
38+
<Section Class="p-0" Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels">
3939
<Block>
4040
The <strong>Line Chart</strong> component supports data labels, allowing you to display values directly on each data point in the chart.
4141
<br /><br />
@@ -51,7 +51,7 @@
5151
<Demo Type="typeof(LineChart_Demo_02_Datalabels)" Tabs="true" />
5252
</Section>
5353

54-
<Section Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration">
54+
<Section Class="p-0" Size="HeadingSize.H4" Name="Tick Configuration" PageUrl="@pageUrl" Link="tick-configuration">
5555
<Block>
5656
The <strong>Tick Configuration</strong> demo shows how to customize the appearance and behavior of axis ticks in the Line Chart component.
5757
<br /><br />
@@ -67,7 +67,7 @@
6767
<Demo Type="typeof(LineChart_Demo_03_Tick_Configuration)" Tabs="true" />
6868
</Section>
6969

70-
<Section Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
70+
<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
7171
<Block>
7272
The <strong>Locale</strong> demo illustrates how to localize number and date formatting in the Line Chart component to match your users' regional preferences.
7373
<br /><br />
@@ -85,9 +85,9 @@
8585

8686
@code {
8787
private const string pageUrl = RouteConstants.Demos_LineChart;
88-
private const string pageTitle = "Blazor Line Chart";
89-
private const string pageDescription = "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.";
90-
private const string metaTitle = "Blazor Line Chart";
91-
private const string metaDescription = "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.";
92-
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
88+
private const string pageTitle = "Line Chart";
89+
private const string pageDescription = "Explore interactive Blazor line chart examples and comprehensive documentation. Learn how to visualize time-series data, customize chart appearance, and implement advanced features using the <code>Blazor Line Chart</code> component.";
90+
private const string metaTitle = "Blazor Line Chart Demo & Examples";
91+
private const string metaDescription = "Explore interactive Blazor line chart examples and comprehensive documentation. Learn how to visualize time-series data, customize chart appearance, and implement advanced features using the Blazor Line Chart component.";
92+
private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; // TODO: Update with the actual image URL for the Line Chart demo
9393
}

BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/BarChart/BarChart_Doc_01_Documentation.razor

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,19 @@
2121
<DocxTable TItem="BarChart" DocType="DocType.Methods" />
2222
</Section>
2323

24-
<Section Class="p-0" Size="HeadingSize.H4" Name="BarChartOptions Properties" PageUrl="@pageUrl" Link="confirm-dialog-options-properties">
24+
<Section Class="p-0" Size="HeadingSize.H4" Name="BarChartOptions Properties" PageUrl="@pageUrl" Link="barchart-options-properties">
2525
<DocxTable TItem="BarChartOptions" DocType="DocType.Properties" />
2626
</Section>
2727

28-
<Section Class="p-0" Size="HeadingSize.H4" Name="BarChartDataset Properties" PageUrl="@pageUrl" Link="confirm-dialog-options-properties">
28+
<Section Class="p-0" Size="HeadingSize.H4" Name="BarChartDataset Properties" PageUrl="@pageUrl" Link="barchart-dataset-properties">
2929
<DocxTable TItem="BarChartDataset" DocType="DocType.Properties" />
3030
</Section>
3131

32-
<Section Class="p-0" Size="HeadingSize.H4" Name="BarChartDatasetData Properties" PageUrl="@pageUrl" Link="confirm-dialog-options-properties">
32+
<Section Class="p-0" Size="HeadingSize.H4" Name="BarChartDatasetData Properties" PageUrl="@pageUrl" Link="barchart-dataset-data-properties">
3333
<DocxTable TItem="BarChartDatasetData" DocType="DocType.Properties" />
3434
</Section>
3535

36-
<Section Class="p-0" Size="HeadingSize.H4" Name="ChartData Properties" PageUrl="@pageUrl" Link="confirm-dialog-options-properties">
36+
<Section Class="p-0" Size="HeadingSize.H4" Name="ChartData Properties" PageUrl="@pageUrl" Link="chart-data-properties">
3737
<DocxTable TItem="ChartData" DocType="DocType.Properties" />
3838
</Section>
3939

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,7 @@
3636

3737
<PageLinks Title="Utils" Category="@PageLinkCategory.Utils" />
3838

39-
<Message Class="mb-4" Color="MessageColor.Success">
40-
<MessageBody>
41-
<div class="is-size-5 has-text-weight-semibold mb-2"><BootstrapIcon Name="BootstrapIconName.Lightbulb" /> DO YOU KNOW?</div>
42-
<div>
43-
This demo website is built using the <strong><a href="@nugetUrl" target="_blank">BlazorExpress.Bulma</a></strong> library and published on the Azure Web App.
44-
See our source code on <a href="@githubUrl" target="_blank">GitHub</a>.
45-
</div>
46-
</MessageBody>
47-
</Message>
39+
<DoYouKnow />
4840
</div>
4941

5042
@code {
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@namespace BlazroExpress.ChartJS.Demo.RCL
2+
@inherits BulmaComponentBase
3+
4+
<Message Class="@ClassNames" Color="MessageColor.Success">
5+
<MessageBody>
6+
<div class="is-size-5 has-text-weight-semibold mb-2"><BootstrapIcon Name="BootstrapIconName.Lightbulb" /> DO YOU KNOW?</div>
7+
<div>
8+
This demo website is built using the <strong><a href="//www.nuget.org/packages/blazorexpress.bulma/" target="_blank">BlazorExpress.Bulma</a></strong> library and published on the Azure Web App.
9+
See our source code on <a href="@githubUrl" target="_blank">GitHub</a>.
10+
</div>
11+
</MessageBody>
12+
</Message>
13+
14+
@code {
15+
private string githubUrl = default!;
16+
private string nugetUrl = default!;
17+
18+
[Inject] public IConfiguration Configuration { get; set; } = default!;
19+
20+
protected override string ClassNames =>
21+
BuildClassNames(
22+
Class,
23+
(BulmaCssClass.MarginBottom4, true)
24+
);
25+
26+
protected override void OnInitialized()
27+
{
28+
githubUrl = $"{Configuration["urls:github"]}";
29+
nugetUrl = $"{Configuration["urls:nuget"]}";
30+
}
31+
}

0 commit comments

Comments
 (0)