# graph-ticket-sla

> Componente que genera una gráfica donde se indican los tickets; dependiendo de estados.

Latest version **0.0.1** (published 2020-11-23) · 0 weekly downloads

## Install

```sh
npm install graph-ticket-sla
pnpm add graph-ticket-sla
yarn add graph-ticket-sla
bun add graph-ticket-sla
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-11-23 |
| First published | 2020-11-23 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 282.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ccruzax |

## Links

- npm: https://www.npmjs.com/package/graph-ticket-sla
- npm.io page: https://npm.io/package/graph-ticket-sla

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.1 (latest) — 2020-11-23

## README

# TicketSLA

## Descripción

Componente que genera una gráfica donde se indican los tickets; dependiendo de estados.

![graph-ticket-sla](./assets/graph-ticket-sla.png) 

## Versiones

Este proyecto fue generado con [Angular CLI](https://github.com/angular/angular-cli) version 6.0.8.

## Instalación

La descarga de las librerias se hace directamente en el Nexus Axity: `http://devtools.axity.com/nexus3/repository/npm-group/`

Con las siguientes instrucciones:

- `npm adduser --registry http://devtools.axity.com/nexus3/repository/npm-group/` (Ingresar credenciales Active Directory)
- `npm install three-steps-selector --registry http://devtools.axity.com/nexus3/repository/npm-group/ --save`

Para no tener que colocar el registry en cada ocasión, solo agregar un archivo llamado: `.npmrc` al nivel de donde se encuentre el archivo package.json, con el siguiente contenido:

```javascript
# add the URL of the repository
registry = http://devtools.axity.com/nexus3/repository/npm-group/
```

Esto permite ejecutar los comandos que comunmente utilizamos: `npm install`, pero apuntando al repositorio nexus de Axity.

> El repositorio Nexus de Axity descarga librerias internas y tambien las publicas de repositorio de npm.

### Agregar al modulo principal de Angular

```typescript
import { GraphTicketSlaModule } from 'graph-ticket-sla';
@NgModule({
  imports: [
    ...,
    GraphTicketSlaModule
  ],
})
export class AppModule { }
```

## Como usar

```html
<axy-graph-ticket-sla
  title="Incidentes SLA desde librería"
  [dataBehaviourSubject]="dataBehaviourSubjectTicketSLA"
  [graphDimensions]="dimensionsSLA"
></axy-graph-ticket-sla>
```

> El componente se autoajusta al contenedor donde se coloque, por lo que es necesario colocar el componente dentro de un elemento contenedor como el ejemplo.
> La propiedad 'graphDimensions', es para ajustar el tamaño de la gráfica. Se le debe de pasar un objeto con la siguiente estructura.

```typescript
const dimensionsSLA = {
  height: 300,
  width: "100%"
};
```

> El dato que reciba el dataBehaviourSubject, será con esta estructura. A través del BehaviorSubject, con su método *next()*, se hará el envío de la información.

```typescript
const exampleTicketSLA = {
  body: [
    {
      slalevel: [
        {
          total: 6,
          totalnok: 0,
          sla: 100.0,
          slanok: 0.0
        }
      ],
      prioridadall: [
        {
          tipo: 0,
          slacantidad: 6
        }
      ],
      prioridadeachone: [
        {
          tipo: "4",
          label: "Baja",
          ocurrencias: 1,
          total: 6,
          data: [
            {
              slalevel: 0,
              slacantidad: 6
            }
          ]
        }
      ]
    }
  ],
  message: "Success",
  status: "200"
};

// Envío de información desde el padre al componente.
dataBehaviourSubjectTicketSLA.next(exampleTicketSLA);
```

![graph-ticket-sla-exp](./assets/graph-ticket-sla-exp.png) 

## Contribuciones

Mediante pull-request se evaluan los cambios a componentes, mas información:
francisco.rodriguez@axity.com

## Axity

![Axity logo](../../assets/axity.png "Axity")

---
_Source: https://npm.io/package/graph-ticket-sla · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._