public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v10.0.x] Docs: Plugin doc review changes from chunk 1-B with corrected set of files (#68149)

Browse Source 
Docs: Plugin doc review changes from chunk 1-B with corrected set of files (#67164)

* Re-pushing doc review changes from 1-B with fewer files

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Fix for URL examples

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Data frames fixes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Fixes from doc review

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* More doc review changes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Doc fixes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Doc fix

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Prettier

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Fix migration index

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Fix screenshot

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Doc fixes

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

* Quick fix

Signed-off-by: Joe Perez <joseph.perez@grafana.com>

---------

Signed-off-by: Joe Perez <joseph.perez@grafana.com>
(cherry picked from commit d6ba522c3c)

Co-authored-by: Joseph Perez <45749060+josmperez@users.noreply.github.com>
This commit is contained in:
Grot (@grafanabot)
2023-05-15 18:50:24 +01:00
committed by GitHub
parent d2f74c4942
commit c4ec980527
6 changed files with 159 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/sources/developers/plugins/working-with-data-frames.md
View File

@@ -1,20 +1,20 @@
---
title: Working with data frames
title: Work with data frames
---
# Working with data frames
# Work with data frames
The data frame is a columnar data structure which allows efficient querying of large amounts of data. Since data frames are a central concept when developing plugins for Grafana, in this guide we'll look at some ways you can use them.
The [data frame]({{< relref "data-frames" >}}) is a columnar data structure that allows for efficient querying of large amounts of data. Since data frames are a central concept when developing plugins for Grafana, in this guide we'll look at some ways you can use them.
The DataFrame interface contains a `name` and an array of `fields` where each field contains the name, type, and the values for the field.
The `DataFrame` interface contains a `name` and an array of `fields` where each field contains the name, type, and the values for the field.
> **Note:** If you're looking to migrate an existing plugin to use the data frame format, refer to [Migrate to data frames]({{< relref "migration-guide/#migrate-to-data-frames" >}}).
> **Note:** If you want to migrate an existing plugin to use the data frame format, refer to [Migrate to data frames]({{< relref "migration-guide/#migrate-to-data-frames" >}}).
## Create a data frame
If you build a data source plugin, then you'll most likely want to convert a response from an external API to a data frame. Let's look at how to create a data frame.
If you build a data source plugin, then you'll most likely want to convert a response from an external API to a data frame. Let's look at how to do this.
Let's start with creating a simple data frame that represents a time series. The easiest way to create a data frame is to use the toDataFrame function.
Let's start with creating a simple data frame that represents a time series. The easiest way to create a data frame is to use the `toDataFrame` function.
```ts
// Need to be of the same length.
@@ -31,9 +31,9 @@ const frame = toDataFrame({
});
```
> **Note:** Data frames representing time series contain at least a `time` field, and a `number` field. By convention, built-in plugins use `Time` and `Value` as field names for data frames containing time series data.
> **Note:** Data frames representing time series contain at least a `time` field and a `number` field. By convention, built-in plugins use `Time` and `Value` as field names for data frames containing time series data.
As you can see from the example, creating data frames like this requires that your data is already stored as columnar data. If you already have the records in the form of an array of objects, then you can pass it to `toDataFrame` which tries to guess the schema based on the types and names of the objects in the array. If you're creating complex data frames this way, then be sure to verify that you get the schema you expect.
As you can see from the example, to create data frames like this, your data must already be stored as columnar data. If you already have the records in the form of an array of objects, then you can pass it to `toDataFrame`. In this case, `toDataFrame` tries to guess the schema based on the types and names of the objects in the array. To create complex data frames this way, be sure to verify that you get the schema you expect.
```ts
const series = [
@@ -57,7 +57,7 @@ function SimplePanel({ data: Props }) {
}
```
Before you start reading the data, think about what data you expect. For example, to visualize a time series we'd need at least one time field, and one number field.
Before you start reading the data, think about what data you expect. For example, to visualize a time series you need at least one time field and one number field.
```ts
const timeField = frame.fields.find((field) => field.type === FieldType.time);
@@ -78,7 +78,7 @@ for (let i = 0; i < frame.length; i++) {
}
```
Alternatively, you can use the DataFrameView, which gives you an array of objects that contain a property for each field in the frame.
Alternatively, you can use the `DataFrameView`, which gives you an array of objects that contain a property for each field in the frame.
```ts
const view = new DataFrameView(frame);
@@ -113,7 +113,7 @@ return (
);
```
To apply field options to the name of a field, use getFieldDisplayName.
To apply field options to the name of a field, use `getFieldDisplayName`.
```ts
const valueField = frame.fields.find((field) => field.type === FieldType.number);