local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 60 Pull requests 4 Projects 2 Releases Packages 1 Activity Actions

Add StatisticsLive: overview, bars by year, pie chart

Browse source 
- Summary cards: active/inactive members, open amount
- Joins and exits by year (horizontal bars)
- Contributions by year: table with stacked bar above amounts
- Column order: Paid, Unpaid, Suspended, Total; color dots for legend
- All years combined pie chart
- LiveView tests
This commit is contained in:
Moritz 2026-02-10 22:31:40 +01:00 • committed by moritz
parent 919a8e4ebd
commit 6e309622a0
2 changed files with 530 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

498
lib/mv_web/live/statistics_live.ex Normal file
View file

@ -0,0 +1,498 @@
defmodule MvWeb.StatisticsLive do
@moduledoc """
LiveView for the statistics page at /statistics.
Displays aggregated member and membership fee cycle statistics.
"""
use MvWeb, :live_view
import MvWeb.LiveHelpers, only: [current_actor: 1]
alias Mv.Statistics
alias MvWeb.Helpers.MembershipFeeHelpers
@impl true
def mount(_params, _session, socket) do
socket =
socket
|> load_statistics()
|> assign(:page_title, gettext("Statistics"))
{:ok, socket}
end
@impl true
def handle_params(_params, _uri, socket) do
{:noreply, load_statistics(socket)}
end
@impl true
def render(assigns) do
~H"""
<Layouts.app flash={@flash} current_user={@current_user}>
<.header>
{gettext("Statistics")}
<:subtitle>{gettext("Overview from first membership to today")}</:subtitle>
</.header>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
<div class="card bg-base-200 shadow-md border border-base-300">
<div class="card-body p-5">
<h2 class="card-title text-sm font-medium text-base-content/80">
{gettext("Active members")}
</h2>
<p
class="text-3xl font-bold tabular-nums"
aria-label={gettext("Active members") <> ": " <> to_string(@active_count)}
>
{@active_count}
</p>
</div>
</div>
<div class="card bg-base-200 shadow-md border border-base-300">
<div class="card-body p-5">
<h2 class="card-title text-sm font-medium text-base-content/80">
{gettext("Inactive members")}
</h2>
<p
class="text-3xl font-bold tabular-nums"
aria-label={gettext("Inactive members") <> ": " <> to_string(@inactive_count)}
>
{@inactive_count}
</p>
</div>
</div>
<div class="card bg-base-200 shadow-md border border-base-300">
<div class="card-body p-5">
<h2 class="card-title text-sm font-medium text-base-content/80">
{gettext("Open amount")}
</h2>
<p
class="text-3xl font-bold tabular-nums"
aria-label={gettext("Open amount") <> ": " <> MembershipFeeHelpers.format_currency(@open_amount_total)}
>
{MembershipFeeHelpers.format_currency(@open_amount_total)}
</p>
</div>
</div>
</div>
<section
class="card bg-base-200 shadow-md border border-base-300 mb-8"
aria-labelledby="joins-exits-heading"
>
<div class="card-body">
<h2 id="joins-exits-heading" class="card-title text-lg mb-4">
{gettext("Joins and exits by year")}
</h2>
<p class="text-sm text-base-content/70 mb-4">
{gettext("From %{first} to %{last} (relevant years with membership data)",
first: @years |> List.last() |> to_string(),
last: @years |> List.first() |> to_string()
)}
</p>
<.joins_exits_bars joins_exits_by_year={@joins_exits_by_year} />
</div>
</section>
<section
class="card bg-base-200 shadow-md border border-base-300 mb-8"
aria-labelledby="contributions-heading"
>
<div class="card-body">
<h2 id="contributions-heading" class="card-title text-lg mb-4">
{gettext("Contributions by year")}
</h2>
<div class="flex flex-col gap-8 items-start">
<div class="w-full">
<.contributions_bars_by_year
contributions_by_year={@contributions_by_year}
totals_over_all_years={@totals_over_all_years}
/>
</div>
<div class="w-full flex flex-col items-center pt-6 mt-2 border-t border-base-300">
<h3 class="text-sm font-semibold mb-3">{gettext("All years combined (pie)")}</h3>
<.contributions_pie cycle_totals={@totals_over_all_years} />
<p class="text-xs text-base-content/70 mt-2">
<span class="inline-block w-2 h-2 rounded-full bg-success align-middle mr-1"></span>
{gettext("Paid")}
<span class="inline-block w-2 h-2 rounded-full bg-warning align-middle mx-2 mr-1">
</span>
{gettext("Unpaid")}
<span class="inline-block w-2 h-2 rounded-full bg-base-content/20 align-middle mx-2 mr-1">
</span>
{gettext("Suspended")}
</p>
</div>
</div>
</div>
</section>
</Layouts.app>
"""
end
attr :joins_exits_by_year, :list, required: true
defp joins_exits_bars(assigns) do
join_values = Enum.map(assigns.joins_exits_by_year, & &1.joins)
exit_values = Enum.map(assigns.joins_exits_by_year, & &1.exits)
max_joins = max((join_values != [] && Enum.max(join_values)) || 0, 1)
max_exits = max((exit_values != [] && Enum.max(exit_values)) || 0, 1)
assigns = assign(assigns, :max_joins, max_joins)
assigns = assign(assigns, :max_exits, max_exits)
~H"""
<div
class="space-y-4"
role="img"
aria-label={gettext("Joins and exits by year as horizontal bar chart")}
>
<div class="flex gap-4 text-sm mb-2">
<span class="flex items-center gap-2">
<span class="inline-block w-4 h-3 rounded bg-success" aria-hidden="true"></span>
{gettext("Joins")}
</span>
<span class="flex items-center gap-2">
<span class="inline-block w-4 h-3 rounded bg-error" aria-hidden="true"></span>
{gettext("Exits")}
</span>
</div>
<div class="space-y-3">
<%= for item <- @joins_exits_by_year do %>
<div class="flex flex-col sm:flex-row sm:items-center gap-2">
<span class="w-12 font-mono text-sm shrink-0" id={"year-#{item.year}"}>{item.year}</span>
<div class="flex-1 min-w-0 space-y-1">
<div class="flex items-center gap-2">
<span class="text-xs w-8 shrink-0">{item.joins}</span>
<div
class="h-6 bg-base-300 rounded overflow-hidden flex min-w-[4rem]"
role="presentation"
>
<div
class="h-full bg-success transition-all min-w-[2px]"
style={"width: #{max(0, min(100, Float.round(item.joins / @max_joins * 100, 1)))}%"}
aria-hidden="true"
>
</div>
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-xs w-8 shrink-0">{item.exits}</span>
<div
class="h-6 bg-base-300 rounded overflow-hidden flex min-w-[4rem]"
role="presentation"
>
<div
class="h-full bg-error transition-all min-w-[2px]"
style={"width: #{max(0, min(100, Float.round(item.exits / @max_exits * 100, 1)))}%"}
aria-hidden="true"
>
</div>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
"""
end
attr :contributions_by_year, :list, required: true
attr :totals_over_all_years, :map, required: true
defp contributions_bars_by_year(assigns) do
rows = assigns.contributions_by_year
totals = assigns.totals_over_all_years
all_rows_with_decimals =
Enum.map(rows, fn row ->
%{
year: row.year,
summary: false,
total: row.total,
paid: row.paid,
unpaid: row.unpaid,
suspended: row.suspended
}
end) ++
[
%{
year: nil,
summary: true,
total: totals.total,
paid: totals.paid,
unpaid: totals.unpaid,
suspended: totals.suspended
}
]
max_total = max_decimal(all_rows_with_decimals, :total)
rows_with_pct =
Enum.map(all_rows_with_decimals, fn row ->
bar_pct = bar_pct(row.total, max_total)
sum_positive =
Decimal.add(Decimal.add(row.paid, row.unpaid), row.suspended)
seg_scale =
if Decimal.compare(sum_positive, 0) == :gt, do: sum_positive, else: Decimal.new(1)
paid_pct =
row.paid |> Decimal.div(seg_scale) |> Decimal.mult(100) |> Decimal.to_float()
unpaid_pct =
row.unpaid |> Decimal.div(seg_scale) |> Decimal.mult(100) |> Decimal.to_float()
suspended_pct =
row.suspended |> Decimal.div(seg_scale) |> Decimal.mult(100) |> Decimal.to_float()
%{
year: row.year,
summary: row.summary,
total_formatted: MembershipFeeHelpers.format_currency(row.total),
paid_formatted: MembershipFeeHelpers.format_currency(row.paid),
unpaid_formatted: MembershipFeeHelpers.format_currency(row.unpaid),
suspended_formatted: MembershipFeeHelpers.format_currency(row.suspended),
bar_pct: bar_pct,
paid_pct: paid_pct,
unpaid_pct: unpaid_pct,
suspended_pct: suspended_pct
}
end)
assigns = assign(assigns, :rows, rows_with_pct)
~H"""
<div
class="overflow-x-auto"
role="img"
aria-label={gettext("Contributions by year as table with stacked bars")}
>
<table class="table table-sm w-full">
<thead class="bg-base-300">
<tr>
<th scope="col" class="text-base-content font-semibold w-20">{gettext("Year")}</th>
<th scope="col" class="text-base-content font-semibold">{gettext("Paid")}</th>
<th scope="col" class="text-base-content font-semibold">{gettext("Unpaid")}</th>
<th scope="col" class="text-base-content font-semibold">{gettext("Suspended")}</th>
<th scope="col" class="text-base-content font-semibold">{gettext("Total")}</th>
</tr>
</thead>
<tbody>
<%= for row <- @rows do %>
<tr class={row.summary && "border-t-2 border-base-300 bg-base-300/30"}>
<td
rowspan="2"
class={"font-mono align-middle border-b-0 #{if row.summary, do: "font-semibold", else: ""}"}
>
<%= if row.summary do %>
{gettext("Total")}
<% else %>
{row.year}
<% end %>
</td>
<td colspan="4" class="align-top p-1 pb-0 border-b-0">
<div class="h-6 rounded overflow-hidden bg-base-300 relative min-w-[4rem]">
<div
class="flex h-full absolute left-0 top-0 bottom-0 min-w-0 rounded"
style={"width: #{max(0, Float.round(row.bar_pct, 1))}%"}
>
<div
class="h-full bg-success min-w-0 rounded-l"
style={"width: #{Float.round(row.paid_pct, 1)}%"}
title={gettext("Paid")}
>
</div>
<div
class="h-full bg-warning min-w-0"
style={"width: #{Float.round(row.unpaid_pct, 1)}%"}
title={gettext("Unpaid")}
>
</div>
<div
class="h-full bg-base-content/20 min-w-0 rounded-r"
style={"width: #{Float.round(row.suspended_pct, 1)}%"}
title={gettext("Suspended")}
>
</div>
</div>
</div>
</td>
</tr>
<tr class={row.summary && "bg-base-300/30"}>
<td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
<span class="inline-flex items-center gap-1.5">
{row.paid_formatted}
<span
class="inline-block w-2 h-2 rounded-full bg-success shrink-0"
aria-hidden="true"
title={gettext("Paid")}
>
</span>
</span>
</td>
<td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
<span class="inline-flex items-center gap-1.5">
{row.unpaid_formatted}
<span
class="inline-block w-2 h-2 rounded-full bg-warning shrink-0"
aria-hidden="true"
title={gettext("Unpaid")}
>
</span>
</span>
</td>
<td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
<span class="inline-flex items-center gap-1.5">
{row.suspended_formatted}
<span
class="inline-block w-2 h-2 rounded-full bg-base-content/20 shrink-0"
aria-hidden="true"
title={gettext("Suspended")}
>
</span>
</span>
</td>
<td class="align-middle text-xs font-mono text-base-content whitespace-nowrap pt-0">
{row.total_formatted}
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
"""
end
defp max_decimal(rows, key) do
Enum.reduce(rows, Decimal.new(0), fn row, acc ->
val = Map.get(row, key)
if Decimal.compare(val, acc) == :gt, do: val, else: acc
end)
end
defp bar_pct(value, max) do
scale = if Decimal.compare(max, 0) == :gt, do: max, else: Decimal.new(1)
value |> Decimal.div(scale) |> Decimal.mult(100) |> Decimal.to_float()
end
attr :cycle_totals, :map, required: true
defp contributions_pie(assigns) do
paid = assigns.cycle_totals.paid
unpaid = assigns.cycle_totals.unpaid
suspended = assigns.cycle_totals.suspended
sum_positive = Decimal.add(Decimal.add(paid, unpaid), suspended)
scale = if Decimal.compare(sum_positive, 0) == :gt, do: sum_positive, else: Decimal.new(1)
paid_pct = Decimal.div(paid, scale) |> Decimal.mult(100) |> Decimal.to_float()
unpaid_pct = Decimal.div(unpaid, scale) |> Decimal.mult(100) |> Decimal.to_float()
suspended_pct = Decimal.div(suspended, scale) |> Decimal.mult(100) |> Decimal.to_float()
# Conic gradient: 0deg = top, clockwise. Success (paid), warning (unpaid), base-300 (suspended)
# Use theme CSS variables (--color-*) so the pie renders in all themes
paid_deg = paid_pct * 3.6
unpaid_deg = unpaid_pct * 3.6
gradient_stops =
"var(--color-success) 0deg, var(--color-success) #{paid_deg}deg, var(--color-warning) #{paid_deg}deg, var(--color-warning) #{paid_deg + unpaid_deg}deg, var(--color-base-300) #{paid_deg + unpaid_deg}deg, var(--color-base-300) 360deg"
assigns =
assigns
|> assign(:paid_pct, paid_pct)
|> assign(:unpaid_pct, unpaid_pct)
|> assign(:suspended_pct, suspended_pct)
|> assign(:gradient_stops, gradient_stops)
~H"""
<div
class="w-40 h-40 min-h-[10rem] rounded-full shrink-0 border-2 border-base-300 bg-base-300"
style={"background: conic-gradient(#{@gradient_stops});"}
role="img"
aria-label={
gettext(
"Contributions pie: paid %{paid}%%, unpaid %{unpaid}%%, suspended %{suspended}%%",
paid: Float.round(@paid_pct, 1),
unpaid: Float.round(@unpaid_pct, 1),
suspended: Float.round(@suspended_pct, 1)
)
}
title={"#{gettext("Paid")}: #{Float.round(@paid_pct, 1)}%, #{gettext("Unpaid")}: #{Float.round(@unpaid_pct, 1)}%, #{gettext("Suspended")}: #{Float.round(@suspended_pct, 1)}%"}
>
</div>
"""
end
defp load_statistics(socket) do
actor = current_actor(socket)
opts = [actor: actor]
current_year = Date.utc_today().year
first_year = Statistics.first_join_year(opts) || current_year
years = first_year..current_year |> Enum.to_list() |> Enum.reverse()
active_count = Statistics.active_member_count(opts)
inactive_count = Statistics.inactive_member_count(opts)
open_amount_total = Statistics.open_amount_total(opts)
joins_exits_by_year = build_joins_exits_by_year(years, opts)
contributions_by_year = build_contributions_by_year(years, opts)
totals_over_all_years = sum_cycle_totals(contributions_by_year)
assign(socket,
years: years,
active_count: active_count,
inactive_count: inactive_count,
open_amount_total: open_amount_total,
joins_exits_by_year: joins_exits_by_year,
contributions_by_year: contributions_by_year,
totals_over_all_years: totals_over_all_years
)
end
defp build_joins_exits_by_year(years, opts) do
Enum.map(years, fn y ->
%{
year: y,
joins: Statistics.joins_by_year(y, opts),
exits: Statistics.exits_by_year(y, opts)
}
end)
end
defp build_contributions_by_year(years, opts) do
Enum.map(years, fn y ->
totals = Statistics.cycle_totals_by_year(y, opts)
%{
year: y,
total: totals.total,
paid: totals.paid,
unpaid: totals.unpaid,
suspended: totals.suspended
}
end)
end
defp sum_cycle_totals(contributions_by_year) do
Enum.reduce(
contributions_by_year,
%{
total: Decimal.new(0),
paid: Decimal.new(0),
unpaid: Decimal.new(0),
suspended: Decimal.new(0)
},
fn row, acc ->
%{
total: Decimal.add(acc.total, row.total),
paid: Decimal.add(acc.paid, row.paid),
unpaid: Decimal.add(acc.unpaid, row.unpaid),
suspended: Decimal.add(acc.suspended, row.suspended)
}
end
)
end
end