add graph to range page

lib/cannery_web/live/range_live/index.ex

@@ -88,17 +88,67 @@ defmodule CanneryWeb.RangeLive.Index do
       shot_groups
       |> Enum.map(fn shot_group -> shot_group |> get_row_data_for_shot_group(columns) end)
 
+    chart_data =
+      shot_groups
+      |> Enum.map(fn shot_group ->
+        shot_group
+        |> get_chart_data_for_shot_group([:name, :count, :notes, :date])
+      end)
+      |> Enum.sort_by(fn %{date: date} -> date end, Date)
+
     socket
-    |> assign(ammo_groups: ammo_groups, columns: columns, rows: rows, shot_groups: shot_groups)
+    |> assign(
+      ammo_groups: ammo_groups,
+      columns: columns,
+      rows: rows,
+      chart_data: chart_data,
+      shot_groups: shot_groups
+    )
   end
 
-  @spec get_row_data_for_shot_group(ShotGroup.t(), [map()]) :: [map()]
+  @spec get_chart_data_for_shot_group(ShotGroup.t(), keys :: [atom()]) :: map()
+  defp get_chart_data_for_shot_group(shot_group, keys) do
+    shot_group = shot_group |> Repo.preload(ammo_group: :ammo_type)
+
+    labels =
+      if shot_group.notes do
+        [gettext("Notes: %{notes}", notes: shot_group.notes)]
+      else
+        []
+      end
+
+    labels = [
+      gettext(
+        "Name: %{name}",
+        name: shot_group.ammo_group.ammo_type.name
+      ),
+      gettext(
+        "Rounds shot: %{count}",
+        count: shot_group.count
+      )
+      | labels
+    ]
+
+    keys
+    |> Map.new(fn key ->
+      value =
+        case key do
+          :name -> shot_group.ammo_group.ammo_type.name
+          key -> shot_group |> Map.get(key)
+        end
+
+      {key, value}
+    end)
+    |> Map.put(:labels, labels)
+  end
+
+  @spec get_row_data_for_shot_group(ShotGroup.t(), [map()]) :: map()
   defp get_row_data_for_shot_group(%{date: date} = shot_group, columns) do
     shot_group = shot_group |> Repo.preload(ammo_group: :ammo_type)
     assigns = %{shot_group: shot_group}
 
     columns
-    |> Enum.into(%{}, fn %{key: key} ->
+    |> Map.new(fn %{key: key} ->
       value =
         case key do
           :name ->

lib/cannery_web/live/range_live/index.html.heex

@@ -53,11 +53,27 @@
       <%= gettext("Shot log") %>
     </h1>
 
+    <canvas
+      id="shot-log-chart"
+      phx-hook="ShotLogChart"
+      phx-update="ignore"
+      class="max-h-72"
+      data-chart-data={Jason.encode!(@chart_data)}
+      data-label={gettext("Rounds fired")}
+      data-color={random_color()}
+      aria-label={gettext("Rounds fired chart")}
+      role="img"
+    >
+      <%= dgettext("errors", "Your browser does not support the canvas element.") %>
+    </canvas>
+
     <.live_component
       module={CanneryWeb.Components.TableComponent}
       id="shot_groups_index_table"
       columns={@columns}
       rows={@rows}
+      initial_key={:date}
+      initial_sort_mode={:desc}
     />
   <% end %>
 </div>

lib/cannery_web/live/tag_live/index.ex

@@ -6,7 +6,7 @@ defmodule CanneryWeb.TagLive.Index do
   use CanneryWeb, :live_view
   import CanneryWeb.Components.TagCard
   alias Cannery.{Tags, Tags.Tag}
-  alias CanneryWeb.Endpoint
+  alias CanneryWeb.{Endpoint, ViewHelpers}
 
   @impl true
   def mount(_params, _session, socket), do: {:ok, socket |> display_tags()}
@@ -25,7 +25,7 @@ defmodule CanneryWeb.TagLive.Index do
   defp apply_action(socket, :new, _params) do
     socket
     |> assign(:page_title, gettext("New Tag"))
-    |> assign(:tag, %Tag{bg_color: Tags.random_bg_color(), text_color: "#ffffff"})
+    |> assign(:tag, %Tag{bg_color: ViewHelpers.random_color(), text_color: "#ffffff"})
   end
 
   defp apply_action(socket, :index, _params) do

lib/cannery_web/views/view_helpers.ex

@@ -115,4 +115,18 @@ defmodule CanneryWeb.ViewHelpers do
     </label>
     """
   end
+
+  @doc """
+  Get a random color in `#ffffff` hex format
+
+  ## Examples
+
+      iex> random_color()
+      "#cc0066"
+  """
+  @spec random_color() :: <<_::7>>
+  def random_color do
+    ["#cc0066", "#ff6699", "#6666ff", "#0066cc", "#00cc66", "#669900", "#ff9900", "#996633"]
+    |> Enum.random()
+  end
 end