personalizadas guía del desarrollador de visualizaciones

IBM Cognos AnalyticsVersión 11.1.0

Guía del desarrollador de visualizacionespersonalizadas

IBM

Contenido

Capítulo 1. Introduction.........................................................................................1Desarrollo de visualizaciones personalizadas............................................................................................ 1

Capítulo 2. Step by step guide................................................................................3Guía paso a paso para visualizaciones personalizadas.............................................................................. 3

Configuración del entorno de desarrollo............................................................................................... 3Desinstalación de las herramientas de CLI de visualizaciones personalizadas...................................4Creación de una visualización personalizada........................................................................................ 4Utilización de un ejemplo de D3 en la visualización personalizada......................................................4Validación de la visualización en un panel de control .......................................................................... 6Validación de la visualización en un informe ........................................................................................ 6Empaquetar y desplegar la visualización personalizada.......................................................................7Cómo funcionan las visualizaciones personalizadas locales................................................................ 8

Capítulo 3. Custom visualizations tools and commands.......................................... 9Herramientas y mandatos de visualizaciones personalizadas...................................................................9

Capítulo 4. Customvis library............................................................................... 13Biblioteca de visualizaciones personalizadas (customvis-lib)................................................................. 13

Representación.................................................................................................................................... 13Modelo de datos................................................................................................................................... 15Interactividad....................................................................................................................................... 18Leyendas...............................................................................................................................................20Propiedades..........................................................................................................................................22Paletas.................................................................................................................................................. 23Personalización de la visualización......................................................................................................26RenderBase.......................................................................................................................................... 26

Capítulo 5. Customvis API reference.................................................................... 31Referencia de API de Customvis............................................................................................................... 31

Capítulo 6. Customvis frequently asked question..................................................33Preguntas más frecuentes de las visualizaciones personalizadas...........................................................33

Capítulo 7. Visualization definition.......................................................................35Definición de la visualización.....................................................................................................................35

Capítulo 8. Tutorial.............................................................................................. 39Visualizaciones personalizadas - Guía de aprendizaje............................................................................. 39

Parte 1: Creación de una visualización personalizada........................................................................ 40Parte 2: adición de propiedades a la visualización............................................................................. 45Parte 3: personalizar la leyenda y las propiedades.............................................................................48Parte 4: características avanzadas...................................................................................................... 49

Capítulo 9. Manage custom visuals.......................................................................53Gestión de visualizaciones personalizadas desde la interfaz de usuario de administración..................53

Capítulo 10. Improving the performance of custom visualizations.........................55Mejora del rendimiento de las visualizaciones personalizadas............................................................... 55

iii

Capítulo 11. Authoring schematics - Tutorial........................................................ 57Definición de SVG.......................................................................................................................................57Correlación básica de SVG.........................................................................................................................57

Reglas y restricciones para SVG.......................................................................................................... 59Adición de vistas a esquemas................................................................................................................... 61Cómo resaltar regiones en un esquema................................................................................................... 62Edición de un paquete de esquemas........................................................................................................ 64Distribución de un esquema......................................................................................................................66

iv

Capítulo 1. Introduction

Desarrollo de visualizaciones personalizadasPuede crear visualizaciones personalizadas para cumplir sus necesidades empresariales específicas.IBM®Cognos Analytics permite que los desarrolladores puedan crear y probar visualizacionespersonalizadas en local antes de que se establezcan como disponibles para los demás usuarios.

La función Gestionar visualizaciones permite que los usuarios puedan controlar los derechos de accesoa visualizaciones ampliables para usuarios individuales, grupos y roles.

La función Desarrollar visualizaciones permite que los usuarios puedan desarrollar visualizacionesampliables.

Hay ejemplos de código de visualizaciones personalizadas disponibles en la Guía de ejemplos.

© Copyright IBM Corp. 2019, 2019 1

2 IBM Cognos Analytics Versión 11.1.0 : Guía del desarrollador de visualizaciones personalizadas

Capítulo 2. Step by step guide

Guía paso a paso para visualizaciones personalizadasEn esta guía paso a paso se describe cómo configurar el entorno de desarrollo, crear una visualizaciónpersonalizada a partir de un ejemplo de D3 existente y cómo desplegar y autorizar la visualizaciónpersonalizada en IBMCognos Analytics.

Configuración del entorno de desarrolloLas herramientas de CLI de visualizaciones personalizadas de IBMCognos Analytics requieren que instaleel entorno de ejecución NodeJS con un gestor de paquetes de NodeJS (NPM).

Antes de empezarAsegúrese de que el software siguiente esté instalado:

• Microsoft Windows PowerShell o CMD en Windows o Terminal en Apple OSX.• Versión 10 de NodeJS. Para obtener más información, consulte https://nodejs.org/en/.

Procedimiento

Instalación de Node.JS y NPM1. Descargue el instalador de NodeJS, versión 10, de https://nodejs.org/en/download/.2. Ejecute el instalador y utilice los valores predeterminados.3. Tras la instalación, reinicie el sistema.4. Valide la instalación de node y npm.

a) Abra una interfaz de línea de mandatos (CLI). Powershell o CMD en Windows o Terminal en OSX.b) Ejecute el mandato siguiente:

node --version

La CLI muestra la versión actual del nodo. Asegúrese de que cumple los requisitos previos.Instalación de las herramientas de CLI de visualizaciones personalizadas de Cognos Analytics

5. Descargue las herramientas de línea de mandatos de visualizaciones personalizadas de CognosAnalytics desde la ubicación siguiente:

• Para Cognos Analytics 11.1.4, utilice [CAserverroot]/bi/js/dashboard-analytics/lib/@waca/vida/sdk/customvis.tgz.

• Para Cognos Analytics 11.1.5, utilice [CAserverroot]/bi/js/vida/customvis.tgz.

En algunos navegadores, la extensión de archivo .tgz se reconoce como texto. Descargue el archivopulsando con el botón derecho el enlace, seleccione Guardar como y establezca el tipo en Todos losarchivos. No utilice el navegador Mozilla Firefox para descargar el archivo.

6. En el explorador de archivos, vaya al directorio donde se haya guardado el archivo descargado.7. Abra una herramienta de línea de mandatos.

• En sistemas Microsoft Windows, Windows PowerShell o CMD.• En sistemas Apple OSX, Terminal.

8. Ejecute el mandato siguiente:

npm install -g customvis.tgz


https://nodejs.org/en/

https://nodejs.org/en/download/

En sistemas UNIX y Apple OSX, es posible que se genere un error de permiso denegado. Pararesolver este error, ejecute el mandato siguiente como administrador:

sudo npm install -g customvis.tgz

Las herramientas de CLI de visualizaciones personalizadas se instalan en el sistema.9. Cuando haya finalizado el proceso, ejecute el mandato siguiente para validar las herramientas de CLI

de visualizaciones personalizadas.

customvis --help

La CLI muestra los mandatos disponibles.10. En el explorador de archivos, suprima el archivo customvis.tgz.

Desinstalación de las herramientas de CLI de visualizaciones personalizadasSi ya no necesita las herramientas de CLI de visualizaciones personalizadas de IBMCognos Analytics,puede desinstalarlas.

Procedimiento

Para desinstalar las herramientas de CLI de las visualizaciones personalizadas y sus dependencias,ejecute el mandato siguiente.

npm uninstall -g @businessanalytics/customvis

Creación de una visualización personalizadaPara poder implementar una visualización personalizada, primero debe crear una visualizaciónpersonalizada.

Acerca de esta tarea

El mandato customvis create genera una nueva visualización personalizada a partir de una plantillapredeterminada. No obstante, puede especificar una plantilla específica en la que se basará la nuevavisualización personalizada. Para obtener más información, consulte el mandato “Create” en la página9.

Procedimiento

1. Abra una interfaz de línea de mandatos (CLI) en uno de los directorios seleccionados y ejecute elmandato siguiente:

customvis create CustomVisualization

• Se creará un directorio con el nombre CustomVisualization.• Puede elegir otro nombre en lugar de CustomVisualization. Por ejemplo, Marimekko, que crea un

directorio nuevo denominado Marimekko.2. En la CLI, cambie el directorio ejecutando:

cd CustomVisualization

3. Al desarrollar una visualización personalizada, las herramientas de CLI de visualizacionespersonalizadas compilan el código fuente. Los archivos fuente para el paquete se encuentran en eldirectorio /renderer.

4. Ahora puede empezar a implementar la visualización.

Utilización de un ejemplo de D3 en la visualización personalizadaUtilizará un ejemplo de D3 en esta guía paso a paso. Para obtener más información, consulte Detecciónde conflictos en https://bl.ocks.org/mbostock/3231298/.


https://bl.ocks.org/mbostock/3231298/

https://bl.ocks.org/mbostock/3231298/

Acerca de esta tareaEl ejemplo no admite enlace de datos, interactividad adicional, etc. Puede encontrar más informaciónsobre la implementación de funciones de visualizaciones personalizadas adicionales en la documentaciónde desarrollo de la API. Un desarrollador con conocimiento de JavaScript y D3 puede realizar unaimplementación adicional.

Procedimiento

1. Abra el archivo renderer/Main.ts en un editor de código.2. El archivo Main.ts es el punto de entrada de la visualización y siempre se ejecuta en primer lugar. El

contenido del archivo Main.ts es:

import { RenderBase } from "@businessanalytics/customvis-lib";

export default class extends RenderBase { protected create( _node: HTMLElement ): HTMLElement { _node.textContent = "Basic VizBundle"; return _node; } };

Nota: Este código está escrito en TypeScript, que es un superconjunto de JavaScript. No obstante, enalgunas áreas de código, también se puede utilizar JavaScript. Este uso queda demostrado en estaguía paso a paso.

3. Abra una interfaz de línea de mandatos (CLI) en el directorio que se ha creado en “Creación de unavisualización personalizada” en la página 4 y ejecute el mandato siguiente:

customvis start

Este mandato crea e inicia un servidor local que aloja la visualización personalizada. Además, lasherramientas de CLI de visualizaciones personalizadas inician la supervisión de archivos de códigofuente y recrean la visualización personalizada cuando su código fuente cambia. Se recomienda tenereste mandato en ejecución durante el desarrollo de la visualización.

Para detener el servidor local que aloja la visualización personalizada, pulse Ctrl C.4. Edite el archivo Main.ts de manera que el ejemplo de D3 se pueda utilizar en IBMCognos Analytics.

a) Determine qué versión de D3 se utiliza en el ejemplo en línea. Puede encontrar la versión buscandod3 en la etiqueta script del ejemplo. El ejemplo en línea utiliza d3.v3. Importe esta dependenciaen el archivo Main.ts añadiendo lo siguiente en la parte superior del archivo:

import * as d3 from "https://d3js.org/d3.v3.min.js";

b) Sustituya

_node.textContent = "Basic VizBundle";

por el contenido de la etiqueta script del ejemplo:

{contenido de la etiqueta script del ejemplo}

c) Asegúrese de que la representación se produce en el contenedor del widget. Sustituya

d3.select("body").append("svg")

por

d3.select(_node).append("svg")

5. Guarde el archivo. Si todo funciona correctamente, la CLI muestra que ha finalizado la compilación delos archivos fuente.

Capítulo 2. Step by step guide 5

ResultadosAhora puede validar la visualización personalizada en Cognos Analytics.

Validación de la visualización en un panel de controlSe recomienda utilizar el navegador Google Chrome para desarrollar una visualización personalizadalocalmente. No obstante, también hay soporte para Mozilla Firefox, Microsoft Internet Explorer 11 y Edge.

Antes de empezar

Nota: No hay soporte para el navegador Apple Safari para el desarrollo de visualizaciones personalizadasde manera local.

Al validar la visualización, el navegador se conecta a la visualización personalizada que se ejecuta enlocal. Algunos navegadores pueden tratar esta conexión como una amenaza de seguridad. Es posible queMicrosoft Internet Explorer 11 muestre un mensaje emergente que indica que solo se muestra contenidoseguro. Para que se cargue la visualización, debe permitir que se muestre todo el contenido.

Para inhabilitar el mensaje en Internet Explorer, añada http://127.0.0.1 a los sitios de confianza en lasopciones de seguridad de internet. Asegúrese de que los sitios de confianza muestran contenido mixto.


Una vez que se cargue la visualización en IBMCognos Analytics, se puede utilizar cualquier navegador consoporte para ejecutar la visualización personalizada cargada.

Procedimiento

1. Cree un panel de control en Cognos Analytics.2. Pulse el separador Visualización y, a continuación, pulse el separador Personalizada.3. En Widgets de desarrollador, realice una doble pulsación en Probar visualización.4. Para ver estos cambios en la vista Vista previa de página, pulse Renovar visualización .

ResultadosCognos Analytics muestra la visualización de D3.

Validación de la visualización en un informeSe recomienda utilizar el navegador Google Chrome al desarrollar una visualización personalizada demanera local. No obstante, también hay soporte para Mozilla Firefox, Microsoft Internet Explorer 11 yEdge.

Antes de empezar

Nota: No hay soporte para el navegador Apple Safari para el desarrollo de visualizaciones personalizadasde manera local.

Al validar la visualización, el navegador se conecta a la visualización personalizada que se ejecuta enlocal. Algunos navegadores pueden tratar la conexión como una amenaza de seguridad. MicrosoftInternet Explorer 11 podría mostrar un mensaje emergente que indica que Solo se muestra contenidoseguro. Para que se cargue la visualización, permita que se muestre todo el contenido.

Para inhabilitar el mensaje en Internet Explorer, añada http://127.0.0.1 a los sitios de confianza enlas opciones de seguridad de Internet. Asegúrese de que los sitios de confianza muestran contenidomixto.


Una vez que se haya cargado la visualización en IBMCognos Analytics, se puede utilizar cualquiernavegador con soporte para ejecutar la visualización personalizada cargada.


Procedimiento

1. Cree un informe en Cognos Analytics. Asegúrese de estar en la modalidad Vista previa de página.2. En Objetos insertables, pulse el icono Caja de herramientas .3. Expanda el menú Avanzado y realice una doble pulsación en Vista previa de visualización

personalizada.Se carga la visualización personalizada.

4. Las herramientas de CLI de visualizaciones personalizadas supervisan los archivos fuente y recrean lavisualización personalizada cuando cambia su código fuente. Para ver estos cambios en la vista Vistaprevia de página, pulse Renovar visualización .

5. Ejecute el informe como HTML pulsando Reproducir y, a continuación, Ejecutar HTML.

ResultadosCognos Analytics muestra la visualización de D3.

Empaquetar y desplegar la visualización personalizadaCuando la visualización personalizada esté lista para su publicación, puede utilizar las herramientas deinterfaz de línea de mandatos (CLI) de visualizaciones personalizadas para compilar y empaquetar lavisualización. Puede cargar la visualización empaquetada en IBMCognos Analytics.

Empaquetado de la visualización personalizadaPara poder desplegar la visualización personalizada, primero debe empaquetarla.

Procedimiento

1. Abra una interfaz de línea de mandatos (CLI) donde se encuentre la visualización personalizada que seha creado en “Creación de una visualización personalizada” en la página 4. Asegúrese de acceder en laCLI al directorio donde se encuentra la visualización personalizada.

2. Ejecute el mandato siguiente en la interfaz de línea de mandatos:

customvis pack

Se compila la visualización personalizada y se empaqueta en un archivo .zip.

ResultadosSe genera un archivo .zip en el directorio actual: {nombreDirectorio}.packed.zip. Por ejemplo:CustomVisualization.packed.zip.

Si dispone de la función Gestionar visualizaciones, puede cargar el archivo packaged.zip en IBMCognosAnalytics.

Si no tiene la función Gestionar visualizaciones, puede enviar el archivo a alguien que tenga la funciónGestionar Visualizaciones. Si desea ejecutar la visualización personalizada de manera local, extraiga elarchivo packaged.zip y ejecute el mandato customvis start desde una CLI en la carpeta extraída.

Carga de visualizaciones personalizadas desde la interfaz de usuario de administraciónPara poder utilizar la visualización personalizada en un panel de control o un informe, primero debecargarla.

Procedimiento

1. En la página de inicio, pulse Gestionar > Personalización > Visualizaciones personalizadas > Cargarvisualización personalizada

.2. Seleccione el archivo CustomVisualization.packed.zip y pulse Abrir.

Capítulo 2. Step by step guide 7

ResultadosSe añade la visualización personalizada a la lista de visualizaciones. También puede establecer lospermisos sobre las visualizaciones.

Utilización de la visualización cargada en un panel de controlPuede utilizar una visualización personalizada en un panel de control de IBMCognos Analytics.

Procedimiento

1. Cree un panel de control en Cognos Analytics.2. Pulse el separador Visualización > Personalizada.

ResultadosLa visualización personalizada cargada se puede seleccionar en la lista de Visualizacionespersonalizadas.

Utilización de la visualización cargada en un informePuede utilizar una visualización personalizada en un informe de IBMCognos Analytics.

Procedimiento

1. Cree un informe en Cognos Analytics.2. Cree una visualización.

ResultadosLa visualización personalizada cargada se puede seleccionar en la sección Personalizada.

Cómo funcionan las visualizaciones personalizadas localesUtilizando las herramientas de interfaz de línea de mandatos (CLI) de visualizaciones personalizadas quese proporcionan, se inicia un servidor local con el mandato customvis start.

Este servidor local aloja los archivos generados por las herramientas de CLI en el directorio decompilación. Puede acceder a estos archivos a través de la red local mediante el navegador. IBMCognosAnalytics Reporting & Dashboard incluye widgets de recinto de pruebas que se conectan a este servidorlocal (127.0.0.1) y acceden a los archivos generados. Si existen estos archivos, se ejecutan en el widgetcorrespondiente como una visualización.


Capítulo 3. Custom visualizations tools andcommands

Herramientas y mandatos de visualizaciones personalizadasCon las herramientas de visualizaciones personalizadas de IBMCognos Analytics puede crearvisualizaciones personalizadas, compilarlas, ejecutarlas, limpiarlas y empaquetarlas desde una interfazde línea de mandatos (CLI).

Además de compilar una visualización, puede utilizar las visualizaciones personalizadas para alojar unavisualización personalizada en local para probar la visualización en Cognos Analytics antes dedesplegarla.

Puede utilizar las herramientas de visualizaciones personalizadas de Cognos Analytics desde losmandatos en una interfaz de línea de mandatos (CLI). Ejecute estos mandatos desde Microsoft WindowsPowerShell o CMD en Windows, o desde Terminal en Apple OSX.

Para instalar las herramientas de visualizaciones personalizadas de Cognos Analytics, consulte“Configuración del entorno de desarrollo” en la página 3.

Help

Muestra un diálogo de ayuda de todos los mandatos disponibles y las opciones adicionales que sepueden utilizar.

customvis --help

o bien

customvis

Create

Crea una visualización en una carpeta con el nombre name.

customvis create [options] <name>

o bien

customvis c [options] <name>

Opciones:

• -t, --template <template> Crea un proyecto a partir de template (valor predeterminado:Basic). Este distintivo determina la plantilla inicial a partir de la cual se genera la visualización. Paramostrar una lista de todas las plantillas disponibles, consulte el mandato List.

customvis c -t BarChart <name>

• -f, --force Fuerza la creación de la carpeta con name. Nota: si especifica un nombre existente parala carpeta, se suprimirá la carpeta existente.

customvis c -f <name>

• -h, --help Imprime información de uso


List

Muestra una lista de todas las plantillas disponibles que se pueden usar para una nueva visualizaciónpersonalizada durante la ejecución del mandato Create.

customvis list

o bien

customvis l

Start

Crea e inicia un servidor local que aloja la visualización actual.

• La herramienta de CLI crea los orígenes.• Se inicia un servidor local para alojar la visualización personalizada.

customvis start [options]

o bien

customvis s [options]

Opciones:

• -p, --port

Inicia un servidor en un puerto específico (el valor predeterminado es 8585).

customvis start -p 8585

• -h, --help

Imprime información de uso

customvis start -h

Pack

Crea un paquete de la visualización en el directorio raíz actual, <folder-name>.packed.zip. Puedecargar este archivo .zip en Cognos Analytics.

customvis pack

o bien

customvis p

Build

Crea y compila la visualización en el directorio actual. Utilice esto para probar la versión de despliegue enlocal.

customvis build

o bien

customvis b


Clean

Elimina todos los archivos generados por la herramienta de línea de mandatos. Utilice esto cuandonecesite compartir una versión de desarrollo de la visualización.

customvis clean

o bien

customvis cl

Upgrade

Actualiza customvis-lib en la visualización actual. Sustituye la dependencia de customvis-lib por la másreciente de la herramienta de CLI actual. Además, desencadena el mandato Clean.

customvis upgrade

o bien

customvis up

Info

Obtiene información acerca de la herramienta de CLI y la visualización actual. Muestra informaciónampliable de Cognos Analytics acerca de la herramienta de CLI y la visualización actual.

customvis info

o bien

customvis i

Version

Muestra la versión actual de la herramienta de CLI de la visualización personalizada de Cognos Analytics.

customvis --version

o bien

customvis -V

Capítulo 3. Custom visualizations tools and commands 11

Capítulo 4. Customvis library

Biblioteca de visualizaciones personalizadas (customvis-lib)La biblioteca customvis-lib está diseñada para ayudar a los desarrolladores a crear visualizacionesrápidamente proporcionando interfaces y clases de programa de utilidad documentadas. Este documentoestá dirigido a los desarrolladores.

Las características que ofrece customvis-lib incluyen:

• Un ciclo de “Representación” en la página 13 gestionado• Un “Modelo de datos” en la página 15 unificado• “Pruebas de posicionamiento” en la página 18 automática o personalizada• “Leyendas” en la página 20 automáticas• Soporte para “Propiedades” en la página 22• Soporte para “Paletas” en la página 23• “Personalización de la visualización” en la página 26

En el núcleo de customvis-lib, se encuentra la clase “RenderBase” en la página 26. La clase RenderBasees la clase base que puede utilizar para cada visualización personalizada. Esta clase base le proporcionaacceso a todas las características de customvis-lib.

Instalación

La biblioteca está disponible como un archivo denominado customvis-lib-x.y.z.tgz donde x.y.z esla versión de la biblioteca. Cuando crea una nueva visualización que utilice el mandato de SDK customviscreate, la biblioteca customvis se copia en el directorio raíz de la nueva visualización.

Visualización paso a paso

Aprenda a crear una visualización personalizada que utilice customvis-lib y d3 siguiendo las instruccionesde “Visualizaciones personalizadas - Guía de aprendizaje” en la página 39.

Referencia de API

Consulte la referencia de API para obtener información detallada acerca de las clases y métodos que seencuentran en customvis-lib.

RepresentaciónLa representación se asegura de que los datos se transformen en píxeles que finalmente se muestran enla pantalla.

El resultado de la representación puede ser una estructura DOM (modelo de objetos de documento), ungráfico vectorial escalable (svg), o píxeles sobre un lienzo, dependiendo de la tecnología de salida queelija. Todos los ejemplos de código utilizan la representación svg en d3. No obstante, en su visualizaciónpersonalizada puede elegir cualquier otro método de representación.

En customvis-lib, debe implementar una fase create y una fase update:

• La fase create se ejecuta exactamente una vez, cuando se inicializa la visualización.• La fase update se ejecuta cada vez que cambia un aspecto de la visualización, como el tamaño, los

datos o las propiedades de la visualización.

La implementación de estas fases es opcional. La clase base RenderBase le proporciona unaimplementación predeterminada.


https://ibm.github.io/ca_customvis/docs/11.1.x/

Crear

La fase de creación (create) se ejecuta cuando se inicializa la visualización. Puede implementar esta fasesustituyendo el método “create()” en la página 27 de RenderBase. En este método, recibe el nodo deDOM del elemento contenedor de la visualización. No debe sustituir create si la visualización no tienecódigo de inicialización. No obstante, si lo hace, puede añadir más nodos de DOM o svg al contenedor y,de manera opcional, devolver un Element como nuevo nodo raíz de la visualización. Por ejemplo:

