opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-03 03:59:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update build a datasource plugin tutorial (#66381)

Browse Source 
* update tutorial

* add punctuation
This commit is contained in:
Kate Brenner
2023-04-25 12:20:14 -06:00
committed by GitHub
parent 96a191e643
commit 17b8d28cae
2 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/sources/tutorials/build-a-data-source-plugin/index.md
View File

@ -70,7 +70,7 @@ async testDatasource()
## Data frames
Nowadays there are countless of different databases, each with their own ways of querying data. To be able to support all the different data formats, Grafana consolidates the data into a unified data structure called _data frames_.
Nowadays there are countless different databases, each with their own ways of querying data. To be able to support all the different data formats, Grafana consolidates the data into a unified data structure called _data frames_.
Let's see how to create and return a data frame from the `query` method. In this step, you'll change the code in the starter plugin to return a [sine wave](https://en.wikipedia.org/wiki/Sine_wave).
@ -98,6 +98,14 @@ Let's see how to create and return a data frame from the `query` method. In this
const query = defaults(target, defaultQuery);
```
1. Create a default query at the top of datasource.ts:
```ts
export const defaultQuery: Partial<MyQuery> = {
constant: 6.5,
};
```
1. Create a data frame with a time field and a number field:
```ts
@ -190,19 +198,19 @@ Now that you've defined the query model you wish to support, the next step is to
**QueryEditor.tsx**
```ts
const query = defaults(this.props.query, defaultQuery);
const { queryText, constant, frequency } = query;
```
```ts
<FormField width={4} value={frequency} onChange={this.onFrequencyChange} label="Frequency" type="number" />
<InlineField label="Frequency" labelWidth={16}>
<Input onChange={onFrequencyChange} value={frequency} />
</InlineField>
```
1. Add a event listener for the new property.
```ts
onFrequencyChange = (event: ChangeEvent<HTMLInputElement>) => {
const { onChange, query, onRunQuery } = this.props;
const onFrequencyChange = (event: ChangeEvent<HTMLInputElement>) => {
onChange({ ...query, frequency: parseFloat(event.target.value) });
// executes the query
onRunQuery();
@ -255,21 +263,15 @@ Just like query editor, the form field in the config editor calls the registered
**ConfigEditor.tsx**
```ts
<div className="gf-form">
<FormField
label="Resolution"
onChange={this.onResolutionChange}
value={jsonData.resolution || ''}
placeholder="Enter a number"
/>
</div>
<InlineField label="Resolution" labelWidth={12}>
<Input onChange={onResolutionChange} value={jsonData.resolution || ''} placeholder="Enter a number" width={40} />
</InlineField>
```
1. Add a event listener for the new option.
```ts
onResolutionChange = (event: ChangeEvent<HTMLInputElement>) => {
const { onOptionsChange, options } = this.props;
const onResolutionChange = (event: ChangeEvent<HTMLInputElement>) => {
const jsonData = {
...options.jsonData,
resolution: parseFloat(event.target.value),