Skip to content

Commit bb6d88e

Browse files
gvreddy04gvreddy04
authored
Charts integration (#81)
* Refactor code structure and remove redundant code blocks for improved readability and maintainability * Update PageLink statuses in DemoPageLinkUtil for improved accuracy * Add Supported Versions Sync Rule to documentation for dependency management
1 parent 602a23a commit bb6d88e

71 files changed

Lines changed: 4157 additions & 18 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎BlazorExpress.Bulma.Demo.RCL/BlazorExpress.Bulma.Demo.RCL.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
</ItemGroup>
3030

3131
<ItemGroup>
32+
<PackageReference Include="BlazorExpress.ChartJS" Version="1.2.2" />
3233
<PackageReference Include="BlazorExpress.Bulma.Docx" Version="0.3.0" />
3334
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.17" />
3435
<PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoImageSrcConstants.cs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
namespace BlazorExpress.Bulma.Demo.RCL;
2+
3+
public static class DemoImageSrcConstants
4+
{
5+
#region Fields and Constants
6+
7+
private const string DemoImageSrcPrefix = $"{DemoStringConstants.StaticAssets_Images_Path}/screenshots/";
8+
9+
public const string BarChart = DemoImageSrcPrefix + "bar-chart.png";
10+
public const string BubbleChart = DemoImageSrcPrefix + "bubble-chart.png";
11+
public const string DoughnutChart = DemoImageSrcPrefix + "doughnut-chart.png";
12+
public const string LineChart = DemoImageSrcPrefix + "line-chart.png";
13+
public const string PieChart = DemoImageSrcPrefix + "pie-chart.png";
14+
public const string PolarAreaChart = DemoImageSrcPrefix + "polar-area-chart.png";
15+
public const string RadarChart = DemoImageSrcPrefix + "radar-chart.png";
16+
public const string ScatterChart = DemoImageSrcPrefix + "scatter-chart.png";
17+
18+
#endregion
19+
}

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoRouteConstants.cs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@ public static class DemoRouteConstants
1111
// Features
1212
public const string Demos_Skeletons_Documentation = Demos_Prefix + "/skeletons";
1313

14+
// Charts
15+
public const string Demos_BarChart = Demos_Prefix + "/bar-chart";
16+
public const string Demos_BubbleChart = Demos_Prefix + "/bubble-chart";
17+
public const string Demos_DoughnutChart = Demos_Prefix + "/doughnut-chart";
18+
public const string Demos_LineChart = Demos_Prefix + "/line-chart";
19+
public const string Demos_PieChart = Demos_Prefix + "/pie-chart";
20+
public const string Demos_PolarAreaChart = Demos_Prefix + "/polar-area-chart";
21+
public const string Demos_RadarChart = Demos_Prefix + "/radar-chart";
22+
public const string Demos_ScatterChart = Demos_Prefix + "/scatter-chart";
23+
1424
// Icons
1525
public const string Demos_BootstrapIcons_Documentation = Demos_Prefix + "/icons/bootstrap-icons";
1626
public const string Demos_GoogleFontIcons_Documentation = Demos_Prefix + "/icons/google-font-icons";
@@ -87,6 +97,16 @@ public static class DemoRouteConstants
8797
// Features
8898
public const string Docs_Skeletons_Documentation = Docs_Prefix + "/skeletons";
8999

100+
// Charts
101+
public const string Docs_BarChart = Docs_Prefix + "/bar-chart";
102+
public const string Docs_BubbleChart = Docs_Prefix + "/bubble-chart";
103+
public const string Docs_DoughnutChart = Docs_Prefix + "/doughnut-chart";
104+
public const string Docs_LineChart = Docs_Prefix + "/line-chart";
105+
public const string Docs_PieChart = Docs_Prefix + "/pie-chart";
106+
public const string Docs_PolarAreaChart = Docs_Prefix + "/polar-area-chart";
107+
public const string Docs_RadarChart = Docs_Prefix + "/radar-chart";
108+
public const string Docs_ScatterChart = Docs_Prefix + "/scatter-chart";
109+
90110
// Icons
91111
public const string Docs_BootstrapIcons_Documentation = Docs_Prefix + "/icons/bootstrap-icons";
92112
public const string Docs_GoogleFontIcons_Documentation = Docs_Prefix + "/icons/google-font-icons";

‎BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,23 @@ private HashSet<LinkGroup> GetLinkGroups()
4242
]
4343
});
4444

45+
// CHARTS
46+
groups.Add(new LinkGroup
47+
{
48+
Name = "CHARTS",
49+
CssClass = "is-size-7 has-text-weight-bold has-text-warning",
50+
Links = [
51+
new Link { Href = DemoRouteConstants.Demos_BarChart, Text = "Bar Chart" },
52+
new Link { Href = DemoRouteConstants.Demos_BubbleChart, Text = "Bubble Chart" },
53+
new Link { Href = DemoRouteConstants.Demos_DoughnutChart, Text = "Doughnut Chart" },
54+
new Link { Href = DemoRouteConstants.Demos_LineChart, Text = "Line Chart" },
55+
new Link { Href = DemoRouteConstants.Demos_PieChart, Text = "Pie Chart" },
56+
new Link { Href = DemoRouteConstants.Demos_PolarAreaChart, Text = "PolarArea Chart" },
57+
new Link { Href = DemoRouteConstants.Demos_RadarChart, Text = "Radar Chart" },
58+
new Link { Href = DemoRouteConstants.Demos_ScatterChart, Text = "Scatter Chart" }
59+
]
60+
});
61+
4562
// ICONS
4663
groups.Add(new LinkGroup
4764
{

‎BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,23 @@ private HashSet<LinkGroup> GetLinkGroups()
5656
]
5757
});
5858

