import { PanelProps , SelectableValue } from '@grafana/data' ; import { Select } from '@grafana/ui' ; import React from 'react' ; import { SimpleOptions } from 'types' ; interface Props extends PanelProps < SimpleOptions > { } export const SimplePanel = ( { options , data , width , height , onOptionsChange } ) => { const { selectedRefId } = options ; const setSelectedRefId = ( refId ) => { onOptionsChange ( { ... options , selectedRefId : refId , } ) ; } ; const values = data . series . map ( ( frame ) => ( { value : frame . refId , label : frame . name } ) ) ; const selectedFrame = data . series . find ( ( frame ) => frame . refId === selectedRefId ) ; if ( ! selectedFrame && data . series . length > 0 ) { setSelectedRefId ( data . series [ 0 ] . refId ?? '' ) ; } return ( < div style = { { width , height } } > { selectedFrame ? ( < > < Select value = { selectedRefId } options = { values } onChange = { ( value ) => setSelectedRefId ( value . value ) } /> < p > Currently selected : { selectedFrame . name } < /p> < />) : null} < /div>); } ;