Skip to content

Commit 69a51c6

Browse files
gvreddy04gvreddy04
authored
New Radar Chart and Scatter Chart components (#791)
* New Radar Chart Component * New Scatter Chart Component * Color Utils - docs and demos added * Other charts - docs and demos updated
1 parent 58a0878 commit 69a51c6

File tree

81 files changed

+3741
-948
lines changed

Some content is hidden

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

81 files changed

+3741
-948
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,14 @@ internal override IEnumerable<NavItem> GetNavItems()
8383
new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
8484
new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
8585
new (){ Id = "604", Text = "Polar Area Chart", Href = "/charts/polar-area-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
86+
new (){ Id = "605", Text = "Radar Chart", Href = "/charts/radar-chart", IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
87+
new (){ Id = "605", Text = "Scatter Chart", Href = "/charts/scatter-chart", IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
8688

8789
new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
8890
new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" },
91+
92+
new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info },
93+
new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" },
8994
};
9095

9196
return navItems;

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818

1919
<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
2020
<div class="mb-3">
21-
In the following example, a categorical 12-color palette is used.
21+
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
2222
</div>
2323
<Callout Heading="TIP" Color="CalloutColor.Success">
24-
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.
24+
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
2525
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.
2626
</Callout>
2727
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
{
4848
var count = barChartDataset.Data.Count;
4949

50-
var newData = new List<double>();
50+
var newData = new List<double?>();
5151
for (var i = 0; i < count; i++)
5252
{
5353
newData.Add(random.Next(200));
@@ -134,9 +134,9 @@
134134
};
135135
}
136136

137-
private List<double> GetRandomData()
137+
private List<double?> GetRandomData()
138138
{
139-
var data = new List<double>();
139+
var data = new List<double?>();
140140
for (var index = 0; index < labelsCount; index++)
141141
{
142142
data.Add(random.Next(200));

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
var dataset1 = new BarChartDataset()
1414
{
15-
Data = new List<double> { 55000, 15000, 18000, 21000 },
15+
Data = new List<double?> { 55000, 15000, 18000, 21000 },
1616
BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[0] },
1717
BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[0] },
1818
BorderWidth = new List<double> { 0 },

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
var dataset1 = new BarChartDataset()
1616
{
1717
Label = "Windows",
18-
Data = new List<double> { 28000, 8000, 2000, 17000 },
18+
Data = new List<double?> { 28000, 8000, 2000, 17000 },
1919
BackgroundColor = new List<string> { colors[0] },
2020
BorderColor = new List<string> { colors[0] },
2121
BorderWidth = new List<double> { 0 },
@@ -25,7 +25,7 @@
2525
var dataset2 = new BarChartDataset()
2626
{
2727
Label = "macOS",
28-
Data = new List<double> { 8000, 10000, 14000, 8000 },
28+
Data = new List<double?> { 8000, 10000, 14000, 8000 },
2929
BackgroundColor = new List<string> { colors[1] },
3030
BorderColor = new List<string> { colors[1] },
3131
BorderWidth = new List<double> { 0 },
@@ -35,7 +35,7 @@
3535
var dataset3 = new BarChartDataset()
3636
{
3737
Label = "Other",
38-
Data = new List<double> { 28000, 10000, 14000, 8000 },
38+
Data = new List<double?> { 28000, 10000, 14000, 8000 },
3939
BackgroundColor = new List<string> { colors[2] },
4040
BorderColor = new List<string> { colors[2] },
4141
BorderWidth = new List<double> { 0 },

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
var dataset1 = new BarChartDataset()
1616
{
1717
Label = "Windows",
18-
Data = new List<double> { 28000, 8000, 2000, 17000 },
18+
Data = new List<double?> { 28000, 8000, 2000, 17000 },
1919
BackgroundColor = new List<string> { colors[0] },
2020
BorderColor = new List<string> { colors[0] },
2121
BorderWidth = new List<double> { 0 },
@@ -25,7 +25,7 @@
2525
var dataset2 = new BarChartDataset()
2626
{
2727
Label = "macOS",
28-
Data = new List<double> { 8000, 10000, 14000, 8000 },
28+
Data = new List<double?> { 8000, 10000, 14000, 8000 },
2929
BackgroundColor = new List<string> { colors[1] },
3030
BorderColor = new List<string> { colors[1] },
3131
BorderWidth = new List<double> { 0 },
@@ -35,7 +35,7 @@
3535
var dataset3 = new BarChartDataset()
3636
{
3737
Label = "Other",
38-
Data = new List<double> { 28000, 10000, 14000, 8000 },
38+
Data = new List<double?> { 28000, 10000, 14000, 8000 },
3939
BackgroundColor = new List<string> { colors[2] },
4040
BorderColor = new List<string> { colors[2] },
4141
BorderWidth = new List<double> { 0 },

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
var dataset1 = new BarChartDataset()
1616
{
1717
Label = "Windows",
18-
Data = new List<double> { 28000, 8000, 2000, 17000 },
18+
Data = new List<double?> { 28000, 8000, 2000, 17000 },
1919
BackgroundColor = new List<string> { colors[0] },
2020
BorderColor = new List<string> { colors[0] },
2121
BorderWidth = new List<double> { 0 },
@@ -25,7 +25,7 @@
2525
var dataset2 = new BarChartDataset()
2626
{
2727
Label = "macOS",
28-
Data = new List<double> { 8000, 10000, 14000, 8000 },
28+
Data = new List<double?> { 8000, 10000, 14000, 8000 },
2929
BackgroundColor = new List<string> { colors[1] },
3030
BorderColor = new List<string> { colors[1] },
3131
BorderWidth = new List<double> { 0 },
@@ -35,7 +35,7 @@
3535
var dataset3 = new BarChartDataset()
3636
{
3737
Label = "Other",
38-
Data = new List<double> { 28000, 10000, 14000, 8000 },
38+
Data = new List<double?> { 28000, 10000, 14000, 8000 },
3939
BackgroundColor = new List<string> { colors[2] },
4040
BorderColor = new List<string> { colors[2] },
4141
BorderWidth = new List<double> { 0 },

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,19 @@
1515
<Demo Type="typeof(Charts_Demo_00_Examples)" Tabs="true" />
1616

1717
<SectionHeading Size="HeadingSize.H4" Text="Chart Types" PageUrl="@pageUrl" HashTagName="chart-types" />
18-
<div class="mb-2">At this moment we are supporting four blazor chart types.</div>
18+
<div class="mb-2">At this moment we are supporting seven blazor chart types.</div>
1919
<ol>
2020
<li><a href="/charts/bar-chart">Bar Chart</a></li>
2121
<li><a href="/charts/doughnut-chart">Doughnut Chart</a></li>
2222
<li><a href="/charts/line-chart">Line Chart</a></li>
2323
<li><a href="/charts/pie-chart">Pie Chart</a></li>
2424
<li><a href="/charts/polar-area-chart">Polar Area Chart</a></li>
25+
<li><a href="/charts/radar-chart">Radar Chart</a></li>
26+
<li><a href="/charts/scatter-chart">Scatter Chart</a></li>
2527
</ol>
2628

2729
<Callout Color="CalloutColor.Info">
28-
We will add Bubble Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions.
30+
We will add Bubble Chart and Mixed Chart support in the subsequent versions.
2931
</Callout>
3032

3133
<SectionHeading Size="HeadingSize.H4" Text="Charts Setup" PageUrl="@pageUrl" HashTagName="charts-setup" />

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626
new BarChartDataset()
2727
{
2828
Label = "India",
29-
Data = new List<double>{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
29+
Data = new List<double?>{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
3030
BackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
3131
CategoryPercentage = 0.8,
3232
BarPercentage = 1,
3333
},
3434
new BarChartDataset()
3535
{
3636
Label = "England",
37-
Data = new List<double>{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
37+
Data = new List<double?>{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
3838
BackgroundColor = new List<string> { "rgb(255, 166, 0)" },
3939
CategoryPercentage = 0.8,
4040
BarPercentage = 1,
@@ -68,28 +68,28 @@
6868
new LineChartDataset()
6969
{
7070
Label = "India",
71-
Data = new List<double>{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
71+
Data = new List<double?>{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
7272
BackgroundColor = "rgb(88, 80, 141)",
7373
BorderColor = "rgb(88, 80, 141)",
7474
BorderWidth = 2,
7575
HoverBorderWidth = 4,
76-
PointBackgroundColor = "rgb(88, 80, 141)",
77-
PointBorderColor = "rgb(88, 80, 141)",
78-
PointRadius = 0, // hide points
79-
PointHoverRadius = 4,
76+
//PointBackgroundColor = "rgb(88, 80, 141)",
77+
//PointBorderColor = "rgb(88, 80, 141)",
78+
//PointRadius = 0, // hide points
79+
//PointHoverRadius = 4,
8080
},
8181
new LineChartDataset()
8282
{
8383
Label = "England",
84-
Data = new List<double>{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
84+
Data = new List<double?>{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
8585
BackgroundColor = "rgb(255, 166, 0)",
8686
BorderColor = "rgb(255, 166, 0)",
8787
BorderWidth = 2,
8888
HoverBorderWidth = 4,
89-
PointBackgroundColor = "rgb(255, 166, 0)",
90-
PointBorderColor = "rgb(255, 166, 0)",
91-
PointRadius = 0, // hide points
92-
PointHoverRadius = 4,
89+
// PointBackgroundColor = "rgb(255, 166, 0)",
90+
// PointBorderColor = "rgb(255, 166, 0)",
91+
// PointRadius = 0, // hide points
92+
// PointHoverRadius = 4,
9393
}
9494
}
9595
};

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@
2020

2121
<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
2222
<div class="mb-3">
23-
In the following example, a categorical 12-color palette is used.
23+
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
2424
</div>
2525
<Callout Heading="TIP" Color="CalloutColor.Success">
26-
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.
26+
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
2727
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.
2828
</Callout>
2929
<Demo Type="typeof(DoughnutChart_Demo_01_Examples)" Tabs="true" />

0 commit comments

Comments
 (0)