Docs: Update field color scheme docs and 7.3 what's new (#28496)

* Docs: Update field color scheme docs and 7.3 what's new

* update

* Updated

* Added image cell display mode to table docs

docs/sources/packages_api/_index.md

-+++
-# -------------------------------------------------------------------------
-# Do not add anything to this folder. The packages reference docs will be
-# automatically generated when syncing the rest of the docs to the website.
-# -------------------------------------------------------------------------
-+++

docs/sources/panels/field-options/standard-field-options.md

@@ -91,21 +91,26 @@ Grafana can sometime be too aggressive in parsing strings and displaying them as
 
 > **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.
+{{< figure src="/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}
+
+The color scheme 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.
+
+**Color by value**
+In addition to deriving color from thresholds there are also continuous (gradient) color schemes. Useful for visualizations that color individual values. For example stat panels and the table panel. Continuous color modes use the percentage of a value relative to min and max to interpolate a color.
+
+<div class="clearfix"></div>
+
+| Color mode  | Description                    |
+| ------------------ | ----------------------- |
+| **Single color**   | Specify a single color, useful in an override rule  |
+| **From thresholds**   | Informs Grafana to take the color from the matching threshold  |
+| **Classic palette**   | Grafana will assign color by looking up a color in a palette by series index. Useful for Graphs and pie charts and other categorical data visualizations |
+| **Green-Yellow-Red (by value)** | Continuous color scheme |
+| **Blue-Yellow-Red (by value)** | Continuous color scheme |
+| **Blues (by value)**  | Continuous color scheme (panel background to blue) |
+| **Reds (by value)**   |  Continuous color scheme (panel background color to blue) |
+| **Greens (by value)** | Continuous color scheme (panel background color to blue) |
+| **Purple (by value)** |  Continuous color scheme (panel background color to blue) |
 
 ## Thresholds
 

docs/sources/panels/visualizations/table/table-field-options.md

@@ -66,6 +66,14 @@ Shows value formatted as code. If a value is an object the JSON view allowing br
 
 {{< docs-imagebox img="/img/docs/tables/json-view.png" max-width="500px" caption="JSON view" class="docs-image--no-shadow" >}}
 
+### Image 
+
+> Only available in Grafana 7.3+
+
+If you have a field value that is an image URL or a base64 encoded image you can configure the table to display it as an image.
+
+{{< figure src="/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
+
 ## Column filter
 
 > **Note:** This feature is available in Grafana 7.2+.

docs/sources/whatsnew/whats-new-in-v7-3.md

@@ -21,6 +21,45 @@ Grafana 7.3 comes with a number of features and enhancements:
 
 - [**Google Cloud Monitoring:** Out of the box dashboards]({{< relref "#cloud-monitoring-out-of-the-box-dashboards" >}})
 - [**Shorten URL for dashboards and Explore**]({{< relref "#shorten-url-for-dashboards-and-explore" >}})
+- [**Table improvements and new image cell mode**]({{< relref "#table-improvements-and-new-image-cell-mode" >}})
+- [**New color scheme option**]({{< relref "#new-color-scheme-option" >}})
+
+## Table improvements and new image cell mode
+
+The table has been updated with improved hover behavior for cells that have longer content than what fits the current column width. As you can see
+in the animated gif below the cell will automatically expand to show you full content of the cell.
+
+{{< figure src="/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
+
+Another new feature that can be seen in the image above is the new image cell display mode. If you have a field value that is an image URL or a base64 encoded image you can configure the table to display it as an image.
+
+## New color scheme option
+
+{{< figure src="/img/docs/v73/color_scheme_dropdown.png" max-width="450px" caption="Color scheme" class="pull-right" >}}
+
+A new standard field [color scheme]({{< relref "../panels/field-options/standard-field-options.md#color-scheme" >}}) option has been added. This new option will provide a unified way for all new panels to specify how colors should be assigned. 
+
+* **Single color**: Specify a single color, useful in an override rule. 
+* **From thresholds**: Informs Grafana to take the color from the matching threshold. 
+* **Classic palette**: Grafana will assign color by looking up a color in a palette by series index. Useful for Graphs and pie charts and other categorical data visualizations. 
+* **Green-Yellow-Red (by value)**: This is a continuous color scheme where Grafana will interpolate a color based on the value being displayed and the field  min & max values.  
+* **Blue-Yellow-Red (by value)**: Same as above but different colors.
+* **Blues (by value)**: Same as above but color scheme go from panel background to blue. 
+
+<div class="clearfix"></div>
+
+As you can see this adds new continuous color schemes where Grafana will interpolate colors. A great use of these new color schemes is the table panel where you can color the background and get a heatmap like effect. 
+
+{{< figure src="/img/docs/v73/table_color_scheme.png" max-width="900px" caption="table color scheme" >}}
+
+Another thing to highlight is that all these new color schemes are theme aware and adapt to the current theme. For example here is how the new monochrome color scheme look like in the light theme: 
+
+{{< figure src="/img/docs/v73/table_color_scheme_mono_light.png" max-width="900px" caption="table color monochrome scheme" >}}
+
+As this new option is a standard field option it works in every panel. Here is another example from the [Bar Gauge]({{< relref "../panels/visualizations/bar-gauge-panel.md" >}}) panel. 
+
+{{< figure src="/img/docs/v73/bar_gauge_gradient_color_scheme.png" max-width="900px" caption="bar gauge color scheme" >}}
+
 
 #### Cloud monitoring out-of-the-box dashboards
 
@@ -98,4 +137,4 @@ See [upgrade notes]({{< relref "../installation/upgrading.md" >}}).
 
 Check out [CHANGELOG.md](https://github.com/grafana/grafana/blob/master/CHANGELOG.md) for a complete list of new features, changes, and bug fixes.
 
-<!-- BEGIN Optimal Workshop Intercept Snippet --><div id='owInviteSnippet' style='position:fixed;right:20px;bottom:20px;width:280px;padding:20px;margin:0;border-radius:6px;background:#1857B8;color:#F7F8FA;text-align:left;z-index:2200000000;opacity:0;transition:opacity 500ms;-webkit-transition:opacity 500ms;display:none;'><div id='owInviteMessage' style='padding:0;margin:0 0 20px 0;font-size:16px;'>Got a spare two and a half minutes to help us improve the docs?</div><a id='owInviteOk' href='https://Grafana.optimalworkshop.com/questions/grafana-docs?tag=docs&utm_medium=intercept' onclick='this.parentNode.style.display="none";' target='_blank' style='color:#F7FAFF;font-size:16px;font-weight:bold;text-decoration:underline;'>Yes, I&#x27;ll help</a><a id='owInviteCancel' href='javascript:void(0)' onclick='this.parentNode.style.display="none";' style='color:#F7F8FA;font-size:14px;text-decoration:underline;float:right;'>Close</a></div><script>var owOnload=function(){if(-1==document.cookie.indexOf('ow-intercept-quiz-4ior230e')){var o=new XMLHttpRequest;o.onloadend=function(){try{var o=document.getElementById('owInviteSnippet');var date=new Date();date.setMonth(date.getMonth()+1);this.response&&JSON.parse(this.response).active===!0&&(document.cookie='ow-intercept-quiz-4ior230e=Done;path=/;expires='+date.toUTCString()+';',setTimeout(function(){o.style.display='block',o.style.opacity=1},2e3))}catch(e){}},o.open('POST','https://app.optimalworkshop.com/survey_status/questions/4ior230e/active'),o.send()}};if(window.addEventListener){window.addEventListener('load',function(){owOnload();});}else if(window.attachEvent){window.attachEvent('onload',function(){owOnload();});}</script><!-- END Optimal Workshop snippet -->
\ No newline at end of file
+<!-- BEGIN Optimal Workshop Intercept Snippet --><div id='owInviteSnippet' style='position:fixed;right:20px;bottom:20px;width:280px;padding:20px;margin:0;border-radius:6px;background:#1857B8;color:#F7F8FA;text-align:left;z-index:2200000000;opacity:0;transition:opacity 500ms;-webkit-transition:opacity 500ms;display:none;'><div id='owInviteMessage' style='padding:0;margin:0 0 20px 0;font-size:16px;'>Got a spare two and a half minutes to help us improve the docs?</div><a id='owInviteOk' href='https://Grafana.optimalworkshop.com/questions/grafana-docs?tag=docs&utm_medium=intercept' onclick='this.parentNode.style.display="none";' target='_blank' style='color:#F7FAFF;font-size:16px;font-weight:bold;text-decoration:underline;'>Yes, I&#x27;ll help</a><a id='owInviteCancel' href='javascript:void(0)' onclick='this.parentNode.style.display="none";' style='color:#F7F8FA;font-size:14px;text-decoration:underline;float:right;'>Close</a></div><script>var owOnload=function(){if(-1==document.cookie.indexOf('ow-intercept-quiz-4ior230e')){var o=new XMLHttpRequest;o.onloadend=function(){try{var o=document.getElementById('owInviteSnippet');var date=new Date();date.setMonth(date.getMonth()+1);this.response&&JSON.parse(this.response).active===!0&&(document.cookie='ow-intercept-quiz-4ior230e=Done;path=/;expires='+date.toUTCString()+';',setTimeout(function(){o.style.display='block',o.style.opacity=1},2e3))}catch(e){}},o.open('POST','https://app.optimalworkshop.com/survey_status/questions/4ior230e/active'),o.send()}};if(window.addEventListener){window.addEventListener('load',function(){owOnload();});}else if(window.attachEvent){window.attachEvent('onload',function(){owOnload();});}</script><!-- END Optimal Workshop snippet -->