Automatic destroy all charts on turbo:before-render causing issues

[ocher]

Currently Chartkick.js automatically adds a listener which removes all Chartkick.js charts upon turbo:before-render event. Unfortunately it is causing issues when there is a turbo form with data-turbo-frame and data-turbo-action specified. The latter causes that turbo:before-render is fired, and even though only contents of a single frame were updated, charts on the whole page are destroyed.

Frankly speaking, there is a chance that it is a Turbo bug, but at least from our point of view it was easier to fix that on Chartkick.js side, by disabling the automatic turbo:before-render and adding a code which removes charts in a different way (see the comment).

Anyway, maybe it is worth to check it, or at least provide some easy option of disabling automatic turbo:before-render listener?

[ocher]

We are cleaning up not displayed charts using Stimulus. First we change the HTML template to use the stimulus controller like this:

Chartkick.options[:html] = %(<div id="%{id}" data-controller="chartkick-cleanup") +
  %(style="height: %{height}; width: %{width}; text-align: center;">%{loading}</div>)

And here is the stimulus controller defined in chartkick_cleanup_controller.js file:

import { Controller } from 'stimulus'

export default class extends Controller {
  disconnect() {
    const chartId = this.element.id;
    if (Chartkick.charts[chartId]) {
      Chartkick.charts[chartId].destroy();
      delete Chartkick.charts[chartId];
    }
  }
}

That approach is pretty simple and guarantees that charts which are no longer displayed are correctly destroyed.

[ankane]

Hey @ocher, thanks for reporting! Unfortunately, I don't see a way to tell if the event will re-render the entire page or just a frame. Just pushed the ability to set:

Chartkick.configure({autoDestroy: false})

to the auto-destroy branch. Let me know if that works for you.

https://github.com/ankane/chartkick.js/compare/auto-destroy

[ocher]

Hi @ankane, thank you for the response. Yes, I think that such option will be very helpful. 👍🏻

[elalemanyo]

Hi,
I am also having some issues with chartkick inside turbo frame, charts are only loading after page reload 😞
I tried @ocher fix but didn't work for me 🤷‍♂️.
Also tried auto-destroy branch but after loading it I am getting strange errors from esbuild:
✘ [ERROR] Could not resolve "chartkick"
Any help would be great.

BTW I also tried this, using own stimulus controller to init all charts didn't make any difference, but I see the connect being called after turbo frame load. Even that charts are not being render... no idea why

[ankane]

Sorry, meant to follow up. The autoDestroy option was released in 4.2.0. Thanks again for reporting @ocher!

@elalemanyo I'm not sure how to reproduce (and don't have the bandwidth to help with app-specific issues), but hopefully the option helps.