Diseño de paneles de información

Los paneles de información de Envision se construyen a partir de unidades más pequeñas llamadas mosaicos. Es posible ajustar la dimensión y el color de estos mosaicos, y distribuirlos del modo que considere mejor dentro de la página del panel. Envision pone el énfasis en los paneles de información de alta productividad, en los que las cifras importantes para su comercio se distribuyen en una sola página. Incluso paneles de información muy complejos generalmente se muestran en menos de medio segundo. En esta sección, le explicamos cómo diseñar paneles de información de Envision desde cero.

Su primer panel de información

Diseñaremos nuestro primer panel de información utilizando el conjunto de datos de ejemplo. La captura de pantalla a continuación ilustra el panel de información que debería obtener en su cuenta de Lokad.



Este panel de información se genera con el script que se detalla más abajo. En este punto, el script probablemente parezca un poco abrumador. En esta sección, lo descompondremos línea por línea.

read "/sample/Lokad_Items.tsv" with
SellPrice: number
read "/sample/Lokad_Orders.tsv" as Orders
read "/sample/Lokad_PurchaseOrders.tsv" as PO

show label "Hello World" a1f1 tomato

show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price" c2d2 unit: "$" with 
min(SellingPrice)
show table "Max selling price{$}" e2f2 unit: "$" with 
max(SellingPrice)

Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes" a3f5 tomato unit: "$" with
Week.oamount as "Sold", Week.pamount as "Purchased"

show piechart "Sales by brand" a6c8 tomato with
  sum(Orders.NetAmount) group by Brand

show treemap "Stock value by supplier" d6f8 tomato unit: "$" with
Name 
StockOnHand * BuyPrice 
group by Supplier

show table "Top Sellers" a9f12 tomato with
Id as "Product ID"
Supplier
StockOnHand
sum(Orders.NetAmount) as "Sold" unit: "$"
order by sum(Orders.NetAmount) desc

En este punto, le sugerimos que inicie sesión en su cuenta de Lokad, haga clic en Create Envision Script, copie el script anterior, y luego haga clic en Start Run. Una vez que se haya completado la ejecución, haga clic en el nuevo enlace verde que aparecerá entre Recent runs justo debajo del botón Start Run. Debería tener frente a usted un panel de información idéntico al que se ve más arriba.

El panel de información cabe en una sola página, pero cada mosaico puede maximizarse si se hace clic sobre él. Haga clic en el gráfico de líneas grande, y este se maximizará aprovechando toda la ventana de su navegador. Si hace clic nuevamente en cualquier parte del área negra alrededor del mosaico maximizado, el mosaico vuelve a su tamaño original.

Título, posición y color

El mosaico label es el mosaico más simple disponible en Envision. Este mosaico es un buen punto de partida para comprender las propiedades comunes a todos los mosaicos, es decir, título, posición y color primario. El mosaico label simplemente muestra una parte de texto especificado en el mosaico, y el tamaño de letra se ajusta al mosaico.

show label "Hello World" a1f1 tomato

Todos los mosaicos se muestran utilizando una instrucción show. A esta palabra clave le siguen 4 argumentos. El primer argumento es el tipo de mosaico. Envision respalda varios tipos de mosaicos, y label es uno de esos tipos. En la sección a continuación, veremos algunos de los demás tipos de mosaicos que también están presentes en este panel de información.

