Tareas-gantt-reactivo-vfoxapi NPM

tareas-gantt-react

Diagrama de Gantt interactivo para React con TypeScript.

ejemplo

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
:--------------------	:-------	:----------------------------------------------------------