Display a Gauge from my custom plugin

Grafana Plugin Development
1

Hello, I’m new to React and TypeScript. I have build a panel plugin recently to custom my Grafana dashboard. I didn’t know how to display a Gauge from the code. Here is my code:


interface Props extends PanelProps<SimpleOptions> {}

export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {

   const frame = data.series[0];
   const valueField = frame.fields.find(field => field.type === FieldType.number);

    return (
     <div style= {{ overflow: 'auto', width, height }} >
             {valueField ? valueField.values.toArray().map(value => {
                   return (
                       <Gauge value={value} />
                      )
                     })
               : null}
         </div>
  );
};

When I passed value from the valueField of the query, my dashboard showed the error “Cannot read property ‘colors’ of undefined”. I know that the Gauge’s value requires a DisplayValue type from DisplayValue | Grafana. How can I do to display a Gauge from the code?

2

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.