From 283666c4ee06b25845cfd53ec55d45e5bbc51fcc Mon Sep 17 00:00:00 2001 From: Joel Liechti <52202086+Joelius300@users.noreply.github.com> Date: Wed, 1 Jan 2020 22:04:47 +0100 Subject: [PATCH] Fix and improve axis-tick configurations (#68) * Fix inheritance and summaries, add/organize properties * Update xml-docs --- .../Common/Axes/Ticks/CartesianTicks.cs | 37 +++-- .../Common/Axes/Ticks/CategoryTicks.cs | 9 +- .../Common/Axes/Ticks/LinearCartesianTicks.cs | 23 ++- .../Common/Axes/Ticks/LinearRadialTicks .cs | 2 +- .../Common/Axes/Ticks/LogarithmicTicks.cs | 13 +- .../ChartJS/Common/Axes/Ticks/SubTicks.cs | 6 +- .../ChartJS/Common/Axes/Ticks/Ticks.cs | 47 ++---- .../ChartJS/Common/Axes/Ticks/TimeTicks.cs | 5 +- .../ChartJS/Common/Enums/TickSource.cs | 7 +- src/ChartJs.Blazor/ChartJs.Blazor.xml | 134 ++++++++---------- 10 files changed, 127 insertions(+), 156 deletions(-) diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CartesianTicks.cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CartesianTicks.cs index 75aa4aca..edc8a353 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CartesianTicks.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CartesianTicks.cs @@ -1,50 +1,61 @@ namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks { /// + /// The base class for all tick mark configurations of cartesian axes (see ). Ticks-subconfig of . /// As per documentation here https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration /// - public abstract class CartesianTicks + public abstract class CartesianTicks : Ticks { + /// + /// Gets or sets the user defined minimum number for the scale, overrides minimum value from data. + /// + public double? Min { get; set; } + + /// + /// Gets or sets the user defined maximum number for the scale, overrides maximum value from data. + /// + public double? Max { get; set; } + + /// + /// The number of ticks to examine when deciding how many labels will fit. + /// Setting a smaller value will be faster, but may be less accurate when there is large variability in label length. + /// + public int? SampleSize { get; set; } + /// /// If true, automatically calculates how many labels can be shown and hides labels accordingly. - /// Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what. + /// Labels will be rotated up to maxRotation before skipping any. Turn off to show all labels no matter what. /// public bool AutoSkip { get; set; } = true; /// - /// Padding between the ticks on the horizontal axis when is enabled. + /// Gets or sets the padding between the ticks on the horizontal axis when is enabled. /// public int AutoSkipPadding { get; set; } /// - /// Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). + /// Gets or sets the distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). /// Note: this can cause labels at the edges to be cropped by the edge of the canvas. /// public int LabelOffset { get; set; } /// - /// Maximum rotation for tick labels when rotating to condense labels. + /// Gets or sets the maximum rotation for tick labels when rotating to condense labels. /// Note: Rotation doesn't occur until necessary. /// Note: Only applicable to horizontal scales. /// public int? MaxRotation { get; set; } /// - /// Minimum rotation for tick labels. + /// Gets or sets the minimum rotation for tick labels. /// Note: Only applicable to horizontal scales. /// public int? MinRotation { get; set; } /// - /// Flips tick labels around axis, displaying the labels inside the chart instead of outside. + /// If true, flips tick labels around axis, displaying the labels inside the chart instead of outside. /// Note: Only applicable to vertical scales. /// public bool? Mirror { get; set; } - - /// - /// Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. - /// When set on a horizontal axis, this applies in the vertical (Y) direction. - /// - public int Padding { get; set; } } } \ No newline at end of file diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CategoryTicks.cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CategoryTicks.cs index b182f5da..e65b6c99 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CategoryTicks.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CategoryTicks.cs @@ -2,21 +2,24 @@ namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks { + /// + /// The ticks-subconfig of . + /// public class CategoryTicks : CartesianTicks { /// - /// An array of labels to display. + /// Gets or sets an array of labels to display. /// public List Labels { get; set; } /// - /// The minimum item to display. The item has to be present in . + /// Gets or sets the minimum item to display. The item has to be present in . /// Read more https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration /// public string Min { get; set; } /// - /// The maximum item to display. The item has to be present in . + /// Gets or sets the maximum item to display. The item has to be present in . /// Read more https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration /// public string Max { get; set; } diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearCartesianTicks.cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearCartesianTicks.cs index ab5d5c5c..1cb23126 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearCartesianTicks.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearCartesianTicks.cs @@ -2,6 +2,7 @@ namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks { /// + /// The ticks-subconfig of . /// https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#tick-configuration-options /// public class LinearCartesianTicks : CartesianTicks @@ -12,38 +13,30 @@ public class LinearCartesianTicks : CartesianTicks public bool? BeginAtZero { get; set; } /// - /// User defined minimum number for the scale, overrides minimum value from data. - /// - public int? Min { get; set; } - - /// - /// User defined maximum number for the scale, overrides maximum value from data. - /// - public int? Max { get; set; } - - /// - /// Maximum number of ticks and gridlines to show. + /// Gets or sets the maximum number of ticks and gridlines to show. /// public int MaxTicksLimit { get; set; } = 11; /// - /// if defined and is not specified, the step size will be rounded to this many decimal places. + /// If defined and is not specified, the step size will be rounded to this many decimal places. /// public int? Precision { get; set; } /// - /// User defined fixed step size for the scale. + /// Gets or sets the user defined fixed step size for the scale. /// See https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size for details /// public double? StepSize { get; set; } /// - /// Adjustment used when calculating the maximum data value. This value is used as the highest value if it's higher than the maximum data-value. + /// Gets or sets the adjustment used when calculating the maximum data value. + /// This value is used as the highest value if it's higher than the maximum data-value. /// public int? SuggestedMax { get; set; } /// - /// Adjustment used when calculating the minimum data value. This value is used as the lowest value if it's lower than the minimum data-value. + /// Gets or sets the adjustment used when calculating the minimum data value. + /// This value is used as the lowest value if it's lower than the minimum data-value. /// public int? SuggestedMin { get; set; } } diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearRadialTicks .cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearRadialTicks .cs index fcd21fb1..dc9810ce 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearRadialTicks .cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LinearRadialTicks .cs @@ -48,7 +48,7 @@ public class LinearRadialTicks : Ticks public int MaxTicksLimit { get; set; } = 11; /// - /// If defined and StepSize is not specified, the step size will be rounded to this many decimal places. + /// If defined and is not specified, the step size will be rounded to this many decimal places. /// public int? Precision { get; set; } diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LogarithmicTicks.cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LogarithmicTicks.cs index 6cbf1bb5..8b412c44 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LogarithmicTicks.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LogarithmicTicks.cs @@ -1,16 +1,11 @@  namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks { + /// + /// The ticks-subconfig of . It has the same members as . + /// https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html#tick-configuration-options + /// public class LogarithmicTicks : CartesianTicks { - /// - /// User defined minimum number for the scale, overrides minimum value from data. - /// - public int Min { get; set; } - - /// - /// User defined maximum number for the scale, overrides maximum value from data. - /// - public int Max { get; set; } } } diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/SubTicks.cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/SubTicks.cs index 69be2a52..3c47c173 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/SubTicks.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/SubTicks.cs @@ -4,12 +4,12 @@ namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks { /// - /// The base class for minor and major ticks (see and see ). + /// The ultimate base class for tick mark configurations. /// public abstract class SubTicks { /// - /// Gets or sets the font color for a tick's labels. + /// Gets or sets the font color for a tick's label. /// See for working with colors. /// public string FontColor { get; set; } @@ -22,7 +22,7 @@ public abstract class SubTicks /// /// Gets or sets the font size for a tick's label. /// - public int FontSize { get; set; } = 12; + public int? FontSize { get; set; } /// /// Gets or sets the font style for a tick's label. diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/Ticks.cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/Ticks.cs index e93b24bd..71a935f2 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/Ticks.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/Ticks.cs @@ -4,61 +4,40 @@ namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks { /// - /// The ticks-subconfig of the axis-configuration (see ). + /// The base class for all tick mark configurations. Ticks-subconfig of the common . /// As per documentation here https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration /// - public abstract class Ticks + public abstract class Ticks : SubTicks { /// - /// Gets or sets the value indicating whether this shows marks. + /// Gets or sets the value indicating whether this axis displays tick marks. /// public bool Display { get; set; } = true; /// - /// Gets or sets the font color for labels. - /// See for working with colors. - /// - public string FontColor { get; set; } - - /// - /// Gets or sets the font family for the labels. - /// - public string FontFamily { get; set; } - - /// - /// Gets or sets the font size for the labels. - /// - public int FontSize { get; set; } = 12; - - /// - /// Gets or sets the font style for the labels. - /// - public FontStyle FontStyle { get; set; } - - /// - /// Gets or sets the height of an individual line of text. - /// As per documentation here https://developer.mozilla.org/en-US/docs/Web/CSS/line-height - /// - public double LineHeight { get; set; } = 1.2; - - /// - /// Gets or sets the value indicating whether the order of labels is reversed. + /// Gets or sets the value indicating whether the order of the tick labels is reversed. /// public bool Reverse { get; set; } = false; /// - /// Gets or sets the minor ticks configuration. Omitted options are inherited from options above (see ). + /// Gets or sets the minor ticks configuration. Omitted options are inherited. /// public MinorTicks Minor { get; set; } /// - /// Gets or sets the major ticks configuration. Omitted options are inherited from options above (see ). + /// Gets or sets the major ticks configuration. Omitted options are inherited. /// public MajorTicks Major { get; set; } /// - /// Gets or sets the offset of the tick labels from the axis + /// Gets or sets the offset of the tick labels from the axis. When set on a vertical axis, this applies in the horizontal (X) direction. + /// When set on a horizontal axis, this applies in the vertical (Y) direction. /// public int Padding { get; set; } = 0; + + /// + /// Gets or sets the Z-index of the tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top. + /// + public int Z { get; set; } } } \ No newline at end of file diff --git a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/TimeTicks.cs b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/TimeTicks.cs index cfd44d0c..ecb04acc 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/TimeTicks.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/TimeTicks.cs @@ -2,10 +2,13 @@ namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks { + /// + /// The ticks-subconfig of a . + /// public class TimeTicks : CartesianTicks { /// - /// How ticks are generated. + /// Gets or sets how ticks are generated. /// public TickSource Source { get; set; } } diff --git a/src/ChartJs.Blazor/ChartJS/Common/Enums/TickSource.cs b/src/ChartJs.Blazor/ChartJS/Common/Enums/TickSource.cs index b279905e..c4d38db8 100644 --- a/src/ChartJs.Blazor/ChartJS/Common/Enums/TickSource.cs +++ b/src/ChartJs.Blazor/ChartJS/Common/Enums/TickSource.cs @@ -3,21 +3,20 @@ /// /// As per documentation here https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source /// - /// public sealed class TickSource : StringEnum { /// - /// Generates "optimal" ticks based on scale size and time options + /// Generates "optimal" ticks based on scale size and time options. /// public static TickSource Auto => new TickSource("auto"); /// - /// Generates ticks from data (including labels from data {t|x|y} objects) + /// Generates ticks from data (including labels from data {t|x|y} objects). /// public static TickSource Data => new TickSource("data"); /// - /// Generates ticks from user given values ONLY + /// Generates ticks from user given values ONLY. /// public static TickSource Labels => new TickSource("labels"); diff --git a/src/ChartJs.Blazor/ChartJs.Blazor.xml b/src/ChartJs.Blazor/ChartJs.Blazor.xml index 0a2a0842..79aca0e4 100644 --- a/src/ChartJs.Blazor/ChartJs.Blazor.xml +++ b/src/ChartJs.Blazor/ChartJs.Blazor.xml @@ -729,70 +729,87 @@ + The base class for all tick mark configurations of cartesian axes (see ). Ticks-subconfig of . As per documentation here https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration + + + Gets or sets the user defined minimum number for the scale, overrides minimum value from data. + + + + + Gets or sets the user defined maximum number for the scale, overrides maximum value from data. + + + + + The number of ticks to examine when deciding how many labels will fit. + Setting a smaller value will be faster, but may be less accurate when there is large variability in label length. + + If true, automatically calculates how many labels can be shown and hides labels accordingly. - Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what. + Labels will be rotated up to maxRotation before skipping any. Turn off to show all labels no matter what. - Padding between the ticks on the horizontal axis when is enabled. + Gets or sets the padding between the ticks on the horizontal axis when is enabled. - Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). + Gets or sets the distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas. - Maximum rotation for tick labels when rotating to condense labels. + Gets or sets the maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. Note: Only applicable to horizontal scales. - Minimum rotation for tick labels. + Gets or sets the minimum rotation for tick labels. Note: Only applicable to horizontal scales. - Flips tick labels around axis, displaying the labels inside the chart instead of outside. + If true, flips tick labels around axis, displaying the labels inside the chart instead of outside. Note: Only applicable to vertical scales. - + - Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. - When set on a horizontal axis, this applies in the vertical (Y) direction. + The ticks-subconfig of . - An array of labels to display. + Gets or sets an array of labels to display. - The minimum item to display. The item has to be present in . + Gets or sets the minimum item to display. The item has to be present in . Read more https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration - The maximum item to display. The item has to be present in . + Gets or sets the maximum item to display. The item has to be present in . Read more https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration + The ticks-subconfig of . https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#tick-configuration-options @@ -801,40 +818,32 @@ If true, scale will include 0 if it is not already included. - - - User defined minimum number for the scale, overrides minimum value from data. - - - - - User defined maximum number for the scale, overrides maximum value from data. - - - Maximum number of ticks and gridlines to show. + Gets or sets the maximum number of ticks and gridlines to show. - if defined and is not specified, the step size will be rounded to this many decimal places. + If defined and is not specified, the step size will be rounded to this many decimal places. - User defined fixed step size for the scale. + Gets or sets the user defined fixed step size for the scale. See https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size for details - Adjustment used when calculating the maximum data value. This value is used as the highest value if it's higher than the maximum data-value. + Gets or sets the adjustment used when calculating the maximum data value. + This value is used as the highest value if it's higher than the maximum data-value. - Adjustment used when calculating the minimum data value. This value is used as the lowest value if it's lower than the minimum data-value. + Gets or sets the adjustment used when calculating the minimum data value. + This value is used as the lowest value if it's lower than the minimum data-value. @@ -883,7 +892,7 @@ - If defined and StepSize is not specified, the step size will be rounded to this many decimal places. + If defined and is not specified, the step size will be rounded to this many decimal places. @@ -909,14 +918,10 @@ Gets or sets the value indicating whether a background is drawn behind the tick labels. - - - User defined minimum number for the scale, overrides minimum value from data. - - - + - User defined maximum number for the scale, overrides maximum value from data. + The ticks-subconfig of . It has the same members as . + https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html#tick-configuration-options @@ -938,12 +943,12 @@ - The base class for minor and major ticks (see and see ). + The ultimate base class for tick mark configurations. - Gets or sets the font color for a tick's labels. + Gets or sets the font color for a tick's label. See for working with colors. @@ -970,65 +975,49 @@ - The ticks-subconfig of the axis-configuration (see ). + The base class for all tick mark configurations. Ticks-subconfig of the common . As per documentation here https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration - Gets or sets the value indicating whether this shows marks. - - - - - Gets or sets the font color for labels. - See for working with colors. - - - - - Gets or sets the font family for the labels. - - - - - Gets or sets the font size for the labels. + Gets or sets the value indicating whether this axis displays tick marks. - + - Gets or sets the font style for the labels. + Gets or sets the value indicating whether the order of the tick labels is reversed. - + - Gets or sets the height of an individual line of text. - As per documentation here https://developer.mozilla.org/en-US/docs/Web/CSS/line-height + Gets or sets the minor ticks configuration. Omitted options are inherited. - + - Gets or sets the value indicating whether the order of labels is reversed. + Gets or sets the major ticks configuration. Omitted options are inherited. - + - Gets or sets the minor ticks configuration. Omitted options are inherited from options above (see ). + Gets or sets the offset of the tick labels from the axis. When set on a vertical axis, this applies in the horizontal (X) direction. + When set on a horizontal axis, this applies in the vertical (Y) direction. - + - Gets or sets the major ticks configuration. Omitted options are inherited from options above (see ). + Gets or sets the Z-index of the tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top. - + - Gets or sets the offset of the tick labels from the axis + The ticks-subconfig of a . - How ticks are generated. + Gets or sets how ticks are generated. @@ -1649,21 +1638,20 @@ As per documentation here https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source - - Generates "optimal" ticks based on scale size and time options + Generates "optimal" ticks based on scale size and time options. - Generates ticks from data (including labels from data {t|x|y} objects) + Generates ticks from data (including labels from data {t|x|y} objects). - Generates ticks from user given values ONLY + Generates ticks from user given values ONLY.