diff --git a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj index 276edcda8..fee67b139 100644 --- a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj +++ b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj @@ -11,6 +11,7 @@ + diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor index 746f4c0ec..015f75a19 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor @@ -10,11 +10,6 @@ -
-
- Refer to the getting started guide for setting up charts. -
-
In the following example, a categorical 12-color palette is used. @@ -71,16 +66,18 @@
-
- - - +
+
+ Set the OnClick callback to react when a chart data item is selected. The callback receives ChartClickEventArgs with the dataset index and label, data-item index and label, and raw value. +
+ +
@code { private const string pageUrl = DemoRouteConstants.Demos_URL_BarChart; private const string pageTitle = "Blazor Bar Chart"; - private const string pageDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side."; + private const string pageDescription = "A BlazorExpress.ChartJS bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side."; private const string metaTitle = "Blazor Bar Chart Component"; - private const string metaDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side."; + private const string metaDescription = "A BlazorExpress.ChartJS bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side."; private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor index 02cc0d82d..ce5827611 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor @@ -1,4 +1,4 @@ - +
@@ -120,7 +120,7 @@ private BarChartDataset GetRandomBarChartDataset() { - var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor(); datasetsCount += 1; @@ -128,8 +128,8 @@ { Label = $"Product {datasetsCount}", Data = GetRandomData(), - BackgroundColor = new List { c.ToRgbString() }, - BorderColor = new List { c.ToRgbString() }, + BackgroundColor = new List { c.ToChartRgbString() }, + BorderColor = new List { c.ToChartRgbString() }, BorderWidth = new List { 0 }, }; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor index de6d838c4..f814b2c90 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor @@ -1,4 +1,4 @@ - + @code { private BarChart barChart = default!; @@ -23,7 +23,7 @@ barChartOptions = new BarChartOptions(); barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = "y"; barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor index 8d9ad4349..06a271e18 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor @@ -1,4 +1,4 @@ - + @code { private BarChart barChart = default!; @@ -46,7 +46,7 @@ barChartOptions = new(); barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = "y"; barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor index 8fcd906e9..802d39d04 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor @@ -1,4 +1,4 @@ - + @code { private BarChart barChart = default!; @@ -47,7 +47,7 @@ barChartOptions = new(); barChartOptions.Locale = "de-DE"; barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = "y"; barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor index b49273038..9af0adb37 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor @@ -1,4 +1,4 @@ - + @code { private BarChart barChart = default!; @@ -50,7 +50,7 @@ barChartOptions = new(); barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = "y"; barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor deleted file mode 100644 index 8ff9bc039..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_06_Click_Event.razor +++ /dev/null @@ -1,54 +0,0 @@ - - -
- Selected item: @selectedItemMessage -
- -@code { - private BarChart barChart = default!; - private BarChartOptions barChartOptions = default!; - private ChartData chartData = default!; - private string selectedItemMessage = "Click a bar to view its details."; - - protected override void OnInitialized() - { - chartData = new ChartData - { - Labels = new List { "January", "February", "March", "April", "May", "June" }, - Datasets = new List - { - new BarChartDataset - { - Label = "Product A", - Data = new List { 65, 59, 80, 81, 56, 55 }, - BackgroundColor = new List { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() }, - BorderColor = new List { ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString() }, - BorderWidth = new List { 0 } - }, - new BarChartDataset - { - Label = "Product B", - Data = new List { 28, 48, 40, 19, 86, 27 }, - BackgroundColor = new List { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() }, - BorderColor = new List { ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString() }, - BorderWidth = new List { 0 } - } - } - }; - - barChartOptions = new BarChartOptions { Responsive = true }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await barChart.InitializeAsync(chartData, barChartOptions); - - await base.OnAfterRenderAsync(firstRender); - } - - private void OnClick(ChartClickEventArgs eventArgs) - { - selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}"; - } -} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor index 8eb7a6285..00f6ba4f3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor @@ -18,8 +18,8 @@ { Label = "Product A", Data = new List { 65, 59, 80, 81, 56, 55 }, - BackgroundColor = new List { colors[0].ToColor().ToRgbString() }, - BorderColor = new List { colors[0].ToColor().ToRgbString() }, + BackgroundColor = new List { colors[0].ToChartColor().ToChartRgbString() }, + BorderColor = new List { colors[0].ToChartColor().ToChartRgbString() }, BorderWidth = new List { 0 }, Animation = new ChartAnimation { Delay = 0, Duration = 1200 } }, @@ -27,8 +27,8 @@ { Label = "Product B", Data = new List { 28, 48, 40, 19, 86, 27 }, - BackgroundColor = new List { colors[1].ToColor().ToRgbString() }, - BorderColor = new List { colors[1].ToColor().ToRgbString() }, + BackgroundColor = new List { colors[1].ToChartColor().ToChartRgbString() }, + BorderColor = new List { colors[1].ToChartColor().ToChartRgbString() }, BorderWidth = new List { 0 }, Animation = new ChartAnimation { Delay = 250, Duration = 1200 } }, @@ -36,8 +36,8 @@ { Label = "Product C", Data = new List { 18, 38, 50, 29, 66, 47 }, - BackgroundColor = new List { colors[2].ToColor().ToRgbString() }, - BorderColor = new List { colors[2].ToColor().ToRgbString() }, + BackgroundColor = new List { colors[2].ToChartColor().ToChartRgbString() }, + BorderColor = new List { colors[2].ToChartColor().ToChartRgbString() }, BorderWidth = new List { 0 }, Animation = new ChartAnimation { Delay = 500, Duration = 1200 } } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor index da17a4d78..669425b6e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor @@ -53,7 +53,7 @@ private BarChartDataset GetRandomBarChartDataset() { - var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor(); datasetsCount += 1; @@ -61,8 +61,8 @@ { Label = $"Product {datasetsCount}", Data = GetRandomData(), - BackgroundColor = new List { color.ToRgbaString(0.5) }, - BorderColor = new List { color.ToRgbString() }, + BackgroundColor = new List { color.ToChartRgbaString(0.5) }, + BorderColor = new List { color.ToChartRgbString() }, BorderWidth = new List { 2 }, BorderRadius = new List { 10 } }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor index 7f38635cf..cd9a83146 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor @@ -43,7 +43,7 @@ barChartOptions = new(); barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; + barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y }; barChartOptions.IndexAxis = "y"; barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true }; barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor index b7670e9d6..6bef8dfb5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor @@ -7,8 +7,8 @@ protected override void OnInitialized() { - var revenueColor = ColorUtility.CategoricalTwelveColors[0].ToColor(); - var targetColor = ColorUtility.CategoricalTwelveColors[1].ToColor(); + var revenueColor = ColorUtility.CategoricalTwelveColors[0].ToChartColor(); + var targetColor = ColorUtility.CategoricalTwelveColors[1].ToChartColor(); chartData = new ChartData { @@ -19,16 +19,16 @@ { Label = "Revenue", Data = new List { 65, 59, 80, 81, 56, 55 }, - BackgroundColor = new List { revenueColor.ToRgbaString() }, - BorderColor = new List { revenueColor.ToRgbString() }, + BackgroundColor = new List { revenueColor.ToChartRgbaString() }, + BorderColor = new List { revenueColor.ToChartRgbString() }, BorderWidth = new List { 0 } }, new LineChartDataset { Label = "Target", Data = new List { 50, 55, 60, 70, 72, 78 }, - BackgroundColor = targetColor.ToRgbaString(), - BorderColor = targetColor.ToRgbString(), + BackgroundColor = targetColor.ToChartRgbaString(), + BorderColor = targetColor.ToChartRgbString(), PointRadius = new List { 4 }, PointHoverRadius = new List { 6 } } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_12_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_12_Click_Event.razor new file mode 100644 index 000000000..914be216c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_12_Click_Event.razor @@ -0,0 +1,54 @@ + + +@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} + +@code { + private BarChart barChart = default!; + private BarChartOptions barChartOptions = default!; + private ChartData chartData = default!; + private ChartClickEventArgs? selectedChartItem; + + protected override void OnInitialized() + { + chartData = new ChartData + { + Labels = new List { "January", "February", "March" }, + Datasets = new List + { + new BarChartDataset + { + Label = "Orders", + Data = new List { 45, 68, 54 }, + BackgroundColor = new List { "#36A2EB" }, + }, + }, + }; + + barChartOptions = new BarChartOptions { Responsive = true }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await barChart.InitializeAsync(chartData, barChartOptions); + + await base.OnAfterRenderAsync(firstRender); + } + + private Task HandleClickAsync(ChartClickEventArgs eventArgs) + { + selectedChartItem = eventArgs; + return Task.CompletedTask; + } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChartDocumentation.razor index 4389e2389..724ec08be 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChartDocumentation.razor @@ -1,4 +1,4 @@ -@attribute [Route(pageUrl)] +@attribute [Route(pageUrl)] @layout DemosMainLayout -
-
- Refer to the getting started guide for setting up charts. -
-
-
The bubble chart visualizes three dimensions of data by mapping each point to X, Y, and R values. @@ -27,13 +21,18 @@
- +
+
+ Set the OnClick callback to react when a bubble is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and structured raw X, Y, and R value. +
+ +
@code { private const string pageUrl = DemoRouteConstants.Demos_URL_BubbleChart; private const string pageTitle = "Blazor Bubble Chart"; - private const string pageDescription = "A Blazor Bootstrap bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value."; + private const string pageDescription = "A BlazorExpress.ChartJS bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value."; private const string metaTitle = "Blazor Bubble Chart Component"; - private const string metaDescription = "A Blazor Bootstrap bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value."; + private const string metaDescription = "A BlazorExpress.ChartJS bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value."; private const string imageUrl = "https://i.imgur.com/GEox0tS.png"; -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_01_Examples.razor index f6bd3d9b1..90657260e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_01_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_01_Examples.razor @@ -19,7 +19,7 @@ protected override void OnInitialized() { chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; - bubbleChartOptions = new BubbleChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + bubbleChartOptions = new BubbleChartOptions { Responsive = true }; } protected override async Task OnAfterRenderAsync(bool firstRender) @@ -91,7 +91,7 @@ private BubbleChartDataset GetRandomBubbleChartDataset() { - var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor(); datasetsCount += 1; @@ -99,8 +99,8 @@ { Label = $"Product {datasetsCount}", Data = GetRandomData(), - BackgroundColor = new List { color.ToRgbString() }, - BorderColor = new List { color.ToRgbString() }, + BackgroundColor = new List { color.ToChartRgbString() }, + BorderColor = new List { color.ToChartRgbString() }, HoverBorderWidth = new List { 4 } }; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_02_Click_Event.razor new file mode 100644 index 000000000..ba1ccaff3 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_02_Click_Event.razor @@ -0,0 +1,61 @@ + + +@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} + +@code { + private BubbleChart bubbleChart = default!; + private BubbleChartOptions bubbleChartOptions = default!; + private ChartData chartData = default!; + private ChartClickEventArgs? selectedChartItem; + + protected override void OnInitialized() + { + chartData = new ChartData + { + Labels = new List { "January", "February", "March" }, + Datasets = new List + { + new BubbleChartDataset + { + Label = "Projects", + Data = new List + { + new(10, 20, 8), + new(15, 12, 12), + new(8, 25, 6), + }, + BackgroundColor = new List { "rgba(255, 99, 132, 0.5)" }, + BorderColor = new List { "rgb(255, 99, 132)" }, + BorderWidth = 1, + }, + }, + }; + + bubbleChartOptions = new BubbleChartOptions { Responsive = true }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await bubbleChart.InitializeAsync(chartData, bubbleChartOptions); + + await base.OnAfterRenderAsync(firstRender); + } + + private Task HandleClickAsync(ChartClickEventArgs eventArgs) + { + selectedChartItem = eventArgs; + return Task.CompletedTask; + } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ChartColorExtensions.cs b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ChartColorExtensions.cs new file mode 100644 index 000000000..e61af4b1e --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ChartColorExtensions.cs @@ -0,0 +1,14 @@ +namespace BlazorBootstrap.Demo.RCL.Components.Pages.Demos.Charts; + +internal static class ChartColorExtensions +{ + internal static System.Drawing.Color ToChartColor(this string value) => BlazorExpress.ChartJS.ColorExtensions.ToColor(value); + + internal static string ToChartHexString(this System.Drawing.Color value) => BlazorExpress.ChartJS.ColorExtensions.ToHexString(value); + + internal static string ToChartHexaString(this System.Drawing.Color value) => BlazorExpress.ChartJS.ColorExtensions.ToHexaString(value); + + internal static string ToChartRgbString(this System.Drawing.Color value) => BlazorExpress.ChartJS.ColorExtensions.ToRgbString(value); + + internal static string ToChartRgbaString(this System.Drawing.Color value, double alpha = 0.2) => BlazorExpress.ChartJS.ColorExtensions.ToRgbaString(value, alpha); +} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ChartsDocumentation.razor index 637aecb10..1793cffcd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ChartsDocumentation.razor @@ -32,19 +32,18 @@
-
-
- Refer to the getting started guide for setting up charts. -
-
- + + For a complete charts setup walkthrough, see the + Getting Started — Charts Setup section. + + @code { private const string pageUrl = DemoRouteConstants.Demos_URL_Charts; private const string pageTitle = "Blazor Charts"; - private const string pageDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; + private const string pageDescription = "BlazorExpress.ChartJS provides chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; private const string metaTitle = "Blazor Chart Components"; - private const string metaDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; + private const string metaDescription = "BlazorExpress.ChartJS provides chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index ff728ac8f..ad606281b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -1,4 +1,4 @@ -@attribute [Route(pageUrl)] +@attribute [Route(pageUrl)] @layout DemosMainLayout -
-
- Refer to the getting started guide for setting up charts. -
-
-
In the following example, a categorical 12-color palette is used. @@ -32,11 +26,12 @@
+
+ Set the OnClick callback to react when a doughnut segment is selected. The callback receives ChartClickEventArgs with the dataset, item index, label, and raw value. +
- - @code { private const string pageUrl = DemoRouteConstants.Demos_URL_DoughnutChart; private const string pageTitle = "Blazor Doughnut Chart"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor index a5b5021b1..fe0a70c20 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor @@ -1,36 +1,35 @@ - + -
- Selected item: @selectedItemMessage -
+@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} @code { private DoughnutChart doughnutChart = default!; private DoughnutChartOptions doughnutChartOptions = default!; private ChartData chartData = default!; - private string selectedItemMessage = "Click a slice to view its details."; + private ChartClickEventArgs? selectedChartItem; protected override void OnInitialized() { chartData = new ChartData + { + Labels = new List { "Direct", "Referral", "Social" }, + Datasets = new List { - Labels = new List { "Chrome", "Edge", "Firefox", "Safari" }, - Datasets = new List + new DoughnutChartDataset { - new DoughnutChartDataset - { - Label = "Browsers", - Data = new List { 62, 18, 11, 9 }, - BackgroundColor = new List - { - ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString() - } - } - } - }; + Label = "Visitors", + Data = new List { 55, 30, 15 }, + BackgroundColor = new List { "#36A2EB", "#FF6384", "#FFCE56" }, + }, + }, + }; doughnutChartOptions = new DoughnutChartOptions { Responsive = true }; } @@ -43,8 +42,13 @@ await base.OnAfterRenderAsync(firstRender); } - private void OnClick(ChartClickEventArgs eventArgs) + private Task HandleClickAsync(ChartClickEventArgs eventArgs) { - selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}"; + selectedChartItem = eventArgs; + return Task.CompletedTask; } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor index 1f8820631..5bbdff7a5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChartDocumentation.razor @@ -10,12 +10,6 @@ -
-
- Refer to the getting started guide for setting up charts. -
-
-
In the following example, a categorical 12-color palette is used. @@ -68,16 +62,17 @@
- +
+ Set the OnClick callback to react when a line data point is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and raw value. +
+
- - @code { private const string pageUrl = DemoRouteConstants.Demos_URL_LineChart; private const string pageTitle = "Blazor Line Chart"; - private const string pageDescription = "A Blazor Bootstrap 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."; + private const string pageDescription = "A BlazorExpress.ChartJS 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."; private const string metaTitle = "Blazor Line Chart Component"; - private const string metaDescription = "A Blazor Bootstrap 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."; + private const string metaDescription = "A BlazorExpress.ChartJS 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."; private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor index 6a6e950d5..aac4861f0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor @@ -1,4 +1,4 @@ -
+
@@ -67,7 +67,7 @@ chartData.Datasets = newDatasets; - await lineChart.UpdateValuesAsync(chartData); + await lineChart.UpdateAsync(chartData, lineChartOptions); } private async Task AddDatasetAsync() @@ -121,7 +121,7 @@ private LineChartDataset GetRandomLineChartDataset() { - var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor(); datasetsCount += 1; @@ -129,8 +129,8 @@ { Label = $"Team {datasetsCount}", Data = GetRandomData(), - BackgroundColor = c.ToRgbaString(), - BorderColor = c.ToRgbString(), + BackgroundColor = c.ToChartRgbaString(), + BorderColor = c.ToChartRgbString(), PointRadius = new List { 5 }, PointHoverRadius = new List { 8 }, }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor index 1a9cbb827..44c157cc3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor @@ -1,4 +1,4 @@ -
+
@@ -71,7 +71,7 @@ private LineChartDataset GetRandomLineChartDataset() { - var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor(); datasetsCount += 1; @@ -79,11 +79,11 @@ { Label = $"Team {datasetsCount}", Data = GetRandomData(), - BackgroundColor = c.ToRgbString(), - BorderColor = c.ToRgbString(), + BackgroundColor = c.ToChartRgbString(), + BorderColor = c.ToChartRgbString(), BorderWidth = 2, HoverBorderWidth = 4, - // PointBackgroundColor = c.ToRgbString(), + // PointBackgroundColor = c.ToChartRgbString(), // PointRadius = 0, // hide points // PointHoverRadius = 4, }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor index 7c91693f1..4557061ec 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor @@ -1,4 +1,4 @@ - +
@@ -102,7 +102,7 @@ private LineChartDataset GetRandomLineChartDataset() { - var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor(); datasetsCount += 1; @@ -110,12 +110,12 @@ { Label = $"Team {datasetsCount}", Data = GetRandomData(), - BackgroundColor = c.ToRgbaString(), + BackgroundColor = c.ToChartRgbaString(), BorderCapStyle = "round", - BorderColor = c.ToRgbString(), + BorderColor = c.ToChartRgbString(), BorderWidth = 2, HoverBorderWidth = 4, - PointBackgroundColor = new List() { c.ToRgbString() }, + PointBackgroundColor = new List() { c.ToChartRgbString() }, // PointRadius = 0, // hide points PointHoverRadius = new List() { 4 }, }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor deleted file mode 100644 index d317a3f72..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_07_Click_Event.razor +++ /dev/null @@ -1,62 +0,0 @@ -
- -
- -
- Selected item: @selectedItemMessage -
- -@code { - private LineChart lineChart = default!; - private LineChartOptions lineChartOptions = default!; - private ChartData chartData = default!; - private string selectedItemMessage = "Click a point to view its details."; - - protected override void OnInitialized() - { - chartData = new ChartData - { - Labels = new List { "January", "February", "March", "April", "May", "June" }, - Datasets = new List - { - new LineChartDataset - { - Label = "Product A", - Data = new List { 35, 41, 62, 42, 13, 18 }, - BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(), - BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(), - PointRadius = new List { 5 }, - PointHoverRadius = new List { 8 } - }, - new LineChartDataset - { - Label = "Product B", - Data = new List { 28, 48, 40, 19, 86, 27 }, - BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(), - BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(), - PointRadius = new List { 5 }, - PointHoverRadius = new List { 8 } - } - } - }; - - lineChartOptions = new LineChartOptions - { - Interaction = new Interaction { Mode = InteractionMode.Nearest, Intersect = true }, - Responsive = true - }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await lineChart.InitializeAsync(chartData, lineChartOptions); - - await base.OnAfterRenderAsync(firstRender); - } - - private void OnClick(ChartClickEventArgs eventArgs) - { - selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}"; - } -} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_08_Interpolation_Modes.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_08_Interpolation_Modes.razor index 1d0dccd56..cf0609111 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_08_Interpolation_Modes.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_08_Interpolation_Modes.razor @@ -47,7 +47,7 @@ { Label = "Cubic interpolation (monotone)", Data = dataPoints, - BorderColor = ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString(), + BorderColor = ColorUtility.CategoricalSixColors[0].ToChartColor().ToChartRgbString(), CubicInterpolationMode = "monotone", Fill = false, Tension = 0.4 @@ -56,7 +56,7 @@ { Label = "Cubic interpolation", Data = dataPoints, - BorderColor = ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString(), + BorderColor = ColorUtility.CategoricalSixColors[1].ToChartColor().ToChartRgbString(), Fill = false, Tension = 0.4 }, @@ -64,7 +64,7 @@ { Label = "Linear interpolation (default)", Data = dataPoints, - BorderColor = ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString(), + BorderColor = ColorUtility.CategoricalSixColors[2].ToChartColor().ToChartRgbString(), Fill = false } }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_09_Combo_Bar_Line.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_09_Combo_Bar_Line.razor index fdd65ae79..585300c0a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_09_Combo_Bar_Line.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_09_Combo_Bar_Line.razor @@ -9,8 +9,8 @@ protected override void OnInitialized() { - var forecastColor = ColorUtility.CategoricalTwelveColors[2].ToColor(); - var actualColor = ColorUtility.CategoricalTwelveColors[3].ToColor(); + var forecastColor = ColorUtility.CategoricalTwelveColors[2].ToChartColor(); + var actualColor = ColorUtility.CategoricalTwelveColors[3].ToChartColor(); chartData = new ChartData { @@ -21,8 +21,8 @@ { Label = "Forecast", Data = new List { 45, 52, 61, 66, 73, 79 }, - BackgroundColor = forecastColor.ToRgbaString(), - BorderColor = forecastColor.ToRgbString(), + BackgroundColor = forecastColor.ToChartRgbaString(), + BorderColor = forecastColor.ToChartRgbString(), PointRadius = new List { 4 }, PointHoverRadius = new List { 6 } }, @@ -30,8 +30,8 @@ { Label = "Actual", Data = new List { 41, 49, 58, 70, 75, 82 }, - BackgroundColor = new List { actualColor.ToRgbaString() }, - BorderColor = new List { actualColor.ToRgbString() }, + BackgroundColor = new List { actualColor.ToChartRgbaString() }, + BorderColor = new List { actualColor.ToChartRgbString() }, BorderWidth = new List { 0 } } } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_10_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_10_Click_Event.razor new file mode 100644 index 000000000..8f7adc16d --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_10_Click_Event.razor @@ -0,0 +1,57 @@ + + +@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} + +@code { + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; + private ChartClickEventArgs? selectedChartItem; + + protected override void OnInitialized() + { + chartData = new ChartData + { + Labels = new List { "Monday", "Tuesday", "Wednesday", "Thursday" }, + Datasets = new List + { + new LineChartDataset + { + Label = "Visitors", + Data = new List { 120, 190, 150, 230 }, + BackgroundColor = "rgba(54, 162, 235, 0.2)", + BorderColor = "rgb(54, 162, 235)", + PointRadius = new List { 5 }, + PointHoverRadius = new List { 8 }, + }, + }, + }; + + lineChartOptions = new LineChartOptions { Responsive = true }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + await lineChart.InitializeAsync(chartData, lineChartOptions); + + await base.OnAfterRenderAsync(firstRender); + } + + private Task HandleClickAsync(ChartClickEventArgs eventArgs) + { + selectedChartItem = eventArgs; + return Task.CompletedTask; + } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor index 902984a17..0031e7b6b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChartDocumentation.razor @@ -10,12 +10,6 @@ -
-
- Refer to the getting started guide for setting up charts. -
-
-
In the following example, a categorical 12-color palette is used. @@ -39,16 +33,17 @@
+
+ Set the OnClick callback to react when a pie slice is selected. The callback receives ChartClickEventArgs with the dataset, item index, label, and raw value. +
- - @code { private const string pageUrl = DemoRouteConstants.Demos_URL_PieChart; private const string pageTitle = "Blazor Pie Chart"; - private const string pageDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; + private const string pageDescription = "A BlazorExpress.ChartJS pie chart component is a circular chart that shows the proportional values of different categories."; private const string metaTitle = "Blazor Pie Chart"; - private const string metaDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; + private const string metaDescription = "A BlazorExpress.ChartJS pie chart component is a circular chart that shows the proportional values of different categories."; private const string imageUrl = "https://i.imgur.com/ieBupT2.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor index 89d5a0c6e..54448bb79 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor @@ -1,36 +1,35 @@ - + -
- Selected item: @selectedItemMessage -
+@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} @code { private PieChart pieChart = default!; private PieChartOptions pieChartOptions = default!; private ChartData chartData = default!; - private string selectedItemMessage = "Click a slice to view its details."; + private ChartClickEventArgs? selectedChartItem; protected override void OnInitialized() { chartData = new ChartData + { + Labels = new List { "Desktop", "Tablet", "Mobile" }, + Datasets = new List { - Labels = new List { "Chrome", "Edge", "Firefox", "Safari" }, - Datasets = new List + new PieChartDataset { - new PieChartDataset - { - Label = "Browsers", - Data = new List { 62, 18, 11, 9 }, - BackgroundColor = new List - { - ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString() - } - } - } - }; + Label = "Sessions", + Data = new List { 62, 18, 20 }, + BackgroundColor = new List { "#4BC0C0", "#9966FF", "#FF9F40" }, + }, + }, + }; pieChartOptions = new PieChartOptions { Responsive = true }; } @@ -43,8 +42,13 @@ await base.OnAfterRenderAsync(firstRender); } - private void OnClick(ChartClickEventArgs eventArgs) + private Task HandleClickAsync(ChartClickEventArgs eventArgs) { - selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}"; + selectedChartItem = eventArgs; + return Task.CompletedTask; } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor index a0f13930c..8ab603b49 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -10,12 +10,6 @@ -
-
- Refer to the getting started guide for setting up charts. -
-
-
In the following example, a categorical 12-color palette is used. @@ -28,16 +22,17 @@
+
+ Set the OnClick callback to react when a polar-area segment is selected. The callback receives ChartClickEventArgs with the dataset, item index, label, and raw value. +
- - @code { private const string pageUrl = DemoRouteConstants.Demos_URL_PolarAreaChart; private const string pageTitle = "Blazor Polar Area Chart"; - private const string pageDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; + private const string pageDescription = "BlazorExpress.ChartJS polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; private const string metaTitle = "Blazor Polar Area Chart Component"; - private const string metaDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; + private const string metaDescription = "BlazorExpress.ChartJS polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; private const string imageUrl = "https://i.imgur.com/xLAqwGi.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor index 73a2e2f6f..9dc95bf38 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor @@ -1,4 +1,4 @@ - +
@@ -59,7 +59,7 @@ var backgroundColors = new List(); for (var index = 0; index < count; index++) { - backgroundColors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA + backgroundColors.Add(chartColors![index].ToChartColor().ToChartRgbaString(0.5)); // RGBA } polarAreaChartDataset.Data = newData; @@ -95,7 +95,7 @@ foreach (var dataset in chartData.Datasets) { if (dataset is PolarAreaChartDataset polarAreaChartDataset) - data.Add(new PolarAreaChartDatasetData(polarAreaChartDataset.Label, random.Next(0, 100), chartColors![dataLabelsCount - 1].ToColor().ToRgbaString(0.5), null)); + data.Add(new PolarAreaChartDatasetData(polarAreaChartDataset.Label, random.Next(0, 100), chartColors![dataLabelsCount - 1].ToChartColor().ToChartRgbaString(0.5), null)); } chartData = await polarAreaChart.AddDataAsync(chartData, GetNextDataLabel(), data); @@ -156,7 +156,7 @@ var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { - colors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA + colors.Add(chartColors![index].ToChartColor().ToChartRgbaString(0.5)); // RGBA } return colors; @@ -167,7 +167,7 @@ var colors = new List(); for (var index = 0; index < dataLabelsCount; index++) { - colors.Add(chartColors![index].ToColor().ToRgbString()); // RGB + colors.Add(chartColors![index].ToChartColor().ToChartRgbString()); // RGB } return colors; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor index 3bbd6a715..dc6df8745 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor @@ -1,45 +1,41 @@ - + -
- Selected item: @selectedItemMessage -
+@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} @code { private PolarAreaChart polarAreaChart = default!; private PolarAreaChartOptions polarAreaChartOptions = default!; private ChartData chartData = default!; - private string selectedItemMessage = "Click a segment to view its details."; + private ChartClickEventArgs? selectedChartItem; protected override void OnInitialized() { chartData = new ChartData + { + Labels = new List { "North", "South", "East", "West" }, + Datasets = new List { - Labels = new List { "North", "South", "East", "West", "Central" }, - Datasets = new List + new PolarAreaChartDataset { - new PolarAreaChartDataset + Label = "Sales", + Data = new List { 35, 55, 40, 25 }, + BackgroundColor = new List { - Label = "Regions", - Data = new List { 11, 16, 7, 3, 14 }, - BackgroundColor = new List - { - ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.5), - ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.5), - ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbaString(0.5), - ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbaString(0.5), - ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbaString(0.5) - }, - BorderColor = new List - { - ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[2].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[3].ToColor().ToRgbString(), - ColorUtility.CategoricalTwelveColors[4].ToColor().ToRgbString() - } - } - } - }; + "rgba(255, 99, 132, 0.5)", + "rgba(54, 162, 235, 0.5)", + "rgba(255, 206, 86, 0.5)", + "rgba(75, 192, 192, 0.5)", + }, + }, + }, + }; polarAreaChartOptions = new PolarAreaChartOptions { Responsive = true }; } @@ -52,8 +48,13 @@ await base.OnAfterRenderAsync(firstRender); } - private void OnClick(ChartClickEventArgs eventArgs) + private Task HandleClickAsync(ChartClickEventArgs eventArgs) { - selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}"; + selectedChartItem = eventArgs; + return Task.CompletedTask; } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor index 7f8e4e47a..33a5a80e2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChartDocumentation.razor @@ -10,12 +10,6 @@ -
-
- Refer to the getting started guide for setting up charts. -
-
-
In the following example, a categorical 12-color palette is used. @@ -28,16 +22,17 @@
+
+ Set the OnClick callback to react when a radar data point is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and raw value. +
- - @code { private const string pageUrl = DemoRouteConstants.Demos_URL_RadarChart; private const string pageTitle = "Blazor Radar Chart"; - private const string pageDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets."; + private const string pageDescription = "A BlazorExpress.ChartJS radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets."; private const string metaTitle = "Blazor Radar Chart Component"; - private const string metaDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets."; + private const string metaDescription = "A BlazorExpress.ChartJS radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets."; private const string imageUrl = "https://i.imgur.com/Urrb79M.png"; -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor index a4de5e1a6..34926e6dd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor @@ -1,4 +1,4 @@ - +
@@ -124,7 +124,7 @@ private RadarChartDataset GetRandomRadarChartDataset() { - var c = chartColors![datasetsCount].ToColor(); + var c = chartColors![datasetsCount].ToChartColor(); datasetsCount += 1; @@ -132,8 +132,8 @@ { Label = $"Team {datasetsCount}", Data = GetRandomData(), - BackgroundColor = c.ToRgbaString(), - BorderColor = c.ToRgbaString(0.8), + BackgroundColor = c.ToChartRgbaString(), + BorderColor = c.ToChartRgbaString(0.8), BorderWidth = 2, Fill = true, HoverBorderWidth = 4, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor index f9e4e907b..4b58bd8a9 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor @@ -1,44 +1,38 @@ - + -
- Selected item: @selectedItemMessage -
+@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} @code { private RadarChart radarChart = default!; private RadarChartOptions radarChartOptions = default!; private ChartData chartData = default!; - private string selectedItemMessage = "Click a point to view its details."; + private ChartClickEventArgs? selectedChartItem; protected override void OnInitialized() { chartData = new ChartData + { + Labels = new List { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" }, + Datasets = new List { - Labels = new List { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" }, - Datasets = new List + new RadarChartDataset { - new RadarChartDataset - { - Label = "Model A", - Data = new List { 65, 59, 90, 81, 56 }, - BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(), - BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(0.8), - BorderWidth = 2, - Fill = true, - HoverBorderWidth = 4 - }, - new RadarChartDataset - { - Label = "Model B", - Data = new List { 28, 48, 40, 19, 96 }, - BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(), - BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(0.8), - BorderWidth = 2, - Fill = true, - HoverBorderWidth = 4 - } - } - }; + Label = "Vehicle A", + Data = new List { 80, 72, 65, 90, 78 }, + BackgroundColor = "rgba(153, 102, 255, 0.2)", + BorderColor = "rgba(153, 102, 255, 0.8)", + BorderWidth = 2, + Fill = true, + }, + }, + }; radarChartOptions = new RadarChartOptions { Responsive = true }; } @@ -51,8 +45,13 @@ await base.OnAfterRenderAsync(firstRender); } - private void OnClick(ChartClickEventArgs eventArgs) + private Task HandleClickAsync(ChartClickEventArgs eventArgs) { - selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Label: {eventArgs.Label}, Value: {eventArgs.Value}"; + selectedChartItem = eventArgs; + return Task.CompletedTask; } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"item {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor index 3aa86ac41..482b5a2de 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChartDocumentation.razor @@ -10,12 +10,6 @@ -
-
- Refer to the getting started guide for setting up charts. -
-
-
In the following example, a categorical 12-color palette is used. @@ -37,16 +31,17 @@
+
+ Set the OnClick callback to react when a scatter point is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and structured raw X and Y value. +
- - @code { private const string pageUrl = DemoRouteConstants.Demos_URL_ScatterChart; private const string pageTitle = "Blazor Scatter Chart"; - private const string pageDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties."; + private const string pageDescription = "BlazorExpress.ChartJS scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties."; private const string metaTitle = "Blazor Scatter Chart Component"; - private const string metaDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties."; + private const string metaDescription = "BlazorExpress.ChartJS scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties."; private const string imageUrl = "https://i.imgur.com/GEox0tS.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor index 9e32eb5bd..5a48d5f8b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor @@ -1,4 +1,4 @@ - + @code { private ScatterChart scatterChart = default!; @@ -35,14 +35,14 @@ private ScatterChartDataset GetRandomRadarChartDataset(int recordIndex) { - var c = ColorUtility.CategoricalTwelveColors[recordIndex].ToColor(); + var c = ColorUtility.CategoricalTwelveColors[recordIndex].ToChartColor(); return new ScatterChartDataset { Label = $"Team {recordIndex + 1}", Data = GetRandomData(), - BackgroundColor = c.ToRgbaString(), // RGBA - BorderColor = c.ToRgbString(), // RGB + BackgroundColor = c.ToChartRgbaString(), // RGBA + BorderColor = c.ToChartRgbString(), // RGB BorderWidth = 2, HoverBorderWidth = 4, }; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor index 49b8b2acd..402c201a9 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor @@ -1,4 +1,4 @@ - +
@@ -120,7 +120,7 @@ private ScatterChartDataset GetRandomScatterChartDataset() { - var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor(); datasetsCount += 1; @@ -128,8 +128,8 @@ { Label = $"Team {datasetsCount}", Data = GetRandomData(), - BackgroundColor = c.ToRgbaString(), // RGBA - BorderColor = c.ToRgbString(), // RGB + BackgroundColor = c.ToChartRgbaString(), // RGBA + BorderColor = c.ToChartRgbString(), // RGB BorderWidth = 2, Fill = true, HoverBorderWidth = 4, diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor index ab1614c18..c84c959c2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor @@ -1,57 +1,43 @@ - + -
- Selected item: @selectedItemMessage -
+@if (selectedChartItem is not null) +{ +

+ Selected: @selectedChartItem.DatasetLabel (dataset @selectedChartItem.DatasetIndex), + @FormatLabel(selectedChartItem) (index @selectedChartItem.Index), + value @FormatValue(selectedChartItem) +

+} @code { private ScatterChart scatterChart = default!; private ScatterChartOptions scatterChartOptions = default!; private ChartData chartData = default!; - private string selectedItemMessage = "Click a point to view its details."; + private ChartClickEventArgs? selectedChartItem; protected override void OnInitialized() { chartData = new ChartData + { + Labels = new List { "First", "Second", "Third", "Fourth" }, + Datasets = new List { - Datasets = new List + new ScatterChartDataset { - new ScatterChartDataset + Label = "Measurements", + Data = new List { - Label = "Team 1", - Data = new List - { - new(15, 25), - new(22, 48), - new(38, 32), - new(55, 67) - }, - BackgroundColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbaString(), - BorderColor = ColorUtility.CategoricalTwelveColors[0].ToColor().ToRgbString(), - BorderWidth = 2, - HoverBorderWidth = 4, - PointRadius = new List { 6 }, - PointHoverRadius = new List { 8 } + new(10, 25), + new(25, 15), + new(35, 40), + new(50, 30), }, - new ScatterChartDataset - { - Label = "Team 2", - Data = new List - { - new(12, 35), - new(28, 30), - new(41, 52), - new(63, 72) - }, - BackgroundColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbaString(), - BorderColor = ColorUtility.CategoricalTwelveColors[1].ToColor().ToRgbString(), - BorderWidth = 2, - HoverBorderWidth = 4, - PointRadius = new List { 6 }, - PointHoverRadius = new List { 8 } - } - } - }; + BackgroundColor = "rgba(255, 159, 64, 0.6)", + BorderColor = "rgb(255, 159, 64)", + BorderWidth = 2, + }, + }, + }; scatterChartOptions = new ScatterChartOptions { Responsive = true }; } @@ -64,8 +50,13 @@ await base.OnAfterRenderAsync(firstRender); } - private void OnClick(ChartClickEventArgs eventArgs) + private Task HandleClickAsync(ChartClickEventArgs eventArgs) { - selectedItemMessage = $"Dataset: {eventArgs.DatasetLabel}, Value: {eventArgs.Value}"; + selectedChartItem = eventArgs; + return Task.CompletedTask; } + + private static string FormatLabel(ChartClickEventArgs eventArgs) => eventArgs.Label ?? $"point {eventArgs.Index}"; + + private static string FormatValue(ChartClickEventArgs eventArgs) => eventArgs.Value?.ToString() ?? "null"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/Utils_Colors.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/Utils_Colors.razor index 0d47f71e6..d2fdbe00c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/Utils_Colors.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/Utils_Colors.razor @@ -1,4 +1,4 @@ -@using System.Drawing; +@using System.Drawing; @@ -183,10 +183,10 @@ public ChartColor(Color color) { Name = color.Name; - Hex = color.ToHexString(); - Hexa = color.ToHexaString(); - Rgb = color.ToRgbString(); - Rgba = color.ToRgbaString(); + Hex = color.ToChartHexString(); + Hexa = color.ToChartHexaString(); + Rgb = color.ToChartRgbString(); + Rgba = color.ToChartRgbaString(); } public string Name { get; set; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/_Imports.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/_Imports.razor new file mode 100644 index 000000000..ca55fbd66 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/_Imports.razor @@ -0,0 +1,6 @@ +@using BlazorExpress.ChartJS +@using Unit = BlazorExpress.ChartJS.Unit +@using ColorUtility = BlazorExpress.ChartJS.ColorUtility +@using Alignment = BlazorExpress.ChartJS.DataLabelAlignment +@using Anchor = BlazorExpress.ChartJS.DataLabelAnchor +@using BlazorBootstrap.Demo.RCL.Components.Pages.Demos.Charts diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor index f5534bc98..169dd5866 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/BarCharts/BarChart_Doc_01_Documentation.razor @@ -1,4 +1,4 @@ -@attribute [Route(pageUrl)] +@attribute [Route(pageUrl)] @layout DocsMainLayout +
+ +
+
@@ -58,4 +62,4 @@ private const string metaTitle = $"Blazor {componentName} Component"; private const string metaDescription = $"This documentation provides a comprehensive reference for the {componentName} component, guiding you through its configuration options."; private const string imageUrl = DemoScreenshotSrcConstants.Demos_URL_BubbleChart; -} \ No newline at end of file +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor index 27debe28b..e2c3694e1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Charts/DoughnutCharts/DoughnutChart_Doc_01_Documentation.razor @@ -1,4 +1,4 @@ -@attribute [Route(pageUrl)] +@attribute [Route(pageUrl)] @layout DocsMainLayout -

Using charts only

-

If you only need chart components (without the rest of the Blazor Bootstrap UI), install the BlazorExpress.ChartJS package from NuGet.

- 
> dotnet add package BlazorExpress.ChartJS
-

For setup and usage details, see the BlazorExpress.ChartJS getting started guide.

- \ No newline at end of file + +

Chart Components — Dedicated Library

+

+ Chart components have been moved to the dedicated BlazorExpress.ChartJS library + to support independent feature additions and easier maintenance. + Complete the following steps in the Blazor project that renders the charts. +

+
    +
  1. + Install the package used by these demos: + 
    dotnet add package BlazorExpress.ChartJS --version 1.2.4
    +
    2. +
  2. + Import the component namespace in _Imports.razor: + 
    @@using BlazorExpress.ChartJS
    +
    3. +
  3. + Load the browser scripts in this order from the host page, after the Blazor framework script. + The data-labels plugin is needed only when a chart uses data labels. + 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
+<script src="_content/BlazorExpress.ChartJS/blazorexpress.chartjs.js"></script>
    +
    4. +
+

+ See the BlazorExpress.ChartJS website + and GitHub repository + for current package documentation. We also recommend checking the + original BlazorExpress.ChartJS demos + when adapting advanced examples. +

+ diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/GettingStarted/GettingStarted.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/GettingStarted/GettingStarted.razor index eec8fb997..39e77bce2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/GettingStarted/GettingStarted.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/GettingStarted/GettingStarted.razor @@ -86,4 +86,8 @@ -
Blazor Server (.NET 6)
\ No newline at end of file + + +
+ +
\ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Extensions/TypeExtensions.cs b/BlazorBootstrap.Demo.RCL/Extensions/TypeExtensions.cs index 7d539e964..11796107a 100644 --- a/BlazorBootstrap.Demo.RCL/Extensions/TypeExtensions.cs +++ b/BlazorBootstrap.Demo.RCL/Extensions/TypeExtensions.cs @@ -1,4 +1,4 @@ -namespace BlazorBootstrap.Demo.RCL; +namespace BlazorBootstrap.Demo.RCL; /// /// Extension methods for . @@ -67,17 +67,20 @@ public static HashSet GetComponentMethods(this Type type) { var methods = new HashSet(); - var includeBlazorBootstrapChartMethods = typeof(BlazorBootstrapChart).IsAssignableFrom(type); + var includeChartComponentBaseMethods = typeof(BlazorExpress.ChartJS.ChartComponentBase).IsAssignableFrom(type); foreach (MethodInfo method in type.GetMethods(BindingFlags.Public | BindingFlags.Instance)) { + var isChartComponentBaseMethod = includeChartComponentBaseMethods && method.DeclaringType == typeof(BlazorExpress.ChartJS.ChartComponentBase); + var isDocumentedChartClickHandler = isChartComponentBaseMethod && method.Name == nameof(BlazorExpress.ChartJS.ChartComponentBase.HandleClickAsync); + // Filter out methods inherited from System.Object (if needed) if (method.DeclaringType != typeof(object) && (method.DeclaringType == type - || (includeBlazorBootstrapChartMethods && method.DeclaringType == typeof(BlazorBootstrapChart))) + || isChartComponentBaseMethod) && !method.Name.StartsWith("get_") // Exclude get_ methods && !method.Name.StartsWith("set_") // Exclude set_ methods - && !method.GetCustomAttributes(typeof(JSInvokableAttribute), false).Any()) // Exclude methods that are not general public methods + && (!method.GetCustomAttributes(typeof(JSInvokableAttribute), false).Any() || isDocumentedChartClickHandler)) // Exclude methods that are not general public methods { methods.Add(method); } diff --git a/BlazorBootstrap.Demo.RCL/_Imports.razor b/BlazorBootstrap.Demo.RCL/_Imports.razor index 0764f8845..870477c55 100644 --- a/BlazorBootstrap.Demo.RCL/_Imports.razor +++ b/BlazorBootstrap.Demo.RCL/_Imports.razor @@ -1,4 +1,4 @@ -@using System.Net.Http +@using System.Net.Http @using System.Net.Http.Json @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing diff --git a/BlazorBootstrap.Demo.Server/Components/App.razor b/BlazorBootstrap.Demo.Server/Components/App.razor index 120567bcd..88c376600 100644 --- a/BlazorBootstrap.Demo.Server/Components/App.razor +++ b/BlazorBootstrap.Demo.Server/Components/App.razor @@ -1,4 +1,4 @@ - + @@ -46,10 +46,11 @@ - + - + + diff --git a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html index 5bad7d05a..cc6974988 100644 --- a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html +++ b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html @@ -50,10 +50,11 @@
- + - + + diff --git a/README.md b/README.md index 8558cfb70..e7d48e9e6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -

+

Blazor Bootstrap logo @@ -51,6 +51,11 @@ Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorboo - Read the [Getting started page](https://docs.blazorbootstrap.com/getting-started/blazor-webassembly-net-8) for information on the framework installation, contents, examples, and more. +## Charts + +Chart components have moved out of BlazorBootstrap and are now provided by the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package. + +This is a breaking change for existing chart users: install `BlazorExpress.ChartJS`, import its namespace, load its browser scripts, and migrate from the former BlazorBootstrap chart API. See the [migration and setup guide](https://docs.blazorbootstrap.com/components/charts), the [GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS), and the [original demos](https://chartjs.blazorexpress.com/demos/bar-chart). ## Blazor Bootstrap Components | Component Name | Docs | Demos | @@ -64,13 +69,6 @@ Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorboo | Callout | [Docs](https://docs.blazorbootstrap.com/components/callout) | [Demos](https://demos.blazorbootstrap.com/callout) | | Card | [Docs](https://docs.blazorbootstrap.com/components/card) | [Demos](https://demos.blazorbootstrap.com/card) | | Carousel | [Docs](https://docs.blazorbootstrap.com/components/carousel) | [Demos](https://demos.blazorbootstrap.com/carousel) | -| Charts: Bar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/bar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/bar-chart) | -| Charts: Doughnut chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/doughnut-chart) | [Demos](https://demos.blazorbootstrap.com/charts/doughnut-chart) | -| Charts: Line chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/line-chart) | [Demos](https://demos.blazorbootstrap.com/charts/line-chart) | -| Charts: Pie chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/pie-chart) | [Demos](https://demos.blazorbootstrap.com/charts/pie-chart) | -| Charts: Polar Area chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/polar-area-chart) | [Demos](https://demos.blazorbootstrap.com/charts/polar-area-chart) | -| Charts: Radar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/radar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/radar-chart) | -| Charts: Scatter chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/scatter-chart) | [Demos](https://demos.blazorbootstrap.com/charts/scatter-chart) | | Checkbox Input | [Docs](https://docs.blazorbootstrap.com/forms/checkbox-input) | [Demos](https://demos.blazorbootstrap.com/form/checkbox-input) | | Collapse | [Docs](https://docs.blazorbootstrap.com/components/collapse) | [Demos](https://demos.blazorbootstrap.com/collapse) | | Confirm Dialog | [Docs](https://docs.blazorbootstrap.com/components/confirm-dialog) | [Demos](https://demos.blazorbootstrap.com/confirm-dialog) | @@ -144,21 +142,6 @@ Blazor Bootstrap's documentation, which is included in this repository's root di ### Blazor Bootstrap - Carousel ![Blazor Bootstrap - Carousel](https://i.imgur.com/YoZd9Hy.png "Blazor Bootstrap - Carousel") -### Blazor Bootstrap - Charts: Bar Chart -![Blazor Bootstrap - Charts: Bar Chart](https://i.imgur.com/JLV7oss.png "Blazor Bootstrap - Charts: Bar Chart") - -### Blazor Bootstrap - Charts: Doughnut Chart -![Blazor Bootstrap - Charts: Doughnut Chart](https://i.imgur.com/e5fnMXQ.png "Blazor Bootstrap - Charts: Doughnut Chart") - -### Blazor Bootstrap - Charts: Line Chart -![Blazor Bootstrap - Charts: Line Chart](https://i.imgur.com/CzdXpqr.png "Blazor Bootstrap - Charts: Line Chart") - -### Blazor Bootstrap - Charts: Pie Chart -![Blazor Bootstrap - Charts: Pie Chart](https://i.imgur.com/jr3w0fM.png "Blazor Bootstrap - Charts: Pie Chart") - -### Blazor Bootstrap - Charts: Polar Area Chart -![Blazor Bootstrap - Charts: Polar Area Chart](https://i.imgur.com/MSFDsSo.png "Blazor Bootstrap - Charts: Polar Area Chart") - ### Blazor Bootstrap - Checkbox Input ![Blazor Bootstrap - Checkbox Input](https://i.imgur.com/kqSggFK.png "Blazor Bootstrap - Checkbox Input") diff --git a/blazorbootstrap/BlazorBootstrap.csproj b/blazorbootstrap/BlazorBootstrap.csproj index ad742ac5f..5d30e13ce 100644 --- a/blazorbootstrap/BlazorBootstrap.csproj +++ b/blazorbootstrap/BlazorBootstrap.csproj @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ Apache-2.0 https://docs.blazorbootstrap.com/ https://github.com/vikramlearning/blazorbootstrap - Blazor, WebAssembly, BlazorWebAssembly, Bootstrap, Bootstrap5, BlazorBootstrap, BlazorAlert, BlazorAutoComplete, BlazorButtons, BlazorCallout, BlazorCharts, BlazorConfirmDialog, BlazorGrid, BlazorIcon, BlazorImage, BlazorModal, BlazorCheckboxInput, BlazorCurrencyInput, BlazorNumberInput, BlazorInput, BlazorNumber, BlazorDate, BlazorDateInput, BlazorPasswordInput, BlazorDatePicker, BlazorRadioInput, BlazorTextInput, BlazortextAreaInput, BlazorTime, BlazorTimeInput, BlazorTimePicker, BlazorOffcanvas, BlazorPagination, BlazorPdfViewer, BlazorPlaceholders, BlazorPreload, BlazorProgress, BlazorRibbon, BlazorScriptLoader, BlazorSidebar, BlazorSidebar2, BlazorSortableList, BlazorSwitch, BlazorSpinners, BlazorTabs, BlazorToasts, BlazorTooltips, BlazorTooltips, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart, BlazorPolarAreaChart, BlazorRadarChart, BlazorScatterChart, BlazorMarkdown + Blazor, WebAssembly, BlazorWebAssembly, Bootstrap, Bootstrap5, BlazorBootstrap, BlazorAlert, BlazorAutoComplete, BlazorButtons, BlazorCallout, BlazorConfirmDialog, BlazorGrid, BlazorIcon, BlazorImage, BlazorModal, BlazorCheckboxInput, BlazorCurrencyInput, BlazorNumberInput, BlazorInput, BlazorNumber, BlazorDate, BlazorDateInput, BlazorPasswordInput, BlazorDatePicker, BlazorRadioInput, BlazorTextInput, BlazortextAreaInput, BlazorTime, BlazorTimeInput, BlazorTimePicker, BlazorOffcanvas, BlazorPagination, BlazorPdfViewer, BlazorPlaceholders, BlazorPreload, BlazorProgress, BlazorRibbon, BlazorScriptLoader, BlazorSidebar, BlazorSidebar2, BlazorSortableList, BlazorSwitch, BlazorSpinners, BlazorTabs, BlazorToasts, BlazorTooltips, BlazorTooltips, BlazorMarkdown Blazor Bootstrap is a component library built on top of Blazor and Bootstrap5 CSS framework. Vikram Reddy diff --git a/blazorbootstrap/Components/Charts/BarChart.razor b/blazorbootstrap/Components/Charts/BarChart.razor deleted file mode 100644 index da05c573a..000000000 --- a/blazorbootstrap/Components/Charts/BarChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -

- -
diff --git a/blazorbootstrap/Components/Charts/BarChart.razor.cs b/blazorbootstrap/Components/Charts/BarChart.razor.cs deleted file mode 100644 index ca3f90ce1..000000000 --- a/blazorbootstrap/Components/Charts/BarChart.razor.cs +++ /dev/null @@ -1,147 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("1.0.0")] -public partial class BarChart : BlazorBootstrapChart -{ - #region Fields and Constants - - private const string _jsObjectName = "window.blazorChart.bar"; - - #endregion - - #region Constructors - - public BarChart() - { - chartType = ChartType.Bar; - } - - #endregion - - #region Methods - - [AddedVersion("1.10.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - BarLineChartSupport.AppendDataPoint(dataset, data); - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartData.Labels is null) - throw new ArgumentNullException(nameof(chartData.Labels)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new Exception($"{nameof(data)} cannot be empty."); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - { - var chartDatasetData = data.FirstOrDefault(x => x is ChartDatasetData chartDataPoint && chartDataPoint.DatasetLabel == (dataset as dynamic).Label); - - if (chartDatasetData is not null) - BarLineChartSupport.AppendDataPoint(dataset, chartDatasetData); - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.OfType()); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (BarLineChartSupport.IsSupportedDataset(chartDataset)) - { - chartData.Datasets.Add(chartDataset); - await SafeInvokeVoidAsync($"{_jsObjectName}.addDataset", Id, chartDataset); - } - - return chartData; - } - - [AddedVersion("1.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var data = new { chartData.Labels, Datasets = BarLineChartSupport.GetSupportedDatasets(chartData) }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BarChartOptions)chartOptions, plugins, ObjRef); - } - - [AddedVersion("1.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var data = new { chartData.Labels, Datasets = BarLineChartSupport.GetSupportedDatasets(chartData) }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (BarChartOptions)chartOptions, ObjRef); - } - - #endregion -} diff --git a/blazorbootstrap/Components/Charts/BarLineChartSupport.cs b/blazorbootstrap/Components/Charts/BarLineChartSupport.cs deleted file mode 100644 index 0e7f935a3..000000000 --- a/blazorbootstrap/Components/Charts/BarLineChartSupport.cs +++ /dev/null @@ -1,66 +0,0 @@ -namespace BlazorBootstrap; - -internal static class BarLineChartSupport -{ - internal static void AppendDataPoint(IChartDataset dataset, IChartDatasetData chartDatasetData) - { - if (chartDatasetData is not ChartDatasetData chartDataPoint || !TryGetDataValue(chartDataPoint, out var value)) - return; - - switch (dataset) - { - case BarChartDataset barChartDataset when barChartDataset.Label == chartDataPoint.DatasetLabel: - barChartDataset.Data ??= new List(); - barChartDataset.Data.Add(value); - break; - case LineChartDataset lineChartDataset when lineChartDataset.Label == chartDataPoint.DatasetLabel: - lineChartDataset.Data ??= new List(); - lineChartDataset.Data.Add(value); - break; - } - } - - internal static IEnumerable GetSupportedDatasets(ChartData chartData) - { - if (chartData?.Datasets is null) - yield break; - - foreach (var dataset in chartData.Datasets) - switch (dataset) - { - case BarChartDataset barChartDataset: - yield return barChartDataset; - break; - case LineChartDataset lineChartDataset: - yield return lineChartDataset; - break; - } - } - - internal static bool IsSupportedDataset(IChartDataset chartDataset) => chartDataset is BarChartDataset or LineChartDataset; - - private static bool TryGetDataValue(ChartDatasetData chartDatasetData, out double? value) - { - switch (chartDatasetData.Data) - { - case double number: - value = number; - return true; - case int number: - value = number; - return true; - case float number: - value = number; - return true; - case decimal number: - value = (double)number; - return true; - case null: - value = null; - return true; - default: - value = null; - return false; - } - } -} \ No newline at end of file diff --git a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs b/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs deleted file mode 100644 index b694f82fa..000000000 --- a/blazorbootstrap/Components/Charts/BlazorBootstrapChart.cs +++ /dev/null @@ -1,309 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Base class for BlazorBootstrap chart components. -/// -[AddedVersion("1.0.0")] -public class BlazorBootstrapChart : BlazorBootstrapComponentBase, IDisposable, IAsyncDisposable -{ - #region Fields and Constants - - internal ChartType chartType; - - private DotNetObjectReference? objRef; - - #endregion - - #region Methods - - //public async Task Stop() { } - - //public async Task ToBase64Image() { } - - //public async Task ToBase64Image(string type, double quality) { } - - /// - /// Adds a data point to each dataset in the chart. - /// - /// The current chart data. - /// The label to append. - /// The data point to append. - /// The updated chart data. - [AddedVersion("1.10.0")] - [Description("Adds data to chart.")] - public virtual async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) => await Task.FromResult(chartData); - - /// - /// Adds a labeled batch of data points to the chart. - /// - /// The current chart data. - /// The label to append. - /// The dataset values to append. - /// The updated chart data. - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public virtual async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) => await Task.FromResult(chartData); - - /// - /// Adds a dataset to the chart. - /// - /// The current chart data. - /// The dataset to append. - /// The current chart options. - /// The updated chart data. - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public virtual async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) => await Task.FromResult(chartData); - - /// - public new virtual void Dispose() => Dispose(true); - - /// - public new virtual async ValueTask DisposeAsync() - { - await DisposeAsyncCore(true); - Dispose(false); - } - - //public async Task Clear() { } - - /// - /// Initializes the chart. - /// - /// The chart data to render. - /// The chart options to apply. - /// The optional Chart.js plugins to enable. - [AddedVersion("1.0.0")] - [Description("Initializes the chart.")] - public virtual async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any()) - { - var _data = GetChartDataObject(chartData); - - if (chartType == ChartType.Bar) - await SafeInvokeVoidAsync("window.blazorChart.bar.initialize", Id, GetChartType(), _data, (BarChartOptions)chartOptions, plugins, ObjRef); - else if (chartType == ChartType.Line) - await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), _data, (LineChartOptions)chartOptions, plugins, ObjRef); - else - await SafeInvokeVoidAsync("window.blazorChart.initialize", Id, GetChartType(), _data, chartOptions, plugins, ObjRef); - } - } - - [JSInvokable] - public async Task HandleClickAsync(ChartClickEventArgs eventArgs) => await OnClick.InvokeAsync(eventArgs); - - /// - protected override void OnInitialized() - { - objRef ??= DotNetObjectReference.Create(this); - - base.OnInitialized(); - } - - //public async Task Render() { } - - //public async Task Reset() { } - - /// - /// Resizes the chart. - /// - /// The new width value. - /// The new height value. - /// The unit of measure for the width. - /// The unit of measure for the height. - [AddedVersion("1.0.0")] - [Description("Resizes the chart.")] - public async Task ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) - { - var widthWithUnit = $"width:{width.ToString(CultureInfo.InvariantCulture)}{widthUnit.ToCssString()}"; - var heightWithUnit = $"height:{height.ToString(CultureInfo.InvariantCulture)}{heightUnit.ToCssString()}"; - await SafeInvokeVoidAsync("window.blazorChart.resize", Id, widthWithUnit, heightWithUnit); - } - - /// - /// Update chart by reapplying all chart data and options. - /// If animation is enabled, this will animate the datasets from scratch. - /// - /// The updated chart data. - /// The updated chart options. - [AddedVersion("1.0.0")] - [Description("Updates the chart.")] - public virtual async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any()) - { - var data = GetChartDataObject(chartData); - - if (chartType == ChartType.Bar) - await SafeInvokeVoidAsync("window.blazorChart.bar.update", Id, GetChartType(), data, (BarChartOptions)chartOptions, ObjRef); - else if (chartType == ChartType.Line) - await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions, ObjRef); - else - await SafeInvokeVoidAsync("window.blazorChart.update", Id, GetChartType(), data, chartOptions, ObjRef); - } - } - - protected override void Dispose(bool disposing) - { - if (disposing) - objRef?.Dispose(); - - base.Dispose(disposing); - } - - protected override ValueTask DisposeAsyncCore(bool disposing) - { - if (disposing) - objRef?.Dispose(); - - return base.DisposeAsyncCore(disposing); - } - - /// - /// Update only data labels and values. If animation is enabled, this will animate the datapoints. - /// Changes to the options will not be applied. - /// - /// The updated chart data. Only dataset labels and values will be applied. - [AddedVersion("3.0.0")] - [Description("Updates only data labels and values. Changes to the options are not applied.")] - public virtual async Task UpdateValuesAsync(ChartData chartData) - { - if (chartData is not null && chartData.Datasets is not null && chartData.Datasets.Any()) - { - var data = GetChartDataObject(chartData); - - if (chartType == ChartType.Bar) - await SafeInvokeVoidAsync("window.blazorChart.bar.updateDataValues", Id, data); - else if (chartType == ChartType.Line) - await SafeInvokeVoidAsync("window.blazorChart.line.updateDataValues", Id, data); - else - await SafeInvokeVoidAsync("window.blazorChart.updateDataValues", Id, data); - } - } - - protected string GetChartType() => - chartType switch - { - ChartType.Bar => "bar", - ChartType.Bubble => "bubble", - ChartType.Doughnut => "doughnut", - ChartType.Line => "line", - ChartType.Pie => "pie", - ChartType.PolarArea => "polarArea", - ChartType.Radar => "radar", - ChartType.Scatter => "scatter", - _ => "line" // default - }; - - private string GetChartContainerSizeAsStyle() - { - var style = ""; - - if (Width > 0) - style += $"width:{Width.Value.ToString(CultureInfo.InvariantCulture)}{WidthUnit.ToCssString()};"; - - if (Height > 0) - style += $"height:{Height.Value.ToString(CultureInfo.InvariantCulture)}{HeightUnit.ToCssString()};"; - - return style; - } - - private object GetChartDataObject(ChartData chartData) - { - var datasets = new List(); - - if (chartData?.Datasets?.Any() ?? false) - foreach (var dataset in chartData.Datasets) - if (dataset is BarChartDataset) - datasets.Add((BarChartDataset)dataset); - else if (dataset is BubbleChartDataset) - datasets.Add((BubbleChartDataset)dataset); - else if (dataset is DoughnutChartDataset) - datasets.Add((DoughnutChartDataset)dataset); - else if (dataset is LineChartDataset) - datasets.Add((LineChartDataset)dataset); - else if (dataset is PieChartDataset) - datasets.Add((PieChartDataset)dataset); - else if (dataset is PolarAreaChartDataset) - datasets.Add((PolarAreaChartDataset)dataset); - else if (dataset is RadarChartDataset) - datasets.Add((RadarChartDataset)dataset); - else if (dataset is ScatterChartDataset) - datasets.Add((ScatterChartDataset)dataset); - - var data = new { chartData?.Labels, Datasets = datasets }; - - return data; - } - - #endregion - - #region Properties, Indexers - - internal string ContainerStyle => GetChartContainerSizeAsStyle(); - - /// - /// Fired when a chart data point is clicked. - /// - [AddedVersion("4.0.0")] - [Description("Fired when a chart data point is clicked.")] - [Parameter] - public EventCallback OnClick { get; set; } - - protected DotNetObjectReference? ObjRef => objRef; - - /// - /// Gets or sets chart container height. - /// The default unit of measure is . - /// To change the unit of measure see . - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets chart container height. The default unit of measure is Unit.Px. To change the unit of measure see HeightUnit.")] - [Parameter] - public int? Height { get; set; } - - /// - /// Gets or sets chart container height unit of measure. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(Unit.Px)] - [Description("Gets or sets chart container height unit of measure.")] - [Parameter] - public Unit HeightUnit { get; set; } = Unit.Px; - - /// - /// Gets or sets chart container width. - /// The default unit of measure is . - /// To change the unit of measure see . - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets chart container width. The default unit of measure is Unit.Px. To change the unit of measure see WidthUnit.")] - [Parameter] - public int? Width { get; set; } - - /// - /// Gets or sets chart container width unit of measure. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(Unit.Px)] - [Description("Gets or sets chart container width unit of measure.")] - [Parameter] - public Unit WidthUnit { get; set; } = Unit.Px; - - #endregion -} diff --git a/blazorbootstrap/Components/Charts/BubbleChart.razor b/blazorbootstrap/Components/Charts/BubbleChart.razor deleted file mode 100644 index 9aa25e1e2..000000000 --- a/blazorbootstrap/Components/Charts/BubbleChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -
- -
\ No newline at end of file diff --git a/blazorbootstrap/Components/Charts/BubbleChart.razor.cs b/blazorbootstrap/Components/Charts/BubbleChart.razor.cs deleted file mode 100644 index cbc0e901b..000000000 --- a/blazorbootstrap/Components/Charts/BubbleChart.razor.cs +++ /dev/null @@ -1,152 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("4.0.0")] -public partial class BubbleChart : BlazorBootstrapChart -{ - #region Fields and Constants - - private const string _jsObjectName = "window.blazorChart.bubble"; - - #endregion - - #region Constructors - - public BubbleChart() - { - chartType = ChartType.Bubble; - } - - #endregion - - #region Methods - - [AddedVersion("4.0.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - if (dataset is BubbleChartDataset bubbleChartDataset && bubbleChartDataset.Label == dataLabel) - if (data is BubbleChartDatasetData bubbleChartDatasetData && bubbleChartDatasetData.Data is BubbleChartDataPoint bubbleChartDataPoint) - bubbleChartDataset.Data?.Add(bubbleChartDataPoint); - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("4.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartData.Labels is null) - throw new ArgumentException("chartData.Labels must not be null", nameof(chartData)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new ArgumentException($"{nameof(data)} cannot be empty.", nameof(data)); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - if (dataset is BubbleChartDataset bubbleChartDataset) - { - var chartDatasetData = data.FirstOrDefault(x => x is BubbleChartDatasetData bubbleChartDatasetData && bubbleChartDatasetData.DatasetLabel == bubbleChartDataset.Label); - - if (chartDatasetData is BubbleChartDatasetData bubbleChartDatasetData && bubbleChartDatasetData.Data is BubbleChartDataPoint bubbleChartDataPoint) - bubbleChartDataset.Data?.Add(bubbleChartDataPoint); - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.Select(x => (BubbleChartDatasetData)x)); - - return chartData; - } - - [AddedVersion("4.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (chartDataset is BubbleChartDataset) - { - chartData.Datasets.Add(chartDataset); - await SafeInvokeVoidAsync($"{_jsObjectName}.addDataset", Id, (BubbleChartDataset)chartDataset); - } - - return chartData; - } - - [AddedVersion("4.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (BubbleChartOptions)chartOptions, plugins, ObjRef); - } - - [AddedVersion("4.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (BubbleChartOptions)chartOptions, ObjRef); - } - - #endregion -} \ No newline at end of file diff --git a/blazorbootstrap/Components/Charts/DoughnutChart.razor b/blazorbootstrap/Components/Charts/DoughnutChart.razor deleted file mode 100644 index da05c573a..000000000 --- a/blazorbootstrap/Components/Charts/DoughnutChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -
- -
diff --git a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs b/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs deleted file mode 100644 index d5ceb4b0d..000000000 --- a/blazorbootstrap/Components/Charts/DoughnutChart.razor.cs +++ /dev/null @@ -1,146 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("1.0.0")] -public partial class DoughnutChart : BlazorBootstrapChart -{ - #region Fields and Constants - - private const string _jsObjectName = "window.blazorChart.doughnut"; - - #endregion - - #region Constructors - - public DoughnutChart() - { - chartType = ChartType.Doughnut; - } - - #endregion - - #region Methods - - [AddedVersion("1.10.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - if (dataset is DoughnutChartDataset doughnutChartDataset && doughnutChartDataset.Label == dataLabel) - if (data is DoughnutChartDatasetData doughnutChartDatasetData) - { - doughnutChartDataset.Data?.Add(doughnutChartDatasetData.Data as double?); - doughnutChartDataset.BackgroundColor?.Add(doughnutChartDatasetData.BackgroundColor!); - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartData.Labels is null) - throw new ArgumentNullException(nameof(chartData.Labels)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new Exception($"{nameof(data)} cannot be empty."); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - if (dataset is DoughnutChartDataset doughnutChartDataset) - { - var chartDatasetData = data.FirstOrDefault(x => x is DoughnutChartDatasetData doughnutChartDatasetData && doughnutChartDatasetData.DatasetLabel == doughnutChartDataset.Label); - - if (chartDatasetData is DoughnutChartDatasetData doughnutChartDatasetData) - { - doughnutChartDataset.Data?.Add(doughnutChartDatasetData.Data as double?); - doughnutChartDataset.BackgroundColor?.Add(doughnutChartDatasetData.BackgroundColor!); - } - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.Select(x => (DoughnutChartDatasetData)x)); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (chartDataset is DoughnutChartDataset doughnutChartDataset) - { - chartData.Datasets.Add(doughnutChartDataset); - await SafeInvokeVoidAsync($"{_jsObjectName}.addDataset", Id, doughnutChartDataset); - } - - return chartData; - } - - [AddedVersion("1.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, plugins, ObjRef); - } - } - - [AddedVersion("1.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (DoughnutChartOptions)chartOptions, ObjRef); - } - } - - #endregion -} diff --git a/blazorbootstrap/Components/Charts/LineChart.razor b/blazorbootstrap/Components/Charts/LineChart.razor deleted file mode 100644 index da05c573a..000000000 --- a/blazorbootstrap/Components/Charts/LineChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -
- -
diff --git a/blazorbootstrap/Components/Charts/LineChart.razor.cs b/blazorbootstrap/Components/Charts/LineChart.razor.cs deleted file mode 100644 index ad4c0f6dd..000000000 --- a/blazorbootstrap/Components/Charts/LineChart.razor.cs +++ /dev/null @@ -1,141 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("1.0.0")] -public partial class LineChart : BlazorBootstrapChart -{ - #region Constructors - - public LineChart() - { - chartType = ChartType.Line; - } - - #endregion - - #region Methods - - [AddedVersion("1.10.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - BarLineChartSupport.AppendDataPoint(dataset, data); - - await SafeInvokeVoidAsync("window.blazorChart.line.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartData.Labels is null) - throw new ArgumentException("chartData.Labels must not be null", nameof(chartData)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new ArgumentException($"{nameof(data)} cannot be empty.", nameof(data)); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - { - var chartDatasetData = data.FirstOrDefault(x => x is ChartDatasetData chartDataPoint && chartDataPoint.DatasetLabel == (dataset as dynamic).Label); - - if (chartDatasetData is not null) - BarLineChartSupport.AppendDataPoint(dataset, chartDatasetData); - } - - await SafeInvokeVoidAsync("window.blazorChart.line.addDatasetsData", Id, dataLabel, data?.OfType()); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (BarLineChartSupport.IsSupportedDataset(chartDataset)) - { - chartData.Datasets.Add(chartDataset); - await SafeInvokeVoidAsync("window.blazorChart.line.addDataset", Id, chartDataset); - } - - return chartData; - } - - [AddedVersion("1.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var data = new { chartData.Labels, Datasets = BarLineChartSupport.GetSupportedDatasets(chartData) }; - await SafeInvokeVoidAsync("window.blazorChart.line.initialize", Id, GetChartType(), data, (LineChartOptions)chartOptions, plugins, ObjRef); - } - - [AddedVersion("1.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var data = new { chartData.Labels, Datasets = BarLineChartSupport.GetSupportedDatasets(chartData) }; - await SafeInvokeVoidAsync("window.blazorChart.line.update", Id, GetChartType(), data, (LineChartOptions)chartOptions, ObjRef); - } - - #endregion -} diff --git a/blazorbootstrap/Components/Charts/PieChart.razor b/blazorbootstrap/Components/Charts/PieChart.razor deleted file mode 100644 index da05c573a..000000000 --- a/blazorbootstrap/Components/Charts/PieChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -
- -
diff --git a/blazorbootstrap/Components/Charts/PieChart.razor.cs b/blazorbootstrap/Components/Charts/PieChart.razor.cs deleted file mode 100644 index e3516b6e8..000000000 --- a/blazorbootstrap/Components/Charts/PieChart.razor.cs +++ /dev/null @@ -1,146 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("1.0.0")] -public partial class PieChart : BlazorBootstrapChart -{ - #region Fields and Constants - - private const string _jsObjectName = "window.blazorChart.pie"; - - #endregion - - #region Constructors - - public PieChart() - { - chartType = ChartType.Pie; - } - - #endregion - - #region Methods - - [AddedVersion("1.10.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - if (dataset is PieChartDataset pieChartDataset && pieChartDataset.Label == dataLabel) - if (data is PieChartDatasetData pieChartDatasetData) - { - pieChartDataset.Data?.Add(pieChartDatasetData.Data as double?); - pieChartDataset.BackgroundColor?.Add(pieChartDatasetData.BackgroundColor!); - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartData.Labels is null) - throw new ArgumentNullException(nameof(chartData.Labels)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new Exception($"{nameof(data)} cannot be empty."); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - if (dataset is PieChartDataset pieChartDataset) - { - var chartDatasetData = data.FirstOrDefault(x => x is PieChartDatasetData pieChartDatasetData && pieChartDatasetData.DatasetLabel == pieChartDataset.Label); - - if (chartDatasetData is PieChartDatasetData pieChartDatasetData) - { - pieChartDataset.Data?.Add(pieChartDatasetData.Data as double?); - pieChartDataset.BackgroundColor?.Add(pieChartDatasetData.BackgroundColor!); - } - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.Select(x => (PieChartDatasetData)x)); - - return chartData; - } - - [AddedVersion("1.10.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (chartDataset is PieChartDataset pieChartDataset) - { - chartData.Datasets.Add(pieChartDataset); - await SafeInvokeVoidAsync($"{_jsObjectName}.addDataset", Id, pieChartDataset); - } - - return chartData; - } - - [AddedVersion("1.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PieChartOptions)chartOptions, plugins, ObjRef); - } - } - - [AddedVersion("1.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PieChartOptions)chartOptions, ObjRef); - } - } - - #endregion -} diff --git a/blazorbootstrap/Components/Charts/PolarAreaChart.razor b/blazorbootstrap/Components/Charts/PolarAreaChart.razor deleted file mode 100644 index a24e57c6f..000000000 --- a/blazorbootstrap/Components/Charts/PolarAreaChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -
- -
diff --git a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs b/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs deleted file mode 100644 index 7f5b46001..000000000 --- a/blazorbootstrap/Components/Charts/PolarAreaChart.razor.cs +++ /dev/null @@ -1,141 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("3.0.0")] -public partial class PolarAreaChart : BlazorBootstrapChart -{ - #region Fields and Constants - - private const string _jsObjectName = "window.blazorChart.polarArea"; - - #endregion - - #region Constructors - - public PolarAreaChart() - { - chartType = ChartType.PolarArea; - } - - #endregion - - #region Methods - - // TODO: May be this method is not required - [AddedVersion("3.0.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - if (dataset is PolarAreaChartDataset barChartDataset && barChartDataset.Label == dataLabel) - if (data is PolarAreaChartDatasetData barChartDatasetData) - barChartDataset.Data?.Add(barChartDatasetData.Data as double?); - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartData.Labels is null) - throw new ArgumentException("chartData.Labels must not be null", nameof(chartData)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new Exception($"{nameof(data)} cannot be empty."); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - if (dataset is PolarAreaChartDataset barChartDataset) - { - var chartDatasetData = data.FirstOrDefault(x => x is PolarAreaChartDatasetData barChartDatasetData && barChartDatasetData.DatasetLabel == barChartDataset.Label); - - if (chartDatasetData is PolarAreaChartDatasetData barChartDatasetData) - barChartDataset.Data?.Add(barChartDatasetData.Data as double?); - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.Select(x => (PolarAreaChartDatasetData)x)); - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (chartDataset is PolarAreaChartDataset) - { - chartData.Datasets.Add(chartDataset); - await SafeInvokeVoidAsync($"{_jsObjectName}.addDataset", Id, (PolarAreaChartDataset)chartDataset); - } - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, plugins, ObjRef); - } - } - - [AddedVersion("3.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (PolarAreaChartOptions)chartOptions, ObjRef); - } - } - - #endregion -} diff --git a/blazorbootstrap/Components/Charts/RadarChart.razor b/blazorbootstrap/Components/Charts/RadarChart.razor deleted file mode 100644 index a24e57c6f..000000000 --- a/blazorbootstrap/Components/Charts/RadarChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -
- -
diff --git a/blazorbootstrap/Components/Charts/RadarChart.razor.cs b/blazorbootstrap/Components/Charts/RadarChart.razor.cs deleted file mode 100644 index c20da461f..000000000 --- a/blazorbootstrap/Components/Charts/RadarChart.razor.cs +++ /dev/null @@ -1,141 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("3.0.0")] -public partial class RadarChart : BlazorBootstrapChart -{ - #region Fields and Constants - - private const string _jsObjectName = "window.blazorChart.radar"; - - #endregion - - #region Constructors - - public RadarChart() - { - chartType = ChartType.Radar; - } - - #endregion - - #region Methods - - // TODO: May be this method is not required - [AddedVersion("3.0.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - if (dataset is RadarChartDataset radarChartDataset && radarChartDataset.Label == dataLabel) - if (data is RadarChartDatasetData radarChartDatasetData) - radarChartDataset.Data?.Add(radarChartDatasetData.Data as double?); - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartData.Labels is null) - throw new ArgumentException("chartData.Labels must not be null", nameof(chartData)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new Exception($"{nameof(data)} cannot be empty."); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - if (dataset is RadarChartDataset radarChartDataset) - { - var chartDatasetData = data.FirstOrDefault(x => x is RadarChartDatasetData radarChartDatasetData && radarChartDatasetData.DatasetLabel == radarChartDataset.Label); - - if (chartDatasetData is RadarChartDatasetData radarChartDatasetData) - radarChartDataset.Data?.Add(radarChartDatasetData.Data as double?); - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.Select(x => (RadarChartDatasetData)x)); - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (chartDataset is RadarChartDataset) - { - chartData.Datasets.Add(chartDataset); - await SafeInvokeVoidAsync($"{_jsObjectName}.addDataset", Id, (RadarChartDataset)chartDataset); - } - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (RadarChartOptions)chartOptions, plugins, ObjRef); - } - } - - [AddedVersion("3.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is not null && chartData.Datasets is not null) - { - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (RadarChartOptions)chartOptions, ObjRef); - } - } - - #endregion -} diff --git a/blazorbootstrap/Components/Charts/ScatterChart.razor b/blazorbootstrap/Components/Charts/ScatterChart.razor deleted file mode 100644 index a24e57c6f..000000000 --- a/blazorbootstrap/Components/Charts/ScatterChart.razor +++ /dev/null @@ -1,6 +0,0 @@ -@namespace BlazorBootstrap -@inherits BlazorBootstrapChart - -
- -
diff --git a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs b/blazorbootstrap/Components/Charts/ScatterChart.razor.cs deleted file mode 100644 index a30418cfa..000000000 --- a/blazorbootstrap/Components/Charts/ScatterChart.razor.cs +++ /dev/null @@ -1,153 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("3.0.0")] -public partial class ScatterChart : BlazorBootstrapChart -{ - #region Fields and Constants - - private const string _jsObjectName = "window.blazorChart.scatter"; - - #endregion - - #region Constructors - - public ScatterChart() - { - chartType = ChartType.Scatter; - } - - #endregion - - #region Methods - - // TODO: May be this method is not required - [AddedVersion("3.0.0")] - [Description("Adds data to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentNullException(nameof(chartData.Datasets)); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - foreach (var dataset in chartData.Datasets) - if (dataset is ScatterChartDataset scatterChartDataset && scatterChartDataset.Label == dataLabel) - if (data is ScatterChartDatasetData scatterChartDatasetData && scatterChartDatasetData.Data is ScatterChartDataPoint scatterChartDataPoint) - scatterChartDataset.Data?.Add(scatterChartDataPoint); - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetData", Id, dataLabel, data); - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDataAsync(ChartData chartData, string dataLabel, IReadOnlyCollection data) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartData.Labels is null) - throw new ArgumentException("chartData.Labels must not be null", nameof(chartData)); - - if (dataLabel is null) - throw new ArgumentNullException(nameof(dataLabel)); - - if (string.IsNullOrWhiteSpace(dataLabel)) - throw new Exception($"{nameof(dataLabel)} cannot be empty."); - - if (data is null) - throw new ArgumentNullException(nameof(data)); - - if (!data.Any()) - throw new ArgumentException($"{nameof(data)} cannot be empty.", nameof(data)); - - if (chartData.Datasets.Count != data.Count) - throw new InvalidDataException("The chart dataset count and the new data points count do not match."); - - if (chartData.Labels.Contains(dataLabel)) - throw new Exception($"{dataLabel} already exists."); - - chartData.Labels.Add(dataLabel); - - foreach (var dataset in chartData.Datasets) - if (dataset is ScatterChartDataset scatterChartDataset) - { - var chartDatasetData = data.FirstOrDefault(x => x is ScatterChartDatasetData scatterChartDatasetData && scatterChartDatasetData.DatasetLabel == scatterChartDataset.Label); - - if (chartDatasetData is ScatterChartDatasetData scatterChartDatasetData && scatterChartDatasetData.Data is ScatterChartDataPoint scatterChartDataPoint) - scatterChartDataset.Data?.Add(scatterChartDataPoint); - } - - await SafeInvokeVoidAsync($"{_jsObjectName}.addDatasetsData", Id, dataLabel, data?.Select(x => (ScatterChartDatasetData)x)); - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Adds dataset to chart.")] - public override async Task AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartDataset is null) - throw new ArgumentNullException(nameof(chartDataset)); - - if (chartDataset is ScatterChartDataset) - { - chartData.Datasets.Add(chartDataset); - await SafeInvokeVoidAsync($"{_jsObjectName}.addDataset", Id, (ScatterChartDataset)chartDataset); - } - - return chartData; - } - - [AddedVersion("3.0.0")] - [Description("Initializes the chart.")] - public override async Task InitializeAsync(ChartData chartData, IChartOptions chartOptions, string[]? plugins = null) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.initialize", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, plugins, ObjRef); - } - - [AddedVersion("3.0.0")] - [Description("Updates the chart.")] - public override async Task UpdateAsync(ChartData chartData, IChartOptions chartOptions) - { - if (chartData is null) - throw new ArgumentNullException(nameof(chartData)); - - if (chartData.Datasets is null) - throw new ArgumentException("chartData.Datasets must not be null", nameof(chartData)); - - if (chartOptions is null) - throw new ArgumentNullException(nameof(chartOptions)); - - var datasets = chartData.Datasets.OfType(); - var data = new { chartData.Labels, Datasets = datasets }; - await SafeInvokeVoidAsync($"{_jsObjectName}.update", Id, GetChartType(), data, (ScatterChartOptions)chartOptions, ObjRef); - } - - #endregion -} diff --git a/blazorbootstrap/Enums/ChartType.cs b/blazorbootstrap/Enums/ChartType.cs deleted file mode 100644 index e66d9fc83..000000000 --- a/blazorbootstrap/Enums/ChartType.cs +++ /dev/null @@ -1,13 +0,0 @@ -namespace BlazorBootstrap; - -public enum ChartType -{ - Line, - Bar, - Pie, - Doughnut, - PolarArea, - Radar, - Scatter, - Bubble -} diff --git a/blazorbootstrap/EventArguments/ChartClickEventArgs.cs b/blazorbootstrap/EventArguments/ChartClickEventArgs.cs deleted file mode 100644 index 84d4a5c35..000000000 --- a/blazorbootstrap/EventArguments/ChartClickEventArgs.cs +++ /dev/null @@ -1,48 +0,0 @@ -namespace BlazorBootstrap; - -public class ChartClickEventArgs -{ - #region Properties, Indexers - - /// - /// Gets or sets the dataset index of the clicked chart item. - /// - [AddedVersion("4.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the dataset index of the clicked chart item.")] - public int DatasetIndex { get; set; } - - /// - /// Gets or sets the dataset label of the clicked chart item. - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the dataset label of the clicked chart item.")] - public string? DatasetLabel { get; set; } - - /// - /// Gets or sets the data index of the clicked chart item. - /// - [AddedVersion("4.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the data index of the clicked chart item.")] - public int Index { get; set; } - - /// - /// Gets or sets the data label of the clicked chart item. - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the data label of the clicked chart item.")] - public string? Label { get; set; } - - /// - /// Gets or sets the raw value of the clicked chart item. - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the raw value of the clicked chart item.")] - public System.Text.Json.JsonElement? Value { get; set; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartData.cs b/blazorbootstrap/Models/Charts/ChartData.cs deleted file mode 100644 index 8041b8d32..000000000 --- a/blazorbootstrap/Models/Charts/ChartData.cs +++ /dev/null @@ -1,30 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents the data payload for a chart. -/// -[AddedVersion("1.0.0")] -public class ChartData -{ - #region Properties, Indexers - - /// - /// Gets or sets the datasets. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the chart datasets.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Datasets { get; set; } - - /// - /// Gets or sets the labels. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the chart labels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Labels { get; set; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDataset.cs deleted file mode 100644 index 2d3be17a7..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDataset.cs +++ /dev/null @@ -1,265 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// The bar chart allows a number of properties to be specified for each dataset. -/// These are used to set display properties for a specific dataset. -/// -/// -/// -[AddedVersion("1.0.0")] -public class BarChartDataset : ChartDataset -{ - #region Constructors - - public BarChartDataset() - { - Type = "bar"; - } - - #endregion - - #region Properties, Indexers - - /// - /// The bar background color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the bar background color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BackgroundColor { get; set; } - - /// - /// Percent (0-1) of the available width each bar should be within the category width. - /// 1.0 will take the whole category width and put the bars right next to each other. - /// - /// - /// Default value is 0.9. - /// - [AddedVersion("1.0.0")] - [DefaultValue(0.9d)] - [Description("Gets or sets the percentage of the category width used by each bar.")] - public double BarPercentage { get; set; } = 0.9; - - /// - /// It is applied to the width of each bar, in pixels. - /// When this is enforced, barPercentage and categoryPercentage are ignored. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bar thickness in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? BarThickness { get; set; } - - /// - /// The bar border color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the bar border color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderColor { get; set; } - - /// - /// Border radius - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the bar border radius.")] - public List? BorderRadius { get; set; } - - /// - /// Gets or sets the border width (in pixels). - /// - /// - /// Default value is 0. - /// - [AddedVersion("1.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderWidth { get; set; } - - //BorderSkipped - //https://www.chartjs.org/docs/latest/api/interfaces/BarControllerDatasetOptions.html#borderskipped - - /// - /// Percent (0-1) of the available width each category should be within the sample width. - /// - /// - /// Default value is 0.8. - /// - [AddedVersion("1.0.0")] - [DefaultValue(0.8d)] - [Description("Gets or sets the percentage of the sample width used by each category.")] - public double CategoryPercentage { get; set; } = 0.8; - - [AddedVersion("1.10.2")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public BarChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link - - /// - /// Should the bars be grouped on index axis. - /// When , all the datasets at same index value will be placed next to each other centering on that - /// index value. - /// When , each bar is placed on its actual index-axis value. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether bars are grouped on the index axis.")] - public bool Grouped { get; set; } = true; - - /// - /// The bar background color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bar background color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBackgroundColor { get; set; } - - /// - /// The bar border color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bar border color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderColor { get; set; } - - /// - /// The bar border radius when hovered (in pixels). - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the hovered bar border radius in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderRadius { get; set; } - - /// - /// The bar border width when hovered (in pixels). - /// - /// - /// Default value is 1. - /// - [AddedVersion("1.0.0")] - [DefaultValue(1)] - [Description("Gets or sets the hovered bar border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderWidth { get; set; } - - /// - /// The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. - /// Supported values are 'x' and 'y'. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the base axis of the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - //InflateAmount - //https://www.chartjs.org/docs/latest/charts/bar.html#inflateamount - - /// - /// Set this to ensure that bars are not sized thicker than this. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the maximum bar thickness.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? MaxBarThickness { get; set; } - - /// - /// Set this to ensure that bars have a minimum length in pixels. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the minimum bar length in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? MinBarLength { get; set; } - - //PointStyle - //https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles - - /// - /// If , null or undefined values will not be used for spacing calculations when determining bar - /// size. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether null values are skipped during bar size calculation.")] - public bool SkipNull { get; set; } - - //Stack - //https://www.chartjs.org/docs/latest/charts/bar.html#general - - /// - /// The ID of the x axis to plot this dataset on. - /// - /// - /// Default value is first x axis. - /// - [AddedVersion("1.0.0")] - [DefaultValue("first x axis")] - [Description("Gets or sets the x-axis identifier for the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? XAxisID { get; set; } - - /// - /// The ID of the y axis to plot this dataset on. - /// - /// - /// Default value is first y axis. - /// - [AddedVersion("1.0.0")] - [DefaultValue("first y axis")] - [Description("Gets or sets the y-axis identifier for the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? YAxisID { get; set; } - - #endregion -} - -/// -/// Represents data label options for a bar chart dataset. -/// -[AddedVersion("1.10.2")] -public class BarChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDatasetData.cs deleted file mode 100644 index 52df7ea65..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/BarChart/BarChartDatasetData.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a bar chart data item for dynamic updates. -/// -[AddedVersion("1.10.0")] -public record BarChartDatasetData : ChartDatasetData -{ - #region Constructors - - public BarChartDatasetData(string? datasetLabel, double data) : base(datasetLabel, data) { } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDataPoint.cs b/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDataPoint.cs deleted file mode 100644 index d3946d7f9..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDataPoint.cs +++ /dev/null @@ -1,7 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// -/// -[AddedVersion("4.0.0")] -public record BubbleChartDataPoint(double X, double Y, double R); \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDataset.cs deleted file mode 100644 index 83446603c..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDataset.cs +++ /dev/null @@ -1,106 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// A bubble chart is used to display three dimensions of data at the same time. -/// The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. -/// The third dimension is represented by the size of the individual bubbles. -/// . -/// -[AddedVersion("4.0.0")] -public class BubbleChartDataset : ChartDataset -{ - #region Constructors - - public BubbleChartDataset() - { - Type = "bubble"; - } - - #endregion - - #region Properties, Indexers - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble background colors.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BackgroundColor { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble border colors.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderColor { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(3d)] - [Description("Gets or sets the bubble border width.")] - public double BorderWidth { get; set; } = 3; - - [AddedVersion("4.0.0")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public BubbleChartDatasetDataLabels Datalabels { get; set; } = new(); - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets a value indicating whether active elements are drawn on top.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? DrawActiveElementsOnTop { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble background colors when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBackgroundColor { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble border colors when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderColor { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble border widths when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderWidth { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble hit radii.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HitRadius { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble hover radii.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverRadius { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble point styles.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointStyle { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble radii.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Radius { get; set; } - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the bubble rotations.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Rotation { get; set; } - - #endregion -} - -/// -/// Represents data label options for a bubble chart dataset. -/// -[AddedVersion("4.0.0")] -public class BubbleChartDatasetDataLabels : ChartDatasetDataLabels { } \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDatasetData.cs deleted file mode 100644 index ea3bef763..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/BubbleChart/BubbleChartDatasetData.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a bubble chart data item for dynamic updates. -/// -[AddedVersion("4.0.0")] -public record BubbleChartDatasetData : ChartDatasetData -{ - #region Constructors - - public BubbleChartDatasetData(string? datasetLabel, BubbleChartDataPoint data) : base(datasetLabel, data) { } - - #endregion -} \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/ChartDataset.cs deleted file mode 100644 index 82460aad2..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/ChartDataset.cs +++ /dev/null @@ -1,124 +0,0 @@ -namespace BlazorBootstrap; - -public interface IChartDataset { } - -/// -/// -/// -[AddedVersion("1.0.0")] -public class ChartDataset : IChartDataset -{ - #region Constructors - - public ChartDataset() - { - Oid = Guid.NewGuid(); - } - - #endregion - - #region Properties, Indexers - - /// - /// Chart.js animates charts out of the box. - /// A number of options are provided to configure how the animation looks and how long it takes. - /// . - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the dataset animation configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAnimation? Animation { get; set; } - - /// - /// How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside - /// chartArea. 0 = clip at chartArea. - /// Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the clipping configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Clip { get; set; } - - /// - /// Gets or sets the Data. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the dataset values.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Data { get; set; } - - /// - /// Configures the visibility state of the dataset. Set it to , to hide the dataset from the chart. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the dataset is hidden.")] - public bool Hidden { get; set; } - - /// - /// The label for the dataset which appears in the legend and tooltips. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the dataset label.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Label { get; set; } - - /// - /// Get unique object id. - /// - [AddedVersion("1.0.0")] - [Description("Gets the unique object identifier.")] - public Guid Oid { get; private set; } - - /// - /// The drawing order of dataset. Also affects order for stacking, tooltip and legend. - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the dataset drawing order.")] - public int Order { get; set; } - - /// - /// The ID of the group to which this dataset belongs when stacked. - /// Datasets with the same stack ID are rendered in the same stack group. - /// . - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the dataset stack identifier.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Stack { get; set; } - - /// - /// Gets or sets the chart type. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets the chart type associated with the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Type { get; protected set; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetData.cs deleted file mode 100644 index c040fa9d1..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetData.cs +++ /dev/null @@ -1,45 +0,0 @@ -namespace BlazorBootstrap; - -public interface IChartDatasetData { } - -/// -/// Represents a labeled data item that can be appended to a chart dataset. -/// -[AddedVersion("1.10.0")] -public record ChartDatasetData : IChartDatasetData -{ - #region Constructors - - /// - /// Initializes a new instance of the record. - /// - /// The target dataset label. - /// The data value to append. - public ChartDatasetData(string? datasetLabel, object? data) - { - DatasetLabel = datasetLabel; - Data = data; - } - - #endregion - - #region Properties, Indexers - - /// - /// Gets the dataset label. - /// - [AddedVersion("1.10.0")] - [DefaultValue(null)] - [Description("Gets the dataset label.")] - public string? DatasetLabel { get; init; } - - /// - /// Gets the data value. - /// - [AddedVersion("1.10.0")] - [DefaultValue(null)] - [Description("Gets the data value.")] - public object? Data { get; init; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetDataLabels.cs b/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetDataLabels.cs deleted file mode 100644 index 61178a187..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/ChartDatasetDataLabels.cs +++ /dev/null @@ -1,92 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Highly customizable Chart.js plugin that displays labels on data for any type of charts. -/// . -/// -[AddedVersion("3.0.0")] -public class ChartDatasetDataLabels -{ - #region Fields and Constants - - private Alignment alignment; - - private Anchor anchor; - - #endregion - - #region Properties, Indexers - - /// - /// Gets or sets the data labels alignment. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(Alignment.None)] - [Description("Gets or sets the data labels alignment.")] - [JsonIgnore] - public Alignment Alignment - { - get => alignment; - set - { - alignment = value; - DataLabelsAlignment = value.ToChartDatasetDataLabelAlignmentString(); - } - } - - /// - /// Gets or sets the data labels anchor. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(Anchor.None)] - [Description("Gets or sets the data labels anchor.")] - [JsonIgnore] - public Anchor Anchor - { - get => anchor; - set - { - anchor = value; - DataLabelsAnchor = value.ToChartDatasetDataLabelAnchorString(); - } - } - - //public string? BackgroundColor { get; set; } - - [AddedVersion("3.0.0")] - [DefaultValue(2d)] - [Description("Gets or sets the data label border width.")] - public double BorderWidth { get; set; } = 2; - - /// - /// Gets or sets the data labels alignment. - /// Possible values: start, center, and end. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets the serialized data labels alignment value.")] - [JsonPropertyName("align")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? DataLabelsAlignment { get; private set; } - - /// - /// Gets or sets the data labels anchor. - /// Possible values: start, center, and end. - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets the serialized data labels anchor value.")] - [JsonPropertyName("anchor")] - public string? DataLabelsAnchor { get; private set; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDataset.cs deleted file mode 100644 index 62b3f7ad9..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDataset.cs +++ /dev/null @@ -1,268 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// The doughnut/pie chart allows a number of properties to be specified for each dataset. -/// These are used to set display properties for a specific dataset. -/// . -/// -[AddedVersion("1.0.0")] -public class DoughnutChartDataset : ChartDataset -{ - #region Properties, Indexers - - /// - /// Arc background color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the arc background color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BackgroundColor { get; set; } - - /// - /// Supported values are 'center' and 'inner'. - /// When 'center' is set, the borders of arcs next to each other will overlap. - /// When 'inner' is set, it is guaranteed that all borders will not overlap. - /// - /// - /// Default value is 'center'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("center")] - [Description("Gets or sets the arc border alignment.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderAlign { get; set; } // TODO: change this to enum - - /// - /// Arc border color. - /// - /// - /// Default value is '#fff'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("#fff")] - [Description("Gets or sets the arc border color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderColor { get; set; } - - /// - /// Arc border length and spacing of dashes. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Arc border offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the arc border dash offset.")] - public double BorderDashOffset { get; set; } - - /// - /// Arc border join style. - /// Supported values are 'round', 'bevel', 'miter'. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border join style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderJoinStyle { get; set; } // TODO: change this to enum - - /// - /// It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the arc border radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderRadius { get; set; } - - /// - /// Arc border width (in pixels). - /// - /// - /// Default value is 2. - /// - [AddedVersion("1.0.0")] - [DefaultValue(2)] - [Description("Gets or sets the arc border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderWidth { get; set; } - - /// - /// Per-dataset override for the sweep that the arcs cover. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the sweep covered by the arcs.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Circumference { get; set; } - - [AddedVersion("1.10.2")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public DoughnutChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link - - /// - /// Arc background color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc background color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBackgroundColor { get; set; } - - /// - /// Arc border color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderColor { get; set; } - - /// - /// Arc border length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// Arc border offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border dash offset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderDashOffset { get; set; } - - /// - /// Arc border join style when hovered. - /// Supported values are 'round', 'bevel', 'miter'. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border join style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderJoinStyle { get; set; } // TODO: change this to enum - - /// - /// Arc border width when hovered (in pixels). - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderWidth { get; set; } - - /// - /// Arc offset when hovered (in pixels). - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the hovered arc offset in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverOffset { get; set; } - - /// - /// Arc offset (in pixels). - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the arc offset in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Offset { get; set; } - - /// - /// Per-dataset override for the starting angle to draw arcs from. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the starting rotation angle for the arcs.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Rotation { get; set; } - - /// - /// Fixed arc offset (in pixels). Similar to but applies to all arcs. - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the fixed arc spacing in pixels.")] - public double Spacing { get; set; } - - /// - /// The relative thickness of the dataset. - /// Providing a value for weight will cause the pie or doughnut dataset to be drawn - /// with a thickness relative to the sum of all the dataset weight values. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the relative dataset thickness.")] - public double Weight { get; set; } = 1; - - #endregion -} - -/// -/// Represents data label options for a doughnut chart dataset. -/// -[AddedVersion("1.10.2")] -public class DoughnutChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDatasetData.cs deleted file mode 100644 index 41d660077..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/DoughnutChart/DoughnutChartDatasetData.cs +++ /dev/null @@ -1,27 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a doughnut chart data item for dynamic updates. -/// -[AddedVersion("1.10.0")] -public record DoughnutChartDatasetData : ChartDatasetData -{ - #region Constructors - - public DoughnutChartDatasetData(string? datasetLabel, double data, string? backgroundColor) : base(datasetLabel, data) - { - BackgroundColor = backgroundColor; - } - - #endregion - - #region Properties, Indexers - - /// - /// Gets the background color for the generated arc. - /// - [AddedVersion("1.10.0")] - public string? BackgroundColor { get; init; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs deleted file mode 100644 index 7d489af0b..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ /dev/null @@ -1,586 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// The line chart allows a number of properties to be specified for each dataset. -/// These are used to set display properties for a specific dataset. -/// . -/// -[AddedVersion("1.0.0")] -public class LineChartDataset : ChartDataset -{ - #region Constructors - - public LineChartDataset() - { - Type = "line"; - } - - #endregion - - #region Methods - - /// - /// Fill between this dataset and the other dataset, specified by absolute index (zero based) or relative index. - /// - /// The index of the dataset to fill to - /// Whether the specified index is relative or absolute (zero based) - /// The dataset, for method chaining - /// If the relative index is zero. - [AddedVersion("3.1.0")] - [Description("Fills the area between this dataset and another dataset by index.")] - public LineChartDataset FillToDataset(int index, bool relativeIndex = false) - { - if (relativeIndex && index == 0) - throw new ArgumentException("The relative index must be non-zero."); - - Fill = relativeIndex ? index.ToString("+0;-0", CultureInfo.InvariantCulture) : index; - - return this; - } - - /// - /// Fill between this dataset and the other dataset, specified by passing a dataset in the same chart. - /// - /// The chart data of the chart both datasets live in. - /// The other dataset to fill to. - /// Whether to specify the fill index relative ("+/-n" string) or absolute (as zero-based int) - /// The dataset, for method chaining - /// If any of the datasets is not in the chart data, or if both datasets are the same. - [AddedVersion("3.1.0")] - [Description("Fills the area between this dataset and another dataset in the same chart.")] - public LineChartDataset FillToDataset(ChartData chartData, IChartDataset dataset, bool relativeIndex = false) - { - var index = chartData?.Datasets?.IndexOf(dataset) ?? -1; - - if (index < 0) - throw new ArgumentException("The dataset is not in the chart data."); - - if (relativeIndex) - { - var myIndex = relativeIndex ? chartData.Datasets.IndexOf(this) : 0; - - if (myIndex < 0) - throw new ArgumentException("The dataset is not in the chart data."); - - if (myIndex == index) - throw new ArgumentException("The dataset is the same as this dataset."); - - Fill = (index - myIndex).ToString("+0;-0", CultureInfo.InvariantCulture); - } - else - { - Fill = index; - } - - return this; - } - - /// - /// Fills between the current dataset and the top of the chart (fill: 'end'). - /// - /// The dataset, for method chaining - [AddedVersion("3.1.0")] - [Description("Fills between the current dataset and the end of the chart.")] - public LineChartDataset FillToEnd() - { - Fill = "end"; - - return this; - } - - /// - /// Fills between the current dataset and the origin. For legacy reasons, this is the same as fill: true. - /// - /// The dataset, for method chaining - [AddedVersion("3.1.0")] - [Description("Fills between the current dataset and the origin.")] - public LineChartDataset FillToOrigin() - { - Fill = "origin"; - - return this; - } - - /// - /// Fill to the line below the current dataset (fill: 'stack'). - /// - /// The dataset, for method chaining - [AddedVersion("3.1.0")] - [Description("Fills to the stacked value below the current dataset.")] - public LineChartDataset FillToStackedValueBelow() - { - Fill = "stack"; - - return this; - } - - /// - /// Fills between the current dataset and the start (fill: 'start'). - /// - /// The dataset, for method chaining - [AddedVersion("3.1.0")] - [Description("Fills between the current dataset and the start of the chart.")] - public LineChartDataset FillToStart() - { - Fill = "start"; - - return this; - } - - /// - /// Fill to the line of the given constant value. - /// - /// The value to fill to - /// The dataset, for method chaining - [AddedVersion("3.1.0")] - [Description("Fills to a constant value.")] - public LineChartDataset FillToValue(double value) - { - Fill = new { value }; - - return this; - } - - #endregion - - #region Properties, Indexers - - /// - /// Gets or sets the line fill color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the line fill color.")] - public string BackgroundColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Cap style of the line. - /// Supported values are 'butt', 'round', and 'square'. - /// - /// - /// Default value is 'butt'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("butt")] - [Description("Gets or sets the line border cap style.")] - public string BorderCapStyle { get; set; } = "butt"; - - /// - /// Gets or sets the line color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the line color.")] - public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Gets or sets the length and spacing of dashes. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the line border dash offset.")] - public double BorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("miter")] - [Description("Gets or sets the line border join style.")] - public string BorderJoinStyle { get; set; } = "miter"; - - /// - /// Gets or sets the line width (in pixels). - /// - /// - /// Default value is 3. - /// - [AddedVersion("3.0.0")] - [DefaultValue(3d)] - [Description("Gets or sets the line border width in pixels.")] - public double BorderWidth { get; set; } = 3; - - /// - /// . - /// Supported values are 'default', and 'monotone'. - /// - /// - /// Default value is 'default'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("default")] - [Description("Gets or sets the cubic interpolation mode.")] - public string CubicInterpolationMode { get; set; } = "default"; - - [AddedVersion("1.10.2")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public LineChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link - - /// - /// Draw the active points of a dataset over the other points of the dataset. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets whether active points are drawn over other points.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? DrawActiveElementsOnTop { get; set; } - - /// - /// How to fill the area under the line. - /// - /// - /// - /// Default value is . - /// - [AddedVersion("3.1.0")] - [DefaultValue(false)] - [Description("Gets or sets how the area under the line is filled.")] - public object Fill { get; set; } = false; - - /// - /// The line fill color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line fill color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBackgroundColor { get; set; } - - /// - /// Cap style of the line when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border cap style when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderCapStyle { get; set; } - - /// - /// The line color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderColor { get; set; } - - /// - /// Gets or sets the length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash pattern when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// Offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash offset when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("miter")] - [Description("Gets or sets the line border join style when hovered.")] - public string HoverBorderJoinStyle { get; set; } = "miter"; - - /// - /// The bar border width when hovered (in pixels) when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border width in pixels when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderWidth { get; set; } - - /// - /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. - /// - /// - /// Default value is 'x'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("x")] - [Description("Gets or sets the base axis of the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - /// - /// The fill color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the point fill color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBackgroundColor { get; set; } - - /// - /// The border color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the point border color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBorderColor { get; set; } - - /// - /// The width of the point border in pixels. - /// - /// - /// Default value is 1. - /// - [AddedVersion("1.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBorderWidth { get; set; } - - /// - /// The pixel size of the non-displayed point that reacts to mouse events. - /// - /// - /// Default value is 1. - /// - [AddedVersion("1.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point hit radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHitRadius { get; set; } - - /// - /// Point background color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the point background color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBackgroundColor { get; set; } - - /// - /// Point border color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the point border color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderColor { get; set; } - - /// - /// Border width of point when hovered. - /// - /// - /// Default value is 1. - /// - [AddedVersion("1.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point border width when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderWidth { get; set; } - - /// - /// The radius of the point when hovered. - /// - /// - /// Default value is 4. - /// - [AddedVersion("1.0.0")] - [DefaultValue(4d)] - [Description("Gets or sets the point radius when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverRadius { get; set; } - - /// - /// The radius of the point shape. If set to 0, the point is not rendered. - /// - /// - /// Default value is 3. - /// - [AddedVersion("1.0.0")] - [DefaultValue(3d)] - [Description("Gets or sets the point radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointRadius { get; set; } - - /// - /// The rotation of the point in degrees. - /// - /// - /// Default value is 0. - /// - [AddedVersion("1.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the point rotation in degrees.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointRotation { get; set; } - - /// - /// Style of the point. - /// Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and - /// 'triangle' to style. - /// the point. - /// - /// - /// Default value is 'circle'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("circle")] - [Description("Gets or sets the point style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointStyle { get; set; } - - //segment - //https://www.chartjs.org/docs/latest/charts/line.html#segment - - /// - /// If , the lines between points are not drawn. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether the line is displayed.")] - public bool ShowLine { get; set; } = true; - - /// - /// If , lines will be drawn between points with no or null data. - /// If , points with null data will create a break in the line. - /// Can also be a number specifying the maximum gap length to span. - /// The unit of the value depends on the scale used. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets whether gaps between points are spanned.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? SpanGaps { get; set; } - - //stack - //https://www.chartjs.org/docs/latest/charts/line.html#general - - /// - /// true to show the line as a stepped line (tension will be ignored). - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the line is rendered as stepped.")] - public bool Stepped { get; set; } - - /// - /// Bezier curve tension of the line. Set to 0 to draw straight lines. - /// This option is ignored if monotone cubic interpolation is used. - /// - /// - /// Default value is 0. - /// - [AddedVersion("1.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the bezier curve tension.")] - public double Tension { get; set; } - - /// - /// The ID of the x axis to plot this dataset on. - /// - /// - /// Default value is 'first x axis'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("first x axis")] - [Description("Gets or sets the x-axis identifier for the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? XAxisID { get; set; } - - /// - /// The ID of the y axis to plot this dataset on. - /// - /// - /// Default value is 'first y axis'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("first y axis")] - [Description("Gets or sets the y-axis identifier for the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? YAxisID { get; set; } - - #endregion -} - -/// -/// Represents data label options for a line chart dataset. -/// -[AddedVersion("1.10.2")] -public class LineChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDatasetData.cs deleted file mode 100644 index 919383c68..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDatasetData.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a line chart data item for dynamic updates. -/// -[AddedVersion("1.10.0")] -public record LineChartDatasetData : ChartDatasetData -{ - #region Constructors - - public LineChartDatasetData(string? datasetLabel, double data) : base(datasetLabel, data) { } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDataset.cs deleted file mode 100644 index 15df434bc..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDataset.cs +++ /dev/null @@ -1,267 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// The doughnut/pie chart allows a number of properties to be specified for each dataset. -/// These are used to set display properties for a specific dataset. -/// . -/// -[AddedVersion("1.0.0")] -public class PieChartDataset : ChartDataset -{ - #region Properties, Indexers - - /// - /// Arc background color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the arc background color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BackgroundColor { get; set; } - - /// - /// Supported values are 'center' and 'inner'. - /// When 'center' is set, the borders of arcs next to each other will overlap. - /// When 'inner' is set, it is guaranteed that all borders will not overlap. - /// - /// - /// Default value is 'center'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("center")] - [Description("Gets or sets the arc border alignment.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderAlign { get; set; } // TODO: change this to enum - - /// - /// Arc border color. - /// - /// - /// Default value is '#fff'. - /// - [AddedVersion("1.0.0")] - [DefaultValue("#fff")] - [Description("Gets or sets the arc border color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderColor { get; set; } - - /// - /// Arc border length and spacing of dashes. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Arc border offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the arc border dash offset.")] - public double BorderDashOffset { get; set; } - - /// - /// Arc border join style. - /// Supported values are 'round', 'bevel', 'miter'. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border join style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderJoinStyle { get; set; } // TODO: change this to enum - - /// - /// It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the arc border radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderRadius { get; set; } - - /// - /// Arc border width (in pixels). - /// - /// - /// Default value is 2. - /// - [AddedVersion("1.0.0")] - [DefaultValue(2)] - [Description("Gets or sets the arc border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderWidth { get; set; } - - /// - /// Per-dataset override for the sweep that the arcs cover. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the sweep covered by the arcs.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Circumference { get; set; } - - [AddedVersion("1.10.2")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public PieChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link - - /// - /// Arc background color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc background color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBackgroundColor { get; set; } - - /// - /// Arc border color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderColor { get; set; } - - /// - /// Arc border length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// Arc border offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border dash offset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderDashOffset { get; set; } - - /// - /// Arc border join style when hovered. - /// Supported values are 'round', 'bevel', 'miter'. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border join style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderJoinStyle { get; set; } // TODO: change this to enum - - /// - /// Arc border width when hovered (in pixels). - /// - /// - /// Default value is . - /// - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderWidth { get; set; } - - /// - /// Arc offset when hovered (in pixels). - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the hovered arc offset in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverOffset { get; set; } - - /// - /// Arc offset (in pixels). - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the arc offset in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Offset { get; set; } - - /// - /// Per-dataset override for the starting angle to draw arcs from. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the starting rotation angle for the arcs.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Rotation { get; set; } - - /// - /// Fixed arc offset (in pixels). Similar to but applies to all arcs. - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the fixed arc spacing in pixels.")] - public double Spacing { get; set; } - - /// - /// The relative thickness of the dataset. - /// Providing a value for weight will cause the pie or doughnut dataset to be drawn - /// with a thickness relative to the sum of all the dataset weight values. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the relative dataset thickness.")] - public double Weight { get; set; } = 1; - - #endregion -} - -/// -/// Represents data label options for a pie chart dataset. -/// -[AddedVersion("1.10.2")] -public class PieChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDatasetData.cs deleted file mode 100644 index de991d296..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/PieChart/PieChartDatasetData.cs +++ /dev/null @@ -1,27 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a pie chart data item for dynamic updates. -/// -[AddedVersion("1.10.0")] -public record PieChartDatasetData : ChartDatasetData -{ - #region Constructors - - public PieChartDatasetData(string? datasetLabel, double data, string? backgroundColor) : base(datasetLabel, data) - { - BackgroundColor = backgroundColor; - } - - #endregion - - #region Properties, Indexers - - /// - /// Gets the background color for the generated arc. - /// - [AddedVersion("1.10.0")] - public string? BackgroundColor { get; init; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDataset.cs deleted file mode 100644 index 9885865d9..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDataset.cs +++ /dev/null @@ -1,190 +0,0 @@ -namespace BlazorBootstrap; - -[AddedVersion("3.0.0")] -public class PolarAreaChartDataset : ChartDataset -{ - #region Properties, Indexers - - /// - /// Arc background color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the arc background color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BackgroundColor { get; set; } - - /// - /// Supported values are 'center' and 'inner'. - /// When 'center' is set, the borders of arcs next to each other will overlap. - /// When 'inner' is set, it is guaranteed that all borders will not overlap. - /// - /// - /// Default value is 'center'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("center")] - [Description("Gets or sets the arc border alignment.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderAlign { get; set; } // TODO: change this to enum - - /// - /// Arc border color. - /// - /// - /// Default value is '#fff'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("#fff")] - [Description("Gets or sets the arc border color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderColor { get; set; } - - /// - /// Arc border length and spacing of dashes. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Arc border offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the arc border dash offset.")] - public double BorderDashOffset { get; set; } - - /// - /// Arc border join style. - /// Supported values are 'round', 'bevel', 'miter'. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border join style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderJoinStyle { get; set; } // TODO: change this to enum - - /// - /// Arc border width (in pixels). - /// - /// - /// Default value is 2. - /// - [AddedVersion("3.0.0")] - [DefaultValue(2)] - [Description("Gets or sets the arc border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderWidth { get; set; } - - /// - /// By default the Arc is curved. If , the Arc will be flat. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether arcs are drawn as circles.")] - public bool Circular { get; set; } = true; - - [AddedVersion("3.0.0")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public PieChartDatasetDataLabels Datalabels { get; set; } = new(); - - /// - /// Arc background color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc background color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBackgroundColor { get; set; } - - /// - /// Arc border color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the arc border color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderColor { get; set; } - - /// - /// Arc border length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// Arc border offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border dash offset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderDashOffset { get; set; } - - /// - /// Arc border join style when hovered. - /// Supported values are 'round', 'bevel', 'miter'. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border join style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderJoinStyle { get; set; } // TODO: change this to enum - - /// - /// Arc border width when hovered (in pixels). - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the hovered arc border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderWidth { get; set; } - - #endregion -} - -/// -/// Represents data label options for a polar area chart dataset. -/// -[AddedVersion("3.0.0")] -public class PolarAreaChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDatasetData.cs deleted file mode 100644 index 8669241c0..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/PolarAreaChart/PolarAreaChartDatasetData.cs +++ /dev/null @@ -1,37 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a polar area chart data item for dynamic updates. -/// -[AddedVersion("3.0.0")] -public record PolarAreaChartDatasetData : ChartDatasetData -{ - #region Constructors - - public PolarAreaChartDatasetData( - string? datasetLabel, - double data, - string? backgroundColor, - string? borderColor) : base(datasetLabel, data) - { - BackgroundColor = backgroundColor; - BorderColor = borderColor; - } - - #endregion - - #region Properties, Indexers - - /// - /// Gets the background color for the generated segment. - /// - [AddedVersion("3.0.0")] - public string? BackgroundColor { get; init; } - /// - /// Gets the border color for the generated segment. - /// - [AddedVersion("3.0.0")] - public string? BorderColor { get; init; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/RadarChart/RadarChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/RadarChart/RadarChartDataset.cs deleted file mode 100644 index f34e5354b..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/RadarChart/RadarChartDataset.cs +++ /dev/null @@ -1,362 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// A radar chart is a way of showing multiple data points and the variation between them. -/// They are often useful for comparing the points of two or more different data sets. -/// . -/// -[AddedVersion("3.0.0")] -public class RadarChartDataset : ChartDataset -{ - #region Properties, Indexers - - /// - /// Gets or sets the line fill color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the line fill color.")] - public string BackgroundColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Cap style of the line. - /// Supported values are 'butt', 'round', and 'square'. - /// - /// - /// Default value is 'butt'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("butt")] - [Description("Gets or sets the line border cap style.")] - public string BorderCapStyle { get; set; } = "butt"; - - /// - /// Gets or sets the line color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the line color.")] - public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Gets or sets the length and spacing of dashes. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the line border dash offset.")] - public double BorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("miter")] - [Description("Gets or sets the line border join style.")] - public string BorderJoinStyle { get; set; } = "miter"; - - /// - /// Gets or sets the line width (in pixels). - /// - /// - /// Default value is 3. - /// - [AddedVersion("3.0.0")] - [DefaultValue(3d)] - [Description("Gets or sets the line border width in pixels.")] - public double BorderWidth { get; set; } = 3; - - [AddedVersion("3.0.0")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public RadarChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: Add reference link - - /// - /// How to fill the area under the line. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(false)] - [Description("Gets or sets how the area under the line is filled.")] - public bool Fill { get; set; } - - /// - /// The line fill color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line fill color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBackgroundColor { get; set; } - - /// - /// Cap style of the line when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border cap style when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderCapStyle { get; set; } - - /// - /// The line color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderColor { get; set; } - - /// - /// Gets or sets the length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash pattern when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// Offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash offset when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("miter")] - [Description("Gets or sets the line border join style when hovered.")] - public string HoverBorderJoinStyle { get; set; } = "miter"; - - /// - /// The bar border width when hovered (in pixels) when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border width in pixels when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderWidth { get; set; } - - /// - /// The fill color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the point fill color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBackgroundColor { get; set; } - - /// - /// The border color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the point border color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBorderColor { get; set; } - - /// - /// The width of the point border in pixels. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBorderWidth { get; set; } - - /// - /// The pixel size of the non-displayed point that reacts to mouse events. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point hit radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHitRadius { get; set; } - - /// - /// Point background color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the point background color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBackgroundColor { get; set; } - - /// - /// Point border color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the point border color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderColor { get; set; } - - /// - /// Border width of point when hovered. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point border width when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderWidth { get; set; } - - /// - /// The radius of the point when hovered. - /// - /// - /// Default value is 4. - /// - [AddedVersion("3.0.0")] - [DefaultValue(4d)] - [Description("Gets or sets the point radius when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverRadius { get; set; } - - /// - /// The radius of the point shape. If set to 0, the point is not rendered. - /// - /// - /// Default value is 3. - /// - [AddedVersion("3.0.0")] - [DefaultValue(3d)] - [Description("Gets or sets the point radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointRadius { get; set; } - - /// - /// The rotation of the point in degrees. - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the point rotation in degrees.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointRotation { get; set; } - - /// - /// Style of the point. - /// Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and - /// 'triangle' to style. - /// the point. - /// - /// - /// Default value is 'circle'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("circle")] - [Description("Gets or sets the point style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointStyle { get; set; } - - /// - /// If , lines will be drawn between points with no or null data. - /// If , points with null data will create a break in the line. - /// Can also be a number specifying the maximum gap length to span. - /// The unit of the value depends on the scale used. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets whether gaps between points are spanned.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? SpanGaps { get; set; } - - /// - /// Bezier curve tension of the line. Set to 0 to draw straight lines. - /// This option is ignored if monotone cubic interpolation is used. - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the bezier curve tension.")] - public double Tension { get; set; } - - #endregion -} - -/// -/// Represents data label options for a radar chart dataset. -/// -[AddedVersion("3.0.0")] -public class RadarChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/RadarChart/RadarChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/RadarChart/RadarChartDatasetData.cs deleted file mode 100644 index 9672467dd..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/RadarChart/RadarChartDatasetData.cs +++ /dev/null @@ -1,37 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a radar chart data item for dynamic updates. -/// -[AddedVersion("3.0.0")] -public record RadarChartDatasetData : ChartDatasetData -{ - #region Constructors - - public RadarChartDatasetData( - string? datasetLabel, - double data, - string? backgroundColor = null, - string? borderColor = null) : base(datasetLabel, data) - { - BackgroundColor = backgroundColor; - BorderColor = borderColor; - } - - #endregion - - #region Properties, Indexers - - /// - /// Gets the background color for the generated point. - /// - [AddedVersion("3.0.0")] - public string? BackgroundColor { get; init; } - /// - /// Gets the border color for the generated point. - /// - [AddedVersion("3.0.0")] - public string? BorderColor { get; init; } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDataPoint.cs b/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDataPoint.cs deleted file mode 100644 index 4199500a9..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDataPoint.cs +++ /dev/null @@ -1,9 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a scatter chart data point. -/// -/// The x-axis value. -/// The y-axis value. -[AddedVersion("3.0.0")] -public record ScatterChartDataPoint(double X, double Y); diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDataset.cs deleted file mode 100644 index c11fd2cee..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDataset.cs +++ /dev/null @@ -1,453 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Scatter charts are based on basic line charts with the x-axis changed to a linear axis. -/// To use a scatter chart, data must be passed as objects containing X and Y properties. -/// . -/// The scatter chart supports all the same properties as the line chart. -/// By default, the scatter chart will override the showLine property of the line chart to . -/// -[AddedVersion("3.0.0")] -public class ScatterChartDataset : ChartDataset -{ - #region Properties, Indexers - - /// - /// Gets or sets the line fill color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the line fill color.")] - public string BackgroundColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Cap style of the line. - /// Supported values are 'butt', 'round', and 'square'. - /// - /// - /// Default value is 'butt'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("butt")] - [Description("Gets or sets the line border cap style.")] - public string BorderCapStyle { get; set; } = "butt"; - - /// - /// Gets or sets the line color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the line color.")] - public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Gets or sets the length and spacing of dashes. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the line border dash offset.")] - public double BorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("miter")] - [Description("Gets or sets the line border join style.")] - public string BorderJoinStyle { get; set; } = "miter"; - - /// - /// Gets or sets the line width (in pixels). - /// - /// - /// Default value is 3. - /// - [AddedVersion("3.0.0")] - [DefaultValue(3d)] - [Description("Gets or sets the line border width in pixels.")] - public double BorderWidth { get; set; } = 3; - - /// - /// . - /// Supported values are 'default', and 'monotone'. - /// - /// - /// Default value is 'default'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("default")] - [Description("Gets or sets the cubic interpolation mode.")] - public string CubicInterpolationMode { get; set; } = "default"; - - [AddedVersion("3.0.0")] - [Description("Gets or sets the dataset data label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public LineChartDatasetDataLabels Datalabels { get; set; } = new(); // TODO: add the reference link - - /// - /// Draw the active points of a dataset over the other points of the dataset. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets whether active points are drawn over other points.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? DrawActiveElementsOnTop { get; set; } - - /// - /// How to fill the area under the line. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(false)] - [Description("Gets or sets how the area under the line is filled.")] - public bool Fill { get; set; } - - /// - /// The line fill color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line fill color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBackgroundColor { get; set; } - - /// - /// Cap style of the line when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border cap style when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderCapStyle { get; set; } - - /// - /// The line color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderColor { get; set; } - - /// - /// Gets or sets the length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash pattern when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// Offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border dash offset when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("miter")] - [Description("Gets or sets the line border join style when hovered.")] - public string HoverBorderJoinStyle { get; set; } = "miter"; - - /// - /// The bar border width when hovered (in pixels) when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the line border width in pixels when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? HoverBorderWidth { get; set; } - - /// - /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. - /// - /// - /// Default value is 'x'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("x")] - [Description("Gets or sets the base axis of the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - /// - /// The fill color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the point fill color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBackgroundColor { get; set; } - - /// - /// The border color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("rgba(0, 0, 0, 0.1)")] - [Description("Gets or sets the point border color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBorderColor { get; set; } - - /// - /// The width of the point border in pixels. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point border width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBorderWidth { get; set; } - - /// - /// The pixel size of the non-displayed point that reacts to mouse events. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point hit radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHitRadius { get; set; } - - /// - /// Point background color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the point background color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBackgroundColor { get; set; } - - /// - /// Point border color when hovered. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the point border color when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderColor { get; set; } - - /// - /// Border width of point when hovered. - /// - /// - /// Default value is 1. - /// - [AddedVersion("3.0.0")] - [DefaultValue(1d)] - [Description("Gets or sets the point border width when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderWidth { get; set; } - - /// - /// The radius of the point when hovered. - /// - /// - /// Default value is 4. - /// - [AddedVersion("3.0.0")] - [DefaultValue(4d)] - [Description("Gets or sets the point radius when hovered.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverRadius { get; set; } - - /// - /// The radius of the point shape. If set to 0, the point is not rendered. - /// - /// - /// Default value is 3. - /// - [AddedVersion("3.0.0")] - [DefaultValue(3d)] - [Description("Gets or sets the point radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointRadius { get; set; } - - /// - /// The rotation of the point in degrees. - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the point rotation in degrees.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointRotation { get; set; } - - /// - /// Style of the point. - /// Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and - /// 'triangle' to style. - /// the point. - /// - /// - /// Default value is 'circle'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("circle")] - [Description("Gets or sets the point style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointStyle { get; set; } - - //segment - //https://www.chartjs.org/docs/latest/charts/line.html#segment - - /// - /// If , the lines between points are not drawn. - /// By default, the scatter chart will override the showLine property of the line chart to false. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(false)] - [Description("Gets a value indicating whether the line is displayed.")] - public bool ShowLine { get; } = false; - - /// - /// If , lines will be drawn between points with no or null data. - /// If , points with null data will create a break in the line. - /// Can also be a number specifying the maximum gap length to span. - /// The unit of the value depends on the scale used. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets whether gaps between points are spanned.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? SpanGaps { get; set; } - - //stack - //https://www.chartjs.org/docs/latest/charts/line.html#general - - /// - /// true to show the line as a stepped line (tension will be ignored). - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the line is rendered as stepped.")] - public bool Stepped { get; set; } - - /// - /// Bezier curve tension of the line. Set to 0 to draw straight lines. - /// This option is ignored if monotone cubic interpolation is used. - /// - /// - /// Default value is 0. - /// - [AddedVersion("3.0.0")] - [DefaultValue(0d)] - [Description("Gets or sets the bezier curve tension.")] - public double Tension { get; set; } - - /// - /// The ID of the x axis to plot this dataset on. - /// - /// - /// Default value is 'first x axis'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("first x axis")] - [Description("Gets or sets the x-axis identifier for the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? XAxisID { get; set; } - - /// - /// The ID of the y axis to plot this dataset on. - /// - /// - /// Default value is 'first y axis'. - /// - [AddedVersion("3.0.0")] - [DefaultValue("first y axis")] - [Description("Gets or sets the y-axis identifier for the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? YAxisID { get; set; } - - #endregion -} - -/// -/// Represents data label options for a scatter chart dataset. -/// -[AddedVersion("3.0.0")] -public class ScatterChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDatasetData.cs b/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDatasetData.cs deleted file mode 100644 index 60eee9cf1..000000000 --- a/blazorbootstrap/Models/Charts/ChartDataset/ScatterChart/ScatterChartDatasetData.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a scatter chart data item for dynamic updates. -/// -[AddedVersion("3.0.0")] -public record ScatterChartDatasetData : ChartDatasetData -{ - #region Constructors - - public ScatterChartDatasetData(string? datasetLabel, ScatterChartDataPoint? data) : base(datasetLabel, data) { } - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartLabel.cs b/blazorbootstrap/Models/Charts/ChartLabel.cs deleted file mode 100644 index 4edab17ae..000000000 --- a/blazorbootstrap/Models/Charts/ChartLabel.cs +++ /dev/null @@ -1,7 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents a chart label model. -/// -[AddedVersion("1.0.0")] -public class ChartLabel { } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/BarChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/BarChartOptions.cs deleted file mode 100644 index 92d9ab4f1..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/BarChartOptions.cs +++ /dev/null @@ -1,47 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a bar chart. -/// -[AddedVersion("1.0.0")] -public class BarChartOptions : ChartOptions -{ - #region Properties, Indexers - - //hover -> mode, intersect - //maintainAspectRatio - //plugins -> title -> display, text - - /// - /// The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. - /// Supported values are 'x' and 'y'. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the base axis of the chart.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - [AddedVersion("1.0.0")] - [Description("Gets or sets the interaction configuration.")] - public Interaction Interaction { get; set; } = new(); - - [AddedVersion("1.0.0")] - [Description("Gets or sets the layout configuration.")] - public ChartLayout Layout { get; set; } = new(); - - [AddedVersion("1.10.2")] - [Description("Gets or sets the plugin configuration.")] - public BarChartPlugins Plugins { get; set; } = new(); - - [AddedVersion("1.0.0")] - [Description("Gets or sets the scale configuration.")] - public Scales Scales { get; set; } = new(); - - #endregion - - //tooltips -> mode, intersect -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/BubbleChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/BubbleChartOptions.cs deleted file mode 100644 index b1ae9685f..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/BubbleChartOptions.cs +++ /dev/null @@ -1,34 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a bubble chart. -/// -[AddedVersion("4.0.0")] -public class BubbleChartOptions : ChartOptions -{ - #region Properties, Indexers - - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the base axis of the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - [AddedVersion("4.0.0")] - [Description("Gets or sets the interaction configuration.")] - public Interaction Interaction { get; set; } = new(); - - [AddedVersion("4.0.0")] - [Description("Gets or sets the layout configuration.")] - public ChartLayout Layout { get; set; } = new(); - - [AddedVersion("4.0.0")] - [Description("Gets or sets the plugin configuration.")] - public BubbleChartPlugins Plugins { get; set; } = new(); - - [AddedVersion("4.0.0")] - [Description("Gets or sets the scale configuration.")] - public Scales Scales { get; set; } = new(); - - #endregion -} \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs deleted file mode 100644 index 66c5e99b5..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs +++ /dev/null @@ -1,1009 +0,0 @@ -namespace BlazorBootstrap; - -public interface IChartOptions { } - -/// -/// -/// -[AddedVersion("1.0.0")] -public class ChartOptions : IChartOptions -{ - #region Properties, Indexers - - /// - /// Chart.js animates charts out of the box. - /// A number of options are provided to configure how the animation looks and how long it takes. - /// . - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the chart animation configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAnimation? Animation { get; set; } - - /// - /// Canvas aspect ratio (i.e. width / height). - /// . - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the canvas aspect ratio.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? AspectRatio { get; set; } - - /// - /// Gets or sets the locale. - /// By default, the chart is using the default locale of the platform which is running on. - /// - [AddedVersion("1.10.0")] - [DefaultValue(null)] - [Description("Gets or sets the locale.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Locale { get; set; } - - /// - /// Maintain the original canvas aspect ratio (width / height) when resizing. - /// . - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether the original canvas aspect ratio is maintained while resizing.")] - public bool MaintainAspectRatio { get; set; } = true; - - //onResize - //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options - - /// - /// Delay the resize update by the given amount of milliseconds. - /// . - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the resize delay in milliseconds.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? ResizeDelay { get; set; } - - /// - /// Resizes the chart canvas when its container does. - /// . /// - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the chart resizes with its container.")] - public bool Responsive { get; set; } - - #endregion -} - -/// -/// Namespace: options.layout, the global options for the chart layout is defined in Chart.defaults.layout. -/// . -/// -[AddedVersion("1.0.0")] -public class ChartLayout -{ - #region Properties, Indexers - - /// - /// Apply automatic padding so visible elements are completely drawn. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether automatic padding is applied.")] - public bool AutoPadding { get; set; } = true; - - /// - /// The padding to add inside the chart. - /// - [AddedVersion("1.0.0")] - [DefaultValue(0)] - [Description("Gets or sets the padding inside the chart.")] - public int Padding { get; set; } = 0; - - #endregion -} - -/// -/// Namespace: options.interaction, the global interaction configuration is at Chart.defaults.interaction. -/// . -/// -[AddedVersion("1.0.0")] -public class Interaction -{ - #region Fields and Constants - - private InteractionAxis? axis; - private InteractionMode mode; - - #endregion - - #region Constructors - - public Interaction() - { - Mode = InteractionMode.Nearest; - } - - #endregion - - #region Methods - - private void SetMode(InteractionMode interactionMode) => - ChartInteractionMode = interactionMode switch - { - InteractionMode.Dataset => "dataset", - InteractionMode.Index => "index", - InteractionMode.Nearest => "nearest", - InteractionMode.Point => "point", - InteractionMode.X => "x", - InteractionMode.Y => "y", - _ => "" - }; - - private void SetAxis(InteractionAxis? interactionAxis) => - ChartInteractionAxis = interactionAxis switch - { - InteractionAxis.X => "x", - InteractionAxis.Y => "y", - InteractionAxis.XY => "xy", - InteractionAxis.R => "r", - _ => null - }; - - #endregion - - #region Properties, Indexers - - /// - /// Defines which directions are used in calculating distances. - /// Supported values are x, y, xy, and r. - /// . - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets the serialized interaction axis value.")] - [JsonPropertyName("axis")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? ChartInteractionAxis { get; private set; } - - /// - /// Sets which elements appear in the interaction. - /// - [AddedVersion("1.0.0")] - [DefaultValue("nearest")] - [Description("Gets the serialized interaction mode value.")] - [JsonPropertyName("mode")] - public string ChartInteractionMode { get; private set; } = string.Empty; - - /// - /// if , the interaction mode only applies when the mouse position intersects an item on the chart. - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether interactions require intersection with a chart item.")] - public bool Intersect { get; set; } = true; - - /// - /// If , invisible points that are outside of the chart area are included when evaluating interactions. - /// . - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets a value indicating whether invisible points are included in interactions.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? IncludeInvisible { get; set; } - - /// - /// Defines which directions are used in calculating distances for interactions. - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the interaction axis.")] - [JsonIgnore] - public InteractionAxis? Axis - { - get => axis; - set - { - axis = value; - SetAxis(value); - } - } - - /// - /// Sets which elements appear in the tooltip. See Interaction Modes for details. - /// - [AddedVersion("1.0.0")] - [DefaultValue(InteractionMode.Nearest)] - [Description("Gets or sets the interaction mode.")] - [JsonIgnore] - public InteractionMode Mode - { - get => mode; - set - { - mode = value; - SetMode(value); - } - } - - #endregion -} - -public enum InteractionAxis -{ - /// - /// Calculate interaction distances on the x-axis only. - /// - [AddedVersion("4.0.0")] - X, - - /// - /// Calculate interaction distances on the y-axis only. - /// - [AddedVersion("4.0.0")] - Y, - - /// - /// Calculate interaction distances on both x-axis and y-axis. - /// - [AddedVersion("4.0.0")] - XY, - - /// - /// Calculate interaction distances on the radial axis. - /// - [AddedVersion("4.0.0")] - R -} - -public enum InteractionMode -{ - /// - /// Finds items in the same dataset. - /// - Dataset, - - /// - /// Finds item at the same index. - /// - Index, - - /// - /// Gets the items that are at the nearest distance to the point. - /// - Nearest, - - /// - /// Finds all of the items that intersect the point - /// - Point, - - /// - /// Returns all items that would intersect based on the X coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts. - /// - X, - - /// - /// Returns all items that would intersect based on the Y coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts. - /// - Y -} - -/// -/// Represents the cartesian axis configuration for a chart. -/// -[AddedVersion("1.0.0")] -public class Scales -{ - #region Properties, Indexers - - /// - /// Gets or sets the x-axis configuration. - /// - [AddedVersion("1.0.0")] - [Description("Gets or sets the x-axis configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? X { get; set; } = new(); - - /// - /// Gets or sets the y-axis configuration. - /// - [AddedVersion("1.0.0")] - [Description("Gets or sets the y-axis configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public ChartAxes? Y { get; set; } = new(); - - #endregion -} - -/// -/// Provides built-in chart axis type names. -/// -[AddedVersion("1.0.0")] -public class ChartAxesType -{ - #region Fields and Constants - - public static readonly string Linear = "linear"; - public static readonly string Logarithmic = "logarithmic"; - public static readonly string Category = "category"; - public static readonly string Time = "time"; - public static readonly string Timeseries = "timeseries"; - - #endregion -} - -/// -/// Represents the configuration for a chart axis. -/// -[AddedVersion("1.0.0")] -public class ChartAxes -{ - #region Properties, Indexers - - /// - /// If , the scale begins at zero. - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether the scale begins at zero.")] - public bool BeginAtZero { get; set; } = true; - - /// - /// Define options for the border that run perpendicular to the axis. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the border configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesBorder? Border { get; set; } - - /// - /// Gets or sets the grid configuration. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the grid configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesGrid? Grid { get; set; } - - /// - /// User defined maximum number for the scale, overrides maximum value from data. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the maximum scale value.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Max { get; set; } - - /// - /// User defined minimum number for the scale, overrides minimum value from data. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the minimum scale value.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Min { get; set; } - - /// - /// If , the axis values are stacked. - /// - [AddedVersion("1.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the axis values are stacked.")] - public bool Stacked { get; set; } - - /// - /// Adjustment used when calculating the maximum data value. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the suggested maximum scale value.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? SuggestedMax { get; set; } - - /// - /// Adjustment used when calculating the minimum data value. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the suggested minimum scale value.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? SuggestedMin { get; set; } - - /// - /// Gets or sets the tick configuration. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesTicks? Ticks { get; set; } - - /// - /// Gets or sets the title configuration. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the axis title configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesTitle? Title { get; set; } - - /// - /// Gets or sets the index scale type. See . - /// - /// - /// Default value is . - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the axis type.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Type { get; set; } - - #endregion -} - -/// -/// Define options for the border that run perpendicular to the axis. -/// -/// -[AddedVersion("1.0.0")] -public class ChartAxesBorder -{ - #region Properties, Indexers - - /// - /// The color of the border line. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the border line color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// Length and spacing of dashes on grid lines - /// - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Dash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the border dash offset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? DashOffset { get; set; } - - /// - /// If , draw a border at the edge between the axis and the chart area. - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether the axis border is displayed.")] - public bool Display { get; set; } = true; - - /// - /// The width of the border line. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the border width.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Width { get; set; } - - /// - /// z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the border z-index.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Z { get; set; } - - #endregion -} - -/// -/// Defines options for the grid lines that run perpendicular to the axis. -/// -/// -[AddedVersion("1.0.0")] -public class ChartAxesGrid -{ - #region Properties, Indexers - - /// - /// If , gridlines are circular (on radar and polar area charts only). - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets a value indicating whether grid lines are circular.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? Circular { get; set; } - - /// - /// Color of the grid axis lines. Here one can write a CSS method or even a JavaScript method for a dynamic color. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the grid line color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// If false, do not display grid lines for this axis. - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether grid lines are displayed.")] - public bool Display { get; set; } = true; - - /// - /// If , draw lines on the chart area inside the axis lines. This is useful when there are multiple - /// axes and you need to control which grid lines are drawn. - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether grid lines are drawn on the chart area.")] - public bool DrawOnChartArea { get; set; } = true; - - /// - /// If , draw lines beside the ticks in the axis area beside the chart. - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether tick lines are drawn.")] - public bool DrawTicks { get; set; } = true; - - /// - /// Stroke width of grid lines. - /// - [AddedVersion("1.0.0")] - [DefaultValue(1)] - [Description("Gets or sets the grid line width.")] - public int LineWidth { get; set; } = 1; - - /// - /// If , grid lines will be shifted to be between labels. This is set to true for a bar chart by - /// default. - /// - [AddedVersion("1.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether grid lines are offset between labels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? Offset { get; set; } = false; - - /// - /// Length and spacing of the tick mark line. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick border dash pattern.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? TickBorderDash { get; set; } - - /// - /// Offset for the line dash of the tick mark. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick border dash offset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? TickBorderDashOffset { get; set; } - - /// - /// Color of the tick line. If unset, defaults to the grid line color. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick line color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? TickColor { get; set; } - - /// - /// Length in pixels that the grid lines will draw into the axis area. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick length in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? TickLength { get; set; } - - /// - /// Width of the tick mark in pixels. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? TickWidth { get; set; } - - /// - /// z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the grid line layer z-index.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Z { get; set; } - - #endregion -} - -public enum TicksAlignment -{ - Center, // default - Start, - End -} - -public enum TitleAlignment -{ - Center, // default - Start, - End -} - -/// -/// Chart axes tick styling -/// -/// -[AddedVersion("1.0.0")] -public class ChartAxesTicks -{ - #region Fields and Constants - - private TicksAlignment ticksAlignment; - - #endregion - - #region Methods - - private void SetTicksAlignment(TicksAlignment interactionMode) => - Alignment = interactionMode switch - { - TicksAlignment.Center => "center", - TicksAlignment.Start => "start", - TicksAlignment.End => "end", - _ => null - }; - - #endregion - - #region Properties, Indexers - - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets the serialized tick alignment value.")] - [JsonPropertyName("align")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Alignment { get; private set; } - - /// - /// Color of label backdrops - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick backdrop color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? BackdropColor { get; set; } - - /// - /// Padding of label backdrop - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick backdrop padding.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? BackdropPadding { get; set; } - - /// - /// Color of ticks - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// If , show tick labels. - /// - [AddedVersion("1.0.0")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether tick labels are displayed.")] - public bool Display { get; set; } = true; - - /// - /// defines options for the major tick marks that are generated by the axis. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the major tick configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesTicksMajor? Major { get; set; } - - /// - /// Sets the offset of the tick labels from the axis - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick label padding.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Padding { get; set; } - - /// - /// If , draw a background behind the tick labels. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets a value indicating whether a backdrop is drawn behind tick labels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? ShowLabelBackdrop { get; set; } - - /// - /// The color of the stroke around the text. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick text stroke color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? TextStrokeColor { get; set; } - - /// - /// Stroke width around the text. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the tick text stroke width.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? TextStrokeWidth { get; set; } - - [AddedVersion("1.0.0")] - [DefaultValue(TicksAlignment.Center)] - [Description("Gets or sets the tick alignment.")] - [JsonIgnore] - public TicksAlignment TicksAlignment - { - get => ticksAlignment; - set - { - ticksAlignment = value; - SetTicksAlignment(value); - } - } - - #endregion -} - -/// -/// Defines options for the major tick marks that are generated by the axis. -/// -[AddedVersion("1.0.0")] -public class ChartAxesTicksMajor -{ - #region Properties, Indexers - - /// - /// If , major ticks are generated. A major tick will affect auto skipping and major will be defined - /// on ticks in the scriptable options context. - /// - [AddedVersion("1.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether major ticks are generated.")] - public bool Enabled { get; set; } = false; - - #endregion -} - -/// -/// The chart title defines text to draw at the top of the chart. -/// -/// -[AddedVersion("1.0.0")] -public class ChartAxesTitle -{ - #region Fields and Constants - - private TitleAlignment titleAlignment; - - #endregion - - #region Methods - - private void SetTitleAlignment(TitleAlignment interactionMode) => - Alignment = interactionMode switch - { - TitleAlignment.Center => "center", // default - TitleAlignment.Start => "start", - TitleAlignment.End => "end", - _ => null - }; - - #endregion - - #region Properties, Indexers - - /// - /// Alignment of the title. - /// Options are: 'start', 'center', and 'end' - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets the serialized title alignment value.")] - [JsonPropertyName("align")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Alignment { get; private set; } - - /// - /// Color of text. - /// - [AddedVersion("1.0.0")] - [DefaultValue("black")] - [Description("Gets or sets the title text color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } = "black"; - - /// - /// Is the title shown? - /// - [AddedVersion("1.0.0")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the title is displayed.")] - public bool Display { get; set; } - - /// - /// Gets or sets the font used to render the title. - /// - [AddedVersion("1.0.0")] - [Description("Gets or sets the font used to render the title.")] - public ChartFont? Font { get; set; } = new(); - - //fullSize - //padding - //position - - /// - /// Gets or sets the title text. - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the title text.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Text { get; set; } - - [AddedVersion("1.0.0")] - [DefaultValue(TitleAlignment.Center)] - [Description("Gets or sets the title alignment.")] - [JsonIgnore] - public TitleAlignment TitleAlignment - { - get => titleAlignment; - set - { - titleAlignment = value; - SetTitleAlignment(value); - } - } - - #endregion -} - -/// -/// -/// -[AddedVersion("1.0.0")] -public class ChartFont -{ - #region Properties, Indexers - - /// - /// Default font family for all text, follows CSS font-family options. - /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the font family.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Family { get; set; } - - /// - /// Height of an individual line of text - /// - /// - [AddedVersion("1.0.0")] - [DefaultValue(1.2d)] - [Description("Gets or sets the font line height.")] - public double LineHeight { get; set; } = 1.2; - - /// - /// Default font size (in px) for text. Does not apply to radialLinear scale point labels. - /// - [AddedVersion("1.0.0")] - [DefaultValue(12)] - [Description("Gets or sets the font size in pixels.")] - public int Size { get; set; } = 12; - - /// - /// Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. - /// Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). - /// - [AddedVersion("1.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the font style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Style { get; set; } - - /// - /// Default font weight (boldness). - /// - /// - [AddedVersion("1.0.0")] - [DefaultValue("bold")] - [Description("Gets or sets the font weight.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Weight { get; set; } = "bold"; - - #endregion -} - -/// -/// Chart.js animates charts out of the box. -/// A number of options are provided to configure how the animation looks and how long it takes. -/// . -/// -[AddedVersion("4.0.0")] -public class ChartAnimation -{ - /// - /// Delay before starting the animations. - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the animation delay.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Delay { get; set; } - - /// - /// The number of milliseconds an animation takes. - /// - [AddedVersion("4.0.0")] - [DefaultValue(1000d)] - [Description("Gets or sets the animation duration in milliseconds.")] - public double Duration { get; set; } = 1000; - - /// - /// Easing function to use. - /// - [AddedVersion("4.0.0")] - [DefaultValue("easeOutQuart")] - [Description("Gets or sets the animation easing function.")] - public string Easing { get; set; } = "easeOutQuart"; - - /// - /// If , the animations loop endlessly. - /// - [AddedVersion("4.0.0")] - [DefaultValue(null)] - [Description("Gets or sets a value indicating whether the animation loops.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? Loop { get; set; } -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/DoughnutChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/DoughnutChartOptions.cs deleted file mode 100644 index 163b82e7f..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/DoughnutChartOptions.cs +++ /dev/null @@ -1,16 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a doughnut chart. -/// -[AddedVersion("1.0.0")] -public class DoughnutChartOptions : ChartOptions -{ - #region Properties, Indexers - - [AddedVersion("1.10.2")] - [Description("Gets or sets the plugin configuration.")] - public DoughnutChartPlugins Plugins { get; set; } = new(); - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs deleted file mode 100644 index 674f3661d..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs +++ /dev/null @@ -1,46 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a line chart. -/// -[AddedVersion("1.0.0")] -public class LineChartOptions : ChartOptions -{ - #region Properties, Indexers - - //hover -> mode, intersect - //maintainAspectRatio - //plugins -> title -> display, text - - /// - /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. - /// - /// - /// Default value is . - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the base axis of the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - [AddedVersion("1.0.0")] - [Description("Gets or sets the interaction configuration.")] - public Interaction Interaction { get; set; } = new(); - - [AddedVersion("1.0.0")] - [Description("Gets or sets the layout configuration.")] - public ChartLayout Layout { get; set; } = new(); - - [AddedVersion("1.10.2")] - [Description("Gets or sets the plugin configuration.")] - public LineChartPlugins Plugins { get; set; } = new(); - - [AddedVersion("1.0.0")] - [Description("Gets or sets the scale configuration.")] - public Scales Scales { get; set; } = new(); - - #endregion - - //tooltips -> mode, intersect -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/PieChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/PieChartOptions.cs deleted file mode 100644 index a9a699065..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/PieChartOptions.cs +++ /dev/null @@ -1,16 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a pie chart. -/// -[AddedVersion("1.0.0")] -public class PieChartOptions : ChartOptions -{ - #region Properties, Indexers - - [AddedVersion("1.10.2")] - [Description("Gets or sets the plugin configuration.")] - public PieChartPlugins Plugins { get; set; } = new(); - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/PolarAreaChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/PolarAreaChartOptions.cs deleted file mode 100644 index 80c165f3d..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/PolarAreaChartOptions.cs +++ /dev/null @@ -1,16 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a polar area chart. -/// -[AddedVersion("3.0.0")] -public class PolarAreaChartOptions : ChartOptions -{ - #region Properties, Indexers - - [AddedVersion("3.0.0")] - [Description("Gets or sets the plugin configuration.")] - public PolarAreaChartPlugins Plugins { get; set; } = new(); - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/RadarChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/RadarChartOptions.cs deleted file mode 100644 index ab32071c9..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/RadarChartOptions.cs +++ /dev/null @@ -1,9 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a radar chart. -/// -[AddedVersion("3.0.0")] -public class RadarChartOptions : ChartOptions -{ -} diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ScatterChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ScatterChartOptions.cs deleted file mode 100644 index a23db0b18..000000000 --- a/blazorbootstrap/Models/Charts/ChartOptions/ScatterChartOptions.cs +++ /dev/null @@ -1,46 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents configuration options for a scatter chart. -/// -[AddedVersion("3.0.0")] -public class ScatterChartOptions : ChartOptions -{ - #region Properties, Indexers - - //hover -> mode, intersect - //maintainAspectRatio - //plugins -> title -> display, text - - /// - /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. - /// - /// - /// Default value is 'x'. - /// - [AddedVersion("3.0.0")] - [DefaultValue(null)] - [Description("Gets or sets the base axis of the dataset.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - [AddedVersion("3.0.0")] - [Description("Gets or sets the interaction configuration.")] - public Interaction Interaction { get; set; } = new(); - - [AddedVersion("3.0.0")] - [Description("Gets or sets the layout configuration.")] - public ChartLayout Layout { get; set; } = new(); - - [AddedVersion("3.0.0")] - [Description("Gets or sets the plugin configuration.")] - public ScatterChartPlugins Plugins { get; set; } = new(); - - [AddedVersion("3.0.0")] - [Description("Gets or sets the scale configuration.")] - public Scales Scales { get; set; } = new(); - - #endregion - - //tooltips -> mode, intersect -} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/BarChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/BarChartPlugins.cs deleted file mode 100644 index edb91b584..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/BarChartPlugins.cs +++ /dev/null @@ -1,64 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents plugin configuration for a bar chart. -/// -[AddedVersion("1.10.2")] -public class BarChartPlugins : ChartPlugins -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label plugin configuration. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the data label plugin configuration.")] - public BarChartDataLabels Datalabels { get; set; } = new(); - - #endregion -} - -/// -/// Represents the data label plugin configuration for a bar chart. -/// -[AddedVersion("1.10.2")] -public class BarChartDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the label text color. - /// - [AddedVersion("1.10.2")] - [DefaultValue("white")] - [Description("Gets or sets the label text color.")] - public string? Color { get; set; } = "white"; - - /// - /// Gets or sets the font configuration used for labels. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the font configuration used for labels.")] - public BarChartDataLabelsFont Font { get; set; } = new(); - - #endregion -} - -/// -/// Represents the font configuration for bar chart data labels. -/// -[AddedVersion("1.10.2")] -public class BarChartDataLabelsFont -{ - #region Properties, Indexers - - /// - /// Gets or sets the label font weight. - /// - [AddedVersion("1.10.2")] - [DefaultValue("bold")] - [Description("Gets or sets the label font weight.")] - public string? Weight { get; set; } = "bold"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/BubbleChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/BubbleChartPlugins.cs deleted file mode 100644 index 011a025bb..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/BubbleChartPlugins.cs +++ /dev/null @@ -1,80 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents plugin configuration for a bubble chart. -/// -[AddedVersion("4.0.0")] -public class BubbleChartPlugins : ChartPlugins -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label plugin configuration. - /// - [AddedVersion("4.0.0")] - [Description("Gets or sets the data label plugin configuration.")] - public BubbleChartDataLabels Datalabels { get; set; } = new(); - - #endregion -} - -/// -/// Represents the data label plugin configuration for a bubble chart. -/// -[AddedVersion("4.0.0")] -public class BubbleChartDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the label border radius. - /// - [AddedVersion("4.0.0")] - [DefaultValue(4d)] - [Description("Gets or sets the label border radius.")] - public double BorderRadius { get; set; } = 4; - - /// - /// Gets or sets the label text color. - /// - [AddedVersion("4.0.0")] - [DefaultValue("white")] - [Description("Gets or sets the label text color.")] - public string? Color { get; set; } = "white"; - - /// - /// Gets or sets the font configuration used for labels. - /// - [AddedVersion("4.0.0")] - [Description("Gets or sets the font configuration used for labels.")] - public BubbleChartDataLabelsFont Font { get; set; } = new(); - - /// - /// Gets or sets the label padding. - /// - [AddedVersion("4.0.0")] - [DefaultValue(6d)] - [Description("Gets or sets the label padding.")] - public double Padding { get; set; } = 6; - - #endregion -} - -/// -/// Represents the font configuration for bubble chart data labels. -/// -[AddedVersion("4.0.0")] -public class BubbleChartDataLabelsFont -{ - #region Properties, Indexers - - /// - /// Gets or sets the label font weight. - /// - [AddedVersion("4.0.0")] - [DefaultValue("bold")] - [Description("Gets or sets the label font weight.")] - public string? Weight { get; set; } = "bold"; - - #endregion -} \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/ChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/ChartPlugins.cs deleted file mode 100644 index 35dea7214..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/ChartPlugins.cs +++ /dev/null @@ -1,580 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents the shared plugin configuration for a chart. -/// -[AddedVersion("1.10.2")] -public class ChartPlugins -{ - #region Properties, Indexers - - /// - /// The chart legend displays data about the datasets that are appearing on the chart. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the legend configuration.")] - public ChartPluginsLegend Legend { get; set; } = new(); - - /// - /// The chart title defines text to draw at the top of the chart. - /// - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the title configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartPluginsTitle? Title { get; set; } = new(); - - /// - /// Tooltip for the element. - /// - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the tooltip configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartPluginsTooltip? Tooltip { get; set; } - - - - #endregion -} - -/// -/// Represents the legend configuration for a chart. -/// -[AddedVersion("1.10.2")] -public class ChartPluginsLegend -{ - #region Properties, Indexers - - /// - /// Alignment of the legend. Default values is 'center'. Other possible values 'start' and 'end'. - /// - [AddedVersion("1.10.2")] - [DefaultValue("center")] - [Description("Gets or sets the legend alignment.")] - public string? Align { get; set; } = "center"; - - /// - /// Is the legend shown? Default value is 'true'. - /// - [AddedVersion("1.10.2")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether the legend is displayed.")] - public bool Display { get; set; } = true; - - /// - /// If , Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use. - /// - [AddedVersion("1.10.2")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether the legend takes the full chart area in its dimension.")] - public bool FullSize { get; set; } = true; - - /// - /// Label settings for the legend. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend label configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartPluginsLegendLabels? Labels { get; set; } - - /// - /// Maximum height of the legend, in pixels. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the maximum legend height in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? MaxHeight { get; set; } - - /// - /// Maximum width of the legend, in pixels. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the maximum legend width in pixels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? MaxWidth { get; set; } - - /// - /// Position of the legend. Default value is 'top'. Other possible value is 'bottom'. - /// - [AddedVersion("1.10.2")] - [DefaultValue("top")] - [Description("Gets or sets the legend position.")] - public string Position { get; set; } = "top"; - - /// - /// If , the Legend will show datasets in reverse order. - /// - [AddedVersion("1.10.2")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether legend items are rendered in reverse order.")] - public bool Reverse { get; set; } = false; - - /// - /// If , for rendering of the legends will go from right to left. - /// - [AddedVersion("1.10.2")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the legend is rendered right-to-left.")] - public bool Rtl { get; set; } = false; - - /// - /// This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend text direction.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? TextDirection { get; set; } - - /// - /// Title object - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend title configuration.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartPluginsLegendTitle? Title { get; set; } - - #endregion -} - -/// -/// Represents the legend title configuration for a chart. -/// -[AddedVersion("1.10.2")] -public class ChartPluginsLegendTitle -{ - /// - /// Color of the legend. Default value is 'black'. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend title color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// Is the legend title displayed. - /// - [AddedVersion("1.10.2")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether the legend title is displayed.")] - public bool Display { get; set; } = true; - - /// - /// Padding around the title. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the padding around the legend title.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Padding { get; set; } - - /// - /// The string title - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend title text.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Text { get; set; } -} - -/// -/// The chart label settings -/// -/// -[AddedVersion("1.10.2")] -public class ChartPluginsLegendLabels -{ - /// - /// Width of coloured box. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend label box width.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? BoxWidth { get; set; } - - /// - /// Height of the coloured box - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend label box height.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? BoxHeight { get; set; } - - /// - /// Override the borderRadius to use. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend label border radius.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? BorderRadius { get; set; } - - /// - /// Color of label and the strikethrough. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend label color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// Gets or sets the font used for legend labels. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the font used for legend labels.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartFont? Font { get; set; } - - /// - /// Padding between rows of colored boxes. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the padding between legend rows.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Padding { get; set; } - - /// - /// If specified, this style of point is used for the legend. Only used if > is true. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend point style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? PointStyle { get; set; } - - /// - /// If is , the width of the point style used for the legend. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the legend point style width.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? PointStyleWidth { get; set; } - - /// - /// Label borderRadius will match corresponding . - /// - [AddedVersion("1.10.2")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether legend border radii match dataset border radii.")] - public bool UseBorderRadius { get; set; } = false; - - /// - /// If , Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between and -> Size). - /// - [AddedVersion("1.10.2")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether legend labels use the dataset point style.")] - public bool UsePointStyle { get; set; } = false; - -} - -/// -/// The chart title defines text to draw at the top of the chart. -/// -/// -[AddedVersion("1.10.2")] -public class ChartPluginsTitle -{ - #region Properties, Indexers - - /// - /// Alignment of the title. - /// Options are: 'start', 'center', and 'end' - /// - [AddedVersion("1.10.2")] - [DefaultValue("center")] - [Description("Gets or sets the title alignment.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Align { get; set; } = "center"; - /// - /// Color of text. - /// - [AddedVersion("1.10.2")] - [DefaultValue("black")] - [Description("Gets or sets the title text color.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } = "black"; - - /// - /// Is the title shown? - /// - [AddedVersion("1.10.2")] - [DefaultValue(false)] - [Description("Gets or sets a value indicating whether the title is displayed.")] - public bool Display { get; set; } - - /// - /// Gets or sets the font used to render the title. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the font used to render the title.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartFont? Font { get; set; } - - //fullSize - //padding - //position - - /// - /// Gets or sets the title text. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the title text.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Text { get; set; } - - #endregion -} - -/// -/// Tooltip for bubble, doughnut, pie, polar area, and scatter charts -/// -/// -[AddedVersion("1.10.2")] -public class ChartPluginsTooltip -{ - #region Properties, Indexers - - /// - /// Background color of the tooltip. - /// - [AddedVersion("1.10.2")] - [DefaultValue("rgba(0, 0, 0, 0.8)")] - [Description("Gets or sets the tooltip background color.")] - public string BackgroundColor { get; set; } = "rgba(0, 0, 0, 0.8)"; - - /// - /// Horizontal alignment of the body text lines. left/right/center. - /// - [AddedVersion("1.10.2")] - [DefaultValue("left")] - [Description("Gets or sets the tooltip body text alignment.")] - public string BodyAlign { get; set; } = "left"; - - /// - /// Color of body text. - /// - [AddedVersion("1.10.2")] - [DefaultValue("#fff")] - [Description("Gets or sets the tooltip body text color.")] - public string BodyColor { get; set; } = "#fff"; - - /// - /// Gets or sets the font used for tooltip body text. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the font used for tooltip body text.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartPluginsTooltipFont? BodyFont { get; set; } - - /// - /// Spacing to add to top and bottom of each tooltip item. - /// - [AddedVersion("1.10.2")] - [DefaultValue(2)] - [Description("Gets or sets the spacing around tooltip body items.")] - public int BodySpacing { get; set; } = 2; - - /// - /// Extra distance to move the end of the tooltip arrow away from the tooltip point. - /// - [AddedVersion("1.10.2")] - [DefaultValue(2)] - [Description("Gets or sets the tooltip caret padding.")] - public int CaretPadding { get; set; } = 2; - - /// - /// Size, in px, of the tooltip arrow. - /// - [AddedVersion("1.10.2")] - [DefaultValue(5)] - [Description("Gets or sets the tooltip caret size in pixels.")] - public int CaretSize { get; set; } = 5; - - /// - /// If , color boxes are shown in the tooltip. - /// - [AddedVersion("1.10.2")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether color boxes are shown in the tooltip.")] - public bool DisplayColors { get; set; } = true; - - /// - /// Are on-canvas tooltips enabled? - /// - [AddedVersion("1.10.2")] - [DefaultValue(true)] - [Description("Gets or sets a value indicating whether on-canvas tooltips are enabled.")] - public bool Enabled { get; set; } = true; - - /// - /// Horizontal alignment of the footer text lines. left/right/center. - /// - [AddedVersion("1.10.2")] - [DefaultValue("left")] - [Description("Gets or sets the tooltip footer text alignment.")] - public string FooterAlign { get; set; } = "left"; - - /// - /// Color of footer text. - /// - [AddedVersion("1.10.2")] - [DefaultValue("#fff")] - [Description("Gets or sets the tooltip footer text color.")] - public string FooterColor { get; set; } = "#fff"; - - /// - /// Gets or sets the font used for tooltip footer text. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the font used for tooltip footer text.")] - public ChartPluginsTooltipFont FooterFont { get; set; } = new(); - - /// - /// Margin to add before drawing the footer. - /// - [AddedVersion("1.10.2")] - [DefaultValue(6)] - [Description("Gets or sets the tooltip footer top margin.")] - public int FooterMarginTop { get; set; } = 6; - - /// - /// Spacing to add to top and bottom of each footer line. - /// - [AddedVersion("1.10.2")] - [DefaultValue(2)] - [Description("Gets or sets the spacing around tooltip footer lines.")] - public int FooterSpacing { get; set; } = 2; - - /// - /// Horizontal alignment of the title text lines. left/right/center. - /// - [AddedVersion("1.10.2")] - [DefaultValue("left")] - [Description("Gets or sets the tooltip title text alignment.")] - public string TitleAlign { get; set; } = "left"; - - /// - /// Color of title text. - /// - [AddedVersion("1.10.2")] - [DefaultValue("#fff")] - [Description("Gets or sets the tooltip title text color.")] - public string TitleColor { get; set; } = "#fff"; - - /// - /// Gets or sets the font used for tooltip title text. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the font used for tooltip title text.")] - public ChartPluginsTooltipFont TitleFont { get; set; } = new(); - - /// - /// Margin to add on bottom of title section. - /// - [AddedVersion("1.10.2")] - [DefaultValue(6)] - [Description("Gets or sets the tooltip title bottom margin.")] - public int TitleMarginBottom { get; set; } = 6; - - /// - /// Spacing to add to top and bottom of each title line. - /// - [AddedVersion("1.10.2")] - [DefaultValue(2)] - [Description("Gets or sets the spacing around tooltip title lines.")] - public int TitleSpacing { get; set; } = 2; - - /// - /// Position of the tooltip caret in the X direction. left/center/right. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the tooltip caret x-axis alignment.")] - public string? XAlign { get; set; } - - /// - /// Position of the tooltip caret in the Y direction. top/center/bottom. - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the tooltip caret y-axis alignment.")] - public string? YAlign { get; set; } - - #endregion -} - -/// -/// -/// -[AddedVersion("1.10.2")] -public class ChartPluginsTooltipFont -{ - #region Properties, Indexers - - /// - /// Default font family for all text, follows CSS font-family options. - /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the tooltip font family.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Family { get; set; } - - /// - /// Height of an individual line of text - /// - /// - [AddedVersion("1.10.2")] - [DefaultValue(1.2d)] - [Description("Gets or sets the tooltip font line height.")] - public double LineHeight { get; set; } = 1.2; - - /// - /// Default font size (in px) for text. Does not apply to radialLinear scale point labels. - /// - [AddedVersion("1.10.2")] - [DefaultValue(12)] - [Description("Gets or sets the tooltip font size in pixels.")] - public int Size { get; set; } = 12; - - /// - /// Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. - /// Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). - /// - [AddedVersion("1.10.2")] - [DefaultValue(null)] - [Description("Gets or sets the tooltip font style.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Style { get; set; } - - /// - /// Default font weight (boldness). - /// - /// - [AddedVersion("1.10.2")] - [DefaultValue("bold")] - [Description("Gets or sets the tooltip font weight.")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Weight { get; set; } = "bold"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/DoughnutChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/DoughnutChartPlugins.cs deleted file mode 100644 index d9d5ab88b..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/DoughnutChartPlugins.cs +++ /dev/null @@ -1,96 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents plugin configuration for a doughnut chart. -/// -[AddedVersion("1.10.2")] -public class DoughnutChartPlugins : ChartPlugins -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label plugin configuration. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the data label plugin configuration.")] - public DoughnutChartDataLabels Datalabels { get; set; } = new(); - - #endregion -} - -/// -/// Represents the data label plugin configuration for a doughnut chart. -/// -[AddedVersion("1.10.2")] -public class DoughnutChartDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the label border color. - /// - [AddedVersion("1.10.2")] - [DefaultValue("white")] - [Description("Gets or sets the label border color.")] - public string? BorderColor { get; set; } = "white"; - - /// - /// Gets or sets the label border radius. - /// - [AddedVersion("1.10.2")] - [DefaultValue(25d)] - [Description("Gets or sets the label border radius.")] - public double BorderRadius { get; set; } = 25; - - /// - /// Gets or sets the label border width. - /// - [AddedVersion("1.10.2")] - [DefaultValue(2d)] - [Description("Gets or sets the label border width.")] - public double BorderWidth { get; set; } = 2; - - /// - /// Gets or sets the label text color. - /// - [AddedVersion("1.10.2")] - [DefaultValue("white")] - [Description("Gets or sets the label text color.")] - public string? Color { get; set; } = "white"; - - /// - /// Gets or sets the font configuration used for labels. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the font configuration used for labels.")] - public DoughnutChartDataLabelsFont Font { get; set; } = new(); - - /// - /// Gets or sets the label padding. - /// - [AddedVersion("1.10.2")] - [DefaultValue(6d)] - [Description("Gets or sets the label padding.")] - public double Padding { get; set; } = 6; - - #endregion -} - -/// -/// Represents the font configuration for doughnut chart data labels. -/// -[AddedVersion("1.10.2")] -public class DoughnutChartDataLabelsFont -{ - #region Properties, Indexers - - /// - /// Gets or sets the label font weight. - /// - [AddedVersion("1.10.2")] - [DefaultValue("bold")] - [Description("Gets or sets the label font weight.")] - public string? Weight { get; set; } = "bold"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/LineChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/LineChartPlugins.cs deleted file mode 100644 index 8db6e036c..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/LineChartPlugins.cs +++ /dev/null @@ -1,80 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents plugin configuration for a line chart. -/// -[AddedVersion("1.10.2")] -public class LineChartPlugins : ChartPlugins -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label plugin configuration. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the data label plugin configuration.")] - public LineChartDataLabels Datalabels { get; set; } = new(); - - #endregion -} - -/// -/// Represents the data label plugin configuration for a line chart. -/// -[AddedVersion("1.10.2")] -public class LineChartDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the label border radius. - /// - [AddedVersion("1.10.2")] - [DefaultValue(4d)] - [Description("Gets or sets the label border radius.")] - public double BorderRadius { get; set; } = 4; - - /// - /// Gets or sets the label text color. - /// - [AddedVersion("1.10.2")] - [DefaultValue("white")] - [Description("Gets or sets the label text color.")] - public string? Color { get; set; } = "white"; - - /// - /// Gets or sets the font configuration used for labels. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the font configuration used for labels.")] - public LineChartDataLabelsFont Font { get; set; } = new(); - - /// - /// Gets or sets the label padding. - /// - [AddedVersion("1.10.2")] - [DefaultValue(6d)] - [Description("Gets or sets the label padding.")] - public double Padding { get; set; } = 6; - - #endregion -} - -/// -/// Represents the font configuration for line chart data labels. -/// -[AddedVersion("1.10.2")] -public class LineChartDataLabelsFont -{ - #region Properties, Indexers - - /// - /// Gets or sets the label font weight. - /// - [AddedVersion("1.10.2")] - [DefaultValue("bold")] - [Description("Gets or sets the label font weight.")] - public string? Weight { get; set; } = "bold"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/PieChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/PieChartPlugins.cs deleted file mode 100644 index d973200bb..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/PieChartPlugins.cs +++ /dev/null @@ -1,96 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents plugin configuration for a pie chart. -/// -[AddedVersion("1.10.2")] -public class PieChartPlugins : ChartPlugins -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label plugin configuration. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the data label plugin configuration.")] - public PieChartDataLabels Datalabels { get; set; } = new(); - - #endregion -} - -/// -/// Represents the data label plugin configuration for a pie chart. -/// -[AddedVersion("1.10.2")] -public class PieChartDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the label border color. - /// - [AddedVersion("1.10.2")] - [DefaultValue("white")] - [Description("Gets or sets the label border color.")] - public string? BorderColor { get; set; } = "white"; - - /// - /// Gets or sets the label border radius. - /// - [AddedVersion("1.10.2")] - [DefaultValue(25d)] - [Description("Gets or sets the label border radius.")] - public double BorderRadius { get; set; } = 25; - - /// - /// Gets or sets the label border width. - /// - [AddedVersion("1.10.2")] - [DefaultValue(2d)] - [Description("Gets or sets the label border width.")] - public double BorderWidth { get; set; } = 2; - - /// - /// Gets or sets the label text color. - /// - [AddedVersion("1.10.2")] - [DefaultValue("white")] - [Description("Gets or sets the label text color.")] - public string? Color { get; set; } = "white"; - - /// - /// Gets or sets the font configuration used for labels. - /// - [AddedVersion("1.10.2")] - [Description("Gets or sets the font configuration used for labels.")] - public PieChartDataLabelsFont Font { get; set; } = new(); - - /// - /// Gets or sets the label padding. - /// - [AddedVersion("1.10.2")] - [DefaultValue(6d)] - [Description("Gets or sets the label padding.")] - public double Padding { get; set; } = 6; - - #endregion -} - -/// -/// Represents the font configuration for pie chart data labels. -/// -[AddedVersion("1.10.2")] -public class PieChartDataLabelsFont -{ - #region Properties, Indexers - - /// - /// Gets or sets the label font weight. - /// - [AddedVersion("1.10.2")] - [DefaultValue("bold")] - [Description("Gets or sets the label font weight.")] - public string? Weight { get; set; } = "bold"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/PolarAreaChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/PolarAreaChartPlugins.cs deleted file mode 100644 index c8c1851c5..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/PolarAreaChartPlugins.cs +++ /dev/null @@ -1,96 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents plugin configuration for a polar area chart. -/// -[AddedVersion("3.0.0")] -public class PolarAreaChartPlugins : ChartPlugins -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label plugin configuration. - /// - [AddedVersion("3.0.0")] - [Description("Gets or sets the data label plugin configuration.")] - public PolarAreaChartDataLabels Datalabels { get; set; } = new(); - - #endregion -} - -/// -/// Represents the data label plugin configuration for a polar area chart. -/// -[AddedVersion("3.0.0")] -public class PolarAreaChartDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the label border color. - /// - [AddedVersion("3.0.0")] - [DefaultValue("white")] - [Description("Gets or sets the label border color.")] - public string? BorderColor { get; set; } = "white"; - - /// - /// Gets or sets the label border radius. - /// - [AddedVersion("3.0.0")] - [DefaultValue(25d)] - [Description("Gets or sets the label border radius.")] - public double BorderRadius { get; set; } = 25; - - /// - /// Gets or sets the label border width. - /// - [AddedVersion("3.0.0")] - [DefaultValue(2d)] - [Description("Gets or sets the label border width.")] - public double BorderWidth { get; set; } = 2; - - /// - /// Gets or sets the label text color. - /// - [AddedVersion("3.0.0")] - [DefaultValue("white")] - [Description("Gets or sets the label text color.")] - public string? Color { get; set; } = "white"; - - /// - /// Gets or sets the font configuration used for labels. - /// - [AddedVersion("3.0.0")] - [Description("Gets or sets the font configuration used for labels.")] - public PolarAreaChartDataLabelsFont Font { get; set; } = new(); - - /// - /// Gets or sets the label padding. - /// - [AddedVersion("3.0.0")] - [DefaultValue(6d)] - [Description("Gets or sets the label padding.")] - public double Padding { get; set; } = 6; - - #endregion -} - -/// -/// Represents the font configuration for polar area chart data labels. -/// -[AddedVersion("3.0.0")] -public class PolarAreaChartDataLabelsFont -{ - #region Properties, Indexers - - /// - /// Gets or sets the label font weight. - /// - [AddedVersion("3.0.0")] - [DefaultValue("bold")] - [Description("Gets or sets the label font weight.")] - public string? Weight { get; set; } = "bold"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartPlugins/ScatterChartPlugins.cs b/blazorbootstrap/Models/Charts/ChartPlugins/ScatterChartPlugins.cs deleted file mode 100644 index 1015db15a..000000000 --- a/blazorbootstrap/Models/Charts/ChartPlugins/ScatterChartPlugins.cs +++ /dev/null @@ -1,80 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents plugin configuration for a scatter chart. -/// -[AddedVersion("3.0.0")] -public class ScatterChartPlugins : ChartPlugins -{ - #region Properties, Indexers - - /// - /// Gets or sets the data label plugin configuration. - /// - [AddedVersion("3.0.0")] - [Description("Gets or sets the data label plugin configuration.")] - public ScatterChartDataLabels Datalabels { get; set; } = new(); - - #endregion -} - -/// -/// Represents the data label plugin configuration for a scatter chart. -/// -[AddedVersion("3.0.0")] -public class ScatterChartDataLabels -{ - #region Properties, Indexers - - /// - /// Gets or sets the label border radius. - /// - [AddedVersion("3.0.0")] - [DefaultValue(4d)] - [Description("Gets or sets the label border radius.")] - public double BorderRadius { get; set; } = 4; - - /// - /// Gets or sets the label text color. - /// - [AddedVersion("3.0.0")] - [DefaultValue("white")] - [Description("Gets or sets the label text color.")] - public string? Color { get; set; } = "white"; - - /// - /// Gets or sets the font configuration used for labels. - /// - [AddedVersion("3.0.0")] - [Description("Gets or sets the font configuration used for labels.")] - public ScatterChartDataLabelsFont Font { get; set; } = new(); - - /// - /// Gets or sets the label padding. - /// - [AddedVersion("3.0.0")] - [DefaultValue(6d)] - [Description("Gets or sets the label padding.")] - public double Padding { get; set; } = 6; - - #endregion -} - -/// -/// Represents the font configuration for scatter chart data labels. -/// -[AddedVersion("3.0.0")] -public class ScatterChartDataLabelsFont -{ - #region Properties, Indexers - - /// - /// Gets or sets the label font weight. - /// - [AddedVersion("3.0.0")] - [DefaultValue("bold")] - [Description("Gets or sets the label font weight.")] - public string? Weight { get; set; } = "bold"; - - #endregion -} diff --git a/blazorbootstrap/Models/Charts/ChartRGB.cs b/blazorbootstrap/Models/Charts/ChartRGB.cs deleted file mode 100644 index 28121e18b..000000000 --- a/blazorbootstrap/Models/Charts/ChartRGB.cs +++ /dev/null @@ -1,10 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents an RGB color value. -/// -/// The red channel value. -/// The green channel value. -/// The blue channel value. -[AddedVersion("1.0.0")] -public record ChartRGB(int R, int G, int B); diff --git a/blazorbootstrap/Models/Charts/ChartRGBA.cs b/blazorbootstrap/Models/Charts/ChartRGBA.cs deleted file mode 100644 index 274dc4da2..000000000 --- a/blazorbootstrap/Models/Charts/ChartRGBA.cs +++ /dev/null @@ -1,11 +0,0 @@ -namespace BlazorBootstrap; - -/// -/// Represents an RGBA color value. -/// -/// The red channel value. -/// The green channel value. -/// The blue channel value. -/// The alpha channel value. -[AddedVersion("1.0.0")] -public record ChartRGBA(int R, int G, int B, double A); diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index f2c3d6714..8e2b81845 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -1,43 +1,7 @@ -if (!window.blazorBootstrap) { +if (!window.blazorBootstrap) { window.blazorBootstrap = {}; } -if (!window.blazorChart) { - window.blazorChart = {}; -} - -if (!window.blazorChart.line) { - window.blazorChart.line = {}; -} - -if (!window.blazorChart.bar) { - window.blazorChart.bar = {}; -} - -if (!window.blazorChart.bubble) { - window.blazorChart.bubble = {}; -} - -if (!window.blazorChart.doughnut) { - window.blazorChart.doughnut = {}; -} - -if (!window.blazorChart.pie) { - window.blazorChart.pie = {}; -} - -if (!window.blazorChart.polarArea) { - window.blazorChart.polarArea = {}; -} - -if (!window.blazorChart.radar) { - window.blazorChart.radar = {}; -} - -if (!window.blazorChart.scatter) { - window.blazorChart.scatter = {}; -} - window.blazorBootstrap = { de: { DELETE: 46, @@ -1254,1239 +1218,3 @@ window.blazorBootstrap = { } } } - -window.blazorChart = { - setOnClickHandler: (options, dotNetHelper) => { - if (!options || !dotNetHelper) - return; - - const onClick = options.onClick; - - options.onClick = function (event, activeElements, chart) { - if (typeof onClick === 'function') - onClick.call(this, event, activeElements, chart); - - if (!activeElements || activeElements.length === 0 || !chart) - return; - - const activeElement = activeElements[0]; - const datasetIndex = activeElement.datasetIndex; - const index = activeElement.index; - const dataset = chart.data?.datasets?.[datasetIndex]; - const label = chart.data?.labels?.[index] ?? null; - const value = dataset?.data?.[index] ?? null; - - dotNetHelper.invokeMethodAsync('HandleClickAsync', { - datasetIndex: datasetIndex, - datasetLabel: dataset?.label ?? null, - index: index, - label: label, - value: value - }).catch(() => { }); - }; - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - } - } - - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.get(elementId); - if (chart) return; - else - window.blazorChart.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} - -window.blazorChart.bar = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - } - } - - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.bar.get(elementId); - if (chart) return; - else - window.blazorChart.bar.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.bar.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.bar.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.line.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} - -window.blazorChart.bubble = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - } - - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.bubble.get(elementId); - if (chart) return; - else - window.blazorChart.bubble.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.bubble.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.bubble.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - } -} - -window.blazorChart.doughnut = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - chartData.datasets[datasetIndex].backgroundColor.push(chartDatasetData.backgroundColor); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - } - - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.doughnut.get(elementId); - if (chart) return; - else - window.blazorChart.doughnut.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.doughnut.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.doughnut.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.doughnut.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} - -window.blazorChart.line = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - } - - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - if (type === 'line') { - // tooltipLine block - const tooltipLine = { - id: 'tooltipLine', - beforeDraw: chart => { - if (chart.tooltip?._active && chart.tooltip?._active.length) { - const ctx = chart.ctx; - ctx.save(); - const activePoint = chart.tooltip._active[0]; - - ctx.beginPath(); - ctx.setLineDash([5, 5]); - ctx.moveTo(activePoint.element.x, chart.chartArea.top); - ctx.lineTo(activePoint.element.x, activePoint.element.y); - ctx.lineWidth = 2; - ctx.strokeStyle = 'grey'; - ctx.stroke(); - - ctx.beginPath(); - ctx.moveTo(activePoint.element.x, activePoint.element.y); - ctx.lineTo(activePoint.element.x, chart.chartArea.bottom); - ctx.lineWidth = 2; - ctx.strokeStyle = 'grey'; - ctx.stroke(); - - ctx.restore(); - } - }, - }; - - config.plugins.push(tooltipLine); - } - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.line.get(elementId); - if (chart) - return; - else - window.blazorChart.line.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.line.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.line.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.line.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} - -window.blazorChart.pie = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - chartData.datasets[datasetIndex].backgroundColor.push(chartDatasetData.backgroundColor); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - } - - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.pie.get(elementId); - if (chart) return; - else - window.blazorChart.pie.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.pie.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.pie.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.pie.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} - -window.blazorChart.polarArea = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - chartData.datasets[datasetIndex].backgroundColor.push(chartDatasetData.backgroundColor); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - } - - // https://www.chartjs.org/docs/latest/configuration/#configuration-object-structure - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.polarArea.get(elementId); - if (chart) return; - else - window.blazorChart.polarArea.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.polarArea.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.polarArea.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.polarArea.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} - -window.blazorChart.radar = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - } - - // https://www.chartjs.org/docs/latest/configuration/#configuration-object-structure - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.radar.get(elementId); - if (chart) return; - else - window.blazorChart.radar.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.radar.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.radar.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.radar.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} - -window.blazorChart.scatter = { - addDatasetData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - const chartData = chart.data; - const chartDatasetData = data; - - if (!chartData.labels.includes(dataLabel)) - chartData.labels.push(dataLabel); - - const chartDatasets = chartData.datasets; - - if (chartDatasets.length > 0) { - let datasetIndex = chartDatasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - if (datasetIndex > -1) { - chartDatasets[datasetIndex].data.push(chartDatasetData.data); - chart.update(); - } - } - } - }, - addDatasetsData: (elementId, dataLabel, data) => { - let chart = window.blazorChart.get(elementId); - if (chart && data) { - const chartData = chart.data; - - if (!chartData.labels.includes(dataLabel)) { - chartData.labels.push(dataLabel); - - if (chartData.datasets.length > 0 && chartData.datasets.length === data.length) { - data.forEach(chartDatasetData => { - let datasetIndex = chartData.datasets.findIndex(dataset => dataset.label === chartDatasetData.datasetLabel); - chartData.datasets[datasetIndex].data.push(chartDatasetData.data); - }); - chart.update(); - } - } - } - }, - addDataset: (elementId, newDataset) => { - let chart = window.blazorChart.get(elementId); - if (chart) { - chart.data.datasets.push(newDataset); - chart.update(); - } - }, - create: (elementId, type, data, options, plugins, dotNetHelper) => { - let chartEl = document.getElementById(elementId); - let _plugins = []; - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - if (plugins && plugins.length > 0) { - // register `ChartDataLabels` plugin - if (plugins.includes('ChartDataLabels')) { - _plugins.push(ChartDataLabels); - - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - } - - // https://www.chartjs.org/docs/latest/configuration/#configuration-object-structure - const config = { - type: type, - data: data, - options: options, - plugins: _plugins - }; - - const chart = new Chart( - chartEl, - config - ); - }, - get: (elementId) => { - let chart; - Chart.helpers.each(Chart.instances, function (instance) { - if (instance && instance.canvas && instance.canvas.id === elementId) { - chart = instance; - } - }); - - return chart; - }, - initialize: (elementId, type, data, options, plugins, dotNetHelper) => { - let chart = window.blazorChart.scatter.get(elementId); - if (chart) return; - else - window.blazorChart.scatter.create(elementId, type, data, options, plugins, dotNetHelper); - }, - resize: (elementId, width, height) => { - let chart = window.blazorChart.scatter.get(elementId); - if (chart) { - chart.canvas.parentNode.style.height = height; - chart.canvas.parentNode.style.width = width; - } - }, - update: (elementId, type, data, options, dotNetHelper) => { - let chart = window.blazorChart.scatter.get(elementId); - if (chart) { - if (chart.config.plugins && chart.config.plugins.findIndex(x => x.id == 'datalabels') > -1) { - // set datalabel background color - options.plugins.datalabels.backgroundColor = function (context) { - return context.dataset.backgroundColor; - }; - } - - window.blazorChart.setOnClickHandler(options, dotNetHelper); - - chart.data = data; - chart.options = options; - chart.update(); - } - else { - console.warn(`The chart is not initialized. Initialize it and then call update.`); - } - }, - updateDataValues: (elementId, data) => { - let chart = window.blazorChart.scatter.get(elementId); - if (chart) { - chart.data.datasets.splice(data.datasets.length); - - for (var datasetIndex = 0; datasetIndex < chart.data.datasets.length; ++datasetIndex) { - chart.data.datasets[datasetIndex].data = data.datasets[datasetIndex].data; - chart.data.labels = data.labels; - } - - for (var datasetIndex = chart.data.datasets.length; datasetIndex < data.datasets.length; ++datasetIndex) { - chart.data.datasets.push(data.datasets[datasetIndex]); - } - - chart.update(); - } - } -} diff --git a/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx b/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx index b510b18bf..3badd3cc5 100644 --- a/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx +++ b/docs/docs/01-getting-started/01-a-getting-started-webassembly-NET-8.mdx @@ -37,18 +37,11 @@ Insert the following references into the **body** section of the **wwwroot/index ``` js showLineNumbers - - - - ``` -:::tip -The **chart.js** reference is optional. Include it only when the **Chart** components are used in the application. -::: ## Register services @@ -120,10 +113,6 @@ The default Blazor template includes demonstration code and Bootstrap. To remove - - - - diff --git a/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx b/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx index 2ad1cbf66..ca420b835 100644 --- a/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx +++ b/docs/docs/01-getting-started/01-b-getting-started-webapp-server-global-NET-8.mdx @@ -37,18 +37,11 @@ Insert the following references into the **body** section of the **Components/Ap ``` js showLineNumbers - - - - ``` -:::tip -**chart.js** reference is optional. Add when the **Chart** components are used in the application. -::: ## Register services @@ -109,10 +102,6 @@ The default Blazor template includes demonstration code and Bootstrap. To remove - - - - diff --git a/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx b/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx index 84cb6de3b..aa764d874 100644 --- a/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx +++ b/docs/docs/01-getting-started/01-c-getting-started-webapp-auto-global-NET-8.mdx @@ -39,18 +39,11 @@ Insert the following references into the **body** section of the **Components/Ap ``` js showLineNumbers - - - - ``` -:::tip -**chart.js** reference is optional. Add when the **Chart** components are used in the application. -::: ### Register services @@ -135,10 +128,6 @@ Register tag helpers in **_Imports.razor** - - - - diff --git a/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx b/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx index 2a70104cf..2a5a42d58 100644 --- a/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx +++ b/docs/docs/01-getting-started/01-d-getting-started-maui-blazor-NET-8.mdx @@ -37,18 +37,11 @@ Insert the following references into the **body** section of the **wwwroot/index ``` js showLineNumbers - - - - ``` -:::tip -**chart.js** reference is optional. Add when the **Chart** components are used in the application. -::: ## Register services diff --git a/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx b/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx index a52fc9529..4fa4f6a3b 100644 --- a/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx +++ b/docs/docs/01-getting-started/02-a-getting-started-webassembly-NET-7.mdx @@ -46,18 +46,11 @@ Insert the following references into the **body** section of the **wwwroot/index ``` js showLineNumbers - - - - ``` -:::tip -The **chart.js** reference is optional. Include it only when the **Chart** components are used in the application. -::: ## Register services @@ -138,7 +131,6 @@ The default Blazor template includes demonstration code, icons, and Bootstrap. T - diff --git a/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx b/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx index 0960722fc..621cd512e 100644 --- a/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx +++ b/docs/docs/01-getting-started/02-b-getting-started-server-NET-7.mdx @@ -46,18 +46,11 @@ Insert the following references into the **body** section of the **Pages/_Host.c ``` js showLineNumbers - - - - ``` -:::tip -**chart.js** reference is optional. Add when the **Chart** components are used in the application. -::: ## Register services @@ -140,10 +133,6 @@ The default Blazor template includes demonstration code, icons, and Bootstrap. T - - - - diff --git a/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx b/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx index 3be2b0ba3..b6f3bc98a 100644 --- a/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx +++ b/docs/docs/01-getting-started/02-c-getting-started-maui-blazor-NET-7.mdx @@ -37,18 +37,11 @@ Insert the following references into the **body** section of the **wwwroot/index ``` js showLineNumbers - - - - ``` -:::tip -**chart.js** reference is optional. Add when the **Chart** components are used in the application. -::: ## Register services diff --git a/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx b/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx index a5eda7d05..c1e5611f8 100644 --- a/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx +++ b/docs/docs/01-getting-started/03-a-getting-started-webassembly-NET-6.mdx @@ -46,18 +46,11 @@ Insert the following references into the **body** section of the **wwwroot/index ``` js showLineNumbers - - - - ``` -:::tip -The **chart.js** reference is optional. Include it only when the **Chart** components are used in the application. -::: ## Register services @@ -131,7 +124,6 @@ The default Blazor template includes demonstration code, icons, and Bootstrap. T - diff --git a/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx b/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx index 3a5fdf3fc..2a2643d9e 100644 --- a/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx +++ b/docs/docs/01-getting-started/03-b-getting-started-server-NET-6.mdx @@ -50,18 +50,11 @@ Insert the following references into the **body** section of the **Pages/_Layout ``` js showLineNumbers - - - - ``` -:::tip -**chart.js** reference is optional. Add when the **Chart** components are used in the application. -::: ## Register services @@ -142,7 +135,6 @@ The default Blazor template includes demonstration code, icons, and Bootstrap. T - diff --git a/docs/docs/05-components/charts.mdx b/docs/docs/05-components/charts.mdx index 21d04e48a..7e7dd47f7 100644 --- a/docs/docs/05-components/charts.mdx +++ b/docs/docs/05-components/charts.mdx @@ -1,6 +1,6 @@ ---- -title: Blazor Chart Components -description: Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. +--- +title: Blazor Charts with BlazorExpress.ChartJS +description: BlazorBootstrap chart components have moved to the dedicated BlazorExpress.ChartJS package. Follow this migration and setup guide for Chart.js components. image: https://i.imgur.com/ATtFiUZ.png sidebar_label: Charts @@ -9,94 +9,63 @@ sidebar_position: 8 import CarbonAd from '/carbon-ad.mdx' -# Blazor Charts +# Blazor Charts with BlazorExpress.ChartJS -Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. +Chart components are no longer included in the **BlazorBootstrap** package. They are developed and released separately as [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/), a dedicated Blazor component library built on Chart.js. -## Example - -Blazor Chart Component - Blazor Bar Chart Example -
-Blazor Chart Component - Blazor Line Chart Example -
-See blazor chart demo here. - -## Chart Types - -At this moment we are supporting eight blazor chart types. -1. Bar Chart -1. Bubble Chart -1. Doughnut Chart -1. Line Chart -1. Pie Chart -1. Polar Area Chart -1. Radar Chart -1. Scatter Chart - -:::info -**Bubble Chart** is now available, and **Bar Chart** and **Line Chart** support mixed bar/line datasets. +:::warning Breaking change +When upgrading from a BlazorBootstrap version that included charts, add the `BlazorExpress.ChartJS` package and namespace, add its browser scripts, and update chart code to the dedicated package API. Remove references to the former BlazorBootstrap chart types and `window.blazorChart` interop. ::: -## Bar Chart +## Install the package -Blazor Chart Component - Blazor Bar Chart -
-See blazor bar chart demo here. -
-See blazor bar chart full documentation here. +```shell +dotnet add package BlazorExpress.ChartJS --version 1.2.4 +``` -## Doughnut Chart +Add the namespace to the `_Imports.razor` used by your chart pages: -Blazor Chart Component - Blazor Doughnut Chart -
-See blazor doughnut chart demo here. -
-See blazor doughnut chart full documentation here. +```razor +@using BlazorExpress.ChartJS +``` -## Bubble Chart +## Add browser scripts -See blazor bubble chart demo here. -
-See blazor bubble chart full documentation here. +Load these scripts from the host page after the Blazor framework script and in the order shown. The data-labels plugin is needed only by charts that use data labels. -## Line Chart +```html + + + +``` -Blazor Chart Component - Blazor Line Chart -
-See blazor line chart demo here. -
-See blazor line chart full documentation here. +## Documentation and original demos -## Pie Chart +Use the dedicated project as the source of truth for current chart APIs and examples: -Blazor Chart Component - Blazor Pie Chart -
-See blazor pie chart demo here. -
-See blazor pie chart full documentation here. +- [BlazorExpress.ChartJS website and documentation](https://chartjs.blazorexpress.com/) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) +- [Original BlazorExpress.ChartJS demos](https://chartjs.blazorexpress.com/demos/bar-chart) -## Polar Area Chart +We recommend checking the original demos before adapting advanced examples. -Blazor Chart Component - Blazor Polar Area Chart -
-See blazor polar area chart demo here. -
-See blazor polar area chart full documentation here. +## Click events in 1.2.4 -## Radar Chart +BlazorExpress.ChartJS 1.2.4 adds chart item click callbacks for every supported chart family. Set the package-provided `OnClick` callback to receive `ChartClickEventArgs`, which includes the selected dataset index and label, data-item index and label, and raw selected value. -Blazor Chart Component - Blazor Radar Chart -
-See blazor radar chart demo here. -
-See blazor radar chart full documentation here. +Use the official documentation and original demos below for the current click-event examples and API details. -## Scatter Chart +## Chart types -Blazor Chart Component - Blazor Scatter Chart -
-See blazor scatter chart demo here. -
-See blazor scatter chart full documentation here. +| Chart | Official documentation | Original demo | +|:--|:--|:--| +| Bar | [Documentation](https://chartjs.blazorexpress.com/docs/bar-chart) | [Demo](https://chartjs.blazorexpress.com/demos/bar-chart) | +| Bubble | [Documentation](https://chartjs.blazorexpress.com/docs/bubble-chart) | [Demo](https://chartjs.blazorexpress.com/demos/bubble-chart) | +| Doughnut | [Documentation](https://chartjs.blazorexpress.com/docs/doughnut-chart) | [Demo](https://chartjs.blazorexpress.com/demos/doughnut-chart) | +| Line | [Documentation](https://chartjs.blazorexpress.com/docs/line-chart) | [Demo](https://chartjs.blazorexpress.com/demos/line-chart) | +| Pie | [Documentation](https://chartjs.blazorexpress.com/docs/pie-chart) | [Demo](https://chartjs.blazorexpress.com/demos/pie-chart) | +| Polar Area | [Documentation](https://chartjs.blazorexpress.com/docs/polar-area-chart) | [Demo](https://chartjs.blazorexpress.com/demos/polar-area-chart) | +| Radar | [Documentation](https://chartjs.blazorexpress.com/docs/radar-chart) | [Demo](https://chartjs.blazorexpress.com/demos/radar-chart) | +| Scatter | [Documentation](https://chartjs.blazorexpress.com/docs/scatter-chart) | [Demo](https://chartjs.blazorexpress.com/demos/scatter-chart) | diff --git a/docs/docs/06-data-visualization/bar-chart.mdx b/docs/docs/06-data-visualization/bar-chart.mdx index 143c240c1..4ef534afd 100644 --- a/docs/docs/06-data-visualization/bar-chart.mdx +++ b/docs/docs/06-data-visualization/bar-chart.mdx @@ -1,6 +1,6 @@ ---- -title: Blazor Bar Chart Component -description: A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side. +--- +title: Blazor Bar Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor bar chart component, documentation, and original demos. image: https://i.imgur.com/IX3bajc.png sidebar_label: Bar Chart @@ -9,703 +9,22 @@ sidebar_position: 1 import CarbonAd from '/carbon-ad.mdx' -# Blazor Bar Chart +# Blazor Bar Chart with BlazorExpress.ChartJS -A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. -It is sometimes used to show trend data and to compare multiple data sets side by side. +The **Bar Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -Blazor Chart Component - Blazor Bar Chart - -## Parameters - -| Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Height | `int?` | null | | Gets or sets chart container height. | 1.0.0 | -| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets chart container height unit of measure. | 1.0.0 | -| Width | `int?` | null | | Gets or sets chart container width. | 1.0.0 | -| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets chart container width unit of measure. | 1.0.0 | - -## Methods - -| Name | Return type | Description | Added / Modified Version | -|:--|:--|:--|:--| -| AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) | `Task` | Adds data to chart. | 1.10.0 | -| AddDataAsync(ChartData chartData, string dataLabel, `List` data) | `Task` | Adds dataset to chart. | 1.10.0 | -| AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) | `Task` | Adds dataset to chart. | 1.10.0 || InitializeAsync | Task | Initialize Bar Chart. | 1.0.0 | -| InitializeAsync(ChartData chartData, IChartOptions chartOptions, `string[]?` plugins = null) | Task | Initialize the chat. | 1.0.0 | -| ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) | Task | Resize the chart. | 1.0.0 | -| UpdateAsync(ChartData chartData, IChartOptions chartOptions) | Task | Update the chart. | 1.0.0 | - -## ChartData Members - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Datasets | `List?` | null | ✔️ | Gets or sets the Datasets. | 1.0.0 | -| Labels | `List?` | null | ✔️ | Gets or sets the Labels. | 1.0.0 | - -## BarChartDataset Members - -:::info -**BarChartDataset** implements **IChartDataset** and inherits from the parent class **ChartDataset**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Animation | `ChartAnimation?` | null | | Configures dataset-level animation including delay, duration, easing, and looping. | 4.0.0 | -| BackgroundColor | `List?` | null | | Get or sets the BackgroundColor. | 1.0.0 | -| BarPercentage | double | 0.9 | | Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. | 1.0.0 | -| BarThickness | `double?` | null | | It is applied to the width of each bar, in pixels. When this is enforced, barPercentage and categoryPercentage are ignored. | 3.0.0 | -| BorderColor | `List?` | null | | Get or sets the BorderColor. | 1.0.0 | -| BorderRadius | `List?` | null | | Border radius. | 3.0.0 | -| BorderWidth | `List` | null | | Get or sets the BorderWidth. | 1.0.0 | -| CategoryPercentage | double | 0.8 | | Percent (0-1) of the available width each category should be within the sample width. | 1.0.0 | -| Clip | string | null | | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | 1.0.0 | -| Datalabels | `BarChartDatasetDataLabels` | | | Get or sets the data labels | | 1.10.2 | -| Data | `List?` | null | ✔️ | Get or sets the Data. | 3.0.0 | -| Grouped | bool | true | | Should the bars be grouped on index axis. When true, all the datasets at same index value will be placed next to each other centering on that index value. When false, each bar is placed on its actual index-axis value. -| Hidden | bool | false | | Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. | 1.0.0 | -| HoverBackgroundColor | `List` | null | | The bar background color when hovered. | 1.0.0 | -| HoverBorderColor | `List` | null | | The bar border color when hovered. | 1.0.0 | -| HoverBorderRadius | `List` | null | | The bar border radius when hovered (in pixels). | 3.0.0 | -| HoverBorderWidth | `List` | null | | Get or sets the HoverBorderWidth. | 1.0.0 | -| IndexAxis | `string?` | null | | The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. Supported values are 'x' and 'y'. | 3.0.0 | -| Label | `string?` | null | | The label for the dataset which appears in the legend and tooltips. | 1.0.0 | -| MaxBarThickness | `double?` | null | Set this to ensure that bars are not sized thicker than this. | 3.0.0 | -| MinBarLength | `double?` | null | Set this to ensure that bars have a minimum length in pixels. | 3.0.0 | -| Order | int | 0 | | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | 3.0.0 | -| Stack | `string?` | null | | The ID of the group to which this dataset belongs when stacked. Datasets with the same value are rendered in the same stack group. | 4.0.0 | -| SkipNull | bool | false | If true, null or undefined values will not be used for spacing calculations when determining bar size. | 3.0.0 | -| XAxisID | `string?` | null | | The ID of the x axis to plot this dataset on. | 1.0.0 | -| YAxisID | `string?` | null | | The ID of the y axis to plot this dataset on. | 1.0.0 | - -## BarChartDatasetDataLabels Members - -:::info -**BarChartDatasetDataLabels** inherits from the parent class **ChartDatasetDataLabels**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Alignment | `Alignment` | `Alignment.None` | | Gets or sets the data labels alignment. | 3.0.0 | -| Anchor | `Anchor` | `Anchor.None` | | Gets or sets the data labels anchor. | 3.0.0 | -| BorderWidth | double | 2 | | Gets or sets the border width | 3.0.0 | - -## BarChartOptions Members - -:::info -**BarChartOptions** inherits from the parent class **ChartOptions**. +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). ::: -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Animation | `ChartAnimation?` | null | | Configures chart-level animation including delay, duration, easing, and looping. | 4.0.0 | -| AspectRatio | `double?` | null | | Sets the canvas aspect ratio (`width / height`) when responsive resizing is enabled. | 4.0.0 | -| IndexAxis | string | x | | The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. | 1.0.0 | -| Interaction | `Interaction` | | | Gets or sets the Interaction. | 1.0.0 | -| Layout | `ChartLayout` | | | Gets or sets the ChartLayout. | 1.0.0 | -| Locale | `string?` | | | Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. | 1.10.0 | -| MaintainAspectRatio | bool | true | | Maintain the original canvas aspect ratio (width / height) when resizing. | 3.0.0 | -| Plugins | `BarChartPlugins` | | | Gets or sets the Plugins. | 1.10.2 | -| ResizeDelay | `int?` | null | | Delays the resize update by the given number of milliseconds. | 4.0.0 | -| Responsive | bool | false | | Resizes the chart canvas when its container does. | 1.0.0 | -| Scales | `Scales` | | | Gets or sets the Scales. | 1.0.0 | - -## Interaction Members - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Axis | `InteractionAxis?` | null | | Defines which directions are used in calculating distances. Supported values are `X`, `Y`, `XY`, and `R`. | 4.0.0 | -| IncludeInvisible | `bool?` | null | | Includes invisible points outside the chart area when evaluating interactions. | 4.0.0 | -| Intersect | bool | true | | If true, the interaction mode only applies when the mouse position intersects an item on the chart. | 1.0.0 | -| Mode | `InteractionMode` | `Nearest` | | Sets which elements appear in the interaction. | 1.0.0 | - -## Examples - -### Prerequisites - -Refer to the [getting started guide](/getting-started/blazor-webassembly) for setting up charts. - -### How it works - -In the following example, a [categorical 12-color](https://demos.blazorbootstrap.com/utils/color-utility) palette is used. - -:::tip -For data visualization, you can use the predefined palettes `ColorBuilder.CategoricalTwelveColors` for a 12-color palette and `ColorBuilder.CategoricalSixColors` 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. -::: - -Blazor Bootstrap: Bar Chart Component - How it works - -```cshtml {} showLineNumbers - - - - - - - -``` - -```cs {} showLineNumbers -@code { - private BarChart barChart = default!; - private BarChartOptions barChartOptions = default!; - private ChartData chartData = default!; - - private int datasetsCount = 0; - private int labelsCount = 0; - private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; - private Random random = new(); - - protected override void OnInitialized() - { - chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; - barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await barChart.InitializeAsync(chartData, barChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - foreach (var dataset in chartData.Datasets) - { - if (dataset is BarChartDataset barChartDataset - && barChartDataset is not null - && barChartDataset.Data is not null) - { - var count = barChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(200)); - } - - barChartDataset.Data = newData; - newDatasets.Add(barChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await barChart.UpdateAsync(chartData, barChartOptions); - } - - private async Task AddDatasetAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - if (datasetsCount >= 12) - return; - - var chartDataset = GetRandomBarChartDataset(); - chartData = await barChart.AddDatasetAsync(chartData, chartDataset, barChartOptions); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) - return; - - if (labelsCount >= 12) - return; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is BarChartDataset barChartDataset) - data.Add(new BarChartDatasetData(barChartDataset.Label, random.Next(200))); - } - - chartData = await barChart.AddDataAsync(chartData, GetNextDataLabel(), data); - } - - private async Task ShowHorizontalBarChartAsync() - { - barChartOptions.IndexAxis = "y"; - await barChart.UpdateAsync(chartData, barChartOptions); - } - - private async Task ShowVerticalBarChartAsync() - { - barChartOptions.IndexAxis = "x"; - await barChart.UpdateAsync(chartData, barChartOptions); - } - - #region Data Preparation - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - datasets.Add(GetRandomBarChartDataset()); - } - - return datasets; - } - - private BarChartDataset GetRandomBarChartDataset() - { - var c = ColorBuilder.CategoricalTwelveColors[datasetsCount].ToColor(); - - datasetsCount += 1; - - return new BarChartDataset() - { - Label = $"Product {datasetsCount}", - Data = GetRandomData(), - BackgroundColor = new List { c.ToRgbString() }, - BorderColor = new List { c.ToRgbString() }, - BorderWidth = new List { 0 }, - }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < labelsCount; index++) - { - data.Add(random.Next(200)); - } - - return data; - } - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - labels.Add(GetNextDataLabel()); - } - - return labels; - } - - private string GetNextDataLabel() - { - labelsCount += 1; - return months[labelsCount - 1]; - } - - #endregion Data Preparation -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/bar-chart#how-it-works) - -### Horizontal bar chart - -Blazor Bootstrap: Bar Chart Component - Horizontal bar chart - -```cshtml {} showLineNumbers - -``` - -```cs {} showLineNumbers -@code { - private BarChart barChart = default!; - private BarChartOptions barChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; - var datasets = new List(); - - var dataset1 = new BarChartDataset() - { - Data = new List { 55000, 15000, 18000, 21000 }, - BackgroundColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, - BorderColor = new List { ColorBuilder.CategoricalTwelveColors[0] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset1); - - chartData = new ChartData { - Labels = labels, - Datasets = datasets }; - - barChartOptions = new BarChartOptions(); - barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; - barChartOptions.IndexAxis = "y"; - - barChartOptions.Scales.X.Title.Text = "Visitors"; - barChartOptions.Scales.X.Title.Display = true; - - barChartOptions.Scales.Y.Title.Text = "Browser"; - barChartOptions.Scales.Y.Title.Display = true; - - barChartOptions.Plugins.Legend.Display = false; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await barChart.InitializeAsync(chartData, barChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/bar-chart#horizontal-bar-chart) - -### Stacked bar chart - -Blazor Bootstrap: Bar Chart Component - Stacked bar chart - -```cshtml {} showLineNumbers - -``` - -```cs {} showLineNumbers -@code { - private BarChart barChart = default!; - private BarChartOptions barChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var colors = ColorBuilder.CategoricalTwelveColors; - - var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; - var datasets = new List(); - - var dataset1 = new BarChartDataset() - { - Label = "Windows", - Data = new List { 28000, 8000, 2000, 17000 }, - BackgroundColor = new List { colors[0] }, - BorderColor = new List { colors[0] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset1); - - var dataset2 = new BarChartDataset() - { - Label = "macOS", - Data = new List { 8000, 10000, 14000, 8000 }, - BackgroundColor = new List { colors[1] }, - BorderColor = new List { colors[1] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset2); - - var dataset3 = new BarChartDataset() - { - Label = "Other", - Data = new List { 28000, 10000, 14000, 8000 }, - BackgroundColor = new List { colors[2] }, - BorderColor = new List { colors[2] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset3); - - chartData = new ChartData - { - Labels = labels, - Datasets = datasets - }; - - barChartOptions = new(); - barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; - barChartOptions.IndexAxis = "y"; - - barChartOptions.Scales.X.Title.Text = "Visitors"; - barChartOptions.Scales.X.Title.Display = true; - - barChartOptions.Scales.Y.Title.Text = "Browser"; - barChartOptions.Scales.Y.Title.Display = true; - - barChartOptions.Scales.X.Stacked = true; - barChartOptions.Scales.Y.Stacked = true; - - barChartOptions.Plugins.Title.Text = "Operating system"; - barChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await barChart.InitializeAsync(chartData, barChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/bar-chart#stacked-bar-chart) - -### Grouped stacks - -Use the `Stack` property on each dataset when you want multiple stacked groups in the same chart. Datasets with the same stack ID are rendered together, while different IDs create separate stacked groups. - -```cs {} showLineNumbers -@code { - private BarChart barChart = default!; - private BarChartOptions barChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var colors = ColorBuilder.CategoricalTwelveColors; - - chartData = new ChartData - { - Labels = new List { "Q1", "Q2", "Q3", "Q4" }, - Datasets = new List - { - new BarChartDataset - { - Label = "North Budget", - Data = new List { 42, 47, 44, 50 }, - BackgroundColor = new List { colors[0] }, - BorderColor = new List { colors[0] }, - BorderWidth = new List { 0 }, - Stack = "North" - }, - new BarChartDataset - { - Label = "North Actual", - Data = new List { 39, 45, 48, 53 }, - BackgroundColor = new List { colors[1] }, - BorderColor = new List { colors[1] }, - BorderWidth = new List { 0 }, - Stack = "North" - }, - new BarChartDataset - { - Label = "South Budget", - Data = new List { 35, 38, 41, 46 }, - BackgroundColor = new List { colors[4] }, - BorderColor = new List { colors[4] }, - BorderWidth = new List { 0 }, - Stack = "South" - }, - new BarChartDataset - { - Label = "South Actual", - Data = new List { 33, 40, 43, 45 }, - BackgroundColor = new List { colors[5] }, - BorderColor = new List { colors[5] }, - BorderWidth = new List { 0 }, - Stack = "South" - } - } - }; - - barChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; - barChartOptions.Scales.X.Stacked = true; - barChartOptions.Scales.Y.Stacked = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await barChart.InitializeAsync(chartData, barChartOptions); - } -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/bar-chart#grouped-stacks) - -### Locale - -By default, the chart is using the default locale of the platform on which it is running. -In the following example, you will see the chart in the **German** locale (**de_DE**). - -Blazor Bootstrap: Bar Chart Component - Locale - -```cshtml {} showLineNumbers - -``` - -```cs {} showLineNumbers -@code { - private BarChart barChart = default!; - private BarChartOptions barChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var colors = ColorBuilder.CategoricalTwelveColors; - - var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; - var datasets = new List(); - - var dataset1 = new BarChartDataset() - { - Label = "Windows", - Data = new List { 28000, 8000, 2000, 17000 }, - BackgroundColor = new List { colors[0] }, - BorderColor = new List { colors[0] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset1); - - var dataset2 = new BarChartDataset() - { - Label = "macOS", - Data = new List { 8000, 10000, 14000, 8000 }, - BackgroundColor = new List { colors[1] }, - BorderColor = new List { colors[1] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset2); - - var dataset3 = new BarChartDataset() - { - Label = "Other", - Data = new List { 28000, 10000, 14000, 8000 }, - BackgroundColor = new List { colors[2] }, - BorderColor = new List { colors[2] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset3); - - chartData = new ChartData - { - Labels = labels, - Datasets = datasets - }; - - barChartOptions = new(); - barChartOptions.Locale = "de-DE"; - barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; - barChartOptions.IndexAxis = "y"; - - barChartOptions.Scales.X.Title.Text = "Visitors"; - barChartOptions.Scales.X.Title.Display = true; - - barChartOptions.Scales.Y.Title.Text = "Browser"; - barChartOptions.Scales.Y.Title.Display = true; - - barChartOptions.Scales.X.Stacked = true; - barChartOptions.Scales.Y.Stacked = true; - - barChartOptions.Plugins.Title.Text = "Operating system"; - barChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await barChart.InitializeAsync(chartData, barChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/bar-chart#locale) - -### Data labels - -Blazor Bootstrap: Bar Chart Component - Data labels - -```cshtml {} showLineNumbers - -``` - -```cs {72} showLineNumbers -@code { - private BarChart barChart = default!; - private BarChartOptions barChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var colors = ColorBuilder.CategoricalTwelveColors; - - var labels = new List { "Chrome", "Firefox", "Safari", "Edge" }; - var datasets = new List(); - - var dataset1 = new BarChartDataset() - { - Label = "Windows", - Data = new List { 28000, 8000, 2000, 17000 }, - BackgroundColor = new List { colors[0] }, - BorderColor = new List { colors[0] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset1); - - var dataset2 = new BarChartDataset() - { - Label = "macOS", - Data = new List { 8000, 10000, 14000, 8000 }, - BackgroundColor = new List { colors[1] }, - BorderColor = new List { colors[1] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset2); - - var dataset3 = new BarChartDataset() - { - Label = "Other", - Data = new List { 28000, 10000, 14000, 8000 }, - BackgroundColor = new List { colors[2] }, - BorderColor = new List { colors[2] }, - BorderWidth = new List { 0 }, - }; - datasets.Add(dataset3); - - chartData = new ChartData - { - Labels = labels, - Datasets = datasets - }; - - barChartOptions = new(); - barChartOptions.Responsive = true; - barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index, Axis = InteractionAxis.Y }; - barChartOptions.IndexAxis = "y"; - - barChartOptions.Scales.X.Title.Text = "Visitors"; - barChartOptions.Scales.X.Title.Display = true; - - barChartOptions.Scales.Y.Title.Text = "Browser"; - barChartOptions.Scales.Y.Title.Display = true; - - barChartOptions.Scales.X.Stacked = true; - barChartOptions.Scales.Y.Stacked = true; +## Click events in 1.2.4 - barChartOptions.Plugins.Title.Text = "Operating system"; - barChartOptions.Plugins.Title.Display = true; - } +BlazorExpress.ChartJS 1.2.4 supports Bar Chart item click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and API details. - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - // pass the plugin name to enable the data labels - await barChart.InitializeAsync(chartData: chartData, chartOptions: barChartOptions, plugins: new string[] { "ChartDataLabels" }); - } - await base.OnAfterRenderAsync(firstRender); - } -} -``` +- [Official Bar Chart documentation](https://chartjs.blazorexpress.com/docs/bar-chart) +- [Original Bar Chart demo](https://chartjs.blazorexpress.com/demos/bar-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -[See the demo here.](https://demos.blazorbootstrap.com/charts/bar-chart#data-labels) +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/docs/docs/06-data-visualization/bubble-chart.mdx b/docs/docs/06-data-visualization/bubble-chart.mdx index d37f5d254..1ae95117e 100644 --- a/docs/docs/06-data-visualization/bubble-chart.mdx +++ b/docs/docs/06-data-visualization/bubble-chart.mdx @@ -1,6 +1,6 @@ --- -title: Blazor Bubble Chart Component -description: A Blazor Bootstrap bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value. +title: Blazor Bubble Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor bubble chart component, documentation, and original demos. image: https://i.imgur.com/JLV7oss.png sidebar_label: Bubble Chart @@ -9,93 +9,22 @@ sidebar_position: 2 import CarbonAd from '/carbon-ad.mdx' -# Blazor Bubble Chart +# Blazor Bubble Chart with BlazorExpress.ChartJS -A Blazor Bootstrap bubble chart component is used to visualize three dimensions of data at the same time. Each data point is represented by a bubble where the `X` and `Y` coordinates determine the position and `R` controls the bubble size. +The **Bubble Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -## Demo and Documentation +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). +::: -See blazor bubble chart demo here. -
-See blazor bubble chart API documentation here. +## Click events in 1.2.4 -## Basic Example +BlazorExpress.ChartJS 1.2.4 supports Bubble Chart item click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and structured raw-value details. -```razor showLineNumbers - +- [Official Bubble Chart documentation](https://chartjs.blazorexpress.com/docs/bubble-chart) +- [Original Bubble Chart demo](https://chartjs.blazorexpress.com/demos/bubble-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -@code { - private BubbleChart bubbleChart = default!; - private BubbleChartOptions bubbleChartOptions = new() { Responsive = true }; - private ChartData chartData = new() - { - Labels = new List { "January", "February", "March" }, - Datasets = new List - { - new BubbleChartDataset - { - Label = "Product 1", - Data = new List - { - new(10, 20, 8), - new(14, 11, 6), - new(18, 24, 10) - }, - BackgroundColor = new List { "rgba(13, 110, 253, 0.6)" }, - BorderColor = new List { "rgb(13, 110, 253)" } - } - } - }; - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await bubbleChart.InitializeAsync(chartData, bubbleChartOptions); - } -} -``` - -## Key Types - -- `BubbleChart` renders the Chart.js bubble chart canvas. -- `BubbleChartOptions` configures responsiveness, interaction, scales, layout, and plugins. -- `BubbleChartDataset` contains the dataset styling and the `List` values. -- `BubbleChartDataPoint` is the core data shape and contains `X`, `Y`, and `R` values. -- `BubbleChartDatasetData` supports dynamic `AddDataAsync` updates. - -## Interaction Options - -Bubble charts use the shared `Interaction` model, so you can control hover and tooltip behavior with the same properties used by the other cartesian charts. - -```razor showLineNumbers -@code { - private BubbleChartOptions bubbleChartOptions = new() - { - Responsive = true, - Interaction = new Interaction - { - Mode = InteractionMode.Index, - Axis = InteractionAxis.XY, - IncludeInvisible = false - } - }; -} -``` - -## Dynamic Updates - -Use the same methods available on the other chart components: - -- `AddDatasetAsync` to append a dataset. -- `AddDataAsync` to append a new bubble to existing datasets. -- `UpdateAsync` to replace chart data or options. -- `ResizeAsync` to resize the chart container. - -## Related Pages - -- [Charts Overview](/components/charts) -- [Scatter Chart](/data-visualization/scatter-chart) -- [Bar Chart](/data-visualization/bar-chart) -- [Line Chart](/data-visualization/line-chart) \ No newline at end of file +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/docs/docs/06-data-visualization/doughnut-chart.mdx b/docs/docs/06-data-visualization/doughnut-chart.mdx index 09dee14f8..80dedd0f1 100644 --- a/docs/docs/06-data-visualization/doughnut-chart.mdx +++ b/docs/docs/06-data-visualization/doughnut-chart.mdx @@ -1,6 +1,6 @@ ---- -title: Blazor Doughnut Chart Component -description: A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category. +--- +title: Blazor Doughnut Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor doughnut chart component, documentation, and original demos. image: https://i.imgur.com/xEPhAsW.png sidebar_label: Doughnut Chart @@ -9,553 +9,22 @@ sidebar_position: 2 import CarbonAd from '/carbon-ad.mdx' -# Blazor Doughnut Chart +# Blazor Doughnut Chart with BlazorExpress.ChartJS -A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. -It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category. +The **Doughnut Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -Blazor Chart Component - Blazor Doughnut Chart - -## Parameters - -| Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Height | `int?` | null | | Gets or sets chart container height. | 1.0.0 | -| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets chart container height unit of measure. | 1.0.0 | -| Width | `int?` | null | | Gets or sets chart container width. | 1.0.0 | -| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets chart container width unit of measure. | 1.0.0 | - -## Methods - -| Name | Return type | Description | Added / Modified Version | -|:--|:--|:--|:--| -| AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) | `Task` | Adds data to chart. | 1.10.0 | -| AddDataAsync(ChartData chartData, string dataLabel, `List` data) | `Task` | Adds dataset to chart. | 1.10.0 | -| AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) | `Task` | Adds dataset to chart. | 1.10.0 || InitializeAsync | Task | Initialize Bar Chart. | 1.0.0 | -| InitializeAsync(ChartData chartData, IChartOptions chartOptions, `string[]?` plugins = null) | Task | Initialize the chat. | 1.0.0 | -| ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) | Task | Resize the chart. | 1.0.0 | -| UpdateAsync(ChartData chartData, IChartOptions chartOptions) | Task | Update the chart. | 1.0.0 | - -## ChartData Members - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Datasets | `List?` | null | ✔️ | Gets or sets the Datasets. | 1.0.0 | -| Labels | `List?` | null | ✔️ | Gets or sets the Labels. | 1.0.0 | - -## DoughnutChartDataset Members - -:::info -**DoughnutChartDataset** implements **IChartDataset** and inherits from the parent class **ChartDataset**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| BackgroundColor | `List?` | null | | Get or sets the BackgroundColor. | 1.0.0 | -| BorderAlign | `List?` | null | | Supported values are 'center' and 'inner'. When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap. | 3.0.0 | -| BorderColor | `List?` | null | | Get or sets the BorderColor. | 1.0.0 | -| BorderDash | `List?` | null | | Arc border length and spacing of dashes. | 3.0.0 | -| BorderDashOffset | double | 0.0 | | Arc border offset for line dashes. | 3.0.0 | -| BorderJoinStyle | `List?` | null | | Arc border join style. Supported values are 'round', 'bevel', 'miter'. | 3.0.0 | -| BorderRadius | `List?` | null | | It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). | 3.0.0 | -| BorderWidth | `List?` | null | | Arc border width (in pixels). | 1.0.0 | -| Clip | `string?` | null | | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | 1.0.0 | -| Circumference | `double?` | null | | Per-dataset override for the sweep that the arcs cover. | 3.0.0 | -| Data | `List?` | null | ✔️ | Get or sets the Data. | 1.0.0 | -| Datalabels | `DoughnutChartDatasetDataLabels` | | | Get or sets the data labels | | 1.10.2 | -| Hidden | bool | false | | Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. | 1.0.0 | -| HoverBackgroundColor | `List?` | null | | Arc background color when hovered. | 1.0.0 | -| HoverBorderColor | `List?` | null | | Arc border color when hovered. | 1.0.0 | -| HoverBorderDash | `List?` | null | | Arc border length and spacing of dashes when hovered. | 3.0.0 | -| HoverBorderDashOffset | `double?` | null | | Arc border offset for line dashes when hovered. | 3.0.0 | -| HoverBorderJoinStyle | `List?` | null | | Arc border join style when hovered. Supported values are 'round', 'bevel', 'miter'. | 3.0.0 | -| HoverBorderWidth | `List?` | null | | Arc border width when hovered (in pixels). | 3.0.0 | -| HoverOffset | `List?` | null | | Arc offset when hovered (in pixels). | 3.0.0 | -| Label | string | null | | The label for the dataset which appears in the legend and tooltips. | 1.0.0 | -| Offset | `List?` | null | | Arc offset (in pixels). | 3.0.0 | -| Order | int | 0 | | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | 3.0.0 | -| Rotation | `double?` | null | | Per-dataset override for the starting angle to draw arcs from. | 3.0.0 | -| Spacing | `double` | 0 | | Fixed arc offset (in pixels). Similar to `Offset` but applies to all arcs. | 3.0.0 | -| Weight | `double` | 1 | | The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values. | 3.0.0 | - -## DoughnutChartDatasetDataLabels Members - -:::info -**DoughnutChartDatasetDataLabels** inherits from the parent class **ChartDatasetDataLabels**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Alignment | `Alignment` | `Alignment.None` | | Gets or sets the data labels alignment. | 3.0.0 | -| Anchor | `Anchor` | `Anchor.None` | | Gets or sets the data labels anchor. | 3.0.0 | -| BorderWidth | double | 2 | | Gets or sets the border width | 3.0.0 | - -## DoughnutChartOptions Members - -:::info -**DoughnutChartOptions** inherits from the parent class **ChartOptions**. +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). ::: -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Locale | `string?` | | | Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. | 1.10.0 | -| MaintainAspectRatio | bool | true | | Maintain the original canvas aspect ratio (width / height) when resizing. | 3.0.0 | -| Plugins | `DoughnutChartPlugins` | | | Gets or sets the Plugins. | 1.10.2 | -| Responsive | bool | false | | Resizes the chart canvas when its container does. | 1.0.0 | - -## Examples - -### Prerequisites - -Refer to the [getting started guide](/getting-started/blazor-webassembly) for setting up charts. - -### How it works - -In the following example, a [categorical 12-color](https://demos.blazorbootstrap.com/utils/color-utility) palette is used. - -:::tip -For data visualization, you can use the predefined palettes `ColorBuilder.CategoricalTwelveColors` for a 12-color palette and `ColorBuilder.CategoricalSixColors` 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. -::: - -Blazor Bootstrap: Doughnut Chart Component - How it works - -```cshtml {} showLineNumbers - - - - - -``` - -```cs {} showLineNumbers -@code { - private DoughnutChart doughnutChart = default!; - private DoughnutChartOptions doughnutChartOptions = default!; - private ChartData chartData = default!; - private string[]? backgroundColors; - - private int datasetsCount = 0; - private int dataLabelsCount = 0; - - private Random random = new(); - - protected override void OnInitialized() - { - backgroundColors = ColorBuilder.CategoricalTwelveColors; - chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; - - doughnutChartOptions = new(); - doughnutChartOptions.Responsive = true; - doughnutChartOptions.Plugins.Title.Text = "2022 - Sales"; - doughnutChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await doughnutChart.InitializeAsync(chartData, doughnutChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - foreach (var dataset in chartData.Datasets) - { - if (dataset is DoughnutChartDataset doughnutChartDataset - && doughnutChartDataset is not null - && doughnutChartDataset.Data is not null) - { - var count = doughnutChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(0, 100)); - } - - doughnutChartDataset.Data = newData; - newDatasets.Add(doughnutChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await doughnutChart.UpdateAsync(chartData, doughnutChartOptions); - } - - private async Task AddDatasetAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - var chartDataset = GetRandomDoughnutChartDataset(); - chartData = await doughnutChart.AddDatasetAsync(chartData, chartDataset, doughnutChartOptions); - } - - private async Task AddDataAsync() - { - if (dataLabelsCount >= 12) - return; - - if (chartData is null || chartData.Datasets is null) - return; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is DoughnutChartDataset doughnutChartDataset) - { - data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); - } - } - - chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); - - dataLabelsCount += 1; - } - - #region Data Preparation - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - datasets.Add(GetRandomDoughnutChartDataset()); - } - - return datasets; - } - - private DoughnutChartDataset GetRandomDoughnutChartDataset() - { - datasetsCount += 1; - return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - data.Add(random.Next(0, 100)); - } - - return data; - } - - private List GetRandomBackgroundColors() - { - var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - colors.Add(backgroundColors![index]); - } - - return colors; - } - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - labels.Add(GetNextDataLabel()); - dataLabelsCount += 1; - } - - return labels; - } - - private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; - - private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; - - #endregion Data Preparation -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/doughnut-chart#how-it-works) - -### Locale - -By default, the chart is using the default locale of the platform on which it is running. -In the following example, you will see the chart in the **German** locale (**de_DE**). - -Blazor Bootstrap: Doughnut Chart Component - Locale - -```cshtml {} showLineNumbers -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - -``` - -```cs {} showLineNumbers -@code { - private LineChart lineChart = default!; - private LineChartOptions lineChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var colors = ColorBuilder.CategoricalTwelveColors; - - var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; - var datasets = new List(); - - var dataset1 = new LineChartDataset() - { - Label = "Windows", - Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, - BackgroundColor = new List { colors[0] }, - BorderColor = new List { colors[0] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[0] }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - datasets.Add(dataset1); - - var dataset2 = new LineChartDataset() - { - Label = "macOS", - Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, - BackgroundColor = new List { colors[1] }, - BorderColor = new List { colors[1] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[1] }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - datasets.Add(dataset2); - - var dataset3 = new LineChartDataset() - { - Label = "Other", - Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, - BackgroundColor = new List { colors[2] }, - BorderColor = new List { colors[2] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[2] }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - datasets.Add(dataset3); - - chartData = new ChartData - { - Labels = labels, - Datasets = datasets - }; - - lineChartOptions = new(); - lineChartOptions.Locale = "de-DE"; - lineChartOptions.Responsive = true; - lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; - - lineChartOptions.Scales.X.Title.Text = "2019"; - lineChartOptions.Scales.X.Title.Display = true; - - lineChartOptions.Scales.Y.Title.Text = "Visitors"; - lineChartOptions.Scales.Y.Title.Display = true; - - lineChartOptions.Plugins.Title.Text = "Operating system"; - lineChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await lineChart.InitializeAsync(chartData, lineChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/doughnut-chart#locale) - -### Data labels - -Blazor Bootstrap: Doughnut Chart Component - Data labels - -```cshtml {} showLineNumbers - - - - - -``` - -```cs {28,97,99,101} showLineNumbers -@code { - private DoughnutChart doughnutChart = default!; - private DoughnutChartOptions doughnutChartOptions = default!; - private ChartData chartData = default!; - private string[]? backgroundColors; - - private int datasetsCount = 0; - private int dataLabelsCount = 0; - - private Random random = new(); - - protected override void OnInitialized() - { - backgroundColors = ColorBuilder.CategoricalTwelveColors; - chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) }; - - doughnutChartOptions = new(); - doughnutChartOptions.Responsive = true; - doughnutChartOptions.Plugins.Title.Text = "2022 - Sales"; - doughnutChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - // pass the plugin name to enable the data labels - await doughnutChart.InitializeAsync(chartData: chartData, chartOptions: doughnutChartOptions, plugins: new string[] { "ChartDataLabels" }); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - var datasetIndex = 0; - foreach (var dataset in chartData.Datasets) - { - if (dataset is DoughnutChartDataset doughnutChartDataset - && doughnutChartDataset is not null - && doughnutChartDataset.Data is not null) - { - var count = doughnutChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(0, 100)); - } - - doughnutChartDataset.Data = newData; - newDatasets.Add(doughnutChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await doughnutChart.UpdateAsync(chartData: chartData, chartOptions: doughnutChartOptions); - } - - private async Task AddDataAsync() - { - if (dataLabelsCount >= 12) - return; - - if (chartData is null || chartData.Datasets is null) - return; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is DoughnutChartDataset doughnutChartDataset) - { - data.Add(new DoughnutChartDatasetData(doughnutChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); - } - } - - chartData = await doughnutChart.AddDataAsync(chartData, GetNextDataLabel(), data); - - dataLabelsCount += 1; - } - - #region Data Preparation - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - var dataset = GetRandomDoughnutChartDataset(); - - if (index == 0) - dataset.Datalabels.Anchor = "end"; - else if (index == numberOfDatasets - 1) - dataset.Datalabels.Anchor = "start"; - else - dataset.Datalabels.Anchor = "center"; - - datasets.Add(dataset); - } - - return datasets; - } - - private DoughnutChartDataset GetRandomDoughnutChartDataset() - { - datasetsCount += 1; - return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - data.Add(random.Next(0, 100)); - } - - return data; - } - - private List GetRandomBackgroundColors() - { - var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - colors.Add(backgroundColors![index]); - } - - return colors; - } - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - labels.Add(GetNextDataLabel()); - dataLabelsCount += 1; - } - - return labels; - } - - private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; +## Click events in 1.2.4 - private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; +BlazorExpress.ChartJS 1.2.4 supports Doughnut Chart segment click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and API details. - #endregion Data Preparation -} -``` +- [Official Doughnut Chart documentation](https://chartjs.blazorexpress.com/docs/doughnut-chart) +- [Original Doughnut Chart demo](https://chartjs.blazorexpress.com/demos/doughnut-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -[See the demo here.](https://demos.blazorbootstrap.com/charts/doughnut-chart#data-labels) +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/docs/docs/06-data-visualization/line-chart.mdx b/docs/docs/06-data-visualization/line-chart.mdx index b13d17ac1..c0e53f502 100644 --- a/docs/docs/06-data-visualization/line-chart.mdx +++ b/docs/docs/06-data-visualization/line-chart.mdx @@ -1,6 +1,6 @@ ---- -title: Blazor Line Chart Component -description: A Blazor Bootstrap 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. +--- +title: Blazor Line Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor line chart component, documentation, and original demos. image: https://i.imgur.com/8b7jH0D.png sidebar_label: Line Chart @@ -9,530 +9,22 @@ sidebar_position: 3 import CarbonAd from '/carbon-ad.mdx' -# Blazor Line Chart +# Blazor Line Chart with BlazorExpress.ChartJS -A Blazor Bootstrap 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. +The **Line Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -Blazor Chart Component - Blazor Line Chart - -## Parameters - -| Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Height | `int?` | null | | Gets or sets chart container height. | 1.0.0 | -| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets chart container height unit of measure. | 1.0.0 | -| Width | `int?` | null | | Gets or sets chart container width. | 1.0.0 | -| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets chart container width unit of measure. | 1.0.0 | - -## Methods - -| Name | Return type | Description | Added / Modified Version | -|:--|:--|:--|:--| -| AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) | `Task` | Adds data to chart. | 1.10.0 | -| AddDataAsync(ChartData chartData, string dataLabel, `List` data) | `Task` | Adds dataset to chart. | 1.10.0 | -| AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) | `Task` | Adds dataset to chart. | 1.10.0 || InitializeAsync | Task | Initialize Bar Chart. | 1.0.0 | -| InitializeAsync(ChartData chartData, IChartOptions chartOptions, `string[]?` plugins = null) | Task | Initialize the chat. | 1.0.0 | -| ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) | Task | Resize the chart. | 1.0.0 | -| UpdateAsync(ChartData chartData, IChartOptions chartOptions) | Task | Update chart by reapplying all chart data and options. If animation is enabled, this will animate the datasets from scratch. | 1.0.0 | -| UpdateValuesAsync(ChartData chartData) | Task | Update only data labels and values. If animation is enabled, this will animate the datapoints. Changes to the options will not be applied. | 3.0.0 | - -## ChartData Members - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Datasets | `List?` | null | ✔️ | Gets or sets the Datasets. | 1.0.0 | -| Labels | `List?` | null | ✔️ | Gets or sets the Labels. | 1.0.0 | - -## LineChartDataset Members - -:::info -**LineChartDataset** implements **IChartDataset** and inherits from the parent class **ChartDataset**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Animation | `ChartAnimation?` | null | | Configures dataset-level animation including delay, duration, easing, and looping. | 4.0.0 | -| BackgroundColor | `string` | `rgba(0, 0, 0, 0.1)` | | Get or sets the line fill color. | 3.0.0 | -| BorderCapStyle | `string` | `butt` | | Cap style of the line. Supported values are 'butt', 'round', and 'square'. | 3.0.0 | -| BorderColor | `string` | `rgba(0, 0, 0, 0.1)` | | Get or sets the line color. | 3.0.0 | -| BorderDash | `List?` | null | | Gets or sets the length and spacing of dashes. | 3.0.0 | -| BorderDashOffset | double | 0.0 | | Offset for line dashes. | 1.0.0 | -| BorderJoinStyle | `string` | `miter` | | Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. | 3.0.0 | -| BorderWidth | `double` | 3 | | Gets or sets the line width (in pixels). | 3.0.0 | -| Clip | string | null | | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | 1.0.0 | -| CubicInterpolationMode | string | `default` | | Supported values are 'default', and 'monotone'. | 3.0.0 | -| Data | `List?` | null | ✔️ | Get or sets the Data. | 3.0.0 | -| Datalabels | `LineChartDatasetDataLabels` | | | Get or sets the data labels | | 1.10.2 | -| DrawActiveElementsOnTop | `List?` | null | | Draw the active points of a dataset over the other points of the dataset. | 3.0.0 | -| Fill | bool | false | | Both line and radar charts support a fill option on the dataset object which can be used to create area between two datasets or a dataset and a boundary, i.e. the scale origin, start or end. | 1.0.0 | -| Hidden | bool | false | | Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. | 1.0.0 | -| HoverBackgroundColor | `string?` | null | | The line fill color when hovered. | 3.0.0 | -| HoverBorderCapStyle | `string?` | null | | Cap style of the line when hovered. | 3.0.0 | -| HoverBorderColor | `string?` | null | | Get or sets the HoverBorderColor. | 3.0.0 | -| HoverBorderDash | `List?` | null | | Gets or sets the length and spacing of dashes when hovered. | 3.0.0 | -| HoverBorderDashOffset | `double?` | null | | Offset for line dashes when hovered. | 3.0.0 | -| HoverBorderJoinStyle | string | `miter` | | Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. | 3.0.0 | -| HoverBorderWidth | `double?` | null | | The bar border width when hovered (in pixels) when hovered. | 3.0.0 | -| IndexAxis | `string?` | null | | The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. | 3.0.0 | -| Label | `string?` | null | | The label for the dataset which appears in the legend and tooltips. | 1.0.0 | -| Order | int | 0 | | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | 3.0.0 | -| Stack | `string?` | null | | The ID of the group to which this dataset belongs when stacked. Datasets with the same value are rendered in the same stack group. | 4.0.0 | -| PointBackgroundColor | `List?` | null | | The fill color for points. | 1.0.0 | -| PointBorderColor | `List?` | null | | The border color for points. | 1.0.0 | -| PointBorderWidth | `List?` | null | | The width of the point border in pixels. | 1.0.0 | -| PointHitRadius | `List?` | null | | The pixel size of the non-displayed point that reacts to mouse events. | 1.0.0 | -| PointHoverBackgroundColor | `List?` | null | | Point background color when hovered. | 1.0.0 | -| PointHoverBorderColor | `List?` | null | | Point border color when hovered. | 1.0.0 | -| PointHoverBorderWidth | `List?` | null | | Border width of point when hovered. | 1.0.0 | -| PointHoverRadius | `new List?` | null | | The radius of the point when hovered. | 1.0.0 | -| PointRadius | `List?` | null | | The radius of the point shape. If set to 0, the point is not rendered. | 1.0.0 | -| PointRotation | `List?` | null | | The rotation of the point in degrees. | 1.0.0 | -| PointStyle | `List?` | null | | Style of the point. Use 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style the point. | 1.0.0 | -| ShowLine | bool | true | | If false, the lines between points are not drawn. | 1.0.0 | -| SpanGaps? | bool | null | | If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. | 1.0.0 | -| Stepped | bool | false | | true to show the line as a stepped line (tension will be ignored). | 1.0.0 | -| Tension | double | 0.2 | | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used. | 1.0.0 | -| XAxisID | `string?` | null | | The ID of the x axis to plot this dataset on. | 1.0.0 | -| YAxisID | `string?` | null | | The ID of the y axis to plot this dataset on. | 1.0.0 | - -## LineChartDatasetDataLabels Members - -:::info -**LineChartDatasetDataLabels** inherits from the parent class **ChartDatasetDataLabels**. +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). ::: -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Alignment | `Alignment` | `Alignment.None` | | Gets or sets the data labels alignment. | 3.0.0 | -| Anchor | `Anchor` | `Anchor.None` | | Gets or sets the data labels anchor. | 3.0.0 | -| BorderWidth | double | 2 | | Gets or sets the border width | 3.0.0 | - -## LineChartOptions Members - -:::info -**LineChartOptions** inherits from the parent class **ChartOptions**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Animation | `ChartAnimation?` | null | | Configures chart-level animation including delay, duration, easing, and looping. | 4.0.0 | -| AspectRatio | `double?` | null | | Sets the canvas aspect ratio (`width / height`) when responsive resizing is enabled. | 4.0.0 | -| IndexAxis | `string?` | null | | The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. | 3.0.0 | -| Interaction | `Interaction` | | | Gets or sets the Interaction. | 1.0.0 | -| Layout | `ChartLayout` | | | Gets or sets the ChartLayout. | 1.0.0 | -| Locale | `string?` | | | Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. | 1.10.0 | -| MaintainAspectRatio | bool | true | | Maintain the original canvas aspect ratio (width / height) when resizing. | 3.0.0 | -| Plugins | `LineChartPlugins` | | | Gets or sets the Plugins. | 1.10.2 | -| ResizeDelay | `int?` | null | | Delays the resize update by the given number of milliseconds. | 4.0.0 | -| Responsive | bool | false | | Resizes the chart canvas when its container does. | 1.0.0 | -| Scales | `Scales` | | | Gets or sets the Scales. | 1.0.0 | - -## Interaction Members - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Axis | `InteractionAxis?` | null | | Defines which directions are used in calculating distances. Supported values are `X`, `Y`, `XY`, and `R`. | 4.0.0 | -| IncludeInvisible | `bool?` | null | | Includes invisible points outside the chart area when evaluating interactions. | 4.0.0 | -| Intersect | bool | true | | If true, the interaction mode only applies when the mouse position intersects an item on the chart. | 1.0.0 | -| Mode | `InteractionMode` | `Nearest` | | Sets which elements appear in the interaction. | 1.0.0 | - -## Examples - -### Prerequisites - -Refer to the [getting started guide](/getting-started/blazor-webassembly) for setting up charts. - -### How it works - -In the following example, a [categorical 12-color](https://demos.blazorbootstrap.com/utils/color-utility) palette is used. - -:::tip -For data visualization, you can use the predefined palettes `ColorBuilder.CategoricalTwelveColors` for a 12-color palette and `ColorBuilder.CategoricalSixColors` 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. -::: - -Blazor Bootstrap: Line Chart Component - How it works - -```cshtml {} showLineNumbers -
- -
- -
- - - - - -
-``` - -```cs {} showLineNumbers -@code { - private LineChart lineChart = default!; - private LineChartOptions lineChartOptions = default!; - private ChartData chartData = default!; - - private int datasetsCount; - private int labelsCount; - - private Random random = new(); - - protected override void OnInitialized() - { - chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; - lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; - lineChartOptions.Scales.Y!.Max = 250; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await lineChart.InitializeAsync(chartData, lineChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - foreach (var dataset in chartData.Datasets) - { - if (dataset is LineChartDataset lineChartDataset - && lineChartDataset is not null - && lineChartDataset.Data is not null) - { - var count = lineChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(200)); - } - - lineChartDataset.Data = newData; - newDatasets.Add(lineChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await lineChart.UpdateValuesAsync(chartData); - } - - private async Task AddDatasetAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - var chartDataset = GetRandomLineChartDataset(); - chartData = await lineChart.AddDatasetAsync(chartData, chartDataset, lineChartOptions); - } - - private async Task AddDataAsync() - { - if (chartData is null || chartData.Datasets is null) - return; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is LineChartDataset lineChartDataset) - data.Add(new LineChartDatasetData(lineChartDataset.Label, random.Next(200))); - } - - chartData = await lineChart.AddDataAsync(chartData, GetNextDataLabel(), data); - } - - private async Task ShowHorizontalLineChartAsync() - { - lineChartOptions.IndexAxis = "y"; - await lineChart.UpdateAsync(chartData, lineChartOptions); - } - - private async Task ShowVerticalLineChartAsync() - { - lineChartOptions.IndexAxis = "x"; - await lineChart.UpdateAsync(chartData, lineChartOptions); - } - - #region Data Preparation - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - datasets.Add(GetRandomLineChartDataset()); - } - - return datasets; - } - - private LineChartDataset GetRandomLineChartDataset() - { - var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); - - datasetsCount += 1; - - return new LineChartDataset - { - Label = $"Team {datasetsCount}", - Data = GetRandomData(), - BackgroundColor = c.ToRgbString(), - BorderColor = c.ToRgbString(), - BorderWidth = 2, - HoverBorderWidth = 4, - // PointBackgroundColor = c.ToRgbString(), - // PointRadius = 0, // hide points - // PointHoverRadius = 4, - }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < labelsCount; index++) - { - data.Add(random.Next(200)); - } - - return data; - } - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - labels.Add(GetNextDataLabel()); - } - - return labels; - } - - private string GetNextDataLabel() - { - labelsCount += 1; - return $"Day {labelsCount}"; - } - - #endregion Data Preparation - -} -``` - -### Another example - -Blazor Bootstrap: Line Chart Component - Another example - -```cshtml {} showLineNumbers -@using BlazorBootstrap.Extensions -@using Color = System.Drawing.Color - - -``` - -```cs {} showLineNumbers -@code { - private LineChart lineChart = default!; - private LineChartOptions lineChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var colors = ColorBuilder.CategoricalTwelveColors; - - var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; - var datasets = new List(); - - var dataset1 = new LineChartDataset() - { - Label = "Windows", - Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, - BackgroundColor = new List { colors[0] }, - BorderColor = new List { colors[0] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[0] }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - datasets.Add(dataset1); - - var dataset2 = new LineChartDataset() - { - Label = "macOS", - Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, - BackgroundColor = new List { colors[1] }, - BorderColor = new List { colors[1] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[1] }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - datasets.Add(dataset2); - - var dataset3 = new LineChartDataset() - { - Label = "Other", - Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, - BackgroundColor = new List { colors[2] }, - BorderColor = new List { colors[2] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[2] }, - PointRadius = new List { 0 }, // hide points - PointHoverRadius = new List { 4 }, - }; - datasets.Add(dataset3); - - chartData = new ChartData - { - Labels = labels, - Datasets = datasets - }; - - lineChartOptions = new(); - lineChartOptions.Responsive = true; - lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; - - lineChartOptions.Scales.X.Title.Text = "2019"; - lineChartOptions.Scales.X.Title.Display = true; - - lineChartOptions.Scales.Y.Title.Text = "Visitors"; - lineChartOptions.Scales.Y.Title.Display = true; - - lineChartOptions.Plugins.Title.Text = "Operating system"; - lineChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await lineChart.InitializeAsync(chartData, lineChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/line-chart#how-it-works) - -### Data labels - -Blazor Bootstrap: Line Chart Component - Data labels - -```cshtml {} showLineNumbers - -``` - -```cs {26,43,60,84,92} showLineNumbers -@code { - private LineChart lineChart = default!; - private LineChartOptions lineChartOptions = default!; - private ChartData chartData = default!; - - protected override void OnInitialized() - { - var colors = ColorBuilder.CategoricalTwelveColors; - - var labels = new List { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; - var datasets = new List(); - - var dataset1 = new LineChartDataset - { - Label = "Windows", - Data = new List { 7265791, 5899643, 6317759, 6315641, 5338211, 8496306, 7568556, 8538933, 8274297, 8657298, 7548388, 7764845 }, - BackgroundColor = new List { colors[0] }, - BorderColor = new List { colors[0] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[0] }, - PointRadius = new List { 3 }, // show points - PointHoverRadius = new List { 4 }, - - // datalabels - Datalabels = new() { Align = "end", Anchor = "end" } - }; - datasets.Add(dataset1); - - var dataset2 = new LineChartDataset - { - Label = "macOS", - Data = new List { 1809499, 1816642, 2122410, 1809499, 1850793, 1846743, 1954797, 2391313, 1983430, 2469918, 2633303, 2821149 }, - BackgroundColor = new List { colors[1] }, - BorderColor = new List { colors[1] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[1] }, - PointRadius = new List { 3 }, // show points - PointHoverRadius = new List { 4 }, - - // datalabels - Datalabels = new() { Align = "end", Anchor = "end" } - }; - datasets.Add(dataset2); - - var dataset3 = new LineChartDataset - { - Label = "Other", - Data = new List { 1081241, 1100363, 1118136, 1073255, 1120315, 1395736, 1488788, 1489466, 1489947, 1414739, 1735811, 1820171 }, - BackgroundColor = new List { colors[2] }, - BorderColor = new List { colors[2] }, - BorderWidth = new List { 2 }, - HoverBorderWidth = new List { 4 }, - PointBackgroundColor = new List { colors[2] }, - PointRadius = new List { 3 }, // show points - PointHoverRadius = new List { 4 }, - - // datalabels - Datalabels = new() { Align = "start", Anchor = "start" } - }; - datasets.Add(dataset3); - - chartData = new ChartData - { - Labels = labels, - Datasets = datasets - }; - - lineChartOptions = new(); - lineChartOptions.Responsive = true; - lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index }; - - lineChartOptions.Scales.X.Title.Text = "2019"; - lineChartOptions.Scales.X.Title.Display = true; - - lineChartOptions.Scales.Y.Title.Text = "Visitors"; - lineChartOptions.Scales.Y.Title.Display = true; - - lineChartOptions.Plugins.Title.Text = "Operating system"; - lineChartOptions.Plugins.Title.Display = true; - - // datalabels - lineChartOptions.Plugins.Datalabels.Color = "white"; - } +## Click events in 1.2.4 - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - // pass the plugin name to enable the data labels - await lineChart.InitializeAsync(chartData: chartData, chartOptions: lineChartOptions, plugins: new string[] { "ChartDataLabels" }); - } - await base.OnAfterRenderAsync(firstRender); - } +BlazorExpress.ChartJS 1.2.4 supports Line Chart data-point click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and API details. -} -``` +- [Official Line Chart documentation](https://chartjs.blazorexpress.com/docs/line-chart) +- [Original Line Chart demo](https://chartjs.blazorexpress.com/demos/line-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -[See the demo here.](https://demos.blazorbootstrap.com/charts/line-chart#data-labels) +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/docs/docs/06-data-visualization/pie-chart.mdx b/docs/docs/06-data-visualization/pie-chart.mdx index a0ffdbe49..292da5e6c 100644 --- a/docs/docs/06-data-visualization/pie-chart.mdx +++ b/docs/docs/06-data-visualization/pie-chart.mdx @@ -1,6 +1,6 @@ ---- -title: Blazor Pie Chart Component -description: A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. +--- +title: Blazor Pie Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor pie chart component, documentation, and original demos. image: https://i.imgur.com/dDpIuzk.png sidebar_label: Pie Chart @@ -9,567 +9,22 @@ sidebar_position: 4 import CarbonAd from '/carbon-ad.mdx' -# Blazor Pie Chart +# Blazor Pie Chart with BlazorExpress.ChartJS -A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. +The **Pie Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -Blazor Chart Component - Blazor Pie Chart - -## Parameters - -| Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Height | `int?` | null | | Gets or sets chart container height. | 1.0.0 | -| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets chart container height unit of measure. | 1.0.0 | -| Width | `int?` | null | | Gets or sets chart container width. | 1.0.0 | -| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets chart container width unit of measure. | 1.0.0 | - -## Methods - -| Name | Return type | Description | Added / Modified Version | -|:--|:--|:--|:--| -| AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) | `Task` | Adds data to chart. | 1.10.0 | -| AddDataAsync(ChartData chartData, string dataLabel, `List` data) | `Task` | Adds dataset to chart. | 1.10.0 | -| AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) | `Task` | Adds dataset to chart. | 1.10.0 || InitializeAsync | Task | Initialize Bar Chart. | 1.0.0 | -| InitializeAsync(ChartData chartData, IChartOptions chartOptions, `string[]?` plugins = null) | Task | Initialize the chat. | 1.0.0 | -| ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) | Task | Resize the chart. | 1.0.0 | -| UpdateAsync(ChartData chartData, IChartOptions chartOptions) | Task | Update the chart. | 1.0.0 | - -## ChartData Members - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Datasets | `List?` | null | ✔️ | Gets or sets the Datasets. | 1.0.0 | -| Labels | `List?` | null | ✔️ | Gets or sets the Labels. | 1.0.0 | - -## PieChartDataset Members - -:::info -**PieChartDataset** implements **IChartDataset** and inherits from the parent class **ChartDataset**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:-| -| BackgroundColor | `List?` | null | | Arc background color. | 1.0.0 | -| BorderAlign | `List?` | null | | Supported values are 'center' and 'inner'. When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap. | 3.0.0 | -| BorderColor | `List?` | null | | Arc border color. | 1.0.0 | -| BorderDash | `List` | null | | Arc border length and spacing of dashes. | 3.0.0 | -| BorderDashOffset | double | 0.0 | | Arc border offset for line dashes. | 3.0.0 | -| BorderJoinStyle | `List?` | null | | Arc border join style. Supported values are 'round', 'bevel', 'miter'. | 3.0.0 | -| BorderRadius | `List?` | null | | It is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). | 3.0.0 | -| BorderWidth | `List?` | null | | Arc border width (in pixels). | 1.0.0 | -| Circumference | double? | null | | Per-dataset override for the sweep that the arcs cover. | 3.0.0 | -| Clip | `string?` | null | | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | 1.0.0 | -| Data | `List?` | null | ✔️ | Get or sets the Data. | 1.0.0 | -| Datalabels | `PieChartDatasetDataLabels` | | | Get or sets the data labels | | 1.10.2 | -| Hidden | bool | false | | Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. | 1.0.0 | -| HoverBackgroundColor | `List?` | null | | Arc background color when hovered. | 1.0.0 | -| HoverBorderColor | `List?` | null | | Arc border color when hovered. | 1.0.0 | -| HoverBorderDash | `List?` | null | | Arc border length and spacing of dashes when hovered. | 3.0.0 | -| HoverBorderDashOffset | `double?` | null | | Arc border offset for line dashes when hovered. | 3.0.0 | -| HoverBorderJoinStyle | `List?` | null | | Arc border join style when hovered. Supported values are 'round', 'bevel', 'miter'. | 3.0.0 | -| HoverBorderWidth | `List?` | null | | Arc border width when hovered (in pixels). | 1.0.0 | -| HoverOffset | `List?` | null | | Arc offset when hovered (in pixels). | 3.0.0 | -| Offset| `List?` | null | | Arc offset (in pixels). | 3.0.0 | -| Order| int | 0 | | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | 3.0.0 | -| Label | `string?` | null | | The label for the dataset which appears in the legend and tooltips. | 3.0.0 | -| Rotation | `double?` | null | | Per-dataset override for the starting angle to draw arcs from. | 3.0.0 | -| Spacing | double | 0 | | Fixed arc offset (in pixels). Similar to `Offset` but applies to all arcs. | 3.0.0 | -| Weight | double | 1 | | The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values. | 3.0.0 | - -## PieChartDatasetDataLabels Members - -:::info -**PieChartDatasetDataLabels** inherits from the parent class **ChartDatasetDataLabels**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Alignment | `Alignment` | `Alignment.None` | | Gets or sets the data labels alignment. | 3.0.0 | -| Anchor | `Anchor` | `Anchor.None` | | Gets or sets the data labels anchor. | 3.0.0 | -| BorderWidth | double | 2 | | Gets or sets the border width | 3.0.0 | - -## PieChartOptions Members - -:::info -**PieChartOptions** inherits from the parent class **ChartOptions**. -::: - -| Property Name | Type | Default | Required | Description | Added / Modified Version | -|:--|:--|:--|:--|:--|:--| -| Locale | `string?` | | | Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. | 1.10.0 | -| MaintainAspectRatio | bool | true | | Maintain the original canvas aspect ratio (width / height) when resizing. | 3.0.0 | -| Plugins | `PieChartPlugins` | | | Gets or sets the Plugins. | 1.10.2 | -| Responsive | bool | false | | Resizes the chart canvas when its container does. | 1.0.0 | - -## Examples - -### Prerequisites - -Refer to the [getting started guide](/getting-started/blazor-webassembly) for setting up charts. - -### How it works - -In the following example, a [categorical 12-color](https://demos.blazorbootstrap.com/utils/color-utility) palette is used. - -:::tip -For data visualization, you can use the predefined palettes `ColorBuilder.CategoricalTwelveColors` for a 12-color palette and `ColorBuilder.CategoricalSixColors` 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. +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). ::: -Blazor Bootstrap: Pie Chart Component - How it works - -```cshtml {} showLineNumbers - - - - - -``` - -```cs {} showLineNumbers -@code { - private PieChart pieChart = default!; - private PieChartOptions pieChartOptions = default!; - private ChartData chartData = default!; - private string[]? backgroundColors; - - private int datasetsCount = 0; - private int dataLabelsCount = 0; - - private Random random = new(); - - protected override void OnInitialized() - { - backgroundColors = ColorBuilder.CategoricalTwelveColors; - chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; - - pieChartOptions = new(); - pieChartOptions.Responsive = true; - pieChartOptions.Plugins.Title.Text = "2022 - Sales"; - pieChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await pieChart.InitializeAsync(chartData, pieChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - foreach (var dataset in chartData.Datasets) - { - if (dataset is PieChartDataset pieChartDataset - && pieChartDataset is not null - && pieChartDataset.Data is not null) - { - var count = pieChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(0, 100)); - } - - pieChartDataset.Data = newData; - newDatasets.Add(pieChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await pieChart.UpdateAsync(chartData, pieChartOptions); - } - - private async Task AddDatasetAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - var chartDataset = GetRandomPieChartDataset(); - chartData = await pieChart.AddDatasetAsync(chartData, chartDataset, pieChartOptions); - } - - private async Task AddDataAsync() - { - if (dataLabelsCount >= 12) - return; - - if (chartData is null || chartData.Datasets is null) - return; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is PieChartDataset pieChartDataset) - data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); - } - - chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); - - dataLabelsCount += 1; - } - - #region Data Preparation - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - datasets.Add(GetRandomPieChartDataset()); - } - - return datasets; - } - - private PieChartDataset GetRandomPieChartDataset() - { - datasetsCount += 1; - return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - data.Add(random.Next(0, 100)); - } - - return data; - } - - private List GetRandomBackgroundColors() - { - var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - colors.Add(backgroundColors![index]); - } - - return colors; - } - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - labels.Add(GetNextDataLabel()); - dataLabelsCount += 1; - } - - return labels; - } - - private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; - - private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; - - #endregion Data Preparation -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/pie-chart#how-it-works) - -### Data labels - -Blazor Bootstrap: Pie Chart Component - Data labels - -```cshtml {} showLineNumbers - - - - -``` - -```cs {28,94,96,98} showLineNumbers -@code { - private PieChart pieChart = default!; - private PieChartOptions pieChartOptions = default!; - private ChartData chartData = default!; - private string[]? backgroundColors; - - private int datasetsCount = 0; - private int dataLabelsCount = 0; - - private Random random = new(); - - protected override void OnInitialized() - { - backgroundColors = ColorBuilder.CategoricalTwelveColors; - chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(3) }; - - pieChartOptions = new(); - pieChartOptions.Responsive = true; - pieChartOptions.Plugins.Title.Text = "2022 - Sales"; - pieChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - // pass the plugin name to enable the data labels - await pieChart.InitializeAsync(chartData: chartData, chartOptions: pieChartOptions, plugins: new string[] { "ChartDataLabels" }); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - foreach (var dataset in chartData.Datasets) - { - if (dataset is PieChartDataset pieChartDataset - && pieChartDataset is not null - && pieChartDataset.Data is not null) - { - var count = pieChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(0, 100)); - } - - pieChartDataset.Data = newData; - newDatasets.Add(pieChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await pieChart.UpdateAsync(chartData, pieChartOptions); - } - - private async Task AddDataAsync() - { - if (dataLabelsCount >= 12) - return; - - if (chartData is null || chartData.Datasets is null) - return; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is PieChartDataset pieChartDataset) - data.Add(new PieChartDatasetData(pieChartDataset.Label, random.Next(0, 100), backgroundColors![dataLabelsCount])); - } - - chartData = await pieChart.AddDataAsync(chartData, GetNextDataLabel(), data); - - dataLabelsCount += 1; - } - - #region Data Preparation - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - var dataset = GetRandomPieChartDataset(); - - if (index == 0) - dataset.Datalabels.Anchor = "end"; - else if (index == numberOfDatasets - 1) - dataset.Datalabels.Anchor = "end"; - else - dataset.Datalabels.Anchor = "center"; - - datasets.Add(dataset); - } - - return datasets; - } - - private PieChartDataset GetRandomPieChartDataset() - { - datasetsCount += 1; - return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - data.Add(random.Next(0, 100)); - } - - return data; - } - - private List GetRandomBackgroundColors() - { - var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - colors.Add(backgroundColors![index]); - } - - return colors; - } - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - labels.Add(GetNextDataLabel()); - dataLabelsCount += 1; - } - - return labels; - } - - private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; - - private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; - - #endregion Data Preparation -} -``` - -[See the demo here.](https://demos.blazorbootstrap.com/charts/pie-chart#data-labels) - -### Change legend position - -This sample demonstrates how to change the position of the chart legend. - -Blazor Bootstrap: Pie Chart Component - Change legend position - -```cshtml {3-6} showLineNumbers - - - - - - -``` - -```cshtml {22,34-37,39-43} showLineNumbers -@code { - private PieChart pieChart = default!; - private PieChartOptions pieChartOptions = default!; - private ChartData chartData = default!; - private string[]? backgroundColors; - - private int datasetsCount = 0; - private int dataLabelsCount = 0; - - private Random random = new(); - - protected override void OnInitialized() - { - backgroundColors = ColorBuilder.CategoricalTwelveColors; - chartData = new ChartData { Labels = GetDefaultDataLabels(4), Datasets = GetDefaultDataSets(1) }; - - pieChartOptions = new(); - pieChartOptions.Responsive = true; - pieChartOptions.Plugins.Title.Text = "2022 - Sales"; - pieChartOptions.Plugins.Title.Display = true; - - pieChartOptions.Plugins.Legend.Position = "right"; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await pieChart.InitializeAsync(chartData, pieChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task PositionTopAsync() => await UpdatePositionAsync("top"); - private async Task PositionRightAsync() => await UpdatePositionAsync("right"); - private async Task PositionBottomAsync() => await UpdatePositionAsync("bottom"); - private async Task PositionLeftAsync() => await UpdatePositionAsync("left"); - - private async Task UpdatePositionAsync(string position) - { - pieChartOptions.Plugins.Legend.Position = position; - await pieChart.UpdateAsync(chartData, pieChartOptions); - } - - #region Data Preparation - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - datasets.Add(GetRandomPieChartDataset()); - } - - return datasets; - } - - private PieChartDataset GetRandomPieChartDataset() - { - datasetsCount += 1; - return new() { Label = $"Team {datasetsCount}", Data = GetRandomData(), BackgroundColor = GetRandomBackgroundColors() }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - data.Add(random.Next(0, 100)); - } - - return data; - } - - private List GetRandomBackgroundColors() - { - var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - colors.Add(backgroundColors![index]); - } - - return colors; - } - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - labels.Add(GetNextDataLabel()); - dataLabelsCount += 1; - } - - return labels; - } - - private string GetNextDataLabel() => $"Product {dataLabelsCount + 1}"; +## Click events in 1.2.4 - private string GetNextDataBackgrounfColor() => backgroundColors![dataLabelsCount]; +BlazorExpress.ChartJS 1.2.4 supports Pie Chart slice click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and API details. - #endregion Data Preparation -} -``` +- [Official Pie Chart documentation](https://chartjs.blazorexpress.com/docs/pie-chart) +- [Original Pie Chart demo](https://chartjs.blazorexpress.com/demos/pie-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -[See the demo here.](https://demos.blazorbootstrap.com/charts/pie-chart#change-legend-position) +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/docs/docs/06-data-visualization/polar-area-chart.mdx b/docs/docs/06-data-visualization/polar-area-chart.mdx index 46a23011a..a4a5394ce 100644 --- a/docs/docs/06-data-visualization/polar-area-chart.mdx +++ b/docs/docs/06-data-visualization/polar-area-chart.mdx @@ -1,6 +1,6 @@ --- -title: Blazor Polar Area Chart Component -description: A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. +title: Blazor Polar Area Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor polar area chart component, documentation, and original demos. image: https://i.imgur.com/xLAqwGi.png sidebar_label: Polar Area Chart @@ -9,292 +9,22 @@ sidebar_position: 5 import CarbonAd from '/carbon-ad.mdx' -# Blazor Polar Area Chart +# Blazor Polar Area Chart with BlazorExpress.ChartJS -A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. +The **Polar Area Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -Blazor Chart Component - Blazor Polar Area Chart - -## Parameters - -| Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Height | `int?` | null | | Gets or sets chart container height. | 3.0.0 | -| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets chart container height unit of measure. | 3.0.0 | -| Width | `int?` | null | | Gets or sets chart container width. | 3.0.0 | -| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets chart container width unit of measure. | 3.0.0 | - -## Methods - -| Name | Return type | Description | Added Version | -|:--|:--|:--|:--| -| AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) | `Task` | Adds data to chart. | 3.0.0 | -| AddDataAsync(ChartData chartData, string dataLabel, `List` data) | `Task` | Adds dataset to chart. | 3.0.0 | -| AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) | `Task` | Adds dataset to chart. | 3.0.0 | -| InitializeAsync(ChartData chartData, IChartOptions chartOptions, `string[]?` plugins = null) | Task | Initialize the chat. | 3.0.0 | -| ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) | Task | Resize the chart. | 3.0.0 | -| UpdateAsync(ChartData chartData, IChartOptions chartOptions) | Task | Update the chart. | 3.0.0 | - -## ChartData Members - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Datasets | `List` | null | ✔️ | Gets or sets the Datasets. | 3.0.0 | -| Labels | `List` | null | ✔️ | Gets or sets the Labels. | 3.0.0 | - -## PolarAreaChartDataset Members - -:::info -**PolarAreaChartDataset** implements **IChartDataset** and inherits from the parent class **ChartDataset**. -::: - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:-| -| BackgroundColor | `List?` | null | | Arc background color. | 3.0.0 | -| BorderAlign | `List?` | null | | Supported values are 'center' and 'inner'. When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap. | 3.0.0 | -| BorderColor | `List?` | null | | Arc border color. | 3.0.0 | -| BorderDash | `List?` | null | | Arc border length and spacing of dashes. | 3.0.0 | -| BorderDashOffset | double | 0.0 | | Arc border offset for line dashes. | 3.0.0 | -| BorderJoinStyle | `List?` | null | | Arc border join style. Supported values are 'round', 'bevel', 'miter'. | 3.0.0 | -| BorderWidth | `List?` | null | | Arc border width (in pixels). | 3.0.0 | -| Circular | bool | true | | By default the Arc is curved. If false, the Arc will be flat. | 3.0.0 | -| Clip | `string?` | null | | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | 3.0.0 | -| Data | `List?` | null | ✔️ | Get or sets the Data. | 3.0.0 | -| Datalabels | `PieChartDatasetDataLabels` | | | Get or sets the data labels | 3.0.0 | -| Hidden | bool | false | | Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. | 3.0.0 | -| HoverBackgroundColor | `List?` | null | | Arc background color when hovered. | 3.0.0 | -| HoverBorderColor | `List?` | null | | Arc border color when hovered. | 3.0.0 | -| HoverBorderDash | `List?` | null | | Arc border length and spacing of dashes when hovered. | 3.0.0 | -| HoverBorderDashOffset | `double?` | null | | Arc border offset for line dashes when hovered. | 3.0.0 | -| HoverBorderJoinStyle | `List?` | null | Arc border join style when hovered. Supported values are 'round', 'bevel', 'miter'. | 3.0.0 | -| HoverBorderWidth | `List?` | null | | Arc border width when hovered (in pixels). | 3.0.0 | -| Label | `string?` | null | | The label for the dataset which appears in the legend and tooltips. | 3.0.0 | -| Order | int | 0 | | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | 3.0.0 | - -## PolarAreaChartDatasetDataLabels Members - -:::info -**PolarAreaChartDatasetDataLabels** inherits from the parent class **ChartDatasetDataLabels**. -::: - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Alignment | `Alignment` | `Alignment.None` | | Gets or sets the data labels alignment. | 3.0.0 | -| Anchor | `Anchor` | `Anchor.None` | | Gets or sets the data labels anchor. | 3.0.0 | -| BorderWidth | double | 2 | | Gets or sets the border width | 3.0.0 | - -## PolarAreaChartOptions Members - -:::info -**PolarAreaChartOptions** inherits from the parent class **ChartOptions**. +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). ::: -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Locale | `string?` | | | Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. | 3.0.0 | -| MaintainAspectRatio | bool | true | | Maintain the original canvas aspect ratio (width / height) when resizing. | 3.0.0 | -| Plugins | `PolarAreaChartPlugins` | | | Gets or sets the Plugins. | 3.0.0 | -| Responsive | bool | false | | Resizes the chart canvas when its container does. | 3.0.0 | - -## Examples - -### Prerequisites - -Refer to the [getting started guide](/getting-started/blazor-webassembly) for setting up charts. - -### How it works - -In the following example, a [categorical 12-color](https://demos.blazorbootstrap.com/utils/color-utility) palette is used. - -:::tip -For data visualization, you can use the predefined palettes `ColorBuilder.CategoricalTwelveColors` for a 12-color palette and `ColorBuilder.CategoricalSixColors` 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. -::: - -Blazor Bootstrap: Polar Area Chart Component - How it works - -```cshtml {} showLineNumbers - - -
- - - -
-``` - -```cs {} showLineNumbers -@code { - private PolarAreaChart polarAreaChart = default!; - private PolarAreaChartOptions polarAreaChartOptions = default!; - private ChartData chartData = default!; - private string[]? chartColors; - - private int datasetsCount = 0; - private int dataLabelsCount = 0; - - private Random random = new(); - - protected override void OnInitialized() - { - chartColors = ColorUtility.CategoricalTwelveColors; - chartData = new ChartData { Labels = GetDefaultDataLabels(5), Datasets = GetDefaultDataSets(1) }; - polarAreaChartOptions = new(); - polarAreaChartOptions.Responsive = true; - polarAreaChartOptions.Plugins.Title!.Text = "2022 - Sales"; - polarAreaChartOptions.Plugins.Title.Display = true; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await polarAreaChart.InitializeAsync(chartData, polarAreaChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - foreach (var dataset in chartData.Datasets) - { - if (dataset is PolarAreaChartDataset polarAreaChartDataset - && polarAreaChartDataset is not null - && polarAreaChartDataset.Data is not null) - { - var count = polarAreaChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(0, 100)); - } - - var backgroundColors = new List(); - for (var index = 0; index < count; index++) - { - backgroundColors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA - } - - polarAreaChartDataset.Data = newData; - polarAreaChartDataset.BackgroundColor = backgroundColors; - newDatasets.Add(polarAreaChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await polarAreaChart.UpdateAsync(chartData, polarAreaChartOptions); - } - - private async Task AddDatasetAsync() - { - if (chartData is null || chartData.Datasets is null) return; - - var chartDataset = GetRandomPolarAreaChartDataset(); - chartData = await polarAreaChart.AddDatasetAsync(chartData, chartDataset, polarAreaChartOptions); - } - - private async Task AddDataAsync() - { - if (dataLabelsCount >= 12) - return; - - if (chartData is null || chartData.Datasets is null) - return; - - dataLabelsCount += 1; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is PolarAreaChartDataset polarAreaChartDataset) - data.Add(new PolarAreaChartDatasetData(polarAreaChartDataset.Label, random.Next(0, 100), chartColors![dataLabelsCount - 1].ToColor().ToRgbaString(0.5), null)); - } - - chartData = await polarAreaChart.AddDataAsync(chartData, GetNextDataLabel(), data); - } - - #region Data Preparation - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - dataLabelsCount += 1; - labels.Add(GetNextDataLabel()); - } - - return labels; - } - - private string GetNextDataLabel() => $"Product {dataLabelsCount}"; - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - datasets.Add(GetRandomPolarAreaChartDataset()); - } - - return datasets; - } - - private PolarAreaChartDataset GetRandomPolarAreaChartDataset() - { - datasetsCount += 1; - return new() - { - Label = $"Team {datasetsCount}", - Data = GetRandomData(), - BackgroundColor = GetRandomBackgroundColors() - }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - data.Add(random.Next(0, 100)); - } - - return data; - } - - private List GetRandomBackgroundColors() - { - var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - colors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA - } - - return colors; - } - - private List GetRandomBorderColors() - { - var colors = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - colors.Add(chartColors![index].ToColor().ToRgbString()); // RGB - } +## Click events in 1.2.4 - return colors; - } +BlazorExpress.ChartJS 1.2.4 supports Polar Area Chart segment click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and API details. - #endregion Data Preparation -} -``` +- [Official Polar Area Chart documentation](https://chartjs.blazorexpress.com/docs/polar-area-chart) +- [Original Polar Area Chart demo](https://chartjs.blazorexpress.com/demos/polar-area-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -[See the demo here.](https://demos.blazorbootstrap.com/charts/polar-area-chart#how-it-works) +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/docs/docs/06-data-visualization/radar-chart.mdx b/docs/docs/06-data-visualization/radar-chart.mdx index 1dd2d7e3a..7ea421272 100644 --- a/docs/docs/06-data-visualization/radar-chart.mdx +++ b/docs/docs/06-data-visualization/radar-chart.mdx @@ -1,6 +1,6 @@ --- -title: Blazor Radar Chart Component -description: A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. +title: Blazor Radar Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor radar chart component, documentation, and original demos. image: https://i.imgur.com/Urrb79M.png sidebar_label: Radar Chart @@ -9,284 +9,22 @@ sidebar_position: 6 import CarbonAd from '/carbon-ad.mdx' -# Blazor Radar Chart +# Blazor Radar Chart with BlazorExpress.ChartJS -A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets. +The **Radar Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -Blazor Chart Component - Blazor Radar Chart - -## Parameters - -| Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Height | `int?` | null | | Gets or sets chart container height. | 3.0.0 | -| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets chart container height unit of measure. | 3.0.0 | -| Width | `int?` | null | | Gets or sets chart container width. | 3.0.0 | -| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets chart container width unit of measure. | 3.0.0 | - -## Methods - -| Name | Return type | Description | Added Version | -|:--|:--|:--|:--| -| AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) | `Task` | Adds data to chart. | 3.0.0 | -| AddDataAsync(ChartData chartData, string dataLabel, `List` data) | `Task` | Adds dataset to chart. | 3.0.0 | -| AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) | `Task` | Adds dataset to chart. | 1.10.0 || InitializeAsync | Task | Initialize Bar Chart. | 3.0.0 | -| InitializeAsync(ChartData chartData, IChartOptions chartOptions, `string[]?` plugins = null) | Task | Initialize the chat. | 3.0.0 | -| ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) | Task | Resize the chart. | 3.0.0 | -| UpdateAsync(ChartData chartData, IChartOptions chartOptions) | Task | Update the chart. | 3.0.0 | - -## ChartData Members - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Datasets | `List` | null | ✔️ | Gets or sets the Datasets. | 3.0.0 | -| Labels | `List` | null | ✔️ | Gets or sets the Labels. | 3.0.0 | - -## RadarChartDataset Members - -:::info -**RadarChartDataset** implements **IChartDataset** and inherits from the parent class **ChartDataset**. +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). ::: -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:-| -| BackgroundColor | string | `rgba(0, 0, 0, 0.1)` | | Get or sets the line fill color. | 3.0.0 | -| BorderCapStyle | string | `butt` | | Cap style of the line. Supported values are 'butt', 'round', and 'square'. | 3.0.0 | -| BorderColor | string | `rgba(0, 0, 0, 0.1)` | | Get or sets the line color. | 3.0.0 | -| BorderDash | `List?` | null | | Gets or sets the length and spacing of dashes. | 3.0.0 | -| BorderDashOffset | double | 0.0 | | Offset for line dashes. | 3.0.0 | -| BorderJoinStyle | string | `miter` | | Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. | 3.0.0 | -| BorderWidth | double | 3 | | Gets or sets the line width (in pixels). | 3.0.0 | -| Clip | `string?` | null | | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | 1.0.0 | -| Data | `List?` | null | ✔️ | Get or sets the Data. | 3.0.0 | -| Datalabels | `PieChartDatasetDataLabels` | | | Get or sets the data labels | 3.0.0 | -| Fill | bool | false | | How to fill the area under the line. | 3.0.0 | -| Hidden | bool | false | | Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. | 3.0.0 | -| HoverBackgroundColor | `string?` | null | | The line fill color when hovered. | 3.0.0 | -| HoverBorderCapStyle | `string?` | null | | Cap style of the line when hovered. | 3.0.0 | -| HoverBorderColor | `string?` | null | | The line color when hovered. | 3.0.0 | -| HoverBorderDash | `List?` | null | | Gets or sets the length and spacing of dashes when hovered. | 3.0.0 | -| HoverBorderDashOffset | `double?` | null | | Offset for line dashes when hovered. | 3.0.0 | -| HoverBorderJoinStyle | string | `miter` | | Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. | 3.0.0 | -| HoverBorderWidth | `double?` | null | | The bar border width when hovered (in pixels) when hovered. | 3.0.0 | -| Label | `string?` | null | | The label for the dataset which appears in the legend and tooltips. | 3.0.0 | -| Order | int | 0 | | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | 3.0.0 | -| PointBackgroundColor | `List?` | null | | The fill color for points. | 3.0.0 | -| PointBorderColor | `List?` | null | | The border color for points. | 3.0.0 | -| PointBorderWidth | `List?` | null | | The width of the point border in pixels. | 3.0.0 | -| PointHitRadius | `List?` | null | | The pixel size of the non-displayed point that reacts to mouse events. | 3.0.0 | -| PointHoverBackgroundColor | `List?` | null | | Point background color when hovered. | 3.0.0 | -| PointHoverBorderColor | `List?` | null | | Point border color when hovered. | 3.0.0 | -| PointHoverBorderWidth | `List?` | null | | Border width of point when hovered. | 3.0.0 | -| PointHoverRadius | `List?` | null | | The radius of the point when hovered. | 3.0.0 | -| PointRadius | `List?` | null | | The radius of the point shape. If set to 0, the point is not rendered. | 3.0.0 | -| PointRotation | `List?` | null | | The rotation of the point in degrees. | 3.0.0 | -| PointStyle | `List?` | null | | Style of the point. Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style. | 3.0.0 | -| SpanGaps | `bool?` | null | | If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. | 3.0.0 | -| Tension | double | 0 | | Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used. | 3.0.0 | - -## RadarChartDatasetDataLabels Members - -:::info -**RadarChartDatasetDataLabels** inherits from the parent class **ChartDatasetDataLabels**. -::: - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Alignment | `Alignment` | `Alignment.None` | | Gets or sets the data labels alignment. | 3.0.0 | -| Anchor | `Anchor` | `Anchor.None` | | Gets or sets the data labels anchor. | 3.0.0 | -| BorderWidth | double | 2 | | Gets or sets the border width | 3.0.0 | - -## RadarChartOptions Members - -:::info -**RadarChartOptions** inherits from the parent class **ChartOptions**. -::: - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Locale | `string?` | | | Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. | 3.0.0 | -| MaintainAspectRatio | bool | true | | Maintain the original canvas aspect ratio (width / height) when resizing. | 3.0.0 | -| Responsive | bool | false | | Gets or sets the Responsive. | 3.0.0 | - -## Examples - -### Prerequisites - -Refer to the [getting started guide](/getting-started/blazor-webassembly) for setting up charts. - -### How it works - -In the following example, a [categorical 12-color](https://demos.blazorbootstrap.com/utils/color-utility) palette is used. - -:::tip -For data visualization, you can use the predefined palettes `ColorBuilder.CategoricalTwelveColors` for a 12-color palette and `ColorBuilder.CategoricalSixColors` 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. -::: - -Blazor Bootstrap: Radar Chart Component - How it works - -```cshtml {} showLineNumbers - - -
- - - -
-``` - -```cs {} showLineNumbers -@code { - private RadarChart radarChart = default!; - private RadarChartOptions radarChartOptions = default!; - private ChartData chartData = default!; - private string[]? chartColors; - - private int datasetsCount; - private int dataLabelsCount; - - private Random random = new(); - - protected override void OnInitialized() - { - chartColors = ColorUtility.CategoricalTwelveColors; - chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; - radarChartOptions = new() { Responsive = true }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await radarChart.InitializeAsync(chartData, radarChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - private async Task RandomizeAsync() - { - if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return; - - var newDatasets = new List(); - - foreach (var dataset in chartData.Datasets) - { - if (dataset is RadarChartDataset radarChartDataset - && radarChartDataset is not null - && radarChartDataset.Data is not null) - { - var count = radarChartDataset.Data.Count; - - var newData = new List(); - for (var i = 0; i < count; i++) - { - newData.Add(random.Next(200)); - } - - radarChartDataset.Data = newData; - newDatasets.Add(radarChartDataset); - } - } - - chartData.Datasets = newDatasets; - - await radarChart.UpdateAsync(chartData, radarChartOptions); - } - - private async Task AddDatasetAsync() - { - if (datasetsCount >= 12) - return; - - if (chartData is null || chartData.Datasets is null) return; - - var chartDataset = GetRandomRadarChartDataset(); - chartData = await radarChart.AddDatasetAsync(chartData, chartDataset, radarChartOptions); - } - - private async Task AddDataAsync() - { - if (dataLabelsCount >= 12) - return; - - if (chartData is null || chartData.Datasets is null) - return; - - dataLabelsCount += 1; - - var data = new List(); - foreach (var dataset in chartData.Datasets) - { - if (dataset is RadarChartDataset radarChartDataset) - data.Add(new RadarChartDatasetData(radarChartDataset.Label, random.Next(200))); - } - - chartData = await radarChart.AddDataAsync(chartData, GetNextDataLabel(), data); - } - - #region Data Preparation - - private List GetDefaultDataLabels(int numberOfLabels) - { - var labels = new List(); - for (var index = 0; index < numberOfLabels; index++) - { - dataLabelsCount += 1; - labels.Add(GetNextDataLabel()); - } - - return labels; - } - - private string GetNextDataLabel() => $"Day {dataLabelsCount}"; - - private List GetDefaultDataSets(int numberOfDatasets) - { - var datasets = new List(); - - for (var index = 0; index < numberOfDatasets; index++) - { - datasets.Add(GetRandomRadarChartDataset()); - } - - return datasets; - } - - private RadarChartDataset GetRandomRadarChartDataset() - { - var c = chartColors![datasetsCount].ToColor(); - - datasetsCount += 1; - - return new RadarChartDataset - { - Label = $"Team {datasetsCount}", - Data = GetRandomData(), - BackgroundColor = c.ToRgbaString(), - BorderColor = c.ToRgbaString(0.8), - BorderWidth = 2, - Fill = true, - HoverBorderWidth = 4, - }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < dataLabelsCount; index++) - { - data.Add(random.Next(200)); - } - - return data; - } +## Click events in 1.2.4 - #endregion Data Preparation +BlazorExpress.ChartJS 1.2.4 supports Radar Chart data-point click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and API details. -} -``` +- [Official Radar Chart documentation](https://chartjs.blazorexpress.com/docs/radar-chart) +- [Original Radar Chart demo](https://chartjs.blazorexpress.com/demos/radar-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -[See the demo here.](https://demos.blazorbootstrap.com/charts/radar-chart#how-it-works) +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/docs/docs/06-data-visualization/scatter-chart.mdx b/docs/docs/06-data-visualization/scatter-chart.mdx index ef37d805b..e140687da 100644 --- a/docs/docs/06-data-visualization/scatter-chart.mdx +++ b/docs/docs/06-data-visualization/scatter-chart.mdx @@ -1,6 +1,6 @@ --- -title: Blazor Scatter Chart Component -description: A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. +title: Blazor Scatter Chart with BlazorExpress.ChartJS +description: Use the dedicated BlazorExpress.ChartJS package for the Blazor scatter chart component, documentation, and original demos. image: https://i.imgur.com/GEox0tS.png sidebar_label: Scatter Chart @@ -9,222 +9,22 @@ sidebar_position: 7 import CarbonAd from '/carbon-ad.mdx' -# Blazor Scatter Chart +# Blazor Scatter Chart with BlazorExpress.ChartJS -A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. +The **Scatter Chart** component is no longer shipped by BlazorBootstrap. Use the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package for the current component and API. -Blazor Chart Component - Blazor Scatter Chart - -## Parameters - -| Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Height | `int?` | null | | Gets or sets chart container height. | 3.0.0 | -| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets chart container height unit of measure. | 3.0.0 | -| Width | `int?` | null | | Gets or sets chart container width. | 3.0.0 | -| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets chart container width unit of measure. | 3.0.0 | - -## Methods - -| Name | Return type | Description | Added Version | -|:--|:--|:--|:--| -| AddDataAsync(ChartData chartData, string dataLabel, IChartDatasetData data) | `Task` | Adds data to chart. | 3.0.0 | -| AddDataAsync(ChartData chartData, string dataLabel, `List` data) | `Task` | Adds dataset to chart. | 3.0.0 | -| AddDatasetAsync(ChartData chartData, IChartDataset chartDataset, IChartOptions chartOptions) | `Task` | Adds dataset to chart. | 3.0.0 | -| InitializeAsync(ChartData chartData, IChartOptions chartOptions, `string[]?` plugins = null) | Task | Initialize the chat. | 3.0.0 | -| ResizeAsync(int width, int height, Unit widthUnit = Unit.Px, Unit heightUnit = Unit.Px) | Task | Resize the chart. | 3.0.0 | -| UpdateAsync(ChartData chartData, IChartOptions chartOptions) | Task | Update the chart. | 3.0.0 | - -## ChartData Members - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Datasets | `List` | null | ✔️ | Gets or sets the Datasets. | 3.0.0 | -| Labels | `List` | null | ✔️ | Gets or sets the Labels. | 3.0.0 | - -## PieChartDataset Members - -:::info -**RadarChartDataset** implements **IChartDataset** and inherits from the parent class **ChartDataset**. -::: - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:-| -| BackgroundColor | string | `rgba(0, 0, 0, 0.1)` | | Get or sets the line fill color. | 3.0.0 | -| BorderCapStyle | string | `butt` | | Cap style of the line. Supported values are 'butt', 'round', and 'square'. | 3.0.0 | -| BorderColor | string | `rgba(0, 0, 0, 0.1)` | | Get or sets the line color. | 3.0.0 | -| BorderDash | `List?` | null | | Gets or sets the length and spacing of dashes. | 3.0.0 | -| BorderDashOffset | double | 0.0 | | Offset for line dashes. | 3.0.0 | -| BorderJoinStyle | string | `miter` | | Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. | 3.0.0 | -| BorderWidth | double | 3 | | Gets or sets the line width (in pixels). | 3.0.0 | -| Clip | `string?` | null | | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` | 1.0.0 | -| CubicInterpolationMode | string | `default` | | Supported values are 'default', and 'monotone'. | 3.0.0 | -| Data | `List?` | null | ✔️ | Get or sets the Data. | 3.0.0 | -| Datalabels | `PieChartDatasetDataLabels` | | | Get or sets the data labels | 3.0.0 | -| DrawActiveElementsOnTop | `List?` | null | | Draw the active points of a dataset over the other points of the dataset. | 3.0.0 | -| Fill | bool | false | | How to fill the area under the line. | 3.0.0 | -| Hidden | bool | false | | Configures the visibility state of the dataset. Set it to true, to hide the dataset from the chart. | 3.0.0 | -| HoverBackgroundColor | `string?` | null | | The line fill color when hovered. | 3.0.0 | -| HoverBorderCapStyle | `string?` | null | | Cap style of the line when hovered. | 3.0.0 | -| HoverBorderColor | `string?` | null | | The line color when hovered. | 3.0.0 | -| HoverBorderDash | `List?` | null | | Gets or sets the length and spacing of dashes when hovered. | 3.0.0 | -| HoverBorderDashOffset | `double?` | null | | Offset for line dashes when hovered. | 3.0.0 | -| HoverBorderJoinStyle | string | `miter` | | Line joint style. There are three possible values for this property: 'round', 'bevel', and 'miter'. | 3.0.0 | -| HoverBorderWidth | `double?` | null | | The bar border width when hovered (in pixels) when hovered. | 3.0.0 | -| IndexAxis | `string?` | null | | The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. | 3.0.0 | -| Label | `string?` | null | | The label for the dataset which appears in the legend and tooltips. | 3.0.0 | -| Order | int | 0 | | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | 3.0.0 | -| PointBackgroundColor | `List?` | null | | The fill color for points. | 3.0.0 | -| PointBorderColor | `List?` | null | | The border color for points. | 3.0.0 | -| PointBorderWidth | `List?` | null | | The width of the point border in pixels. | 3.0.0 | -| PointHitRadius | `List?` | null | | The pixel size of the non-displayed point that reacts to mouse events. | 3.0.0 | -| PointHoverBackgroundColor | `List?` | null | | Point background color when hovered. | 3.0.0 | -| PointHoverBorderColor | `List?` | null | | Point border color when hovered. | 3.0.0 | -| PointHoverBorderWidth | `List?` | null | | Border width of point when hovered. | 3.0.0 | -| PointHoverRadius | `List?` | null | | The radius of the point when hovered. | 3.0.0 | -| PointRadius | `List?` | null | | The radius of the point shape. If set to 0, the point is not rendered. | 3.0.0 | -| PointRotation | `List?` | null | | The rotation of the point in degrees. | 3.0.0 | -| PointStyle | `List?` | null | | Style of the point. Supported values are 'circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', and 'triangle' to style. | 3.0.0 | -| ShowLine | bool | false | | If false, the lines between points are not drawn. By default, the scatter chart will override the showLine property of the line chart to false. | 3.0.0 | -| SpanGaps | `bool?` | null | | If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used. | 3.0.0 | -| Stepped | bool | false | | true to show the line as a stepped line (tension will be ignored). | 3.0.0 | -| Tension | double | 0 | | Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used. | 3.0.0 | -| XAxisID | `string?` | null | | The ID of the x axis to plot this dataset on. | 3.0.0 | -| YAxisID | `string?` | null | | The ID of the y axis to plot this dataset on. | 3.0.0 | - -## ScatterChartDataPoint Members - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| X | double | 0 | | Gets or sets the x axis value. | 3.0.0 | -| Y | double | 0 | | Gets or sets the y axis value. | 3.0.0 | - -## ScatterChartDatasetDataLabels Members - -:::info -**ScatterChartDatasetDataLabels** inherits from the parent class **ChartDatasetDataLabels**. -::: - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Alignment | `Alignment` | `Alignment.None` | | Gets or sets the data labels alignment. | 3.0.0 | -| Anchor | `Anchor` | `Anchor.None` | | Gets or sets the data labels anchor. | 3.0.0 | -| BorderWidth | double | 2 | | Gets or sets the border width | 3.0.0 | - -## ScatterChartOptions Members - -:::info -**ScatterChartOptions** inherits from the parent class **ChartOptions**. -::: - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Animation | `ChartAnimation?` | null | | Configures chart-level animation including delay, duration, easing, and looping. | 4.0.0 | -| AspectRatio | `double?` | null | | Sets the canvas aspect ratio (`width / height`) when responsive resizing is enabled. | 4.0.0 | -| IndexAxis | `string?` | null | | The base axis of the chart. 'x' for vertical charts and 'y' for horizontal charts. | 3.0.0 | -| Interaction | `Interaction` | | | Gets or sets the Interaction. | 3.0.0 | -| Layout | `ChartLayout` | | | Gets or sets the ChartLayout. | 3.0.0 | -| Locale | `string?` | | | Gets or sets the locale. By default, the chart is using the default locale of the platform which is running on. | 3.0.0 | -| MaintainAspectRatio | bool | true | | Maintain the original canvas aspect ratio (width / height) when resizing. | 3.0.0 | -| Plugins | `ScatterChartPlugins` | | | Gets or sets the Plugins. | 3.0.0 | -| ResizeDelay | `int?` | null | | Delays the resize update by the given number of milliseconds. | 4.0.0 | -| Responsive | bool | false | | Gets or sets the Responsive. | 3.0.0 | -| Scales | `Scales` | | | Gets or sets the Scales. | 3.0.0 | - -## Interaction Members - -| Property Name | Type | Default | Required | Description | Added Version | -|:--|:--|:--|:--|:--|:--| -| Axis | `InteractionAxis?` | null | | Defines which directions are used in calculating distances. Supported values are `X`, `Y`, `XY`, and `R`. | 4.0.0 | -| IncludeInvisible | `bool?` | null | | Includes invisible points outside the chart area when evaluating interactions. | 4.0.0 | -| Intersect | bool | true | | If true, the interaction mode only applies when the mouse position intersects an item on the chart. | 3.0.0 | -| Mode | `InteractionMode` | `Nearest` | | Sets which elements appear in the interaction. | 3.0.0 | - -## Examples - -### Prerequisites - -Refer to the [getting started guide](/getting-started/blazor-webassembly) for setting up charts. - -### How it works - -In the following example, a [categorical 12-color](https://demos.blazorbootstrap.com/utils/color-utility) palette is used. - -:::tip -For data visualization, you can use the predefined palettes `ColorBuilder.CategoricalTwelveColors` for a 12-color palette and `ColorBuilder.CategoricalSixColors` 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. +:::warning Migrating from the former BlazorBootstrap chart +Install BlazorExpress.ChartJS, import its namespace, load its browser scripts, and update your chart code to the dedicated package API. See the [chart migration and setup guide](/components/charts). ::: -Blazor Bootstrap: Pie Chart Component - How it works - -```cshtml {} showLineNumbers - -``` - -```cs {} showLineNumbers -@code { - private ScatterChart scatterChart = default!; - private ScatterChartOptions scatterChartOptions = default!; - private ChartData chartData = default!; - - private Random random = new(); - - protected override void OnInitialized() - { - chartData = new ChartData - { - Datasets = new() - { - GetRandomRadarChartDataset(0), - GetRandomRadarChartDataset(1), - GetRandomRadarChartDataset(2) - } - }; - - scatterChartOptions = new() { }; - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - await scatterChart.InitializeAsync(chartData, scatterChartOptions); - } - await base.OnAfterRenderAsync(firstRender); - } - - #region Data Preparation - - private ScatterChartDataset GetRandomRadarChartDataset(int recordIndex) - { - var c = ColorUtility.CategoricalTwelveColors[recordIndex].ToColor(); - - return new ScatterChartDataset - { - Label = $"Team {recordIndex + 1}", - Data = GetRandomData(), - BackgroundColor = c.ToRgbaString(), // RGBA - BorderColor = c.ToRgbString(), // RGB - BorderWidth = 2, - HoverBorderWidth = 4, - }; - } - - private List GetRandomData() - { - var data = new List(); - for (var index = 0; index < 10; index++) - { - data.Add(new(random.Next(200), random.Next(200))); - } +## Click events in 1.2.4 - return data; - } +BlazorExpress.ChartJS 1.2.4 supports Scatter Chart point click callbacks with `OnClick` and `ChartClickEventArgs`. Use the official documentation and original demo below for the package-owned click-event example and structured raw-coordinate details. - #endregion Data Preparation -} -``` +- [Official Scatter Chart documentation](https://chartjs.blazorexpress.com/docs/scatter-chart) +- [Original Scatter Chart demo](https://chartjs.blazorexpress.com/demos/scatter-chart) +- [BlazorExpress.ChartJS GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS) -[See the demo here.](https://demos.blazorbootstrap.com/charts/scatter-chart#how-it-works) +We recommend checking the original BlazorExpress.ChartJS demo before adapting advanced examples. diff --git a/nuget/README.md b/nuget/README.md index f707b8224..40f4038ff 100644 --- a/nuget/README.md +++ b/nuget/README.md @@ -1,4 +1,4 @@ -# Blazor Bootstrap Component Library +# Blazor Bootstrap Component Library ### An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks. @@ -30,6 +30,11 @@ Get started any way you want - [Demo Website - Blazor Server](https://demos.blazorbootstrap.com/) - [Demo Website - Blazor WebAssembly](https://demos.getblazorbootstrap.com/) +## Charts + +Chart components have moved out of BlazorBootstrap and are now provided by the dedicated [BlazorExpress.ChartJS](https://chartjs.blazorexpress.com/) package. + +This is a breaking change for existing chart users: install `BlazorExpress.ChartJS`, import its namespace, load its browser scripts, and migrate from the former BlazorBootstrap chart API. See the [migration and setup guide](https://docs.blazorbootstrap.com/components/charts), the [GitHub repository](https://github.com/BlazorExpress/BlazorExpress.ChartJS), and the [original demos](https://chartjs.blazorexpress.com/demos/bar-chart). ## Blazor Bootstrap Components | Component Name | Docs | Demos | @@ -43,13 +48,6 @@ Get started any way you want | Callout | [Docs](https://docs.blazorbootstrap.com/components/callout) | [Demos](https://demos.blazorbootstrap.com/callout) | | Card | [Docs](https://docs.blazorbootstrap.com/components/card) | [Demos](https://demos.blazorbootstrap.com/card) | | Carousel | [Docs](https://docs.blazorbootstrap.com/components/carousel) | [Demos](https://demos.blazorbootstrap.com/carousel) | -| Charts: Bar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/bar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/bar-chart) | -| Charts: Doughnut chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/doughnut-chart) | [Demos](https://demos.blazorbootstrap.com/charts/doughnut-chart) | -| Charts: Line chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/line-chart) | [Demos](https://demos.blazorbootstrap.com/charts/line-chart) | -| Charts: Pie chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/pie-chart) | [Demos](https://demos.blazorbootstrap.com/charts/pie-chart) | -| Charts: Polar Area chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/polar-area-chart) | [Demos](https://demos.blazorbootstrap.com/charts/polar-area-chart) | -| Charts: Radar chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/radar-chart) | [Demos](https://demos.blazorbootstrap.com/charts/radar-chart) | -| Charts: Scatter chart | [Docs](https://docs.blazorbootstrap.com/data-visualization/scatter-chart) | [Demos](https://demos.blazorbootstrap.com/charts/scatter-chart) | | Checkbox Input | [Docs](https://docs.blazorbootstrap.com/forms/checkbox-input) | [Demos](https://demos.blazorbootstrap.com/form/checkbox-input) | | Collapse | [Docs](https://docs.blazorbootstrap.com/components/collapse) | [Demos](https://demos.blazorbootstrap.com/collapse) | | Confirm Dialog | [Docs](https://docs.blazorbootstrap.com/components/confirm-dialog) | [Demos](https://demos.blazorbootstrap.com/confirm-dialog) |