Merge pull request #469 from pojiro/patch-1

Fix ChartComponent bug, correctly display metrics history

Author: SteffenDE

lib/phoenix/live_dashboard/components/chart_component.ex

@@ -3,43 +3,30 @@ defmodule Phoenix.LiveDashboard.ChartComponent do
 
   @impl true
   def mount(socket) do
-    {:ok,
-     socket
-     |> stream_configure(:data, dom_id: &data_dom_id/1)
-     |> stream(:data, [])}
+    {:ok, socket, temporary_assigns: [data: []]}
   end
 
-  defp data_dom_id(_), do: "unused"
-
   @impl true
   def update(assigns, socket) do
-    {data, assigns} = Map.pop(assigns, :data, [])
-    socket = assign(socket, assigns) |> normalize_assigns!(data)
+    socket = assign(socket, assigns)
+    validate_assigns!(socket.assigns)
     {:ok, socket}
   end
 
-  defp normalize_assigns!(socket, data) do
-    %{assigns: assigns} = socket
+  defp validate_assigns!(assigns) do
     validate_positive_integer_or_nil!(assigns[:bucket_size], :bucket_size)
     validate_positive_integer_or_nil!(assigns[:prune_threshold], :prune_threshold)
-    normalize_data(socket, data)
+    :ok
   end
 
   defp validate_positive_integer_or_nil!(nil, _field), do: nil
 
   defp validate_positive_integer_or_nil!(value, field) do
     unless is_integer(value) and value > 0 do
-      msg = "#{inspect(field)} must be a positive integer, got: #{inspect(value)}"
-      raise ArgumentError, msg
+      raise ArgumentError, "#{inspect(field)} must be a positive integer, got: #{inspect(value)}"
     end
-  end
-
-  defp normalize_data(socket, data) do
-    label = socket.assigns.label
 
-    data
-    |> Enum.map(fn {x, y, z} -> {x || label, y, z} end)
-    |> Enum.reduce(socket, fn elem, socket -> stream_insert(socket, :data, elem) end)
+    value
   end
 
   @impl true
@@ -48,9 +35,8 @@ defmodule Phoenix.LiveDashboard.ChartComponent do
     <div class={chart_size(@full_width)}>
       <div id={"chart-#{@id}"} class="card">
         <div class="card-body">
-          <!-- We don't add a phx-update="stream" because js expects only new data -->
           <div phx-hook="PhxChartComponent" id={"chart-#{@id}-datasets"} hidden>
-            <span :for={{_id, {x, y, z}} <- @streams.data} data-x={x} data-y={y} data-z={z}></span>
+            <span :for={{x, y, z} <- @data} data-x={x || @label} data-y={y} data-z={z}></span>
           </div>
           <div
             class="chart"