59+
// CHARTS
60+
groups.Add(new LinkGroup
61+
{
62+
Name = "CHARTS",
63+
CssClass = "is-size-7 has-text-weight-bold has-text-warning",
64+
Links = [
65+
new Link { Href = DemoRouteConstants.Docs_BarChart, Text = "Bar Chart" },
66+
new Link { Href = DemoRouteConstants.Docs_BubbleChart, Text = "Bubble Chart" },
67+
new Link { Href = DemoRouteConstants.Docs_DoughnutChart, Text = "Doughnut Chart" },
68+
new Link { Href = DemoRouteConstants.Docs_LineChart, Text = "Line Chart" },
69+
new Link { Href = DemoRouteConstants.Docs_PieChart, Text = "Pie Chart" },
70+
new Link { Href = DemoRouteConstants.Docs_PolarAreaChart, Text = "PolarArea Chart" },
71+
new Link { Href = DemoRouteConstants.Docs_RadarChart, Text = "Radar Chart" },
72+
new Link { Href = DemoRouteConstants.Docs_ScatterChart, Text = "Scatter Chart" }
73+
]
74+
});
75+
5976
// ICONS
6077
groups.Add(new LinkGroup
6178
{

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Charts/BarChart/BarChartDocumentation.razor‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@DemoRouteConstants.Docs_BarChart" />
13+
14+
<Prerequisites PageUrl="@pageUrl" />
15+
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
17+
<Block>
18+
The <strong>Bar Chart</strong> component visualizes data as vertical bars, making it easy to compare values across categories or track changes over time.
19+
<br /><br />
20+
<strong>How to use:</strong>
21+
<div class="content">
22+
<ol>
23+
<li>Add the <code>BarChart</code> component to your page.</li>
24+
<li>Provide <code>Labels</code> for the X-axis categories and one or more <code>Datasets</code> for the Y-axis values.</li>
25+
<li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, tooltips, axis settings).</li>
26+
<li>Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.</li>
27+
</ol>
28+
</div>
29+
This demo showcases the essential setup for a bar chart and demonstrates how to bind your data for quick visualization.
30+
</Block>
31+
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
32+
</Section>
33+
34+
<Section Class="p-0" Size="HeadingSize.H4" Name="Combo bar/line" PageUrl="@pageUrl" Link="combo-bar-line">
35+
<Block>
36+
The <strong>Combo bar/line</strong> demo mixes <code>BarChartDataset</code> and <code>LineChartDataset</code> in the same <code>BarChart</code>.
37+
<br /><br />
38+
<strong>How to use:</strong>
39+
<div class="content">
40+
<ol>
41+
<li>Use the <code>BarChart</code> component as the root chart.</li>
42+
<li>Add both <code>BarChartDataset</code> and <code>LineChartDataset</code> instances to the same <code>ChartData.Datasets</code> collection.</li>
43+
<li>Configure interaction options such as <code>Mode = InteractionMode.Index</code> and <code>Intersect = false</code> for a combined tooltip experience.</li>
44+
<li>Refer to the demo code below for a working example with bar columns and a line overlay.</li>
45+
</ol>
46+
</div>
47+
</Block>
48+
<Demo Type="typeof(BarChart_Demo_09_Combo_Bar_Line)" Tabs="true" />
49+
</Section>
50+
51+
<Section Class="p-0" Size="HeadingSize.H4" Name="Horizontal bar chart" PageUrl="@pageUrl" Link="horizontal-bar-chart">
52+
<Block>
53+
The <strong>Horizontal Bar Chart</strong> displays data values as horizontal bars, making it ideal for comparing categories with long labels or when you want to emphasize comparison between values.
54+
<br /><br />
55+
<strong>How to use:</strong>
56+
<div class="content">
57+
<ol>
58+
<li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
59+
<li>Provide your data and labels as you would for a standard bar chart.</li>
60+
<li>Customize colors and appearance using the available palette utilities or your own color set.</li>
61+
</ol>
62+
</div>
63+
Refer to the demo code below for a working example and configuration options.
64+
</Block>
65+
<Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" />
66+
</Section>
67+
68+
<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart" PageUrl="@pageUrl" Link="stacked-bar-chart">
69+
<Block>
70+
The <strong>Stacked Bar Chart</strong> 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.
71+
<br /><br />
72+
<strong>How to use:</strong>
73+
<div class="content">
74+
<ol>
75+
<li>Use the <code>BarChart</code> component and configure the <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> properties to <code>true</code> to enable stacking.</li>
76+
<li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
77+
<li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
78+
<li>Refer to the demo code below for a working example and further configuration options.</li>
79+
</ol>
80+
</div>
81+
</Block>
82+
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
83+
</Section>
84+
85+
<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart with data labels" PageUrl="@pageUrl" Link="stacked-bar-chart-with-data-labels">
86+
<Block>
87+
The <strong>Stacked Bar Chart with Data Labels</strong> 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.
88+
<br /><br />
89+
<strong>How to use:</strong>
90+
<ul>
91+
<li>Use the <code>BarChart</code> component and enable stacking by setting <code>Options.Scales.X.Stacked</code> and <code>Options.Scales.Y.Stacked</code> to <code>true</code>.</li>
92+
<li>Add multiple datasets to your chart data to represent different series.</li>
93+
<li>Enable data labels by configuring the chart's plugins, such as <code>Options.Plugins.Datalabels.Display = true</code>.</li>
94+
<li>Customize the appearance and formatting of data labels as needed for your scenario.</li>
95+
</ul>
96+
Refer to the demo code below for a working example and further configuration options.
97+
</Block>
98+
<Demo Type="typeof(BarChart_Demo_04_Stacked_BarChart_with_Datalabels)" Tabs="true" />
99+
</Section>
100+
101+
<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
102+
<Block>
103+
The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart.
104+
<br /><br />
105+
<strong>How to use:</strong>
106+
<div class="content">
107+
<ol>
108+
<li>Set the <code>Locale</code> property on the <code>BarChart</code> component to your desired culture code (e.g., <code>"fr-FR"</code> for French).</li>
109+
<li>Number and date labels in the chart will automatically format according to the specified locale.</li>
110+
<li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
111+
</ol>
112+
</div>
113+
Refer to the demo code below for a working example and configuration options.
114+
</Block>
115+
<Demo Type="typeof(BarChart_Demo_05_Locale)" Tabs="true" />
116+
</Section>
117+
118+
<Section Class="p-0" Size="HeadingSize.H4" Name="Border radius" PageUrl="@pageUrl" Link="border-radius">
119+
<Block>
120+
The <strong>Border Radius</strong> feature allows you to create bar charts with rounded corners, giving your charts a modern and visually appealing look. This is especially useful for dashboards and applications where aesthetics are important.
121+
<br /><br />
122+
<strong>How to use:</strong>
123+
<div class="content">
124+
<ol>
125+
<li>Add the <code>BarChart</code> component to your page.</li>
126+
<li>When defining each <code>BarChartDataset</code>, set the <code>BorderRadius</code> property to a list of pixel values (e.g., <code>new List&lt;double&gt; { 10 }</code>) to control the roundness of the bar corners.</li>
127+
<li>Optionally, set <code>BorderSkipped = false</code> to apply the border radius to all corners of each bar.</li>
128+
<li>Customize other appearance options such as <code>BackgroundColor</code> and <code>BorderColor</code> as needed.</li>
129+
<li>Refer to the demo code below for a working example and further customization options.</li>
130+
</ol>
131+
</div>
132+
Using the <code>BorderRadius</code> property, you can easily enhance the style of your bar charts to better match your application's design.
133+
</Block>
134+
<Demo Type="typeof(BarChart_Demo_06_Border_Radius)" Tabs="true" />
135+
</Section>
136+
137+
<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - Delay" PageUrl="@pageUrl" Link="animations-delay">
138+
<Block>
139+
The <strong>Animations - Delay</strong> demo illustrates how to add a delay to the animation of your Bar Chart, making the chart elements appear with a timed entrance effect. This is useful for drawing attention to the chart as it loads or for creating a more engaging user experience.
140+
<br /><br />
141+
<strong>How to use:</strong>
142+
<div class="content">
143+
<ol>
144+
<li>Add the <code>BarChart</code> component to your page and define your <code>Labels</code> and <code>Datasets</code> as usual.</li>
145+
<li>Configure the <code>Options.Animation</code> property by setting the <code>Duration</code> (in milliseconds) and <code>Delay</code> (in milliseconds) to control the timing of the animation.</li>
146+
<li>Bind your <code>chartData</code> and <code>barChartOptions</code> to the <code>BarChart</code> component.</li>
147+
<li>Refer to the demo code below for a working example of how to set up and customize animation delays.</li>
148+
</ol>
149+
</div>
150+
Animation delays help you create visually appealing transitions and can be tailored to fit your application's style.
151+
</Block>
152+
<Demo Type="typeof(BarChart_Demo_07_Animations_A_Delay)" Tabs="true" />
153+
</Section>
154+
155+
<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - DataSet level delay" PageUrl="@pageUrl" Link="animations-dataset-level-delay">
156+
<Block>
157+
The <strong>Animations - DataSet Level Delay</strong> demo demonstrates how to apply different animation delays to each dataset in your Bar Chart. This allows each dataset to animate in sequence, making comparisons clearer and adding a dynamic effect to your data presentation.
158+
<br /><br />
159+
<strong>How to use:</strong>
160+
<div class="content">
161+
<ol>
162+
<li>Add the <code>BarChart</code> component to your page and define your <code>Labels</code> and multiple <code>Datasets</code>.</li>
163+
<li>For each dataset, set the <code>Animation</code> property with specific <code>Duration</code> and <code>Delay</code> values to control when each dataset animates.</li>
164+
<li>Bind your <code>chartData</code> and <code>barChartOptions</code> to the <code>BarChart</code> component.</li>
165+
<li>Refer to the demo code below for a practical example of dataset-level animation configuration.</li>
166+
</ol>
167+
</div>
168+
Dataset-level animation delays are ideal for highlighting differences between series and creating engaging, stepwise chart reveals.
169+
</Block>
170+
<Demo Type="typeof(BarChart_Demo_08_Animations_B_DataSet_Level_Delay)" Tabs="true" />
171+
</Section>
172+
173+
@code {
174+
private const string pageUrl = DemoRouteConstants.Demos_BarChart;
175+
private const string pageTitle = "Bar Chart";
176+
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.";
177+
private const string metaTitle = "Blazor Bar Chart";
178+
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.";
179+
private const string imageUrl = @DemoImageSrcConstants.BarChart;
180+
}

0 commit comments

Comments
 (0)