pigui/task-stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: per-project workflow settings, statistics and "my work" home

Browse Source 
Per-project settings (owners/admins, «Configuración» tab):
- Statuses with category (TODO, IN_PROGRESS, QA, DONE, CANCELLED), colour and
  "requires reason"; configurable transitions; ticket types (icon, colour) and
  areas. Defaults are the previous fixed values; projects created before keep
  them without migration.
- Values are archived, never deleted: tickets, history and statistics keep
  referring to them. Validated in the domain (ProjectSettingsChangedEvent).
- Releases, board, tracking and "my work" use categories, so custom statuses
  keep working. Status changes carry name/category metadata for history.
- GraphQL: status/type/area are strings (breaking for clients sending enum
  literals); Project.settings, updateProjectSettings, statusCategory,
  myIssues(categories). REST: PUT /projects/{project}/settings, category filters.
- Read model: statusCategory on issues (backfilled at startup).

Statistics («Estadísticas» tab):
- New issue_timeline projection; pure functions compute created vs resolved,
  cumulative flow, cycle/lead time (avg + p85), throughput per person, QA
  pass/fail and release burnup. GraphQL Project.analytics(days),
  Release.burnup; REST /projects/{project}/analytics, /releases/{id}/burnup.
- Web: SVG charts with validated light/dark palette, crosshair tooltip,
  keyboard navigation, legend and data table.

Home "Mi trabajo": my open tickets across projects grouped by category (QA
failures first), tickets waiting for QA, upcoming releases and "Ir a…".

Tests: domain/application specs, e2e scenario for settings and analytics,
facade tests. Docs, READMEs, schema.gql/openapi.json and Word/PDF updated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-10-06 20:53:45 +02:00
parent 240ea9a539
commit 0e301ad545
143 changed files with 10291 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

582
libs/web/tracker/presenters/src/lib/ui/series-chart.ts Normal file
View File

