Saltar a contenido

Plantillas (templates)

Las plantillas (templates) son elementos imprescindibles para el funcionamiento de Netin.

Mediante la definición y configuración de sus parámetros se indica al sistema:

  • Los drivers que leen la información de los dispositivos monitorizados.
  • Las variables que se van a leer de cada dispositivo.
  • Qué variables, de todas las leídas, se van a representar en el panel de dispositivo y cómo se van a mostrar (tablas, gráficos, mapas clave-valor, métricas, indicadores... y su posición en el panel).
  • Las alarmas de usuario, definiendo las condiciones de los eventos que las dispararán.

Netin proporciona una colección de plantillas preconfiguradas y ya cargadas en el sistema (disponibles en el Repositorio de Netin). El usuario puede modificar estas plantillas ya creadas, utilizándolas como base para adaptarlas a sus necesidades, o crear plantillas totalmente nuevas desde cero.

Gestión de plantillas (templates)

El Repositorio de Netin permite gestionar las plantillas (templates) dentro del sistema.

Para acceder al Repositorio:

  1. Hacer clic en el menú Netin WebUI Icon_settingsConfiguración.
  2. En el desplegable, hacer clic en "Repositorio".
  3. En la pantalla Repositorio, hacer clic en la pestaña Plantillas.

Desde la tabla que aparece en esta pantalla se pueden añadir plantillas nuevas, descargar las ya existentes en el sistema y eliminar las que hayan quedado obsoletas.

Info

Para más información consultar el apartado Repositorio de esta documentación.


Configuración de plantillas (templates)

Las especificaciones de la configuración de templates se hacen en un documento YAML (.yml), que nos permite insertar comentarios mediante el símbolo #, y que se estructura en cinco partes:

  • Identificación de la plantilla
  • Ranger filter declaration
  • Origin type declaration
  • DatapointSets declaration
  • Representations

Cada parte debe ser identificada con su nombre en un comentario en el que también se pueden incluir las aclaraciones que se consideren necesarias.

Una vez terminada la configuración de la plantilla, el archivo .yml se sube al Repositorio de Netin para poder aplicarlo a los dispositivos definidos en ella.

Info

Para más información consultar el apartado Repositorio de esta documentación.


Identificación de la plantilla

Las primeras líneas del documento YAML contendrá los siguientes parámetros para identificar cada plantilla (template):

  • alias: (string - obligatorio)
    Nombre identificativo del dispositivo al que se va a aplicar la plantilla (template).
  • templateId: (string)
    Identificador de la plantilla (template).
  • description: (string)
    Información detallada del dispositivo al que se va a aplicar la plantilla (template).
  • templateVersion: (string - obligatorio)
    Número de versión de la plantilla. Tiene que seguir el patrón "0.0.0" (tres dígitos separados por punto).

Ejemplo de "Identificación de plantilla"

SCALANCE XC Template
alias: SCALANCE XC-200
templateId: SCALANCE XC-200
description: Siemens SCALANCE XC-200 Template
templateVersion: '0.0.0'

Ranger filter declaration

En este apartado se especifican los filtros que se van a aplicar en el proceso de búsqueda del Ranger para detectar el dispositivo al que se aplicará la plantilla. Se deben cumplir todos sus parámetros.

Contendrá las siguientes propiedades:

  • rangerFilter:

    • deviceID: (string)
      Código de identificación del dispositivo, asignado por el fabricante, al que se va a aplicar la plantilla.
    • vendorID: (string)
      Código de identificación del fabricante del dispositivo.
    • description: (string)
      Regex que contiene los términos que describen e identifican el tipo de dispositivos a los que se va a aplicar la plantilla.

    Info

    Para obtener información sobre Regex y su sintaxis consulte el siguiente enlace: https://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html

Ejemplo de "Ranger filter declaration"

rangerFilter:
  deviceID: '0x0A0B'
  vendorID: '0x002A'
  description: SIMATIC NET, SCALANCE XC2
origin: "##ICMP_IPAddress##"

Origin type declaration

En este apartado se declaran las configuraciones de los drivers para los dispositivos a los que se aplica la plantilla.

Se especifica el origen (origin) seguido de las propiedades específicas de cada driver.

origin: (string - obligatorio)
Identificación del sistema, subsistema, dispositivo, etc. monitorizado que es la fuente de datos del datapoint, mediante variables de sustitución que garantizan que la plantilla se instancie correctamente.

SNMP

  • originTypes: (array)
    • originType: (string)
      Identificación del tipo de origen (driver, importer o system), con el patrón "sistema-subsistema-drv/importer/sys-nombre del driver o importer". Por ejemplo, netin-ds-drv-snmp, netin-hub-importer-sigfox o netin-ds-sys-zavod.
    • basicConfig: (object)
      Configuración básica del driver:
      • retries: (integer)
        Número de intentos de conexión.
      • address: (string - obligatorio)
        Dirección IP del dispositivo que se va a leer.
      • port: (integer)
        Número de puerto de destino del dispositivo. El agente SNMP recibe solicitudes en el puerto UDP 161.
      • version: (integer - obligatorio)
        Versión del protocolo SNMP.
      • timeout: (integer)
        Tiempo máximo de espera de una respuesta (en milisegundos).
    • snmpCommunities: (object)
      Las comunidades de SNMP gestionan los derechos de acceso. Son un tipo the contraseña compartida entre la estación de gestión SNMP y el dispositivo, y se usan para autenticar la estación. Los valores estándar por defecto son "public" y "private".
      • readCommunity: (string - obligatorio)
        Por defecto se asignará "public".
      • writeCommunity: (string - obligatorio)
        Por defecto se asignará "private".
    • snmpV3Security: (object)
      En las siguientes propiedades se establecen los opciones de seguridad para el protocolo SNMP V3.
      • authAlgorithm: (string)
        Algoritmo de autenticación. Puede ser:
        • MD5 (por defecto).
        • SHA
      • privacyAlgorithm: (string)
        Algoritmo de privacidad. Puede ser:
        • DES (por defecto).
        • AES128
        • AES192
        • AES256
      • usmUser: (string)
        Nombre de usuario USM.
      • authPassword: (string)
        Contraseña de autenticación.
      • privacyPassword: (string)
        Contraseña de privacidad (encriptación).

Ejemplo de "Origin type declaration" para SNMP

origin: "##ICMP_IPAddress##"
originTypes:
- originType: netin-ds-drv-snmp
  basicConfig:
    retries: 2
    address: "##ICMP_IPAddress##"
    port: 161
    version: 2
    timeout: 5000
  snmpCommunities:
    readCommunity: public
    writeCommunity: private
  snmpV3Security:
    authAlgorithm: MD5
    privacyAlgorithm: DES
    usmUser: ''
    authPassword: ''
    privacyPassword: ''

S7

  • originTypes: (array)
    • originType: (string)
      Identificación del tipo de origen (drv, importer o system), con el patrón "sistema-subsistema-drv/importer-nombre del driver o importer". Por ejemplo, netin-ds-drv-s7.
    • s7BasicConfig: (object)
      Las siguientes propiedades especifican la configuración básica del driver S7.
      • address: (string - obligatorio)
        Dirección IP del dispositivo que se va a leer.
      • rack: (integer)
        Número que indica la posición del rack.
      • slot: (integer)
        Número que indica la posición del slot.
      • deviceType: (string - obligatorio)
        Tipo de dispositivo dentro de la gama SIMATIC S7 CPU. Puede ser:
        • S7-200
        • S7-300
        • S7-400
        • S7-1200
        • S7-1500
        • LOGO!
    • s7ExtraConfig: (object)
      Las siguientes propiedades especifican la configuración avanzada para la conexión de S7.
      • timeoutRequest: (integer)
        Tiempo máximo de espera de una respuesta (en milisegundos).
      • timeoutConnection: (integer)
        Tiempo máximo de conexión (en milisegundos).
      • port: (integer)
        Número de puerto TCP/IP de destino (por defecto el 102).
    • s7Security: (object) Establece la configuración para la contraseña de S7.
      • password: (string)
        Contraseña de acceso.
      • accessProtection: (boolean)
        Establece si se aplica un algoritmo de autenticación (true) o no (false, valor por defecto).
    • s7DiagnosticBuffer (object)
      Opciones del búfer de diagnóstico.
      • logginEnabled: (boolean)
        Indica si la opción de login está habilitada (true) o no (_false, valor por defecto).

Ejemplo de "Origin type declaration" para S7

originTypes:
- originType: netin-ds-drv-s7
  basicConfig:
    address: "10.20.33.20"
    rack: 0
    slot: 2
    deviceType: "S7-1500"
  s7ExtraConfig:
    timeoutRequest: 1000
     timeoutConnection: 3000
    port: 102
  s7Security:
    pasword: ''
    accessProtection: false
  s7DiagnosticBuffer:
    logginEnabled: false

ICMP

  • originTypes: (array)
    • originType: (string)
      Identificación del tipo de origen (drv, importer o system), con el patrón "sistema-subsistema-drv/importer-nombre del driver o importer". Por ejemplo, netin-ds-drv-icmp.
      • address: (string - obligatorio)
        Dirección IP del dispositivo que se va a leer.
      • count: (integer)
        Cantidad de mensajes ICMP que se enviarán al destino en cada polling. Se recomienda mínimo 3.
      • timeout: (integer)
        Tiempo máximo de espera de una respuesta (en milisegundos).

Ejemplo de "Origin type declaration" para ICMP

originTypes:
- originType: netin-ds-drv-icmp
address: "##ICMP_IPAddress##"
count: 4
timeout: 1000

PNIO

  • originTypes: (array)
    • originType: (string)
      Identificación del tipo de origen (drv, importer o system), con el patrón "sistema-subsistema-drv/importer-nombre del driver o importer". Por ejemplo, netin-ds-drv-pnio.
      • ipAddress: (string - obligatorio)
        Dirección IP del dispositivo que se va a leer.
      • gsd: (string)
        Nombre del archivo GSD compilado que se usará para la traducción de textos.

Ejemplo de "Origin type declaration" para PNIO

originTypes:
- originType: netin-ds-drv-pnio
ipAddress: "##ICMP_IPAddress##"
gsd: GSDML-V2.33-Siemens-ET200MP-20180405

DatapointSets declaration

En este apartado se establece la configuración para cada conjunto de datapoints.

La estructura y parámetros de este apartado son:

datapointSets

  • datapointSets: (array - obligatorio)
    Inicia la declaración del conjunto de datapoints. Un template puede contener varios datapointSet.

    • Nombre del datapointSet como comentario (opcional).
    • datapointSetType: (string - obligatorio)
      Tipo de datapointset. Puede ser:

      • map
        Mapas clave-valor utilizados para representar estructuras de datos por pares (cada clave tiene un solo valor), por ejemplo, nombre de dispositivo: SIMATIC ET200SP IM155-6 PN, tipo: ET200SP, etc.
      • tableStatic
        Las tablas estáticas no varían el número de filas e índices.
      • tableDynamic
        Las tablas dinámicas se adaptan cambiando su tamaño o los índices cuando es necesario.
    • datapointSetId: (string - obligatorio)
      Identificación del datapointSet. Se pueden usar letras (mayúsculas y minúsculas) y espacios en blanco.

    • alias: (string - obligatorio)
      Nombre identificativo del datapointSet.
    • description: (string - obligatorio)
      Descripción detallada del datapointSet.

      En el caso de que el tipo de datapointSet sea una tabla, después de "description" añadimos además los siguientes elementos:
    • tableAddress: (object - obligatorio)
      Configuración de la dirección para tablas.
      • rootAddress: (string)
        Dirección principal de la tabla.
      • indexes: (array)
        Enumeración de los índices de la tabla, en diferentes líneas precedidos de guión medio (-).

Ejemplo de "DatapointsSets declaration" para un mapa

datapointSets:
# ICMP
    - datapointSetType: map
      datapointSetId: ICMP
      alias: Ping test
      description: Ping (ICMP Echo request) test
      datapoints:
        .
        .
        .

Ejemplo de "DatapointsSets declaration" para una tabla estática

datapointSets:
# ifTable
    - datapointSetType: tableStatic
      datapointSetId: ifTable
      alias: ifTable
      description: 'A list of interface entries. The number of entries   
        is given by the value of ifNumber.'
      tableAddress:
        rootAddress: "1.3.6.1.2.1.2.2"
        indexes:
        - ifIndex
      datapoints:
        .
        .
        .

Ejemplo de "DatapointsSets declaration" para una tabla dinámica

datapointSets:
# dot1qVlanCurrentTable
    - datapointSetType: tableDynamic
    datapointSetId: dot1qVlanCurrentTable
    alias: dot1qVlanCurrentTable
    description: A table containing current configuration information
      for each VLAN currently configured into the device by
      (local or network) management, or dynamically created
      as a result of GVRP requests received.
    tableAddress:
        rootAddress: 1.3.6.1.2.1.17.7.1.4.2
        indexes:
        - dot1qVlanTimeMark
        - dot1qVlanIndex
    datapoints:
        .
        .
        .


Configuraciones de datapoints

A continuación se detalla la configuración de los distintos datapoints que componen el datapointSet:

  • datapoints: (array - obligatorio)
    Inicia la configuración del conjunto de datapoints que forman ese datapointSet. Para cada datapoint que forme parte del datapointSet se indicará:

  • Nombre del datapoint como comentario (opcional).

  • Las diferentes configuraciones que se pueden aplicar al datapoint:
    • commonConfig
    • addressConfig
    • alertConfig
    • calcConfig
    • convConfig
    • defaultValueConfig
    • unitsConfig
    • valueMapConfig


