1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-04 21:15:19 +02:00
Maybe/app/views/shared/_progress_circle.html.erb
Zach Gollwitzer d75be2282b
New Design System + Codebase Refresh (#1823)
Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.

Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:

- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones
2025-02-21 11:57:59 -05:00

30 lines
938 B
Text

<%# locals: (progress:, radius: 7, stroke: 2, color: nil) %>
<%
circumference = Math::PI * 2 * radius
progress_percent = progress.clamp(0, 100)
stroke_dashoffset = ((100 - progress_percent) * circumference) / 100
center = radius + stroke / 2
%>
<svg width="<%= radius * 2 + stroke %>" height="<%= radius * 2 + stroke %>">
<!-- Background Circle -->
<circle
class="fill-transparent stroke-current text-gray-300"
r="<%= radius %>"
cx="<%= center %>"
cy="<%= center %>"
stroke-width="<%= stroke %>"></circle>
<!-- Foreground Circle -->
<circle
class="fill-transparent"
style="stroke: <%= color || "var(--color-blue-500)" %>"
r="<%= radius %>"
cx="<%= center %>"
cy="<%= center %>"
stroke-width="<%= stroke %>"
stroke-dasharray="<%= circumference %>"
stroke-dashoffset="<%= stroke_dashoffset %>"
transform="rotate(-90, <%= center %>, <%= center %>)"></circle>
</svg>