|
| 1 | +--- |
| 2 | +title: LinearGauge Scale Widths Are Different |
| 3 | +description: Learn how to define consistent scale widths for Telerik Linear Gauges for Blazor, when the components are using different Min and Max values. |
| 4 | +type: troubleshooting |
| 5 | +page_title: How to Fix Different LinearGauge Scale Widths |
| 6 | +slug: lineargauge-kb-align-gauge-widths-with-different-min-max |
| 7 | +tags: blazor, gauge, lineargauge |
| 8 | +ticketid: 1704384 |
| 9 | +res_type: kb |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +<table> |
| 15 | + <tbody> |
| 16 | + <tr> |
| 17 | + <td>Product</td> |
| 18 | + <td>LinearGauge for Blazor</td> |
| 19 | + </tr> |
| 20 | + </tbody> |
| 21 | +</table> |
| 22 | + |
| 23 | +## Description |
| 24 | + |
| 25 | +I am using several `<TelerikLinearGauge>` instances in a Blazor app. They display on multiple lines and need to be aligned. |
| 26 | +The `Min` and `Max` values are different and set dynamically at runtime. |
| 27 | +Although the Gauge `Width` parameters have the same value, the Gauge scale widths are different. |
| 28 | + |
| 29 | +## Cause |
| 30 | + |
| 31 | +The LinearGauge `Width` parameter affects the total width of the component. However, the scale width decreases when the length of the `Min` and `Max` labels increases. |
| 32 | + |
| 33 | +## Solution |
| 34 | + |
| 35 | +To achieve consistent width of multiple LinearGauges, set larger `Width` to the instances that have longer `Min` and `Max` labels. |
| 36 | + |
| 37 | +1. Apply `monospace` font family to the Gauge labels (`div.k-gauge text`). |
| 38 | +1. Calculate the Linear Gauge `Width`, based on the string length of the `Min` and `Max` values. Add 3px for each additional `Min` or `Max` digit. |
| 39 | +1. Make sure that `MajorUnit` and `MinorUnit` are divisors of the difference between `Min` and `Max`. Otherwise the Gauge scale may not be consistent with the set component `Width`. |
| 40 | + |
| 41 | +>caption Align linear Gauges with different Min and Max values |
| 42 | +
|
| 43 | +````RAZOR |
| 44 | +<div class="example-container"> |
| 45 | +
|
| 46 | +Width Correction Multiplier: |
| 47 | +<TelerikNumericTextBox @bind-Value="@WidthMultiplier" |
| 48 | + Min="@(0.1m)" Max="@(10m)" |
| 49 | + Width="80px" /> |
| 50 | +
|
| 51 | +<TelerikButton OnClick="@RefreshGauges" |
| 52 | + ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Refresh Gauges to Apply Changes</TelerikButton> |
| 53 | +
|
| 54 | +<br /> |
| 55 | +
|
| 56 | +Gauge Widths: |
| 57 | +@($"{GetGaugeWidth(BaseWidth, GaugeMin1, GaugeMax1)}px"), |
| 58 | +@($"{GetGaugeWidth(BaseWidth, GaugeMin2, GaugeMax2)}px"), |
| 59 | +@($"{GetGaugeWidth(BaseWidth, GaugeMin3, GaugeMax3)}px") |
| 60 | +<br /> |
| 61 | +<strong>For proper alignment, the Gauge widths (yellow) must be smaller than the container widths (green).</strong> |
| 62 | +<br /><br /> |
| 63 | +
|
| 64 | +<div> |
| 65 | + Min: <TelerikNumericTextBox @bind-Value="@GaugeMin1" Width="120px" Min="0" Max="1_000_000" /> |
| 66 | + Max: <TelerikNumericTextBox @bind-Value="@GaugeMax1" Width="120px" Min="0" Max="1_000_000" /> |
| 67 | + MinorUnit: @GetGaugeMinorUnit(GaugeMin1, GaugeMax1) | |
| 68 | + MajorUnit: @GetGaugeMajorUnit(GaugeMin1, GaugeMax1) |
| 69 | +</div> |
| 70 | +
|
| 71 | +<div class="gauge-container"> |
| 72 | + <TelerikLinearGauge @ref="@LinearGaugeRef1" |
| 73 | + Width="@($"{GetGaugeWidth(BaseWidth, GaugeMin1, GaugeMax1)}px")" |
| 74 | + Height="60px"> |
| 75 | + <LinearGaugeScales> |
| 76 | + <LinearGaugeScale Min="@GaugeMin1" |
| 77 | + Max="@GaugeMax1" |
| 78 | + MinorUnit="@GetGaugeMinorUnit(GaugeMin1, GaugeMax1)" |
| 79 | + MajorUnit="@GetGaugeMajorUnit(GaugeMin1, GaugeMax1)" |
| 80 | + Vertical="false"> |
| 81 | + </LinearGaugeScale> |
| 82 | + </LinearGaugeScales> |
| 83 | + <LinearGaugePointers> |
| 84 | + <LinearGaugePointer Value="@(GaugeMin1 + (GaugeMax1 - GaugeMin1) / 6)"></LinearGaugePointer> |
| 85 | + </LinearGaugePointers> |
| 86 | + </TelerikLinearGauge> |
| 87 | +</div> |
| 88 | +
|
| 89 | +<div> |
| 90 | + Min: <TelerikNumericTextBox @bind-Value="@GaugeMin2" Width="120px" Min="0" Max="1_000_000" /> |
| 91 | + Max: <TelerikNumericTextBox @bind-Value="@GaugeMax2" Width="120px" Min="0" Max="1_000_000" /> |
| 92 | + MinorUnit: @GetGaugeMinorUnit(GaugeMin2, GaugeMax2) | |
| 93 | + MajorUnit: @GetGaugeMajorUnit(GaugeMin2, GaugeMax2) |
| 94 | +</div> |
| 95 | +
|
| 96 | +<div class="gauge-container"> |
| 97 | + <TelerikLinearGauge @ref="@LinearGaugeRef2" |
| 98 | + Width="@($"{GetGaugeWidth(BaseWidth, GaugeMin2, GaugeMax2)}px")" |
| 99 | + Height="60px"> |
| 100 | + <LinearGaugeScales> |
| 101 | + <LinearGaugeScale Min="@GaugeMin2" |
| 102 | + Max="@GaugeMax2" |
| 103 | + MinorUnit="@GetGaugeMinorUnit(GaugeMin2, GaugeMax2)" |
| 104 | + MajorUnit="@GetGaugeMajorUnit(GaugeMin2, GaugeMax2)" |
| 105 | + Vertical="false"> |
| 106 | + </LinearGaugeScale> |
| 107 | + </LinearGaugeScales> |
| 108 | + <LinearGaugePointers> |
| 109 | + <LinearGaugePointer Value="@(GaugeMin2 + (GaugeMax2 - GaugeMin2) / 3)"></LinearGaugePointer> |
| 110 | + </LinearGaugePointers> |
| 111 | + </TelerikLinearGauge> |
| 112 | +</div> |
| 113 | +
|
| 114 | +<div> |
| 115 | + Min: <TelerikNumericTextBox @bind-Value="@GaugeMin3" Width="120px" Min="0" Max="1_000_000" /> |
| 116 | + Max: <TelerikNumericTextBox @bind-Value="@GaugeMax3" Width="120px" Min="0" Max="1_000_000" /> |
| 117 | + MinorUnit: @GetGaugeMinorUnit(GaugeMin3, GaugeMax3) | |
| 118 | + MajorUnit: @GetGaugeMajorUnit(GaugeMin3, GaugeMax3) |
| 119 | +</div> |
| 120 | +
|
| 121 | +<div class="gauge-container"> |
| 122 | + <TelerikLinearGauge @ref="@LinearGaugeRef3" |
| 123 | + Width="@($"{GetGaugeWidth(BaseWidth, GaugeMin3, GaugeMax3)}px")" |
| 124 | + Height="60px"> |
| 125 | + <LinearGaugeScales> |
| 126 | + <LinearGaugeScale Min="@GaugeMin3" |
| 127 | + Max="@GaugeMax3" |
| 128 | + MinorUnit="@GetGaugeMinorUnit(GaugeMin3, GaugeMax3)" |
| 129 | + MajorUnit="@GetGaugeMajorUnit(GaugeMin3, GaugeMax3)" |
| 130 | + Vertical="false"> |
| 131 | + </LinearGaugeScale> |
| 132 | + </LinearGaugeScales> |
| 133 | + <LinearGaugePointers> |
| 134 | + <LinearGaugePointer Value="@(GaugeMin3 + (GaugeMax3 - GaugeMin3) / 2)"></LinearGaugePointer> |
| 135 | + </LinearGaugePointers> |
| 136 | + </TelerikLinearGauge> |
| 137 | +</div> |
| 138 | +
|
| 139 | +<div class="alignment-checker"></div> |
| 140 | +
|
| 141 | +</div> |
| 142 | +
|
| 143 | +<style> |
| 144 | + /* Use monospace font for easier and consistent width adjustments. */ |
| 145 | + div.k-gauge text { |
| 146 | + font-family: monospace !important; |
| 147 | + } |
| 148 | +
|
| 149 | + .example-container { |
| 150 | + position: relative; |
| 151 | + } |
| 152 | + .gauge-container { |
| 153 | + display: flex; |
| 154 | + justify-content: center; |
| 155 | + width: 600px; |
| 156 | + background: lime; |
| 157 | + } |
| 158 | + .alignment-checker { |
| 159 | + position: absolute; |
| 160 | + top: 125px; |
| 161 | + left: 105px; |
| 162 | + width: 390px; |
| 163 | + height: 230px; |
| 164 | + border: solid red; |
| 165 | + border-width: 0 1px; |
| 166 | + } |
| 167 | + div.k-gauge { |
| 168 | + background: yellow; |
| 169 | + } |
| 170 | +</style> |
| 171 | +
|
| 172 | +@code { |
| 173 | + #nullable enable |
| 174 | +
|
| 175 | + private int BaseWidth { get; set; } = 400; |
| 176 | + private decimal WidthMultiplier { get; set; } = 3m; |
| 177 | +
|
| 178 | + private TelerikLinearGauge? LinearGaugeRef1 { get; set; } |
| 179 | + private int GaugeMin1 { get; set; } = 0; |
| 180 | + private int GaugeMax1 { get; set; } = 50; |
| 181 | +
|
| 182 | + private TelerikLinearGauge? LinearGaugeRef2 { get; set; } |
| 183 | + private int GaugeMin2 { get; set; } = 150; |
| 184 | + private int GaugeMax2 { get; set; } = 300; |
| 185 | +
|
| 186 | + private TelerikLinearGauge? LinearGaugeRef3 { get; set; } |
| 187 | + private int GaugeMin3 { get; set; } = 10000; |
| 188 | + private int GaugeMax3 { get; set; } = 11000; |
| 189 | +
|
| 190 | + private void RefreshGauges() |
| 191 | + { |
| 192 | + LinearGaugeRef1?.Refresh(); |
| 193 | + LinearGaugeRef2?.Refresh(); |
| 194 | + LinearGaugeRef3?.Refresh(); |
| 195 | + } |
| 196 | +
|
| 197 | + private string GetGaugeWidth(int baseWidth, int min, int max) |
| 198 | + { |
| 199 | + int correction = string.Concat(min.ToString(), max.ToString()).Length; |
| 200 | + decimal width = baseWidth + (WidthMultiplier * correction); |
| 201 | + return width.ToString().Split(",")[0]; |
| 202 | + } |
| 203 | +
|
| 204 | + private int GetGaugeMajorUnit(int min, int max) |
| 205 | + { |
| 206 | + if (max <= min) |
| 207 | + { |
| 208 | + return 1; |
| 209 | + } |
| 210 | +
|
| 211 | + int diff = max - min; |
| 212 | + int divisor = Convert.ToInt32(Math.Ceiling((decimal)diff / 5)); |
| 213 | + while (divisor >= 1) |
| 214 | + { |
| 215 | + if (diff % divisor == 0) |
| 216 | + { |
| 217 | + break; |
| 218 | + } |
| 219 | + else |
| 220 | + { |
| 221 | + divisor -= (diff.ToString().Length - 1); |
| 222 | + } |
| 223 | + } |
| 224 | +
|
| 225 | + return divisor; |
| 226 | + } |
| 227 | +
|
| 228 | + private int GetGaugeMinorUnit(int min, int max) |
| 229 | + { |
| 230 | + if (max <= min) |
| 231 | + { |
| 232 | + return 1; |
| 233 | + } |
| 234 | +
|
| 235 | + int majorUnit = GetGaugeMajorUnit(min, max); |
| 236 | + int divisor = majorUnit / 10; |
| 237 | + while (divisor >= 1) |
| 238 | + { |
| 239 | + if (majorUnit % divisor == 0) |
| 240 | + { |
| 241 | + break; |
| 242 | + } |
| 243 | + else |
| 244 | + { |
| 245 | + divisor -= 1; |
| 246 | + } |
| 247 | + } |
| 248 | +
|
| 249 | + return divisor; |
| 250 | + } |
| 251 | +} |
| 252 | +```` |
| 253 | + |
| 254 | +## See Also |
| 255 | + |
| 256 | +* [Linear Gauge Overview](slug:linear-gauge-overview) |
| 257 | +* [Linear Gauge Scale](slug:linear-gauge-scale) |
| 258 | +* [Linear Gauge Labels](slug:linear-gauge-labels) |
0 commit comments