Docs: Add dashboard variables content (#101733)

* Added variables section

* Updated transformations file and Makefile

* Finished Dashboard variables in transformations section

docs/Makefile

@@ -9,6 +9,6 @@ include docs.mk
 
 .PHONY: sources/panels-visualizations/query-transform-data/transform-data/index.md
 sources/panels-visualizations/query-transform-data/transform-data/index.md: ## Generate the Transform Data page source.
-	cd $(CURDIR)/.. && npx tsc ./scripts/docs/generate-transformations.ts && \
+	cd $(CURDIR)/.. && \
-	node -e "require('./scripts/docs/generate-transformations').buildMarkdownContent()" && \
+	npx tsx ./scripts/docs/generate-transformations.ts && \
 	npx prettier -w $(CURDIR)/$@

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

@@ -104,6 +104,16 @@ When there are multiple transformations, Grafana applies them in the order they
 
 The order in which Grafana applies transformations directly impacts the results. For example, if you use a Reduce transformation to condense all the results of one column into a single value, then you can only apply transformations to that single value.
 
+## Dashboard variables in transformations
+
+All text input fields in transformations accept [variable syntax](ref:dashboard-variable):
+
+{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-transformation-variables-v11.6.png" alt="Transformation with a mock variable in a text field" >}}
+
+When you use dashboard variables in transformations, the variables are automatically interpolated before the transformations are applied to the data.
+
+For an example, refer to [Use a dashboard variable](#use-a-dashboard-variable) in the **Filter fields by name** transformation.
+
 ## Add a transformation function to data
 
 The following steps guide you in adding a transformation to data. This documentation does not include steps for each type of transformation. For a complete list of transformations, refer to [Transformation functions](#transformation-functions).

scripts/docs/generate-transformations.ts

@@ -118,6 +118,16 @@ When there are multiple transformations, Grafana applies them in the order they
 
 The order in which Grafana applies transformations directly impacts the results. For example, if you use a Reduce transformation to condense all the results of one column into a single value, then you can only apply transformations to that single value.
 
+## Dashboard variables in transformations
+
+All text input fields in transformations accept [variable syntax](ref:dashboard-variable):
+
+{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-transformation-variables-v11.6.png" alt="Transformation with a mock variable in a text field" >}}
+
+When you use dashboard variables in transformations, the variables are automatically interpolated before the transformations are applied to the data.
+
+For an example, refer to [Use a dashboard variable](#use-a-dashboard-variable) in the **Filter fields by name** transformation.
+
 ## Add a transformation function to data
 
 The following steps guide you in adding a transformation to data. This documentation does not include steps for each type of transformation. For a complete list of transformations, refer to [Transformation functions](#transformation-functions).
@@ -204,14 +214,6 @@ ${transformationDocsContent[transformationName].getHelperDocs(ImageRenderType.Sh
   return content;
 }
 
-export function buildMarkdownContent(): void {
-  // Build the path to the Markdown file.
-  const indexPath = resolve(__dirname, '../../' + WRITE_PATH);
-
-  // Write content to the Markdown file.
-  writeFileSync(indexPath, completeTemplate, 'utf-8');
-}
-
 export function getMarkdownContent(): string {
   const rootDir = resolve(__dirname, '../../');
   const pathToMarkdown = resolve(rootDir, WRITE_PATH);
@@ -221,3 +223,9 @@ export function getMarkdownContent(): string {
 export function getJavaScriptContent(): string {
   return completeTemplate;
 }
+
+// Build the path to the Markdown file.
+const indexPath = resolve(__dirname, '../../' + WRITE_PATH);
+
+// Write content to the Markdown file.
+writeFileSync(indexPath, completeTemplate, 'utf-8');