Nightly Changelog: 8.1.11-b20210923
Visualization
2348: Power Chart / Time Series / Chart Range Selector - Add Y axis tick count and data value format
Adds the ability to adjust the tick label display and the tick count for a user-defined Y axis on the Power Chart, Time Series Chart, and Chart Range Selector. New component properties are exposed to allow for this, and both properties default to a value of Auto (current/default behavior) to allow for backwards compatibility.
General Behavior
When the tick count is Auto, Y axis ticks will be added/removed based on the height of the chart, and the tick spacing is adjusted around whole numbers (if appropriate). When the tick count is set to a numeric value, ticks will be generated precisely at the location where that tick should be shown (divide 100 by the number of ticks, and that âpercentage positionâ is where the tick will be shown on the axis). This does not account for whole numbers, and the value will be very precise to that tick location in the axis. If using the Property Editor, the user can enter their own value of select from the follow suggested values:
âAutoâ: âAutoâ,
â2â: 2,
â4â: 4,
â6â: 6,
â8â: 8,
â10â: 10
When the tick label format is Auto, the D3 format ~f is used. This creates a fixed point number that will trim any insignificant trailing zeros (1000.00 â 1000 or .100100 â .1001`). The user can also provide a string value that represents a D3 format. If using the Property Editor, the user can enter their own value of select from the follow suggested values:
âAutoâ: âAutoâ,
âInteger [1234]â: âdâ,
â2 Decimal Points [1234.00]â: â.2fâ,
â4 Decimal Points [1234.0000]â: â.4fâ,
âComma-Separated Integer [1,234]â: â,.0fâ,
âComma-Separated w/ 2 Decimal Points [1,234.00]â: â,.2fâ,
âPercentage [123400%]â: â.0%â,
âCurrency [$1,234.00]â: â$,.2fâ,
âHexadecimal (lowercase) [4d2]â: âxâ,
âHexadecimal (uppercase) [4D2]â: âXâ,
âBinary [10011010010]â: âbâ,
âOctal [2322]â: âoâ,
âExponential [1.234000e+3]â: âeâ
Power Chart
Any entry under the axes component property now has axes[ x ].tick.count and axes[ x ].tick.label.format properties available. Additionally, when using the Settings menu at runtime, there are new text fields at the bottom of Edit Axes form for the Tick Count and Tick Label Format values. The tick count will take a string value (if string, treated as Auto) or a numeric value. The tick label format will take a string value and pass it forward. The value must be a valid D3 Format value.
Time Series Chart
Any entry under the plots[ x ].axes component property now has plots[ x ].axes[ x ].tick.count and plots[ x ].axes[ x ].tick.label.format properties available.
Chart Range Selector
The yAxis component property now has yAxis.tick.count and yAxis.tick.label.format properties available.
1571: Label: Text overflow options and shadow not honored
Added textStyle prop to the Label Component. It allows for text overflow ellipsis. To display ellipsis, set props.textStyle overflow: hidden, whiteSpace: nowrap, textOverflow: ellipsis. Also fixes a bug in the style editor where the Text - shadow section of the style editor wasnât initially expanded if there was already a value present.