Flujo de trabajoAlea Pro

RoadmapTimeline y CycleProgress

Proyectos en una línea de tiempo con su progreso y el día de hoy marcado, y un ciclo de un vistazo: alcance, iniciado y hecho día a día.

import { RoadmapTimeline, CycleProgress } from '@alea/pro';

Ejemplos

Roadmap

Proyectos de inicio a fin con su progreso, los meses arriba y el día de hoy marcado.

Mobile app 2.0, 4 ago - 20 nov, 70% hecho
Billing, 10 sept - 5 dic, 35% hecho
Agents in the inbox, 3 oct - 15 ene, 10% hecho
Accessibility pass, 1 sept - 25 oct, 90% hecho

Ciclo

Alcance, iniciado y hecho cada día de un ciclo de dos semanas, los números arriba y la línea objetivo punteada.

Cycle 1449 oct - 23 oct

Scope: 26
En curso: 21
Hecho: 16 (62% hecho)

Cycle 144
Day	Scope	En curso	Hecho
9 oct	22	3	0
10 oct	23	5	1
11 oct	24	7	3
12 oct	25	9	5
13 oct	26	11	7
14 oct	26	13	9
15 oct	26	15	10
16 oct	26	17	12
17 oct	26	19	14
18 oct	26	21	16

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-border…
--alea-status-danger…
--alea-surface…
--alea-text…
--alea-text-muted…

Radius

--alea-radius-md…
--alea-radius-sm…

Type

--alea-font-size-xs…
--alea-font-weight-medium…
--alea-font-weight-regular…

Motion

--alea-motion-duration-fast…
--alea-motion-duration-slow…
--alea-motion-ease-out…

Props

`RoadmapTimeline` props

Proyectos en una línea de tiempo: una barra de inicio a fin con su progreso, los meses arriba y una línea para hoy. Cada proyecto es un elemento de lista que dice sus fechas y su progreso en palabras.

Prop	Tipo	Por defecto	Descripción
`items`obligatoria	`RoadmapItem[]`	-	Los proyectos: nombre, inicio, fin y, opcionales, progreso, estado y href.
`aria-label`	`string`	-	Nombre del roadmap.
`className`	`string`	-	Clases extra para el elemento raíz.
`from`	`Date`	-	Primer y último día visibles. Por defecto: del inicio más temprano al final más tardío, por meses completos.
`showToday`	`boolean`	`true`	Marca el día de hoy. Por defecto true.
`to`	`Date`	-	Último día que se muestra. Por defecto el fin del mes del último fin.

`CycleProgress` props

Un ciclo de un vistazo: cuánto hay en alcance, iniciado y hecho cada día, y dónde está ahora. El gráfico es una imagen; los números están en el texto y en una tabla para lectores de pantalla.

Prop	Tipo	Por defecto	Descripción
`days`obligatoria	`{ scope: number; started: number; completed: number; }[]`	-	Por día desde el inicio: alcance total, iniciado y completado (cantidades o puntos).
`end`obligatoria	`Date`	-	Último día del ciclo.
`name`obligatoria	`string`	-	El nombre del ciclo: "Cycle 144".
`start`obligatoria	`Date`	-	Primer día del ciclo.
`className`	`string`	-	Clases extra para el elemento raíz.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.