From 497ebb5c5c0ef938566472033c25aaf5d3377760 Mon Sep 17 00:00:00 2001
From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
Date: Thu, 15 Aug 2024 15:45:48 -0400
Subject: [PATCH] [v11.2.x] Docs: Add example to transpose transformation
 (#91979)

Docs: Add example to transpose transformation (#91823)

(cherry picked from commit d817ee9b99bd1b46a0a93ede9fc85e37fbf1ba77)

Co-authored-by: Nathan Marrs <nathanielmarrs@gmail.com>
---
 .../transform-data/index.md                   | 21 ++++++++++++++
 .../app/features/transformers/docs/content.ts | 29 +++++++++++++++++++
 2 files changed, 50 insertions(+)

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 7ccfe7576a4..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
@@ -1423,6 +1423,27 @@ For each generated **Trend** field value, a calculation function can be selected
 
 > **Note:** This transformation is available in Grafana 9.5+ as an opt-in beta feature. Modify the Grafana [configuration file][] to use it.
 
+### Transpose
+
+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 e9442e582cc..d03f6aa4efc 100644
--- a/public/app/features/transformers/docs/content.ts
+++ b/public/app/features/transformers/docs/content.ts
@@ -1520,6 +1520,35 @@ ${buildImageContent(
       },
     ],
   },
+  transpose: {
+    name: 'Transpose',
+    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'
+)}
+  `;
+    },
+  },
   regression: {
     name: 'Regression analysis',
     getHelperDocs: function (imageRenderType: ImageRenderType = ImageRenderType.ShortcodeFigure) {