add graph to range page

This commit is contained in:
shibao 2022-11-09 21:04:57 -05:00
parent 1f017ced4a
commit ba8d7988b3
11 changed files with 221 additions and 23 deletions

View File

@ -10,6 +10,7 @@
- Make container show page a bit more compact - Make container show page a bit more compact
- Make container show page filter used-up ammo - Make container show page filter used-up ammo
- Forgot to add the logo as the favicon whoops - Forgot to add the logo as the favicon whoops
- Add graph to range page
- Update project dependencies - Update project dependencies
# v0.5.4 # v0.5.4

View File

@ -26,6 +26,7 @@ import { Socket } from 'phoenix'
import { LiveSocket } from 'phoenix_live_view' import { LiveSocket } from 'phoenix_live_view'
import topbar from '../vendor/topbar' import topbar from '../vendor/topbar'
import MaintainAttrs from './maintain_attrs' import MaintainAttrs from './maintain_attrs'
import ShotLogChart from './shot_log_chart'
import Alpine from 'alpinejs' import Alpine from 'alpinejs'
const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content') const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
@ -36,7 +37,7 @@ const liveSocket = new LiveSocket('/live', Socket, {
} }
}, },
params: { _csrf_token: csrfToken }, params: { _csrf_token: csrfToken },
hooks: { MaintainAttrs } hooks: { MaintainAttrs, ShotLogChart }
}) })
// alpine.js // alpine.js

View File

@ -0,0 +1,83 @@
import { Chart, Title, Tooltip, Legend, LineController, LineElement, PointElement, TimeScale, LinearScale } from 'chart.js'
import 'chartjs-adapter-date-fns'
Chart.register(Title, Tooltip, Legend, LineController, LineElement, PointElement, TimeScale, LinearScale)
export default {
initalizeChart (el) {
const data = JSON.parse(el.dataset.chartData)
this.el.chart = new Chart(el, {
type: 'line',
data: {
datasets: [{
label: el.dataset.label,
data: data.map(({ date, count, labels }) => ({
labels,
x: date,
y: count
})),
backgroundColor: el.dataset.color,
borderColor: el.dataset.color,
fill: true,
borderWidth: 4
}]
},
options: {
elements: {
point: {
radius: 7,
hoverRadius: 10
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
padding: 20
}
},
tooltip: {
displayColors: false,
callbacks: {
label: ({ raw: { labels } }) => labels
}
}
},
scales: {
y: {
beginAtZero: true,
stacked: true,
grace: '15%',
ticks: {
padding: 15
}
},
x: {
type: 'time',
time: {
unit: 'day'
}
}
},
transitions: {
show: {
animations: {
x: {
from: 0
}
}
},
hide: {
animations: {
x: {
to: 0
}
}
}
}
}
})
},
mounted () { this.initalizeChart(this.el) },
updated () { this.initalizeChart(this.el) }
}

View File

