Files
sure/app/views/pages/dashboard/_cashflow_sankey.html.erb
soky srm db8353e895 Initial implementation of collapsible sections and re-order feature (#355)
* Initial implementation

* Add support for reports section too

* UI Improvement

now it looks a lot nicer :)

* Remove duplicate section titles

* FIX malformed DIV

* Add accessibility and touch support

WCAG 2.1 Level AA Compliant
  - Keyboard operable (Success Criterion 2.1.1)
  - Focus visible (Success Criterion 2.4.7)
  - Name, Role, Value (Success Criterion 4.1.2)

 Screen Reader Support
  - Clear instructions in aria-label
  - Proper semantic roles
  - State changes announced via aria-grabbed

* Add proper UI for tab highlight

* Add keyboard support to collapse also

* FIX js errors

* Fix rabbit

* FIX we don't need the html

* FIX CSRF and error handling

* Simplify into one single DB migration

---------

Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
2025-11-26 17:51:38 +01:00

41 lines
1.7 KiB
Plaintext

<%# locals: (sankey_data:, period:) %>
<div id="cashflow-sankey-chart">
<div class="flex justify-end items-center gap-4 px-4 mb-4">
<%= form_with url: root_path, method: :get, data: { controller: "auto-submit-form", turbo_frame: "_top" } do |form| %>
<%= form.select :period,
Period.as_options,
{ selected: period.key },
data: { "auto-submit-form-target": "auto" },
class: "bg-container border border-secondary font-medium rounded-lg px-3 py-2 text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0" %>
<% end %>
</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 DS::FilledIcon.new(
variant: :container,
icon: "activity" # cashflow placeholder icon
) %>
<p class="text-sm font-medium text-primary"><%= t("pages.dashboard.cashflow_sankey.no_data_title") %></p>
<p class="text-secondary text-sm"><%= t("pages.dashboard.cashflow_sankey.no_data_description") %></p>
<%= render DS::Link.new(
text: t("pages.dashboard.cashflow_sankey.add_transaction"),
icon: "plus",
href: new_transaction_path,
frame: :modal
) %>
</div>
</div>
<% end %>
</div>