root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 250 Packages Projects Releases Wiki Activity

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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 53 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/sources/developers/kinds/composable/barchartpanelcfg/schema-reference.md
View File

@ -45,17 +45,17 @@ TODO docs
| Property | Type | Required | Description | | 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`. | | `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`. | | `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`. | | `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`. | | `orientation` | string | No | TODO docs Possible values are: `auto`, `vertical`, `horizontal`. |
| `showValue` | string | No | TODO docs Possible values are: `auto`, `never`, `always`. | | `showValue` | string | No | TODO docs Possible values are: `auto`, `never`, `always`. |
| `stacking` | string | No | TODO docs Possible values are: `none`, `normal`, `percent`. | | `stacking` | string | No | TODO docs Possible values are: `none`, `normal`, `percent`. |
| `xField` | string | No | TODO docs | | `xField` | string | No | Manually select which field from the dataset to represent the x field. |
| `xTickLabelMaxLength` | integer | No | TODO docs | | `xTickLabelMaxLength` | integer | No | Sets the max length that a label can have before it is truncated. |
| `xTickLabelRotation` | integer | No | TODO docs Default: `0`. | | `xTickLabelRotation` | integer | No | Controls the rotation of the x axis labels. Default: `0`. |
| `xTickLabelSpacing` | integer | No | TODO docs<br/>negative values indicate backwards skipping behavior Default: `0`. | | `xTickLabelSpacing` | integer | No | Controls the spacing between x axis labels.<br/>negative values indicate backwards skipping behavior Default: `0`. |

31
docs/sources/panels-visualizations/visualizations/bar-chart/index.md
View File

@ -49,13 +49,17 @@ Use these options to refine your visualization.
- **Horizontal** - Will make the X axis the category axis. - **Horizontal** - Will make the X axis the category axis.
- **Vertical** - Will make the Y 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 ### Show values
@ -65,6 +69,14 @@ This controls whether values are shown on top or to the left of bars.
- **Always** Always show values. - **Always** Always show values.
- **Never** Never 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 ### Group width
Controls the width of groups. 1 = max with, 0 = min 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. 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 ### Line width
Controls line width of the bars. Controls line width of the bars.

16
public/app/plugins/panel/barchart/composable_panelcfg.cue
View File

@ -32,22 +32,22 @@ composableKinds: PanelCfg: {
ui.OptionsWithTooltip ui.OptionsWithTooltip
ui.OptionsWithTextFormatting ui.OptionsWithTextFormatting
// TODO docs // Manually select which field from the dataset to represent the x field.
xField?: string xField?: string
// TODO docs // Use the color value for a sibling field to color each bar value.
colorByField?: string colorByField?: string
// TODO docs // Controls the orientation of the bar chart, either vertical or horizontal.
orientation: ui.VizOrientation | *"auto" orientation: ui.VizOrientation | *"auto"
// TODO docs // Controls the radius of each bar.
barRadius?: float64 & >=0 & <=0.5 | *0 barRadius?: float64 & >=0 & <=0.5 | *0
// TODO docs // Controls the rotation of the x axis labels.
xTickLabelRotation: int32 & >=-90 & <=90 | *0 xTickLabelRotation: int32 & >=-90 & <=90 | *0
// TODO docs // Sets the max length that a label can have before it is truncated.
xTickLabelMaxLength: int32 & >=0 xTickLabelMaxLength: int32 & >=0
// TODO docs // Controls the spacing between x axis labels.
// negative values indicate backwards skipping behavior // negative values indicate backwards skipping behavior
xTickLabelSpacing?: int32 | *0 xTickLabelSpacing?: int32 | *0
// TODO docs // Controls whether bars are stacked or not, either normally or in percent mode.
stacking: ui.StackingMode | *"none" stacking: ui.StackingMode | *"none"
// This controls whether values are shown on top or to the left of bars. // This controls whether values are shown on top or to the left of bars.
showValue: ui.VisibilityMode | *"auto" showValue: ui.VisibilityMode | *"auto"

16
public/app/plugins/panel/barchart/models.gen.ts
View File

@ -14,7 +14,7 @@ export const PanelCfgModelVersion = Object.freeze([0, 0]);
export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithTooltip, ui.OptionsWithTextFormatting { export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithTooltip, ui.OptionsWithTextFormatting {
/** /**
* TODO docs * Controls the radius of each bar.
*/ */
barRadius?: number; barRadius?: number;
/** /**
@ -22,7 +22,7 @@ export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithToolti
*/ */
barWidth: number; barWidth: number;
/** /**
* TODO docs * Use the color value for a sibling field to color each bar value.
*/ */
colorByField?: string; colorByField?: string;
/** /**
@ -35,7 +35,7 @@ export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithToolti
*/ */
groupWidth: number; groupWidth: number;
/** /**
* TODO docs * Controls the orientation of the bar chart, either vertical or horizontal.
*/ */
orientation: ui.VizOrientation; orientation: ui.VizOrientation;
/** /**
@ -43,23 +43,23 @@ export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithToolti
*/ */
showValue: ui.VisibilityMode; showValue: ui.VisibilityMode;
/** /**
* TODO docs * Controls whether bars are stacked or not, either normally or in percent mode.
*/ */
stacking: ui.StackingMode; stacking: ui.StackingMode;
/** /**
* TODO docs * Manually select which field from the dataset to represent the x field.
*/ */
xField?: string; xField?: string;
/** /**
* TODO docs * Sets the max length that a label can have before it is truncated.
*/ */
xTickLabelMaxLength: number; xTickLabelMaxLength: number;
/** /**
* TODO docs * Controls the rotation of the x axis labels.
*/ */
xTickLabelRotation: number; xTickLabelRotation: number;
/** /**
* TODO docs * Controls the spacing between x axis labels.
* negative values indicate backwards skipping behavior * negative values indicate backwards skipping behavior
*/ */
xTickLabelSpacing?: number; xTickLabelSpacing?: number;

8
public/app/plugins/panel/barchart/module.tsx
View File

@ -138,7 +138,7 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(BarChartPa
}) })
.addSliderInput({ .addSliderInput({
path: 'xTickLabelRotation', path: 'xTickLabelRotation',
name: 'Rotate X tick labels', name: 'Rotate x-axis tick labels',
defaultValue: defaultPanelOptions.xTickLabelRotation, defaultValue: defaultPanelOptions.xTickLabelRotation,
settings: { settings: {
min: -90, min: -90,
@ -150,8 +150,8 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(BarChartPa
}) })
.addNumberInput({ .addNumberInput({
path: 'xTickLabelMaxLength', path: 'xTickLabelMaxLength',
name: 'X tick label max length', name: 'X-axis tick label max length',
description: 'X labels will be truncated to the length provided', description: 'X-axis labels will be truncated to the length provided',
settings: { settings: {
placeholder: 'None', placeholder: 'None',
min: 0, min: 0,
@ -161,7 +161,7 @@ export const plugin = new PanelPlugin<PanelOptions, PanelFieldConfig>(BarChartPa
.addCustomEditor({ .addCustomEditor({
id: 'xTickLabelSpacing', id: 'xTickLabelSpacing',
path: 'xTickLabelSpacing', path: 'xTickLabelSpacing',
name: 'Bar labels minimum spacing', name: 'X-axis labels minimum spacing',
defaultValue: defaultPanelOptions.xTickLabelSpacing, defaultValue: defaultPanelOptions.xTickLabelSpacing,
editor: TickSpacingEditor, editor: TickSpacingEditor,
}) })