trevato/forge

Public: anyone can read this; the crew can change it.

More
Forks1g fMapg aRuns12g rEventsFlows

.kpi-spark leaves the stylesheet and docs/DESIGN.md §5d #4204

Merged masoncrew opened this

Check · Review · Land · Live done — Landed and live in production.

ConversationFiles
Merged

mason/forge:mason/4192-kpi-spark-leaves-the-stylesheet-and-docs → main 2 commits fork

  • Merged. mason/4192-kpi-spark-leaves-the-stylesheet-and-docs was merged into main as 2faaa3e.

Review

Sign in to review this change.
6 files changed +9 −11
docs/DESIGN.md +1 −1
@@ -401,7 +401,7 @@ gone, so this list only shrinks.
401401 - **`style/content.ts`, search results** — search results, the inbox's ask cards, the client list and the claim link: `.ask-acts` `.ask-card` `.ask-group` `.ask-kind` `.ask-meta` `.ask-more-acts` `.ask-pick` `.ask-pick-hit` `.ask-short` `.ask-waiting` `.claim-link-box` `.forges-sent` `.live-toggle` `.needs-you` `.no-hits`
402402 - **`pages/board.ts`** — the board itself is §5's **board**; the spend tables `spend.ts` draws wear §5's `.table` and `.stack`, no class of their own
403403 - **`pages/map.ts`** — the map of what waits for what: `.map-ask` `.map-breath` `.map-canvas` `.map-card` `.map-counts` `.map-dot` `.map-edge` `.map-edge-crit` `.map-edge-done` `.map-empty` `.map-list` `.map-main` `.map-meta` `.map-node` `.map-pillars` `.map-rule` `.map-svg` `.map-title` `.map-tool` `.map-tools` `.map-who` `.map-who-i` `.map-who-n` `.map-word` `.map-wrap`
404 - **`studio/feed_style.ts`** — the home feed's cards, its composer and the apps rail: `.composer` `.composer-bar` `.fcard-form` `.fcard-reason` `.fcard-reply` `.fcard-text` `.fcard-unblock` `.fcard-who` `.fcard-why` `.feed` `.feed-head` `.kpi-spark` `.home-app` `.home-apps` `.home-apps-verbs` `.home-pick` `.home-rail` `.home-tabs`
404 - **`studio/feed_style.ts`** — the home feed's cards, its composer and the apps rail: `.composer` `.composer-bar` `.fcard-form` `.fcard-reason` `.fcard-reply` `.fcard-text` `.fcard-unblock` `.fcard-who` `.fcard-why` `.feed` `.feed-head` `.home-app` `.home-apps` `.home-apps-verbs` `.home-pick` `.home-rail` `.home-tabs`
405405
406406 ---
407407
src/web/pages/settings.ts +1 −1
@@ -758,7 +758,7 @@ export function appVisitorsView(v: AppVitals): Html {
758758 <div><dt>p75 INP</dt><dd>${ms(v.inpP75)}</dd></div>
759759 <div><dt>p75 CLS</dt><dd>${shiftText(v.clsP75)}</dd></div>
760760 </dl>
761 ${spark ?? html`<p class="muted small mt">No load reports in the last 30 days</p>`}`,
761 ${spark ? html`<div class="bar muted">${spark}</div>` : html`<p class="muted small mt">No load reports in the last 30 days</p>`}`,
762762 { head: html`${icon("rocket")}<h2>Visitors and speed</h2>` },
763763 );
764764 }
src/web/studio/feed_style.ts −2
@@ -19,8 +19,6 @@ export const feedCss = /* css */ `
1919 .composer textarea { width: 100%; min-height: 64px; resize: vertical; }
2020 .composer-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
2121 .composer-bar select { min-width: 0; max-width: 60%; }
22 /* A day sparkline outside a stat tile: the app settings page's visitors card (daySpark). */
23 .kpi-spark { display: block; color: var(--muted-fg); max-width: 100%; }
2422 /* Your apps: a narrow column on a desk, a tab away on a phone. */
2523 .home-tabs { display: none; margin-bottom: 12px; }
2624 .home-app { gap: 8px; }
src/web/studio/kpi_row.ts +3 −4
@@ -25,9 +25,8 @@ function at(i: number, n: number, v: number, top: number): [string, string] {
2525 return [(i * step).toFixed(1), (H - 2 - (v / top) * (H - 4)).toFixed(1)];
2626 }
2727
28 /** `cls` is for a sparkline outside a stat tile (the app settings page's), which styles itself. */
29 function svg(label: string, body: string, cls = ""): Html {
30 return raw(`<svg${cls === "" ? "" : ` class="${cls}"`} viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" role="img" aria-label="${label}">${body}</svg>`);
28 function svg(label: string, body: string): Html {
29 return raw(`<svg viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" role="img" aria-label="${label}">${body}</svg>`);
3130 }
3231
3332 /** A series oldest first as a fixed-size SVG polyline; the numbers are the only input. */
@@ -63,7 +62,7 @@ export function daySpark(days: readonly (number | null)[], label: string): Html
6362 : `<polyline points="${r.map((p) => p.join(",")).join(" ")}" fill="none" stroke="currentColor" stroke-width="1.5"/>`,
6463 )
6564 .join("");
66 return svg(escapeHtml(label), body, "kpi-spark");
65 return svg(escapeHtml(label), body);
6766 }
6867
6968 /** The last 24 hours, newest first in, oldest on the left out. */
test/app-vitals-days.test.ts +2 −1
@@ -43,13 +43,14 @@ test("the settings card breaks the line at the silent day", () => {
4343 const out = String(appVisitorsView({ ...none, loadDays: loadP75Days(db, "a1", NOW, 4) }));
4444 expect(out).toContain("p75 load each day over the last 30 days");
4545 expect(out.match(/<polyline|<circle/g)).toHaveLength(2);
46 expect(out).toContain('<div class="bar muted"><svg viewBox');
4647 expect(out).not.toContain("No load reports");
4748 });
4849
4950 test("no reports in 30 days says so in words, with no svg", () => {
5051 const out = String(appVisitorsView({ ...none, loadDays: loadP75Days(seeded(), "nobody", NOW) }));
5152 expect(out).toContain("No load reports in the last 30 days");
52 expect(out).not.toContain("kpi-spark");
53 expect(out).not.toContain("<svg viewBox=\"0 0 96 24\"");
5354 });
5455
5556 test("the day query uses the app/day index", () => {
test/kpi-spark.test.ts +2 −2
@@ -35,9 +35,9 @@ describe("daySpark", () => {
3535 expect(daySpark([], "Days")).toBeNull();
3636 });
3737
38 test("it keeps the class, the box and currentColor, and adds no style or colour", () => {
38 test("it carries no class, keeps the box and currentColor, and adds no style or colour", () => {
3939 const out = daySpark([0, null, 5], "Days")!.toString();
40 expect(out).toStartWith('<svg class="kpi-spark" viewBox="0 0 96 24" width="96" height="24" role="img" aria-label="Days">');
40 expect(out).toStartWith('<svg viewBox="0 0 96 24" width="96" height="24" role="img" aria-label="Days">');
4141 expect(out).not.toContain("style=");
4242 expect(out).not.toMatch(/#[0-9a-f]{3,8}\b|rgb|hsl/i);
4343 });

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs