Prevent charts from rendering twice

[ppisljar]

Charts in kibana (pie and point charts) render twice. There are two problems:

• resize checker is checking for new size and rerenders the chart in that case. when we render the chart for the first time its size changes ... resize checker starts rerender just after we render it the first time
• even if we fix the first problem, still the size of chart changes after legend is added to the view. to fix that we first need to render legend and second the actual chart

[thomasneirynck]

@ppisljar Is this the same issue as #7945/#684?

[ppisljar]

no @thomasneirynck it is related, but not the same. everytime visualization is rendered its done so twice. first normal render then resize_checker finds out that the size of chart changed (becase before divs height was 0 and now its actual chart height or because legend appeared) and rerenders it again.

it doesn't depend on changing any options (the other two issues seem to be problems when chart is rerendered after changing option when that is not needed )

[ppisljar]

i don't really like this (and its breaking tests). would returning a promise here be a good idea ?

[Bargs]

Could you create a "legend rendered" event and listen for it? Or if render directly modifies the DOM, perhaps you could listen to for the DOM modification event that adds the legend? I've never really looked at the Renderbot code, so I'm probably not a ton of help here.

[ppisljar]

legend is waiting for renderbot.chartData to be available. once thats done it'll render in the next digest cycle so its sufficient for renderbot to just wait here after it makes chartData available

[spalger]

you need to return the promise here, or the assertions won't fail the test.

[spalger]

This should use $scope.$evalAsync() so that we can be sure that angular has time to finish it's digest, and so that it runs one after we are done.

[ppisljar]

renderbot is non-angular library so it doesnt use scope ... do you think its a good idea to introduce it ? i kinda like it to be a separate thing.

[spalger]

This is a pretty serious collection of steps. What do you think about naming it something and adding it as a method to the ResizeChecker.

Maybe something like:

ResizeChecker.prototype.changeWithoutTriggering = function(block) {
  // prevent checking while the block runs
  this.stopSchedule();

  // run the external code that will cause the size to change
  block();

  // save the new size, without emitting a change, and restart the schedule
  this.saveSize();
  this.saveDirty(false);
  this.continueSchedule();
};

Which would be used as:

this.resizeChecker.changeWithoutTriggering(() => {
  this.handler = handlerTypes[chartType](this) || handlerTypes.column(this);
  this._runOnHandler('render');
})

[ppisljar]

what do you think about adding function to the vislib class ? (take a look at latest commit) ?

[spalger]

I like it

[thomasneirynck]

LGTM. I like the improvement!