commonConfig
  • commonConfig: (object - obligatorio)
    Permite establecer los parámetros clave para la identificación del datapoint.
    • datapointId: (string - obligatorio)
      Identificación del datapoint. Se pueden usar letras (mayúsculas y minúsculas) y espacios en blanco.
    • alias: (string - obligatorio)
      Nombre identificativo del datapoint.
    • description: (string - obligatorio)
      Descripción detallada del datapoint.
    • syntaxInfo: (string)
      Describe el tipo de datos de la variable.
    • datapointType: (string - obligatorio)
      Tipo de datapoint definido. Puede ser:
      • SIMPLE (se sobrescribe cada vez que se actualiza).
      • TIMEPOINT (se guarda en base de datos cada vez que se actualiza para tener un "histórico").

Ejemplo de commonConfig

  datapoints:
  # ICMPEchoRequest
  - commonConfig:
      datapointId: ICMPEchoRequest
      alias: State
      description: Overall device status, including connection status
      syntaxInfo: boolean
      datapointType: SIMPLE
  addressConfig:
    .
    .
    .


addressConfig
  • addressConfig: (object)
    Permite configurar la información necesaria para acceder a los valores.
    • dataType: (string - obligatorio)
      Tipos de datos que Netin lee. Puede ser:
      • BYTE
      • INTEGER
      • LONG
      • FLOAT
      • STRING
      • BOOLEAN
      • DATE
    • originType: (string - obligatorio)
      Identificación del tipo de origen del datapoint: cada tipo de origen puede tener un significado diferente, aunque es importante que para un mismo sistema o dispositivo donde se utilicen diferentes drivers, y por lo tanto diferentes originType, el significado de origin sea el mismo.
    • originDataType: (string - obligatorio)
      Identificación del tipo de dato.
    • originAddress: (string - obligatorio)
      Define la dirección de este datapoint para el originType.
    • originAccessType: (string - obligatorio)
      Nivel de acceso al datapoint. Puede ser:
      • read-only (solo lectura).
      • write-only (solo escritura).
      • read-write (lectura y escritura).
      • not-accessible (no accesible).
    • receiveMode: (string - obligatorio)
      Modo de recepción. Puede ser:
      • polling (sondeo cada cierto tiempo).
      • singleQuery (respuesta a una pregunta).
      • subscription (suscripción de aviso en el momento que se produzcan cambios).
    • pollingGroup: (string - obligatorio)
      Si el modo es "polling" en esta propiedad indicamos el periodo de sondado del dato. Se pueden indicar las opciones admitidas en los comentarios del inicio de la sección, por ejemplo, 5s, 10s, 30s, 1m, 5m, 10m, 15m, 30m,1h, 4h, 6h, 12h, 1d.

Ejemplo de addressConfig

  addressConfig:
    dataType: BOOLEAN
    originType: netin-ds-drv-icmp
    originDataType: BOOLEAN
    originAddress: pingTest
    originAccessType: read-only
    receiveMode: polling
    pollingGroup: 30s
        .
        .
        .


alertConfig
  • alertConfig: (object)
    Contiene la configuración de disparadores, basados en condiciones lógicas, que permiten emitir eventos de alarmas. Sobre un mismo datapoint pueden configurarse varias alertas que expresen diferentes niveles de severidad, o el mismo nivel con diferentes textos o configuraciones.
    La estructura de alertConfig es la siguiente:
    • evaluations: (array - obligatorio)
      Inicia el conjunto de alarmas definidas para el datapoint. Cada evaluations tiene una o más expressions.

      • expressions: (array)
        Contiene tantas expression como condiciones deban cumplirse para disparar la alarma.
        • expression: (string)
          Cada condición cuya evaluación lógica (true o false) indicará si debe dispararse la alerta.
        • symbol: (string)
          Alias identificativo asignado a cada expression.
      • logic: (string)
        Relaciona (utilizando symbol) las expression configuradas para construir la lógica necesaria para lanzar la alerta.
      • severity: (integer)
        Severidad de la alarma con los siguientes rangos:
      Rango Nivel Netin Automation Level Representación Significado
      -1 NO SEVERITY OK NO COLOR No tiene configuración de alarma.
      0 OK OK GREEN - STEADY Representa estado correcto.
      1-200 LOG - | INFORMATIONAL GREY - STEADY Evento meramente informativo, no es necesario ninguna acción.
      201-400 INFORMATION LowLow | WARNING BLUE - STEADY Información de un estado o configuración incorrecta que no afecta a la operación o funcionamiento del sistema, pero debería ser subsanado.
      401-600 WARNING Low | MINOR YELLOW - STEADY Notificación de un estado problemático. El sistema puede trabajar de una forma degradada o está cerca del fallo.
      601-800 ERROR High | MAJOR RED - STEADY Notificación de error o fallo. El sistema falla o no está trabajando con todas sus funciones.
      801-1000 ERROR HighHigh | CRITICAL RED - FLASH Notificación de fallo crítico. El sistema se encuentra en un estado en el que puede sufrir daños o afectar de forma grave el servicio.
      • text: (string)
        Texto descriptivo que nos proporciona información sobre la alarma.
      • textHelp: (string)
        Texto de ayuda para entender y solucionar la alarma.
      • onStartup: (boolean)
        Valor que indica que la alerta debe dispararse en caso de se cumplan (true) las condiciones en el arranque del agente. Su valor por defecto es false.
      • ackable: (boolean)
        Valor que indica la necesidad de reconocimiento de la alarma por parte del usuario (true) o no (false, valor por defecto). Cuando una alerta solicita ser reconocida no desaparece de la interfaz hasta que un usuario realiza el reconocimiento.
      • audited: (boolean)
        Valor que indica si la alarma debe ser auditada (true) o no (false, valor por defecto).
      • facility: (integer)
        Valor que indica la procedencia o grupo de recursos al que pertenece la alarma. Puede ser:
      Facility Descripción
      0 Automation Control System.
      Todos los elementos directamente relacionados con el control del sistema de automatización, por ejemplo, autómatas programables, robots...
      1 Fieldbus Devices.
      Todos los elementos relacionados con el bus de campo, por ejemplo, switches en redes PROFINET o Ethernet/IP, Drives, I/O Devices...
      2 Modular I/O.
      Dispositivos modulares de entradas/salidas (módulos).
      3 HMI Systems.
      Dispositivos de operación y visualización, por ejemplo, pantallas táctiles.
      4 Production Control System.
      Todos los elementos relacionados con el control de la producción, por ejemplo, sistemas RFID o escáneres.
      5 Industrial Network Devices.
      Redes de comunicaciones MES/ERP relacionadas con los sistemas de automatización.
      6 SCADA/MES Systems.
      Sistemas SCADA o sistemas MES.
      7 Auxiliary Elements.
      Elementos auxiliares, por ejemplo, pistolas de códigos de barras o monitores de producción.
      8-32 Reserved.
      Reservado para usos futuros.
      > 32 User defined
      Niveles aplicables por el usuario.
      • hidden: (boolean)
        Valor que indica si la alarma se mostrará (false, valor por defecto) o no (true) en la interfaz (WebUI).
      • broadcast: (boolean)
        Valor que indica si la alarma debe ser transmitida a otro sistema (true), por ejemplo, NetinHUB, o no (false, valor por defecto).
      • poppable: (booblean)
        Valor que indica si la alarma debe mostrarse en ventana emergente en la interfaz (WebUI) dada su importancia (true) o no (false, valor por defecto).

Ejemplo de alertConfig

  alertConfig:
    evaluations:
    - expressions:
      - expression: datapoint.rawValue == "DESC"
        symbol: evalID1
      logic: evalID1
      severity: 1
      text: Device ${device[deviceInfo.deviceID].rawValue} disconected
      textHelp: Check the plug/cable or power supply of the device
      onStartup: true
      ackable: false
      audited: false
      facility: 1
      hidden: false
      broadcast: false
      poppable: false
    - expressions:
      - expression: datapoint.rawValue == 2
        symbol: evalID1
      logic: evalID1
      severity: 1
      text: SCALANCE ${device[deviceInfo.deviceID].rawValue - 
        device[deviceInfo.deviceAddress].rawValue} in fault state
      textHelp: Please check the SCALANCE configuration
      onStartup: true
      ackable: false
      audited: false
      facility: 1
      hidden: false
      broadcast: false
      poppable: false


calcConfig
  • calcConfig:
    Contiene la configuración para la creación de un nuevo datapoint (calculated datapoint) basado en operaciones lógicas, aritméticcas, relacionales o de cadenas de caracteres con uno o varios datapoints. Por lo tanto, carecen de addressConfig.
    Los datapoint que intervienen en la operación se llaman operand datapoint y deben tomar siempre el rawValue para evitar conflictos.
    • expression: contiene la operación entre operand datapoints.

Ejemplo de calcConfig

  calcConfig:
    expression: 'device[ICMP.ICMPEchoRequest].rawValue ? 
      device[snMspsReport.snMspsFaultState].value : "DESC"'


convConfig
  • convConfig:
    Contiene la configuración de un proceso de conversión de los valores brutos (rawValue) de un datapoint mediante expresiones lógicas, aritméticas, relacionales o de cadenas de caracteres.
    • expression: contiene la operación para realizar la conversión.

Ejemplo de convConfig

  convConfig:
    expression: "${datapoint.rawValue / 1e6} Mbits/s"


defaultValueConfig
  • defaultValueConfig:
    Contiene la configuración para inicializar los valores de un datapoint con una constante, tanto value como rawValue.
    Sus parámetros son:
    • rawValue: (string, integer, number o boolean dependiendo del datapoint)
    • value: (string, integer, number o boolean dependiendo del datapoint)
    • isDefault (boolean)

Ejemplo de convConfig

  defaultValueConfig:
    rawValue: true
    value: "OK"
    isDefault: false


unitsConfig
  • unitsConfig: contiene la configuración para realizar una conversión de unidades de medida de ingeniería desde rawValue a value. Sus parámetros son:
    - from: (string)
    - to: (string)
    - toBest: (boolean)
    - exclude: "" (string)

Ejemplo de unitsConfig

  unitsConfig:
    from: "b"
    to: "TB"
    toBest: false
    exclude: ""


valueMapConfig
  • valueMapConfig: contiene la configuración para realizar una conversión mediante un mapa de sustitución desde rawValue a value. Sus parámetros son:
    • map: entre corchetes [ ] se indica el conjunto de valores de origen y a sustituir que forma el mapa.

      • key: valor de origen que se quiere sustituir.
      • value: nuevo valor por el que se va a sustituir el dato original. Si es texto lo ponemos entre comillas "".

      Estos dos parámetros se ponen entre llaves { } y se separan entre si por una coma (,) y un espacio en blanco.

Ejemplo de valueMapConfig

  valueMapConfig:
    map:[
        {key: 1, value: "OK"}
        {key: 2, value: "BAD"}
        {key: 3, value: "UNCERTAIN"}
    ]

Toma el valor de origen (key) y lo sustituye en la representación del widget, en el panel de dispositivo, por los valores especificados en cada value.


Representations

Este apartado del documento YAML contiene las especificaciones para saber qué controles se deben introducir y cómo presentar la información que el usuario va a ver a través de la interfaz (WebUI) de Netin.

El espacio donde se representa la información en la interfaz se ha estructurado en forma de grid cuyas filas y columnas indicarán y delimitarán las posiciones en las que se van a colocar los diferentes widgets. El ancho del grid es de 8 columnas.

Grid_fullscreen.png

La interfaz de NetinDS es totalmente responsive para su visualización en dispositivos móviles como teléfonos o tabletas. El grid de representación disminuye el número de columnas en función del tamaño de la pantalla y recoloca automáticamente los elementos (widgets).

Grid-resize_01.png

Grid-resize_02.png

Para recolocar los widgets se toma como referencia su posición en el grid original de 8 columnas, y se desplazan de izquierda a derecha y de arriba a abajo, acoplándolos al nuevo tamaño de pantalla. Si el componente es muy ancho para el nuevo espacio, pasa a colocar el siguiente elemento, y deplaza el widget más grande a la siguiente fila con espacio suficiente.


Se pueden representar los siguientes tipos de widgets:

  • Mapa clave-valor (map)

MapaClaveValor.png

  • Tabla (table)

Tabla.png

  • Tarjetas (metric)

Tarjestas.png

  • Indicadores (gauges)*

Gauge.png

  • Gráficos (charts)*

Grafico.png


*En pruebas.


Una representación es un array que contiene las definiciones de todos los elementos que se van a representar, y que está formada por dos objetos:

  • commonConfig: define, para cada widget a representar, las propiedades que son comunes a todos los elementos, como la posición que ocupará, el tipo y el título.
  • specificConfing: define las propiedades específicas de cada tipo de widget que se va a representar.

