Skip to content

Commit

Permalink
Fix and improve axis-tick configurations (#68)
Browse files Browse the repository at this point in the history
* Fix inheritance and summaries, add/organize properties

* Update xml-docs
  • Loading branch information
Joelius300 authored Jan 1, 2020
1 parent 64bb35c commit 283666c
Show file tree
Hide file tree
Showing 10 changed files with 127 additions and 156 deletions.
37 changes: 24 additions & 13 deletions src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CartesianTicks.cs
Original file line number Diff line number Diff line change
@@ -1,50 +1,61 @@
namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks
{
/// <summary>
/// The base class for all tick mark configurations of cartesian axes (see <see cref="CartesianAxis"/>). Ticks-subconfig of <see cref="CartesianAxis"/>.
/// As per documentation here https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration
/// </summary>
public abstract class CartesianTicks
public abstract class CartesianTicks : Ticks
{
/// <summary>
/// Gets or sets the user defined minimum number for the scale, overrides minimum value from data.
/// </summary>
public double? Min { get; set; }

/// <summary>
/// Gets or sets the user defined maximum number for the scale, overrides maximum value from data.
/// </summary>
public double? Max { get; set; }

/// <summary>
/// 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.
/// </summary>
public int? SampleSize { get; set; }

/// <summary>
/// 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 <see cref="AutoSkip" /> off to show all labels no matter what.
/// </summary>
public bool AutoSkip { get; set; } = true;

/// <summary>
/// Padding between the ticks on the horizontal axis when <see cref="AutoSkip"></see> is enabled.
/// Gets or sets the padding between the ticks on the horizontal axis when <see cref="AutoSkip" /> is enabled.
/// </summary>
public int AutoSkipPadding { get; set; }

/// <summary>
/// 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).
/// <para>Note: this can cause labels at the edges to be cropped by the edge of the canvas.</para>
/// </summary>
public int LabelOffset { get; set; }

/// <summary>
/// Maximum rotation for tick labels when rotating to condense labels.
/// Gets or sets the maximum rotation for tick labels when rotating to condense labels.
/// <para>Note: Rotation doesn't occur until necessary.</para>
/// <para>Note: Only applicable to horizontal scales.</para>
/// </summary>
public int? MaxRotation { get; set; }

/// <summary>
/// Minimum rotation for tick labels.
/// Gets or sets the minimum rotation for tick labels.
/// <para>Note: Only applicable to horizontal scales.</para>
/// </summary>
public int? MinRotation { get; set; }

/// <summary>
/// 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.
/// <para>Note: Only applicable to vertical scales.</para>
/// </summary>
public bool? Mirror { get; set; }

/// <summary>
/// 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.
/// </summary>
public int Padding { get; set; }
}
}
9 changes: 6 additions & 3 deletions src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/CategoryTicks.cs
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,24 @@

namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks
{
/// <summary>
/// The ticks-subconfig of <see cref="CategoryAxis"/>.
/// </summary>
public class CategoryTicks : CartesianTicks
{
/// <summary>
/// An array of labels to display.
/// Gets or sets an array of labels to display.
/// </summary>
public List<string> Labels { get; set; }

/// <summary>
/// The minimum item to display. The item has to be present in <see cref="Labels"/>.
/// Gets or sets the minimum item to display. The item has to be present in <see cref="Labels"/>.
/// <para>Read more https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration </para>
/// </summary>
public string Min { get; set; }

/// <summary>
/// The maximum item to display. The item has to be present in <see cref="Labels"/>.
/// Gets or sets the maximum item to display. The item has to be present in <see cref="Labels"/>.
/// <para>Read more https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration </para>
/// </summary>
public string Max { get; set; }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks
{
/// <summary>
/// The ticks-subconfig of <see cref="LinearCartesianAxis"/>.
/// https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#tick-configuration-options
/// </summary>
public class LinearCartesianTicks : CartesianTicks
Expand All @@ -12,38 +13,30 @@ public class LinearCartesianTicks : CartesianTicks
public bool? BeginAtZero { get; set; }

/// <summary>
/// User defined minimum number for the scale, overrides minimum value from data.
/// </summary>
public int? Min { get; set; }

/// <summary>
/// User defined maximum number for the scale, overrides maximum value from data.
/// </summary>
public int? Max { get; set; }

/// <summary>
/// Maximum number of ticks and gridlines to show.
/// Gets or sets the maximum number of ticks and gridlines to show.
/// </summary>
public int MaxTicksLimit { get; set; } = 11;

/// <summary>
/// if defined and <see cref="StepSize"></see> is not specified, the step size will be rounded to this many decimal places.
/// If defined and <see cref="StepSize"/> is not specified, the step size will be rounded to this many decimal places.
/// </summary>
public int? Precision { get; set; }

/// <summary>
/// User defined fixed step size for the scale.
/// Gets or sets the user defined fixed step size for the scale.
/// <para>See https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size for details</para>
/// </summary>
public double? StepSize { get; set; }

/// <summary>
/// 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.
/// </summary>
public int? SuggestedMax { get; set; }

/// <summary>
/// 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.
/// </summary>
public int? SuggestedMin { get; set; }
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ public class LinearRadialTicks : Ticks
public int MaxTicksLimit { get; set; } = 11;

/// <summary>
/// If defined and StepSize is not specified, the step size will be rounded to this many decimal places.
/// If defined and <see cref="StepSize"/> is not specified, the step size will be rounded to this many decimal places.
/// </summary>
public int? Precision { get; set; }

Expand Down
13 changes: 4 additions & 9 deletions src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/LogarithmicTicks.cs
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@

namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks
{
/// <summary>
/// The ticks-subconfig of <see cref="LogarithmicAxis"/>. It has the same members as <see cref="CartesianTicks"/>.
/// https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html#tick-configuration-options
/// </summary>
public class LogarithmicTicks : CartesianTicks
{
/// <summary>
/// User defined minimum number for the scale, overrides minimum value from data.
/// </summary>
public int Min { get; set; }

/// <summary>
/// User defined maximum number for the scale, overrides maximum value from data.
/// </summary>
public int Max { get; set; }
}
}
6 changes: 3 additions & 3 deletions src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/SubTicks.cs
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks
{
/// <summary>
/// The base class for minor and major ticks (see <see cref="MinorTicks"/> and see <see cref="MajorTicks"/>).
/// The ultimate base class for tick mark configurations.
/// </summary>
public abstract class SubTicks
{
/// <summary>
/// Gets or sets the font color for a tick's labels.
/// Gets or sets the font color for a tick's label.
/// <para>See <see cref="ColorUtil"/> for working with colors.</para>
/// </summary>
public string FontColor { get; set; }
Expand All @@ -22,7 +22,7 @@ public abstract class SubTicks
/// <summary>
/// Gets or sets the font size for a tick's label.
/// </summary>
public int FontSize { get; set; } = 12;
public int? FontSize { get; set; }

/// <summary>
/// Gets or sets the font style for a tick's label.
Expand Down
47 changes: 13 additions & 34 deletions src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/Ticks.cs
Original file line number Diff line number Diff line change
Expand Up @@ -4,61 +4,40 @@
namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks
{
/// <summary>
/// The ticks-subconfig of the axis-configuration (see <see cref="Axis"/>).
/// The base class for all tick mark configurations. Ticks-subconfig of the common <see cref="Axis"/>.
/// <para>As per documentation here https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration </para>
/// </summary>
public abstract class Ticks
public abstract class Ticks : SubTicks
{
/// <summary>
/// Gets or sets the value indicating whether this shows <see cref="Ticks"/> marks.
/// Gets or sets the value indicating whether this axis displays tick marks.
/// </summary>
public bool Display { get; set; } = true;

/// <summary>
/// Gets or sets the font color for <see cref="Ticks"/> labels.
/// <para>See <see cref="ColorUtil"/> for working with colors.</para>
/// </summary>
public string FontColor { get; set; }

/// <summary>
/// Gets or sets the font family for the <see cref="Ticks"/> labels.
/// </summary>
public string FontFamily { get; set; }

/// <summary>
/// Gets or sets the font size for the <see cref="Ticks"/> labels.
/// </summary>
public int FontSize { get; set; } = 12;

/// <summary>
/// Gets or sets the font style for the <see cref="Ticks"/> labels.
/// </summary>
public FontStyle FontStyle { get; set; }

/// <summary>
/// Gets or sets the height of an individual line of text.
/// <para>As per documentation here https://developer.mozilla.org/en-US/docs/Web/CSS/line-height </para>
/// </summary>
public double LineHeight { get; set; } = 1.2;

/// <summary>
/// Gets or sets the value indicating whether the order of <see cref="Ticks"/> labels is reversed.
/// Gets or sets the value indicating whether the order of the tick labels is reversed.
/// </summary>
public bool Reverse { get; set; } = false;

/// <summary>
/// Gets or sets the minor ticks configuration. Omitted options are inherited from options above (see <see cref="Ticks"/>).
/// Gets or sets the minor ticks configuration. Omitted options are inherited.
/// </summary>
public MinorTicks Minor { get; set; }

/// <summary>
/// Gets or sets the major ticks configuration. Omitted options are inherited from options above (see <see cref="Ticks"/>).
/// Gets or sets the major ticks configuration. Omitted options are inherited.
/// </summary>
public MajorTicks Major { get; set; }

/// <summary>
/// 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.
/// </summary>
public int Padding { get; set; } = 0;

/// <summary>
/// Gets or sets the Z-index of the tick layer. Useful when ticks are drawn on chart area. Values &lt;= 0 are drawn under datasets, &gt; 0 on top.
/// </summary>
public int Z { get; set; }
}
}
5 changes: 4 additions & 1 deletion src/ChartJs.Blazor/ChartJS/Common/Axes/Ticks/TimeTicks.cs
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@

namespace ChartJs.Blazor.ChartJS.Common.Axes.Ticks
{
/// <summary>
/// The ticks-subconfig of a <see cref="TimeAxis"/>.
/// </summary>
public class TimeTicks : CartesianTicks
{
/// <summary>
/// How ticks are generated.
/// Gets or sets how ticks are generated.
/// </summary>
public TickSource Source { get; set; }
}
Expand Down
7 changes: 3 additions & 4 deletions src/ChartJs.Blazor/ChartJS/Common/Enums/TickSource.cs
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,20 @@
/// <summary>
/// As per documentation here https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source
/// </summary>
///
public sealed class TickSource : StringEnum
{
/// <summary>
/// Generates "optimal" ticks based on scale size and time options
/// Generates "optimal" ticks based on scale size and time options.
/// </summary>
public static TickSource Auto => new TickSource("auto");

/// <summary>
/// Generates ticks from data (including labels from data {t|x|y} objects)
/// Generates ticks from data (including labels from data {t|x|y} objects).
/// </summary>
public static TickSource Data => new TickSource("data");

/// <summary>
/// Generates ticks from user given <see cref="LineChart.LineData.Labels"/> values ONLY
/// Generates ticks from user given <see cref="LineChart.LineData.Labels"/> values ONLY.
/// </summary>
public static TickSource Labels => new TickSource("labels");

Expand Down
Loading

0 comments on commit 283666c

Please sign in to comment.