albertosh

albertosh

I have a Live view that renders a

and injects a script file for that page. The script contains a function that renders a chart on the div based on the data provided to the div via a data attribute. It all works great the first time, but when I change one filter, the live view gets re-rendered and now the chart is all white (no chart rendered). I’m pretty new to Phoenix so I might be doing something wrong, but just in case, I’ll leave some code here.

/views/cash_flow_view.ex

defmodule Proj.CashflowView do
  use ProjWeb, :view

  def date_group_filters() do
    [
      "By Month": :by_month,
      "By Quarter": :by_quarter,
      "By Year": :by_year
    ]
  end

  def render("scripts.html", _assigns) do
    ~E(<script src="./js/charts.js"></script>)
  end
end

live/cashflow_live_view.ex

defmodule ProjWeb.CashflowLiveView do
  use Phoenix.LiveView
  alias Poison

  alias ProjWeb.CashflowView
  alias Proj.Cashflow
  
  def render(assigns) do
    IO.inspect "RENDERING AGAIN"
    IO.inspect assigns.cashflow

    ~L"""
    <h3>Cash flow</h3>
    <%= CashflowView.render("filters.html", assigns: assigns) %>
    <div id="chart" data-cashflow="<%= Poison.encode!(assigns.cashflow) %>"></div>
    <%= CashflowView.render("scripts.html", assigns: assigns); %>
    """
  end

  def mount(session, socket) do
    {:ok, assign(socket, session)}
  end

  def handle_event("update_filters", %{"filters" => filters}, socket) do
    cashflow = case Map.get(filters, "date_group") do
      "by_month" ->
        Cashflow.cashflow_by_month(socket.assigns.user_id)
      "by_quarter" ->
        Cashflow.cashflow_by_quarter(socket.assigns.user_id)
      "by_year" ->
        Cashflow.cashflow_by_year(socket.assigns.user_id)
    end

    {:noreply, assign(socket, cashflow: cashflow)}
  end
end

/scr/chart.js

import Taucharts from "taucharts";
import tooltip from "taucharts/dist/plugins/tooltip"

export var Chart = { 
  render: function() {
    const chartDiv = document.querySelector('#chart');
    const data = JSON.parse(chartDiv.dataset.cashflow);

    const chart = new Taucharts.Chart({
      data: data,
      type: 'line',
      x: 'date',
      y: 'amount',
      color: 'type',
      guide: {
        x: {label: {text: 'Month', padding: 35}, padding: 20},
        y: {label: 'Cashflow', padding: 20},
        padding: {b: 70, l: 70, t: 10, r: 10},
        showGridLines: 'y'
      },
      plugins: [
        tooltip()
      ]
    });

    chart.renderTo('#chart');    
  }
}

setTimeout(() => Chart.render(), 1000)

My 2 questions would be:

  1. Is there a way to avoid having to use that setTimeout? If I don’t use it then the chart probably never gets rendered.
  2. How can I make sure that inside the live view I can get access to chart? and call it’s methods from there?

Thanks!

Showing Posts 1 to 1

rhcarvalho

rhcarvalho

Very late to the party, but since this got many views already, I’ll leave a reference for those landing here in the future – myself included.

I used to embed some arbitrary JS code like the OP into a LiveView, also with some side effects. Works apparently okay on the first render, but doesn’t work if live navigating back to the page.

I think the solution is as @LostKobrakai said in Re-render JS on a Live view update - how to? - #2 by LostKobrakai, either using JS events or hooks:

— All posts loaded —

Where Next? Top

Trending in Questions Top

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
nseaSeb
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
New
RemyXRenard
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
samoloth
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
FlyingNoodle
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New

Other Trending Topics Top

mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
webofbits
Aludel - LLM Evaluation Workbench Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews