tareas-gantt-react
Diagrama de Gantt interactivo para React con TypeScript.
Demostración en vivo
Instalar
npm install tareas-gantt-reactivo
Cómo usarlo
import { Gantt, Tarea, OpcionEvento, OpcionEstilismo, ModoVista, OpcionVisualizacion } from 'tareas-gantt-reactivo';
import "tareas-gantt-reactivo/dist/index.css";
let tareas: Tarea[] = [
{
inicio: new Date(2020, 1, 1),
fin: new Date(2020, 1, 2),
nombre: 'Idea',
id: 'Tarea 0',
tipo:'tarea',
progreso: 45,
lDesabilitado: true,
styles: { colorProgreso: '#ffbb54', colorProgresoSeleccionado: '#ff9e0d' },
},
...
];
<Gantt tareas={tareas} />
Puede canalizar acciones
<Gantt
tareas={tareas}
modoVista={view}
alCambiarFecha={onTaskChange}
onTaskDelete={onTaskDelete}
alCambioProgreso={alCambioProgreso}
alDobleClic={alDobleClic}
alClic={alClic}
/>
Cómo ejecutar el ejemplo
cd ./example
npm install
npm start
Configuración Gantt
PropsGantt
Nombre del parámetro | Tipo | Descripción |
---|---|---|
tareas* | Tarea | Matriz de tareas |
OpcionEvento | interface | Especifica eventos de Gantt. |
OpcionVisualizacion | interface | Especifica el tipo de vista y el idioma de |
visualización de la línea de tiempo. | ||
OpcionEstilismo | interface | Especifica gráficos y estilos de tareas globales. |
OpcionEvento
Nombre del parámetro | Tipo | Descripción |
---|---|---|
alSeleccionar | (tarea: Tarea, lSeleccionado: boolean) => void | Especifica la función que se ejecutará en el evento de selección o anulación de selección de la barra de tareas. |
alDobleClic | (tarea: Tarea) => void | Especifica la función que se ejecutará en la barra de tareas en el evento DoubleClick. |
alClic | (tarea: Tarea) => void | Especifica la función que se ejecutará en el evento alClic de la barra de tareas. |
alBorrar* | (tarea: Tarea) => void/boolean/Promise/Promise | Especifica la función que se ejecutará en la barra de tareas en el evento de pulsación del botón Eliminar. |
alCambiarFecha* | (tarea: Tarea, hijos: Tarea[]) => void/boolean/Promise/Promise | Especifica la función que se ejecutará cuando finalice el evento de barra de tareas de arrastre en la línea de tiempo. |
alCambioProgreso* | (tarea: Tarea, hijos: Tarea[]) => void/boolean/Promise/Promise | Especifica la función que se ejecutará cuando finalice el evento de progreso de la barra de tareas de arrastre. |
alClicExpandir* | alClicExpandir: (tarea: Tarea) => void; | Especifica la función que se ejecutará en el clic del expansor de tabla |
pasoTiempo | number | Un valor de paso de tiempo para alCambiarFecha. Especifique en milisegundos. |
* El gráfico deshace la operación si el método devuelve falso o error. Los parámetros secundarios devuelven registros de un nivel de profundidad.
OpcionVisualizar
Nombre del parámetro | Tipo | Descripción |
---|---|---|
modoVista | enum | Especifica la escala de tiempo. Hora, 1/4 de día, 1/2 día, Día, |
Semana (ISO-8601, el primer día es lunes), Mes, 1/4 de año, Año. | ||
vistaFecha | date | Especifica la fecha y hora de visualización para la visualización. |
preContadorPasos | number | Especifica un espacio vacío antes de la primera tarea. |
locale | string | Especifica el idioma del nombre del mes. Formatos compatibles: |
ISO 639-2, Java Locale. | ||
rtl | boolean | Establece el modo rtl. |
:------------- | :------ | :------------------------------------------------------------------ |
OpcionStyling
Nombre del parámetro | Tipo | Descripción |
---|---|---|
altoCabecera | number | Especifica la altura del encabezado. |
altoGantt | number | Especifica la altura del diagrama de Gantt sin |
encabezado. El valor predeterminado es 0. Significa que | ||
no hay limitación de altura. | ||
anchoColumna | number | Especifica el ancho del período de tiempo. |
anchoCeldaLista | string | Especifica el ancho de celda de la lista de tareas. La |
cadena vacía significa "sin visualización". | ||
altoFila | number | Especifica la altura de la fila de tareas. |
radioEsquinaBarra | number | Especifica el redondeo de las esquinas de la barra de |
tareas. | ||
rellenoBarra | number | Especifica la ocupación de la barra de tareas. Se |
establece en porcentaje de 0 a 100. | ||
anchoCanal | number | Especifica el ancho del control de eventos de arrastre |
de la barra de tareas para las fechas de inicio y | ||
finalización. | ||
fontFamily | string | Especifica la fuente de la aplicación. |
fontSize | string | Especifica el tamaño de fuente de la aplicación. |
colorBarraProgreso | string | Especifica el color de relleno del progreso de la barra |
de tareas globalmente. | ||
colorBarraProgresoSeleccionada | string | Especifica el color de relleno del progreso de la barra |
de tareas globalmente al seleccionar. | ||
colorFondoBarra | string | Especifica el color de relleno de fondo de la barra de |
tareas globalmente. | ||
colorFondoBarraSeleccionada | string | Especifica el color de relleno de fondo de la barra de |
tareas globalmente al seleccionar. | ||
colorCursor | string | Especifica el color de relleno de la flecha de relación. |
sangriaCursor | number | Especifica la sangría derecha de la flecha de relación. |
Conjuntos en px | ||
colorHoy | string | Especifica el color de relleno de la columna del período |
actual. | ||
TontenidoAyudaHerramienta | Especifica la vista de información sobre herramientas | |
para la barra de tareas | ||
TablaListaTareas | Especifica la vista de encabezado de la lista de tareas | |
TablaListaTareas | Especifica la lista de tareas Vista de tabla | |
:------------------------- | :----- | :------------------------------------------------------- |
- ContenidoAyudaHerramienta:
React.FC<{ tarea: Tarea; fontSize: string; fontFamily: string; }>;
- TablaListaTareas:
React.FC<{ altoCabecera: number; anchoFila: string; fontFamily: string; fontSize: string;}>;
- TablaListaTareas:
React.FC<{ altoFila: number; anchoFila: string; fontFamily: string; fontSize: string; locale: string; tareas: Tarea[]; idTareaSeleccionada: string; estaTareaSeleccionada: (idTarea: string) => void; }>;
Tarea
Nombre del parámetro | Tipo | Descripción |
---|---|---|
id* | string | id de la tarea |
nombre* | string | Nombre para mostrar de la tarea. |
tipo* | string | Tipo de visualización de tareas: tarea, hito, |
proyecto | ||
inicio* | Date | Fecha Inicio de tarea |
fin* | Date | Fecha Fin de la tarea. |
progreso* | number | Progreso de la tarea. Se establece en porcentaje de 0 a 100. |
dependencies | string[] | Especifica los ID de las dependencias principales. |
styles | object | Especifica la configuración de estilo de la barra de tareas |
localmente. El objeto se pasa con los siguientes atributos: | ||
- backgroundColor: String. Especifica el color de | ||
relleno de fondo de la barra de tareas localmente. | ||
- backgroundSelectedColor: Cadena. Especifica el color | ||
de relleno de fondo de la barra de tareas localmente al | ||
seleccionar. | ||
- colorProgreso: Cadena. Especifica el color de relleno | ||
del progreso de la barra de tareas localmente. | ||
- colorProgresoSeleccionado: Cadena. Especifica el color de | ||
relleno del progreso de la barra de tareas globalmente al | ||
seleccionar. | ||
lDesabilitado | bool | Deshabilita todas las acciones para la tarea actual. |
fontSize | string | Especifica el tamaño de fuente de la barra de tareas |
localmente. | ||
Proyecto | string | Nombre del proyecto de tarea |
ocultarHijos | bool | Ocultar artículos para niños. El parámetro funciona solo |
con el tipo de proyecto | ||
:-------------------- | :------- | :---------------------------------------------------------- |
*Requerido