mirror of
https://github.com/we-promise/sure.git
synced 2026-04-19 12:04:08 +00:00
0c6d208ef2
* feat: implement expandable view for cashflow sankey chart * refactor: migrate cashflow dialog sizing to tailwind utilities * refactor: declarative draggable restore on cashflow dialog close * refactor: localized title and use Tailwind utilities * refactor: update dialog interaction especially on mobile * refactor: add global expand text to localization * fix: restore draggable immediately after dialog close * Whitespace noise --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>
54 lines
2.4 KiB
Plaintext
54 lines
2.4 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>
|
|
|
|
<%= render DS::Dialog.new(id: "cashflow-expanded-dialog", auto_open: false, width: "custom", disable_frame: true, content_class: "!w-[96vw] max-w-[1650px]", data: { action: "close->cashflow-expand#restore" }) do |dialog| %>
|
|
<% dialog.with_header(title: t("pages.dashboard.cashflow_sankey.title"), hide_close_icon: false) %>
|
|
<% dialog.with_body do %>
|
|
<div class="w-full h-[85dvh] max-h-[90dvh] overflow-y-auto overscroll-contain">
|
|
<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>
|
|
<% end %>
|
|
<% end %>
|
|
<% 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>
|