Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-24 23:59:40 +02:00
Code Issues Releases Activity Actions 1

Enhance cash flow dashboard to handle empty data scenarios. Update Sankey diagram rendering to conditionally display a placeholder message when no cash flow data is available, improving user experience and clarity.

Browse source
This commit is contained in:
Josh Pigford 2025-05-21 05:34:42 -05:00
parent cc9a75ee28
commit 3d2213b760
2 changed files with 47 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/controllers/pages_controller.rb
View file

@ -68,33 +68,34 @@ class PagesController < ApplicationController
# --- Create Central Cash Flow Node ---
cash_flow_idx = add_node.call("cash_flow_node", "Cash Flow", total_income_val, 0, "var(--color-success)")
# --- Process Income Side ---
income_category_values = Hash.new(0.0)
# --- Process Income Side (Top-level categories only) ---
income_totals.category_totals.each do |ct|
val = ct.total.to_f.round(2)
next if val.zero? || !ct.category.parent_id
income_category_values[ct.category.parent_id] += val
end
# Skip subcategories – only include root income categories
next if ct.category.parent_id.present?
income_totals.category_totals.each do |ct|
val = ct.total.to_f.round(2)
percentage_of_total_income = total_income_val.zero? ? 0 : (val / total_income_val * 100).round(1)
next if val.zero?
percentage_of_total_income = total_income_val.zero? ? 0 : (val / total_income_val * 100).round(1)
node_display_name = ct.category.name
node_value_for_label = val + income_category_values[ct.category.id] # This sum is for parent node display
node_percentage_for_label = total_income_val.zero? ? 0 : (node_value_for_label / total_income_val * 100).round(1)
node_color = ct.category.color.presence || Category::COLORS.sample
current_cat_idx = add_node.call("income_#{ct.category.id}", node_display_name, node_value_for_label, node_percentage_for_label, node_color)
if ct.category.parent_id
parent_cat_idx = node_indices["income_#{ct.category.parent_id}"]
parent_cat_idx ||= add_node.call("income_#{ct.category.parent.id}", ct.category.parent.name, income_category_values[ct.category.parent.id], 0, ct.category.parent.color || Category::COLORS.sample) # Parent percentage will be recalc based on its total flow
links << { source: current_cat_idx, target: parent_cat_idx, value: val, color: node_color, percentage: percentage_of_total_income }
else
links << { source: current_cat_idx, target: cash_flow_idx, value: val, color: node_color, percentage: percentage_of_total_income }
end
current_cat_idx = add_node.call(
"income_#{ct.category.id}",
node_display_name,
val,
percentage_of_total_income,
node_color
)
links << {
source: current_cat_idx,
target: cash_flow_idx,
value: val,
color: node_color,
percentage: percentage_of_total_income
}
end
# --- Process Expense Side (Top-level categories only) ---

34
app/views/pages/dashboard/_cashflow_sankey.html.erb
View file

@ -14,11 +14,31 @@
<% end %>
</div>
<div class="w-full h-96">
<div
data-controller="sankey-chart"
data-sankey-chart-data-value="<%= sankey_data.to_json %>"
data-sankey-chart-currency-symbol-value="<%= sankey_data[:currency_symbol] %>"
class="w-full h-full"></div>
</div>
<% if sankey_data[:links].present? %>
<div class="w-full h-96">
<div
data-controller="sankey-chart"
data-sankey-chart-data-value="<%= sankey_data.to_json %>"
data-sankey-chart-currency-symbol-value="<%= sankey_data[:currency_symbol] %>"
class="w-full h-full"></div>
</div>
<% else %>
<div class="h-[300px] lg:h-[340px] bg-container py-4 flex flex-col items-center justify-center">
<div class="space-y-3 text-center flex flex-col items-center">
<%= render FilledIconComponent.new(
variant: :container,
icon: "activity" # cashflow placeholder icon
) %>
<p class="text-sm font-medium text-primary">No cash flow data for this time period</p>
<p class="text-secondary text-sm">Add transactions to display cash flow data or expand the time period</p>
<%= render LinkComponent.new(
text: "Add transaction",
icon: "plus",
href: new_transaction_path,
frame: :modal
) %>
</div>
</div>
<% end %>
</div>