mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-19 13:19:39 +02:00
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
This commit is contained in:
Zach Gollwitzer
GitHub
parent
8539ac7dec
commit
d75be2282b
278 changed files with 3428 additions and 4354 deletions
|
|
@ -7,7 +7,6 @@ export default class extends Controller {
|
|||
strokeWidth: { type: Number, default: 2 },
|
||||
useLabels: { type: Boolean, default: true },
|
||||
useTooltip: { type: Boolean, default: true },
|
||||
usePercentSign: Boolean,
|
||||
};
|
||||
|
||||
_d3SvgMemo = null;
|
||||
|
|
@ -16,15 +15,18 @@ export default class extends Controller {
|
|||
_d3InitialContainerWidth = 0;
|
||||
_d3InitialContainerHeight = 0;
|
||||
_normalDataPoints = [];
|
||||
_resizeObserver = null;
|
||||
|
||||
connect() {
|
||||
this._install();
|
||||
document.addEventListener("turbo:load", this._reinstall);
|
||||
this._setupResizeObserver();
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
this._teardown();
|
||||
document.removeEventListener("turbo:load", this._reinstall);
|
||||
this._resizeObserver?.disconnect();
|
||||
}
|
||||
|
||||
_reinstall = () => {
|
||||
|
|
@ -49,10 +51,9 @@ export default class extends Controller {
|
|||
|
||||
_normalizeDataPoints() {
|
||||
this._normalDataPoints = (this.dataValue.values || []).map((d) => ({
|
||||
...d,
|
||||
date: new Date(`${d.date}T00:00:00Z`),
|
||||
value: d.value.amount ? +d.value.amount : +d.value,
|
||||
currency: d.value.currency,
|
||||
date_formatted: d.date_formatted,
|
||||
trend: d.trend,
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
@ -138,13 +139,13 @@ export default class extends Controller {
|
|||
.append("stop")
|
||||
.attr("class", "start-color")
|
||||
.attr("offset", "0%")
|
||||
.attr("stop-color", this._trendColor);
|
||||
.attr("stop-color", this.dataValue.trend.color);
|
||||
|
||||
gradient
|
||||
.append("stop")
|
||||
.attr("class", "middle-color")
|
||||
.attr("offset", "100%")
|
||||
.attr("stop-color", this._trendColor);
|
||||
.attr("stop-color", this.dataValue.trend.color);
|
||||
|
||||
gradient
|
||||
.append("stop")
|
||||
|
|
@ -182,7 +183,7 @@ export default class extends Controller {
|
|||
this._normalDataPoints[this._normalDataPoints.length - 1].date,
|
||||
])
|
||||
.tickSize(0)
|
||||
.tickFormat(d3.utcFormat("%d %b %Y")),
|
||||
.tickFormat(d3.utcFormat("%b %d, %Y")),
|
||||
)
|
||||
.select(".domain")
|
||||
.remove();
|
||||
|
|
@ -212,7 +213,7 @@ export default class extends Controller {
|
|||
.attr("x2", 0)
|
||||
.attr(
|
||||
"y1",
|
||||
this._d3YScale(d3.max(this._normalDataPoints, (d) => d.value)),
|
||||
this._d3YScale(d3.max(this._normalDataPoints, this._getDatumValue)),
|
||||
)
|
||||
.attr("y2", this._d3ContainerHeight);
|
||||
|
||||
|
|
@ -240,7 +241,7 @@ export default class extends Controller {
|
|||
.area()
|
||||
.x((d) => this._d3XScale(d.date))
|
||||
.y0(this._d3ContainerHeight)
|
||||
.y1((d) => this._d3YScale(d.value)),
|
||||
.y1((d) => this._d3YScale(this._getDatumValue(d))),
|
||||
);
|
||||
|
||||
// Apply the gradient + clip path
|
||||
|
|
@ -320,7 +321,7 @@ export default class extends Controller {
|
|||
.append("circle")
|
||||
.attr("class", "data-point-circle")
|
||||
.attr("cx", this._d3XScale(d.date))
|
||||
.attr("cy", this._d3YScale(d.value))
|
||||
.attr("cy", this._d3YScale(this._getDatumValue(d)))
|
||||
.attr("r", 8)
|
||||
.attr("fill", this._trendColor)
|
||||
.attr("fill-opacity", "0.1")
|
||||
|
|
@ -331,7 +332,7 @@ export default class extends Controller {
|
|||
.append("circle")
|
||||
.attr("class", "data-point-circle")
|
||||
.attr("cx", this._d3XScale(d.date))
|
||||
.attr("cy", this._d3YScale(d.value))
|
||||
.attr("cy", this._d3YScale(this._getDatumValue(d)))
|
||||
.attr("r", 3)
|
||||
.attr("fill", this._trendColor)
|
||||
.attr("pointer-events", "none");
|
||||
|
|
@ -361,7 +362,7 @@ export default class extends Controller {
|
|||
_tooltipTemplate(datum) {
|
||||
return `
|
||||
<div style="margin-bottom: 4px; color: var(--color-gray-500);">
|
||||
${d3.utcFormat("%b %d, %Y")(datum.date)}
|
||||
${datum.date_formatted}
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 16px;">
|
||||
|
|
@ -371,24 +372,20 @@ export default class extends Controller {
|
|||
cx="5"
|
||||
cy="5"
|
||||
r="4"
|
||||
stroke="${this._tooltipTrendColor(datum)}"
|
||||
stroke="${datum.trend.color}"
|
||||
fill="transparent"
|
||||
stroke-width="1"></circle>
|
||||
</svg>
|
||||
|
||||
${this._tooltipValue(datum)}${this.usePercentSignValue ? "%" : ""}
|
||||
${this._extractFormattedValue(datum.trend.current)}
|
||||
</div>
|
||||
|
||||
${
|
||||
this.usePercentSignValue ||
|
||||
datum.trend.value === 0 ||
|
||||
datum.trend.value.amount === 0
|
||||
? `
|
||||
<span style="width: 80px;"></span>
|
||||
`
|
||||
datum.trend.value === 0
|
||||
? `<span style="width: 80px;"></span>`
|
||||
: `
|
||||
<span style="color: ${this._tooltipTrendColor(datum)};">
|
||||
${this._tooltipChange(datum)} (${datum.trend.percent}%)
|
||||
<span style="color: ${datum.trend.color};">
|
||||
${this._extractFormattedValue(datum.trend.value)} (${datum.trend.percent_formatted})
|
||||
</span>
|
||||
`
|
||||
}
|
||||
|
|
@ -396,55 +393,23 @@ export default class extends Controller {
|
|||
`;
|
||||
}
|
||||
|
||||
_tooltipTrendColor(datum) {
|
||||
return {
|
||||
up:
|
||||
datum.trend.favorable_direction === "up"
|
||||
? "var(--color-success)"
|
||||
: "var(--color-destructive)",
|
||||
down:
|
||||
datum.trend.favorable_direction === "down"
|
||||
? "var(--color-success)"
|
||||
: "var(--color-destructive)",
|
||||
flat: "var(--color-gray-500)",
|
||||
}[datum.trend.direction];
|
||||
}
|
||||
_getDatumValue = (datum) => {
|
||||
return this._extractNumericValue(datum.trend.current);
|
||||
};
|
||||
|
||||
_tooltipValue(datum) {
|
||||
if (datum.currency) {
|
||||
return this._currencyValue(datum);
|
||||
_extractNumericValue = (numeric) => {
|
||||
if (typeof numeric === "object" && "amount" in numeric) {
|
||||
return Number(numeric.amount);
|
||||
}
|
||||
return datum.value;
|
||||
}
|
||||
return Number(numeric);
|
||||
};
|
||||
|
||||
_tooltipChange(datum) {
|
||||
if (datum.currency) {
|
||||
return this._currencyChange(datum);
|
||||
_extractFormattedValue = (numeric) => {
|
||||
if (typeof numeric === "object" && "formatted" in numeric) {
|
||||
return numeric.formatted;
|
||||
}
|
||||
return this._decimalChange(datum);
|
||||
}
|
||||
|
||||
_currencyValue(datum) {
|
||||
return Intl.NumberFormat(undefined, {
|
||||
style: "currency",
|
||||
currency: datum.currency,
|
||||
}).format(datum.value);
|
||||
}
|
||||
|
||||
_currencyChange(datum) {
|
||||
return Intl.NumberFormat(undefined, {
|
||||
style: "currency",
|
||||
currency: datum.currency,
|
||||
signDisplay: "always",
|
||||
}).format(datum.trend.value.amount);
|
||||
}
|
||||
|
||||
_decimalChange(datum) {
|
||||
return Intl.NumberFormat(undefined, {
|
||||
style: "decimal",
|
||||
signDisplay: "always",
|
||||
}).format(datum.trend.value);
|
||||
}
|
||||
return numeric;
|
||||
};
|
||||
|
||||
_createMainSvg() {
|
||||
return this._d3Container
|
||||
|
|
@ -503,28 +468,14 @@ export default class extends Controller {
|
|||
}
|
||||
|
||||
get _trendColor() {
|
||||
if (this._trendDirection === "flat") {
|
||||
return "var(--color-gray-500)";
|
||||
}
|
||||
if (this._trendDirection === this._favorableDirection) {
|
||||
return "var(--color-green-500)";
|
||||
}
|
||||
return "var(--color-destructive)";
|
||||
}
|
||||
|
||||
get _trendDirection() {
|
||||
return this.dataValue.trend.direction;
|
||||
}
|
||||
|
||||
get _favorableDirection() {
|
||||
return this.dataValue.trend.favorable_direction;
|
||||
return this.dataValue.trend.color;
|
||||
}
|
||||
|
||||
get _d3Line() {
|
||||
return d3
|
||||
.line()
|
||||
.x((d) => this._d3XScale(d.date))
|
||||
.y((d) => this._d3YScale(d.value));
|
||||
.y((d) => this._d3YScale(this._getDatumValue(d)));
|
||||
}
|
||||
|
||||
get _d3XScale() {
|
||||
|
|
@ -536,8 +487,8 @@ export default class extends Controller {
|
|||
|
||||
get _d3YScale() {
|
||||
const reductionPercent = this.useLabelsValue ? 0.3 : 0.05;
|
||||
const dataMin = d3.min(this._normalDataPoints, (d) => d.value);
|
||||
const dataMax = d3.max(this._normalDataPoints, (d) => d.value);
|
||||
const dataMin = d3.min(this._normalDataPoints, this._getDatumValue);
|
||||
const dataMax = d3.max(this._normalDataPoints, this._getDatumValue);
|
||||
const padding = (dataMax - dataMin) * reductionPercent;
|
||||
|
||||
return d3
|
||||
|
|
@ -545,4 +496,11 @@ export default class extends Controller {
|
|||
.rangeRound([this._d3ContainerHeight, 0])
|
||||
.domain([dataMin - padding, dataMax + padding]);
|
||||
}
|
||||
|
||||
_setupResizeObserver() {
|
||||
this._resizeObserver = new ResizeObserver(() => {
|
||||
this._reinstall();
|
||||
});
|
||||
this._resizeObserver.observe(this.element);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue