Skip to content

Commit ab4187a

Browse files
gvreddy04gvreddy04
authored
Charts enhancements (#19)
* Bar Chart: Border radius demos added. * LineChart: Interpolation modes demo added. * Update BubbleChartDataset styling for better visuals Changed BackgroundColor to use ToRgbaString(0.5) for transparency and reduced BorderWidth from 3 to 1 for a cleaner appearance. NOTE: This commit message is auto-generated using GitHub Copilot. * Refactor chart documentation for improved clarity Updated various chart components' documentation to replace unordered lists with ordered lists in the "How to use" sections. Reformatted "Locale" sections for Bar Chart and Line Chart to enhance readability. Added ordered lists to "How it works" sections for Radar Chart and Scatter Chart. Improved visual separation with additional spacing throughout the documentation. NOTE: This commit message is auto-generated using GitHub Copilot. * Enhance LineChart documentation and add Segment property Updated the "Interpolation Modes" section in `LineChartDocumentation.razor` with detailed usage instructions for the `LineChart` component. Introduced a new `Segment` property in `LineChartDataset.cs` for customizing line segment styles, along with comprehensive documentation linking to Chart.js resources. NOTE: This commit message is auto-generated using GitHub Copilot. * Add animation support to BarChart components and docs This commit introduces new sections in the `BarChartDocumentation.razor` file to document animations related to chart delays, including "Animations - Delay" and "Animations - DataSet level delay". New `Animation` properties of type `ChartAnimation?` are added to the `ChartDataset<TData>` and `ChartOptions` classes, allowing for configurable animations with detailed XML documentation. The `ChartAnimation` class is introduced, featuring properties like `Delay`, `Duration`, `Easing`, and `Loop`, each with comprehensive documentation. Demo files `BarChart_Demo_07_Animations_A_Delay.razor` and `BarChart_Demo_08_Animations_B_DataSet_Level_Delay.razor` are updated to showcase animation settings, with the first demo applying a global delay and the second demonstrating dataset-level customization. Additionally, several properties in the `ChartOptions` class have had their `[Parameter]` attributes removed, reflecting a change in their intended usage. NOTE: This commit message is auto-generated using GitHub Copilot. * Enhance BarChart documentation for animation demos Updated `BarChartDocumentation.razor` to replace placeholder text with detailed descriptions for the "Animations - Delay" and "Animations - DataSet Level Delay" demos. The new content provides clear instructions on usage and highlights the benefits of animation delays in Bar Charts. NOTE: This commit message is auto-generated using GitHub Copilot. * Enhance BarChart documentation for Border Radius feature Updated the `BarChartDocumentation.razor` file to replace the placeholder comment with a detailed description of the "Border Radius" feature. The new content includes benefits, implementation instructions, and customization options for using the `BorderRadius` property, providing clearer guidance for users. NOTE: This commit message is auto-generated using GitHub Copilot. * Add Animation property to ChartDataset and ChartOptions The `Animation` property of type `ChartAnimation?` has been added to both the `ChartDataset<TData>` and `ChartOptions` classes. This property includes XML documentation detailing its purpose and default value, along with a link to the Chart.js animations configuration documentation. Metadata attributes such as `[AddedVersion("1.2.0")]`, `[DefaultValue(null)]`, and `[Description(...)]` have also been included. NOTE: This commit message is auto-generated using GitHub Copilot. * Refactor chart options and initialization logic - Added `chartData` variable in `LineChart_Demo_05_Interpolation_Modes.razor` and removed `datapoints`. - Updated `BarChartOptions.cs` to reintroduce `Parameter` attributes for `IndexAxis`, `Interaction`, `Layout`, `Plugins`, and `Scales`. - Modified `ChartOptions.cs` to treat `Locale`, `MaintainAspectRatio`, and `Responsive` as parameters by removing the `Parameter` attribute. - Adjusted `ChartLayout` properties `AutoPadding` and `Padding` to reflect changes in parameter usage. These changes enhance the usability and clarity of chart configurations in the application. NOTE: This commit message is auto-generated using GitHub Copilot. * Update imageUrl references in chart documentation Replaced hardcoded Imgur URLs with constants from DemoImageSrcConstants across multiple Blazor chart component documentation files. This standardizes image references, simplifying future management and updates. NOTE: This commit message is auto-generated using GitHub Copilot. * Update version to 1.2.0 and modify documentation Updated the application version from `1.1.0` to `1.2.0` in `appsettings.json` and adjusted the `BlazorExpress.ChartJS.csproj` file to reflect the new versioning. The README.md has been updated to change the NuGet installation command to the latest version, ensuring users have the most current package. NOTE: This commit message is auto-generated using GitHub Copilot.
1 parent e2bfc2f commit ab4187a

30 files changed

Lines changed: 704 additions & 159 deletions

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

Lines changed: 87 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@
1919
The <strong>Bar Chart</strong> component visualizes data as vertical bars, making it easy to compare values across categories or track changes over time.
2020
<br /><br />
2121
<strong>How to use:</strong>
22-
<ul>
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-
</ul>
22+
<div class="content">
23+
<ol>
24+
<li>Add the <code>BarChart</code> component to your page.</li>
25+
<li>Provide <code>Labels</code> for the X-axis categories and one or more <code>Datasets</code> for the Y-axis values.</li>
26+
<li>Customize appearance and behavior using the <code>Options</code> property (e.g., colors, tooltips, axis settings).</li>
27+
<li>Refer to the demo code for examples of basic and advanced usage, including multiple datasets and custom styling.</li>
28+
</ol>
29+
</div>
2830
This demo showcases the essential setup for a bar chart and demonstrates how to bind your data for quick visualization.
2931
</Block>
3032
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
@@ -35,11 +37,13 @@
3537
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.
3638
<br /><br />
3739
<strong>How to use:</strong>
38-
<ul>
39-
<li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
40-
<li>Provide your data and labels as you would for a standard bar chart.</li>
41-
<li>Customize colors and appearance using the available palette utilities or your own color set.</li>
42-
</ul>
40+
<div class="content">
41+
<ol>
42+
<li>Use the <code>BarChart</code> component and set the <code>IndexAxis</code> option to <code>'y'</code> to render bars horizontally.</li>
43+
<li>Provide your data and labels as you would for a standard bar chart.</li>
44+
<li>Customize colors and appearance using the available palette utilities or your own color set.</li>
45+
</ol>
46+
</div>
4347
Refer to the demo code below for a working example and configuration options.
4448
</Block>
4549
<Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" />
@@ -50,12 +54,14 @@
5054
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.
5155
<br /><br />
5256
<strong>How to use:</strong>
53-
<ul>
54-
<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>
55-
<li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
56-
<li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
57-
<li>Refer to the demo code below for a working example and further configuration options.</li>
58-
</ul>
57+
<div class="content">
58+
<ol>
59+
<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>
60+
<li>Provide multiple datasets in your chart data, each representing a different series to be stacked.</li>
61+
<li>Customize colors for each dataset using palette utilities or your own color set for better distinction.</li>
62+
<li>Refer to the demo code below for a working example and further configuration options.</li>
63+
</ol>
64+
</div>
5965
</Block>
6066
<Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
6167
</Section>
@@ -78,25 +84,82 @@
7884

7985
<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
8086
<Block>
81-
The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart.
87+
The <strong>Locale</strong> demo shows how to localize number and date formatting in your bar chart.
8288
<br /><br />
8389
<strong>How to use:</strong>
84-
<ul>
85-
<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>
86-
<li>Number and date labels in the chart will automatically format according to the specified locale.</li>
87-
<li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
88-
</ul>
90+
<div class="content">
91+
<ol>
92+
<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>
93+
<li>Number and date labels in the chart will automatically format according to the specified locale.</li>
94+
<li>This is useful for displaying charts to users in different regions with appropriate formatting.</li>
95+
</ol>
96+
</div>
8997
Refer to the demo code below for a working example and configuration options.
9098
</Block>
9199
<Demo Type="typeof(BarChart_Demo_05_Locale)" Tabs="true" />
92100
</Section>
93101

102+
<Section Class="p-0" Size="HeadingSize.H4" Name="Border radius" PageUrl="@pageUrl" Link="border-radius">
103+
<Block>
104+
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.
105+
<br /><br />
106+
<strong>How to use:</strong>
107+
<div class="content">
108+
<ol>
109+
<li>Add the <code>BarChart</code> component to your page.</li>
110+
<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>
111+
<li>Optionally, set <code>BorderSkipped = false</code> to apply the border radius to all corners of each bar.</li>
112+
<li>Customize other appearance options such as <code>BackgroundColor</code> and <code>BorderColor</code> as needed.</li>
113+
<li>Refer to the demo code below for a working example and further customization options.</li>
114+
</ol>
115+
</div>
116+
Using the <code>BorderRadius</code> property, you can easily enhance the style of your bar charts to better match your application's design.
117+
</Block>
118+
<Demo Type="typeof(BarChart_Demo_06_Border_Radius)" Tabs="true" />
119+
</Section>
120+
121+
<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - Delay" PageUrl="@pageUrl" Link="animations-delay">
122+
<Block>
123+
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.
124+
<br /><br />
125+
<strong>How to use:</strong>
126+
<div class="content">
127+
<ol>
128+
<li>Add the <code>BarChart</code> component to your page and define your <code>Labels</code> and <code>Datasets</code> as usual.</li>
129+
<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>
130+
<li>Bind your <code>chartData</code> and <code>barChartOptions</code> to the <code>BarChart</code> component.</li>
131+
<li>Refer to the demo code below for a working example of how to set up and customize animation delays.</li>
132+
</ol>
133+
</div>
134+
Animation delays help you create visually appealing transitions and can be tailored to fit your application's style.
135+
</Block>
136+
<Demo Type="typeof(BarChart_Demo_07_Animations_A_Delay)" Tabs="true" />
137+
</Section>
138+
139+
<Section Class="p-0" Size="HeadingSize.H4" Name="Animations - DataSet level delay" PageUrl="@pageUrl" Link="animations-dataset-level-delay">
140+
<Block>
141+
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.
142+
<br /><br />
143+
<strong>How to use:</strong>
144+
<div class="content">
145+
<ol>
146+
<li>Add the <code>BarChart</code> component to your page and define your <code>Labels</code> and multiple <code>Datasets</code>.</li>
147+
<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>
148+
<li>Bind your <code>chartData</code> and <code>barChartOptions</code> to the <code>BarChart</code> component.</li>
149+
<li>Refer to the demo code below for a practical example of dataset-level animation configuration.</li>
150+
</ol>
151+
</div>
152+
Dataset-level animation delays are ideal for highlighting differences between series and creating engaging, stepwise chart reveals.
153+
</Block>
154+
<Demo Type="typeof(BarChart_Demo_08_Animations_B_DataSet_Level_Delay)" Tabs="true" />
155+
</Section>
156+
94157
@code {
95158
private const string pageUrl = DemoRouteConstants.Demos_BarChart;
96159
private const string pageUrl2 = DemoRouteConstants.Demos_Prefix;
97160
private const string pageTitle = "Bar Chart";
98161
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.";
99162
private const string metaTitle = "Blazor Bar Chart";
100163
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.";
101-
private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update with the actual image URL for the Bar Chart demo
164+
private const string imageUrl = @DemoImageSrcConstants.BarChart;
102165
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_06_Border_Radius.razor‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<BarChart @ref="barChart" Width="600" />
2+
3+
<div class="mt-5">
4+
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
5+
</div>
6+
7+
@code {
8+
private BarChart barChart = default!;
9+
private BarChartOptions barChartOptions = default!;
10+
private ChartData chartData = default!;
11+
12+
private int datasetsCount = 0;
13+
private int labelsCount = 0;
14+
private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
15+
private Random random = new();
16+
17+
protected override void OnInitialized()
18+
{
19+
chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
20+
barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
21+
}
22+
23+
protected override async Task OnAfterRenderAsync(bool firstRender)
24+
{
25+
if (firstRender)
26+
{
27+
await barChart.InitializeAsync(chartData, barChartOptions);
28+
}
29+
await base.OnAfterRenderAsync(firstRender);
30+
}
31+
32+
private async Task RandomizeAsync()
33+
{
34+
if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;
35+
36+
var newDatasets = new List<IChartDataset>();
37+
38+
foreach (var dataset in chartData.Datasets)
39+
{
40+
if (dataset is BarChartDataset barChartDataset
41+
&& barChartDataset is not null
42+
&& barChartDataset.Data is not null)
43+
{
44+
var count = barChartDataset.Data.Count;
45+
46+
var newData = new List<double?>();
47+
for (var i = 0; i < count; i++)
48+
{
49+
newData.Add(NewRandom());
50+
}
51+
52+
barChartDataset.Data = newData;
53+
newDatasets.Add(barChartDataset);
54+
}
55+
}
56+
57+
chartData.Datasets = newDatasets;
58+
59+
await barChart.UpdateAsync(chartData, barChartOptions);
60+
}
61+
62+
#region Data Preparation
63+
64+
private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
65+
{
66+
var datasets = new List<IChartDataset>();
67+
68+
for (var index = 0; index < numberOfDatasets; index++)
69+
{
70+
datasets.Add(GetRandomBarChartDataset());
71+
}
72+
73+
return datasets;
74+
}
75+
76+
private BarChartDataset GetRandomBarChartDataset()
77+
{
78+
var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
79+
80+
datasetsCount += 1;
81+
82+
return new BarChartDataset()
83+
{
84+
Label = $"Product {datasetsCount}",
85+
Data = GetRandomData(),
86+
BorderColor = new List<string> { c.ToRgbString() },
87+
BackgroundColor = new List<string> { c.ToRgbaString(0.5) },
88+
BorderWidth = new List<double> { 2 },
89+
BorderRadius = new List<double> { 10 },
90+
BorderSkipped = false
91+
};
92+
}
93+
94+
private List<double?> GetRandomData()
95+
{
96+
var data = new List<double?>();
97+
for (var index = 0; index < labelsCount; index++)
98+
{
99+
data.Add(NewRandom());
100+
}
101+
102+
return data;
103+
}
104+
105+
private List<string> GetDefaultDataLabels(int numberOfLabels)
106+
{
107+
var labels = new List<string>();
108+
for (var index = 0; index < numberOfLabels; index++)
109+
{
110+
labels.Add(GetNextDataLabel());
111+
}
112+
113+
return labels;
114+
}
115+
116+
private string GetNextDataLabel()
117+
{
118+
labelsCount += 1;
119+
return months[labelsCount - 1];
120+
}
121+
122+
private double NewRandom() => random.Next(-100, 100);
123+
124+
#endregion Data Preparation
125+
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_07_Animations_A_Delay.razor‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<BarChart @ref="barChart" Width="600" />
2+
3+
@code {
4+
private BarChart barChart = default!;
5+
private BarChartOptions barChartOptions = default!;
6+
private ChartData chartData = default!;
7+
8+
protected override void OnInitialized()
9+
{
10+
var colors = ColorUtility.CategoricalTwelveColors;
11+
12+
var labels = new List<string> { "Chrome", "Firefox", "Safari", "Edge" };
13+
var datasets = new List<IChartDataset>();
14+
15+
var dataset1 = new BarChartDataset()
16+
{
17+
Label = "Windows",
18+
Data = new List<double?> { 28000, 8000, 2000, 17000 },
19+
BackgroundColor = new List<string> { colors[3] },
20+
BorderColor = new List<string> { colors[3] },
21+
BorderWidth = new List<double> { 0 }
22+
};
23+
datasets.Add(dataset1);
24+
25+
var dataset2 = new BarChartDataset()
26+
{
27+
Label = "macOS",
28+
Data = new List<double?> { 8000, 10000, 14000, 8000 },
29+
BackgroundColor = new List<string> { colors[4] },
30+
BorderColor = new List<string> { colors[4] },
31+
BorderWidth = new List<double> { 0 }
32+
};
33+
datasets.Add(dataset2);
34+
35+
var dataset3 = new BarChartDataset()
36+
{
37+
Label = "Other",
38+
Data = new List<double?> { 28000, 10000, 14000, 8000 },
39+
BackgroundColor = new List<string> { colors[5] },
40+
BorderColor = new List<string> { colors[5] },
41+
BorderWidth = new List<double> { 0 }
42+
};
43+
datasets.Add(dataset3);
44+
45+
chartData = new ChartData { Labels = labels, Datasets = datasets };
46+
47+
barChartOptions = new();
48+
barChartOptions.Responsive = true;
49+
barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
50+
51+
barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
52+
barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
53+
54+
barChartOptions.Scales.X.Stacked = true;
55+
barChartOptions.Scales.Y.Stacked = true;
56+
57+
barChartOptions.Plugins.Title!.Text = "Operating system";
58+
barChartOptions.Plugins.Title.Display = true;
59+
60+
barChartOptions.Animation = new ChartAnimation { Duration = 1000, Delay = 1500 };
61+
}
62+
63+
protected override async Task OnAfterRenderAsync(bool firstRender)
64+
{
65+
if (firstRender)
66+
{
67+
await barChart.InitializeAsync(chartData, barChartOptions);
68+
}
69+
await base.OnAfterRenderAsync(firstRender);
70+
}
71+
}

0 commit comments

Comments
 (0)