# tareas-gantt-reactivo-vfoxapi

> Grafico Gantt Interactivo parar Reactive con TypeScript.

Latest version **1.0.8** (published 2023-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install tareas-gantt-reactivo-vfoxapi
pnpm add tareas-gantt-reactivo-vfoxapi
yarn add tareas-gantt-reactivo-vfoxapi
bun add tareas-gantt-reactivo-vfoxapi
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-08-09 |
| First published | 2023-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 7 |
| Unpacked size | 677.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | JuanilloFox |
| Maintainers | juanillofox |
| Keywords | react, gantt, typescript, chart, svg, gantt-chart, gantt chart, react-gantt, tarea |

## Links

- npm: https://www.npmjs.com/package/tareas-gantt-reactivo-vfoxapi
- Repository: https://github.com/JuanilloFox/tareas-gantt-reactivo-vfoxapi
- Issues: https://github.com/JuanilloFox/tareas-gantt-reactivo-vfoxapi/issues
- npm.io page: https://npm.io/package/tareas-gantt-reactivo-vfoxapi

## Dependencies (7)

- [npm](https://npm.io/package/npm.md) ^9.8.1
- [svgo](https://npm.io/package/svgo.md) ^3.0.2
- [word-wrap](https://npm.io/package/word-wrap.md) ^1.2.5
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.22.9
- [source-map-resolve](https://npm.io/package/source-map-resolve.md) ^0.6.0
- [@rollup/plugin-babel](https://npm.io/package/@rollup/plugin-babel.md) ^6.0.3
- [@npm-chrome-extensions/react-devtools](https://npm.io/package/@npm-chrome-extensions/react-devtools.md) ^3.4.2-dev.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2023-08-09
- 1.0.7 — 2023-08-06
- 1.0.6 — 2023-08-01
- 1.0.5 — 2023-07-25
- 1.0.4 — 2023-07-23
- 1.0.3 — 2023-07-20
- 1.0.2 — 2023-07-20

## README

# tareas-gantt-react

## Diagrama de Gantt interactivo para React con TypeScript.

![ejemplo](https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png)

## [Demostración en vivo](https://juanillofox.github.io/tareas-gantt-react-vfoxapi/)

## Instalar

```
npm install tareas-gantt-reactivo
```

## Cómo usarlo

```javascript
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

```javascript
<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](#Tarea) | Matriz de tareas                                   |
| [OpcionEvento](#OpcionEvento)     | interface     | Especifica eventos de Gantt.                       |
| [OpcionVisualizacion](#OpcionVisualizacion) | interface     | Especifica el tipo de vista y el idioma de         |
|                                 |               | visualización de la línea de tiempo.               |
| [OpcionEstilismo](#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<void>/Promise<boolean>                   | 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<void>/Promise<boolean> | 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<void>/Promise<boolean> | 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; }>;`](https://github.com/JuanilloFox/tareas-gantt-reactivo-vfoxapi/blob/main/src/components/other/AyudaHerramienta.tsx#L56)
- 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

## Licencia

[MIT](https://oss.ninja/mit/jaredpalmer/)

---
_Source: https://npm.io/package/tareas-gantt-reactivo-vfoxapi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._