mirror of https://github.com/grafana/grafana.git
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
GitHub
parent
1a97c79978
commit
e6aaabed4d
|
|
@ -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`. |
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -32,22 +32,22 @@ composableKinds: PanelCfg: {
|
|||
ui.OptionsWithTooltip
|
||||
ui.OptionsWithTextFormatting
|
||||
|
||||
// TODO docs
|
||||
// Manually select which field from the dataset to represent the x field.
|
||||
xField?: string
|
||||
// TODO docs
|
||||
// Use the color value for a sibling field to color each bar value.
|
||||
colorByField?: string
|
||||
// TODO docs
|
||||
// Controls the orientation of the bar chart, either vertical or horizontal.
|
||||
orientation: ui.VizOrientation | *"auto"
|
||||
// TODO docs
|
||||
// Controls the radius of each bar.
|
||||
barRadius?: float64 & >=0 & <=0.5 | *0
|
||||
// TODO docs
|
||||
// Controls the rotation of the x axis labels.
|
||||
xTickLabelRotation: int32 & >=-90 & <=90 | *0
|
||||
// TODO docs
|
||||
// Sets the max length that a label can have before it is truncated.
|
||||
xTickLabelMaxLength: int32 & >=0
|
||||
// TODO docs
|
||||
// Controls the spacing between x axis labels.
|
||||
// negative values indicate backwards skipping behavior
|
||||
xTickLabelSpacing?: int32 | *0
|
||||
// TODO docs
|
||||
// Controls whether bars are stacked or not, either normally or in percent mode.
|
||||
stacking: ui.StackingMode | *"none"
|
||||
// This controls whether values are shown on top or to the left of bars.
|
||||
showValue: ui.VisibilityMode | *"auto"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const PanelCfgModelVersion = Object.freeze([0, 0]);
|
|||
|
||||
export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithTooltip, ui.OptionsWithTextFormatting {
|
||||
/**
|
||||
* TODO docs
|
||||
* Controls the radius of each bar.
|
||||
*/
|
||||
barRadius?: number;
|
||||
/**
|
||||
|
|
@ -22,7 +22,7 @@ export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithToolti
|
|||
*/
|
||||
barWidth: number;
|
||||
/**
|
||||
* TODO docs
|
||||
* Use the color value for a sibling field to color each bar value.
|
||||
*/
|
||||
colorByField?: string;
|
||||
/**
|
||||
|
|
@ -35,7 +35,7 @@ export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithToolti
|
|||
*/
|
||||
groupWidth: number;
|
||||
/**
|
||||
* TODO docs
|
||||
* Controls the orientation of the bar chart, either vertical or horizontal.
|
||||
*/
|
||||
orientation: ui.VizOrientation;
|
||||
/**
|
||||
|
|
@ -43,23 +43,23 @@ export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithToolti
|
|||
*/
|
||||
showValue: ui.VisibilityMode;
|
||||
/**
|
||||
* TODO docs
|
||||
* Controls whether bars are stacked or not, either normally or in percent mode.
|
||||
*/
|
||||
stacking: ui.StackingMode;
|
||||
/**
|
||||
* TODO docs
|
||||
* Manually select which field from the dataset to represent the x field.
|
||||
*/
|
||||
xField?: string;
|
||||
/**
|
||||
* TODO docs
|
||||
* Sets the max length that a label can have before it is truncated.
|
||||
*/
|
||||
xTickLabelMaxLength: number;
|
||||
/**
|
||||
* TODO docs
|
||||
* Controls the rotation of the x axis labels.
|
||||
*/
|
||||
xTickLabelRotation: number;
|
||||
/**
|
||||
* TODO docs
|
||||
* Controls the spacing between x axis labels.
|
||||
* negative values indicate backwards skipping behavior
|
||||
*/
|
||||
xTickLabelSpacing?: number;
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(BarChartPa
|
|||
})
|
||||
.addSliderInput({
|
||||
path: 'xTickLabelRotation',
|
||||
name: 'Rotate X tick labels',
|
||||
name: 'Rotate x-axis tick labels',
|
||||
defaultValue: defaultPanelOptions.xTickLabelRotation,
|
||||
settings: {
|
||||
min: -90,
|
||||
|
|
@ -150,8 +150,8 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(BarChartPa
|
|||
})
|
||||
.addNumberInput({
|
||||
path: 'xTickLabelMaxLength',
|
||||
name: 'X tick label max length',
|
||||
description: 'X labels will be truncated to the length provided',
|
||||
name: 'X-axis tick label max length',
|
||||
description: 'X-axis labels will be truncated to the length provided',
|
||||
settings: {
|
||||
placeholder: 'None',
|
||||
min: 0,
|
||||
|
|
@ -161,7 +161,7 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(BarChartPa
|
|||
.addCustomEditor({
|
||||
id: 'xTickLabelSpacing',
|
||||
path: 'xTickLabelSpacing',
|
||||
name: 'Bar labels minimum spacing',
|
||||
name: 'X-axis labels minimum spacing',
|
||||
defaultValue: defaultPanelOptions.xTickLabelSpacing,
|
||||
editor: TickSpacingEditor,
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue