How to implement LegendSeriesColorPicker in Grafana 7+ plugin development

mihoci10 · June 30, 2020, 5:45am

Hello, I am redesigning a plugin for grafana v7 and am wondering, how to properly implement a ColorPicker for the series in the legend. Currently my code looks like this:

I already had a look at this component: https://grafana.com/docs/grafana/latest/packages_api/ui/seriescolorpickerpopover/#seriescolorpickerpopover-variable but I am not sure how to properly use it.

sebastiangunreben · May 11, 2021, 9:23am

Hello @mihoci10, I have similar issue with the ColorPicker for a series within a legend.
Did you solve your problem already? How? I desperatly would like to know what does the trick?

BR,
Sebastian

marcusolsson · May 12, 2021, 1:40pm

I’ve had success with using the VizLayout together with the VizLegend.

Here’s how it’s used in the pie chart panel:

github.com

grafana/grafana/blob/9c498c6810584b230e1ba7c666fd8af751b55a8c/public/app/plugins/panel/piechart/PieChartPanel.tsx#L53-L125


    <VizLayout width={width} height={height} legend={getLegend(props, fieldDisplayValues)}>
      {(vizWidth: number, vizHeight: number) => {
        return (
          <PieChart
            width={vizWidth}
            height={vizHeight}
            highlightedTitle={highlightedTitle}
            fieldDisplayValues={fieldDisplayValues}
            tooltipOptions={options.tooltip}
            pieType={options.pieType}
            displayLabels={options.displayLabels}
          />
        );
      }}
    </VizLayout>
  );
}


function getLegend(props: Props, displayValues: FieldDisplay[]) {
  const legendOptions = props.options.legend ?? defaultLegendOptions;

This file has been truncated. show original

sebastiangunreben · May 13, 2021, 10:07pm

Thank you @marcusolsson. Your hint helped a lot.
The problem I had has been hidde in the nitty gritty detail, that I used d3 (svg enviroment) to setup my grap. VizLegend etc. render in “div” elements, which are not displayed within an svg environment withput “foreignObject” directive.

Now, I use “VizLegend” to display the legend. This works well, except that the ColorPicker will not show up, when clicking onto the names/dashes of an item. Is there any special requirement/attribute necessary that the picker shows up?

sebastiangunreben · May 14, 2021, 9:45am

got it …

need to be added …

sebastiangunreben · May 14, 2021, 11:33am

… but …
“onSeriesColorChange” of VizLegend refers to a callback function with will receive the “label” and the “color” of the VizLegendElement. How could with that information the color of the Legend label as well as the series be changed as there is no reference to the series nor the VizLegendElement available?

sebastiangunreben · May 17, 2021, 11:14am

Now I use “FieldConfig” override settings to change color.
But how will these override rules stored persistently with the panel?