How i can detect panel width and height in my panel plugin?

user1401 · September 18, 2019, 5:26pm

I try reanimate flamegraph panel plugin for grafana https://github.com/Slach/grafana-flamegraph-panel which developed for grafana 4.x

how i can detect my panel width and height properly?
could anybody share direct link to examples where Panel plugin fill children DOM elements directly and can detect width and height of parent Panel?

peterholmberg · September 19, 2019, 7:25am

Hi!

For angular plugins it can be done by checking .height() or .width() of the panel element since it’s a jquery object. Example in graph.ts here:

github.com

grafana/grafana/blob/f445369d68af5aed2f48ff5bf45dd9dc1ab3062a/public/app/plugins/panel/graph/graph.ts#L378


    if (data[i].stats.timeStep < min) {
      min = data[i].stats.timeStep;
    }
  }


  return min;
}


// Function for rendering panel
renderPanel() {
  this.panelWidth = this.elem.width();
  if (this.shouldAbortRender()) {
    return;
  }


  // give space to alert editing
  this.thresholdManager.prepare(this.elem, this.data);


  // un-check dashes if lines are unchecked
  this.panel.dashes = this.panel.lines ? this.panel.dashes : false;

user1401 · September 20, 2019, 8:30am

thanks a lot, my mistake was wrong usage .width() and .height() on link "stage "
directly inside link() plugin function
but right solution use .width() and .heght() inside render() function binded to “render” event