Phoenix LiveDashboard

Občas chcete přidat 2-3 grafy jako počet sign-upů za den nebo počet nových zakázek po týdnech. V Elixiru existuje aplikace LiveDashboard. Ta sama o sobě zobrazuje základní statistiky jako verze Elixiru, běžící aplikace, pomalé Ecto query, velikost databáze apod. Co se moc neví je, že do LiveDashboard jdou jednoduše přidávat další záložky. Takže pokud už LiveDashboard v projektu máte, tak použít jej k vytvoření mini BI dashboardu je extrémně jednoduché. Ukážeme si jak na to.

Výhodou použití LiveDashboard oproti třeba LiveBooku je, že je to jednoduchá závislost, kterou už v projektu nejspíš máte. Přidat LiveBook může být malinko složitější. Kvůli jednomu, dvěma grafům to uplně nemusí stát za to. Další výhodou je, že můžete použít veškerý existující kód k sestavení dat k zobrazení. To je výhoda oproti externím BI řešením, do kterých musíte vyexportovat SQL databázi a naučit se nový query jazyk. S LiveDashboard máte plnou sílu Ecta a Elixiru.

Takže pojďme na to:

1. Přidejte phoenix_live_dashboard (pokud už nemáte)

2. Přidejte závislost do mix.exs na contex kvůli grafům

{:contex, "~> 0.5.0"}

3. Přidejte novou Page

defmodule MyAppWeb.Stats do
  @moduledoc false
  use Phoenix.LiveDashboard.PageBuilder

  @impl true
  def menu_link(_, _) do
    {:ok, "Business"}
  end

  @impl true
  def render(assigns) do
    # zde muze byt Ecto Query, ktera ziska data
    data = [{"2024-01-22", 4}, {"2024-01-18", 3}]

    svg_chart =
      ([{"Start", 0}] ++ data)
      |> Enum.map(fn {date, val} -> ["#{date}", val] end)
      |> Contex.Dataset.new()
      |> Contex.Plot.new(Contex.BarChart, 800, 400)
      |> Contex.Plot.to_svg()

    assigns = assign(assigns, :chart, svg_chart)

    ~H"""
    <%= Phoenix.HTML.raw(@chart) %>
    """
  end
end

4. Přidejte additional_pages: do live_dashboard routeru

scope "/" do
  pipe_through :basic_auth_admin
  live_dashboard "/live_dashboard",
    ecto_repos: [MyApp.Repo],
    additional_pages: [business: MyAppWeb.Stats]
end

A je hotovo. Pokud chcete zobrazit živá data, prostě přidejte import Ecto.Query a proměnnou data naplňte z vašeho Repa.

Užitečné odkazy: