Render() is not called at the right point when the edit panel is launched

I am trying to build my own China Map plugin for Grafana using Baidu Echart, but found render() is not called correctly when the edit panel is launched.

Let me choose the worldmap plugin to explain. From the screenshot below it is set as height of 568px.

When the render() is called (set the breakpoint in Chrome) after the edit panel is launched, the height is still 568px.

After the breakpoint is skipped, the height is changed to 397px.

Should the render() be called after the height changed to 397px??

I am not sure how worldmap works to resize itself in this scenario as the height keep the original number when render() is called?

Baidu Echarts fully relies on the panel height, so it will get into trouble when the edit panel is launched like the example below. (Not resizing correctly as it didn’t get the new height value)

1 Like

Use the render event I think

Thanks Torkel for your reply but I am not sure what do you mean by this. In my own code and also worldmap’s code , resize() is triggerred undered the render event, the prolem is that the height is not correct when the render event happens, just as what I explained above.

If you check the code from the right side of the second screenshot , you can see it is actually using the render event.

Are you subscribing to the the render event? Show some code?

My own code is roughly the same with worldmap as below and definitely subscribing to the render event. The panel height issue I have encountered still happens on worldmap, so I have used worldmap to explain in the first post.

chinamap_ctrl.js

import {MetricsPanelCtrl} from 'app/plugins/sdk';
import echarts from './lib/echarts.min';
import mapRenderer from './map_renderer';
import _ from 'lodash';
import TimeSeries from 'app/core/time_series2';

export class ChinaMapCtrl extends MetricsPanelCtrl {

        ........        

	link(scope, elem, attrs, ctrl) {
		 
		 mapRenderer(scope, elem, attrs, ctrl);
	}
}

map_renderer.js

import echarts from './lib/echarts.min';

export default function link(scope, elem, attrs, ctrl) {
  const mapContainer = elem.find('.chinamap-panel');

  ctrl.events.on('render', () => {
    render();
    ctrl.renderingCompleted();
  });

  function render() {
    if (!ctrl.data) return;

    if (!ctrl.map) {
      ctrl.map = echarts.init(mapContainer[0]);
	  
    }

 ............     // some Echarts related job

    ctrl.map.resize();
	
  }
}

Let me use my own plugin to explain as well.

By default the map panel has a height of 718 px.

When the edit tab is on and render() event is triggered. it is still with the height of 718px. You can see the triggered breakpoint I set in function render(), so the render event is subscribed with no issue.

When the map resize() under function render () is called it will only get the wrong height of 718px to resize, so it come to my issue after the edit tab is totally displayed even though the height has changed to 397px afterwards with no more render() event triggered. I am not sure why worldmap can still resize in this scenario because I believe the same issue still happens on worldmap as well (check my detailed explaination in the first post), the only possibility that comes to my mind is maybe leaflet has a different way to resize (maybe resize automatically according to the panel size) and Echarts needs to resize manually. If the render() event is triggered when the panel height changed to 397px, I will not meet up with the issue. And should it be correct the render() event be triggered when the panel is with a new height number but not the old one?

do you have a setElementHeight function in you code? ctrl.height is updated in the render function for me.

Thanks torkel for your input and after manually refreshing the height based on ctrl.height, it is resolved for now. Does this looks to be some bug for your guys, as only ctrl.height is updated but not the panel itself?

var opts = {
	
	width:'auto',
	height: ctrl.height,
	silent: false
}

ctrl.map.resize(opts);

currently it’s up to the panel to use the ctrl.height value to set the height

hi,can you give me the relative echarts file.my echart map plugins has some error.thx.

能不能发我下使用echart中国地图所需要的相关文件,我的这不知道为啥有问题image