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 b8138f824f0..6fc8c223f75 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 @@ -489,15 +489,15 @@ Click and uncheck the field names to remove them from the result. Fields that ar Enable 'From variable' to let you select a dashboard variable that's used to include fields. By setting up a [dashboard variable][] with multiple choices, the same fields can be displayed across multiple visualizations. -{{< figure src="/static/img/docs/transformations/filter-name-table-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}} +{{< figure src="/static/img/docs/transformations/filter-name-table-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="Filter fields by name1" >}} Here's the table after we applied the transformation to remove the Min field. -{{< figure src="/static/img/docs/transformations/filter-name-table-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}} +{{< figure src="/static/img/docs/transformations/filter-name-table-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="Filter fields by name2" >}} Here is the same query using a Stat visualization. -{{< figure src="/static/img/docs/transformations/filter-name-stat-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}} +{{< figure src="/static/img/docs/transformations/filter-name-stat-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="Filter fields by name3" >}} This transformation provides flexibility in tailoring your query results to focus on the specific fields you need for effective analysis and visualization. @@ -773,11 +773,11 @@ The result after applying the outer join transformation looks like the following In the following example, a template query displays time series data from multiple servers in a table visualization. The results of only one query can be viewed at a time. -{{< figure src="/static/img/docs/transformations/join-fields-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px"alt="A table visualization showing results for one server" >}} +{{< figure src="/static/img/docs/transformations/join-fields-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="A table visualization showing results for one server" >}} I applied a transformation to join the query results using the time field. Now I can run calculations, combine, and organize the results in this new table. -{{< figure src="/static/img/docs/transformations/join-fields-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="A table visualization showing results for multiple servers" >}} +{{< figure src="/static/img/docs/transformations/join-fields-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="A table visualization showing results for multiple servers" >}} Combine and analyze data from various queries with table joining for a comprehensive view of your information. @@ -1113,15 +1113,17 @@ This flexible transformation simplifies the process of consolidating and summari Use this transformation to rename parts of the query results using a regular expression and replacement pattern. -You can specify a regular expression, which is only applied to matches, along with a replacement pattern that support back references. For example, let's imagine you're visualizing CPU usage per host and you want to remove the domain name. You could set the regex to '([^.]+)..+' and the replacement pattern to '$1', 'web-01.example.com' would become 'web-01'. +You can specify a regular expression, which is only applied to matches, along with a replacement pattern that support back references. For example, let's imagine you're visualizing CPU usage per host and you want to remove the domain name. You could set the regex to '/^([^.]+).\*/' and the replacement pattern to '$1', 'web-01.example.com' would become 'web-01'. -In the following example, we are stripping the prefix from event types. In the before image, you can see everything is prefixed with 'system.' +> **Note:** The Rename by regex transformation was improved in Grafana v9.0.0 to allow global patterns of the form '//g'. Depending on the regex match used, this may cause some transformations to behave slightly differently. You can guarantee the same behavior as before by wrapping the match string in forward slashes '(/)', e.g. '(._)' would become '/(._)/'. -{{< figure src="/static/img/docs/transformations/rename-by-regex-before-7-3.png" class="docs-image--no-shadow" max-width= "1100px" alt="A bar chart with long series names" >}} +In the following example, we are stripping the 'A-' prefix from field names. In the before image, you can see everything is prefixed with 'A-': + +{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-rename-by-regex-before-v11.0.png" class="docs-image--no-shadow" max-width= "1100px" alt="A time series with full series names" >}} With the transformation applied, you can see we are left with just the remainder of the string. -{{< figure src="/static/img/docs/transformations/rename-by-regex-after-7-3.png" class="docs-image--no-shadow" max-width= "1100px" alt="A bar chart with shortened series names" >}} +{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-rename-by-regex-after-v11.0.png" class="docs-image--no-shadow" max-width= "1100px" alt="A time series with shortened series names" >}} This transformation lets you to tailor your data to meet your visualization needs, making your dashboards more informative and user-friendly. @@ -1273,9 +1275,9 @@ Use this transformation to create a new data frame containing values predicted b There are two different models: - **Linear regression** - Fits a linear function to the data. - {{< figure src="/static/img/docs/transformations/linear-regression.png" class="docs-image--no-shadow" max-width= "1100px" >}} + {{< figure src="/static/img/docs/transformations/linear-regression.png" class="docs-image--no-shadow" max-width= "1100px" alt="Linear regression" >}} - **Polynomial regression** - Fits a polynomial function to the data. - {{< figure src="/static/img/docs/transformations/polynomial-regression.png" class="docs-image--no-shadow" max-width= "1100px" >}} + {{< figure src="/static/img/docs/transformations/polynomial-regression.png" class="docs-image--no-shadow" max-width= "1100px" alt="Polynomial regression" >}} > **Note:** This transformation is an experimental feature. Engineering and on-call support is not available. Documentation is either limited or not provided outside of code comments. No SLA is provided. Enable the `regressionTransformation` feature toggle in Grafana to use this feature. Contact Grafana Support to enable this feature in Grafana Cloud. diff --git a/public/app/features/transformers/docs/content.ts b/public/app/features/transformers/docs/content.ts index deece5b3e36..d8aedf58221 100644 --- a/public/app/features/transformers/docs/content.ts +++ b/public/app/features/transformers/docs/content.ts @@ -75,7 +75,7 @@ export const transformationDocsContent: TransformationDocsContentType = { ${buildImageContent( '/static/img/docs/transformations/add-field-from-calc-stat-example-7-0.png', imageRenderType, - 'Add field from calculation' + 'A stat visualization including one field called Sum' )} `; }, @@ -342,7 +342,7 @@ export const transformationDocsContent: TransformationDocsContentType = { ${buildImageContent( '/static/img/docs/transformations/filter-by-query-stat-example-7-0.png', imageRenderType, - 'Filter data by query refId' + 'A stat visualization with results from two queries, A and C' )} `; }, @@ -790,7 +790,7 @@ export const transformationDocsContent: TransformationDocsContentType = { ${buildImageContent( '/static/img/docs/transformations/join-fields-before-7-0.png', imageRenderType, - 'Join by field' + 1 + 'A table visualization showing results for one server' )} I applied a transformation to join the query results using the time field. Now I can run calculations, combine, and organize the results in this new table. @@ -798,7 +798,7 @@ export const transformationDocsContent: TransformationDocsContentType = { ${buildImageContent( '/static/img/docs/transformations/join-fields-after-7-0.png', imageRenderType, - 'Join by field' + 2 + 'A table visualization showing results for multiple servers' )} Combine and analyze data from various queries with table joining for a comprehensive view of your information. @@ -1184,25 +1184,27 @@ export const transformationDocsContent: TransformationDocsContentType = { return ` Use this transformation to rename parts of the query results using a regular expression and replacement pattern. - You can specify a regular expression, which is only applied to matches, along with a replacement pattern that support back references. For example, let's imagine you're visualizing CPU usage per host and you want to remove the domain name. You could set the regex to '([^\.]+)\..+' and the replacement pattern to '$1', 'web-01.example.com' would become 'web-01'. - - In the following example, we are stripping the prefix from event types. In the before image, you can see everything is prefixed with 'system.' +You can specify a regular expression, which is only applied to matches, along with a replacement pattern that support back references. For example, let's imagine you're visualizing CPU usage per host and you want to remove the domain name. You could set the regex to '/^([^.]+).*/' and the replacement pattern to '$1', 'web-01.example.com' would become 'web-01'. - ${buildImageContent( - '/static/img/docs/transformations/rename-by-regex-before-7-3.png', - imageRenderType, - 'Rename by regex' + 1 - )} +> **Note:** The Rename by regex transformation was improved in Grafana v9.0.0 to allow global patterns of the form '//g'. Depending on the regex match used, this may cause some transformations to behave slightly differently. You can guarantee the same behavior as before by wrapping the match string in forward slashes '(/)', e.g. '(.*)' would become '/(.*)/'. - With the transformation applied, you can see we are left with just the remainder of the string. +In the following example, we are stripping the 'A-' prefix from field names. In the before image, you can see everything is prefixed with 'A-': - ${buildImageContent( - '/static/img/docs/transformations/rename-by-regex-after-7-3.png', - imageRenderType, - 'Rename by regex' + 2 - )} +${buildImageContent( + '/media/docs/grafana/panels-visualizations/screenshot-rename-by-regex-before-v11.0.png', + imageRenderType, + 'A time series with full series names' +)} - This transformation lets you to tailor your data to meet your visualization needs, making your dashboards more informative and user-friendly. +With the transformation applied, you can see we are left with just the remainder of the string. + +${buildImageContent( + '/media/docs/grafana/panels-visualizations/screenshot-rename-by-regex-after-v11.0.png', + imageRenderType, + 'A time series with shortened series names' +)} + +This transformation lets you to tailor your data to meet your visualization needs, making your dashboards more informative and user-friendly. `; }, }, @@ -1408,10 +1410,10 @@ export function getLinkToDocs(): string { `; } -function buildImageContent(source: string, imageRenderType: ImageRenderType, imageName?: string) { +function buildImageContent(source: string, imageRenderType: ImageRenderType, imageAltText: string) { return imageRenderType === 'shortcodeFigure' ? // This will build a Hugo Shortcode "figure" image template, which shares the same default class and max-width. - `{{< figure src="${source}" class="docs-image--no-shadow" max-width= "1100px" >}}` + `{{< figure src="${source}" class="docs-image--no-shadow" max-width= "1100px" alt="${imageAltText}" >}}` : // This will build generic Markdown image syntax for UI rendering. - `![${imageName} helper image](https://grafana.com${source})`; + `![${imageAltText}](https://grafana.com${source})`; } diff --git a/scripts/docs/generate-transformations.ts b/scripts/docs/generate-transformations.ts index 6074c0959fa..918b3c081ca 100644 --- a/scripts/docs/generate-transformations.ts +++ b/scripts/docs/generate-transformations.ts @@ -86,7 +86,7 @@ The following steps guide you in adding a transformation to data. This documenta For information about available calculations, refer to [Calculation types][]. 1. To apply another transformation, click **Add transformation**. This transformation acts on the result set returned by the previous transformation. - {{< figure src="/static/img/docs/transformations/transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}} + {{< figure src="/static/img/docs/transformations/transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="The Transform tab in the panel editor" >}} ## Debug a transformation @@ -94,13 +94,13 @@ To see the input and the output result sets of the transformation, click the bug The input and output results sets can help you debug a transformation. -{{< figure src="/static/img/docs/transformations/debug-transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}} +{{< figure src="/static/img/docs/transformations/debug-transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="The debug transformation screen with the debug icon highlighted" >}} ## Disable a transformation You can disable or hide one or more transformations by clicking on the eye icon on the top right side of the transformation row. This disables the applied actions of that specific transformation and can help to identify issues when you change several transformations one after another. -{{< figure src="/static/img/docs/transformations/screenshot-example-disable-transformation.png" class="docs-image--no-shadow" max-width= "1100px" >}} +{{< figure src="/static/img/docs/transformations/screenshot-example-disable-transformation.png" class="docs-image--no-shadow" max-width= "1100px" alt="A transformation row with the disable transformation icon highlighted" >}} ## Filter a transformation @@ -122,7 +122,7 @@ We recommend that you remove transformations that you don't need. When you delet 1. Click the **Transform** tab. 1. Click the trash icon next to the transformation you want to delete. -{{< figure src="/static/img/docs/transformations/screenshot-example-remove-transformation.png" class="docs-image--no-shadow" max-width= "1100px" >}} +{{< figure src="/static/img/docs/transformations/screenshot-example-remove-transformation.png" class="docs-image--no-shadow" max-width= "1100px" alt="A transformation row with the Remove icon highlighted" >}} ## Transformation functions