From 6bec9b9b9b9fcf02ae481a3b4df65f80b6e70bce Mon Sep 17 00:00:00 2001 From: Mischa Spelt Date: Thu, 1 Aug 2024 10:05:52 +0200 Subject: [PATCH 1/7] Add LineChartDataset Fill options --- .../LineChart/LineChartDataset.cs | 81 ++++++++++++++++++- 1 file changed, 79 insertions(+), 2 deletions(-) diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index 8342eebf5..9351bad9e 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -1,4 +1,8 @@ -namespace BlazorBootstrap; +using System; +using System.ComponentModel.Design; +using System.Data; + +namespace BlazorBootstrap; /// /// The line chart allows a number of properties to be specified for each dataset. @@ -104,7 +108,80 @@ public class LineChartDataset : ChartDataset /// /// Default value is . /// - public bool Fill { get; set; } + public object Fill { get; set; } = false; + + 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" ) : index + 1; + return this; + } + + public LineChartDataset FillToDataset( ChartData chartData, IChartDataset dataset, bool relativeIndex = false ) + { + int index = chartData?.Datasets?.IndexOf( dataset ) ?? -1; + if( index < 0 ) + { + throw new ArgumentException( "The dataset is not in the chart data." ); + } + + if( relativeIndex ) + { + + int 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" ); + } + else + { + Fill = index + 1; + } + + return this; + } + + public LineChartDataset FillToStart() + { + Fill = "start"; + return this; + } + + public LineChartDataset FillToEnd() + { + Fill = "end"; + return this; + } + + public LineChartDataset FillToOrigin() + { + Fill = "origin"; + return this; + } + + public LineChartDataset FillToStackedValueBelow() + { + Fill = "stack"; + return this; + } + + public LineChartDataset FillToValue( double value ) + { + Fill = new { value }; + return this; + } /// /// The line fill color when hovered. From 214c08bd9cf6db919ac053ee5f9ae1160e603e9c Mon Sep 17 00:00:00 2001 From: Mischa Spelt Date: Wed, 7 Aug 2024 16:33:12 +0200 Subject: [PATCH 2/7] Updated documentation --- .../LineCharts/LineChartDocumentation.razor | 39 +- .../LineChart_Demo_06_Dataset_Fill.razor | 153 ++++ .../LineChart/LineChartDataset.cs | 704 +++++++++--------- 3 files changed, 544 insertions(+), 352 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index 2014949b1..e86b24b69 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -2,41 +2,41 @@ @title - +

Blazor Line Chart

- 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. + 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.
- Refer to the getting started guide for setting up charts. + Refer to the getting started guide for setting up charts.
- +
- In the following example, a categorical 12-color palette is used. + In the following example, a categorical 12-color palette is used.
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.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. + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.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. - +
- +
- 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). + 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).
- + - + @@ -45,9 +45,12 @@ + + + @code { - private readonly string pageUrl = "/charts/line-chart"; - private readonly string title = "Blazor Line Chart"; - private readonly string 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."; - private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png"; + private readonly string pageUrl = "/charts/line-chart"; + private readonly string title = "Blazor Line Chart"; + private readonly string 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."; + private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor new file mode 100644 index 000000000..c45109537 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor @@ -0,0 +1,153 @@ + + +
+ + + + + + + +
+ +@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( 4 ) }; + lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + } + + protected override async Task OnAfterRenderAsync( bool firstRender ) + { + if( firstRender ) + { + await lineChart.InitializeAsync( chartData, lineChartOptions ); + } + await base.OnAfterRenderAsync( firstRender ); + } + + public async Task NoFillAsync() + { + var middle = chartData.Datasets[ 1 ] as LineChartDataset; + middle!.Fill = null; + await lineChart.UpdateAsync( chartData, lineChartOptions ); + } + + public async Task FillToNextAsync() + { + var middle = chartData.Datasets[ 1 ] as LineChartDataset; + middle!.FillToDataset( 1, relativeIndex: true ); + await lineChart.UpdateAsync( chartData, lineChartOptions ); + } + + public async Task FillToZeroAsync() + { + var middle = chartData.Datasets[ 1 ] as LineChartDataset; + middle!.FillToDataset( 0, relativeIndex: false ); + await lineChart.UpdateAsync( chartData, lineChartOptions ); + } + + public async Task FillToReferenceAsync() + { + var middle = chartData.Datasets[ 1 ] as LineChartDataset; + var fillTo = chartData.Datasets[ 3 ] as LineChartDataset; + + middle!.FillToDataset( chartData, fillTo! ); + await lineChart.UpdateAsync( chartData, lineChartOptions ); + } + + public async Task FillToStartAsync() + { + var middle = chartData.Datasets[ 1 ] as LineChartDataset; + middle!.FillToStart(); + await lineChart.UpdateAsync( chartData, lineChartOptions ); + } + + public async Task FillToEndAsync() + { + var middle = chartData.Datasets[ 1 ] as LineChartDataset; + middle!.FillToEnd(); + await lineChart.UpdateAsync( chartData, lineChartOptions ); + } + + public async Task FillToValueAsync() + { + var middle = chartData.Datasets[ 1 ] as LineChartDataset; + middle!.FillToValue( 50.0 ); + 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 + +} \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index 9351bad9e..84b55e227 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -11,105 +11,112 @@ namespace BlazorBootstrap; ///
public class LineChartDataset : ChartDataset { - #region Properties, Indexers - - /// - /// Get or sets the line fill color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - 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'. - /// - public string BorderCapStyle { get; set; } = "butt"; - - /// - /// Get or sets the line color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Gets or sets the length and spacing of dashes. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? BorderDash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - public double BorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - public string BorderJoinStyle { get; set; } = "miter"; - - /// - /// Gets or sets the line width (in pixels). - /// - /// - /// Default value is 3. - /// - public double BorderWidth { get; set; } = 3; - - /// - /// . - /// Supported values are 'default', and 'monotone'. - /// - /// - /// Default value is 'default'. - /// - public string CubicInterpolationMode { get; set; } = "default"; - - /// - /// Get or sets the Data. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public new List? Data { get; set; } - - [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 . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? DrawActiveElementsOnTop { get; set; } - - /// - /// How to fill the area under the line. - /// - /// - /// Default value is . - /// + #region Properties, Indexers + + /// + /// Get or sets the line fill color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + 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'. + /// + public string BorderCapStyle { get; set; } = "butt"; + + /// + /// Get or sets the line color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; + + /// + /// Gets or sets the length and spacing of dashes. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? BorderDash { get; set; } + + /// + /// Offset for line dashes. + /// + /// + /// Default value is 0.0. + /// + public double BorderDashOffset { get; set; } + + /// + /// Line joint style. + /// There are three possible values for this property: 'round', 'bevel', and 'miter'. + /// + /// + /// Default value is 'miter'. + /// + public string BorderJoinStyle { get; set; } = "miter"; + + /// + /// Gets or sets the line width (in pixels). + /// + /// + /// Default value is 3. + /// + public double BorderWidth { get; set; } = 3; + + /// + /// . + /// Supported values are 'default', and 'monotone'. + /// + /// + /// Default value is 'default'. + /// + public string CubicInterpolationMode { get; set; } = "default"; + + /// + /// Get or sets the Data. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public new List? Data { get; set; } + + [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 . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? DrawActiveElementsOnTop { get; set; } + + /// + /// How to fill the area under the line. + /// + /// + /// Default value is . + /// public object Fill { get; set; } = false; + /// + /// 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. public LineChartDataset FillToDataset( int index, bool relativeIndex = false ) { if( relativeIndex && ( index == 0 ) ) @@ -117,10 +124,18 @@ public LineChartDataset FillToDataset( int index, bool relativeIndex = false ) throw new ArgumentException( "The relative index must be non-zero." ); } - Fill = relativeIndex ? index.ToString( "+0;-0" ) : index + 1; + Fill = relativeIndex ? index.ToString( "+0;-0" ) : 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. public LineChartDataset FillToDataset( ChartData chartData, IChartDataset dataset, bool relativeIndex = false ) { int index = chartData?.Datasets?.IndexOf( dataset ) ?? -1; @@ -147,277 +162,298 @@ public LineChartDataset FillToDataset( ChartData chartData, IChartDataset datase } else { - Fill = index + 1; + Fill = index; } return this; } + /// + /// Fills between the current dataset and the start (fill: 'start'). + /// + /// The dataset, for method chaining public LineChartDataset FillToStart() { Fill = "start"; return this; } + /// + /// Fills between the current dataset and the top of the chart (fill: 'end'). + /// + /// The dataset, for method chaining 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 public LineChartDataset FillToOrigin() { Fill = "origin"; return this; } + /// + /// Fill to the line below the current dataset (fill: 'stack'). + /// + /// The dataset, for method chaining public LineChartDataset FillToStackedValueBelow() { Fill = "stack"; return this; } + /// + /// Fill to the line of the given constant value. + /// + /// The value to fill to + /// The dataset, for method chaining public LineChartDataset FillToValue( double value ) { Fill = new { value }; return this; } - /// - /// The line fill color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBackgroundColor { get; set; } - - /// - /// Cap style of the line when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderCapStyle { get; set; } - - /// - /// The line color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? HoverBorderColor { get; set; } - - /// - /// Gets or sets the length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? HoverBorderDash { get; set; } - - /// - /// Offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [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'. - /// - public string HoverBorderJoinStyle { get; set; } = "miter"; - - /// - /// The bar border width when hovered (in pixels) when hovered. - /// - /// - /// Default value is . - /// - [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'. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } - - /// - /// The fill color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBackgroundColor { get; set; } - - /// - /// The border color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointBorderColor { get; set; } - - /// - /// The width of the point border in pixels. - /// - /// - /// Default value is 1. - /// - [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. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHitRadius { get; set; } - - /// - /// Point background color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBackgroundColor { get; set; } - - /// - /// Point border color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderColor { get; set; } - - /// - /// Border width of point when hovered. - /// - /// - /// Default value is 1. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointHoverBorderWidth { get; set; } - - /// - /// The radius of the point when hovered. - /// - /// - /// Default value is 4. - /// - [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. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? PointRadius { get; set; } - - /// - /// The rotation of the point in degrees. - /// - /// - /// Default value is 0. - /// - [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'. - /// - [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 . - /// - 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 . - /// - [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 . - /// - 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. - /// - public double Tension { get; set; } - - /// - /// The ID of the x axis to plot this dataset on. - /// - /// - /// Default value is 'first x axis'. - /// - [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'. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? YAxisID { get; set; } - - #endregion + /// + /// The line fill color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? HoverBackgroundColor { get; set; } + + /// + /// Cap style of the line when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? HoverBorderCapStyle { get; set; } + + /// + /// The line color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? HoverBorderColor { get; set; } + + /// + /// Gets or sets the length and spacing of dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? HoverBorderDash { get; set; } + + /// + /// Offset for line dashes when hovered. + /// + /// + /// Default value is . + /// + [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'. + /// + public string HoverBorderJoinStyle { get; set; } = "miter"; + + /// + /// The bar border width when hovered (in pixels) when hovered. + /// + /// + /// Default value is . + /// + [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'. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? IndexAxis { get; set; } + + /// + /// The fill color for points. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? PointBackgroundColor { get; set; } + + /// + /// The border color for points. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? PointBorderColor { get; set; } + + /// + /// The width of the point border in pixels. + /// + /// + /// Default value is 1. + /// + [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. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? PointHitRadius { get; set; } + + /// + /// Point background color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? PointHoverBackgroundColor { get; set; } + + /// + /// Point border color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? PointHoverBorderColor { get; set; } + + /// + /// Border width of point when hovered. + /// + /// + /// Default value is 1. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? PointHoverBorderWidth { get; set; } + + /// + /// The radius of the point when hovered. + /// + /// + /// Default value is 4. + /// + [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. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? PointRadius { get; set; } + + /// + /// The rotation of the point in degrees. + /// + /// + /// Default value is 0. + /// + [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'. + /// + [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 . + /// + 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 . + /// + [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 . + /// + 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. + /// + public double Tension { get; set; } + + /// + /// The ID of the x axis to plot this dataset on. + /// + /// + /// Default value is 'first x axis'. + /// + [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'. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? YAxisID { get; set; } + + #endregion } public class LineChartDatasetDataLabels : ChartDatasetDataLabels From 66eaf1c8e5bbdb1a02eeeca17f936413fb7d1875 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 9 Aug 2024 19:14:37 +0530 Subject: [PATCH 3/7] LineChartDataset.cs - code cleanup --- .../LineChart/LineChartDataset.cs | 871 +++++++++--------- 1 file changed, 432 insertions(+), 439 deletions(-) diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index 84b55e227..d8884a094 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -1,461 +1,454 @@ -using System; -using System.ComponentModel.Design; -using System.Data; - -namespace BlazorBootstrap; +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. +/// 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. /// . /// public class LineChartDataset : ChartDataset { - #region Properties, Indexers - - /// - /// Get or sets the line fill color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - 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'. - /// - public string BorderCapStyle { get; set; } = "butt"; - - /// - /// Get or sets the line color. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; - - /// - /// Gets or sets the length and spacing of dashes. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? BorderDash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - /// Default value is 0.0. - /// - public double BorderDashOffset { get; set; } - - /// - /// Line joint style. - /// There are three possible values for this property: 'round', 'bevel', and 'miter'. - /// - /// - /// Default value is 'miter'. - /// - public string BorderJoinStyle { get; set; } = "miter"; - - /// - /// Gets or sets the line width (in pixels). - /// - /// - /// Default value is 3. - /// - public double BorderWidth { get; set; } = 3; - - /// - /// . - /// Supported values are 'default', and 'monotone'. - /// - /// - /// Default value is 'default'. - /// - public string CubicInterpolationMode { get; set; } = "default"; - - /// - /// Get or sets the Data. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public new List? Data { get; set; } - - [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 . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? DrawActiveElementsOnTop { get; set; } - - /// - /// How to fill the area under the line. - /// - /// - /// Default value is . - /// - public object Fill { get; set; } = false; - - /// - /// 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. - public LineChartDataset FillToDataset( int index, bool relativeIndex = false ) - { - if( relativeIndex && ( index == 0 ) ) + #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. + public LineChartDataset FillToDataset(int index, bool relativeIndex = false) { - throw new ArgumentException( "The relative index must be non-zero." ); + if (relativeIndex && index == 0) throw new ArgumentException("The relative index must be non-zero."); + + Fill = relativeIndex ? index.ToString("+0;-0") : index; + + return this; } - Fill = relativeIndex ? index.ToString( "+0;-0" ) : 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. - public LineChartDataset FillToDataset( ChartData chartData, IChartDataset dataset, bool relativeIndex = false ) - { - int index = chartData?.Datasets?.IndexOf( dataset ) ?? -1; - if( index < 0 ) + /// + /// 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. + public LineChartDataset FillToDataset(ChartData chartData, IChartDataset dataset, bool relativeIndex = false) { - throw new ArgumentException( "The dataset is not in the chart data." ); + 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"); + } + else + { + Fill = index; + } + + return this; } - if( relativeIndex ) + /// + /// Fills between the current dataset and the top of the chart (fill: 'end'). + /// + /// The dataset, for method chaining + public LineChartDataset FillToEnd() { + Fill = "end"; - int myIndex = relativeIndex ? chartData.Datasets.IndexOf( this ) : 0; - if( myIndex < 0 ) - { - throw new ArgumentException( "The dataset is not in the chart data." ); - } + return this; + } - if( myIndex == index ) - { - throw new ArgumentException( "The dataset is the same as this dataset." ); - } + /// + /// Fills between the current dataset and the origin. For legacy reasons, this is the same as fill: true. + /// + /// The dataset, for method chaining + public LineChartDataset FillToOrigin() + { + Fill = "origin"; - Fill = ( index - myIndex ).ToString( "+0;-0" ); + return this; } - else + + /// + /// Fill to the line below the current dataset (fill: 'stack'). + /// + /// The dataset, for method chaining + public LineChartDataset FillToStackedValueBelow() { - Fill = index; + Fill = "stack"; + + return this; } - return this; - } - - /// - /// Fills between the current dataset and the start (fill: 'start'). - /// - /// The dataset, for method chaining - public LineChartDataset FillToStart() - { - Fill = "start"; - return this; - } - - /// - /// Fills between the current dataset and the top of the chart (fill: 'end'). - /// - /// The dataset, for method chaining - 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 - public LineChartDataset FillToOrigin() - { - Fill = "origin"; - return this; - } - - /// - /// Fill to the line below the current dataset (fill: 'stack'). - /// - /// The dataset, for method chaining - public LineChartDataset FillToStackedValueBelow() - { - Fill = "stack"; - return this; - } - - /// - /// Fill to the line of the given constant value. - /// - /// The value to fill to - /// The dataset, for method chaining - public LineChartDataset FillToValue( double value ) - { - Fill = new { value }; - return this; - } - - /// - /// The line fill color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? HoverBackgroundColor { get; set; } - - /// - /// Cap style of the line when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? HoverBorderCapStyle { get; set; } - - /// - /// The line color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? HoverBorderColor { get; set; } - - /// - /// Gets or sets the length and spacing of dashes when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? HoverBorderDash { get; set; } - - /// - /// Offset for line dashes when hovered. - /// - /// - /// Default value is . - /// - [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'. - /// - public string HoverBorderJoinStyle { get; set; } = "miter"; - - /// - /// The bar border width when hovered (in pixels) when hovered. - /// - /// - /// Default value is . - /// - [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'. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? IndexAxis { get; set; } - - /// - /// The fill color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? PointBackgroundColor { get; set; } - - /// - /// The border color for points. - /// - /// - /// Default value is 'rgba(0, 0, 0, 0.1)'. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? PointBorderColor { get; set; } - - /// - /// The width of the point border in pixels. - /// - /// - /// Default value is 1. - /// - [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. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? PointHitRadius { get; set; } - - /// - /// Point background color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? PointHoverBackgroundColor { get; set; } - - /// - /// Point border color when hovered. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? PointHoverBorderColor { get; set; } - - /// - /// Border width of point when hovered. - /// - /// - /// Default value is 1. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? PointHoverBorderWidth { get; set; } - - /// - /// The radius of the point when hovered. - /// - /// - /// Default value is 4. - /// - [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. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? PointRadius { get; set; } - - /// - /// The rotation of the point in degrees. - /// - /// - /// Default value is 0. - /// - [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'. - /// - [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 . - /// - 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 . - /// - [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 . - /// - 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. - /// - public double Tension { get; set; } - - /// - /// The ID of the x axis to plot this dataset on. - /// - /// - /// Default value is 'first x axis'. - /// - [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'. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? YAxisID { get; set; } - - #endregion -} + /// + /// Fills between the current dataset and the start (fill: 'start'). + /// + /// The dataset, for method chaining + public LineChartDataset FillToStart() + { + Fill = "start"; -public class LineChartDatasetDataLabels : ChartDatasetDataLabels -{ + return this; + } + + /// + /// Fill to the line of the given constant value. + /// + /// The value to fill to + /// The dataset, for method chaining + public LineChartDataset FillToValue(double value) + { + Fill = new { value }; + + return this; + } + + #endregion + + #region Properties, Indexers + + /// + /// Get or sets the line fill color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + 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'. + /// + public string BorderCapStyle { get; set; } = "butt"; + + /// + /// Get or sets the line color. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + public string BorderColor { get; set; } = "rgba(0, 0, 0, 0.1)"; + + /// + /// Gets or sets the length and spacing of dashes. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? BorderDash { get; set; } + + /// + /// Offset for line dashes. + /// + /// + /// Default value is 0.0. + /// + public double BorderDashOffset { get; set; } + + /// + /// Line joint style. + /// There are three possible values for this property: 'round', 'bevel', and 'miter'. + /// + /// + /// Default value is 'miter'. + /// + public string BorderJoinStyle { get; set; } = "miter"; + + /// + /// Gets or sets the line width (in pixels). + /// + /// + /// Default value is 3. + /// + public double BorderWidth { get; set; } = 3; + + /// + /// . + /// Supported values are 'default', and 'monotone'. + /// + /// + /// Default value is 'default'. + /// + public string CubicInterpolationMode { get; set; } = "default"; + + /// + /// Get or sets the Data. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public new List? Data { get; set; } + + [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 . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? DrawActiveElementsOnTop { get; set; } + + /// + /// How to fill the area under the line. + /// + /// + /// Default value is . + /// + public object Fill { get; set; } = false; + + /// + /// The line fill color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? HoverBackgroundColor { get; set; } + + /// + /// Cap style of the line when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? HoverBorderCapStyle { get; set; } + + /// + /// The line color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? HoverBorderColor { get; set; } + + /// + /// Gets or sets the length and spacing of dashes when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? HoverBorderDash { get; set; } + + /// + /// Offset for line dashes when hovered. + /// + /// + /// Default value is . + /// + [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'. + /// + public string HoverBorderJoinStyle { get; set; } = "miter"; + + /// + /// The bar border width when hovered (in pixels) when hovered. + /// + /// + /// Default value is . + /// + [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'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? IndexAxis { get; set; } + + /// + /// The fill color for points. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? PointBackgroundColor { get; set; } + + /// + /// The border color for points. + /// + /// + /// Default value is 'rgba(0, 0, 0, 0.1)'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? PointBorderColor { get; set; } + + /// + /// The width of the point border in pixels. + /// + /// + /// Default value is 1. + /// + [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. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? PointHitRadius { get; set; } + + /// + /// Point background color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? PointHoverBackgroundColor { get; set; } + + /// + /// Point border color when hovered. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? PointHoverBorderColor { get; set; } + + /// + /// Border width of point when hovered. + /// + /// + /// Default value is 1. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? PointHoverBorderWidth { get; set; } + + /// + /// The radius of the point when hovered. + /// + /// + /// Default value is 4. + /// + [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. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? PointRadius { get; set; } + + /// + /// The rotation of the point in degrees. + /// + /// + /// Default value is 0. + /// + [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'. + /// + [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 . + /// + 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 . + /// + [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 . + /// + 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. + /// + public double Tension { get; set; } + + /// + /// The ID of the x axis to plot this dataset on. + /// + /// + /// Default value is 'first x axis'. + /// + [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'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? YAxisID { get; set; } + + #endregion } + +public class LineChartDatasetDataLabels : ChartDatasetDataLabels { } From b590ea842a604b8f824d8977371c2a9f7eeeecc3 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 9 Aug 2024 21:39:45 +0530 Subject: [PATCH 4/7] Code cleanup --- .../LineChart_Demo_06_Dataset_Fill.razor | 255 +++++++++--------- .../LineChart/LineChartDataset.cs | 22 +- 2 files changed, 138 insertions(+), 139 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor index c45109537..d1d09f8ca 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor @@ -1,153 +1,152 @@ - +
- - - - - - - + + + + + + +
@code { - private LineChart lineChart = default!; - private LineChartOptions lineChartOptions = default!; - private ChartData chartData = default!; + private LineChart lineChart = default!; + private LineChartOptions lineChartOptions = default!; + private ChartData chartData = default!; - private int datasetsCount; - private int labelsCount; + private int datasetsCount; + private int labelsCount; - private Random random = new(); + private Random random = new(); - protected override void OnInitialized() - { - chartData = new ChartData { Labels = GetDefaultDataLabels( 6 ), Datasets = GetDefaultDataSets( 4 ) }; - lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; - } + protected override void OnInitialized() + { + chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(4) }; + lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); + } + + public async Task NoFillAsync() + { + var middle = chartData.Datasets[1] as LineChartDataset; + middle!.Fill = null; + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + public async Task FillToNextAsync() + { + var middle = chartData.Datasets[1] as LineChartDataset; + middle!.FillToDataset(1, true); + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + public async Task FillToZeroAsync() + { + var middle = chartData.Datasets[1] as LineChartDataset; + middle!.FillToDataset(0, false); + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + public async Task FillToReferenceAsync() + { + var middle = chartData.Datasets[1] as LineChartDataset; + var fillTo = chartData.Datasets[3] as LineChartDataset; - protected override async Task OnAfterRenderAsync( bool firstRender ) - { - if( firstRender ) + middle!.FillToDataset(chartData, fillTo!); + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + public async Task FillToStartAsync() + { + var middle = chartData.Datasets[1] as LineChartDataset; + middle!.FillToStart(); + await lineChart.UpdateAsync(chartData, lineChartOptions); + } + + public async Task FillToEndAsync() { - await lineChart.InitializeAsync( chartData, lineChartOptions ); + var middle = chartData.Datasets[1] as LineChartDataset; + middle!.FillToEnd(); + await lineChart.UpdateAsync(chartData, lineChartOptions); } - await base.OnAfterRenderAsync( firstRender ); - } - - public async Task NoFillAsync() - { - var middle = chartData.Datasets[ 1 ] as LineChartDataset; - middle!.Fill = null; - await lineChart.UpdateAsync( chartData, lineChartOptions ); - } - - public async Task FillToNextAsync() - { - var middle = chartData.Datasets[ 1 ] as LineChartDataset; - middle!.FillToDataset( 1, relativeIndex: true ); - await lineChart.UpdateAsync( chartData, lineChartOptions ); - } - - public async Task FillToZeroAsync() - { - var middle = chartData.Datasets[ 1 ] as LineChartDataset; - middle!.FillToDataset( 0, relativeIndex: false ); - await lineChart.UpdateAsync( chartData, lineChartOptions ); - } - - public async Task FillToReferenceAsync() - { - var middle = chartData.Datasets[ 1 ] as LineChartDataset; - var fillTo = chartData.Datasets[ 3 ] as LineChartDataset; - - middle!.FillToDataset( chartData, fillTo! ); - await lineChart.UpdateAsync( chartData, lineChartOptions ); - } - - public async Task FillToStartAsync() - { - var middle = chartData.Datasets[ 1 ] as LineChartDataset; - middle!.FillToStart(); - await lineChart.UpdateAsync( chartData, lineChartOptions ); - } - - public async Task FillToEndAsync() - { - var middle = chartData.Datasets[ 1 ] as LineChartDataset; - middle!.FillToEnd(); - await lineChart.UpdateAsync( chartData, lineChartOptions ); - } - - public async Task FillToValueAsync() - { - var middle = chartData.Datasets[ 1 ] as LineChartDataset; - middle!.FillToValue( 50.0 ); - await lineChart.UpdateAsync( chartData, lineChartOptions ); - } - - #region Data Preparation - - private List GetDefaultDataSets( int numberOfDatasets ) - { - var datasets = new List(); - - for( var index = 0; index < numberOfDatasets; index++ ) + + public async Task FillToValueAsync() { - datasets.Add( GetRandomLineChartDataset() ); + var middle = chartData.Datasets[1] as LineChartDataset; + middle!.FillToValue(50.0); + await lineChart.UpdateAsync(chartData, lineChartOptions); } - 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++ ) + #region Data Preparation + + private List GetDefaultDataSets(int numberOfDatasets) { - data.Add( random.Next( 200 ) ); + var datasets = new List(); + + for (var index = 0; index < numberOfDatasets; index++) + { + datasets.Add(GetRandomLineChartDataset()); + } + + return datasets; } - return data; - } + 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 GetDefaultDataLabels( int numberOfLabels ) - { - var labels = new List(); - for( var index = 0; index < numberOfLabels; index++ ) + private List GetRandomData() { - labels.Add( GetNextDataLabel() ); + var data = new List(); + for (var index = 0; index < labelsCount; index++) + { + data.Add(random.Next(200)); + } + + return data; } - return labels; - } + private List GetDefaultDataLabels(int numberOfLabels) + { + var labels = new List(); + for (var index = 0; index < numberOfLabels; index++) + { + labels.Add(GetNextDataLabel()); + } - private string GetNextDataLabel() - { - labelsCount += 1; - return $"Day {labelsCount}"; - } + return labels; + } - #endregion Data Preparation + private string GetNextDataLabel() + { + labelsCount += 1; + return $"Day {labelsCount}"; + } + #endregion Data Preparation } \ No newline at end of file diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index d8884a094..159092dc3 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -18,9 +18,10 @@ public class LineChartDataset : ChartDataset /// If the relative index is zero. public LineChartDataset FillToDataset(int index, bool relativeIndex = false) { - if (relativeIndex && index == 0) throw new ArgumentException("The relative index must be non-zero."); + if (relativeIndex && index == 0) + throw new ArgumentException("The relative index must be non-zero."); - Fill = relativeIndex ? index.ToString("+0;-0") : index; + Fill = relativeIndex ? index.ToString("+0;-0", CultureInfo.InvariantCulture) : index; return this; } @@ -37,17 +38,20 @@ public LineChartDataset FillToDataset(ChartData chartData, IChartDataset dataset { var index = chartData?.Datasets?.IndexOf(dataset) ?? -1; - if (index < 0) throw new ArgumentException("The dataset is not in the chart data."); + 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 < 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."); + if (myIndex == index) + throw new ArgumentException("The dataset is the same as this dataset."); - Fill = (index - myIndex).ToString("+0;-0"); + Fill = (index - myIndex).ToString("+0;-0", CultureInfo.InvariantCulture); } else { @@ -64,7 +68,6 @@ public LineChartDataset FillToDataset(ChartData chartData, IChartDataset dataset public LineChartDataset FillToEnd() { Fill = "end"; - return this; } @@ -75,7 +78,6 @@ public LineChartDataset FillToEnd() public LineChartDataset FillToOrigin() { Fill = "origin"; - return this; } @@ -86,7 +88,6 @@ public LineChartDataset FillToOrigin() public LineChartDataset FillToStackedValueBelow() { Fill = "stack"; - return this; } @@ -97,7 +98,6 @@ public LineChartDataset FillToStackedValueBelow() public LineChartDataset FillToStart() { Fill = "start"; - return this; } @@ -109,7 +109,6 @@ public LineChartDataset FillToStart() public LineChartDataset FillToValue(double value) { Fill = new { value }; - return this; } @@ -207,6 +206,7 @@ public LineChartDataset FillToValue(double value) /// /// How to fill the area under the line. + /// /// /// /// Default value is . From 9e89a2f7676e5d7a73682a009ccde0c1fbcf34b4 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Thu, 15 Aug 2024 16:22:39 +0530 Subject: [PATCH 5/7] #828 Formaring updated --- .../LineCharts/LineChartDocumentation.razor | 24 +++++++++---------- .../LineChart_Demo_06_Dataset_Fill.razor | 24 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index e86b24b69..42c108642 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -6,24 +6,24 @@

Blazor Line Chart

- 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. + 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.
- Refer to the getting started guide for setting up charts. + Refer to the getting started guide for setting up charts.
- In the following example, a categorical 12-color palette is used. + In the following example, a categorical 12-color palette is used.
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.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. + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.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.
@@ -31,8 +31,8 @@
- 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). + 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).
@@ -49,8 +49,8 @@ @code { - private readonly string pageUrl = "/charts/line-chart"; - private readonly string title = "Blazor Line Chart"; - private readonly string 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."; - private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png"; + private readonly string pageUrl = "/charts/line-chart"; + private readonly string title = "Blazor Line Chart"; + private readonly string 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."; + private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor index d1d09f8ca..56bba0380 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor @@ -1,4 +1,4 @@ - +
@@ -107,17 +107,17 @@ 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, - }; + { + 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() From 746947152f2e20c085705c289d88f11b11638130 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Thu, 15 Aug 2024 16:24:30 +0530 Subject: [PATCH 6/7] #828: LineChartDataset - formating updates --- .../Charts/ChartDataset/LineChart/LineChartDataset.cs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index 159092dc3..5eb09f5a2 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -18,7 +18,7 @@ public class LineChartDataset : ChartDataset /// If the relative index is zero. public LineChartDataset FillToDataset(int index, bool relativeIndex = false) { - if (relativeIndex && index == 0) + if (relativeIndex && index == 0) throw new ArgumentException("The relative index must be non-zero."); Fill = relativeIndex ? index.ToString("+0;-0", CultureInfo.InvariantCulture) : index; @@ -68,6 +68,7 @@ public LineChartDataset FillToDataset(ChartData chartData, IChartDataset dataset public LineChartDataset FillToEnd() { Fill = "end"; + return this; } @@ -78,6 +79,7 @@ public LineChartDataset FillToEnd() public LineChartDataset FillToOrigin() { Fill = "origin"; + return this; } @@ -88,6 +90,7 @@ public LineChartDataset FillToOrigin() public LineChartDataset FillToStackedValueBelow() { Fill = "stack"; + return this; } @@ -98,6 +101,7 @@ public LineChartDataset FillToStackedValueBelow() public LineChartDataset FillToStart() { Fill = "start"; + return this; } @@ -109,6 +113,7 @@ public LineChartDataset FillToStart() public LineChartDataset FillToValue(double value) { Fill = new { value }; + return this; } From f44f13cdd6b2e4680eabbc64c74edfbfd00d0dcf Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 7 Sep 2024 11:52:23 +0530 Subject: [PATCH 7/7] Charts demos - updated --- .../LineChart_Demo_01_A_Examples.razor | 26 ++++++++++--------- ...LineChart_Demo_05_Tick_Configuration.razor | 6 ++--- .../LineChart_Demo_06_Dataset_Fill.razor | 23 ++++++++-------- 3 files changed, 29 insertions(+), 26 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor index 6d1ab9b6d..2d993de68 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor @@ -1,11 +1,11 @@ 
- - - - - + + + + +
@code { @@ -21,7 +21,12 @@ protected override void OnInitialized() { chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) }; - lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + lineChartOptions = new() + { + IndexAxis = "x", + Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false }, + Responsive = true, + }; } protected override async Task OnAfterRenderAsync(bool firstRender) @@ -122,13 +127,10 @@ { Label = $"Team {datasetsCount}", Data = GetRandomData(), - BackgroundColor = c.ToRgbString(), + BackgroundColor = c.ToRgbaString(), BorderColor = c.ToRgbString(), - BorderWidth = 2, - HoverBorderWidth = 4, - // PointBackgroundColor = c.ToRgbString(), - // PointRadius = 0, // hide points - // PointHoverRadius = 4, + PointRadius = new List { 5 }, + PointHoverRadius = new List { 8 }, }; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor index 6aac80f71..2e827dacc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor @@ -1,9 +1,9 @@ 
- - - + + +
@code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor index 56bba0380..7c91693f1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor @@ -1,13 +1,13 @@ 
- - - - - - - + + + + + + +
@code { @@ -110,13 +110,14 @@ { Label = $"Team {datasetsCount}", Data = GetRandomData(), - BackgroundColor = c.ToRgbString(), + BackgroundColor = c.ToRgbaString(), + BorderCapStyle = "round", BorderColor = c.ToRgbString(), BorderWidth = 2, - HoverBorderWidth = 4 - // PointBackgroundColor = c.ToRgbString(), + HoverBorderWidth = 4, + PointBackgroundColor = new List() { c.ToRgbString() }, // PointRadius = 0, // hide points - // PointHoverRadius = 4, + PointHoverRadius = new List() { 4 }, }; }