Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-03 04:25:21 +02:00
Code Issues Releases Activity Actions

Implement savings rate insight card (#670)

Browse source
This commit is contained in:
Josh Brown 2024-04-24 15:02:22 +01:00 • committed by GitHub
parent 461fa672ff
commit b3f8ab78d9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 89 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

46
app/views/pages/dashboard.html.erb
View file

@ -101,22 +101,38 @@
</div>
</div>
<div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">
<div class="flex gap-4 h-full">
<div class="grow">
<%= render partial: "shared/value_heading", locals: {
label: t(".savings_rate"),
period: @period,
value: @savings_rate_series.last.value,
trend: @savings_rate_series.trend,
is_percentage: true
} %>
<div class="flex flex-col gap-4 h-full">
<div class="flex gap-4">
<div class="grow">
<%= render partial: "shared/value_heading", locals: {
label: t(".savings_rate"),
period: Period.last_30_days,
value: @savings_rate_series.last&.value,
trend: @savings_rate_series.trend,
is_percentage: true
} %>
</div>
<div
id="savingsRateChart"
class="h-full w-2/5"
data-controller="time-series-chart"
data-time-series-chart-data-value="<%= @savings_rate_series.to_json %>"
data-time-series-chart-use-labels-value="false"
data-time-series-chart-use-tooltip-value="false"></div>
</div>
<div class="flex gap-1.5">
<% @top_savers.first(3).each do |account| %>
<%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
<div class="flex items-center justify-center text-xs w-5 h-5 rounded-full <%= accountable_text_class(account.accountable_type) %> <%= accountable_bg_transparent_class(account.accountable_type) %>">
<%= account.name[0].upcase %>
</div>
<span><%= account.savings_rate > 0 ? "+" : "-" %><%= number_to_percentage(account.savings_rate.abs * 100, precision: 2) %></span>
<% end %>
<% end %>
<% if @top_savers.count > 3 %>
<div class="bg-gray-25 rounded-full flex h-full aspect-1 items-center justify-center text-xs font-medium text-gray-500">+<%= @top_savers.count - 3 %></div>
<% end %>
</div>
<div
id="savingsRateChart"
class="h-full w-2/5"
data-controller="time-series-chart"
data-time-series-chart-data-value="<%= @savings_rate_series.to_json %>"
data-time-series-chart-use-labels-value="false"></div>
</div>
</div>
<div class="bg-white p-4 border border-alpha-black-25 shadow-xs rounded-xl">