QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-06-06 03:09:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(charts): align every chart tooltip on the borderless soft-shadow card

Browse Source 
One visual contract for all three D3 tooltip surfaces, matching the
design reference: p-4, rounded-2xl, shadow-xl, no edge ring in light
mode. Dark mode keeps a 1px alpha-white ring since a shadow alone
disappears against dark surfaces.

- goal_projection_chart_controller drops its hand-copied class string
  (it still carried the old bordered recipe — the drift this util
  exists to prevent) and builds its two lines through the shared
  factory: secondary date line, tabular value line.
- New content conventions exported alongside the container contract:
  context line = text-xs text-secondary, values = font-medium
  tabular-nums. Time-series and sankey adopt them.
- Sankey node titles now escape before .html(); user-named categories
  were previously interpolated raw into the tooltip markup.
This commit is contained in:
Guillem Arias
2026-06-05 09:16:34 +02:00
parent d033200226
commit a3eb33b8a6
4 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/javascript/controllers/goal_projection_chart_controller.js
View File

@@ -1,5 +1,10 @@
import { Controller } from "@hotwired/stimulus";
import * as d3 from "d3";
import {
createChartTooltip,
CHART_TOOLTIP_CONTEXT_CLASSES,
CHART_TOOLTIP_VALUE_CLASSES,
} from "utils/chart_tooltip";
// Projection chart for a goal. Renders:
// - Saved area + line from goal creation → today (solid)
@@ -439,10 +444,15 @@ export default class extends Controller {
// clobber a stylesheet `position: fixed/sticky/absolute` with our
// own `relative`. Read the computed style instead.
if (getComputedStyle(root).position === "static") root.style.position = "relative";
const tooltip = document.createElement("div");
tooltip.className = "bg-container text-primary text-sm font-sans absolute p-2 border border-secondary rounded-lg pointer-events-none z-50 privacy-sensitive";
tooltip.style.display = "none";
root.appendChild(tooltip);
// Shared visual contract (utils/chart_tooltip) — this used to be a
// hand-copied class string that drifted from the other charts the moment
// the contract changed.
const tooltip = createChartTooltip(root);
const tooltipDate = document.createElement("div");
tooltipDate.className = CHART_TOOLTIP_CONTEXT_CLASSES;
const tooltipValue = document.createElement("div");
tooltipValue.className = CHART_TOOLTIP_VALUE_CLASSES;
tooltip.replaceChildren(tooltipDate, tooltipValue);
const overlay = svg
.append("rect")
@@ -485,7 +495,7 @@ export default class extends Controller {
const hoverX = x(hoverDate);
crosshair.attr("x1", hoverX).attr("x2", hoverX).style("display", null);
const lines = [dateFmt(hoverDate)];
tooltipDate.textContent = dateFmt(hoverDate);
if (future) {
// Projection segment: interpolate along the dashed line; saved dot
@@ -494,7 +504,7 @@ export default class extends Controller {
const projValue = currentAmount + tFrac * (projectionEnd - currentAmount);
hoverProjDot.attr("cx", hoverX).attr("cy", y(projValue)).style("display", null);
hoverSavedDot.style("display", "none");
lines.push(this.projectedTemplateValue.replace("{amount}", this._fmtMoney(projValue, data.currency)));
tooltipValue.textContent = this.projectedTemplateValue.replace("{amount}", this._fmtMoney(projValue, data.currency));
} else {
// Saved segment: hoverDate is already snapped to nearest savedSeries
// entry above, so reuse that entry directly instead of running
@@ -502,11 +512,9 @@ export default class extends Controller {
const savedPoint = savedSeries.find((p) => p.date.getTime() === hoverDate.getTime()) || savedSeries[savedSeries.length - 1];
hoverSavedDot.attr("cx", x(savedPoint.date)).attr("cy", y(savedPoint.value)).style("display", null);
hoverProjDot.style("display", "none");
lines.push(this.savedTemplateValue.replace("{amount}", this._fmtMoney(savedPoint.value, data.currency)));
tooltipValue.textContent = this.savedTemplateValue.replace("{amount}", this._fmtMoney(savedPoint.value, data.currency));
}
tooltip.textContent = lines.join("\n");
tooltip.style.whiteSpace = "pre";
tooltip.style.display = "block";
const tipRect = tooltip.getBoundingClientRect();
const left = Math.min(width - tipRect.width - 4, Math.max(4, xPos + 12));