La estructura de las representaciones es la siguiente:

  • representation: (array)
    Inicia la configuración de la representación. Para cada elemento a representar se completan los parámetros que es explican a continuación.
  • Nombre del elemento (como comentario #) que se va a representar (opcional).
  • data: (string - obligatorio)
    Fuente de datos (datapoint o datapointSet) de la que se toma la información que se va a representar. Tendrá la forma device[nombre del elemento], por ejemplo, "device[ifTable]".

Ejemplo de inicialización de una "representation"

representation:
# deviceInfo map
- data: device[deviceInfo]
  commonConfig:
    .
    .
    .
  specificConfig:
    .
    .
    .

commonConfig

  • commonConfig: (object)
    Sus parámetros son:
    • firstRow: (integer - obligatorio)
      Indica la fila del grid en la que empieza a pintarse el widget. Valor mínimo 1, valor máximo 50.
    • firstColumn: (integer - obligatorio)
      Indica la columna del grid en la que empieza a pintarse el widget. Valor mínimo 1, valor máximo 8.
    • widgeWidth: (integer - obligatorio)
      Indica el espacio que ocupará de ancho el widget en número de columnas del grid. Valor mínimo 1, valor máximo 8.
    • widgetHeight: (integer - obligatorio)
      Indica el espacio que ocupará de alto widget en número de filas del grid. Valor mínimo 1, valor máximo 20.
    • widgetType: (string - obligatorio)
      Indica el tipo de widget que se va a representar:
      • map
      • table
      • metric
      • gauge
      • chart
    • widgetTitle: Nombre que le damos al widget que se va a representar.

Ejemplo de "commonConfig" en una "representation":

  commonConfig:
    firstRow: 1
    firstColumn: 1
    widgetWidth: 2
    widgetHeight: 5
    widgetType: map
    widgetTitle: Device Info
  specificConfig:
    .
    .
    .


specificConfig

  • specificConfig: (obligatorio)
    Sus parámetros dependen del tipo de elemento que se va a representar:
Mapa clave-valor (map)

Para representar un mapa clave-valor hay que configurar los siguientes parámetros:

  • format: (array)
    Contiene para cada fila del mapa clave-valor las siguientes propiedades:
    • order: (integer - obligatorio)
      Número de orden de la fila dentro del mapa clave-valor. El cero (0) es la primera posición.
    • datapoint: (string - obligatorio)
      Nombre del datapoint de donde proceden los datos que se van a representar. Debe ser parte del datapointSet que hemos indiciado previamente en la propiedad data al iniciar la configuración de la representación.
    • alias: (string - obligatorio)
      Título que va a aparecer, en esta fila, en el lado "clave" del mapa.
    • fieldType: (string)
      Tipo de datos que se van a representar, en esta fila, en el lado "valor" del mapa. Puede ser string, boolean, numeric, date o severity.
    • utc: Booleano
      Indica si los datos que se van a representar son de tipo tiempo UTC.

MapaClaveValor.png

Ejemplo de "specificConfig" para un mapa

  specificConfig:
    format:
    - order: 0
      datapoint: deviceID
      alias: Name
      fieldType: string
      utc: false
    - order: 1
      datapoint: deviceType
      alias: Type
      fieldType: string
      utc: false
    - order: 2
      datapoint: deviceNetmask
      alias: Netmask
      fieldType: string
      utc: false
    - order: 3
      datapoint: deviceGateway
      alias: Gateway
      fieldType: string
      utc: false
        .
        .
        .
    - order: 7
      datapoint: deviceHWVersion
      alias: HW Version
      fieldType: string
      utc: false


Tabla (table)

Para representar una tabla hay que configurar los siguientes parámetros:

  • pageSize: (integer)
    Establece el número máximo de filas que se mostrarán en una página del grid. El valor mínimo es 5, y el valor máximo 10.
  • filterable: (booleano)
    Indica si la funcionalidad de aplicar filtros a las columnas de la tabla está habilitada (true) o no (false). Luego habrá que habilitar esta propiedad para cada columna.
  • xlsxExportEnabled: (booleano)
    Indica si la funcionalidad de exportar los datos de la tabla a un fichero .xlsx (Excel) está habilitada (true) o no (false).
  • xlsxFilteringEnabled: (booleano)
    Indica si la funcionalidad de aplicar filtros a las columnas de la tabla exportada a un fichero .xlsx (Excel) está habilitada (true) o no (false).
  • format: (array)
    Contiene la configuración para cada columna de la tabla. Sus propiedades son:
    • order: (integer - obligatorio) Número de orden de la columna dentro de la tabla. El cero (0) es la primera posición.
    • datapoint: (string - obligatorio)
      Nombre del datapoint de donde proceden los datos que se van a representar. Debe ser parte del datapointSet que hemos indiciado previamente en la propiedad data al iniciar la configuración de la representación.
    • alias: (string - obligatorio)
      Título de la columna.
    • fieldType: (string)
      Tipo de datos que se van a representar en esa columna. Puede ser string, boolean, numeric, date o severity.
    • utc: (booleano)
      Indica si los datos que se van a representar son de tipo tiempo UTC.
    • fieldGroup: (string)
      Indica si la columna forma parte de la vista "básica" o "avanzada" de la tabla. Sus valores son basic o advanced.
    • filterable: (booleano)
      Indica si la funcionalidad de aplicar filtros en esta columna está habilitada (true) o no (false). Previamente se tiene que haber definido la propiedad filtrable para toda la tabla.
    • filterType: (string)
      Si la columna admite la aplicación de filtros, este parámetro indica su tipo (string, boolean, numeric,date, severity).
    • width: (integer)
      Indica el ancho, en píxeles, de esta columna. El valor mínimo es 1. Por defecto su valor es 100.
    • minScreenSize: (string)
      Tamaño mínimo de pantalla que la columna necesita para su representación, si el tamaño baja del mínimo establecido la columna no aparece. Puede ser:
      • xs (ancho mínimo 320px)
      • s (ancho mínimo 481px)
      • m (ancho mínimo 769px)
      • l (ancho mínimo 1024px)

Tabla_01.png

Ejemplo de "specificConfig" para una tabla

  specificConfig:
    pageSize: 8
    filterable: false
    xlsxExportEnabled: true
    xlsxFilteringEnabled: true
    format:
    - order: 0
      datapoint: ifIndex
      alias: Index
      fieldType: numeric
      utc: false
      fieldGroup: advanced
      filterable: false
      filterType: numeric
      width: 40
      minScreenSize: l
    - order: 1
      datapoint: ifDescr
      alias: Description
      fieldType: string
      utc: false
      fieldGroup: basic
      filterable: false
      filterType: string
      width: 200
      minScreenSize: xs
        .
        .
        .
    - order: 12
      datapoint: ifOutDiscards
      alias: Out Discards
      fieldType: numeric
      utc: false
      fieldGroup: basic
      filterable: false
      filterType: numeric
      width: 100
      minScreenSize: m


Tarjetas (Metric)

Para representar una tarjeta hay que configurar las siguientes propiedades:

  • url: (string)
    URL que se abrirá en una nueva pestaña del navegador cuando el usuario pinche sobre ella en la tarjeta. Si se detecta el prefijo/sufijo ${...} la url tendría que ser parseada.
  • titleEnabled: Booleano
    Indica si se muestra (true, valor por defecto) o no (false) el título de la tarjeta.
  • urlEnabled: Booleano
    Indica el estado de la funcionalidad de enlace de la url (habilitado o no habilitado). Si su valor es true cuando el usuario haga clic en el enlace de la tarjeta se abrirá una nueva pestaña en el navegador con su información. Su valor por defecto es false.
  • lastUpdateEnabled: Booleano
    Indica el estado de la funcionalidad "última actualización". Si su valor es true se mostrará en la tarjeta la fecha de la última actualización. Su valor por defecto es false.

Tarjestas_01.png

Ejemplo de "specificConfig" para una tarjeta (Metric)

  specificConfig:
    url: http://${device[origin]}
    titleEnabled: true
    urlEnabled: true
    lastUpdateEnabled: false


Indicadores (Gauges)

Para representar un indicador hay que configurar las siguientes propiedades:

  • gaugeType: (string)
    Indica el tipo de Indicador que se va a respresentar:
    • ArcGauge

ArcGauge.jpg

- LinearGauge

LinearGaugeV.png LinearGaugeH.png

- RadialGauge

RadialGauge.png

  • showLabels: (boolean)
    Indica si se muestran (true) o no (false) las etiquetas descriptivas del gauge.
  • showTicks: (boolean)
    Indica si se muestran (true) o no (false) las líneas de escala del gauge.
  • startAngle: (integer)
    Para los gauges de tipo "radial" y "arc", indica el ángulo inicial del gauge. El valor mínimo es -360, el valor máximo 360, y el valor por defecto es -45.
  • endAngle: (integer)
    Para los gauges de tipo "radial" y "arc", indica el ángulo final del gauge. El valor mínimo es -360, el valor máximo 360, y el valor por defecto es 225.
  • verticalOriented: (boolean)
    Para los LinearGauge indica su la orientación será vertical (true, valor por defecto) u horizontal (false).
  • maxValue: (integer)
    Indica el valor máximo en el que termina la escala que muestra el gauge. El valor por defecto es 100.
  • minValue: (integer)
    Indica el valor mínimo en el que empieza la escala que muestra el gauge. El valor por defecto es 0.
  • minorUnits: (integer)
    Indica la unidad mínima de la escala del gauge. El valor por defecto es 5.
  • mayorUnits: (integer)
    Indica la unidad máxima de la escala del gauge. El valor por defecto es 100.
  • ticksColor: (string)
    Indica el color en el que se pintarán las líneas de la escala del gauge. El valor se debe introducir con un código hexadecimal. El valor por defecto es #008000.
  • labelsColor: (string)
    Indica el color en el que se pintarán los textos de las etiquetas del gauge. El valor se debe introducir con un código hexadecimal. El valor por defecto es #0000ff.
  • ranges: (array) Permite configurar los rangos que se representarán en el gauge. Sus parámetros son:
    • from: (integer / string)
      Indica el valor inicial del rango en el gauge. Su valor por defecto es 0. El valor también se puede tomar de un datapoint.
    • to: (integer / string)
      Indica el valor final del rango en el gauge. Su valor por defecto es 0. El valor también se puede tomar de un datapoint.
    • severity: (integer)
      Indica el nivel de severidad de la alarma que representa el rango definido. Su valor mínimo es -1, el máximo 4, y el valor por defecto es 0.
      Se definirán tantos rangos como niveles de severidad se quieran representar en el gráfico.
  • format: (array)
    Contiene la configuración general del gauge. Sus parámetros son:
    • datapoint: (string)
      Nombre del datapoint de donde proceden los datos que se van a representar. Debe ser parte del datapointSet que hemos indicado previamente en la propiedad data al iniciar la configuración de la representación.
    • color: (string)
      Indica el color en el que se pintará el puntero (aguja) del gauge. El valor se debe introducir con un código hexadecimal. El valor por defecto es #000000.

RadialGauge_01.png

Gráficos (charts)

Para representar un gráfico hay que configurar los siguientes parámetros:

  • seriesType: (string - obligatorio)
    Tipo de gráfico que se va a representar:

    • area
      Series_Area.png
    • verticalArea
      Series_AreaVertical.png
    • bar
      Series_Bar.png
    • bullet
      Series_Bullet.png
    • donut
      Series_Donut.png
    • line
      Series_Line.png
    • verticalLine
      Series_LineVertical.png
    • pie
      Series_Pie.png
  • exportable: (boolean)
    Indica si la funcionalidad de exportar el gráfico está habilitada (true) o no (false).

  • buttonsConfiguration: (objeto)
    Contiene la configuración de los botones para exportar el gráfico. Sus parámetros son:
    • svg: (objeto)
      Configura el botón para exportar gráficos de tipo svg. Sus propiedades son:
      • enabled: (boolean)
        Indica si el botón para exportar gráficos de tipo svg está habilitado (true) o no (false, valor por defecto).
      • title: (string)
        Establece el nombre con el que exportará el fichero .svg. Por defecto el archivo se guardará con el nombre "netinChart".
    • image: (objeto)
      Configura el botón para exportar gráficos de tipo imagen. Sus propiedades son:
      • enabled: (boolean)
        Indica si el botón para exportar gráficos de tipo imagen está habilitado (true) o no (false, valor por defecto).
      • title: (string)
        Estable el nombre con el que se exportará el fichero de imagen. Por defecto el archivo se guardará con el nombre "netinChart".
      • width: (integer)
        Indica el ancho, en píxeles, de la imagen que se va a exportar. El valor por defecto es 1920.
      • height: (integer)
        Indica el alto, en píxeles, de la imagen que se va a exportar. El valor por defecto es 1080.
    • chartConfiguration: (objeto)
      Contiene la configuración principal del gráfico.
      • showTransitions: (boolean)
        Indica si la funcionalidad de reproducir animaciones está habilitada (true, valor por defecto) o no (false). Por ejemplo, como se dibuja la línea que representa un nuevo valor.
      • zoomForSelection: (boolean)
        Indica si la funcionalidad de hacer zoom sobre el gráfico por selección (haciendo clic sobre el gráfico y arrastrando para seleccionar el área a ampliar) está habilitada (true) o no (false, valor por defecto).

      • zoomForMouseWheel: (boolean)
        Indica si la funcionalidad de hacer zoom sobre el gráfico con la rueda del ratón está habilitada (true) o no (false, valor por defecto.)

      • pannable: (boolean)
        Indica si la funcionalidad "panorámica" del gráfico está habilitada (true) o no (false, valor por defecto). Esta funcionalidad permite hacer clic sobre el gráfico y arrastrar laterlamente para ver más información.

      • title: (string)
        Establece el título del gráfico. Por defecto se muestra "NETIN Chart".
      • colorTitle: (string)
        Indica el color en el que se pintará el texto del título del gráfico. El valor se debe introducir con un código hexadecimal. El valor por defecto es #000000.
      • legend: (objecto)
        Contiene la configuración de la leyenda del gráfico. Sus parámetros son:
        • visible: (boolean) Indica si la leyenda del gráfico se muestra (true, valor por defecto) o no (false).
        • background: (string) Indica el color del fondo de la leyenda del gráfico. El valor se puede introducir con un código hexadecimal (por ejemplo, "#ffffff" para el color blanco) o rgb (por ejemplo, "255,255,255" para el color blanco). El valor por defecto es "transparent".
        • orientation: (string) Indica la orientación de los elementos de la leyenda. Sus valores son:
          • vertical
          • horizontal
        • position: (string)
          Indica en qué lugar del gráfico aparece la leyenda. Los valores posibles son:
          • top (en la parte de arriba).
          • bottom (en la parte de abajo).
          • left (a la izquierda del gráfico).
          • right (a la derecha del gráfico).
          • custom (posición definida por el usuario) a través de las propiedades offsetX y offsetY.
        • widht: (integer)
          Indica el ancho, en píxeles, de la caja que contiene la leyenda cuando su orientación se ha establecido como "horizontal".
        • height: (integer)
          Indica el alto, en píxeles, de la caja que contiene la leyenda cuando su orientación se ha establecido como "vertical".
        • offsetX: (integer)
          Este parámetro nos permite modificar la posición de la leyenda, que hemos establecido previamente en la propiedad position, horizontalmente. Los valores, en píxeles, positivos la desplazarán a la derecha, y los valores negativos a la izquierda.
        • offsetY: (integer)
          Este parámetro nos permite modificar la posición de la leyenda, que hemos establecido previamente en la propiedad position, verticalmente. Los valores, en píxeles, positivos la desplzarán hacia abajo, y los valores negativos hacia arriba.
        • border: (object)
          Contiene la configuración de las características del borde de la caja que contiene la leyenda.
          • dashType: (string)
            Indica el tipo de línea del borde de la leyenda. Sus valores son:
            • dash (línea discontinua formada por guiones).
            • dashDot (línea discontinua alternando guión y punto).
            • dot (línea discontinua formada por puntos).
            • longDash (línea discontinua formada por guiones largos).
            • longDashDot (línea discontinua alternando guión largos y punto).
            • longDashDotDot (línea discontinua alternando guión largo y dos puntos seguidos).
            • solid (línea continua).
          • color: (string)
            Indica el color en el que se pinta la línea del borde de la caja de la leyenda. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
          • width: (integer)
            Indica el tamaño de ancho de la línea en píxeles.
      • tooltip: (objeto)
        Contiene la configuración de las descripciones emergentes del gráfico. Sus propiedades son:
        • shared: (boolean)
          Indica si cada categoría tendrá su propio tooltip (true) o no (false, valor por defecto).
        • visible: (boolean)
          Indica si el tooltip de la serie está habilitado (true) o no (false, valor por defecto).
        • backgroung: (string)
          Indica el color de fondo del tooltip. El valor se puede introducir con un código hexadecimal (por ejemplo, "#ffffff" para el color blanco) o rgb (por ejemplo, "255,255,255" para el color blanco). El valor por defecto es "transparent".
    • axisDefaultConfiguration: (objeto)
      Contiene la configuración relativa a los ejes del gráfico. Sus propiedades son:
      • background: (string)
        Indica el color de fondo de los ejes. El valor se puede introducir con un código hexadecimal (por ejemplo, "#ffffff" para el color blanco) o rgb (por ejemplo, "255,255,255" para el color blanco). El valor por defecto es "transparent".
      • title: (string)
        Establece el texto del título del eje.
      • color: (string)
        Indica el color del texto del título. Este color se aplica a todos los elementos de los ejes. CONFIRMAR CON IVÁN. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
      • labels: (objeto)
        Contiene la configuración para las etiquetas del eje.
        • visible: (boolean) Indica si las etiquetas de los ejes son visibles (true, valor por defecto) o no (false).
        • content: (string) Contiene la función que devuelve el contenido de la etiqueta. El texto se puede dividir en varias líneas utilizando '\n'. Sus valores son:
          • value
          • dataItem
          • format
          • culture
        • rotation: (object) Indica el ángulo de rotación de las etiquetas. Por defecto las etiquetas no están rotadas. Si el eje es horizontal, se puede establecer a "auto" y las etiquetas solo se girarían si el espacio no es suficiente para contener el texto entero.
          • align: (string) Indica la alineación de las etiquetas rotadas en relación a la ranura. Puede tener dos valores:
            • end
            • center
          • angle: (integer) Número que indica el ángulo de rotación de las etiquetas.
      • crosshair: (object)
        Contiene la configuración del crosshair o "punto de mira" del gráfico.
        Los crosshair son líneas verticales y horizontales que en su intersección centran la atención sobre un punto de datos en el gráfico.

        Sus propiedades son:
        • dashType: (string) Indica el tipo de línea del crosshair. Los valores posibles son:
          • dash (línea discontinua formada por guiones).
          • dashDot (línea discontinua alternando guión y punto).
          • dot (línea discontinua formada por puntos).
          • longDash (línea discontinua formada por guiones largos).
          • longDashDot (línea discontinua alternando guión largos y punto).
          • longDashDotDot (línea discontinua alternando guión largo y dos puntos seguidos).
          • solid (línea continua).
        • color: (string)
          Indica el color del crosshair. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
        • opacity: (integer)
          Indica el nivel de opacidad del crosshair. Por defecto es opaco.
        • visible: (boolean)
          Establece si el crosshair del gráfico es visible (true) o no (false, valor por defecto).
        • tooltip: (object)
          Contiene las opciones de configuración para el tooltip del crosshair. Sus propiedades son:
          • visible: (boolean)
            Establece si el tooltip del crosshair es visible (true) o no (false, valor por defecto).
          • background: (string)
            Indica el color de fondo del tooltip del crosshair. El valor se puede introducir con un código hexadecimal (por ejemplo, "#ffffff" para el color blanco) o rgb (por ejemplo, "255,255,255" para el color blanco). El valor por defecto es "transparent".
          • color: (string)
            Indica el color del texto del tooltip del crosshair. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
          • padding: (integer)
            Indica con un número el espacio, en píxeles, alrededor del texto del tooltip hasta su borde.
          • border: (object)
            Contiene las opciones de configuración del borde del tooltip del crosshair. Sus propiedades son:
            • dashType: (string)
              Indica el tipo de línea del crosshair. Los valores posibles son:
              • dash (línea discontinua formada por guiones).
              • dashDot (línea discontinua alternando guión y punto).
              • dot (línea discontinua formada por puntos).
              • longDash (línea discontinua formada por guiones largos).
              • longDashDot (línea discontinua alternando guión largos y punto).
              • longDashDotDot (línea discontinua alternando guión largo y dos puntos seguidos).
              • solid (línea continua).
            • color: (string)
              Indica el color del crosshair. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
            • width: (integer)
              Indica el tamaño de ancho de la línea en píxeles.
      • majorGridLines: (Object)
        Contiene las opciones de configuración de las líneas interiores principales del gráfico. Sus propiedades son:
        • dashType: (string)
          Indica el tipo de línea. Los valores posibles son:
          • dash (línea discontinua formada por guiones).
          • dashDot (línea discontinua alternando guión y punto).
          • dot (línea discontinua formada por puntos).
          • longDash (línea discontinua formada por guiones largos).
          • longDashDot (línea discontinua alternando guión largos y punto).
          • longDashDotDot (línea discontinua alternando guión largo y dos puntos seguidos).
          • solid (línea continua).
        • color: (string)
          Indica el color de las líneas. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
        • visible: (boolean)
          Establece si las líneas son visibles (true valor por defecto) o no (false). width: (integer) Indica el grosor de la línea en píxeles.
      • minorGridLines: (objeto)
        Contiene las opciones de configuración de las líneas interiores secundarias del gráfico. Las propiedades son las mismas que para las majorGridLines.
      • majorTicks: (objeto)
        Contiene la configuración de las líneas principales que marcan la escala del gráfico. Sus propiedades son:
        • color: (string)
          Indica el color de las líneas. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
        • visible: (boolean)
          Establece si las líneas son visibles (true valor por defecto) o no (false).
        • width: (integer)
          Indica el ancho de la línea en píxeles.
      • minorTicks: (objet)
        Contiene las opciones de configuración para las líneas menores que marcan la escala del gráfico. Sus propiedades son las mismas que para los majorTicks.
    • areaConfiguration: (objet) Contiene las opciones de configuración del área del gráfico. Sus propiedades son:
      • background: (string)
        Establece el color de fondo del gráfico. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es "transparent".
      • border: (objet)
        Contiene la configuración de la línea del borde del área en la que se inserta el gráfico. Sus propiedades son:
        • dashType: (string)
          Indica el tipo de línea. Los valores posibles son:
          • dash (línea discontinua formada por guiones).
          • dashDot (línea discontinua alternando guión y punto).
          • dot (línea discontinua formada por puntos).
          • longDash (línea discontinua formada por guiones largos).
          • longDashDot (línea discontinua alternando guión largos y punto).
          • longDashDotDot (línea discontinua alternando guión largo y dos puntos seguidos).
          • solid (línea continua).
        • color: (string)
          Indica el color de las líneas. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
        • width: (integer)
          Indica el ancho de la línea en píxeles.
      • opacity: (integer)
        Indica la opacidad del área del gráfico. Por defecto, el fondo del área es opaco.
      • width: (integer)
        Indica, en píxeles, el ancho del área.
      • height: (integer)
        Indica, en píxeles, el alto del área.
      • margin: (integer)
        Establece los márgenes del área del gráfico. Es un valor numérico.
    • seriesConfiguration: (object)
      Ciertos tipos de gráfico necesitan unas propiedades extra para su representación.
      Contiene la configuración de los elementos de una serie. Sus propiedades son:
      • bar: (object)
        Contiene los elementos que se pueden configurar en un gráfico de barras.
        • gap (integer)
          Establece la distancia entre las categorías expresada como porcentaje del ancho de la barra.
        • spacing: (integer)
          Establece la distancia entre puntos de la serie dentro de una categoría, expresado como porcentaje del ancho de la barra.
      • donut: (object)
        Contiene los elementos que se pueden configurar en un gráfico tipo "donut".
        • label: (object)
          Contiene las opciones de configuración de las etiquetas de la serie. Sus propiedades son:
          • visible: (boolean)
            Indica si las etiquetas de la serie son visibles (true) o no (false, opción por defecto).
          • background: (string)
            Establece el color de fondo de las etiquetas. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es "transparent".
          • color: (string)
            Indica el color del texto de las etiquetas de la serie. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
        • legendDonut: (string)
          Muestra en el centro del "donut" los valores que queremos ver.
    • valueAxis: (object) Contiene la configuración de los valores de los ejes del gráfico.
      • plotBands: (array)
        Contiene la configuración de las plot bands o "bandas de trazado" del gráfico.
        Las plot bands son bandas para resaltar en otro color áreas del gráfico en un rango de ejes predefinido.

        PlotBands.PNG

        Sus propiedades son:
        • from: (integer)
          Indica la posición inicial del plot band en unidades del eje.
        • to: (integer)
          Indica la posición final del plot band en unidades del eje.
        • color: (string)
          Indica el color del plot band en código hexadecimal, por ejemplo #000000.
        • opacity: (integer)
          Indica la opacidad del plot band. Por defecto el valor es 0.
      • visible: (boolean)
        Indica si se muestran los valores del eje (true, valor por defecto) o no (false).
      • color: (string)
        Indica el color con el que se escribe el valor del eje. El color se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es #000000.
      • background: (string)
        Establece el color de fondo del eje. El valor se puede introducir con un código hexadecimal (por ejemplo, "#000000" para el color negro) o rgb (por ejemplo, "0,0,0" para el color negro). El valor por defecto es "transparent".
      • name: (string)
        Nombre único de eje. Se usa para asociar una serie con un eje de valores usando la opción "series axis".
      • min: (integer)
        Valor mínimo del eje.
      • max: (integer)
        Valor máximo del eje.
    • format: (array - obligatorio)
      Contiene la configuración general del gráfico.
      • datapoint: (string - obligatorio)
        Datapoint del que el gráfico toma los datos. Debe ser parte del datapointSet indicado en la propiedad data.
      • color: (string)
        Color del gráfico. El valor tiene que ser un código hexadecimal, por ejemplo, #000000.
      • styleLine: (string)
        Indica el estilo de línea usada la "line graph". Sus valores pueden ser:
        • normal
        • step
        • smooth
      • tooltip: (string)
        Texto de ayuda de la serie que aparece cuando el usuario pasa con el ratón sobre un punto, mostrando el valor de ese punto u otra información adicional.
      • markers: (object)
        El gráfico muestra las etiquetas de la serie cuando la propiedad "visible" se establece a true. La propiedad "markers" está disponible cuando el tipo de serie (seriesType) es "area" o "line".
        • visible: (boolean)
          Establece si el gráfico muestra los marcadores de la serie (true, valor por defecto) o no (false).
        • type: (string)
          Indica la forma de los marcadores de la serie. Puede ser:
          • circle
          • square
          • triangle
          • cross
        • background: (string)
          Indica el color de fondo de los marcadores con un código hexadecimal, por ejemplo, #000000. Por defecto el valor es "transparent".

Grafico_01.png