From a311e2f95b7167cf001823041e715d734eacdd79 Mon Sep 17 00:00:00 2001 From: Mischa Spelt Date: Wed, 31 Jul 2024 16:27:09 +0200 Subject: [PATCH 1/6] Support secondary axis for line chart --- .../LineChart/LineChartDataset.cs | 5 +- .../Charts/ChartOptions/ChartOptions.cs | 1004 +++++++++-------- .../Charts/ChartOptions/LineChartOptions.cs | 36 +- .../Charts/ChartOptions/LineChartScales.cs | 9 + 4 files changed, 538 insertions(+), 516 deletions(-) create mode 100644 blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index 8342eebf5..0b13d3237 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -338,7 +338,10 @@ public class LineChartDataset : ChartDataset /// Default value is 'first y axis'. /// [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? YAxisID { get; set; } + public string? YAxisID => this.OnSecondaryYAxis ? "Y1" : null; + + [JsonIgnore] + public bool OnSecondaryYAxis { get; set; } #endregion } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs index 6d0c4877e..b48312020 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs @@ -7,43 +7,43 @@ public interface IChartOptions { } /// public class ChartOptions : IChartOptions { - #region Properties, Indexers - - //aspectRatio - //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options - - /// - /// Gets or sets the locale. - /// By default, the chart is using the default locale of the platform which is running on. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Locale { get; set; } - - /// - /// Maintain the original canvas aspect ratio (width / height) when resizing. - /// . - /// - /// - /// Default value is . - /// - public bool MaintainAspectRatio { get; set; } = true; - - //onResize - //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options - - //resizeDelay - //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options - - /// - /// Resizes the chart canvas when its container does. - /// . /// - /// - /// - /// Default value is . - /// - public bool Responsive { get; set; } - - #endregion + #region Properties, Indexers + + //aspectRatio + //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options + + /// + /// Gets or sets the locale. + /// By default, the chart is using the default locale of the platform which is running on. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Locale { get; set; } + + /// + /// Maintain the original canvas aspect ratio (width / height) when resizing. + /// . + /// + /// + /// Default value is . + /// + public bool MaintainAspectRatio { get; set; } = true; + + //onResize + //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options + + //resizeDelay + //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options + + /// + /// Resizes the chart canvas when its container does. + /// . /// + /// + /// + /// Default value is . + /// + public bool Responsive { get; set; } + + #endregion } /// @@ -52,22 +52,22 @@ public class ChartOptions : IChartOptions /// public class ChartLayout { - #region Properties, Indexers - - /// - /// Apply automatic padding so visible elements are completely drawn. - /// - /// - /// Default value is . - /// - public bool AutoPadding { get; set; } = true; - - /// - /// The padding to add inside the chart. - /// - public int Padding { get; set; } = 0; - - #endregion + #region Properties, Indexers + + /// + /// Apply automatic padding so visible elements are completely drawn. + /// + /// + /// Default value is . + /// + public bool AutoPadding { get; set; } = true; + + /// + /// The padding to add inside the chart. + /// + public int Padding { get; set; } = 0; + + #endregion } /// @@ -76,171 +76,181 @@ public class ChartLayout /// public class Interaction { - #region Fields and Constants - - 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", - _ => "" - }; - - #endregion - - #region Properties, Indexers - - //axis - //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions - - /// - /// Sets which elements appear in the interaction. - /// - [JsonPropertyName("mode")] - public string ChartInteractionMode { get; private set; } - - /// - /// if , the interaction mode only applies when the mouse position intersects an item on the chart. - /// - /// - /// Default value is . - /// - public bool Intersect { get; set; } = true; - - /// - /// Sets which elements appear in the tooltip. See Interaction Modes for details. - /// - [JsonIgnore] - public InteractionMode Mode + #region Fields and Constants + + 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", + _ => "" + }; + + #endregion + + #region Properties, Indexers + + //axis + //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions + + /// + /// Sets which elements appear in the interaction. + /// + [JsonPropertyName( "mode" )] + public string ChartInteractionMode { get; private set; } + + /// + /// if , the interaction mode only applies when the mouse position intersects an item on the chart. + /// + /// + /// Default value is . + /// + public bool Intersect { get; set; } = true; + + /// + /// Sets which elements appear in the tooltip. See Interaction Modes for details. + /// + [JsonIgnore] + public InteractionMode Mode + { + get => mode; + set { - get => mode; - set - { - mode = value; - SetMode(value); - } + mode = value; + SetMode( value ); } + } - //includeInvisible - //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions + //includeInvisible + //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions - #endregion + #endregion } public enum InteractionMode { - Dataset, - Index, - Nearest, - Point, - X, - Y + Dataset, + Index, + Nearest, + Point, + X, + Y } public class Scales { - #region Properties, Indexers + #region Properties, Indexers - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxes? X { get; set; } = new(); + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public ChartAxes? X { get; set; } = new(); - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxes? Y { get; set; } = new(); + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public ChartAxes? Y { get; set; } = new(); - #endregion + #endregion } public class ChartAxes { - #region Properties, Indexers - - public bool BeginAtZero { get; set; } = true; - - /// - /// Define options for the border that run perpendicular to the axis. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesBorder? Border { get; set; } - - /// - /// 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. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Max { get; set; } - - /// - /// User defined minimum number for the scale, overrides minimum value from data. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? Min { get; set; } - - /// - /// Should the data be stacked. - /// By default data is not stacked. - /// If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked - /// separately. - /// - public bool Stacked { get; set; } - - /// - /// Adjustment used when calculating the maximum data value. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? SuggestedMax { get; set; } - - /// - /// Adjustment used when calculating the minimum data value. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public double? SuggestedMin { get; set; } - - /// - /// Gets or sets the tick configuration. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesTicks? Ticks { get; set; } - - /// - /// Gets or sets the title configuration. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesTitle? Title { get; set; } - - /// - /// Gets or sets the index scale type. - /// - /// - /// Default value is . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Type { get; set; } - - #endregion + #region Properties, Indexers + + public bool BeginAtZero { get; set; } = true; + + /// + /// Define options for the border that run perpendicular to the axis. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public ChartAxesBorder? Border { get; set; } + + /// + /// Gets or sets the grid configuration. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public ChartAxesGrid? Grid { get; set; } + + /// + /// Gets or sets whether the axis is displayed. + /// + public bool Display { get; set; } = true; + + /// + /// Gets or sets the position of the axis. + /// + public string Position { get; set; } = "left"; + + /// + /// User defined maximum number for the scale, overrides maximum value from data. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public double? Max { get; set; } + + /// + /// User defined minimum number for the scale, overrides minimum value from data. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public double? Min { get; set; } + + /// + /// Should the data be stacked. + /// By default data is not stacked. + /// If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked + /// separately. + /// + public bool Stacked { get; set; } + + /// + /// Adjustment used when calculating the maximum data value. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public double? SuggestedMax { get; set; } + + /// + /// Adjustment used when calculating the minimum data value. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public double? SuggestedMin { get; set; } + + /// + /// Gets or sets the tick configuration. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public ChartAxesTicks? Ticks { get; set; } + + /// + /// Gets or sets the title configuration. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public ChartAxesTitle? Title { get; set; } + + /// + /// Gets or sets the index scale type. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Type { get; set; } + + #endregion } /// @@ -249,46 +259,46 @@ public class ChartAxes /// public class ChartAxesBorder { - #region Properties, Indexers - - /// - /// The color of the border line. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// Length and spacing of dashes on grid lines - /// - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? Dash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? DashOffset { get; set; } - - /// - /// If , draw a border at the edge between the axis and the chart area. - /// - public bool Display { get; set; } = true; - - /// - /// The width of the border line. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Width { get; set; } - - /// - /// z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Z { get; set; } - - #endregion + #region Properties, Indexers + + /// + /// The color of the border line. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Color { get; set; } + + /// + /// Length and spacing of dashes on grid lines + /// + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? Dash { get; set; } + + /// + /// Offset for line dashes. + /// + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? DashOffset { get; set; } + + /// + /// If , draw a border at the edge between the axis and the chart area. + /// + public bool Display { get; set; } = true; + + /// + /// The width of the border line. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? Width { get; set; } + + /// + /// z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? Z { get; set; } + + #endregion } /// @@ -297,99 +307,99 @@ public class ChartAxesBorder /// public class ChartAxesGrid { - #region Properties, Indexers - - /// - /// If , gridlines are circular (on radar and polar area charts only). - /// - [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. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// If false, do not display grid lines for this axis. - /// - 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. - /// - public bool DrawOnChartArea { get; set; } = true; - - /// - /// If , draw lines beside the ticks in the axis area beside the chart. - /// - public bool DrawTicks { get; set; } = true; - - /// - /// Stroke width of grid lines. - /// - 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. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? Offset { get; set; } = false; - - /// - /// Length and spacing of the tick mark line. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public List? TickBorderDash { get; set; } - - /// - /// Offset for the line dash of the tick mark. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? TickBorderDashOffset { get; set; } - - /// - /// Color of the tick line. If unset, defaults to the grid line color. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? TickColor { get; set; } - - /// - /// Length in pixels that the grid lines will draw into the axis area. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? TickLength { get; set; } - - /// - /// Width of the tick mark 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. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Z { get; set; } - - #endregion + #region Properties, Indexers + + /// + /// If , gridlines are circular (on radar and polar area charts only). + /// + [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. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Color { get; set; } + + /// + /// If false, do not display grid lines for this axis. + /// + 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. + /// + public bool DrawOnChartArea { get; set; } = true; + + /// + /// If , draw lines beside the ticks in the axis area beside the chart. + /// + public bool DrawTicks { get; set; } = true; + + /// + /// Stroke width of grid lines. + /// + 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. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public bool? Offset { get; set; } = false; + + /// + /// Length and spacing of the tick mark line. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public List? TickBorderDash { get; set; } + + /// + /// Offset for the line dash of the tick mark. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? TickBorderDashOffset { get; set; } + + /// + /// Color of the tick line. If unset, defaults to the grid line color. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? TickColor { get; set; } + + /// + /// Length in pixels that the grid lines will draw into the axis area. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? TickLength { get; set; } + + /// + /// Width of the tick mark 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. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? Z { get; set; } + + #endregion } public enum TicksAlignment { - Center, // default - Start, - End + Center, // default + Start, + End } public enum TitleAlignment { - Center, // default - Start, - End + Center, // default + Start, + End } /// @@ -398,96 +408,96 @@ public enum TitleAlignment /// 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 - - [JsonPropertyName("align")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Alignment { get; private set; } - - /// - /// Color of label backdrops - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? BackdropColor { get; set; } - - /// - /// Padding of label backdrop - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? BackdropPadding { get; set; } - - /// - /// Color of ticks - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } - - /// - /// If , show tick labels. - /// - public bool Display { get; set; } = true; - - /// - /// defines options for the major tick marks that are generated by the axis. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public ChartAxesTicksMajor? Major { get; set; } - - /// - /// Sets the offset of the tick labels from the axis - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? Padding { get; set; } - - /// - /// If , draw a background behind the tick labels. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public bool? ShowLabelBackdrop { get; set; } - - /// - /// The color of the stroke around the text. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? TextStrokeColor { get; set; } - - /// - /// Stroke width around the text. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public int? TextStrokeWidth { get; set; } - - [JsonIgnore] - public TicksAlignment TicksAlignment + #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 + + [JsonPropertyName( "align" )] + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Alignment { get; private set; } + + /// + /// Color of label backdrops + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? BackdropColor { get; set; } + + /// + /// Padding of label backdrop + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? BackdropPadding { get; set; } + + /// + /// Color of ticks + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Color { get; set; } + + /// + /// If , show tick labels. + /// + public bool Display { get; set; } = true; + + /// + /// defines options for the major tick marks that are generated by the axis. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public ChartAxesTicksMajor? Major { get; set; } + + /// + /// Sets the offset of the tick labels from the axis + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? Padding { get; set; } + + /// + /// If , draw a background behind the tick labels. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public bool? ShowLabelBackdrop { get; set; } + + /// + /// The color of the stroke around the text. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? TextStrokeColor { get; set; } + + /// + /// Stroke width around the text. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public int? TextStrokeWidth { get; set; } + + [JsonIgnore] + public TicksAlignment TicksAlignment + { + get => ticksAlignment; + set { - get => ticksAlignment; - set - { - ticksAlignment = value; - SetTicksAlignment(value); - } + ticksAlignment = value; + SetTicksAlignment( value ); } + } - #endregion + #endregion } /// @@ -495,15 +505,15 @@ public TicksAlignment TicksAlignment /// public class ChartAxesTicksMajor { - #region Properties, Indexers + #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. - /// - public bool Enabled { get; set; } = false; + /// + /// If , major ticks are generated. A major tick will affect auto skipping and major will be defined + /// on ticks in the scriptable options context. + /// + public bool Enabled { get; set; } = false; - #endregion + #endregion } /// @@ -512,66 +522,66 @@ public class ChartAxesTicksMajor /// public class ChartAxesTitle { - #region Fields and Constants + #region Fields and Constants - private TitleAlignment titleAlignment; + private TitleAlignment titleAlignment; - #endregion + #endregion - #region Methods + #region Methods - private void SetTitleAlignment(TitleAlignment interactionMode) => - Alignment = interactionMode switch - { - TitleAlignment.Center => "center", // default - TitleAlignment.Start => "start", - TitleAlignment.End => "end", - _ => null - }; + private void SetTitleAlignment( TitleAlignment interactionMode ) => + Alignment = interactionMode switch + { + TitleAlignment.Center => "center", // default + TitleAlignment.Start => "start", + TitleAlignment.End => "end", + _ => null + }; - #endregion + #endregion - #region Properties, Indexers + #region Properties, Indexers - /// - /// Alignment of the title. - /// Options are: 'start', 'center', and 'end' - /// - [JsonPropertyName("align")] - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Alignment { get; private set; } + /// + /// Alignment of the title. + /// Options are: 'start', 'center', and 'end' + /// + [JsonPropertyName( "align" )] + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Alignment { get; private set; } - /// - /// Color of text. - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Color { get; set; } = "black"; + /// + /// Color of text. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Color { get; set; } = "black"; - /// - /// Is the title shown? - /// - public bool Display { get; set; } + /// + /// Is the title shown? + /// + public bool Display { get; set; } - public ChartFont? Font { get; set; } = new(); + public ChartFont? Font { get; set; } = new(); - //fullSize - //padding - //position + //fullSize + //padding + //position - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Text { get; set; } + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] public string? Text { get; set; } - [JsonIgnore] - public TitleAlignment TitleAlignment + [JsonIgnore] + public TitleAlignment TitleAlignment + { + get => titleAlignment; + set { - get => titleAlignment; - set - { - titleAlignment = value; - SetTitleAlignment(value); - } + titleAlignment = value; + SetTitleAlignment( value ); } + } - #endregion + #endregion } /// @@ -579,39 +589,39 @@ public TitleAlignment TitleAlignment /// public class ChartFont { - #region Properties, Indexers - - /// - /// Default font family for all text, follows CSS font-family options. - /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Family { get; set; } - - /// - /// Height of an individual line of text - /// - /// - public double LineHeight { get; set; } = 1.2; - - /// - /// Default font size (in px) for text. Does not apply to radialLinear scale point labels. - /// - 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). - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Style { get; set; } - - /// - /// Default font weight (boldness). - /// - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? Weight { get; set; } = "bold"; - - #endregion + #region Properties, Indexers + + /// + /// Default font family for all text, follows CSS font-family options. + /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Family { get; set; } + + /// + /// Height of an individual line of text + /// + /// + public double LineHeight { get; set; } = 1.2; + + /// + /// Default font size (in px) for text. Does not apply to radialLinear scale point labels. + /// + 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). + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Style { get; set; } + + /// + /// Default font weight (boldness). + /// + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? Weight { get; set; } = "bold"; + + #endregion } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs index 58091b12a..19747610c 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs @@ -2,30 +2,30 @@ public class LineChartOptions : ChartOptions { - #region Properties, Indexers + #region Properties, Indexers - //hover -> mode, intersect - //maintainAspectRatio - //plugins -> title -> display, text + //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 . - /// - [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] - public string? IndexAxis { get; set; } + /// + /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. + /// + /// + /// Default value is . + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + public string? IndexAxis { get; set; } - public Interaction Interaction { get; set; } = new(); + public Interaction Interaction { get; set; } = new(); - public ChartLayout Layout { get; set; } = new(); + public ChartLayout Layout { get; set; } = new(); - public LineChartPlugins Plugins { get; set; } = new(); + public LineChartPlugins Plugins { get; set; } = new(); - public Scales Scales { get; set; } = new(); + public LineChartScales Scales { get; set; } = new(); - #endregion + #endregion - //tooltips -> mode, intersect + //tooltips -> mode, intersect } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs b/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs new file mode 100644 index 000000000..c7c7ef405 --- /dev/null +++ b/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs @@ -0,0 +1,9 @@ +namespace BlazorBootstrap +{ + public class LineChartScales : Scales + { + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + [JsonPropertyName( "Y1" )] + public ChartAxes? SecondaryY { get; set; } = new() { Display = false, Position = "right" }; + } +} \ No newline at end of file From e4c7a4e8e092707ace980ab6c12f98a43590ac1d Mon Sep 17 00:00:00 2001 From: Mischa Spelt Date: Wed, 31 Jul 2024 17:14:00 +0200 Subject: [PATCH 2/6] Added property orders to ensure primary Y axis stays the default. (cherry picked from commit 9004b91a560cb3baa9d0fee60903559ffc7a63e5) --- blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs | 2 ++ blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs | 1 + 2 files changed, 3 insertions(+) diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs index b48312020..d20feee05 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs @@ -161,9 +161,11 @@ public class Scales #region Properties, Indexers [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + [JsonPropertyOrder( 0 )] public ChartAxes? X { get; set; } = new(); [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + [JsonPropertyOrder( 1 )] public ChartAxes? Y { get; set; } = new(); #endregion diff --git a/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs b/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs index c7c7ef405..88e950515 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs @@ -3,6 +3,7 @@ public class LineChartScales : Scales { [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] + [JsonPropertyOrder( 2 )] [JsonPropertyName( "Y1" )] public ChartAxes? SecondaryY { get; set; } = new() { Display = false, Position = "right" }; } From 0de0a041c0eff33b770bf578567681f5c51d2c1a Mon Sep 17 00:00:00 2001 From: Mischa Spelt Date: Wed, 7 Aug 2024 16:07:42 +0200 Subject: [PATCH 3/6] Documentation example added --- .../LineCharts/LineChartDocumentation.razor | 39 +++---- .../LineChart_Demo_06_Secondary_Axis.razor | 102 ++++++++++++++++++ 2 files changed, 123 insertions(+), 18 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.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..976fe50e6 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_Secondary_Axis.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.razor new file mode 100644 index 000000000..1d2d86cdb --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.razor @@ -0,0 +1,102 @@ + + +@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() }; + lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + + lineChartOptions.Scales.Y!.Title = new ChartAxesTitle() { Display = true, Text = "Primary y-axis" }; + lineChartOptions.Scales.Y!.Max = 100; + // Set secondary y-axis + lineChartOptions.Scales.SecondaryY!.Display = true; + lineChartOptions.Scales.SecondaryY!.Title = new ChartAxesTitle() { Display = true, Text = "Secondary y-axis" }; + lineChartOptions.Scales.SecondaryY!.Max = 500; + } + + protected override async Task OnAfterRenderAsync( bool firstRender ) + { + if( firstRender ) + { + await lineChart.InitializeAsync( chartData, lineChartOptions ); + } + await base.OnAfterRenderAsync( firstRender ); + } + + #region Data Preparation + + private List GetDefaultDataSets() + { + var datasets = new List(); + var primaryDataset = GetRandomLineChartDataset( 100 ); + var secondaryDataset = GetRandomLineChartDataset( 500 ); + + // Move the dataset to the secondary y-axis + secondaryDataset.OnSecondaryYAxis = true; + + datasets.Add( primaryDataset ); + datasets.Add( secondaryDataset ); + + return datasets; + } + + private LineChartDataset GetRandomLineChartDataset( int max ) + { + var c = ColorUtility.CategoricalTwelveColors[ datasetsCount ].ToColor(); + + datasetsCount += 1; + + return new LineChartDataset + { + Label = $"Team {datasetsCount}", + Data = GetRandomData( max ), + BackgroundColor = c.ToRgbString(), + BorderColor = c.ToRgbString(), + BorderWidth = 2, + HoverBorderWidth = 4, + // PointBackgroundColor = c.ToRgbString(), + // PointRadius = 0, // hide points + // PointHoverRadius = 4, + }; + } + + private List GetRandomData( int max ) + { + var data = new List(); + for( var index = 0; index < labelsCount; index++ ) + { + data.Add( random.Next( max ) ); + } + + 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 From 8cf2c89a74dcdbe9dc5a6e0b7bd54e250273d54e Mon Sep 17 00:00:00 2001 From: Mischa Spelt Date: Wed, 7 Aug 2024 16:09:29 +0200 Subject: [PATCH 4/6] Added code documentation --- .../LineChart/LineChartDataset.cs | 668 +++++++++--------- 1 file changed, 336 insertions(+), 332 deletions(-) diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index 0b13d3237..d2b705162 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -7,343 +7,347 @@ /// 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 bool Fill { get; set; } - - /// - /// 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)] + #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 bool Fill { get; set; } + + /// + /// 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. + /// Change this through the property. + /// + /// + /// Default value is 'first y axis'. + /// + [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] public string? YAxisID => this.OnSecondaryYAxis ? "Y1" : null; + /// + /// Determines if the dataset is plotted on the secondary y-axis. + /// [JsonIgnore] public bool OnSecondaryYAxis { get; set; } - #endregion + #endregion } public class LineChartDatasetDataLabels : ChartDatasetDataLabels From 3e14510c8dd209ed89e70898743bb5ba64bbd78e Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 7 Sep 2024 12:44:43 +0530 Subject: [PATCH 5/6] Code cleanup --- .../LineChart/LineChartDataset.cs | 690 ++++++----- .../Charts/ChartOptions/ChartOptions.cs | 1022 ++++++++--------- .../Charts/ChartOptions/LineChartOptions.cs | 36 +- .../Charts/ChartOptions/LineChartScales.cs | 19 +- 4 files changed, 884 insertions(+), 883 deletions(-) diff --git a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs index d2b705162..c41305732 100644 --- a/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs +++ b/blazorbootstrap/Models/Charts/ChartDataset/LineChart/LineChartDataset.cs @@ -1,355 +1,353 @@ 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 bool Fill { get; set; } - - /// - /// 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. - /// Change this through the property. - /// - /// - /// Default value is 'first y axis'. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? YAxisID => this.OnSecondaryYAxis ? "Y1" : null; - - /// - /// Determines if the dataset is plotted on the secondary y-axis. - /// - [JsonIgnore] - public bool OnSecondaryYAxis { get; set; } - - #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 bool Fill { get; set; } + + /// + /// 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; } + + /// + /// Determines if the dataset is plotted on the secondary y-axis. + /// + [JsonIgnore] + public bool OnSecondaryYAxis { 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. + /// Change this through the property. + /// + /// + /// Default value is 'first y axis'. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? YAxisID => OnSecondaryYAxis ? "Y1" : null; + + #endregion } -public class LineChartDatasetDataLabels : ChartDatasetDataLabels -{ -} +public class LineChartDatasetDataLabels : ChartDatasetDataLabels { } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs index d20feee05..b8591f282 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/ChartOptions.cs @@ -3,47 +3,47 @@ public interface IChartOptions { } /// -/// +/// /// public class ChartOptions : IChartOptions { - #region Properties, Indexers - - //aspectRatio - //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options - - /// - /// Gets or sets the locale. - /// By default, the chart is using the default locale of the platform which is running on. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Locale { get; set; } - - /// - /// Maintain the original canvas aspect ratio (width / height) when resizing. - /// . - /// - /// - /// Default value is . - /// - public bool MaintainAspectRatio { get; set; } = true; - - //onResize - //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options - - //resizeDelay - //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options - - /// - /// Resizes the chart canvas when its container does. - /// . /// - /// - /// - /// Default value is . - /// - public bool Responsive { get; set; } - - #endregion + #region Properties, Indexers + + //aspectRatio + //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options + + /// + /// Gets or sets the locale. + /// By default, the chart is using the default locale of the platform which is running on. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Locale { get; set; } + + /// + /// Maintain the original canvas aspect ratio (width / height) when resizing. + /// . + /// + /// + /// Default value is . + /// + public bool MaintainAspectRatio { get; set; } = true; + + //onResize + //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options + + //resizeDelay + //https://www.chartjs.org/docs/latest/configuration/responsive.html#configuration-options + + /// + /// Resizes the chart canvas when its container does. + /// . /// + /// + /// + /// Default value is . + /// + public bool Responsive { get; set; } + + #endregion } /// @@ -52,207 +52,207 @@ public class ChartOptions : IChartOptions /// public class ChartLayout { - #region Properties, Indexers - - /// - /// Apply automatic padding so visible elements are completely drawn. - /// - /// - /// Default value is . - /// - public bool AutoPadding { get; set; } = true; - - /// - /// The padding to add inside the chart. - /// - public int Padding { get; set; } = 0; - - #endregion + #region Properties, Indexers + + /// + /// Apply automatic padding so visible elements are completely drawn. + /// + /// + /// Default value is . + /// + public bool AutoPadding { get; set; } = true; + + /// + /// The padding to add inside the chart. + /// + public int Padding { get; set; } = 0; + + #endregion } /// -/// Namespace: options.interaction, the global interaction configuration is at Chart.defaults.interaction. +/// Namespace: options.interaction, the global interaction configuration is at Chart.defaults.interaction. /// . /// public class Interaction { - #region Fields and Constants - - 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", - _ => "" - }; - - #endregion - - #region Properties, Indexers - - //axis - //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions - - /// - /// Sets which elements appear in the interaction. - /// - [JsonPropertyName( "mode" )] - public string ChartInteractionMode { get; private set; } - - /// - /// if , the interaction mode only applies when the mouse position intersects an item on the chart. - /// - /// - /// Default value is . - /// - public bool Intersect { get; set; } = true; - - /// - /// Sets which elements appear in the tooltip. See Interaction Modes for details. - /// - [JsonIgnore] - public InteractionMode Mode - { - get => mode; - set + #region Fields and Constants + + 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", + _ => "" + }; + + #endregion + + #region Properties, Indexers + + //axis + //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions + + /// + /// Sets which elements appear in the interaction. + /// + [JsonPropertyName("mode")] + public string ChartInteractionMode { get; private set; } + + /// + /// if , the interaction mode only applies when the mouse position intersects an item on the chart. + /// + /// + /// Default value is . + /// + public bool Intersect { get; set; } = true; + + /// + /// Sets which elements appear in the tooltip. See Interaction Modes for details. + /// + [JsonIgnore] + public InteractionMode Mode { - mode = value; - SetMode( value ); + get => mode; + set + { + mode = value; + SetMode(value); + } } - } - //includeInvisible - //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions + #endregion - #endregion + //includeInvisible + //https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions } public enum InteractionMode { - Dataset, - Index, - Nearest, - Point, - X, - Y + Dataset, + Index, + Nearest, + Point, + X, + Y } public class Scales { - #region Properties, Indexers + #region Properties, Indexers - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - [JsonPropertyOrder( 0 )] - public ChartAxes? X { get; set; } = new(); + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + [JsonPropertyOrder(0)] + public ChartAxes? X { get; set; } = new(); - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - [JsonPropertyOrder( 1 )] - public ChartAxes? Y { get; set; } = new(); + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + [JsonPropertyOrder(1)] + public ChartAxes? Y { get; set; } = new(); - #endregion + #endregion } public class ChartAxes { - #region Properties, Indexers - - public bool BeginAtZero { get; set; } = true; - - /// - /// Define options for the border that run perpendicular to the axis. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public ChartAxesBorder? Border { get; set; } - - /// - /// Gets or sets the grid configuration. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public ChartAxesGrid? Grid { get; set; } - - /// - /// Gets or sets whether the axis is displayed. - /// - public bool Display { get; set; } = true; - - /// - /// Gets or sets the position of the axis. - /// - public string Position { get; set; } = "left"; - - /// - /// User defined maximum number for the scale, overrides maximum value from data. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public double? Max { get; set; } - - /// - /// User defined minimum number for the scale, overrides minimum value from data. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public double? Min { get; set; } - - /// - /// Should the data be stacked. - /// By default data is not stacked. - /// If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked - /// separately. - /// - public bool Stacked { get; set; } - - /// - /// Adjustment used when calculating the maximum data value. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public double? SuggestedMax { get; set; } - - /// - /// Adjustment used when calculating the minimum data value. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public double? SuggestedMin { get; set; } - - /// - /// Gets or sets the tick configuration. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public ChartAxesTicks? Ticks { get; set; } - - /// - /// Gets or sets the title configuration. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public ChartAxesTitle? Title { get; set; } - - /// - /// Gets or sets the index scale type. - /// - /// - /// Default value is . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Type { get; set; } - - #endregion + #region Properties, Indexers + + public bool BeginAtZero { get; set; } = true; + + /// + /// Define options for the border that run perpendicular to the axis. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public ChartAxesBorder? Border { get; set; } + + /// + /// Gets or sets whether the axis is displayed. + /// + public bool Display { get; set; } = true; + + /// + /// 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. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? Max { get; set; } + + /// + /// User defined minimum number for the scale, overrides minimum value from data. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? Min { get; set; } + + /// + /// Gets or sets the position of the axis. + /// + public string Position { get; set; } = "left"; + + /// + /// Should the data be stacked. + /// By default data is not stacked. + /// If the stacked option of the value scale (y-axis on horizontal chart) is true, positive and negative values are stacked + /// separately. + /// + public bool Stacked { get; set; } + + /// + /// Adjustment used when calculating the maximum data value. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? SuggestedMax { get; set; } + + /// + /// Adjustment used when calculating the minimum data value. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public double? SuggestedMin { get; set; } + + /// + /// Gets or sets the tick configuration. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public ChartAxesTicks? Ticks { get; set; } + + /// + /// Gets or sets the title configuration. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public ChartAxesTitle? Title { get; set; } + + /// + /// Gets or sets the index scale type. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Type { get; set; } + + #endregion } /// @@ -261,46 +261,46 @@ public class ChartAxes /// public class ChartAxesBorder { - #region Properties, Indexers - - /// - /// The color of the border line. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Color { get; set; } - - /// - /// Length and spacing of dashes on grid lines - /// - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? Dash { get; set; } - - /// - /// Offset for line dashes. - /// - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? DashOffset { get; set; } - - /// - /// If , draw a border at the edge between the axis and the chart area. - /// - public bool Display { get; set; } = true; - - /// - /// The width of the border line. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? Width { get; set; } - - /// - /// z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? Z { get; set; } - - #endregion + #region Properties, Indexers + + /// + /// The color of the border line. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Color { get; set; } + + /// + /// Length and spacing of dashes on grid lines + /// + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? Dash { get; set; } + + /// + /// Offset for line dashes. + /// + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? DashOffset { get; set; } + + /// + /// If , draw a border at the edge between the axis and the chart area. + /// + public bool Display { get; set; } = true; + + /// + /// The width of the border line. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? Width { get; set; } + + /// + /// z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? Z { get; set; } + + #endregion } /// @@ -309,99 +309,99 @@ public class ChartAxesBorder /// public class ChartAxesGrid { - #region Properties, Indexers - - /// - /// If , gridlines are circular (on radar and polar area charts only). - /// - [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. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Color { get; set; } - - /// - /// If false, do not display grid lines for this axis. - /// - 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. - /// - public bool DrawOnChartArea { get; set; } = true; - - /// - /// If , draw lines beside the ticks in the axis area beside the chart. - /// - public bool DrawTicks { get; set; } = true; - - /// - /// Stroke width of grid lines. - /// - 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. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public bool? Offset { get; set; } = false; - - /// - /// Length and spacing of the tick mark line. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public List? TickBorderDash { get; set; } - - /// - /// Offset for the line dash of the tick mark. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? TickBorderDashOffset { get; set; } - - /// - /// Color of the tick line. If unset, defaults to the grid line color. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? TickColor { get; set; } - - /// - /// Length in pixels that the grid lines will draw into the axis area. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? TickLength { get; set; } - - /// - /// Width of the tick mark 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. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? Z { get; set; } - - #endregion + #region Properties, Indexers + + /// + /// If , gridlines are circular (on radar and polar area charts only). + /// + [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. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Color { get; set; } + + /// + /// If false, do not display grid lines for this axis. + /// + 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. + /// + public bool DrawOnChartArea { get; set; } = true; + + /// + /// If , draw lines beside the ticks in the axis area beside the chart. + /// + public bool DrawTicks { get; set; } = true; + + /// + /// Stroke width of grid lines. + /// + 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. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? Offset { get; set; } = false; + + /// + /// Length and spacing of the tick mark line. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public List? TickBorderDash { get; set; } + + /// + /// Offset for the line dash of the tick mark. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? TickBorderDashOffset { get; set; } + + /// + /// Color of the tick line. If unset, defaults to the grid line color. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? TickColor { get; set; } + + /// + /// Length in pixels that the grid lines will draw into the axis area. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? TickLength { get; set; } + + /// + /// Width of the tick mark 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. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? Z { get; set; } + + #endregion } public enum TicksAlignment { - Center, // default - Start, - End + Center, // default + Start, + End } public enum TitleAlignment { - Center, // default - Start, - End + Center, // default + Start, + End } /// @@ -410,96 +410,96 @@ public enum TitleAlignment /// 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 - - [JsonPropertyName( "align" )] - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Alignment { get; private set; } - - /// - /// Color of label backdrops - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? BackdropColor { get; set; } - - /// - /// Padding of label backdrop - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? BackdropPadding { get; set; } - - /// - /// Color of ticks - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Color { get; set; } - - /// - /// If , show tick labels. - /// - public bool Display { get; set; } = true; - - /// - /// defines options for the major tick marks that are generated by the axis. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public ChartAxesTicksMajor? Major { get; set; } - - /// - /// Sets the offset of the tick labels from the axis - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? Padding { get; set; } - - /// - /// If , draw a background behind the tick labels. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public bool? ShowLabelBackdrop { get; set; } - - /// - /// The color of the stroke around the text. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? TextStrokeColor { get; set; } - - /// - /// Stroke width around the text. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public int? TextStrokeWidth { get; set; } - - [JsonIgnore] - public TicksAlignment TicksAlignment - { - get => ticksAlignment; - set + #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 + + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Alignment { get; private set; } + + /// + /// Color of label backdrops + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? BackdropColor { get; set; } + + /// + /// Padding of label backdrop + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? BackdropPadding { get; set; } + + /// + /// Color of ticks + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Color { get; set; } + + /// + /// If , show tick labels. + /// + public bool Display { get; set; } = true; + + /// + /// defines options for the major tick marks that are generated by the axis. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public ChartAxesTicksMajor? Major { get; set; } + + /// + /// Sets the offset of the tick labels from the axis + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? Padding { get; set; } + + /// + /// If , draw a background behind the tick labels. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? ShowLabelBackdrop { get; set; } + + /// + /// The color of the stroke around the text. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? TextStrokeColor { get; set; } + + /// + /// Stroke width around the text. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public int? TextStrokeWidth { get; set; } + + [JsonIgnore] + public TicksAlignment TicksAlignment { - ticksAlignment = value; - SetTicksAlignment( value ); + get => ticksAlignment; + set + { + ticksAlignment = value; + SetTicksAlignment(value); + } } - } - #endregion + #endregion } /// @@ -507,15 +507,15 @@ public TicksAlignment TicksAlignment /// public class ChartAxesTicksMajor { - #region Properties, Indexers + #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. - /// - public bool Enabled { get; set; } = false; + /// + /// If , major ticks are generated. A major tick will affect auto skipping and major will be defined + /// on ticks in the scriptable options context. + /// + public bool Enabled { get; set; } = false; - #endregion + #endregion } /// @@ -524,66 +524,66 @@ public class ChartAxesTicksMajor /// public class ChartAxesTitle { - #region Fields and Constants + #region Fields and Constants - private TitleAlignment titleAlignment; + private TitleAlignment titleAlignment; - #endregion + #endregion - #region Methods + #region Methods - private void SetTitleAlignment( TitleAlignment interactionMode ) => - Alignment = interactionMode switch - { - TitleAlignment.Center => "center", // default - TitleAlignment.Start => "start", - TitleAlignment.End => "end", - _ => null - }; + private void SetTitleAlignment(TitleAlignment interactionMode) => + Alignment = interactionMode switch + { + TitleAlignment.Center => "center", // default + TitleAlignment.Start => "start", + TitleAlignment.End => "end", + _ => null + }; - #endregion + #endregion - #region Properties, Indexers + #region Properties, Indexers - /// - /// Alignment of the title. - /// Options are: 'start', 'center', and 'end' - /// - [JsonPropertyName( "align" )] - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Alignment { get; private set; } + /// + /// Alignment of the title. + /// Options are: 'start', 'center', and 'end' + /// + [JsonPropertyName("align")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Alignment { get; private set; } - /// - /// Color of text. - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Color { get; set; } = "black"; + /// + /// Color of text. + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Color { get; set; } = "black"; - /// - /// Is the title shown? - /// - public bool Display { get; set; } + /// + /// Is the title shown? + /// + public bool Display { get; set; } - public ChartFont? Font { get; set; } = new(); + public ChartFont? Font { get; set; } = new(); - //fullSize - //padding - //position + //fullSize + //padding + //position - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] public string? Text { get; set; } + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] public string? Text { get; set; } - [JsonIgnore] - public TitleAlignment TitleAlignment - { - get => titleAlignment; - set + [JsonIgnore] + public TitleAlignment TitleAlignment { - titleAlignment = value; - SetTitleAlignment( value ); + get => titleAlignment; + set + { + titleAlignment = value; + SetTitleAlignment(value); + } } - } - #endregion + #endregion } /// @@ -591,39 +591,39 @@ public TitleAlignment TitleAlignment /// public class ChartFont { - #region Properties, Indexers - - /// - /// Default font family for all text, follows CSS font-family options. - /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Family { get; set; } - - /// - /// Height of an individual line of text - /// - /// - public double LineHeight { get; set; } = 1.2; - - /// - /// Default font size (in px) for text. Does not apply to radialLinear scale point labels. - /// - 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). - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Style { get; set; } - - /// - /// Default font weight (boldness). - /// - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? Weight { get; set; } = "bold"; - - #endregion + #region Properties, Indexers + + /// + /// Default font family for all text, follows CSS font-family options. + /// 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Family { get; set; } + + /// + /// Height of an individual line of text + /// + /// + public double LineHeight { get; set; } = 1.2; + + /// + /// Default font size (in px) for text. Does not apply to radialLinear scale point labels. + /// + 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). + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Style { get; set; } + + /// + /// Default font weight (boldness). + /// + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? Weight { get; set; } = "bold"; + + #endregion } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs b/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs index 19747610c..df2784ec1 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/LineChartOptions.cs @@ -2,30 +2,30 @@ public class LineChartOptions : ChartOptions { - #region Properties, Indexers + #region Properties, Indexers - //hover -> mode, intersect - //maintainAspectRatio - //plugins -> title -> display, text + //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 . - /// - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - public string? IndexAxis { get; set; } + /// + /// The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. + /// + /// + /// Default value is . + /// + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string? IndexAxis { get; set; } - public Interaction Interaction { get; set; } = new(); + public Interaction Interaction { get; set; } = new(); - public ChartLayout Layout { get; set; } = new(); + public ChartLayout Layout { get; set; } = new(); - public LineChartPlugins Plugins { get; set; } = new(); + public LineChartPlugins Plugins { get; set; } = new(); - public LineChartScales Scales { get; set; } = new(); + public LineChartScales Scales { get; set; } = new(); - #endregion + #endregion - //tooltips -> mode, intersect + //tooltips -> mode, intersect } diff --git a/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs b/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs index 88e950515..b321ec059 100644 --- a/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs +++ b/blazorbootstrap/Models/Charts/ChartOptions/LineChartScales.cs @@ -1,10 +1,13 @@ -namespace BlazorBootstrap +namespace BlazorBootstrap; + +public class LineChartScales : Scales { - public class LineChartScales : Scales - { - [JsonIgnore( Condition = JsonIgnoreCondition.WhenWritingNull )] - [JsonPropertyOrder( 2 )] - [JsonPropertyName( "Y1" )] + #region Properties, Indexers + + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + [JsonPropertyOrder(2)] + [JsonPropertyName("Y1")] public ChartAxes? SecondaryY { get; set; } = new() { Display = false, Position = "right" }; - } -} \ No newline at end of file + + #endregion +} From 3270f65c8a08ac7cbb6d0e543b399f160f13f637 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 7 Sep 2024 16:14:29 +0530 Subject: [PATCH 6/6] Formatting updates --- .../LineChart_Demo_06_Secondary_Axis.razor | 172 +++++++++--------- 1 file changed, 86 insertions(+), 86 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.razor index 1d2d86cdb..7c8b6af8c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Secondary_Axis.razor @@ -1,102 +1,102 @@  @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() }; - lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; - - lineChartOptions.Scales.Y!.Title = new ChartAxesTitle() { Display = true, Text = "Primary y-axis" }; - lineChartOptions.Scales.Y!.Max = 100; - // Set secondary y-axis - lineChartOptions.Scales.SecondaryY!.Display = true; - lineChartOptions.Scales.SecondaryY!.Title = new ChartAxesTitle() { Display = true, Text = "Secondary y-axis" }; - lineChartOptions.Scales.SecondaryY!.Max = 500; - } - - protected override async Task OnAfterRenderAsync( bool firstRender ) - { - if( firstRender ) + 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() { - await lineChart.InitializeAsync( chartData, lineChartOptions ); + chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets() }; + lineChartOptions = new() { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } }; + + lineChartOptions.Scales.Y!.Title = new ChartAxesTitle() { Display = true, Text = "Primary y-axis" }; + lineChartOptions.Scales.Y!.Max = 100; + // Set secondary y-axis + lineChartOptions.Scales.SecondaryY!.Display = true; + lineChartOptions.Scales.SecondaryY!.Title = new ChartAxesTitle() { Display = true, Text = "Secondary y-axis" }; + lineChartOptions.Scales.SecondaryY!.Max = 500; } - await base.OnAfterRenderAsync( firstRender ); - } - - #region Data Preparation - - private List GetDefaultDataSets() - { - var datasets = new List(); - var primaryDataset = GetRandomLineChartDataset( 100 ); - var secondaryDataset = GetRandomLineChartDataset( 500 ); - - // Move the dataset to the secondary y-axis - secondaryDataset.OnSecondaryYAxis = true; - - datasets.Add( primaryDataset ); - datasets.Add( secondaryDataset ); - - return datasets; - } - - private LineChartDataset GetRandomLineChartDataset( int max ) - { - var c = ColorUtility.CategoricalTwelveColors[ datasetsCount ].ToColor(); - - datasetsCount += 1; - - return new LineChartDataset - { - Label = $"Team {datasetsCount}", - Data = GetRandomData( max ), - BackgroundColor = c.ToRgbString(), - BorderColor = c.ToRgbString(), - BorderWidth = 2, - HoverBorderWidth = 4, - // PointBackgroundColor = c.ToRgbString(), - // PointRadius = 0, // hide points - // PointHoverRadius = 4, - }; - } - - private List GetRandomData( int max ) - { - var data = new List(); - for( var index = 0; index < labelsCount; index++ ) + + protected override async Task OnAfterRenderAsync(bool firstRender) { - data.Add( random.Next( max ) ); + if (firstRender) + { + await lineChart.InitializeAsync(chartData, lineChartOptions); + } + await base.OnAfterRenderAsync(firstRender); } - return data; - } + #region Data Preparation - private List GetDefaultDataLabels( int numberOfLabels ) - { - var labels = new List(); - for( var index = 0; index < numberOfLabels; index++ ) + private List GetDefaultDataSets() { - labels.Add( GetNextDataLabel() ); + var datasets = new List(); + var primaryDataset = GetRandomLineChartDataset(100); + var secondaryDataset = GetRandomLineChartDataset(500); + + // Move the dataset to the secondary y-axis + secondaryDataset.OnSecondaryYAxis = true; + + datasets.Add(primaryDataset); + datasets.Add(secondaryDataset); + + return datasets; } - return labels; - } + private LineChartDataset GetRandomLineChartDataset(int max) + { + var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor(); + + datasetsCount += 1; + + return new LineChartDataset + { + Label = $"Team {datasetsCount}", + Data = GetRandomData(max), + BackgroundColor = c.ToRgbString(), + BorderColor = c.ToRgbString(), + BorderWidth = 2, + HoverBorderWidth = 4, + // PointBackgroundColor = c.ToRgbString(), + // PointRadius = 0, // hide points + // PointHoverRadius = 4, + }; + } - private string GetNextDataLabel() - { - labelsCount += 1; - return $"Day {labelsCount}"; - } + private List GetRandomData(int max) + { + var data = new List(); + for (var index = 0; index < labelsCount; index++) + { + data.Add(random.Next(max)); + } + + 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 + #endregion Data Preparation } \ No newline at end of file