mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Docs: add missing alt text - transformations 10.3 (2/3) (#79277)
* Added missing alt text * Rebuilt markdown file q wq * baldm0mma/081223-missing-alt-text-2/ add alt image content to images and build markdown * baldmomma/081223-missing-alt-text-2/update alt text and build * baldm0mma/081223-missing-alt-text-2/ make altText required --------- Co-authored-by: jev forsberg <jev.forsberg@grafana.com>
This commit is contained in:
Isabel
GitHub
parent
06d2ae3ada
commit
937a7ed6d9
@ -80,7 +80,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="Transform tab in the panel editor" >}}
|
||||
|
||||
## Debug a transformation
|
||||
|
||||
@ -88,13 +88,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
|
||||
|
||||
@ -157,7 +157,7 @@ Use this transformation to add a new field calculated from two other fields. Eac
|
||||
|
||||
In the example below, we added two fields together and named them Sum.
|
||||
|
||||
{{< figure src="/static/img/docs/transformations/add-field-from-calc-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
|
||||
{{< figure src="/static/img/docs/transformations/add-field-from-calc-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="A stat visualization including one field called Sum" >}}
|
||||
|
||||
### Concatenate fields
|
||||
|
||||
@ -384,7 +384,7 @@ Grafana displays the query identification letters in dark gray text. Click a que
|
||||
|
||||
In the example below, the panel has three queries (A, B, C). We removed the B query from the visualization.
|
||||
|
||||
{{< figure src="/static/img/docs/transformations/filter-by-query-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
|
||||
{{< figure src="/static/img/docs/transformations/filter-by-query-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" alt="A stat visualization with results from two queries, A and C" >}}
|
||||
|
||||
### Filter data by values
|
||||
|
||||
@ -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="A table visualization with time, value, Min, and Max columns" >}}
|
||||
|
||||
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="A table visualization with time, value, and Max columns" >}}
|
||||
|
||||
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="A stat visualization with value and Max fields" >}}
|
||||
|
||||
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" >}}
|
||||
{{< 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" >}}
|
||||
{{< 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.
|
||||
|
||||
@ -1117,11 +1117,11 @@ You can specify a regular expression, which is only applied to matches, along wi
|
||||
|
||||
In the following example, we are stripping the prefix from event types. In the before image, you can see everything is prefixed with 'system.'
|
||||
|
||||
{{< figure src="/static/img/docs/transformations/rename-by-regex-before-7-3.png" class="docs-image--no-shadow" max-width= "1100px" >}}
|
||||
{{< 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" >}}
|
||||
|
||||
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" >}}
|
||||
{{< 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" >}}
|
||||
|
||||
This transformation lets you to tailor your data to meet your visualization needs, making your dashboards more informative and user-friendly.
|
||||
|
||||
@ -1273,9 +1273,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="A time series visualization with a straight line representing the linear function" >}}
|
||||
- **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="A time series visualization with a curved line representing the polynomial function" >}}
|
||||
|
||||
> **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.
|
||||
|
||||
|
||||
@ -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'
|
||||
)}
|
||||
`;
|
||||
},
|
||||
@ -459,8 +459,7 @@ export const transformationDocsContent: TransformationDocsContentType = {
|
||||
${buildImageContent(
|
||||
'/static/img/docs/transformations/filter-name-table-before-7-0.png',
|
||||
imageRenderType,
|
||||
// Distinguish alt text for multiple images by appending a number.
|
||||
'Filter fields by name' + 1
|
||||
'A table visualization with time, value, Min, and Max columns'
|
||||
)}
|
||||
|
||||
Here's the table after we applied the transformation to remove the Min field.
|
||||
@ -468,7 +467,7 @@ export const transformationDocsContent: TransformationDocsContentType = {
|
||||
${buildImageContent(
|
||||
'/static/img/docs/transformations/filter-name-table-after-7-0.png',
|
||||
imageRenderType,
|
||||
'Filter fields by name' + 2
|
||||
'A table visualization with time, value, and Max columns'
|
||||
)}
|
||||
|
||||
Here is the same query using a Stat visualization.
|
||||
@ -476,7 +475,7 @@ export const transformationDocsContent: TransformationDocsContentType = {
|
||||
${buildImageContent(
|
||||
'/static/img/docs/transformations/filter-name-stat-after-7-0.png',
|
||||
imageRenderType,
|
||||
'Filter fields by name' + 3
|
||||
'A stat visualization with value and Max fields'
|
||||
)}
|
||||
|
||||
This transformation provides flexibility in tailoring your query results to focus on the specific fields you need for effective analysis and visualization.
|
||||
@ -790,7 +789,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 +797,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.
|
||||
@ -1191,7 +1190,7 @@ export const transformationDocsContent: TransformationDocsContentType = {
|
||||
${buildImageContent(
|
||||
'/static/img/docs/transformations/rename-by-regex-before-7-3.png',
|
||||
imageRenderType,
|
||||
'Rename by regex' + 1
|
||||
'A bar chart with long series names'
|
||||
)}
|
||||
|
||||
With the transformation applied, you can see we are left with just the remainder of the string.
|
||||
@ -1199,7 +1198,7 @@ export const transformationDocsContent: TransformationDocsContentType = {
|
||||
${buildImageContent(
|
||||
'/static/img/docs/transformations/rename-by-regex-after-7-3.png',
|
||||
imageRenderType,
|
||||
'Rename by regex' + 2
|
||||
'A bar chart 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.
|
||||
@ -1386,12 +1385,16 @@ export const transformationDocsContent: TransformationDocsContentType = {
|
||||
There are two different models:
|
||||
|
||||
- **Linear regression** - Fits a linear function to the data.
|
||||
${buildImageContent('/static/img/docs/transformations/linear-regression.png', imageRenderType, 'Linear regression')}
|
||||
${buildImageContent(
|
||||
'/static/img/docs/transformations/linear-regression.png',
|
||||
imageRenderType,
|
||||
'A time series visualization with a straight line representing the linear function'
|
||||
)}
|
||||
- **Polynomial regression** - Fits a polynomial function to the data.
|
||||
${buildImageContent(
|
||||
'/static/img/docs/transformations/polynomial-regression.png',
|
||||
imageRenderType,
|
||||
'Polynomial regression'
|
||||
'A time series visualization with a curved line representing the polynomial function'
|
||||
)}
|
||||
|
||||
> **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.
|
||||
@ -1408,10 +1411,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.
|
||||
``;
|
||||
``;
|
||||
}
|
||||
|
||||
@ -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="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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user