@ -8,6 +8,9 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"alpinejs": "^3.10.2", "alpinejs": "^3.10.2",
"chart.js": "^3.9.1",
"chartjs-adapter-date-fns": "^2.0.0",
"date-fns": "^2.29.3",
"phoenix": "file:../deps/phoenix", "phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html", "phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view", "phoenix_live_view": "file:../deps/phoenix_live_view",
@ -3166,6 +3169,19 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/chart.js": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
"integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
},
"node_modules/chartjs-adapter-date-fns": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz",
"integrity": "sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==",
"peerDependencies": {
"chart.js": "^3.0.0"
}
},
"node_modules/chokidar": { "node_modules/chokidar": {
"version": "3.5.3", "version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -3850,6 +3866,18 @@
"node": ">=8.0.0" "node": ">=8.0.0"
} }
}, },
"node_modules/date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -12537,6 +12565,17 @@
"supports-color": "^5.3.0" "supports-color": "^5.3.0"
} }
}, },
"chart.js": {
"version": "3.9.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
"integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
},
"chartjs-adapter-date-fns": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz",
"integrity": "sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==",
"requires": {}
},
"chokidar": { "chokidar": {
"version": "3.5.3", "version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@ -13025,6 +13064,11 @@
"css-tree": "^1.1.2" "css-tree": "^1.1.2"
} }
}, },
"date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
},
"debug": { "debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

View File

@ -15,6 +15,9 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"alpinejs": "^3.10.2", "alpinejs": "^3.10.2",
"chart.js": "^3.9.1",
"chartjs-adapter-date-fns": "^2.0.0",
"date-fns": "^2.29.3",
"phoenix": "file:../deps/phoenix", "phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html", "phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view", "phoenix_live_view": "file:../deps/phoenix_live_view",

View File

@ -58,7 +58,7 @@ defmodule Cannery.ActivityLog.ShotGroup do
|> cast(attrs, [:count, :notes, :date]) |> cast(attrs, [:count, :notes, :date])
|> validate_number(:count, greater_than: 0) |> validate_number(:count, greater_than: 0)
|> validate_create_shot_group_count(ammo_group) |> validate_create_shot_group_count(ammo_group)
|> validate_required([:count, :ammo_group_id, :user_id]) |> validate_required([:count, :date, :ammo_group_id, :user_id])
end end
def create_changeset(shot_group, _invalid_user, _invalid_ammo_group, attrs) do def create_changeset(shot_group, _invalid_user, _invalid_ammo_group, attrs) do
@ -90,7 +90,7 @@ defmodule Cannery.ActivityLog.ShotGroup do
shot_group shot_group
|> cast(attrs, [:count, :notes, :date]) |> cast(attrs, [:count, :notes, :date])
|> validate_number(:count, greater_than: 0) |> validate_number(:count, greater_than: 0)
|> validate_required([:count]) |> validate_required([:count, :date])
|> validate_update_shot_group_count(shot_group, user) |> validate_update_shot_group_count(shot_group, user)
end end

View File

@ -120,18 +120,4 @@ defmodule Cannery.Tags do
""" """
@spec delete_tag!(Tag.t(), User.t()) :: Tag.t() @spec delete_tag!(Tag.t(), User.t()) :: Tag.t()
def delete_tag!(%Tag{user_id: user_id} = tag, %User{id: user_id}), do: tag |> Repo.delete!() def delete_tag!(%Tag{user_id: user_id} = tag, %User{id: user_id}), do: tag |> Repo.delete!()
@doc """
Get a random tag bg_color in `#ffffff` hex format
## Examples
iex> random_color()
"#cc0066"
"""
@spec random_bg_color() :: <<_::7>>
def random_bg_color do
["#cc0066", "#ff6699", "#6666ff", "#0066cc", "#00cc66", "#669900", "#ff9900", "#996633"]
|> Enum.random()
end
end end

View File

@ -88,17 +88,67 @@ defmodule CanneryWeb.RangeLive.Index do
shot_groups shot_groups
|> Enum.map(fn shot_group -> shot_group |> get_row_data_for_shot_group(columns) end) |> 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 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 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 defp get_row_data_for_shot_group(%{date: date} = shot_group, columns) do
shot_group = shot_group |> Repo.preload(ammo_group: :ammo_type) shot_group = shot_group |> Repo.preload(ammo_group: :ammo_type)
assigns = %{shot_group: shot_group} assigns = %{shot_group: shot_group}
columns columns
|> Enum.into(%{}, fn %{key: key} -> |> Map.new(fn %{key: key} ->
value = value =
case key do case key do
:name -> :name ->

View File

@ -53,11 +53,27 @@
<%= gettext("Shot log") %> <%= gettext("Shot log") %>
</h1> </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 <.live_component
module={CanneryWeb.Components.TableComponent} module={CanneryWeb.Components.TableComponent}
id="shot_groups_index_table" id="shot_groups_index_table"
columns={@columns} columns={@columns}
rows={@rows} rows={@rows}
initial_key={:date}
initial_sort_mode={:desc}
/> />
<% end %> <% end %>
</div> </div>

View File

@ -6,7 +6,7 @@ defmodule CanneryWeb.TagLive.Index do
use CanneryWeb, :live_view use CanneryWeb, :live_view
import CanneryWeb.Components.TagCard import CanneryWeb.Components.TagCard
alias Cannery.{Tags, Tags.Tag} alias Cannery.{Tags, Tags.Tag}
alias CanneryWeb.Endpoint alias CanneryWeb.{Endpoint, ViewHelpers}
@impl true @impl true
def mount(_params, _session, socket), do: {:ok, socket |> display_tags()} 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 defp apply_action(socket, :new, _params) do
socket socket
|> assign(:page_title, gettext("New Tag")) |> 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 end
defp apply_action(socket, :index, _params) do defp apply_action(socket, :index, _params) do

View File

@ -115,4 +115,18 @@ defmodule CanneryWeb.ViewHelpers do
</label> </label>
""" """
end 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 end