feat(web): a home page in two columns, with four figures on top
The home page was two grids of panels side by side, each row as tall as its tallest panel, which left gaps. Now: four figures of the same size (my open tickets, waiting for QA, finished by me and by the team this week), the week, my views, and two columns that stack on their own: my tickets and the latest on the left; sprints, QA, following, releases, who is online and «Retomar» on the right. Project cards are as tall as their row, with the team at the bottom, and a phone only lists the days of the week that have something. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
180
libs/web/tracker/presenters/src/lib/ui/home/kpis.ts
Normal file
180
libs/web/tracker/presenters/src/lib/ui/home/kpis.ts
Normal file
@@ -0,0 +1,180 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
input,
|
||||
} from '@angular/core';
|
||||
import { Home } from '@task-stream/web/tracker/domain';
|
||||
|
||||
/** «+30 %» or «−10 %» against the week before (nothing when there was none). */
|
||||
function change(now: number, before: number): string {
|
||||
if (!before) return now ? 'nuevo' : '';
|
||||
const pct = Math.round(((now - before) / before) * 100);
|
||||
return `${pct >= 0 ? '+' : '−'}${Math.abs(pct)} %`;
|
||||
}
|
||||
|
||||
/** The home page's figures, four tiles of the same size. */
|
||||
@Component({
|
||||
selector: 'ts-home-kpis',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: { role: 'region', 'aria-label': 'Cifras' },
|
||||
template: `
|
||||
<div class="ts-panel ts-kpi">
|
||||
<p class="ts-kpi__label">Abiertos tuyos</p>
|
||||
<p class="ts-kpi__value">{{ mine() }}</p>
|
||||
<p class="ts-kpi__sub" [class.is-late]="overdue() > 0">
|
||||
@if (overdue()) {
|
||||
{{ overdue() }} {{ overdue() === 1 ? 'vencido' : 'vencidos' }}
|
||||
@if (dueToday()) {
|
||||
· {{ dueToday() }} hoy
|
||||
}
|
||||
} @else if (dueToday()) {
|
||||
{{ dueToday() }} {{ dueToday() === 1 ? 'vence' : 'vencen' }} hoy
|
||||
} @else {
|
||||
Nada vence hoy
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ts-panel ts-kpi">
|
||||
<p class="ts-kpi__label">Esperando QA</p>
|
||||
<p class="ts-kpi__value">{{ awaitingQa() }}</p>
|
||||
<p class="ts-kpi__sub">En tus proyectos</p>
|
||||
</div>
|
||||
<div class="ts-panel ts-kpi">
|
||||
<p class="ts-kpi__label">Terminados por ti</p>
|
||||
<p class="ts-kpi__value">
|
||||
{{ me().thisWeek }}
|
||||
@if (myChange(); as c) {
|
||||
<span class="ts-kpi__change" [class.is-down]="c.startsWith('−')">{{
|
||||
c
|
||||
}}</span>
|
||||
}
|
||||
</p>
|
||||
<p class="ts-kpi__sub">
|
||||
@if (me().streak > 1) {
|
||||
{{ me().streak }} días seguidos
|
||||
} @else if (me().streak === 1) {
|
||||
Esta semana · racha de 1 día
|
||||
} @else {
|
||||
Esta semana · sin racha
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ts-panel ts-kpi">
|
||||
<p class="ts-kpi__label">Terminados por el equipo</p>
|
||||
<p class="ts-kpi__value">
|
||||
{{ team().thisWeek }}
|
||||
@if (teamChange(); as c) {
|
||||
<span class="ts-kpi__change" [class.is-down]="c.startsWith('−')">{{
|
||||
c
|
||||
}}</span>
|
||||
}
|
||||
</p>
|
||||
<div
|
||||
class="ts-kpi__bars"
|
||||
role="img"
|
||||
[attr.aria-label]="'Terminados por día: ' + team().perDay.join(', ')"
|
||||
>
|
||||
@for (n of team().perDay; track $index) {
|
||||
<span
|
||||
[style.height.%]="height(n)"
|
||||
[class.is-this-week]="$index >= 7"
|
||||
[attr.title]="n + ' terminados'"
|
||||
></span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: `
|
||||
:host {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
@media (max-width: 900px) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
.ts-kpi {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
min-width: 0;
|
||||
padding: 1.125rem 1.25rem;
|
||||
}
|
||||
.ts-kpi__label {
|
||||
margin: 0;
|
||||
color: var(--ts-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ts-kpi__value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.ts-kpi__change {
|
||||
color: var(--ts-c-green);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
&.is-down {
|
||||
color: var(--ts-muted);
|
||||
}
|
||||
}
|
||||
.ts-kpi__sub {
|
||||
margin: auto 0 0;
|
||||
padding-top: 0.375rem;
|
||||
color: var(--ts-ink-soft);
|
||||
font-size: 0.8125rem;
|
||||
&.is-late {
|
||||
color: var(--ts-c-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.ts-kpi__bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 1.5rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0.375rem;
|
||||
span {
|
||||
flex: 1;
|
||||
min-height: 2px;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: color-mix(in srgb, var(--ts-brand) 30%, transparent);
|
||||
&.is-this-week {
|
||||
background: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class HomeKpisComponent {
|
||||
readonly mine = input.required<number>();
|
||||
readonly dueToday = input.required<number>();
|
||||
readonly overdue = input.required<number>();
|
||||
readonly awaitingQa = input.required<number>();
|
||||
readonly me = input.required<Home['me']>();
|
||||
readonly team = input.required<Home['team']>();
|
||||
|
||||
protected readonly myChange = computed(() =>
|
||||
change(this.me().thisWeek, this.me().lastWeek),
|
||||
);
|
||||
protected readonly teamChange = computed(() =>
|
||||
change(this.team().thisWeek, this.team().lastWeek),
|
||||
);
|
||||
private readonly max = computed(() => Math.max(1, ...this.team().perDay));
|
||||
|
||||
protected height(n: number): number {
|
||||
return (n / this.max()) * 100;
|
||||
}
|
||||
}
|
||||
@@ -32,7 +32,7 @@ const KIND: Record<AgendaItem['kind'], string> = {
|
||||
</header>
|
||||
<ol class="ts-agenda">
|
||||
@for (day of days(); track day.date) {
|
||||
<li [class.is-today]="day.today">
|
||||
<li [class.is-today]="day.today" [class.is-empty]="!day.items.length">
|
||||
<p class="ts-agenda__day">
|
||||
<span>{{ day.weekday }}</span> <strong>{{ day.number }}</strong>
|
||||
</p>
|
||||
@@ -128,6 +128,10 @@ const KIND: Record<AgendaItem['kind'], string> = {
|
||||
li {
|
||||
min-height: 0;
|
||||
}
|
||||
/* On a phone, only the days with something (and today). */
|
||||
li.is-empty:not(.is-today) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
computed,
|
||||
input,
|
||||
} from '@angular/core';
|
||||
import { Home } from '@task-stream/web/tracker/domain';
|
||||
|
||||
/** «+30 %» or «−10 %» against the week before (nothing when there was none). */
|
||||
function change(now: number, before: number): string {
|
||||
if (!before) return now ? 'nuevo' : '';
|
||||
const pct = Math.round(((now - before) / before) * 100);
|
||||
return `${pct >= 0 ? '+' : '−'}${Math.abs(pct)} %`;
|
||||
}
|
||||
|
||||
/** How the week goes: mine (and my streak) and my projects' teams. */
|
||||
@Component({
|
||||
selector: 'ts-week-stats',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: {
|
||||
class: 'ts-panel',
|
||||
role: 'region',
|
||||
'aria-labelledby': 'stats-title',
|
||||
},
|
||||
styleUrl: './home-panel.scss',
|
||||
template: `
|
||||
<header class="ts-panel__head">
|
||||
<h2 id="stats-title">La semana</h2>
|
||||
<span class="ts-muted">Tickets terminados, últimos 7 días</span>
|
||||
</header>
|
||||
<div class="ts-week">
|
||||
<div>
|
||||
<p class="ts-week__label">Tú</p>
|
||||
<p class="ts-week__value">
|
||||
{{ me().thisWeek }}
|
||||
@if (myChange(); as c) {
|
||||
<span class="ts-week__change" [class.is-down]="c.startsWith('−')">{{
|
||||
c
|
||||
}}</span>
|
||||
}
|
||||
</p>
|
||||
<p class="ts-week__sub">
|
||||
@if (me().streak > 1) {
|
||||
{{ me().streak }} días seguidos terminando algo
|
||||
} @else if (me().streak === 1) {
|
||||
Terminaste algo hoy o ayer
|
||||
} @else {
|
||||
Sin racha: hoy puede empezar una
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="ts-week__label">Tus equipos</p>
|
||||
<p class="ts-week__value">
|
||||
{{ team().thisWeek }}
|
||||
@if (teamChange(); as c) {
|
||||
<span class="ts-week__change" [class.is-down]="c.startsWith('−')">{{
|
||||
c
|
||||
}}</span>
|
||||
}
|
||||
</p>
|
||||
<div
|
||||
class="ts-week__bars"
|
||||
role="img"
|
||||
[attr.aria-label]="'Terminados por día: ' + team().perDay.join(', ')"
|
||||
>
|
||||
@for (n of team().perDay; track $index) {
|
||||
<span
|
||||
[style.height.%]="height(n)"
|
||||
[class.is-this-week]="$index >= 7"
|
||||
[attr.title]="n + ' terminados'"
|
||||
></span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: `
|
||||
.ts-week {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
.ts-week__label {
|
||||
margin: 0;
|
||||
color: var(--ts-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.ts-week__value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
margin: 0.125rem 0 0.25rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ts-week__change {
|
||||
color: var(--ts-c-green, #2e9e6a);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
&.is-down {
|
||||
color: var(--ts-muted);
|
||||
}
|
||||
}
|
||||
.ts-week__sub {
|
||||
margin: 0;
|
||||
color: var(--ts-ink-soft);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.ts-week__bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 2.5rem;
|
||||
span {
|
||||
flex: 1;
|
||||
min-height: 2px;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: color-mix(in srgb, var(--ts-brand) 35%, transparent);
|
||||
&.is-this-week {
|
||||
background: var(--ts-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
})
|
||||
export class WeekStatsComponent {
|
||||
readonly me = input.required<Home['me']>();
|
||||
readonly team = input.required<Home['team']>();
|
||||
|
||||
protected readonly myChange = computed(() =>
|
||||
change(this.me().thisWeek, this.me().lastWeek),
|
||||
);
|
||||
protected readonly teamChange = computed(() =>
|
||||
change(this.team().thisWeek, this.team().lastWeek),
|
||||
);
|
||||
private readonly max = computed(() => Math.max(1, ...this.team().perDay));
|
||||
|
||||
protected height(n: number): number {
|
||||
return (n / this.max()) * 100;
|
||||
}
|
||||
}
|
||||
@@ -60,6 +60,8 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
|
||||
<span class="ts-project__late">· no llega</span>
|
||||
}
|
||||
</span>
|
||||
} @else {
|
||||
<span class="ts-project__sprint ts-muted">Sin sprint en curso</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -74,12 +76,13 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
|
||||
</a>
|
||||
`,
|
||||
styles: `
|
||||
/* As tall as the tallest card of its row, the team always at the bottom. */
|
||||
:host {
|
||||
display: block;
|
||||
display: grid;
|
||||
}
|
||||
.ts-project {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
min-height: 12rem;
|
||||
padding: 1.5rem 1.5rem 1.25rem;
|
||||
@@ -103,7 +106,7 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
|
||||
.ts-project__stats {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
color: var(--ts-ink-soft);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@@ -145,7 +148,7 @@ import { projectTone, PUBLIC_TONE, timeAgo } from './copy';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0.875rem;
|
||||
border-top: 1px dashed var(--ts-line);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user