How to execute js function in Drab Commander

How do you use this assigns? I mean, how AnalyticsChart.buildChart() reads this assigns values?

What is the return value of this exec_js/2?

How do you use this assigns? I mean, how AnalyticsChart.buildChart() reads this assigns values?

it reads from html page using javascript like this in analytics-chart.js

import Chart from "chart.js"

let AnalyticsChart = {
  
  buildChart() {
    let ctx = document.getElementById("analyticsChart");
    let labels = ["sent", "delivered", "undelivered", "clicks"];
   
    let total_sent = parseInt(document.getElementById("total-sent").dataset.totalSent);
    let delivered = parseInt(document.getElementById("deilvered-count").dataset.deliveredCount);
    let undelivered = parseInt(document.getElementById("undelivered-count").dataset.undeliveredCount);
    let clicks = parseInt(document.getElementById("total-clicks").dataset.totalClicks);
    let counts = [total_sent, delivered, undelivered, clicks];
    console.log("Is chart working?");
    let chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: labels,
        datasets: [{
          data: counts,
          backgroundColor: [

            'rgba(54, 162, 235, 0.5)',
            'rgba(255, 206, 86, 0.5)',
            'rgba(255, 99, 132, 0.5)',
            'rgba(75, 192, 192, 0.5)'
          ]
        }] 
      },
      options: {
        
      }
    });
  }
}

export default AnalyticsChart

What is the return value of this exec_js/2?

error] Drab Handler failed with the following exception:
** (Drab.JSExecutionError) AnalyticsChart is not defined
    (drab) lib/drab/exceptions.ex:16: Drab.JSExecutionError.result_or_raise/1
    (drab) lib/drab.ex:323: anonymous fn/7 in Drab.handle_event/6

I just switched to bang version exec_js!/2

The values you set in the poke command are the Phoenix assigns. How are they bound to the elements? Like, how is “total_sent” assign bound to the element with ID “total-sent”?

You may use Drab to re-execute JS (see ‘Scripts’ chapter here), but obviously it would work only in the JS parts rendered with templates.

I am guessing that AnalyticsChart is not global? Try to set it up with something like window.AnalyticsChart = AnalyticsChart;

The better docs for scripts are here.

The values you set in the poke command are the Phoenix assigns. How are they bound to the elements? Like, how is “total_sent” assign bound to the element with ID “total-sent”?

like this
<p id="total-sent" data-total-sent="<%= @total_sent %>"><%= @total_sent %></p>

then I get the values in js like this

let total_sent = parseInt(document.getElementById("total-sent").dataset.totalSent);

Cool, so it should work. Updating the “data-” attribute should update the dataset property as well. You may check it in the console with:

document.getElementById("total-sent").dataset.totalSent

after doing the poke. You just need to find a way to run the update chart function.

Yes, I just found a way to run the update chart function and did it like this in defhandler

socket |> exec_js!("AnalyticsChart.update()")

and it worked.
Thanks!