Docs: Update visualization and barchart panels (#61474)

* Update docs

* Regen cue model for barchart

* Fix docs

* models.cue renamed to composable_panelcfg.cue

* Rename 'Bar' to 'x-axis' in options UI

* run gen-cue
This commit is contained in:
Victor Marin
2023-01-23 10:49:41 +02:00
committed by GitHub
parent 1a97c79978
commit e6aaabed4d
5 changed files with 53 additions and 30 deletions

View File

@ -45,17 +45,17 @@ TODO docs
| Property | Type | Required | Description |
|-----------------------|---------|----------|------------------------------------------------------------------------------------------------------------------------------------|
| `barRadius` | number | No | TODO docs Default: `0`. |
| `barRadius` | number | No | Controls the radius of each bar. Default: `0`. |
| `barWidth` | number | No | Controls the width of bars. 1 = Max width, 0 = Min width. Default: `0.97`. |
| `colorByField` | string | No | TODO docs |
| `colorByField` | string | No | Use the color value for a sibling field to color each bar value. |
| `fullHighlight` | boolean | No | Enables mode which highlights the entire bar area and shows tooltip when cursor<br/>hovers over highlighted area Default: `false`. |
| `groupWidth` | number | No | Controls the width of groups. 1 = max with, 0 = min width. Default: `0.7`. |
| `orientation` | string | No | TODO docs Possible values are: `auto`, `vertical`, `horizontal`. |
| `showValue` | string | No | TODO docs Possible values are: `auto`, `never`, `always`. |
| `stacking` | string | No | TODO docs Possible values are: `none`, `normal`, `percent`. |
| `xField` | string | No | TODO docs |
| `xTickLabelMaxLength` | integer | No | TODO docs |
| `xTickLabelRotation` | integer | No | TODO docs Default: `0`. |
| `xTickLabelSpacing` | integer | No | TODO docs<br/>negative values indicate backwards skipping behavior Default: `0`. |
| `xField` | string | No | Manually select which field from the dataset to represent the x field. |
| `xTickLabelMaxLength` | integer | No | Sets the max length that a label can have before it is truncated. |
| `xTickLabelRotation` | integer | No | Controls the rotation of the x axis labels. Default: `0`. |
| `xTickLabelSpacing` | integer | No | Controls the spacing between x axis labels.<br/>negative values indicate backwards skipping behavior Default: `0`. |

View File

@ -49,13 +49,17 @@ Use these options to refine your visualization.
- **Horizontal** - Will make the X axis the category axis.
- **Vertical** - Will make the Y axis the category axis.
### Rotate bar labels
### Rotate x-axis tick labels
When the graph is in vertical orientation you can use this setting to rotate the labels under the bars. Useful if the labels are long and overlap.
When the graph is vertically oriented, this setting rotates the labels under the bars. This setting is useful when bar chart labels are long and overlap.
### Bar label max length
### X-axis tick label maximum length
Sets the max length of the bar label. Labels longer than the max length will be truncated and `...` will be appended to the end.
Sets the maximum length of bar chart labels. Labels longer than the maximum length are truncated, and appended with `...`.
### Bar labels minimum spacing
Sets the minimum spacing between bar labels.
### Show values
@ -65,6 +69,14 @@ This controls whether values are shown on top or to the left of bars.
- **Always** Always show values.
- **Never** Never show values.
### Stacking
Controls bar chart stacking.
- **Off**: Bars will not be stacked.
- **Normal**: Bars will be stacked on each other.
- **Percent**: Bars will be stacked on each other, and the height of each bar is the percentage of the total height of the stack.
### Group width
Controls the width of groups. 1 = max with, 0 = min width.
@ -73,6 +85,17 @@ Controls the width of groups. 1 = max with, 0 = min width.
Controls the width of bars. 1 = Max width, 0 = Min width.
### Bar radius
Controls the radius of the bars.
- 0 = Minimum radius
- 0.5 = Maximum radius
### Highlight full area on cover
Controls if the entire surrounding area of the bar is highlighted when you hover over the bar.
### Line width
Controls line width of the bars.