protected create( _node: HTMLElement ): void{ // Añadir un nodo svg que escala al tamaño de su contenedor. d3.select( _node ).append( "svg" ) .attr( "width", "100%" ) .attr( "height", "100%" ); // Si no hay valor de retorno, _node será la raíz de la visualización.}

protected update( _info: UpdateInfo ): void{ // _info.node será el mismo '_node' que el que se ha pasado a 'create'.}

Si la inicialización requiere llamadas asíncronas, puede devolver un objeto Promise que se resuelva conun Element o con void.

protected create( _node: HTMLElement ): void{ return new Promise( resolve => { // doInit realiza la inicialización asíncrona. doInit( function cb() { // Se realiza la inicialización y se resuelve el Promise. Opcionalmente, puede // resolver con un `Element` que pasará a ser el nodo // raíz de la visualización. resolve(); } ); } );}

Actualizar

Se llama a la fase de actualización (update) cada vez que cambia algo en el tamaño, las propiedades o losdatos de la visualización. Puede implementar la fase de actualización sustituyendo el método “update()”en la página 27 de RenderBase.

Finalización de la representación

La implementación de update en su forma más básica es el código siguiente:

protected update( _info: UpdateInfo ): void{ _info.node.textContent = "Hello World: " + Date.now().toString();}

No hay ningún valor de retorno, lo que implica que la representación se ha completado al final de lafunción update.

Cada visualización tiene la responsabilidad de notificar a su host cuando finalice la representación en lafase de actualización. La notificación se realiza a través del tipo de retorno: devolver void implica que larepresentación termina cuando finaliza la función update, mientras que devolver Promise implica que elhost debe esperar a que se cumpla dicha promesa (promise).

Si desea que la visualización muestre animaciones o transiciones, suele ser un proceso asíncrono. Por lotanto, la función update puede devolver un objeto Promise que se resuelva tan pronto como finalice latransición de la visualización. Un ejemplo que ilustra esto:

protected update( info: UpdateInfo ): Promise<void>{


const t = d3.transition().duration( 300 );

d3.select( _info.node ) .selectAll( "rect" ) .data( _info.data.rows ) .join( "rect" ) .attr( "x", d => scale( d.tuple( 0 ).key ) ) .attr( "width", d => scale.bandwidth() ) .transition( t ) // bind to our transition .attr( "height", d => d.values( 0 ) );

return new Promise( resolve => t.on( "end", () => resolve() ) );}

En la clase base RenderBase, puede ver que el método update tiene la signatura de retorno void |Promise<void>. No obstante, en la sustitución puede ser más explícito y definir void oPromise<void> como tipo de retorno.

Si por algún motivo, desea que la aplicación de host sepa que la representación ha fallado, puededevolver una promesa rechazada o producir new Error( "msg" ).

UpdateInfo

El único parámetro que se pasa a update es un objeto de tipo UpdateInfo. Puede ver este objeto comoel estado que está a punto de representar. La clase UpdateInfo contiene la información siguiente:

• reason: el motivo por el que debe llevarse a cabo la representación. Compruebe los distintivos de esteobjeto para ver qué aspectos de la visualización necesitan representarse. Los distintivos disponiblesson:

– data: los datos han cambiado desde la última llamada a update.– size: el tamaño ha cambiado desde la última llamada a update.– properties: las propiedades han cambiado desde la última llamada a update.– decorations: las decoraciones (seleccionado, resaltado) han cambiado desde la última llamada aupdate.

• data: los datos que se deben representar, o null si no hay datos. Si no hay datos que representar, esresponsabilidad de la visualización garantizar que la propia visualización se borre y se represente en unestado vacío.

• node: el elemento HTML sobre el que debe tener lugar la representación. Este es el elemento que hadevuelto anteriormente el método RenderBase.create.

• properties: el conjunto actual de propiedades. También se puede acceder a las propiedades a travésdel atributo RenderBase.properties.

• locale: el entorno local de datos que se debe utilizar para la representación. No debe utilizarlo paralas traducciones, sino solo para el formateo de datos personalizados donde sea necesario.

El ejemplo siguiente muestra cómo se pueden utilizar los campos de UpdateInfo para proporcionar unaimplementación optimizada de update:

protected update( _info: UpdateInfo ): void{ const reason = _info.reason;

if ( !_info.data ) return renderEmpty( _info.node );

// Llamar a la función de proceso de datos costosa solo si han cambiado los datos. if ( reason.data ) this.data = processData( _info.data );

// Llevar a cabo la representación, en función de `this.data` ...}

Modelo de datosLas visualizaciones personalizadas se basan en un modelo de datos tabular.

Capítulo 4. Customvis library 15

Los datos se organizan en filas y columnas, donde cada fila se corresponde con un punto de datos y cadacolumna se corresponde con una ranura de la definición de la visualización. Para obtener másinformación, consulte “Definición de la visualización” en la página 35. Los datos se pasan a lavisualización en el método update, en el cual se pueden utilizar para enlazar con los elementos quecomponen la visualización. Los objetos del modelo de datos también se usan en funciones de pruebas deposicionamiento para informar a una aplicación de host sobre qué punto de datos o tupla se ha registradoen una coordenada específica.

Ranuras

Una ranura es el punto de entrada de los datos que se incluyen en una visualización. Por ejemplo, unavisualización de columna puede tener dos ranuras: una ranura que represente los elementos categóricosque van en el eje X y una ranura que represente los valores de datos que determinan la altura de lacolumna.

Se puede definir una ranura en el archivo vizdef.xml, como categórica o continua:

• Lo elementos de datos encontrados en las ranuras categóricas son tuplas. Por ejemplo, en el gráfico decolumnas anterior, la ranura de categorías podría incluir las tuplas [ ‘verano’, ‘invierno’, ‘primavera’,‘otoño’ ]. Es posible que vea esta lista de tuplas como el dominio categórico de la ranura. En un ejemplode código posterior, verá que las tuplas se usan como un dominio en un objeto de escala d3.

• Una ranura continua contiene elementos de datos que representan valores. En lugar de una lista detuplas, puede recuperar un dominio de valores para este tipo de ranura. Un dominio de valores es unvalor mínimo y un valor máximo. El dominio de la ranura de valores del ejemplo del gráfico de columnaspodría ser algo como: [25.4, 136.4].

<slotname="categories"type="cat"optional="true"/><slotname="values"type="cont"optional="false"/>

Las ranuras puede estar correlacionadas o no correlacionadas. Si una ranura está correlacionada, sehabrán asignado algunos datos a dicha ranura. Si una ranura no está correlacionada, la ranura no estáasociada a datos y su atributo tuples es [], y domain es [0, 0].

Si una ranura es opcional, implica que puede asociar datos a esta ranura, aunque no es necesario. Lavisualización tiene la responsabilidad de manejar esta situación de manera correcta. Por ejemplo, en ungráfico de columnas, la ranura series podría ser opcional. Si no se completa, la visualización puederepresentar un gráfico de barras simple únicamente con categorías y valores. Si se completa, se puederepresentar un gráfico de barras agrupadas.

Tuplas y dominios

Cada columna de los datos corresponde a una ranura de la visualización. Las ranuras pueden sercategóricas o continuas. Esto implica que una columna de datos puede incluir tuplas (para ranurascategóricas) o valores (para ranuras continuas).

En el ejemplo siguiente se muestra cómo recuperar las tuplas y el dominio de valores para un conjunto dedatos y cómo utilizar esto en una escala d3:

protected update( _info: UpdateInfo ): void{ const data = _info.data; const width = _info.node.clientWidth; const height = _info.node.clientHeight;

// Crear una lista de claves de tupla para la columna categórica 0 y usarla // para crear una escala de bandas que correlacione las claves con la longitud de un eje. const keys = data.cols[ 0 ].tuples.map( _t => _t.key ); const scaleX = d3.scaleBand().range( [ 0, width ] ).domain( keys );

// La columna 1 tiene valores, por lo que se debe usar el dominio para crear una // escala lineal que correlacione el dominio con la longitud de un eje. const domain = data.cols[ 1 ].domain.asArray(); const scaleY = d3.scaleLinear().range( [ 0, height ] ).domain( domain );

// ...se omite el estilo en este ejemplo... d3.select( "svg" ).selectAll( "rect" ) .data( _info.data.rows )


.join( "rect" ) .attr( "x", d => scaleX( d.tuple( 0 ).key ) ) .attr( "width", scaleX.bandwidth() ) .attr( "height", d => scaleY( d.value( 1 ) ) );}

El ejemplo utiliza la clave de cada tupla como valor de dominio exclusivo. En la función de acceso a losdatos, d => scaleX( d.tuple( 0 ).key ), esta clave se utiliza para determinar la ubicación delpunto de datos en la escala de X.

La interfaz ISlot no hace ninguna distinción entre una ranura categórica y una ranura continua. Si laranura es continua, la lista de tuplas es []. Si la ranura es categórica, el dominio es vacío (0, 0).

Puntos de datos

Cada fila del conjunto de datos se representa mediante un objeto de punto de datos. Un punto de datoshace referencia a tuplas (una para cada ranura categórica) y valores (una para cada ranura continua). Si,al igual que en el ejemplo anterior, los datos de enlace hacen referencia a los elementos d3, puedeutilizar una función de acceso para recuperar la información de tuplas y valores para cada punto de datos.

En el ejemplo siguiente se enlaza cada fila con un elemento de texto y se utiliza una función de accesopara recuperar el título de la columna 0 como contenido de texto. Si la columna 0 es una columnacategórica, se utiliza el título de la tupla. Si la columna 0 es una columna continua, se utiliza el valorformateado.

d3.select( "svg" ).selectAll( "text" ) .data( _info.data.rows ) .join( "text" ) .text( d => d.caption( 0 ) )

Decoraciones

Cada punto de datos y tupla pueden tener decoraciones. Una decoración es un atributo que contienecierta metainformación sobre el punto de datos o la tupla. Actualmente, hay soporte para dos tipos dedecoraciones: selected y highlighted (ambos booleanos). Si se marca un punto de datos comoselected, es posible que la visualización represente el punto de datos de forma ligeramente distinta,por ejemplo, utilizando un color más brillante.

d3.select( "svg" ).selectAll( "rect" ) .data( _info.data.rows ) .join( "rect" ) .attr( "x", d => scaleX( d.tuple( 0 ).key ) ) .attr( "width", scaleX.bandwidth() ) .attr( "height", d => scaleY( d.value( 1 ) ) ) // Los puntos de datos 'selected' (seleccionados) se representan en color rojo. .attr( "color", d => d.selected ? "red" : "steelblue" );

Como alternativa, si la visualización tiene una propiedad de paleta, puede utilizar la funcióngetFillColor de la paleta para determinar el color correcto de un elemento. Por ejemplo:

<properties>  <palette name="color" type="cat" /></properties>

protected update( _info: UpdateInfo ): void{ // ... const palette = _info.props.get( "color" ); d3.select( "svg" ).selectAll( "rect" ) .data( _info.data.rows ) .join( "rect" ) .attr( "x", d => scaleX( d.tuple( 0 ).key ) ) .attr( "width", scaleX.bandwidth() ) .attr( "height", d => scaleY( d.value( 1 ) ) ) .attr( "color", d => palette.getFillColor( d ) );}

Si la paleta está enlazada a una ranura, el color se basa en el color de la tupla para dicha ranura. Si lapaleta no está enlazada a una ranura, se utiliza el color predeterminado de la paleta. El métodogetFillColor ajusta el color en función de la selección este y de otros puntos de datos.

También existe un método getOutlineColor en una paleta que le permite recuperar un color que sepuede utilizar para dibujar el contorno de un elemento en función de la decoración de resaltado.

Los métodos getFillColor y getOutlineColor están disponibles en todos los tipos de paleta y en elobjeto ContStops que se recupera de una ContPalette. Para obtener más información, consulte“Paletas” en la página 23.

Manejo de datos nulos

La función update de la visualización obtiene un objeto de datos que se pasa como parte del objetoUpdateInfo. No obstante, este objeto de datos puede ser null. Esto indica que la visualización tiene laresponsabilidad de borrar todos los datos y de mostrar la visualización en su estado inicial.

protected update( _info: UpdateInfo ): void{ if ( _info.data === null ) return this.clearVisualization( _info );

// Llevar a cabo la representación aquí...}

InteractividadLas visualizaciones personalizadas pueden utilizar funciones de interactividad de la aplicación de host.

La interactividad, en este contexto, implica:

• Ayuda contextual: proporciona información adicional cuando se pasa el puntero del ratón por encimade un elemento de datos.

• Seleccione: aplicar un estilo alternativo a los elementos de datos que están marcados comoseleccionados.

• Resaltados: resaltar elementos de datos que están bajo el cursor del ratón.

Muchas de las funciones de interactividad se pueden implementar con muy poco código o con ninguno. Sila visualización se basa en d3, RenderBase ya tiene una implementación hitTest predeterminada quese puede configurar para que devuelva los datos correctos.

Para las selecciones y resaltados, las paletas tienen un método getFillColor y un métodogetOutlineColor que sirven de ayuda para enlazar el color correcto a los elementos visuales.

Pruebas de posicionamiento

Las pruebas de posicionamiento son el proceso de devolver un elemento de datos según una coordenadade la pantalla. La aplicación de host es responsable de llamar al método hitTest cuando sea necesario,mientras que la visualización es responsable de devolver el elemento de datos correcto según lacoordenada especificada.

La función hitTest se puede invocar con frecuencia (por ejemplo, en cada movimiento del ratón), por loque es importante asegurarse de que la función se ejecuta bien.

En el siguiente ejemplo se define una clase MyData que almacena una referencia a los datos devisualización y que se enlaza con elementos svg de la pantalla a través del campo mydata.

class MyData{ public DataPoint dp; // Otros miembros de MyData...}

protected hitTest( _elem: Element | null, _client: Point, _viewport: Point ): DataPoint | null{ if ( !_elem || !_elem.hasOwnProperty( "mydata" ) )


return null; // no hay ningún elemento o el elemento no tiene datos return _elem.mydata.dp;}

Si la visualización se basa en d3 y enlaza los datos de visualización con el modelo d3, la función hitTestpredeterminada de RenderBase ya ejecutará todo automáticamente:

protected update( _info: UpdateInfo ){ // Representar un cuadrado para cada punto de datos. d3.select( "svg" ).selectAll( "rect" ) .data( _info.data.rows ) // enlazar los datos .join( "rect" ) // crear/actualizar elementos 'rect' .attr( "x", d => scaleX( d.value( X ) ) ) .attr( "y", d => scaleY( d.value( Y ) ) ) .attr( "width", d => scaleSize( d.value( SIZE ) ) ) .attr( "height", d => scaleSize( d.value( SIZE ) ) );}

// No es necesario modificar hitTest, ya que RenderBase puede averiguar la forma en que// d3 ha enlazado los datos con los elementos 'rect'.

Algunas visualizaciones de d3 encapsulan el punto de datos o tupla en otro objeto. En ese caso, debesustituir hitTest para que devuelva el objeto de datos:

protected hitTest( _elem: Element | null ): DataPoint | null{ const elem = d3.select<Element, any>( _elem ); const data = elem.empty() ? null : elem.datum(); return data && data.dp;}

Ayudas contextuales

La aplicación de host le proporciona ayudas contextuales. Para mostrar una ayuda contextual, en primerlugar el host debe averiguar qué elemento de datos se representa en una determinada ubicación de lapantalla. Utiliza la función hitTest para obtener esta información. Tras esto, será responsabilidad delhost mostrar la ayuda contextual con los datos y el estilo correctos.

Una vez implementada la función hitTest en RenderBase, o basándose en la implementaciónpredeterminada, básicamente obtendrá ayudas contextuales de forma gratuita. No hay necesidad deescribir sus propios manejadores de sucesos del ratón ni los mensajes emergentes para mostrar lasayudas contextuales. Esto implica que la visualización tiene ayudas contextuales que son coherentes conla aplicación de host.

Selección y resaltado

Con frecuencia, un usuario de la visualización personalizada puede pulsar un elemento de datos paraseleccionarlo, o pasar el puntero del ratón por encima de dicho elemento para resaltarlo. Este mecanismode selección y resaltado lo implementa el host y se basa también en el método hitTest. Una vez que laaplicación de host haya determinado qué elementos de datos se deben seleccionar o resaltar, loselementos de datos se decoran con los distintivos selected y/o highlighted y se invoca la función updatede la visualización. Es responsabilidad de la función update aplicar los distintivos selected y highlighteda la salida representada.

Para hacer que las visualizaciones se comporten de forma coherente con otras visualizaciones de laaplicación de host, una propiedad de paleta tiene un método con el que puede recuperar el estilo deselección o resaltado de un elemento basándose en sus distintivos selected y highlighted. En el código,esto tendría un aspecto similar al siguiente:

{ d3.select( "svg" ).selectAll( "rect" ) .data( _info.data.rows ) .join( "rect" ) .attr( "x", d => scaleX( d.value( X ) ) ) .attr( "y", d => scaleY( d.value( Y ) ) ) .attr( "width", d => scaleSize( d.value( SIZE ) ) ) .attr( "height", d => scaleSize( d.value( SIZE ) ) )


// Aplicar el estilo de selección y resaltado a 'rect'. .attr( "fill", d => palette.getFillColor( d ) ) .attr( "stroke", d => palette.getOutlineColor( d ) );}

LeyendasLa leyenda de una visualización se puede utilizar para mostrar al usuario cómo se utilizan los diversoscanales, como el color y el tamaño, para representar los datos.

Por ejemplo, en una visualización de barras agrupadas podría ser útil mostrar las etiquetas de grupo en eleje X y los colores y etiquetas de datos de los elementos de los grupos individuales en una leyenda. Otroejemplo es una visualización de burbujas, donde se puede usar una leyenda para mostrar el rango detamaño y el rango de color de las burbujas.

Las leyendas se representan fuera de la visualización personalizada. Para que una leyenda represente lainformación correcta, es necesario que la visualización proporcione una estructura de datos que indique ala leyenda qué debe mostrar. Esta estructura de datos se genera automáticamente dependiendo de lainformación de canal que se encuentre en las ranuras del “Definición de la visualización” en la página35.

Leyendas categóricas

Una leyenda categórica muestra una lista de marcadores, representando cada uno de ellos una tupla delconjunto de datos. Cada marcador puede tener una forma coloreada y tiene un título. La lista demarcadores se basa en la lista de tuplas de la ranura representada por la leyenda.

La leyenda también puede tener un título, tal como se muestra en el ejemplo de la temporada. El título sederiva con frecuencia del elemento de datos que representa la leyenda.

Leyendas continuas

Una leyenda continua muestra el rango de un valor. El rango se puede expresar como un rango de tamañoo un rango de color. Se utiliza la propiedad channel de una ranura para distinguir entre los dos.

La imagen anterior muestra una leyenda de color y una leyenda de tamaño. El título de estas leyendas, aligual que ocurre con las leyendas categóricas, se deriva del elemento de datos que representa la leyenda.

Habilitación de leyendas

En general, lo único que necesita hacer como desarrollador de paquetes es proporcionar el “Definición dela visualización” en la página 35 de la visualización. El archivo Vizdef.xml necesita varias entradasque posibiliten que RenderBase pueda determinar si se debe crear una leyenda y cómo hacerlo. Si el“Definición de la visualización” en la página 35 tiene las entradas necesarias, RenderBase crea lasestructuras de datos correctas y las pasa a la aplicación de host.

Las leyendas están vinculadas a las entradas de ranura del “Definición de la visualización” en la página35. Cada ranura del vizdef tiene un atributo opcional denominado channel. El canal (channel)determina el tipo de codificación de una leyenda y puede tener los valores color y size. El tipo color sepuede utilizar tanto para leyendas categóricas (marcadores coloreados) como para leyendas continuas


(rango de color). El tipo size se utiliza únicamente para leyendas continuas (rango de tamaño). Si unaranura tiene uno de los tipos de canal conocidos, se representa una leyenda para dicha ranura.

<slot name="series" type="cat" channel="color" /><slot name="values" type="cont" channel="size,color" />

Para las ranuras con el canal color, debe definir una propiedad palette (paleta). Esto permite que laaplicación de host pueda asignar un esquema de color personalizado a los elementos de la leyenda y lavisualización. Si no hay ninguna paleta disponible para la ranura, no se representará ninguna leyenda paradicha ranura.

Nota: En el ejemplo siguiente, la paleta no tiene un atributo type explícito. Si se enlaza la paleta a unaranura, el tipo de la paleta vendrá determinado por el tipo de la ranura enlazada.

<slots> <slot name="categories" type="cat" />  <slot name="series" type="cat" channel="color" />

 <slot name="values" type="cont" channel="size,color" /></slots>

<properties>  <palette name="series_colors" slot="series" />  <palette name="values_colors" slot="values" /></properties>

Modificación de leyendas

En algunas situaciones específicas, podría querer cambiar la información que se representa en la leyenda.Por ejemplo, es posible que decida que una leyenda esté visible o no en función de una condicióndeterminada. RenderBase tiene un método denominado updateLegend que se puede alterar paraproporcionar dicho comportamiento. Puede modificar la leyenda creada automáticamente, oproporcionar una nueva.

protected updateLegend( _data: DataSet ) : Encoding[]{ // Mostrar solo la leyenda para 'heat' o 'categories', pero no ambas. const filterSlot = _data.cols[ HEAT ].mapped ? "heat" : "categories";

// Mostrar solo una leyenda que coincida con `filterSlot`. return super.updateLegend( _data ).filter( _e => _e.slot === filterSlot );}

El ejemplo siguiente muestra cómo disponer los elementos en una leyenda categórica en orden inverso yel título de la leyenda en mayúsculas:

public updateLegend( _data: DataSet ) : Encoding[]{ // Crear la información de la leyenda predeterminada. const legend = super.updateLegend( _data );

// Si la leyenda es categórica, poner el título en mayúsculas e invertir los elementos. legend.forEach( _e => { if ( _e instanceof CatEncoding ) { _e.caption = _e.caption.toUpperCase(); _e.entries.reverse(); } } ); return legend;}

La API para crear y modificar la leyenda necesita la importación siguiente:

import { Encoding, CatEncoding, ContEncoding } from "@businessanalytics/customvis-lib";

PropiedadesUna visualización puede mostrar una o más propiedades para permitir que el usuario de la visualizaciónpueda controlar determinados aspectos de la visualización.

“Definición de la visualización” en la página 35 contiene las definiciones de propiedad de unavisualización. La lectura de los valores de propiedad y del estado activo se puede realizar a través delatributo properties de Renderbase.

Bloqueo de propiedades

Durante la representación, se puede considerar que todas las propiedades están en un estado bloqueado.Esto implica que la aplicación de host puede seguir modificando valores de propiedad, pero estos nuevosvalores no estarán disponibles en la visualización hasta la siguiente operación de representación. Estogarantiza que en la visualización pueda confiar en el valor de una propiedad durante, por ejemplo, unaanimación de ejecución larga.

Si la visualización necesita tener acceso síncrono a las propiedades, utilice properties.peek. Estodevuelve el valor de la propiedad que ha establecido una aplicación de host sin que afecte el bloqueo.

Otro método para obtener acceso síncrono a un valor de propiedad es sustituir el método“updateProperty” en la página 27. Este método se invoca directamente cuando el valor de propiedadcambia y no se aplica ningún bloqueo. Una visualización normalmente utiliza el métodoupdateProperty únicamente si desea actualizar el estado activo de las propiedades según el valor deotras propiedades.

Valores de propiedad

Cada propiedad tiene un valor basado en uno de los tipos de propiedad predefinidos:

• number• string• boolean• font• color• palette• length

Una subclase de RenderBase puede acceder a las propiedades a través de this.properties o a travésdel objeto UpdateInfo que se pasa en el método “updateProperty” en la página 27.

Si desea recuperar el valor de una propiedad, puede llamar al método get en el objeto de propiedad. Lafunción get devuelve el valor de propiedad como un tipo nativo (para number, string y boolean) o unobjeto (para color, font, length y palette).

javascriptvar ticks = this.properties.get( "numTicks" );assert( typeof ticks === "number" );

var title = this.properties.get( "title" );assert( typeof title === "string" );

var color = this.properties.get( "backgroundColor" );assert( typeof color = "string" );

Propiedades sucias

Cuando una aplicación de host cambia el valor de una propiedad, dicha propiedad pasa a estar sucia. Lapropiedad seguirá estando sucia hasta después de la siguiente operación de representación. Esto permiteque una visualización tenga la oportunidad de procesar propiedades sucias durante la actualización(update). El estado sucio de una propiedad se puede recuperar llamando a properties.getDirty().


En algunos casos, el rendimiento de representación se puede optimizar procesando únicamente laspropiedades que han cambiado desde la última operación update.

Propiedades activas e inactivas

Una propiedad se puede marcar como activa o como inactiva. El estado activo de una propiedad es unaindicación para un host sobre si debe mostrar la propiedad en la interfaz de usuario como habilitada oinhabilitada.

La visualización puede controlar el estado activo de una propiedad a través del métodoproperties.setActive(), o recuperar el estado activo de una propiedad utilizandoproperties.isActive(). Normalmente, las propiedades se establecen como activas o inactivas en elmétodo updateProperty de Renderbase. Este método se invoca en el momento de la inicialización dela visualización y cada vez que cambia el valor de una propiedad. Para obtener más información y unejemplo de código, consulte “updateProperty” en la página 27.

Grupos de propiedades

Las propiedades se pueden organizar en grupos y subgrupos. Esto permite que la aplicación de hostpueda mostrar esta organización de grupo en la interfaz de usuario. Se permite cualquier número degrupos y subgrupos, pero se recomienda mantener una profundidad de agrupación limitada.

Existen dos grupos de propiedades incorporados que se denominan visualization y text. Estosgrupos tienen un significado especial para la aplicación de host. Si ambos grupos están disponibles, seañade un conjunto de propiedades de leyenda generadas automáticamente a estos dos grupos. Si uno deestos grupos no está disponible, se genera un nuevo grupo denominado legend y se utiliza para laspropiedades de leyenda generadas automáticamente.

La única parte interesada en los grupos de propiedades es la aplicación de host. Por lo tanto, laimplementación de RenderBase no tiene acceso a los grupos de propiedades. Lo único que hace eldesarrollador de la visualización es definir los grupos de propiedades en “Definición de la visualización”en la página 35.

PaletasUna paleta es un tipo especial de propiedad que puede utilizar para determinar un color según una tuplao un valor.

Las paletas se proporcionan en dos tipos distintos: paletas categóricas y paletas continuas. Una paletacategórica se usa cuando se desea asignar un color distinto a cada una de las tuplas de una ranura. Unapaleta continua se utiliza cuando se desea usar un color para representar un valor numérico.

Paletas categóricas

Una paleta categórica le permite recuperar un color basándose en una tupla. Puede definir una paletacategórica para la visualización en el “Definición de la visualización” en la página 35:

<properties> <palette name="colors" type="cat" slot="series" /></properties>

Cuando defina una propiedad de paleta en el archivo vizdef.xml, puede acceder a la paleta como acualquier otra propiedad:

protected update( _info: UpdateInfo ): void{ // Recuperar la paleta y convertir a CatPalette. const palette = _info.props.get( "colors" ) as CatPalette;

// Obtener tuplas de series de la columna 2 del conjunto de datos. const seriesTuples = _info.cols[ 2 ].tuples;

// Recuperar un color para cada tupla de la lista.


// Determinar el dominio de valores de X e Y. const domainX = data ? data.cols[ 1 ].domain.asArray() : [ 0, 0 ]; const domainY = data ? data.cols[ 2 ].domain.asArray() : [ 0, 0 ];

// Crear escalas lineales para el posicionamiento de los puntos de datos. const scaleX = d3.scaleLinear().range( [ 0, width ] ).domain( domainX ); const scaleY = d3.scaleLinear().range( [ height, 0 ] ).domain( domainY );

const palette = _info.props.get( "color" ) as ContPalette;

// Representar un círculo con radio fijo para cada punto de datos. const svg = d3.select( _info.node ).select( "svg" ); svg.selectAll( "circle" ).data( data ? data.rows : [] ) .join( "circle" ) .attr( "cx", d => scaleX( Number( d.value( 1 ) ) ) ) .attr( "cy", d => scaleY( Number( d.value( 2 ) ) ) ) .attr( "r", 12 ) .attr( "stroke-width", 2 ) // El color de trazo y el color de relleno se basan en el estado seleccionado y resaltado. .attr( "stroke", d => palette.getOutlineColor( d ) ) .attr( "fill", d => palette.getFillColor( d ) ); }

Para que el ejemplo sea exhaustivo, a continuación se muestra el archivo vizdef.xml que se hautilizado:

<?xml version="1.0" encoding="UTF-8"?><visualizationDefinition version="3.1" xmlns="http://www.ibm.com/xmlns/prod/ba/vipr/vizBundle/vizdef.3"> <slots> <slot name="categories" type="cat" optional="false" /> <slot name="x" type="cont" optional="false" /> <slot name="y" type="cont" optional="false" /> <slot name="color" type="cont" optional="true" channel="color" /> </slots>

<dataSets> <dataSet name="data"> <ref slot="categories" /> <ref slot="x" /> <ref slot="y" /> <ref slot="color" /> </dataSet> </dataSets>

<properties> <group name="general"> <palette name="color" type="cont" slot="color" /> </group> </properties>

<capabilities> <decorations> <decoration name="selected" type="boolean" target="datapoint, tuple" /> <decoration name="hasSelection" type="boolean" target="dataset" /> <decoration name="highlighted" type="boolean" target="datapoint, tuple" /> </decorations> </capabilities></visualizationDefinition>

Paletas y ranuras

En los ejemplos anteriores, la definición de paleta del archivo vizdef.xml siempre se ha enlazado a unaranura. Esto permite que la paleta pueda determinar el color de un punto de datos y que RenderBasepueda generar una leyenda para dicha ranura basándose en la paleta.

En algunas situaciones, no conoce de antemano con qué ranura está enlazada una paleta. Por ejemplo, sitiene dos ranuras categóricas y la paleta podría estar enlazada a una de las dos ranuras. En dicho caso,puede omitir el atributo slot en la definición de la paleta y alterar temporalmente el métodoRenderBase.getSlotForPalette. Este método toma un nombre de paleta y devuelve su


correspondiente nombre de ranura con el que desea que se enlace la paleta El método solo se invocapara aquellas paletas que no tengan una ranura asociada. Por ejemplo:

protected getSlotForPalette( _data: DataSet, _palette: string ): string{ // Enlazar la paleta 'catColors' con la ranura series si la ranura está // correlacionada. De lo contrario, se enlaza con la ranura categories. if ( palette === "catColors" ) return _data.cols[ SERIES ].mapped ? "series" : "categories"; return null;}

Personalización de la visualizaciónRenderBase ofrece una serie de aspectos personalizables para una visualización.

Por ejemplo, si la visualización tiene un límite determinado sobre el número de puntos de datos a los queda soporte, puede establecer la variable RenderBase.meta.dataLimit en dicho límite. El atributometa es una instancia de la clase MetaInfo. Esta clase contiene todos los aspectos que puedepersonalizar.

MetaInfo

La clase MetaInfo contiene los aspectos de una visualización que puede personalizar. Normalmente,establecerá estos aspectos durante la inicialización de la visualización (la función create):

protected create( _node: HTMLElement ): void{ // Las leyendas categóricas deben usar un símbolo de círculo. this.meta.legendShape = "circle";

// Limitar la ranura de categorías a 250 elementos. this.meta.slotLimits.set( "categories", 250 );

// Limitar el número de puntos de datos a 1000. this.meta.dataLimit = 1000;}

A continuación se muestra una visión general de los aspectos soportados:

• legendShape - Define la forma de los elementos en una leyenda categórica (marcadores). Los valoresposibles son circle, rectangle, square, triangle, cross, donut, line, diamond, star,triangle-down, triangle-up, triangle-left o triangle-right. También puede ser nullpara indicar que el host debe utilizar una forma predeterminada o la serie none para indicar que no sedebe mostrar ninguna forma.

• slotLimits - Los límites de ranura definen el número de tuplas admitidas en una ranura. Seimplementa como una correlación entre nombre de host y valor de límite. Si no desea limitar la ranura,elimine el nombre de ranura de la correlación o establezca su valor en -1.

• dataLimit - Define el número máximo de puntos de datos que admite la visualización. Establézcalo en-1 para indicar que no hay ningún límite.

RenderBaseRenderBase es la clase base para todas las implementaciones de visualizaciones personalizadas.

Proporciona al desarrollador de la visualización algunas funciones básicas como

• “Representación” en la página 27• “Propiedades” en la página 27• “Pruebas de posicionamiento” en la página 28• Recursos de “nls” en la página 28• Información de “meta” en la página 29

Cada una de estas funciones se describe con mayor detalle en las secciones siguientes.


Representación

La representación de la visualización se lleva a cabo a través de los métodos create y update deRenderBase. Estos métodos implementan la fase de inicialización y actualización de un ciclo derepresentación. Para obtener más información, consulte “Representación” en la página 13. Puedesustituir estos métodos para proporcionar sus propios métodos de inicialización y actualización de larepresentación. La sustitución de estos métodos es opcional, pues si no los sustituye, se proporcionaráuna implementación predeterminada en RenderBase.

create()

Sintaxis:

create( _node: HTMLElement ): Element | void | Promise<Element | void>

El método create se invoca exactamente una vez, cuando se crea la visualización. Básicamente, pondráaquí todo el código de inicialización. O también puede configurar el contexto de dibujo (tal vez un nodosvg con algunos grupos o elementos hijo fijos). El valor de retorno pasa a ser el elemento raíz de lavisualización y se le pasa en el método update. Si no devuelve un valor en esta función, o decide noimplementarla, el _node que se pasa se convertirá en el elemento raíz de la visualización.

update()

Sintaxis:

update( _info: UpdateInfo ): void | Promise<void>

El método update se invoca cada vez que se deba volver a dibujar la visualización. Los motivos paravolver a dibujar la visualización son que existan datos nuevos, propiedades modificadas o un tamaño devisualización modificado. Se pasa un parámetro que contiene UpdateInfo (información de actualización)al método update, lo que le permite acceder a los datos y propiedades más recientes, así como a unconjunto de distintivos, que indican el motivo por el que se llama al método update.

Propiedades

Es probable que la visualización exponga una o más propiedades que permitan que el usuario puedacontrolar comportamientos específicos de la visualización. RenderBase le proporciona acceso a estaspropiedades utilizando el atributo properties. Además de recuperar valores de propiedad, RenderBasetambién le permite supervisar los cambios en las propiedades. Esto resulta útil si necesita activar odesactivar propiedades según los valores de otras propiedades. Por ejemplo, un gráfico de barras puedetener una propiedad stacked y una propiedad stackPercent. Si no se establece stacked, es posibleque se inhabilite stackPercent.

Sintaxis:

properties: Properties

Este atributo contiene las propiedades disponibles en la visualización. Puede acceder al valor de unapropiedad llamando a properties.get( "propname" ). La obtención y el establecimiento del estadoactivo de una propiedad se pueden llevar a cabo llamando a isActive y a setActive en el atributoproperties respectivamente. Las propiedades también se le pasan en el objeto UpdateInfo. Paraobtener más información, consulte “update()” en la página 27.

updateProperty

Sintaxis:

updateProperty( _name: string, _value: any ): void


Se invoca inmediatamente si el host asigna un nuevo valor a una propiedad. Puede sustituir este métodopara procesar cambios de propiedad. Por ejemplo, se puede establecer el estado activo de laspropiedades en función del valor de otra propiedad.

protected updateProperty( _name: string, _value: any ): void{ if ( _name === "stacked" ) this.properties.setActive( "stackedPercent", _value );}

El método updateProperty también se invoca en el momento de la inicialización para cada propiedadde la visualización. Puede establecer el estado activo inicial correcto para todas las propiedades.

Si desea acceder al valor de una propiedad en este método, utilice properties.peek en lugar deproperties.value. El primero proporciona acceso síncrono al valor de la propiedad, lo que implica queno se ve afectado por el bloqueo. Para obtener más información, consulte “Bloqueo de propiedades” enla página 22.

Localización

Si la visualización necesita ofrecer texto o mensajes traducidos, puede configurar una estructura dedirectorios nls y añadir el texto en el archivo resources.js de la raíz de los directorios nls. Puedecrear subdirectorios y añadir archivos resources.js traducidos para cada idioma al que desee darsoporte. Cuando se cargue la visualización, se cargarán los recursos de texto y estarán disponibles en lasubclase RenderBase a través del atributo nls.

El plugin nls de RequireJS se utiliza internamente para cargar y procesar los archivos nls.

nls

Sintaxis:

nls( _name: string ): string

Devuelve una serie traducida para un nombre exclusivo dado.

protected update( _info: UpdateInfo ): void{ if ( _info.data === null ) { _info.node.textContent = this.nls( "no_data" ); return; }}

Pruebas de posicionamiento

La visualización puede proporcionar funciones de pruebas de posicionamiento personalizadas, quepermiten que la aplicación de host pueda mostrar ayudas contextuales, selecciones y resaltados. Ya seproporciona una función de pruebas de posicionamiento predeterminada automáticamente enRenderBase. Esta función comprueba si existe un enlace de datos d3 y lo utiliza si está disponible.

hitTest

Sintaxis:

hitTest( _elem: Element | null, _client: Point, _viewport: Point ): DataPoint | Tuple | null

Devuelve un elemento de datos en función de un elemento y una coordenada. La coordenada se pasacomo un punto de cliente (relativo a la ventana de navegador) y como un punto de vista (relativo a lavisualización). Se supone que debe devolver un objeto de datos que se le ha pasado en el método“update()” en la página 27. Para obtener más información, consulte “Interactividad” en la página 18.


meta

Sintaxis:

meta: MetaInfo

Actualmente, están disponibles los campos siguientes:

• legendShape - Define la forma de los elementos en una leyenda categórica. El valor predeterminadoes null, que indica que el host puede determinar una forma predeterminada.

• slotLimits - Es una correlación entre el nombre de ranura y el número de tuplas admitidas en dicharanura. La información de esta correlación se pasa al host como indicación de cuántos datos puedemanejar la visualización. Las ranuras que no estén en esta correlación, o que tengan un límite de -1, noestarán limitadas a un número máximo de tuplas.

• dataLimit - El número máximo de puntos de datos que admite la visualización, o -1 si no hay límite.


Capítulo 5. Customvis API reference

Referencia de API de CustomvisHay disponible una referencia de API para clases y métodos de Customvis-lib.

Consulte la referencia de API para obtener información detallada acerca de las clases y métodos que seencuentran en customvis-lib.



Capítulo 6. Customvis frequently asked question

Preguntas más frecuentes de las visualizaciones personalizadasHay disponible una sección de preguntas más frecuentes para las visualizaciones personalizadas.

Compruebe la sección Preguntas más frecuentes para las preguntas más frecuentes en visualizacionespersonalizadas.


https://github.com/IBM/ca_customvis/wiki/Customvis-FAQ

Capítulo 7. Visualization definition

Definición de la visualizaciónEl VizDef es un archivo XML que contiene la definición de la visualización que va a crear.

El archivo VizDef indica a una aplicación de host algunos aspectos acerca de la visualización, como lamanera en que se organizan los datos y las propiedades de la visualización.

Cada visualización personalizada que cree debe tener un archivo vizdef.xml en el directorio raíz. Sicrea una visualización nueva con customvis start, se crea un vizdef.xml inicial automáticamente.

Ranuras

Las ranuras definen los aspectos de la visualización que pueden contener los datos. Por ejemplo, en unavisualización de barras, podría tener dos ranuras, una para las tuplas categóricas y otras para los valores.Una ranura al menos tiene al menos un nombre (name), para referencia interna, y un tipo (type),categórico o continuo. Una definición de ranuras tipica podría tener el aspecto siguiente:

<slots> <slot name="categories" caption="Categories" type="cat" optional="false" /> <slot name="values" caption="Values" type="cont" optional="false" /> <slot name="series" caption="Color" type="cat" optional="true" channel="color" /></slots>

Los atributos name y type son obligatorios y contienen el nombre interno y el tipo de la ranura.

El atributo caption contiene el nombre que se puede utilizar en la interfaz de usuario de una aplicación.Puede especificar una serie literal aquí o una referencia a una serie localizada, tal como$nls.categories. Para obtener más información, consulte “Localización” en la página 37.

El atributo optional indica si la visualización puede representar cualquier cosa significativa sin tenerningún dato correlacionado con esa ranura. Por ejemplo, en el ejemplo anterior, la ranura series estámarcada como opcional. Esto implica que, si el usuario no correlaciona datos con esta ranura, lavisualización solo representa una serie predeterminada.

Por último, el atributo channel indica que la aplicación de host puede utilizar una codificación específicapara representar una leyenda para cada ranura. Los valores posibles para channel son color y size.Para obtener más información, consulte “Leyendas” en la página 20.

DataSets (conjuntos de datos)

Un DataSet define la recopilación de ranuras que constituyen los límites de sus datos. Actualmente,RenderBase solo tiene soporte para un conjunto de datos, por lo que la entrada DataSets típica enVizDef.xml tendrá el aspecto siguiente:

<dataSets> <dataSet name="data"> <ref slot="categories" /> <ref slot="series" /> <ref slot="values" /> </dataSet></dataSets>

Cada ranura que haya definido en la sección ranuras debe aparecer listada en un conjunto de datos.

Propiedades

Una visualización puede exponer propiedades que permiten que el usuario de la visualización puedacontrolar diversos aspectos del comportamiento de la visualización. Cada propiedad está definida como


mínimo por un nombre y un tipo. Dependiendo del tipo de propiedad, es posible que se apliquen otrosatributos. Una visualización puede organizar las propiedades en grupos lógicos. La aplicación de host esla responsable de mostrar o no la agrupación de propiedades en la interfaz de usuario. Por ejemplo:

<properties> <group name="general">  <boolean name="labels.visible" defaultValue="true" />  <number name="ticks.count" minValue="0" allowNull="true" />  <string name="title.text" allowNull="true" />  <font name="title.font" defaultValue="10px arial" /> </group></properties>

Nota: El uso de allowNull requiere que el código de la visualización maneje correctamente el casonull. El establecimiento de este distintivo implica que null pasa a ser un valor válido de la propiedad. SiallowNull es false, la visualización puede asumir que el valor de la propiedad nunca será null y nohabrá necesidad de realizar comprobaciones de validez en el código.

Los atributos siguientes pueden aplicarse a una propiedad:

• name: el nombre de la propiedad. Se utiliza para hacer referencia a la propiedad en el código de serviciode representación.

• caption: la etiqueta que aparece en la interfaz de usuario para la propiedad. Puede ser una serie literalo un ID de localización: una serie con prefijo $nls..

• defaultValue: el valor predeterminado que recibe una propiedad cuando se inicializa. Si no seespecifica defaultValue y allowNull es true, el valor predeterminado será null.

• allowNull: distintivo que indica si una aplicación host tiene permitido establecer un valor null. Seutiliza con frecuencia para indicar valores automáticos. Por ejemplo, para una escala.

• minValue: solo para propiedades de tipo number, define el valor mínimo permitido.• maxValue: solo para propiedades de tipo number, define el valor máximo permitido.• slot: solo para propiedades de tipo palette, enlaza una paleta con una ranura. El tipo de paleta y el

tipo de ranura deben coincidir. Si omite el tipo de paleta, se usa el tipo de ranura.• type: solo para propiedades de tipo palette, define el tipo de la paleta: cat o cont.

Están disponibles los tipos de propiedades siguientes:

• string: contiene un valor textual.• number: contiene un valor numérico. Opcionalmente, se pueden especificar los valores mínimo y

máximo a través de los atributos minValue y maxValue.• boolean: contiene un valor booleano.• enum: contiene una lista estática de valores entre los que el usuario de la visualización puede elegir

uno. La lista de valores posibles se puede especificar en elementos <possibleValue>. Consulte elcódigo de ejemplo más abajo.

• color: contiene un valor de color. El defaultValue de un color puede ser una representación css(hoja de estilo en cascada) de un color, incluyendo colores con nombre (‘red’, ‘green’).

• font: contiene una definición css de fuente.• palette: contiene una referencia de paleta. Una paleta se define mediante un nombre y,

posiblemente, un defaultValue. Si no se especifica un defaultValue, se asigna una paleta incorporada.Los valores predeterminados para una paleta se definen mediante una lista de colores separados porpunto y coma.

<font name="axis.title" defaultValue="bold 16px Arial" />

<enum name="shape" caption="Shape"> <possibleValue caption="Circle">circle</possibleValue> <possibleValue caption="Square">square</possibleValue></enum>

<palette name="color" type="cat" defaultValue="red;green;blue" /><palette name="range" type="cont" defaultValue="red 0%;green 50%;blue 100%" />

Funciones

Si la visualización debe ser capaz de responder a resaltados y selecciones, especifique la secciónsiguiente en el archivo vizdef.xml:

<capabilities> <decorations> <decoration name="selected" type="boolean" target="datapoint" /> <decoration name="hasSelection" type="boolean" target="dataset" /> <decoration name="highlighted" type="boolean" target="datapoint" /> </decorations></capabilities>

Esta sección indica a la aplicación de host que se pueden seleccionar y resaltar los puntos de datos. Si nodesea que la visualización utilice el soporte incorporado para resaltado y selección, puede optar por noincluir esta sección en el archivo vizdef.xml.

Localización

El archivo vizdef.xml contiene información que una aplicación de host puede utilizar para representaruna interfaz de usuario. Por ejemplo, el archivo vizdef.xml contiene todas las propiedades que unavisualización expone y una aplicación de host puede leer dichas propiedades y mostrarlas al final de unpanel de propiedades.

Para permitir nombres y descripciones de propiedades de localización, se ha introducido una notaciónespecial que correlaciona el valor de un atributo con un índice de una tabla de recursos. Por ejemplo,observe la definición de propiedad siguiente:

<boolean name="labels.visible" caption="$nls.labels.visible" defaultValue="true" />

El título se muestra al usuario y se puede localizar. En lugar de grabar en código un valor en este atributo,se utiliza un ID: $nls.labels.visible. A continuación, se usa una tabla de recursos para buscar esteID y encontrar el título real en el idioma correcto.

La tabla de recursos que contiene estas series localizadas tiene un formato acorde con el plugin i18n.jsde requirejs. Para que customvis pueda encontrar y procesar correctamente las localizaciones, debetener una estructura de archivos y carpetas similar al ejemplo siguiente:

./nls/de/Resources.js

./nls/nl/Resources.js

./nls/Resources.js

Este ejemplo contiene un idioma base o raíz en ./nls y traducciones al alemán y neerlandésen ./nls/de y ./nls/nl. El archivo Resources.js raíz debe tener un aspecto similar al siguiente:

define({ "root": { "labels.visible" : "Show Labels", "labels.font" : "Label Font" }, "nl": true, "de": true} );

Capítulo 7. Visualization definition 37

Cada archivo específico del idioma tiene el contenido siguiente:

define({ "labels.visible" : "Toon Labels", "labels.font" : "Label Lettertype"} );

Las entradas de recursos encontradas aquí no están limitadas a las series utilizadas en el VizDef. Tambiénpuede incluir entradas que se utilizan en el código de representación. Para obtener más información,consulte “Localización” en la página 28.

Para obtener más información sobre la API REQUIREJS, consulte la Documentación de requirejs.


https://requirejs.org/docs/api.html#i18n

Capítulo 8. Tutorial

Visualizaciones personalizadas - Guía de aprendizajeEn esta guía de aprendizaje aprenderá a crear una visualización personalizada desde cero utilizando laherramienta de interfaz de línea de mandatos (CLI) customvis.

Antes de empezar

1. Asegúrese de haber configurado el entorno de desarrollo y de haber instalado las herramientas de CLIde visualizaciones personalizadas tal como se describe en “Configuración del entorno de desarrollo”en la página 3.

2. En esta guía de aprendizaje se presupone que tiene un conocimiento básico de d3. Esto hace queseguir los pasos de este documento sea mucho más fácil y le permite realizar sus propiasmodificaciones tras haber completado la guía de aprendizaje.

3. Se recomienda tener un conocimiento básico de TypeScript, ya que los ejemplos de esta guía deaprendizaje están basados en TypeScript.

4. Hay documentación de referencia de API disponible sobre todas las clases y funciones decustomvis-lib.

Al final de esta guía de aprendizaje, habrá creado una visualización con un aspecto similar al siguiente:



La visualización tiene tres ranuras de datos y una paleta personalizable. Además, la visualización tienesoporte para ayudas contextuales, selección y resaltado, y muestra una leyenda basada en el productocuando se utiliza en un panel de control o en informes de IBM Cognos Analytics.

La Parte 1 configurará el modelo de datos e implementará el código de inicialización y representación. Alfinal de esta parte, tendrá una visualización de dispersión funcional con datos enlazados y con soportepara resaltados, selecciones y ayudas contextuales.

La Parte 2 añadirá más propiedades a la visualización, como una forma de punto, título y valoresmáximos para los ejes X e Y. Se utilizarán distintos tipos de propiedades y podrá ver cómo usar losatributos 'defaultValue' y 'allowNull' de una propiedad.

La Parte 3 mejorará aún más la visualización adaptando la leyenda a los símbolos de dispersión,estableciendo el estado activo de la propiedad title según el valor de la propiedad showTitle yproporcionando títulos de propiedad.

La Parte 4 es la última parte de esta guía de aprendizaje. Muestra cómo definir ranuras opcionales,cambiar el orden de la leyenda y proporcionar localización. La localización le permite proporcionartraducciones en diversos idiomas para los elementos de la interfaz de usuario, como los títulos de ranuray de propiedad, de la visualización.

Al final de cada parte, se muestra un enlace al código fuente utilizado en dicha parte. Cada parte se basaen la anterior, por lo que si desea omitir una parte, puede descargar el código fuente de la parte anterior ycontinuar con eso.

• Descargar el código fuente completo de la guía de aprendizaje.

Parte 1: Creación de una visualización personalizadaEn esta primera parte, creará una nueva visualización utilizando una de las plantillas incorporadas yañadirá una definición de datos. También proporcionará una implementación inicial que represente el ejex, el eje y, y puntos de dispersión para cada fila en los datos proporcionados. Al final de esta parte, tendráun ejemplo funcional de una visualización dispersa (muy básica).

Antes de empezar

Asegúrese de haber configurado el entorno de desarrollo y de haber instalado las herramientas de CLI devisualizaciones personalizadas tal como se describe en “Configuración del entorno de desarrollo” en lapágina 3.

Paso 1: creación de la visualización

Abra un terminal de mandatos, vaya al directorio donde se crean las visualizaciones y cree una nuevavisualización ejecutando los mandatos siguientes:

Líneas Código

123

customvis create MyScattercd MyScattercustomvis start

customvis create MyScattercd MyScattercustomvis start

El primer mandato crea una visualización de plantilla en un nuevo directorio denominado MyScatter. Elsegundo mandato le lleva al directorio donde se crean los archivos siguientes:

• package.json


https://ibm.github.io/ca_customvis/docs/tutorial/MyScatter-4.zip

Aquí es donde puede cambiar el nombre y el icono del paquete tal como aparece en IBM CognosAnalytics.

"meta": { "name": "Fred", "icon": "bundle.svg"

El nombre y el icono ya se han rellenado automáticamente, pero puede elegir un nombre distinto o unformato de archivo de icono diferente (.png, .jpg).

• vizdef.xml

Archivo de “Definición de la visualización” en la página 35 que describe aspectos de la visualizacióncomo las ranuras, la organización de los datos y las propiedades externas. En el paso 2, editará estearchivo y añadirá ranuras y propiedades para la nueva visualización.

• externals.d.ts

Si la visualización necesita hacer referencia a bibliotecas externas, puede añadirlas aquí. En esteejemplo, sin embargo, no es necesario realizar cambios en este archivo.

• customvis-lib.tgz

Este archivo contiene las API que utilizará para desarrollar la visualización, incluyendo una clase basedenominada “RenderBase” en la página 26, de la que derivará su clase de visualización.

• renderer/Main.ts

El archivo de implementación principal. La extensión .ts indica que se trata de un archivo typescript. Enel paso 3, empezará a añadir código en este archivo.

El tercer y último mandato inicia la visualización y la establece como disponible para su uso enIBMCognos Analytics. La visualización no tiene muchas funciones todavía, por lo que, en los próximospasos, empezará a realizar cambios en el archivo vizdef.xml y en el archivo Main.ts y añadirá algunascaracterísticas. Todos los cambios que realice los recogerá continuamente la herramienta de CLI y loscompilará en una visualización funcional. Esto se desarrollará más en el paso 4.

Nota: Tras ejecutar customvis start, verá que se crean algunos archivos y carpetas adicionales. Estaes la salida de compilación, necesaria para ejecutar la visualización. Si desea empezar de nuevo con unacarpeta limpia, ejecute customvis clean. Esto eliminará estos archivos generados.

Paso 2: editar vizdef.xml

Los dos archivos más importantes para la visualización son vizdef.xml y Main.ts. En este paso noscentraremos en “Definición de la visualización” en la página 35. vizdef es una definición xml de lascaracterísticas de la visualización. Esta definición puede utilizarla cualquier aplicación de host para, porejemplo, crear una interfaz de usuario para gestionar propiedades, implementar resaltado y selecciones,y realizar consultas de datos eficientes.

Empezará editando el archivo vizdef.xml recién creado en su editor de texto. Verá el contenidosiguiente:

<?xml version="1.0" encoding="UTF-8"?><visualizationDefinition version="3.1" xmlns="http://www.ibm.com/xmlns/prod/ba/vipr/vizBundle/vizdef.3"></visualizationDefinition>

Para la visualización dispersa, necesitará añadir ranuras, un conjunto de datos y funciones.

Ranuras y conjuntos de datos

Lo primero que se va a añadir son las ranuras y un conjunto de datos, que definen los datos utilizadosdentro de la visualización. La visualización dispersa tendrá tres ranuras:

• Una ranura categórica que contiene una tupla para cada punto que se va a trazar.• Una ranura continua que contiene el valor para la posición x del punto.

Capítulo 8. Tutorial 41

• Una ranura continua que contiene el valor para la posición y del punto.

Para obtener más información sobre ranuras y conjuntos de datos, consulte “Modelo de datos” en lapágina 15.

En este ejemplo, todas las ranuras se consideran obligatorias. Si no hay datos para ninguna de lasranuras, no se representará la visualización. Con estos requisitos, edite vizdef.xml para que tenga unaspecto similar al siguiente:

Líneas Código

12345678910111213141516

<?xml version="1.0" encoding="UTF-8"?><visualizationDefinition version="3.1" xmlns="http://www.ibm.com/xmlns/prod/ba/vipr/vizBundle/vizdef.3"> <slots> <slot name="categories" type="cat" optional="false" channel="color" /> <slot name="xpos" type="cont" optional="false" /> <slot name="ypos" type="cont" optional="false" /> </slots>

<dataSets> <dataSet> <ref slot="categories" /> <ref slot="xpos" /> <ref slot="ypos" /> </dataSet> </dataSets></visualizationDefinition>

Es importante que añada una única entrada dataSet que haga referencia a cada ranura.

El atributo channel="color" de la ranura categories de la línea 4 es necesario para dibujar una leyendabasada en el producto Cognos Analytics en función de los datos de dicha ranura. Consulte “Leyendas” enla página 20 para obtener más información.

Propiedades

La visualización puede exponer propiedades públicas que permitan que los autores puedan modificar elaspecto de la visualización dentro de Cognos Analytics. Serían, por ejemplo, propiedades de fuente,colores, márgenes, etc. Por ahora, añadiremos únicamente una propiedad: una paleta de colores.

Una visualización puede utilizar una paleta para determinar los colores utilizados para los elementos dedatos. Para la visualización dispersa, queremos mostrar un color distinto para cada círculo representado.A continuación se muestra el xml necesario en vizdef:

... <properties> <palette name="color" slot="categories" /> </properties></visualizationDefinition>

Funciones de selección y resaltado

Si desea que los elementos de datos de la visualización indiquen selecciones y elementos resaltados,deberá añadir algunas funciones al vizdef. Estas funciones garantizan que la aplicación de hostproporciona información sobre el estado de resaltado o selección de los elementos de los datos:

... <capabilities> <decorations> <decoration name="selected" type="boolean" target="datapoint" /> <decoration name="hasSelection" type="boolean" target="dataset" /> <decoration name="highlighted" type="boolean" target="datapoint" /> </decorations> </capabilities></visualizationDefinition>

El campo target indica que solo nos interesa la decoración de los puntos de datos. En otrasvisualizaciones, podría especificar también tuple además de datapoint (separados por comas). Sin


embargo, por ahora nos quedaremos con la definición que se muestra más arriba. Puede obtener másinformación sobre tuplas y puntos de datos en la documentación de “Modelo de datos” en la página 15.

Paso 3: empezar a escribir código en Main.ts

Ahora que el archivo vizdef.xml está listo, puede empezar a codificar el comportamiento de lavisualización. Para empezar, abra el archivo Main.ts, que se encuentra en el directorio renderer. Elarchivo tiene el aspecto siguiente:

import { RenderBase } from "@businessanalytics/customvis-lib";

export default class extends RenderBase{ protected create( _node: HTMLElement ): HTMLElement { _node.textContent = "Basic VizBundle"; return _node; }}

A continuación, aprenderá a añadir una referencia d3, realizar la configuración inicial de la visualización ygestionar las actualizaciones.

Referencia d3

Dado que la visualización se basará en d3, deberá importar los tipos d3. También gestionará lasactualizaciones de representación, por lo que también se requiere UpdateInfo. Por último, definirávarias constantes que serán útiles más adelante para hacer referencia a las ranuras:

import { RenderBase, UpdateInfo } from "@businessanalytics/customvis-lib";import * as d3 from "d3";

const CAT = 0, XPOS = 1, YPOS = 2; // slot indices...

Realice la inicialización

Cada visualización tiene un método create que se llama una sola vez, durante la creación de lavisualización. Puede añadir código que realice la configuración inicial aquí, por lo que crearemos un lienzosvg que se utilizará para la representación. Cambie la función create existente según se indica acontinuación:

protected create( _node: HTMLElement ): Element{ // Crear un lienzo svg que se ajuste al tamaño del padre. const svg = d3.select( _node ).append( "svg" ) .attr( "width", "100%" ) .attr( "height", "100%" );

// Crear grupos para ejes y elementos. const chart = svg.append( "g" ).attr( "class", "chart" ); chart.append( "g" ).attr( "class", "xaxis data" ); chart.append( "g" ).attr( "class", "yaxis data" ); chart.append( "g" ).attr( "class", "elem data" );

// Devolver el nodo svg como nodo raíz de la visualización. return svg.node();}

Nota: El valor de retorno de la función create ha cambiado de HTMLElement a Element.

La función create tiene un parámetro: _node. Este es el elemento HTML que es el elemento contenedorde la visualización. Puede representarlo todo directamente en este nodo o en los hijos de este nodo.

El último mandato return svg.node(); convierte al nodo svg en el nodo raíz de la visualización. Elnodo raíz se pasa a la función update que implementará en el paso siguiente.

Gestione las actualizaciones


La mayor parte de la representación se lleva a cabo en la función update. Esta función se llamará en casode que:

• Lleguen nuevos datos.• Los valores de propiedad hayan cambiado.• El tamaño de la visualización haya cambiado.• Las selecciones o resaltados hayan cambiado.

A continuación se muestra el código completo de update. Puede pegarlo directamente después de lafunción create que acaba de modificar. La mayoría del código está relacionado con d3. A continuaciónse muestran descripciones detalladas.

Líneas Código

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

protected update( _info: UpdateInfo ): void{ // Obtener datos, propiedades y el nodo svg. const data = _info.data; const props = _info.props; const svg = d3.select( _info.node );

// Si no hay datos, eliminar todos los ejes y elementos. if ( !data ) { svg.selectAll( ".data>*" ).remove(); // eliminar hijos de elementos '.data' return; }

const margin = 20; // utilizar un margen de 20 píxeles const xHeight = 20; // asumir una altura de 20 px.

// Crear el eje y. const yHeight = _info.node.clientHeight - 2 * margin - xHeight; const yDomain = data.cols[ YPOS ].domain.asArray(); // [min, max] const yScale = d3.scaleLinear().range( [ yHeight, 0 ] ).domain( yDomain ).nice(); const yAxis = svg.select<SVGGElement>( ".yaxis" ).call( d3.axisLeft( yScale ) ); const yWidth = yAxis.node().getBBox().width;

// Crear el eje x y colocarlo en la parte inferior del eje y. const xWidth = _info.node.clientWidth - yWidth - 2 * margin; const xDomain = data.cols[ XPOS ].domain.asArray(); // [min, max] const xScale = d3.scaleLinear().range( [ 0, xWidth ] ).domain( xDomain ).nice(); const xAxis = svg.select( ".xaxis" ).call( d3.axisBottom( xScale ) ); xAxis.attr( "transform", `translate(0,${yHeight})` );

// Posicionar el gráfico (ejes y elementos). svg.select( ".chart" ).attr( "transform", `translate(${yWidth+margin},${margin})` );

// Determinar la paleta de colores de las propiedades y crear una forma de círculo. const palette = props.get( "color" ); const shape = d3.symbol().size( 256 ).type( d3.symbolCircle );

// Para cada fila de los datos, crear y colocar un elemento de círculo. svg.select( ".elem" ) .selectAll( "path" ) .data( data.rows, ( row: any ) => row.key ) .join( "path" ) .attr( "d", shape ) .attr( "transform", row => `translate(${xScale(row.value(XPOS))},${yScale(row.value(YPOS))})` ) .attr( "stroke-width", 3 ) .attr( "stroke", row => palette.getOutlineColor( row ) ) .attr( "fill", row => palette.getFillColor( row ) );}

Líneas 9-13 Gestionan la situación en que no existen datos. Esto implica que _info.data es null y quelo único que hay que hacer es eliminar todos los elementos de los tres grupos g de la pantalla.

Líneas 15-16 Definen varias constantes para el margen, la altura del eje y los índices de columna. Estasse utilizan para mejorar la legibilidad del código.


Líneas 19-30 Crear un eje Y y un eje X. Para un eje, es necesario tener una escala (scale) que se base enel dominio de los valores de datos (mínimo y máximo) y el rango (en píxeles). El atributo transform quese añade al eje garantiza que el eje se coloque en la posición correcta.

Línea 36 Determina la paleta, definida en el paso 2. Necesitará esta paleta en las líneas 48 y 49 paradeterminar el color de relleno y del contorno de los círculos que se representan.

Líneas 40-48 Llevan a cabo la creación, actualización y eliminación de puntos de dispersión. Los datos d3se basan en data.rows. Una función de clave garantiza que se asigna un ID exclusivo a cada símbolo.Observe el uso de la paleta en las líneas 47 y 48. Puede consultar la paleta para ver si tiene un colorespecífico dado un punto de datos d. Efectivamente, estas dos líneas hacen que los círculos de lavisualización respondan a resaltados (puntero del ratón encima) y selecciones (pulsación del ratón). Elposicionamiento real de cada círculo se lleva a cabo en la línea 43, utilizando una transformacióntranslate.

Nota: Es posible que haya observado que no hay código para gestionar sucesos del ratón, ayudascontextuales y el dibujo de las leyendas. Aunque en casos muy específicos puede añadir códigopersonalizado para esto, la visualización que acaba de crear ya tiene soporte para resaltado, selecciones,filtrado y una leyenda interactiva. Todo esto se proporciona a través de la clase base RenderBase y elentorno en el que se ejecuta la visualización. Esto le permite crear visualizaciones potentes y coherentescon un esfuerzo mínimo.

Paso 4: ejecutar y probar la visualización

En el paso 1, ya ha iniciado la visualización ejecutando customvis start. Esto implica que ahora puedeiniciar Cognos Analytics y probar la visualización en un panel de control o un informe. Para obtenerdetalles, consulte “Guía paso a paso para visualizaciones personalizadas” en la página 3.

Enlaces

• Descargar el código fuente de la parte 1.

Parte 2: adición de propiedades a la visualizaciónEn la parte 1 de esta guía de aprendizaje, hemos añadido una propiedad de paleta para los colores de lospuntos de dispersión. En la parte 2 vamos a añadir algunas propiedades más a la visualización, como untítulo, la forma del punto, el máximo de x e y, y mostrar el distintivo de título. Veremos diversas opcionespara definir una propiedad, como un valor predeterminado y el distintivo allowNull, y grupos depropiedades.

Antes de empezar

Asegúrese de haber completado “Parte 1: Creación de una visualización personalizada” en la página 40 ode haber descargado el código fuente de la parte 1.

Paso 1: modificar el archivo vizdef.xml

Ya hemos visto que las definiciones de propiedad forman parte del archivo vizdef.xml. En este paso,no solo añadiremos propiedades, sino que también organizaremos las propiedades en grupos depropiedades.

Los grupos de propiedades constituyen una organización jerárquica de propiedades. La aplicación de hostcon frecuencia mostrará los grupos de propiedades como separadores o paneles independientes en lainterfaz de usuario. La ubicación de una propiedad de la visualización personalizada en un grupo hará quela propiedad aparezca en el lugar correspondiente en la interfaz de usuario.

Para la visualización dispersa, queremos definir la estructura de propiedades siguiente:

• visualization (grupo)

– general (grupo)

- color - propiedad de paleta que hemos añadido en el paso 1 de la parte 1.- pointShape - forma de un punto de dispersión, ("circle" o "square").




- background - url de una imagen de fondo.- showBackground - distintivo que indica si se debe mostrar el fondo.

– axis (grupo)

- xmax - valor máximo del eje x, o null para que sea automático.- ymax - valor máximo del eje y, o null para que sea automático.

Las entradas de vizdef.xml para estas propiedades tienen el aspecto siguiente:

<properties> <group name="general"> <palette name="color" slot="categories" /> <enum name="pointShape" defaultValue="circle"> <possibleValue>circle</possibleValue> <possibleValue>square</possibleValue> </enum> <string name="background" defaultValue="" /> <boolean name="showBackground" defaultValue="true" /> </group> <group name="axis"> <number name="xmax" allowNull="true" /> <number name="ymax" allowNull="true" /> </group></properties>

Aquí se deben observar dos atributos: defaultValue y allowNull. El atributo defaultValuerepresenta el valor inicial que tendrá la propiedad. El atributo allowNull indica si se permiten valoresnulos (null) para la propiedad. De forma predeterminada, los valores null no están permitidos. Para elcódigo de la visualización personalizada, esto implica que, en la situación predeterminada, puede basarsesiempre en un valor no nulo al llamar a Properties.get.

Paso 2: añadir código en Main.ts

pointShape

El cambio de la forma de un punto es bastante fácil, ya que para cada posible valor de enum hay un tipode símbolo d3 correspondiente disponible. Sustituya el código actual que determina la paleta y la formapor:

// Determine la paleta de color y la forma a partir de las propiedades.const palette = props.get( "color" );const shape = d3.symbol().size( 256 );if ( props.get( "pointShape" ) === "square" ) shape.type( d3.symbolSquare );else shape.type( d3.symbolCircle );

Si desea dar soporte para otros tipos de formas además de estos dos, tiene total libertad para ampliareste código un poco más. Quizás desee utilizar una sentencia switch para seleccionar el tipo de símbolocorrecto, o utilizar una correlación de búsqueda.

Tenga en cuenta que el valor de una propiedad enum (enumeración) siempre es una serie. Podemoscomparar de forma segura el valor de la propiedad con la serie literal "square", o podemos utilizar elvalor de la propiedad en una sentencia switch.

Nota: Es una buena práctica elegir valores enum que no sean susceptibles de cambiar con el tiempo. Enla parte 3 de esta guía de aprendizaje aprenderemos a añadir un título ('caption') localizado para un valorenum, que se utiliza para mostrarlo en la interfaz de usuario.

xmax e ymax

En la parte 1 ya hemos definido el dominio de nuestros ejes llamando a getDomain en los datos. Si xmaxo ymax son no nulos, podemos utilizar estos valores de propiedad en su lugar. Por lo tanto, el código paracrear el eje y se debe cambiar de la siguiente manera:


Líneas Código

1234567891011

// Crear el eje y.const yHeight = _info.node.clientHeight - 2 * margin - xHeight;const yDomain = data.cols[ YPOS ].domain.asArray(); // [min, max]const yMax = props.get( "ymax" );if ( yMax !== null ) yDomain[ 1 ] = yMax;const yScale = d3.scaleLinear().range( [ yHeight, 0 ] ).domain( yDomain );if ( yMax === null ) yScale.nice(); // apply nice scale only if scale is automatic.const yAxis = svg.select<SVGGElement>( ".yaxis" ).call( d3.axisLeft( yScale ) );const yWidth = yAxis.node().getBBox().width;

La llamada a props.get( "ymax" ) en la línea 4 devolverá null o un número válido. Esto se debe aque se ha establecido allowNull = true en la propiedad.

El cambio del código para el eje x es ahora trivial:

Líneas Código

1234567891011

// Crear el eje x y colocarlo en la parte inferior del eje y.const xWidth = _info.node.clientWidth - yWidth - 2 * margin;const xDomain = data.cols[ XPOS ].domain.asArray(); // [min, max]const xMax = props.get( "xmax" );if ( xMax !== null ) xDomain[ 1 ] = xMax;const xScale = d3.scaleLinear().range( [ 0, xWidth ] ).domain( xDomain );if ( xMax === null ) xScale.nice(); // apply nice scale only if scale is automatic.const xAxis = svg.select<SVGGElement>( ".xaxis" ).call( d3.axisBottom( xScale ) );xAxis.attr( "transform", `translate(0,${yHeight})` );

background y showBackground

Para añadir un fondo en la visualización dispersa, añadiremos el código siguiente a los métodos update,justo antes de crear el eje y:

Líneas Código

123456789101112

// Establecer la imagen de fondo.let urlImage = null;if ( props.get( "showBackground" ) ){ const image = props.get( "background" ); if ( image !== "" ) urlImage = `url(${image})`;}_info.node.parentElement.style.backgroundImage = urlImage;

// Crear el eje y....

Este código cambia el estilo de backgroundImage del elemento padre del svg. El padre del svg esrealmente el _node que se ha pasado en create.


Cree un nuevo panel de control o informe en IBMCognos Analytics y añada la 'Visualización de vistaprevia'. Tras añadir algunos datos, debería ver la visualización dispersa en acción. Intente cambiaralgunas de las propiedades que acabamos de añadir. Observará que las propiedades se han añadido en elseparador visualización y el separador texto respectivamente.

Enlaces




Parte 3: personalizar la leyenda y las propiedadesEn esta parte de la guía de aprendizaje, mejoraremos el código del archivo main.ts. Comenzaremos poradaptar los símbolos usados en la leyenda a los símbolos utilizados para los puntos de dispersión. Laspropiedades title y showTitle de la parte 2 están relacionadas, por lo que vamos a añadir código quegarantice que se inhabilite el título (title) cuando se desactive showTitle en la interfaz de usuario. Porúltimo, añadiremos títulos para algunas de las propiedades.

Antes de empezar

Asegúrese de haber completado “Parte 1: Creación de una visualización personalizada” en la página 40 y“Parte 2: adición de propiedades a la visualización” en la página 45 o de haber descargado el códigofuente para la parte 2.

Paso 1: cambiar la leyenda

En la parte 2 ha añadido una propiedad que permite que el usuario pueda cambiar la forma de los puntosde dispersión. En este paso, veremos cómo puede hacer que la leyenda muestre la misma forma que laque utiliza la visualización.

La clase RenderBase le permite configurar diversos aspectos de la visualización a través del atributometa. Este atributo le permite establecer cosas como el número máximo de puntos de datos y la formade la leyenda. Por ejemplo, si añadimos la línea de código siguiente dentro del método 'create', lasleyendas categóricas siempre representan un símbolo de 'círculo':

this.meta.legendShape = "circle";

Con frecuencia, se utiliza el atributo meta durante la inicialización de la visualización. No obstante, parasu visualización dispersa desea que la leyenda se actualice tan pronto como cambie la propiedadpointShape.

Añada el código siguiente a la clase de visualización personalizada en el archivo Main.ts:

protected updateProperty( _name: string, _value: any ){ switch( _name ) { case "pointShape": this.meta.legendShape = _value; break; }}

El método updateProperty se invoca inmediatamente después de que una propiedad cambie. Estoimplica que la próxima vez que sea necesario volver a dibujar la leyenda, recuperará el valor correcto demeta.legendShape. Si hubiéramos actualizado este valor en el método update, habría sido demasiadotarde, ya que es posible que se represente el contenido de la leyenda antes que la visualización.

Nota: En “Parte 2: adición de propiedades a la visualización” en la página 45, ha visto que el valor de unapropiedad enum siempre es una serie. En el código anterior, puede asignar el valor de serie ameta.legendShape, ya que tiene la seguridad de que el valor de enum es una forma de leyenda válida.

Paso 2: propiedades activas e inactivas

Se puede utilizar la misma función updateProperty que se ha definido en el paso anterior paraimplementar el denominado 'estado activo' para las propiedades. El estado activo de una propiedaddetermina cómo se representa la propiedad en la interfaz de usuario. Si una propiedad está inactiva, sesuele representar como 'inhabilitada'. En nuestra visualización dispersa, queremos inhabilitar lapropiedad 'background' si 'showBackground' está establecido en false. Si 'showBackground' seestablece en true, se debe habilitar de nuevo la propiedad 'background'. Para ello, cambiaremosupdateProperty y manejaremos el cambio de propiedad para la propiedad 'showBackground':

protected updateProperty( _name: string, _value: any ){



switch( _name ) { case "pointShape": this.meta.legendShape = _value; break;

case "showBackground": // El estado activo de 'background' depende de `showBackground`. this.properties.setActive( "background", _value ); break; }}

Paso 3: títulos de propiedad

En las partes anteriores, hemos visto que cada propiedad del archivo vizdef.xml tiene un nombre alcual se puede hacer referencia en el código. Estos nombres normalmente no son adecuados para que semuestren al usuario final en la interfaz de usuario. Por este motivo, cada propiedad puede tener unatributo caption que defina el nombre que debe aparecer en la interfaz de usuario. Cambie el archivovizdef.xml según se indica a continuación:<properties> <group name="general"> <palette name="color" caption="Colors" slot="categories" /> <enum name="pointShape" caption="Shape" defaultValue="circle"> <possibleValue caption="Circle">circle</possibleValue> <possibleValue caption="Square">square</possibleValue> </enum> <string name="background" caption="Background" defaultValue="" /> <boolean name="showBackground" caption="Show Background" defaultValue="true" /> </group> <group name="axis" caption="Axis"> <number name="xmax" caption="X-axis max" allowNull="true" /> <number name="ymax" caption="Y-axis max" allowNull="true" /> </group></properties>

Nota: El grupo de propiedades general no tiene un título porque dicho grupo ya lo proporciona laaplicación de host y, por lo tanto, ya tiene un título (localizado). Si define sus propios grupos depropiedades, puede proporcionarles un título.

En “Parte 4: características avanzadas” en la página 49, verá cómo hacer que los títulos se adapten alidioma de la interfaz de usuario de IBMCognos Analytics.


Cree un nuevo panel de control o informe en Cognos Analytics y añada la 'Visualización de vista previa'.Tras añadir algunos datos, debería ver la visualización dispersa en acción. Intente cambiar algunas de laspropiedades que acabamos de añadir.

Este código cambia el estilo de backgroundImage del elemento padre del svg. El padre del svg esrealmente el _node que se ha pasado en create.

Enlaces


Parte 4: características avanzadasEn la última parte de esta guía de aprendizaje, verá el uso de ranuras opcionales y se mostrará cómo sepuede personalizar la leyenda generada automáticamente. También verá cómo configurar la localizaciónpara la visualización personalizada.

Paso 1: ranuras opcionales

En “Parte 1: Creación de una visualización personalizada” en la página 40, ha añadido entradas en elarchivo vizdef.xml para definir las ranuras de la visualización. Todas las ranuras se han marcado comoobligatorias estableciendo el atributo optional en false. Esto implica que el usuario debe proporcionardatos en todas las ranuras para que la visualización pueda representar los datos.



En este paso, añadirá una ranura color opcional. El tipo de ranura es continuo, lo que implica que elusuario puede correlacionar datos numéricos con la ranura. Si la ranura está correlacionada, los valoresde la ranura determinan el color del punto. Si la ranura no está correlacionada, el gráfico de dispersiónfunciona igual que ahora, utilizando la paleta color.

A continuación se indica el cambio necesario en el archivo vizdef.xml. Tenga en cuenta que se necesitaun cambio tanto en la sección slots (línea 3) como en la sección dataSet (línea 9).

Líneas Código

1234567891011

<slots> ... <slot name="color" type="cont" optional="true" channel="color" /></slots>

<dataSets> <dataSet> ... <ref slot="color" /> </dataSet></dataSets>

Además de añadir la ranura, también necesita añadir una paleta continua, que se utilizará en caso de quela nueva ranura se correlacione con los datos:

Líneas Código

12345

<properties> <group name="general"> <palette name="color_cat" slot="categories" /> <palette name="color_cont" slot="color" /> ...

Vea las líneas 3 y 4. Observe que ha renombrado la propiedad existente "color" a "color_cat" para haceruna distinción más clara entre las dos propiedades de paleta.

En el archivo Main.ts, añada una constante que identifique la ranura color:

const CAT = 0, XPOS = 1, YPOS = 2, COLOR = 3; // índices de ranura

Finalmente, modifique el código del archivo Main.ts para que seleccione los colores y datos de la nuevaranura:

Líneas Código

12345

<// Determine la paleta de color y la forma a partir de las propiedades.const hasColor = data.cols[ COLOR ].mapped;const palette = props.get( hasColor ? "color_cont" : "color_cat" );const shape = d3.symbol().size( 256 );...

En la línea 3, puede ver que, dependiendo del estado mapped de la columna, se recupera la paletacontinua o la paleta categórica para determinar el color.

Esto es todo lo que se necesita; el usuario de la visualización predeterminada puede ahora correlacionardatos en la nueva ranura. Dichos datos determinarán el color de un punto de dispersión. Si no existendatos, el color vendrá dado por la ranura categórica.

Paso 2: personalización de la leyenda

Una vez que haya completado el paso anterior y lo haya probado, es posible que haya observado que, encaso de que existieran datos correlacionados con la nueva ranura 'color', la leyenda categórica todavíaera visible. Esto se debe a que tanto la ranura 'categories' como la ranura 'color' tienen un canal 'color' yambas están correlacionadas. El algoritmo de leyenda automática no puede determinar cuál de las dospaletas está en uso realmente.


Para sustituir el comportamiento de la leyenda automática, puede reemplazar la función updateLegend.En esta función, puede añadir, eliminar o modificar leyendas individuales y elementos de leyenda.

Para empezar, actualice la sección 'imports' (importaciones) según se indica a continuación:

import { RenderBase, UpdateInfo } from "@businessanalytics/customvis-lib";import { Encoding, DataSet } from "@businessanalytics/customvis-lib";import * as d3 from "d3";

A continuación, añada un método updateLegend a la clase de visualización:

Líneas Código

1234567891011121314

protected updateLegend( _data: DataSet ): Encoding[]{ // Llamar a la implementación de clase base para configurar las codificaciones iniciales. const encodings = super.updateLegend( _data ); const hasColor = _data.cols[ COLOR ].mapped;

// Filtrar las codificaciones: si la ranura color está correlacionada, se omite la leyenda categórica. return encodings.filter( _encoding => { if ( hasColor && _encoding.type === "cat" ) return false; return true; } );}

La implementación de RenderBase.updateLegend crea una matriz que contiene la leyenda Encodings(línea 4). Esta matriz contiene toda la información necesaria para que se dibuje la leyenda. La sustituciónde updateLegend le ofrece la posibilidad de realizar cambios en las codificaciones creadas enRenderBase. La función filter que se invoca en la línea 8 devolverá las codificaciones que cumplan lacondición definida en el cuerpo de la función.

Paso 3: localización

En “Parte 3: personalizar la leyenda y las propiedades” en la página 48, ha añadido títulos en el archivovizdef.xml, de manera que la interfaz de usuario muestra las etiquetas correctas para las propiedadesy ranuras. En este paso verá cómo se pueden localizar estos títulos para adaptarlos al idioma de lainterfaz de usuario que haya elegido en IBMCognos Analytics.

Para tener las series traducidas del soporte de visualización, añada un nuevo directorio denominado nlsen el directorio raíz donde se encuentre la visualización (como un hermano del archivo vizdef.xml). Acontinuación, añada un archivo Resources.js en este directorio nls, con el contenido siguiente:

define({ "root": { "prop_color_cat": "Point Color", "prop_color_cont": "Color Range", "prop_shape": "Shape", "prop_shape_circle": "Circle", "prop_shape_square": "Square", "prop_background": "Background", "prop_show_background": "Show Background", "prop_xmax": "X-axis max", "prop_ymax": "Y-axis max", "prop_axis": "Axis" },

"nl": true} );


La última entrada "nl": true indica que hay una versión neerlandesa de este archivo en la subcarpetanl. Por lo tanto, crearemos una subcarpeta nl dentro de la carpeta nls. A continuación, añada otroarchivo Resources.js en esta subcarpeta nl con el contenido siguiente:

define({ "prop_color_cat": "Puntkleur", "prop_color_cont": "Kleurbereik", "prop_shape": "Vorm", "prop_shape_circle": "Cirkel", "prop_shape_square": "Vierkant", "prop_background": "Achtergrond", "prop_show_background": "Toon Achtergrond", "prop_xmax": "X-as max", "prop_ymax": "Y-as max", "prop_axis": "As"} );

La estructura de archivos y directorios debe tener ahora un aspecto similar al siguiente:

Por último, sustituya los títulos grabados en el código del archivo vizdef.xml por las variables queacaba de definir en los archivos nls (con el prefijo $nls.):

<properties> <group name="general"> <palette name="color_cat" caption="$nls.prop_color_cat" slot="categories" /> <palette name="color_cont" caption="$nls.prop_color_cont" slot="color" /> <enum name="pointShape" caption="$nls.prop_shape" defaultValue="circle"> <possibleValue caption="$nls.prop_shape_circle">circle</possibleValue> <possibleValue caption="$nls.prop_shape_square">square</possibleValue> </enum> <string name="background" caption="$nls.prop_background" defaultValue="" /> <boolean name="showBackground" caption="$nls.prop_show_background" defaultValue="true" /> </group> <group name="axis" caption="$nls.prop_axis"> <number name="xmax" caption="$nls.prop_xmax" allowNull="true" /> <number name="ymax" caption="$nls.prop_ymax" allowNull="true" /> </group></properties>

Nota: Las propiedades no son las únicas que puede tener títulos. También puede definir títulos para lasranuras y grabarlos en el código del archivo vizdef.xml o proporcionar un ID de localización igual que loha hecho para las propiedades.


Cree un nuevo panel de control o informe en Cognos Analytics y añada la 'Visualización de vista previa'.Tras añadir algunos datos, debería ver la visualización dispersa en acción. Tras añadir algunos datos,debería ver la visualización dispersa en acción. Intente añadir datos a la ranura 'color' y elimínelos denuevo. Observará la diferencia en la leyenda que aparece para su visualización.

Enlaces




Capítulo 9. Manage custom visuals

Gestión de visualizaciones personalizadas desde la interfaz de usuario deadministración

Utilice la interfaz de usuario de administración para suprimir, descargar, actualizar o establecer laspropiedades de las visualizaciones personalizadas

Acerca de esta tareaPuede gestionar las visualizaciones personalizadas desde la interfaz de usuario de administración deIBMCognos Analytics.

Procedimiento

1. En la página de inicio, pulse Gestionar > Personalización > Visualizaciones personalizadas.

2. Junto a la visualización personalizada, pulse el icono Más y seleccione una de las opcionessiguientes:Opción Descripción

Suprimir Si ya no necesita la visualización personalizada, suprímala.

Descargar Descargue la visualización personalizada. Descargue lavisualización personalizada para, por ejemplo, enviar lavisualización personalizada a una organización de soporte.

Actualizar Si tiene una nueva versión disponible, actualice lavisualización personalizada. Necesita seleccionar lavisualización personalizada actualizada.

Propiedades Establezca los permisos para la visualización personalizada.

Para obtener más información, consulte Permisos deacceso e Inhabilitación de paquetes y carpetas.

ResultadosSe añade la visualización personalizada a la lista de visualizaciones. También puede establecer lospermisos sobre las visualizaciones.


Capítulo 10. Improving the performance of customvisualizations

Mejora del rendimiento de las visualizaciones personalizadasSi su visualización personalizada debe mostrar muchos puntos de datos, puede detectar un rendimientomenor de la visualización.

Puede aplicar varias técnicas que limitan la cantidad de tiempo que se invierte en representar lavisualización. La API de customvis le proporciona información que se puede utilizar para optimizar lavisualización personalizada.

Representación de rendimiento

La representación de una visualización personalizada con muchos puntos de datos puede tener unimpacto en el rendimiento. Si sabe qué es lo que desencadena la acción de representación, puede decidirqué se debe volver a representar.

Utilice el campo motivo de la clase UpdateInfo para determinar qué ha desencadenado larepresentación y, a continuación, determine qué elementos se representan para minimizar el descensoen el rendimiento. Se le pase una instancia de UpdateInfo cada vez que se invoca a la acción update(actualización).

La actualización del modelo de objeto de documento (DOM) y la acción de volver a calcular suelen seroperaciones caras. Siempre que sea posible, evite que estas actualizaciones se lleven a cabo con muchafrecuencia. Por ejemplo, si el motivo de la representación es el cambio del color de fondo de lavisualización personalizada, tal vez desee cambiar el color del elemento de la IU correspondiente y dejarel resto de la visualización sin tocar.

Además, tenga en cuenta que las secciones resaltadas y las selecciones pueden invocar la funciónupdate muchas veces. Si su visualización personalizada admite elementos de resaltado, cada operaciónde movimiento de ratón por la visualización puede desencadenar una actualización. Verá que pararepresentar resaltados y selecciones el campo decorations del motivo está señalado. Dependiendode cómo quiere que se muestren los elementos resaltados y seleccionados, puede plantearse unafunción de representación de aumento del rendimiento alternativa que se dedique a representarselecciones y resaltados.

Para obtener más información, consulte Clase RenderReason y Clase UpdateInfo.

Reacción a la visualización personalizada

El tamaño visualizado de las visualizaciones personalizadas puede introducir una reducción delrendimiento. No es necesario que siempre se muestre todo. Puede corregir los elementos siguientes desu visualización personalizada para aumentar el rendimiento y para mostrar una visualización significativaen un espacio de pantalla limitado:

• Etiquetas en ejes• Títulos• Etiquetas de texto


https://ibm.github.io/ca_customvis/docs/11.1.x/classes/renderreason.html

https://ibm.github.io/ca_customvis/docs/11.1.x/classes/updateinfo.html

Capítulo 11. Authoring schematics - Tutorial

Definición de SVGDebe anotar los archivos SVG para enlazar elementos SVG a un conjunto de datos.

La correlación se representa visualmente en el SVG representado cambiando el relleno (color y opacidad)de los elementos SVG. Cuando se crea un documento SVG, los elementos que no tienen área de rellenovisible no aparecen como cambiados desde el punto de vista de la visibilidad.

Nota: También puede utilizar las agrupaciones de terceros como, por ejemplos, Inkscape, para anotarSVG. Para obtener más información, consulte Utilización de Inkscape para la anotación de Schematicspara su uso en IBM Cognos Analytics en https://community.ibm.com/community/user/businessanalytics/blogs/marco-maas1/2019/12/20/using-inkscape-to-annotate-schematics.

Correlación básica de SVGLa correlación se realiza entre un elemento en un SVG y un valor en un conjunto de datos añadiendo elvalor del conjunto de datos como atributo nuevo denominado data-cv-key para la regióncorrespondiente en el SVG.

Nota: También puede utilizar las agrupaciones de terceros como, por ejemplos, Inkscape, para anotarSVG. Para obtener más información, consulte Utilización de Inkscape para la anotación de Schematicspara su uso en IBM Cognos Analytics en https://community.ibm.com/community/user/businessanalytics/blogs/marco-maas1/2019/12/20/using-inkscape-to-annotate-schematics.

La correlación recibe soporte en los elementos siguientes:

• Círculo• Elipse• Líneas• Ruta• Polígono• Polilínea• Rect• Texto• SVG• G

Nota: El elemento G no es visual y se ha diseñado para agrupar elementos visuales con el fin de crear unelemento compuesto.

El comportamiento de los otros elementos SVG es indefinido.

El archivo SVG siguiente no tiene establecido el atributo data-cv-key para los círculos:

<?xml version="1.0" encoding="UTF-8"?><svg height="40" width="100" xmlns="http://www.w3.org/2000/svg"> <g> <circle cx="10" cy="10" fill="#cd5c5c" r="10"/> <circle cx="30" cy="10" fill="#fa8072" r="10"/> <circle cx="50" cy="10" fill="#e9967a" r="10"/> <circle cx="70" cy="10" fill="#ffa07a" r="10"/> <circle cx="90" cy="10" fill="#dc143c" r="10"/> </g> <g> <circle cx="70" cy="30" fill="#adff2f" r="10"/>


https://community.ibm.com/community/user/businessanalytics/blogs/marco-maas1/2019/12/20/using-inkscape-to-annotate-schematics




<circle cx="10" cy="30" fill="#ff0000" r="10"/> <circle cx="30" cy="30" fill="#b22222" r="10"/> <circle cx="50" cy="30" fill="#8b0000" r="10"/> </g></svg>

Si quisiera cargar esta visualización, se visualizaría como se muestra a continuación. La correlación conlos datos no es posible.

Si añade el atributo data-cv-key al SVG, puede correlacionar datos con los círculos del SVG.

<?xml version="1.0" encoding="UTF-8"?><svg height="40" width="100" xmlns="http://www.w3.org/2000/svg"> <g> <circle data-cv-key="A2" cx="10" cy="10" fill="#cd5c5c" r="10"/> <circle data-cv-key="A3" cx="30" cy="10" fill="#fa8072" r="10"/> <circle data-cv-key="A4" cx="50" cy="10" fill="#e9967a" r="10"/> <circle data-cv-key="A5" cx="70" cy="10" fill="#ffa07a" r="10"/> <circle data-cv-key="B2" cx="90" cy="10" fill="#dc143c" r="10"/> </g> <g> <circle data-cv-key="B3" cx="70" cy="30" fill="#adff2f" r="10"/> <circle data-cv-key="B4" cx="10" cy="30" fill="#ff0000" r="10"/> <circle data-cv-key="B5" cx="30" cy="30" fill="#b22222" r="10"/> <circle data-cv-key="D1" cx="50" cy="30" fill="#8b0000" r="10"/> </g></svg>

Y los datos siguientes:

ref cat color ocupado tamaño

A2 A 72 no 157

A3 A 36 no 684

A4 B 12 sí 325

A5 B 22 no 186

B2 A 16 sí 487

B3 A 78 sí 560

B4 C 74 sí 871

B5 C 87 no 980

D1 A 19 sí 574

Si utiliza este SVG y arrastra ref a la ranura de datos Ubicaciones y cat a la ranura de datos Color deubicación, seguidamente, el color de los círculos se correlaciona con los datos cat.


Reglas y restricciones para SVGHay varias consideraciones que debe considerar cuando redacte esquemas para IBMCognos Analytics.

Reglas y restricciones de correlación de vista

Elementos visuales admitidos:

• Círculo• Elipse• Líneas• Ruta• Polígono• Polilínea• Rect• Texto

Elementos no visuales admitidos:

• svg• g

Un elemento SVG con un atributo de data-cv-view también tiene un atributo de data-cv-key. Porejemplo:

<circle x=10 y=10 data-cv-view="circles" data-cv-key="A1"/>

Solamente se da soporte a un único atributo data-cv-view.

Puede existir un elemento SVG solamente en una vista única. No se da soporte a varias vistas.

No se da soporte a las vistas jerárquicas. Por ejemplo, no se da soporte al ejemplo siguiente:

<g data-cv-view="circles"> <circle x=10 y=10 data-cv-view="child_circle" data-cv-key="A1"/> <circle x=10 y=10 data-cv-view="child_circle" data-cv-key="A2"/></g>

Se da soporte a los elementos compuestos. Por ejemplo, la eliminación de atributos hijo data-cv-viewdel ejemplo siguiente:

<g data-cv-view="circles"> <circle x=10 y=10 data-cv-key="A1"/>

Capítulo 11. Authoring schematics - Tutorial 59

<circle x=10 y=10 data-cv-key="A2"/></g>

El mismo valor recibe soporte en varios elementos.

<circle x=10 y=10 data-cv-view="circles" data-cv-key="A1"/><circle x=10 y=10 data-cv-view="circles" data-cv-key="A2"/>

No hay ningún límite en la cantidad de apariciones del atributo data-cv-view en un documento.

Reglas y restricciones de correlación clave

Elementos visuales admitidos:

• Círculo• Elipse• Líneas• Ruta• Polígono• Polilínea• Rect• Texto

Elementos no visuales admitidos:

• svg• g

Solamente se da soporte a un único atributo data-cv-key:

<circle x=10 y=10 data-cv-key="A1"/>

No se da soporte a las claves jerárquicas o de múltiples partes:

<g data-cv-key="A"> <circle x=10 y=10 data-cv-key="1"/> <circle x=10 y=10 data-cv-key="2"/></g>

Se da soporte a los elementos compuestos:

<g data-cv-key="A1"> <circle x=10 y=10/> <circle x=10 y=10/></g>

En un elemento compuesto, no se da soporte a varios atributos data-cv-key:

<g data-cv-key="A1"> <circle x=10 y=10 data-cv-key="A2"/> <circle x=10 y=10 data-cv-key="A3"/</g>

Los elementos que no tienen una ruta cerrada no reciben soporte. Por ejemplo, la ruta siguiente no secierra con z o Z.

<path d="M8 0C3.582 0 0 3.582"/>

Características admitidas de SVG

Utilice las estructuras de control y otras características cuando redacte sus documentos SVG. Se dasoporte a las siguientes estructuras de control cuando el usuario redacta esquemas:


• use• defs• href

No se da soporte a las siguientes estructuras de control cuando el usuario redacta esquemas:

• JavaScript habilitado• Incluir etiquetas• Utilizar la Entidad definida en la sección DOCTYPE• Sucesos de animación• Sucesos de documentos• Sucesos de elementos de documentos• Sucesos gráficos• Cualquier otro suceso global• Las referencias a todo lo que sea externo, incluidos los URI en fuentes externas, y a la utilización del

elemento de ancla HTML <a>.

Guardar y exportar como opciones de SVG:

• Elija *Atributos de presentación* para el estilo si necesita compatibilidad con Microsoft InternetExplorer y Microsoft Edge. Elija el estilo que utiliza el atributo elemento o el atributo estilo y evite elestilo de CSS en la cabecera interna o el estilo de CSS externo.

• Utilizar imágenes incluidas, si es necesario.• Evitar opciones del tipo conservación de la prestación específica del editor que puede inyectar un

código XML innecesario.

Adición de vistas a esquemasLos esquemas admiten Vistas que se definen en el SVG. Las vistas son conceptualmente diferentes de lascapas.

Se crea una capa cuando los datos se correlacionan con las ranuras Región > Ubicaciones o Puntos >Ubicaciones. Puede conmutar carpetas activándolas o desactivándolas, mostrando u ocultando losresultados de la correlación de datos.

Cuando el usuario redacta un SVG, puede crear vistas. Las vistas definen grupos de elementos SVG dondelos elementos se relacionan de forma lógica entre sí. Por ejemplo, si crea un plano de planta de unhospital, defina Vistas para cada sección del hospital en el SVG. Estas vistas permiten que el usuario delesquema muestre u oculte las vistas que le interesan.

La anotación de un SVG se realiza de una forma similar a la correlación de datos que utiliza el atributo dedatos data-cv-view, junto con un título y descripción opcionales para cada vista. La descripción serepresenta como una ayuda contextual en el esquema. Consulte el siguiente ejemplo de código SVG:

<?xml version="1.0" encoding="UTF-8"?><svg height="40" width="100" xmlns="http://www.w3.org/2000/svg"> <g data-cv-view="view_0" desc="view_0 desc" title="view_0 title"> <circle data-cv-key="A2" cx="10" cy="10" fill="#cd5c5c" r="10"/> <circle data-cv-key="A3" cx="30" cy="10" fill="#fa8072" r="10"/> <circle data-cv-key="A4" cx="50" cy="10" fill="#e9967a" r="10"/> <circle data-cv-key="A5" cx="70" cy="10" fill="#ffa07a" r="10"/> <circle data-cv-key="B2" cx="90" cy="10" fill="#dc143c" r="10"/> </g> <g data-cv-view="view_1" desc="view_1 desc" title="view_1 title"> <circle data-cv-key="B3" cx="70" cy="30" fill="#adff2f" r="10"/> <circle data-cv-key="B4" cx="10" cy="30" fill="#ff0000" r="10"/> <circle data-cv-key="B5" cx="30" cy="30" fill="#b22222" r="10"/> <circle data-cv-key="D1" cx="50" cy="30" fill="#8b0000" r="10"/> </g></svg>


Si utiliza este SVG y arrastra ref a la ranura de datos Ubicaciones y cat a la ranura de datos Color deubicación, seguidamente, el color de los círculos se correlaciona con los datos cat. Para seleccionar unavista, pulse el icono Vistas

.

El título se visualiza en la lista de vistas disponibles. Si no ha definido ningún título, se utilizará el valor delatributo data-cv-view. De forma predeterminada, se seleccionan todas las vistas.

Cómo resaltar regiones en un esquemaPara saber qué partes del SVG se pueden correlacionar, puede resaltar dichas partes en IBMCognosAnalytics.


Utilice la opción Opción de resaltado para visualizar las partes de un SVG que se pueden correlacionar.Un elemento en el SVG se puede correlacionar cuando el elemento tiene un atributo data-cv-key conun valor que contiene una clave.


Cuando se activa, todos los elementos correlacionables reciben un relleno con un color tal como se hadefinido en la propiedad Valor de color que falta. Todos los elementos no correlacionables tienen unaopacidad que se aplica.


Para obtener más información, consulte Propiedades para las visualizaciones individuales de la versión11.1 en la creación de informes.

Procedimiento

1. En un informe de la pestaña Caja de herramientas del panel de contenido, seleccione el objetoProbar Schematic y arrástrelo al espacio de trabajo.En un informe de la pestaña Personalizar del panel Visualizaciones, seleccione el objeto ProbarSchematic y arrástrelo al espacio de trabajo.

2. Cambie el conmutador Región de resaltado.

Edición de un paquete de esquemasAntes de que el esquema, que ha redactado el usuario, esté disponible para los usuarios, puede editar elpaquete de esquemas.


Puede editar las propiedades y el contenido del paquete de esquemas.


Nota:

Puede cargar el paquete de esquemas, que ha descargado, en el widget Vista previa de esquema parasu edición posterior.

Procedimiento

1. En un informe de la pestaña Caja de herramientas del panel de contenido, seleccione el objeto Vistaprevia de esquema y arrástrelo al espacio de trabajo.

2. Pulse el icono Editar paquete

.

3. En la pestaña Paquete, puede cambiar las propiedades siguientes:

• Nombre• Descripción• Icono: El icono puede ser del tipo .jpg, .png o .svg con una medida de archivo máxima de 500 MB.

4. En la pestaña Contenido, puede cambiar el contenido del paquete de esquemas.

• Pulse el icono Cargar archivo

y seleccione los archivos SVG que desee incluir en el paquete de esquemas.• Pulse un SVG para cambiar su Nombre y Título.


• En un SVG, pulse el icono Más

para Sustituir o Suprimir el SVG.

Distribución de un esquemaSi desea que el esquema redactado esté disponible para los usuarios de IBMCognos Analytics,distribúyalo. La distribución se realiza descargando en primer lugar el esquema empaquetado de la Vistaprevia de esquema y, seguidamente, cargando el esquema empaquetado como Visualizaciónpersonalizada.


La función Gestionar visualizaciones permite que los usuarios puedan controlar los derechos de accesoa esquemas para usuarios individuales, grupos y roles.

La función Desarrollar visualizaciones permite que los usuarios puedan desarrollar y distribuiresquemas.

Procedimiento

1. En un informe de la pestaña Caja de herramientas del panel de contenido, seleccione el objeto Vistaprevia de esquema y arrástrelo al espacio de trabajo.

2. Redacción del esquema.3. Pulse el icono Descarga

.Se descarga un archivo .zip en el sistema de archivos.

4. En la página de inicio, pulse Gestionar > Personalización > Visualizaciones personalizadas > Cargarvisualización personalizada

.5. Seleccione el archivo yourschematic.zip y pulse Abrir.

ResultadosEl esquema se añada a la lista de visualizaciones. También puede establecer los permisos sobre lasvisualizaciones.


personalizadas guía del desarrollador de visualizaciones

Documents