diff --git a/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md index 17dc2eb6691..4b7cb0ca767 100644 --- a/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/xychart/panelcfg/schema-reference.md @@ -214,6 +214,7 @@ It extends [FieldConfig](#fieldconfig). | `axisSoftMax` | number | No | | *(Inherited from [FieldConfig](#fieldconfig))* | | `axisSoftMin` | number | No | | *(Inherited from [FieldConfig](#fieldconfig))* | | `axisWidth` | number | No | | *(Inherited from [FieldConfig](#fieldconfig))* | +| `frame` | number | No | | | | `hideFrom` | [HideSeriesConfig](#hideseriesconfig) | No | | *(Inherited from [FieldConfig](#fieldconfig))*
TODO docs | | `labelValue` | [TextDimensionConfig](#textdimensionconfig) | No | | *(Inherited from [FieldConfig](#fieldconfig))* | | `label` | string | No | | *(Inherited from [FieldConfig](#fieldconfig))*
TODO docs
Possible values are: `auto`, `never`, `always`. | diff --git a/packages/grafana-schema/src/raw/composable/xychart/panelcfg/x/XYChartPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/xychart/panelcfg/x/XYChartPanelCfg_types.gen.ts index 1ec0cb624e7..863c8252b68 100644 --- a/packages/grafana-schema/src/raw/composable/xychart/panelcfg/x/XYChartPanelCfg_types.gen.ts +++ b/packages/grafana-schema/src/raw/composable/xychart/panelcfg/x/XYChartPanelCfg_types.gen.ts @@ -57,6 +57,7 @@ export const defaultFieldConfig: Partial = { }; export interface ScatterSeriesConfig extends FieldConfig { + frame?: number; name?: string; x?: string; y?: string; diff --git a/public/app/plugins/panel/xychart/AutoEditor.tsx b/public/app/plugins/panel/xychart/AutoEditor.tsx index 865d742845e..82a346fd3f0 100644 --- a/public/app/plugins/panel/xychart/AutoEditor.tsx +++ b/public/app/plugins/panel/xychart/AutoEditor.tsx @@ -85,7 +85,7 @@ export const AutoEditor = ({ value, onChange, context }: StandardEditorProps v.value === value?.frame)} onChange={(v) => { onChange({ diff --git a/public/app/plugins/panel/xychart/ManualEditor.tsx b/public/app/plugins/panel/xychart/ManualEditor.tsx index 94481486ff9..f86ff255393 100644 --- a/public/app/plugins/panel/xychart/ManualEditor.tsx +++ b/public/app/plugins/panel/xychart/ManualEditor.tsx @@ -1,13 +1,14 @@ import { css, cx } from '@emotion/css'; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { GrafanaTheme2, StandardEditorProps, FieldNamePickerBaseNameMode, StandardEditorsRegistryItem, + getFrameDisplayName, } from '@grafana/data'; -import { Button, IconButton, useStyles2 } from '@grafana/ui'; +import { Button, Field, IconButton, Select, useStyles2 } from '@grafana/ui'; import { LayerName } from 'app/core/components/Layers/LayerName'; import { ScatterSeriesEditor } from './ScatterSeriesEditor'; @@ -18,6 +19,16 @@ export const ManualEditor = ({ onChange, context, }: StandardEditorProps) => { + const frameNames = useMemo(() => { + if (context?.data?.length) { + return context.data.map((frame, index) => ({ + value: index, + label: `${getFrameDisplayName(frame, index)} (index: ${index}, rows: ${frame.length})`, + })); + } + return [{ value: 0, label: 'First result' }]; + }, [context.data]); + const [selected, setSelected] = useState(0); const style = useStyles2(getStyles); @@ -101,23 +112,53 @@ export const ManualEditor = ({ {selected >= 0 && value[selected] && ( - { - onChange( - value.map((obj, i) => { - if (i === selected) { - return v!; + <> + {frameNames.length > 1 && ( + +