From d817ee9b99bd1b46a0a93ede9fc85e37fbf1ba77 Mon Sep 17 00:00:00 2001
From: Nathan Marrs <nathanielmarrs@gmail.com>
Date: Tue, 13 Aug 2024 08:22:56 -0600
Subject: [PATCH] Docs: Add example to transpose transformation (#91823)

---
 .../transform-data/index.md                   | 16 ++++++++++++++
 .../app/features/transformers/docs/content.ts | 22 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md b/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
index e94c3b32c0f..437e2f1ad2a 100644
--- a/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
+++ b/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md
@@ -1428,6 +1428,22 @@ For each generated **Trend** field value, a calculation function can be selected
 Use this transformation to pivot the data frame, converting rows into columns and columns into rows. This transformation is particularly useful when you want to switch the orientation of your data to better suit your visualization needs.
 If you have multiple types it will default to string type.
 
+**Before Transformation:**
+
+| env  | January | February |
+| ---- | ------- | -------- |
+| prod | 1       | 2        |
+| dev  | 3       | 4        |
+
+**After applying transpose transformation:**
+
+| Field    | prod | dev |
+| -------- | ---- | --- |
+| January  | 1    | 3   |
+| February | 2    | 4   |
+
+{{< figure src="/media/docs/grafana/transformations/screenshot-grafana-11-2-transpose-transformation.png" class="docs-image--no-shadow" max-width= "1100px" alt="Before and after transpose transformation" >}}
+
 ### Regression analysis
 
 Use this transformation to create a new data frame containing values predicted by a statistical model. This is useful for finding a trend in chaotic data. It works by fitting a mathematical function to the data, using either linear or polynomial regression. The data frame can then be used in a visualization to display a trendline.
diff --git a/public/app/features/transformers/docs/content.ts b/public/app/features/transformers/docs/content.ts
index 490df92529f..d03f6aa4efc 100644
--- a/public/app/features/transformers/docs/content.ts
+++ b/public/app/features/transformers/docs/content.ts
@@ -1522,10 +1522,30 @@ ${buildImageContent(
   },
   transpose: {
     name: 'Transpose',
-    getHelperDocs: function () {
+    getHelperDocs: function (imageRenderType: ImageRenderType = ImageRenderType.ShortcodeFigure) {
       return `
 Use this transformation to pivot the data frame, converting rows into columns and columns into rows. This transformation is particularly useful when you want to switch the orientation of your data to better suit your visualization needs.
 If you have multiple types it will default to string type.
+
+**Before Transformation:**
+
+| env  | January   | February |
+| ---- | --------- | -------- |
+| prod | 1 | 2 |
+| dev | 3 | 4 |
+
+**After applying transpose transformation:**
+
+| Field  | prod   | dev |
+| ---- | --------- | -------- |
+| January | 1 | 3 |
+| February  | 2 | 4 |
+
+${buildImageContent(
+  '/media/docs/grafana/transformations/screenshot-grafana-11-2-transpose-transformation.png',
+  imageRenderType,
+  'Before and after transpose transformation'
+)}
   `;
     },
   },