Availability Circle

Descripción

Componente que genera una gráfica circular, donde se pone la disponibilidad por sectores, mediante colores rojo y verde.

Versiones

Este proyecto fue generado con 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:

# 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

import { AvailabilityCircleModule } from 'availability-circle';
@NgModule({
  imports: [
    ...,
    AvailabilityCircleModule
  ],
})
export class AppModule { }

Como usar

<axy-availability-circle
  title="Disponibilidad de NaaS desde libreria"
  [dataBehaviourSubject]="dataBehaviourSubjectAvailabilityCircle"
>
</axy-availability-circle>

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

const exampleAvailabilityCircle = [
		{
			serialdevice: 'Q2KD-ZW52-MLMH',
			state: 'N.L.',
			pipeNumber: '08',
			pipeType: 'cext',
			ocurrencias: 1,
			network: {
				id: 'L_685673043267165925',
				pipeNumber: '08',
				pipeType: 'cext',
				link:
					'https://intellego365.sharepoint.com/sites/SMNYLOperacion/Informacion_Dia1/Informacion_por_sitio/08-MTY_TEVO-LAN/ID08.pdf',
				organizationId: '685673043267158072',
				name: 'MTY_TEVO-LAN',
				timeZone: 'America/Los_Angeles',
				type: 'combined'
			},
			device: {
				lat: 25.64136,
				lng: -100.31997,
				address: 'Av.  Pedro Ramírez Vázquez No. 200-B. Col. Valle Oriente C.P. 66269',
				serial: 'Q2KD-ZW52-MLMH',
				mac: 'e0:cb:bc:8e:5b:83',
				lanIp: '129.170.75.23',
				tags: ' TEVO ',
				url: 'https://n218.meraki.com/MTY_TEVO-LAN-wir/n/Iw5f_cAd/manage/nodes/new_list/247165646429059',
				networkId: 'L_685673043267165925',
				name: 'MTY_TEVO_AP03',
				model: 'MR42',
				firmware: 'wireless-25-13',
				today: { $date: 1588205562173 }
			}
		}
	];

// Envío de información desde el padre al componente.
dataBehaviourSubjectAvailabilityCircle.next(exampleAvailabilityCircle);

Contribuciones

Mediante pull-request se evaluan los cambios a componentes, mas información: [email protected]

Axity