Transformations: Add documentation around new behavior of Calculate field (#104429)

* Docs changes

* remove generated placeholder for binary ops with variables

* Update public/app/features/transformers/docs/content.ts

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

* Update public/app/features/transformers/docs/content.ts

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

---------

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

docs/sources/panels-visualizations/query-transform-data/transform-data/index.md

@@ -201,6 +201,7 @@ Use this transformation to add a new field calculated from two other fields. Eac
   - **All number fields** - Set the left side of a **Binary operation** to apply the calculation to all number fields.
 - **As percentile** - If you select **Row index** mode, then the **As percentile** switch appears. This switch allows you to transform the row index as a percentage of the total number of rows.
 - **Alias** - (Optional) Enter the name of your new field. If you leave this blank, then the field will be named to match the calculation.
+  > **Note:** If a variable will be used in this transformation, the default alias will be interpolated with the value of the variable. Please explicitly define an alias if you would like the alias to not be affected by variable changes.
 - **Replace all fields** - (Optional) Select this option if you want to hide all other fields and display only your calculated field in the visualization.
 
 In the example below, we added two fields together and named them Sum.

packages/grafana-data/src/transformations/transformers/calculateField.ts

@@ -695,9 +695,9 @@ export function getNameFromOptions(options: CalculateFieldTransformerOptions) {
       const { binary } = options;
       const alias = `${binary?.left?.matcher?.options ?? binary?.left?.fixed ?? ''} ${binary?.operator ?? ''} ${binary?.right?.matcher?.options ?? binary?.right?.fixed ?? ''}`;
 
-      //Remove $ signs as they will be interpolated and cause issues. Variables can still be used
-      //in alias but shouldn't in the autogenerated name
-      return alias.replace(/\$/g, '');
+      // binary calculations with variables will be interpolated on the visualization but we don't want to do that here, so just give a blank placeholder
+      const variableFound = /\$/g.test(alias);
+      return variableFound ? '' : alias;
     }
     case CalculateFieldMode.ReduceRow:
       {

public/app/features/transformers/docs/content.ts

@@ -67,6 +67,7 @@ Use this transformation to add a new field calculated from two other fields. Eac
   - **All number fields** - Set the left side of a **Binary operation** to apply the calculation to all number fields.
 - **As percentile** - If you select **Row index** mode, then the **As percentile** switch appears. This switch allows you to transform the row index as a percentage of the total number of rows.
 - **Alias** - (Optional) Enter the name of your new field. If you leave this blank, then the field will be named to match the calculation.
+> **Note:** If a variable is used in this transformation, the default alias will be interpolated with the value of the variable. If you want an alias to be unaffected by variable changes, explicitly define the alias.
 - **Replace all fields** - (Optional) Select this option if you want to hide all other fields and display only your calculated field in the visualization.
 
 In the example below, we added two fields together and named them Sum.