@@ -0,0 +1,582 @@
import {
afterNextRender,
ChangeDetectionStrategy,
Component,
computed,
DestroyRef,
ElementRef,
inject,
input,
signal,
} from '@angular/core';
export interface ChartSeries {
label: string;
values: number[];
/** CSS colour (a `--ts-viz-*` token). */
color: string;
/** Wash the area under a line (~10%); ignored when stacked. */
area?: boolean;
}
export interface ChartMarker {
index: number;
label: string;
}
/** Last item (the web target predates Array.prototype.at). */
export const last = <T>(list: readonly T[]): T | undefined =>
list[list.length - 1];
const PAD = { top: 16, right: 20, bottom: 30, left: 40 };
/** 0 → max in 3-5 clean steps (1, 2, 5 × 10ⁿ). */
function niceTicks(max: number): number[] {
if (max <= 0) return [0, 1];
const raw = max / 4;
const power = 10 ** Math.floor(Math.log10(raw));
const step =
[1, 2, 5, 10].map((m) => m * power).find((s) => s >= raw) ?? power * 10;
const ticks: number[] = [];
for (let v = 0; v < max + step; v += step) {
ticks.push(Math.round(v * 1000) / 1000);
if (v >= max) break;
}
return ticks;
}
/**
* Lines or stacked areas over a shared x axis, drawn in SVG with the theme's
* tokens (so dark mode is its own palette). Crosshair + one tooltip with every
* series, keyboard (← →) as well as pointer, legend for 2+ series and a data
* table so nothing depends on hovering or on colour alone.
*/
@Component({
selector: 'ts-series-chart',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
@if (series().length > 1) {
<ul class="ts-chart__legend">
@for (s of legend(); track s.label) {
<li>
<span
class="ts-chart__key"
[class.ts-chart__key--area]="stacked()"
[style.--key]="s.color"
></span>
{{ s.label }}
</li>
}
</ul>
}
<div
class="ts-chart__plot"
tabindex="0"
role="img"
[attr.aria-label]="summary()"
(pointermove)="onPointer($event)"
(pointerleave)="hover.set(null)"
(keydown)="onKey($event)"
(focus)="hover.set(hover() ?? count() - 1)"
(blur)="hover.set(null)"
>
<svg [attr.width]="width()" [attr.height]="height()" aria-hidden="true">
@for (tick of ticks(); track tick) {
<line
class="ts-chart__grid"
[attr.x1]="left"
[attr.x2]="width() - right"
[attr.y1]="y(tick)"
[attr.y2]="y(tick)"
/>
<text
class="ts-chart__tick"
[attr.x]="left - 8"
[attr.y]="y(tick)"
text-anchor="end"
dominant-baseline="middle"
>
{{ tick }}
</text>
}
@for (index of xTicks(); track index) {
<text
class="ts-chart__tick"
[attr.x]="x(index)"
[attr.y]="height() - 8"
[attr.text-anchor]="anchor(index)"
>
{{ labels()[index] }}
</text>
}
@if (marker(); as m) {
<line
class="ts-chart__marker"
[attr.x1]="x(m.index)"
[attr.x2]="x(m.index)"
[attr.y1]="top - 4"
[attr.y2]="y(0)"
/>
<text
class="ts-chart__marker-label"
[attr.x]="x(m.index) + 4"
[attr.y]="top + 6"
>
{{ m.label }}
</text>
}
@for (shape of shapes(); track shape.label) {
@if (shape.fill) {
<path
[class]="stacked() ? 'ts-chart__band' : 'ts-chart__wash'"
[attr.d]="shape.fill"
[style.fill]="shape.color"
/>
}
@if (shape.line) {
<path
[class]="stacked() ? 'ts-chart__gap' : 'ts-chart__line'"
[attr.d]="shape.line"
[style.stroke]="stacked() ? null : shape.color"
/>
}
}
@for (label of endLabels(); track label.text) {
<text
class="ts-chart__end"
[attr.x]="width() - right + 4"
[attr.y]="label.y"
dominant-baseline="middle"
>
{{ label.text }}
</text>
}
@if (hover() !== null) {
<line
class="ts-chart__crosshair"
[attr.x1]="x(hover()!)"
[attr.x2]="x(hover()!)"
[attr.y1]="top"
[attr.y2]="y(0)"
/>
@for (dot of dots(); track dot.label) {
<circle
class="ts-chart__dot"
[attr.cx]="x(hover()!)"
[attr.cy]="dot.y"
r="4"
[style.fill]="dot.color"
/>
}
}
</svg>
@if (tooltip(); as tip) {
<div
class="ts-chart__tooltip"
[class.is-left]="tip.left"
[style.left.px]="tip.x"
>
<p class="ts-chart__tooltip-title">{{ tip.title }}</p>
@for (row of tip.rows; track row.label) {
<p class="ts-chart__tooltip-row">
<span
class="ts-chart__tooltip-key"
[style.--key]="row.color"
></span>
<strong>{{ row.value }}</strong> {{ row.label }}
</p>
}
@if (tip.total !== null) {
<p class="ts-chart__tooltip-row ts-chart__tooltip-total">
<strong>{{ tip.total }}</strong> en total
</p>
}
</div>
}
</div>
<details class="ts-chart__data">
<summary>Ver los datos</summary>
<div class="ts-chart__table">
<table>
<thead>
<tr>
<th scope="col">{{ axisLabel() }}</th>
@for (s of series(); track s.label) {
<th scope="col">{{ s.label }}</th>
}
</tr>
</thead>
<tbody>
@for (label of fullLabels(); track $index; let i = $index) {
<tr>
<th scope="row">{{ label }}</th>
@for (s of series(); track s.label) {
<td>{{ s.values[i] }}</td>
}
</tr>
}
</tbody>
</table>
</div>
</details>
`,
styles: `
:host {
display: grid;
gap: 0.75rem;
min-width: 0;
}
.ts-chart__legend {
display: flex;
flex-wrap: wrap;
gap: 0.375rem 1rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
color: var(--ts-ink-soft);
li {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
}
}
.ts-chart__key {
width: 1rem;
height: 2px;
border-radius: 1px;
background: var(--key);
}
.ts-chart__key--area {
width: 0.75rem;
height: 0.75rem;
border-radius: 3px;
}
.ts-chart__plot {
position: relative;
border-radius: 0.5rem;
outline: none;
touch-action: pan-y;
&:focus-visible {
box-shadow: 0 0 0 2px var(--ts-brand);
}
}
svg {
display: block;
overflow: visible;
font-family: var(--ts-font-mono);
}
.ts-chart__grid {
stroke: var(--ts-line);
stroke-width: 1;
shape-rendering: crispEdges;
}
.ts-chart__tick {
fill: var(--ts-muted);
font-size: 0.6875rem;
font-variant-numeric: tabular-nums;
}
.ts-chart__line {
fill: none;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
.ts-chart__wash {
fill-opacity: 0.1;
}
/* The 2px surface gap between stacked bands. */
.ts-chart__gap {
fill: none;
stroke: var(--ts-surface);
stroke-width: 2;
stroke-linejoin: round;
}
.ts-chart__end {
fill: var(--ts-ink-soft);
font-size: 0.75rem;
font-weight: 600;
}
.ts-chart__marker {
stroke: var(--ts-ink-soft);
stroke-width: 1;
}
.ts-chart__marker-label {
fill: var(--ts-ink-soft);
font-size: 0.6875rem;
font-weight: 600;
}
.ts-chart__crosshair {
stroke: var(--ts-ink-soft);
stroke-width: 1;
shape-rendering: crispEdges;
}
.ts-chart__dot {
stroke: var(--ts-surface);
stroke-width: 2;
}
.ts-chart__tooltip {
position: absolute;
top: 0;
z-index: 2;
min-width: 9rem;
margin-left: 0.75rem;
padding: 0.5rem 0.625rem;
border-radius: 0.5rem;
background: var(--ts-surface-raised);
border: 1px solid var(--ts-line-strong);
box-shadow: 0 8px 24px -12px rgb(0 0 0 / 35%);
pointer-events: none;
font-size: 0.75rem;
color: var(--ts-ink-soft);
&.is-left {
margin-left: 0;
transform: translateX(calc(-100% - 0.75rem));
}
p {
margin: 0;
}
strong {
color: var(--ts-ink);
font-variant-numeric: tabular-nums;
}
}
.ts-chart__tooltip-title {
margin-bottom: 0.25rem !important;
font-weight: 600;
color: var(--ts-muted);
}
.ts-chart__tooltip-row {
display: flex;
align-items: center;
gap: 0.375rem;
line-height: 1.6;
}
.ts-chart__tooltip-key {
width: 0.625rem;
height: 2px;
border-radius: 1px;
background: var(--key);
}
.ts-chart__tooltip-total {
margin-top: 0.25rem !important;
padding-top: 0.25rem;
border-top: 1px solid var(--ts-line);
}
.ts-chart__data summary {
width: fit-content;
cursor: pointer;
font-size: 0.75rem;
color: var(--ts-muted);
}
.ts-chart__table {
max-height: 16rem;
margin-top: 0.5rem;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
}
th,
td {
padding: 0.25rem 0.5rem;
border-bottom: 1px solid var(--ts-line);
text-align: right;
white-space: nowrap;
}
th:first-child {
text-align: left;
font-weight: 500;
}
thead th {
color: var(--ts-muted);
font-weight: 600;
}
`,
})
export class SeriesChartComponent {
/** Short x labels (axis). */
readonly labels = input.required<string[]>();
/** Long x labels (tooltip and table); defaults to `labels`. */
readonly longLabels = input<string[] | undefined>();
readonly series = input.required<ChartSeries[]>();
readonly stacked = input(false);
readonly marker = input<ChartMarker | null>(null);
/** What the chart shows, for screen readers. */
readonly summary = input.required<string>();
/** Header of the table's first column. */
readonly axisLabel = input('Fecha');
readonly height = input(240);
protected readonly left = PAD.left;
protected readonly right = PAD.right;
protected readonly top = PAD.top;
protected readonly width = signal(640);
protected readonly hover = signal<number | null>(null);
protected readonly count = computed(() => this.labels().length);
/** Stacked: top band first, as the reader sees them. */
protected readonly legend = computed(() =>
this.stacked() ? [...this.series()].reverse() : this.series(),
);
protected readonly fullLabels = computed(
() => this.longLabels() ?? this.labels(),
);
/** Lower/upper bound of every series at every x (stacked: cumulative). */
private readonly bands = computed(() => {
let base = new Array(this.count()).fill(0) as number[];
return this.series().map((s) => {
const lower = this.stacked() ? base : base.map(() => 0);
const upper = s.values.map((v, i) => (this.stacked() ? lower[i] : 0) + v);
if (this.stacked()) base = upper;
return { ...s, lower, upper };
});
});
protected readonly ticks = computed(() =>
niceTicks(Math.max(0, ...this.bands().flatMap((b) => b.upper))),
);
private readonly max = computed(() => last(this.ticks()) || 1);
protected x(index: number): number {
const plot = this.width() - PAD.left - PAD.right;
return this.count() <= 1
? PAD.left + plot / 2
: PAD.left + (index * plot) / (this.count() - 1);
}
protected y(value: number): number {
const plot = this.height() - PAD.top - PAD.bottom;
return PAD.top + plot - (value / this.max()) * plot;
}
protected anchor(index: number): string {
if (this.count() <= 1) return 'middle';
return index === 0
? 'start'
: index === this.count() - 1
? 'end'
: 'middle';
}
/** At most one label every ~90px, always the first and last. */
protected readonly xTicks = computed(() => {
const n = this.count();
if (n === 0) return [];
const slots = Math.max(
2,
Math.floor((this.width() - PAD.left - PAD.right) / 90),
);
const step = Math.max(1, Math.ceil((n - 1) / (slots - 1)));
const ticks: number[] = [];
for (let i = 0; i < n; i += step) ticks.push(i);
if (last(ticks) !== n - 1) {
if (n - 1 - (last(ticks) ?? 0) < step / 2) ticks.pop();
ticks.push(n - 1);
}
return ticks;
});
protected readonly shapes = computed(() =>
this.bands().map((band) => {
const points = band.upper.map((v, i) => `${this.x(i)},${this.y(v)}`);
const line = points.length ? `M${points.join('L')}` : '';
let fill: string | null = null;
if (this.stacked() || band.area) {
const floor = band.lower
.map((v, i) => `${this.x(i)},${this.y(v)}`)
.reverse();
fill = points.length
? `M${points.join('L')}L${floor.join('L')}Z`
: null;
}
return { label: band.label, color: band.color, line, fill };
}),
);
/** Last value at the line end, only while labels keep 14px apart. */
protected readonly endLabels = computed(() => {
if (this.stacked() || this.count() === 0) return [];
const labels = this.bands()
.map((band) => ({
text: String(last(band.upper) ?? 0),
y: this.y(last(band.upper) ?? 0),
}))
.sort((a, b) => a.y - b.y);
const apart = labels.every(
(l, i) => i === 0 || l.y - labels[i - 1].y >= 14,
);
return apart ? labels : [];
});
protected readonly dots = computed(() => {
const index = this.hover();
if (index === null) return [];
return this.bands().map((band) => ({
label: band.label,
color: band.color,
y: this.y(band.upper[index] ?? 0),
}));
});
protected readonly tooltip = computed(() => {
const index = this.hover();
if (index === null || index >= this.count()) return null;
const rows = this.series()
.map((s) => ({ label: s.label, color: s.color, value: s.values[index] }))
// Stacked: same order as the bands, top first.
.reverse();
if (!this.stacked()) rows.reverse();
const x = this.x(index);
return {
title: this.fullLabels()[index],
rows,
total: this.stacked() ? rows.reduce((sum, r) => sum + r.value, 0) : null,
x,
left: x > this.width() * 0.6,
};
});
constructor() {
const host = inject(ElementRef<HTMLElement>);
const destroyRef = inject(DestroyRef);
afterNextRender(() => {
const observer = new ResizeObserver(([entry]) =>
this.width.set(Math.max(240, Math.floor(entry.contentRect.width))),
);
observer.observe(host.nativeElement);
destroyRef.onDestroy(() => observer.disconnect());
});
}
/** The crosshair snaps to the nearest x. */
protected onPointer(event: PointerEvent): void {
const n = this.count();
if (n === 0) return;
const box = (event.currentTarget as HTMLElement).getBoundingClientRect();
const plot = this.width() - PAD.left - PAD.right;
const ratio = (event.clientX - box.left - PAD.left) / plot;
this.hover.set(Math.min(n - 1, Math.max(0, Math.round(ratio * (n - 1)))));
}
protected onKey(event: KeyboardEvent): void {
const n = this.count();
const current = this.hover() ?? n - 1;
const next =
event.key === 'ArrowLeft'
? current - 1
: event.key === 'ArrowRight'
? current + 1
: event.key === 'Home'
? 0
: event.key === 'End'
? n - 1
: null;
if (next === null) return;
event.preventDefault();
this.hover.set(Math.min(n - 1, Math.max(0, next)));
}
}