apexcharts integration in rails app (turbo loads)

[ncs1]

Is your feature request related to a problem? Please describe.
Currently, there's no documentation / simple solution to use apexcharts.rb in rails context (i.e. using with trubo/turbolinks).
When navigating into an apexcharts page, out and back - the chart won't show as it doesn't redraw/reload due to turbo listeners.

Describe the solution you'd like
I have a specific solution for my application, but it's not generic and poorly implemented.

Is there a solution ? Am I missing something ?

[toddsutt]

@ncs1 We also need this enhancement. Could you share your solution? We are looking into implementing a temporary solution as well

[toddsutt]

This seems to work for me, I forked the gem and changed the defer method:
def defer(js) if defer? <<~DEFERRED var createChart = function() { #{indent(js)} }; document.addEventListener('turbo:load', function() { if ($("##{element_id}").children().length == 0) { createChart(); } }); DEFERRED else js end end

[ncs1]

@toddsutt in first try, I did think it solved the issue.
However, I tried different flows and the graphs were "smearing" on each other when I switched to and back different pages that contains graphs draw also.
Did you encounter such an issue after your fix ?

My solution is having an object that keeps track of the graphs and redraw them in turbo event, as I noted I don't think that this is an elegant solution, but it does fix the issue completely.
In case still needed, I'll put instructions for my solution.

[toddsutt]

@ncs1 Interesting, I haven't run into that yet but I'd definitely be interested in seeing your solution!

[ncs1]

@toddsutt I'll upload it with instructions in the upcoming days.

[toddsutt]

@ncs1 It looks like this might work better without having to modify the gem. I have the options in helper methods to keep the view cleaner but then I put this in each view that has charts. Still not the cleanest but it relies more on building charts the way ApexCharts' website suggests: https://apexcharts.com/docs/chart-types/bar-chart/

:javascript
  var initializedCharts = false;

  document.addEventListener('turbo:load', function() {
    if (initializedCharts) return;
    initializedCharts = true;

    // ROAD TO 84 CHART //
    new ApexCharts(document.querySelector("#roadto84chart"), #{road84_chart_json}).render();

    // CLOSE RATE CHART //
    new ApexCharts(document.querySelector("#closeratechart"), #{closerate_chart_json}).render();
  });

UPDATE:

I am now using this javascript for each of my charts. My charts are each in their own partials with the id variable set

  (function() {
    const options = { ... };

    const initializeChart = function() {
      const element = $('##{id}');
      if (element.length == 0 || element.children().length > 0) return;
      const chart = new ApexCharts(document.querySelector("##{id}"), options);
      chart.render();
      document.removeEventListener('turbo:load', initializeChart);
    }
    document.addEventListener('turbo:load', initializeChart);
  })();

[ncs1]

@toddsutt , I think I tried something along the lines of your update and I still had graphs redraw on top of each other in case of multiple pages of graphs. Did you try multiple pages of graphs and transition between them successfully ?

Here's what I did (again, I don't think that this is elegant, but it works) - I supported both turbolinks and turbo inside:

• Use my patch for apexcharts.rb, see it in the following link:
  master...ncs1:apexcharts.rb:master

• In your Rails app,

1. Create a singleton class and make it accessible through the variable ApexTurboRenderer, i.e.:
   in application.js:

window.ApexTurboRenderer = _MYAPEXSINGLECLASS;
ApexTurboRenderer.setup_apex();

2. The singleton class needs to have the following static vars and methods inside:

static apex_graph = []

  static setup_apex() {
    window.addEventListener('turbo:before-render', () => {
      _MYAPEXSINGLECLASS.apex_graph = [];
    });
    window.addEventListener('turbolinks:before-render', () => {
      _MYAPEXSINGLECLASS.apex_graph = [];
    });
  }

  static add_apexobj(obj) {
    this.apex_graph.push(obj);
  }

  static render_apexes() {
    for (let index = 0; index < this.apex_graph.length; index++) {
      const element = this.apex_graph[index];

      try {
        let chrt = null;
        if (!!Apex && typeof Apex._chartInstances !== 'undefined') {
          chrt = ApexCharts.getChartByID(element[0]);
        }
        if (!!chrt) {
          chrt.destroy();
        }
      } catch (e) {
        console.log(e);
      }

      let chart = new ApexCharts(document.querySelector('#' + element[0]), element[1]);

      try {
        chart.render();
      } catch (e) {
        console.log(e);
      }
    }
    _MYAPEXSINGLECLASS.apex_graph = [];
  }

3. adds the following events to your js (I added them as a partial inside my navfooter):

<script>
  window.addEventListener('load', function cb(event) {
    ApexTurboRenderer.render_apexes();
    event.currentTarget.removeEventListener(event.type, cb);
  });

  window.addEventListener('turbolinks:load', function cb(event) {
    ApexTurboRenderer.render_apexes();
    event.currentTarget.removeEventListener(event.type, cb);
  });

  window.addEventListener('turbo:load', function cb(event) {
    ApexTurboRenderer.render_apexes();
    event.currentTarget.removeEventListener(event.type, cb);
  });
</script>

This is all.
I'm sure it can be refined, or a more elegant solution could be used.

[styd]

@ncs1 @toddsutt I really love watching your discussion. Unfortunately I cannot help you guys on this one because I don't use turbolinks in my app and I have quite limited free time nowadays. 😢
Perhaps both of you can submit a PR to implement this feature?
I just found that chartkick have solved this by adding new option, maybe we can adapt it for this gem. WDYT? Or do you have other ideas?