Después del tipo de mosaico viene el título del mosaico definido con una cadena, de ahí que haya delimitadores de cita ("). Dependiendo del tipo de mosaicos, el modo en que se muestra del título puede variar, a menudo se muestra en la parte superior del mosaico. Luego, después del título, viene la posición del mosaico, escrita a1f1 en el ejemplo anterior. Envision adopta una grilla similar a la de Excel para posicionar todos los mosaicos, con letras para las columnas y números para las líneas. Así, a1f1 debería interpretarse como el rango de celdas que va desde la esquina superior izquierda A1 hasta la esquina inferior derecha F1. Envision no distingue mayúsculas de minúsculas, por lo que A1F1 es equivalente a a1f1.

Por último viene el color, tomato en el ejemplo anterior. El argumento color es opcional y, cuando se omite, se utiliza el color black por defecto. Todos los nombres de colores web son válidos para Envision. Además de esos colores, Envision también acepta colores en hexadecimal. La única adaptación que es preciso realizar es la de omitir el signo hash (#). Por ejemplo, debería usarse 0099CC en lugar de #0099CC. Sin embargo, en la práctica, resulta demasiado tedioso editar los colores directamente desde el editor de script.

El editor de mosaico

Si bien es posible editar la posición y los colores de los mosaicos desde el editor de script, no es la opción más práctica, ya que el editor de script no es visual. Por este motivo, Envision incluye un segundo editor llamado editor de mosaico. El editor de mosaico ofrece la posibilidad de ajustar los títulos, las posiciones y los colores de cada mosaico, más algunas funciones adicionales para acelerar una reorganización completa del panel de información cuando fuera necesario.



En su cuenta de Lokad, regrese al panel de información que generó anteriormente y haga clic en Edit Tiles. Aparecerá una superposición oscura en cada mosaico, esquematizando las coordenadas de posición para cada uno de los mosaicos. Las coordenadas se expresan siguiendo las convenciones de grilla de Excel de las que hablábamos más arriba. Haga clic en cualquier mosaico, por ejemplo, en el mosaico label en la parte superior, y verá aparecer un cuadro de diálogo que le permitirá ajustar las propiedades del mosaico.

Además, verá botones verdes con el signo más (+) en el lado izquierdo de la página. La finalidad de esos botones es la de insertar una línea de grilla en blanco justo encima del botón. Haga clic en cualquiera de los botones (+) y debería ver que todos los mosaicos se desplazan hacia abajo. La inserción de una línea en blanco es práctica cuando se desea desplazar una sección del panel de información hacia la parte superior (y, al contrario, otra sección hacia la parte inferior).



Una vez que se hace clic en el botón (+) a la derecha, aparece un botón rojo con el signo menos (-). Estos botones rojos son la contrapartida de los botones verdes, y ofrecen la posibilidad de eliminar una línea en blanco. Sin embargo, para que el botón rojo aparezca, la línea tiene que estar en blanco, lo que asegura que no se borre una línea que aún contiene mosaicos. Como regla general, al escribir el código de un script, le sugerimos que no preste demasiada atención a la posición y los colores de los mosaicos. Si los mosaicos acaban superponiéndose, Envision automáticamente los redistribuye para garantizar que todos sean visibles. Por lo tanto, no hay riesgo de posicionar los mosaicos incorrectamente. El editor de mosaico está ahí para darle un toque visual final a su panel de información.

Visualización de indicadores de valor único

Mientras que mostrar un millón de números es sencillo, mostrar 10 números que valga la pena leer cada día es muy difícil, como decíamos anteriormente. Uno de los casos más frecuentes al diseñar un panel de información consiste en diseñar un mosaico que contenga un solo valor. Este comportamiento se logra con el mosaico table. Este mosaico se beneficia de una visualización especial cuando la tabla contiene solo una celda, es decir, una tabla de 1x1. El script a continuación muestra 4 indicadores distintos, como lo esquematizan las líneas relevantes a continuación.

show table "Items" a2 with sum(1)
show table "Orders" b2 with sum(Orders.1)
show table "Min selling price" c2d2 unit: "$" with 
min(SellPrice)
show table "Max selling price" e2f2 unit: "$" with 
max(SellPrice)

La instrucción show table comienza con las opciones de tipo, título, posición y color. El patrón es idéntico al utilizado para el mosaico label. Estas opciones van seguidas de la palabra clave with. Para los mosaicos que contienen datos, la palabra clave with indica que las variables que se incluirán en el mosaico deben enumerarse. Aquí, nuestros mosaicos solo contienen un solo valor cada uno, pero en las secciones siguientes, veremos mosaicos complejos que incluyen varios valores.

En este punto, aún no hemos cubierto las capacidades de agregación de Envision. Sin entrar en demasiado detalle, notemos que sum(), min() y max() son agregadores y que operan mayormente del modo que sería de esperar de sus contrapartidas de Excel.

Tal vez sum(1 y sum(Orders.1) resulten un poco desconcertantes. Como hemos visto cuando realizábamos nuestros primeros cálculos, Envision trabaja principalmente con vectores. Así, sum(1) es un azúcar sintáctico para la variante de script ligeramente más detallada que copiamos a continuación:

OnePerLine = 1
show table "Items" a2 with sum(OnePerLine)

En el fragmento de código anterior, se define el vector OnePerLine y, por convención, este vector es parte de la tabla artículos. Por lo tanto, la asignación tiene como resultado un valor de 1 que se asigna a cada artículo, es decir, a cada línea de la tabla artículos. Como consecuencia, la suma de todos estos valores da el número total de artículos enumerados en la tabla Items. De modo similar, sum(Orders.1) también es equivalente a un fragmento de código alternativo:

Orders.OnePerLine = 1
show table "Orders" b2 with sum(Orders.OnePerLine)

Nuevamente, la asignación es una operación vectorial, donde a cada línea de la tabla Orders se le asigna un valor igual a 1. Así, al sumar todos estos valores, el resultado también da el número total de líneas de la tabla. Para cualquier tabla, es válido escribir MyTable.42 como azúcar sintáctico para asignar el valor 42 a un vector anónimo.

La visualización del precio mínimo sigue un patrón de agregación similar; sin embargo, una observación cuidadosa del panel de información indica que estamos frente a un comportamiento visual levemente diferente. De hecho, el precio de venta se muestra con el signo del dólar ($) como unidad de medida para el indicador. El examen de las líneas de script pertinentes da una idea de cómo se logra este comportamiento.

show table "Min selling price" c2d2 unit: "$" with 
min(SellPrice)

Este comportamiento se obtiene a través de la opción token unit: "$" en la línea de columna. Por convención, dentro de un título, Envision trata lo que sea que encuentre entre paréntesis como la unidad aplicable. La unidad generalmente se muestra a la derecha de los valores; por ejemplo, 42 miles, pero algunas unidades, específicamente las unidades monetarias como $ o £, generalmente llevan prefijos, y Envision refleja este patrón.

Visualización de un gráfico de líneas

El gráfico de líneas también es uno de los tipos de mosaico utilizado con más frecuencia en Envision. En este caso, debido a que los datos tienen que estar agregados con una periodicidad —por día, por semana, por mes—, el uso de un gráfico de líneas es un poco más complejo que los mosaicos que hemos visto hasta ahora. Veamos la parte de script que se utiliza para mostrar un gráfico de líneas.

Week.oamount := sum(Orders.NetAmount)
Week.pamount := sum(PO.NetAmount)
show linechart "Weekly volumes" a3f5 tomato unit: "$" with
  Week.oamount as "Sold" 
Week.pamount as "Purchased" 

La tabla Week no es una tabla común, en el sentido de que no es una tabla cargada a partir de los datos. Debido a que es frecuente encontrar agregaciones periódicas en el comercio, en Envision, tales agregaciones se tratan como ciudadanos de primera clase. Como resultado, las operaciones que implican agregaciones periódicas son mucho más simples de implementar. Sin embargo, este aspecto específico del lenguaje Envision excede el alcance de este documento. Digamos simplemente que Week actúa como un receptor en el que los datos se agrupan en depósitos semanales.

Luego, también tenemos una asignación especial := llamada asignación escalar. Esta asignación es diferente de la asignación = normal, porque, en lugar de calcular un valor por artículo, la asignación escalar calcula solo un valor independiente de todos los artículos. Por lo tanto, en el caso que estamos viendo, en las primeras dos líneas, calculamos un valor por semana para Week.oamount y otro valor por semana para Week.pamount.

La instrucción del gráfico de líneas que comienza con show linechart es un poco más larga que, digamos, un simple mosaico label. Para evitar una instrucción larga o relativamente ilegible, utilizamos la sintaxis de bloque. El bloque debería comenzar después del with y luego pueden incluirse todos los argumentos en forma de lista, con un argumento por línea.

El título del gráfico de líneas también incluye una declaración de la unidad monetaria con la opción unit: "$", como ya hemos visto con la visualización de indicador.

Luego de eso, después de la devolución de línea, tenemos dos vectores enumerados, a saber, Week.oamount y Week.pamount. Como se dijo anteriormente, después de with, es posible enumerar una o varias variables separadas por comas. Esas variables las muestra el mosaico. En el caso actual, se han pasado dos variables al mosaico. Un gráfico de líneas puede respaldar más de dos variables; sin embargo, en la práctica, le recomendamos que no incluya más de tres variables, porque tales gráficos tienden a volverse bastante ilegibles cuando hay más de tres líneas en el script.

Las variables que se pasan como argumento al mosaico también puede re-nombrarse explícitamente. Este comportamiento se logra con la palabra clave as, seguida de la cadena que define el nuevo nombre. Cada tipo de mosaico tiene su propio modo de gestionar nombres de variables para mejorar el aspecto del mosaico. Por ejemplo, el gráfico de líneas convierte estos nombres en una leyenda que se muestra debajo del gráfico en cuestión. No obstante, el mecanismo de nomenclatura de la variable que utiliza la palabra clave as es compartido por todos los mosaicos y no se restringe a linechart. La cadena asociada con as también puede contener una unidad de medida, con un comportamiento idéntico al del mosaico.

Por defecto, el gráfico de líneas toma una serie de colores de acuerdo con el color especificado para el mosaico. Sin embargo, también es posible especificar el color de cada una de las líneas por trazar. Esto puede realizarse con la sintaxis a continuación.

show linechart "Weekly volumes" unit: "$" a3f5 with
Week.oamount as "Sold" color: "blue"
Week.pamount as "Purchased" color: "red"

Visualización de una tabla

Saltemos el piechart y el treemap por el momento para cubrir un uso más avanzado de la tabla. Las tablas, si bien no son excesivamente visuales, probablemente sean uno de los ingredientes más versátiles de los paneles de información orientados a la acción. Las tablas a menudo se utilizan para mostrar listas de acciones priorizadas, como los productos con mayor exceso o mayor falta de existencias. En el script anterior, tenemos una tabla semicompleja definida al final del script (que copiamos a continuación para que resulte más claro):

show table "Top Sellers" a9f12 tomato with
  Id as "Product ID"
  Supplier
  StockOnHand
  sum(Orders.NetAmount) as "Sold" unit: "$"
  order by sum(Orders.NetAmount) desc 

Esta instrucción podría escribirse en una sola línea; sin embargo, para hacerlo más legible, utilizamos una vez más la sintaxis de bloque. La sintaxis sigue las normas generales de Envision que hemos visto hasta ahora, con 4 variables que se enumeran después de la palabra clave with. La declaración termina con una instrucción order by especial que veremos más abajo.

Además, Envision no solo permite que se enumeren variables, sino también expresiones. Aprovechamos esta capacidad en la línea 5 del script anterior. La sum() calcula un agregado a nivel de artículo, y este cálculo se expresa directamente dentro del mosaico. Hubiera sido posible declarar el vector de antemano con:

Sold = sum(Orders.NetAmount)
show table "Top Sellers" a9f12 tomato with
  Id as "Product ID"
  Supplier
  StockOnHand
  Sold as "Sold" unit: "$"
  order by sum(Orders.NetAmount) desc 

La posibilidad de declarar expresiones dentro de la instrucción de un mosaico hace que el script sea más compacto y generalmente más fácil de leer y mantener.

Por último, la línea comienza con order by y, como el nombre lo sugiere, la línea controla el orden de las líneas que se mostrarán en la tabla. La marca desc indica que se debería utilizar un orden descendente. Como alternativa, cuando se omite la marca desc, se utiliza el orden ascendente.