Getting values from Payload into panel elements

[Evgeny243]

Hi, I have following custom code for Initial Request (using Data Source mode):

---

const payload = {};

elements.forEach((element) => { if (!element.value) { return; } payload[element.id] = element.value; }) setInitial(payload); return;

---

and following code for Initial Request Payload:

---

return { query: import "date" from(bucket: "qpu1-telem") |> range(start: date.add(d: -3h, to: today()), stop: today()) |> filter(fn: (r) => r["_measurement"] == "analog_io") |> filter(fn: (r) => r["_field"] == "switchyard input PD") |> last(), }

---

I can see that the data is being read out using Query Inspector of grafana (see attached snapshot), but I do not know how to load this value into the element of the panel (id of the element is PD). I appreciate your help!

[mikhail-vl]

@Evgeny243 You should be able to select the field in the element's menu, when Initial Request as Data Source is selected in the latest release.

We explained it in the latest video: https://www.youtube.com/watch?v=hVy9NfFiI5U

[Evgeny243]

@mikhail-vl it is straight forward for "Query", but not for "Data Source". I do not understand how to relate output of the "request" to the elements of the panel. There is no example of it in the video.

[mikhail-vl]

@Evgeny243 We have an example in the blog post: https://volkovlabs.io/blog/form-panel-3.2.1-20231010/#field-mapping.

Let me know if it helps.

[Evgeny243]

@mikhail-vl I am using Influxdb source and there the payload looks different (there are no explicit variables introduced, unlike in your examples of "min" or "max"):

return { query: import "date" from(bucket: "qpu1-telem") |> range(start: date.add(d: -3h, to: today()), stop: today()) |> filter(fn: (r) => r["_measurement"] == "analog_io") |> filter(fn: (r) => r["_field"] == "switchyard input PD") |> last(), }

I do not know how to extract the values which are read out from the database.

[Evgeny243]

I figured it out: I had to write in the "Field Name" directly the _field label which in my case was "switchyard input PD". In case of "Query" it is instead written there "A:switchyard input PD". That has confused me.

[mikhail-vl]

@Evgeny243 That's correct. For the Query we can see what queries are returned to configure in the panel Options.

For Data Source, data source data returned on-demand and invisible for the panel options. You can check the field names in the Custom Code using console.log(data). If you figured it out, it's great. We may need to improve documentation if it's not clear.