Эликсир Феникс LiveView Echart просто исчезает (исчезает) - PullRequest
Новая
       84

Эликсир Феникс LiveView Echart просто исчезает (исчезает)

3 голосов
/ 01 ноября 2019

Извините за длинный пост, я попытался дать всю информацию и объяснить, что я уже пробовал.

Проблема: Я поместил классический вид феникса в живое изображение. Хотя все выглядит хорошо, эхарт исчезает, как только он заканчивает рисовать. Кажется, нет никакого способа вернуть его.

Вот мой график. Как видите, я также пытаюсь подключить его к событию phx:update. Но это не помогает ... graph.js: 

updateGraph = function() {
  console.log("updating the graph...")
  let device_name = document.getElementById('device-name').value;
  let series_data = document.getElementById('history_chart_data').dataset.series;

  series_data = JSON.parse(series_data);

  // draw chart
  window.myChart.setOption({
    [chart options omitted]
  });
}

initGraph = function() {
  // initialize echarts instance with prepared DOM
  window.myChart = echarts.init(document.getElementById('history_chart'), 'light');
  updateGraph();
}

document.addEventListener('DOMContentLoaded', initGraph, false);
document.addEventListener('phx:update', updateGraph);

Вот HTML (graph.html.leex). Как вы можете видеть, я даже поместил данные в другой div, просто чтобы быть в безопасности. 

    <%= if assigns[:ttnmessages] do %>
      <script src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/jcharts.min.js") %>"></script>
      <script src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/moment.min.js") %>"></script>
      <script type="text/javascript" src="<%= Routes.static_path(DatabaumWeb.Endpoint, "/js/graph.js") %>"></script>


      <div id="history_chart" style="width: 100%;height:50vh;"></div>
      <div id="history_chart_data" data-series="<%= dataSeries(@ttnmessages, @graph_data) %>"></div>
    <% end %>

И liveview 

defmodule AppWeb.ConsoleLive do
  use Phoenix.LiveView
  alias AppWeb.ConsoleView
  alias App.API

  def render(assigns) do
    Phoenix.View.render(ConsoleView, "index.html", assigns)
  end


  @doc """
  Graph
  """
  def mount(session = %{params: %{"hardware_serial" => hardware_serial, "graph" => form}, user: current_user}, socket) do
    AppWeb.Endpoint.subscribe("TtnMessages")
    if connected?(socket), do: :timer.send_interval(1000, self(), :tick)

    ttnmessages = API.list_ttnmessages(hardware_serial, form)
    message = List.last(ttnmessages)
    devices = API.list_message_devices(current_user)
    device = API.get_device_by_serial(hardware_serial);
    graph_data = form
                 |> Enum.reject(fn {_k, v} -> v != "true" end)
                 |> Enum.map(fn {k, _v} -> k end)
                 |> Enum.to_list()

    session = Map.merge(session, %{
      devices: devices,
      ttnmessages: ttnmessages,
      message: message,
      device: device,
      graph_data: graph_data,
      message_ago: message_ago(message.inserted_at)
    })

    {:ok, assign(socket, session)}
  end

 #[Omitted two other mount methods, which are not called in this case]

  # updates the info when the device has last been seen.
  def handle_info(:tick, socket) do
    message = socket.assigns[:message]
    {:noreply, assign(socket, message_ago: message_ago(Map.get(message, :inserted_at)))}
  end

  #new message arrives, this is not responsible for my issue because this happens max. once per minute
  def handle_info(%{event: "new", payload: %{message: message}} = a, socket) do
    message = update_message(message, socket.assigns.message)
    devices = Enum.map(socket.assigns.devices, &update_device(&1, message))

    {:noreply, assign(socket, devices: devices, message: message)}
  end

  def handle_info(_broadcast, socket), do: {:noreply, socket}


  #  update the message if necessary
  defp update_message(message = %{hardware_serial: hs}, socket_message = %{hardware_serial: hs}), do: message
  defp update_message(_message, socket_message), do: socket_message


  defp update_device(_device= %{hardware_serial: hs}, _message = %{hardware_serial: hs}), do: API.get_device_by_serial(hs)
  defp update_device(device, _message), do: device

  defp message_ago(nil), do: "never"
  defp message_ago(date) do
    {:ok, ago} = Timex.Format.DateTime.Formatters.Relative.relative_to(date, Timex.now(), "{relative}", "de")
    ago
  end

end

Сообщения ttnmessages никогда даже не обновляются. Ttnmessage обновляется редко. Галочка не отвечает, я пытался отключить это.

Диаграмма до ее исчезновения (при загрузке страницы) The graph just before it vanishes, а затем And afterwards Интересная вещьзаключается в том, что когда я пытаюсь отредактировать элемент css и, например, добавить красный фоновый цвет, то, когда тик попадает, но распечатывает updating the graph....

1 Ответ

1 голос
/ 07 ноября 2019

Как сказал Крис МакКорд на Github , мне пришлось вставить phx-update="ignore" в граф HTML. Это решило проблему и сделало меня очень счастливым.

...