Skip to content

New Radar Chart and Scatter Chart components #791

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Jul 12, 2024
Merged

New Radar Chart and Scatter Chart components #791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
259522b
Charts updates
gvreddy04 Jul 4, 2024
6d1875c
Radar chart updates
gvreddy04 Jul 4, 2024
c198c22
Radar chart and Line chart update
gvreddy04 Jul 4, 2024
0437083
BarChart and LineChart IndexAxis issue fixed.
gvreddy04 Jul 5, 2024
194c780
Scatter chart and other chart updates
gvreddy04 Jul 6, 2024
688fb68
ScatterChart updates
gvreddy04 Jul 6, 2024
abf3e8a
Color Util updates
gvreddy04 Jul 8, 2024
8aa125f
Color Utils - demos updated
gvreddy04 Jul 8, 2024
b314d53
Chart demos update - color utility link updated
gvreddy04 Jul 8, 2024
9bf17e2
Blazor Bootstrap Color Utils
gvreddy04 Jul 9, 2024
0c3464a
ColorUtility - demos update
gvreddy04 Jul 9, 2024
c70a774
PolarAreaChart - demos fixed.
gvreddy04 Jul 9, 2024
177fdc1
PolarAreaChart and RadarChart demos update
gvreddy04 Jul 9, 2024
f9b8608
RadarChart demos fixed.
gvreddy04 Jul 10, 2024
43646ab
Radar Chart and Scatter chart updates + demos fixed
gvreddy04 Jul 10, 2024
1470f93
Charts docs updated.
gvreddy04 Jul 11, 2024
3093ec9
Charts - text updates
gvreddy04 Jul 11, 2024
e14cb35
BarChart - docs updated
gvreddy04 Jul 11, 2024
d617869
Doughnut chart - docs update
gvreddy04 Jul 11, 2024
b214c4c
charts docs - color utility link update
gvreddy04 Jul 11, 2024
03ac6d8
chart docs update
gvreddy04 Jul 11, 2024
d53cc33
Pie chart docs updated
gvreddy04 Jul 12, 2024
fbca1b4
Radar chart + other charts - docs updated
gvreddy04 Jul 12, 2024
398744f
Scatter chart docs updated
gvreddy04 Jul 12, 2024
e8c2e5f
Scatter chart + Line chart - docs updated
gvreddy04 Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,14 @@ internal override IEnumerable<NavItem> GetNavItems()
new (){ Id = "602", Text = "Line Chart", Href = "/charts/line-chart", IconName = IconName.GraphUp, ParentId = "6", Match = NavLinkMatch.All },
new (){ Id = "603", Text = "Pie Chart", Href = "/charts/pie-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
new (){ Id = "604", Text = "Polar Area Chart", Href = "/charts/polar-area-chart", IconName = IconName.PieChartFill, ParentId = "6", Match = NavLinkMatch.All },
new (){ Id = "605", Text = "Radar Chart", Href = "/charts/radar-chart", IconName = IconName.Radar, ParentId = "6", Match = NavLinkMatch.All },
new (){ Id = "605", Text = "Scatter Chart", Href = "/charts/scatter-chart", IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },

new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" },

new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info },
new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" },
};

return navItems;
Expand Down
4 changes: 2 additions & 2 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@

<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.
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
</div>
<Callout Heading="TIP" Color="CalloutColor.Success">
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.
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.
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" />
Expand Down
6 changes: 3 additions & 3 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
{
var count = barChartDataset.Data.Count;

var newData = new List<double>();
var newData = new List<double?>();
for (var i = 0; i < count; i++)
{
newData.Add(random.Next(200));
Expand Down Expand Up @@ -134,9 +134,9 @@
};
}

private List<double> GetRandomData()
private List<double?> GetRandomData()
{
var data = new List<double>();
var data = new List<double?>();
for (var index = 0; index < labelsCount; index++)
{
data.Add(random.Next(200));
Expand Down
2 changes: 1 addition & 1 deletion ...rap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

var dataset1 = new BarChartDataset()
{
Data = new List<double> { 55000, 15000, 18000, 21000 },
Data = new List<double?> { 55000, 15000, 18000, 21000 },
BackgroundColor = new List<string> { ColorUtility.CategoricalTwelveColors[0] },
BorderColor = new List<string> { ColorUtility.CategoricalTwelveColors[0] },
BorderWidth = new List<double> { 0 },
Expand Down
6 changes: 3 additions & 3 deletions ...tstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
var dataset1 = new BarChartDataset()
{
Label = "Windows",
Data = new List<double> { 28000, 8000, 2000, 17000 },
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 },
Expand All @@ -25,7 +25,7 @@
var dataset2 = new BarChartDataset()
{
Label = "macOS",
Data = new List<double> { 8000, 10000, 14000, 8000 },
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 },
Expand All @@ -35,7 +35,7 @@
var dataset3 = new BarChartDataset()
{
Label = "Other",
Data = new List<double> { 28000, 10000, 14000, 8000 },
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 },
Expand Down
6 changes: 3 additions & 3 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
var dataset1 = new BarChartDataset()
{
Label = "Windows",
Data = new List<double> { 28000, 8000, 2000, 17000 },
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 },
Expand All @@ -25,7 +25,7 @@
var dataset2 = new BarChartDataset()
{
Label = "macOS",
Data = new List<double> { 8000, 10000, 14000, 8000 },
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 },
Expand All @@ -35,7 +35,7 @@
var dataset3 = new BarChartDataset()
{
Label = "Other",
Data = new List<double> { 28000, 10000, 14000, 8000 },
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 },
Expand Down
6 changes: 3 additions & 3 deletions ...Components/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
var dataset1 = new BarChartDataset()
{
Label = "Windows",
Data = new List<double> { 28000, 8000, 2000, 17000 },
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 },
Expand All @@ -25,7 +25,7 @@
var dataset2 = new BarChartDataset()
{
Label = "macOS",
Data = new List<double> { 8000, 10000, 14000, 8000 },
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 },
Expand All @@ -35,7 +35,7 @@
var dataset3 = new BarChartDataset()
{
Label = "Other",
Data = new List<double> { 28000, 10000, 14000, 8000 },
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 },
Expand Down
6 changes: 4 additions & 2 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,19 @@
<Demo Type="typeof(Charts_Demo_00_Examples)" Tabs="true" />

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

<Callout Color="CalloutColor.Info">
We will add Bubble Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions.
We will add Bubble Chart and Mixed Chart support in the subsequent versions.
</Callout>

<SectionHeading Size="HeadingSize.H4" Text="Charts Setup" PageUrl="@pageUrl" HashTagName="charts-setup" />
Expand Down
24 changes: 12 additions & 12 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@
new BarChartDataset()
{
Label = "India",
Data = new List<double>{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
Data = new List<double?>{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
BackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
CategoryPercentage = 0.8,
BarPercentage = 1,
},
new BarChartDataset()
{
Label = "England",
Data = new List<double>{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
Data = new List<double?>{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
BackgroundColor = new List<string> { "rgb(255, 166, 0)" },
CategoryPercentage = 0.8,
BarPercentage = 1,
Expand Down Expand Up @@ -68,28 +68,28 @@
new LineChartDataset()
{
Label = "India",
Data = new List<double>{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
Data = new List<double?>{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
BackgroundColor = "rgb(88, 80, 141)",
BorderColor = "rgb(88, 80, 141)",
BorderWidth = 2,
HoverBorderWidth = 4,
PointBackgroundColor = "rgb(88, 80, 141)",
PointBorderColor = "rgb(88, 80, 141)",
PointRadius = 0, // hide points
PointHoverRadius = 4,
//PointBackgroundColor = "rgb(88, 80, 141)",
//PointBorderColor = "rgb(88, 80, 141)",
//PointRadius = 0, // hide points
//PointHoverRadius = 4,
},
new LineChartDataset()
{
Label = "England",
Data = new List<double>{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
Data = new List<double?>{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
BackgroundColor = "rgb(255, 166, 0)",
BorderColor = "rgb(255, 166, 0)",
BorderWidth = 2,
HoverBorderWidth = 4,
PointBackgroundColor = "rgb(255, 166, 0)",
PointBorderColor = "rgb(255, 166, 0)",
PointRadius = 0, // hide points
PointHoverRadius = 4,
// PointBackgroundColor = "rgb(255, 166, 0)",
// PointBorderColor = "rgb(255, 166, 0)",
// PointRadius = 0, // hide points
// PointHoverRadius = 4,
}
}
};
Expand Down
4 changes: 2 additions & 2 deletions ...ootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@

<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.
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
</div>
<Callout Heading="TIP" Color="CalloutColor.Success">
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.
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.
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(DoughnutChart_Demo_01_Examples)" Tabs="true" />
Expand Down
6 changes: 3 additions & 3 deletions ...trap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
{
var count = doughnutChartDataset.Data.Count;

var newData = new List<double>();
var newData = new List<double?>();
for (var i = 0; i < count; i++)
{
newData.Add(random.Next(0, 100));
Expand Down Expand Up @@ -117,9 +117,9 @@
return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
}

private List<double> GetRandomData()
private List<double?> GetRandomData()
{
var data = new List<double>();
var data = new List<double?>();
for (var index = 0; index < dataLabelsCount; index++)
{
data.Add(random.Next(0, 100));
Expand Down
6 changes: 3 additions & 3 deletions ...ap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
{
var count = doughnutChartDataset.Data.Count;

var newData = new List<double>();
var newData = new List<double?>();
for (var i = 0; i < count; i++)
{
newData.Add(random.Next(0, 100));
Expand Down Expand Up @@ -118,9 +118,9 @@
return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() };
}

private List<double> GetRandomData()
private List<double?> GetRandomData()
{
var data = new List<double>();
var data = new List<double?>();
for (var index = 0; index < dataLabelsCount; index++)
{
data.Add(random.Next(0, 100));
Expand Down
4 changes: 2 additions & 2 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@

<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.
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
</div>
<Callout Heading="TIP" Color="CalloutColor.Success">
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.
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.
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(LineChart_Demo_01_A_Examples)" Tabs="true"/>
Expand Down
12 changes: 6 additions & 6 deletions ...rBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
{
var count = lineChartDataset.Data.Count;

var newData = new List<double>();
var newData = new List<double?>();
for (var i = 0; i < count; i++)
{
newData.Add(random.Next(200));
Expand Down Expand Up @@ -126,15 +126,15 @@
BorderColor = c.ToRgbString(),
BorderWidth = 2,
HoverBorderWidth = 4,
PointBackgroundColor = c.ToRgbString(),
PointRadius = 0, // hide points
PointHoverRadius = 4,
// PointBackgroundColor = c.ToRgbString(),
// PointRadius = 0, // hide points
// PointHoverRadius = 4,
};
}

private List<double> GetRandomData()
private List<double?> GetRandomData()
{
var data = new List<double>();
var data = new List<double?>();
for (var index = 0; index < labelsCount; index++)
{
data.Add(random.Next(200));
Expand Down
24 changes: 12 additions & 12 deletions ...rBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,42 @@
var dataset1 = new LineChartDataset
{
Label = "Windows",
Data = new List<double> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
Data = new List<double?> { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 },
BackgroundColor = colors[0],
BorderColor = colors[0],
BorderWidth = 2,
HoverBorderWidth = 4,
PointBackgroundColor = colors[0],
PointRadius = 0, // hide points
PointHoverRadius = 4,
// PointBackgroundColor = colors[0],
// PointRadius = 0, // hide points
// PointHoverRadius = 4,
};
datasets.Add(dataset1);

var dataset2 = new LineChartDataset
{
Label = "macOS",
Data = new List<double> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
Data = new List<double?> { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 },
BackgroundColor = colors[1],
BorderColor = colors[1],
BorderWidth = 2,
HoverBorderWidth = 4,
PointBackgroundColor = colors[1],
PointRadius = 0, // hide points
PointHoverRadius = 4,
// PointBackgroundColor = colors[1],
// PointRadius = 0, // hide points
// PointHoverRadius = 4,
};
datasets.Add(dataset2);

var dataset3 = new LineChartDataset
{
Label = "Other",
Data = new List<double> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
Data = new List<double?> { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 },
BackgroundColor = colors[2],
BorderColor = colors[2],
BorderWidth = 2,
HoverBorderWidth = 4,
PointBackgroundColor = colors[2],
PointRadius = 0, // hide points
PointHoverRadius = 4,
// PointBackgroundColor = colors[2],
// PointRadius = 0, // hide points
// PointHoverRadius = 4,
};
datasets.Add(dataset3);

Expand Down
Loading
Loading