FieldColor: Adds new standard color option for color (#28039)

* FieldColor: Added field color option * Progress * FieldColor: Added custom schemes * move to fieldColor * move to fieldColor * add back the standard color picker * FieldColor: Added registry for field color modes * wip refactor * Seperate scale from color mode * Progress * schemes working * Stuff is working * Added fallback * Updated threshold tests * Added unit tests * added more tests * Made it work with new graph panel * Use scale calculator from graph panel * Updates * Updated test * Renaming things * Update packages/grafana-data/src/field/displayProcessor.ts Co-authored-by: Ryan McKinley <ryantxu@gmail.com> * updated according to feedback, added docs * Updated docs * Updated * Update docs/sources/panels/field-options/standard-field-options.md Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> * Update docs/sources/panels/field-options/standard-field-options.md Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> * Updated docs according to feedback * fixed test * Updated * Updated wording * Change to fieldState.seriesIndex * Updated tests * Updates * New names * More work needed to support bar gauge and showing the color modes in the picker * Now correct gradients work in bar gauge * before rename * Unifying the concept * Updates * review feedback * Updated * Skip minification * Updated * UI improvements Co-authored-by: Ryan McKinley <ryantxu@gmail.com> Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>
2020-10-09 09:34:57 +02:00
parent c052abed87
commit d181782943
36 changed files with 767 additions and 541 deletions
@@ -14,6 +14,7 @@ You can apply standard field options to most built-in Grafana panels. Some older
 Most field options will not affect the visualization until you click outside of the field option box you are editing or press Enter.

 For more information about applying these options, refer to:
+
 - [Configure all fields]({{< relref "configure-all-fields.md" >}})
 - [Configure specific fields]({{< relref "configure-specific-fields.md" >}})

@@ -86,6 +87,26 @@ You can also paste a native emoji in the unit picker and pick it as a custom uni

 Grafana can sometime be too aggressive in parsing strings and displaying them as numbers. To make Grafana show the original string create a field override and add a unit property with the `string` unit.

+## Color scheme
+
+> **Note:** Only available in Grafana 7.3+.
+
+The field color option defines how Grafana colors series or fields. There are multiple modes here that work very differently, and their utility depends largely on what visualization you currently have selected.
+
+Continuous color modes use the percentage of a value relative to min and max to interpolate a color.
+
+- **Single color:** Set a specific color using the color picker. Mostly useful from an override rule.
+- **From thresholds:** Color is derived from the matching threshold. Useful for gauges, stat and table visualizations.
+
+### Color by series
+
+Then there are color schemes that define color by series. Useful for graphs and pie charts for example.
+
+### Color by value
+
+In addition to deriving color from thresholds there are also continuous (gradient) color schemes. Useful
+for visualizations that that color individual values. For example stat panels and the table.
+
 ## Thresholds

 Thresholds allow you to change the color of a field based on the value.