tareas-gantt-reactivo-vfoxapi

v1.0.8

Published

9 months ago

Grafico Gantt Interactivo parar Reactive con TypeScript.

Downloads

0High
0Medium
0Low

juanillofox

react gantt typescript chart svg gantt-chart gantt chart react-gantt tarea

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

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

OpcionStyling

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

*Requerido

Licencia

MIT