Stat: Add Percent Change Option (#78250)

* Stat: Add Percent Change Option

* Ensure div style only applied for percent change

* Add metrics section to gdev

* Apply new style and fix nan truthy

* Handle no text case properly

* Only display percent change with value

* Improve styling

* Remove VizOrientation dep and improve styling

* Display percent change for text mode name

* Add check for undefined percentChange

* Don't show percent change option for all values

* Make metric alignment more robust

* Make percent change column case tighter

Check undefined directly to avoid truthy issues

* Simplify percentChange calculation

* Add documentation for show percent change

* Add tests for percent change

* Refactor big value and pull out percent change

* minor changes

* initial approach at addressing setting % change colors to be conventional (not super happy with handling of contrast)

* Clean up initial color change approach (no need to handle 0 case as is handled as NaN currently

* Update shadow styling and include icon

* Update docs/sources/panels-visualizations/visualizations/stat/index.md

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

* Stat: Add Percent Change Option (refactor and color exploration)  (#79504)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

* some missed cleanup :D

* update percent change to show to not be tied to text value; update docs accordingly

* initial start for fixing scaling of % change for no text mode

* Fix styling for case where textmode is none

* Tweak styling a bit for icon and minimum padding

* Apply flex wrap to container styles

* Update gdev for stat panel tests

* attempt at fixing horizontal percent change styling / placement

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Drew Slobodnjak
2023-12-15 16:15:31 -08:00
committed by GitHub
parent 2edcf0edbd
commit b166bdc3fc
14 changed files with 1485 additions and 101 deletions

View File

@ -26,16 +26,17 @@ title: StatPanelCfg kind
It extends [SingleStatBaseOptions](#singlestatbaseoptions).
| Property | Type | Required | Default | Description |
|-----------------|-------------------------------------------------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------|
| `colorMode` | string | **Yes** | | TODO docs<br/>Possible values are: `value`, `background`, `background_solid`, `none`. |
| `graphMode` | string | **Yes** | | TODO docs<br/>Possible values are: `none`, `line`, `area`. |
| `justifyMode` | string | **Yes** | | TODO docs<br/>Possible values are: `auto`, `center`. |
| `textMode` | string | **Yes** | | TODO docs<br/>Possible values are: `auto`, `value`, `value_and_name`, `name`, `none`. |
| `wideLayout` | boolean | **Yes** | `true` | |
| `orientation` | string | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs<br/>Possible values are: `auto`, `vertical`, `horizontal`. |
| `reduceOptions` | [ReduceDataOptions](#reducedataoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |
| `text` | [VizTextDisplayOptions](#viztextdisplayoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |
| Property | Type | Required | Default | Description |
|---------------------|-------------------------------------------------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------|
| `colorMode` | string | **Yes** | | TODO docs<br/>Possible values are: `value`, `background`, `background_solid`, `none`. |
| `graphMode` | string | **Yes** | | TODO docs<br/>Possible values are: `none`, `line`, `area`. |
| `justifyMode` | string | **Yes** | | TODO docs<br/>Possible values are: `auto`, `center`. |
| `showPercentChange` | boolean | **Yes** | `false` | |
| `textMode` | string | **Yes** | | TODO docs<br/>Possible values are: `auto`, `value`, `value_and_name`, `name`, `none`. |
| `wideLayout` | boolean | **Yes** | `true` | |
| `orientation` | string | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs<br/>Possible values are: `auto`, `vertical`, `horizontal`. |
| `reduceOptions` | [ReduceDataOptions](#reducedataoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |
| `text` | [VizTextDisplayOptions](#viztextdisplayoptions) | No | | *(Inherited from [SingleStatBaseOptions](#singlestatbaseoptions))*<br/>TODO docs |
### ReduceDataOptions