Desarrollo Front End de Módulo de Reportes -Angular

Módulo de reportes voz negocios


el módulo de reportes en voz negocios está enfocado a generar gráficas e indicadores versátiles para que sea posible tomar decisiones facilmente.


 Tipos de reportes que se pueden generar con VOZ: 1. NPS – Net Promoter Score. 2. Nivel de satisfacción. 3. Personalizable: según criterios de formularios.

 Filtro principal: el formulario es el primer filtro que debe elegir el usuario en VOZ Negocios para poder empezar a construir su reporte. Los resportes están basados en los registros que guarda la base de datos de los formularios diligenciados y enviados. Sólo se puede elegir un formulario por reporte.

Si el usuario de VOZ Negocios elige el tipo de reporte nps sólo podrá elegir un formulario que contenga un campo nps (el formulario creado previamente y con un nombre de campo nps) y si elige el tipo de reporte nivel de satisfacción, sólo podrá elegir un formulario que contenga un campo de nivel de satisfacción (emoticones con valores del 1 al 5).

 Criterios: todos los formularios pueden contar con criterios, y estos criterios generan conteos. Los criterios son campos de selección con opciones que los usuarios pueden utulizar para generar reportes específico. Estos campos criterios se deben comportar como filtros y las opciones de los campos también deben comportarse como filtros.

Todo con el sentido que les da la relación en la base de datos.

 Filtros individuales y sus relaciones para crear las posibles combinaciones de filtros: al seleccionar un formulario, el usuario podrá empezar a filtrar la información para construir reportes más específicos. Estos filtros tienen el sentido que les da la relación en la base de datos. O Zonas.

O Categorías. O Clasificaciones. O Puntos de acceso.

O Lugares de exposición. O Códigos QR.

 Fechas: el usuario debe contar con la capacidad de filtrar la información según una fecha específica o un rango entre dos fechas y el sistema debe arrojarle resultados consultando registros que estén en las fechas seleccionadas.

Modos de uso y experiencia del módulo


la utilización del módulo y manera de visualizar datos varía según el tipo de reporte seleccionado.
Al ingresar el módulo, el usuario debe contar con 3 opciones: NPS, Nivel de Satisfacción y Personalizado.
1. NPS – Net Promoter Score: este reporte se basa en un campo con opciones del 0 al 10. El resultado se calcula y se muestran dos indicadores, la tabla con cantidades, tabla con datos y 3 gráficas. El cálculo del indicador NPS del reporte se hace con la cantidad de puntuaciones del 0 al 10 y la siguiente base: del 0-6 son detractores, 7-8 son pasivos y 9-10 son promotores.


Cálculo del índice:
 Sumar el total de respuestas de cada grupo (detractores, pasivos y promotores).  Para obtener el porcentaje, dividir la cantidad total del grupo por la cantidad total de respuestas.  Resta el porcentaje total de detractores del total de promotores: esta es la puntuación del índice NPS.


Pasos para generar un reporte NPS.  Una vez seleccionada esta opción, el sistema debe mostrarle una lista con los formularios creados, al seleccionar el formulario se deben mostrar los campos de ese formulario para que el usuario elija el campo NPS (campo con opciones numéricas del 0 - 10). Si el usuario elige un campo que no tenga estas opciones (es decir, un campo al que no se le pueda hacer cálculo de NPS), el sistema debe advertirlo y no generar reporte.

 Cuando se seleccione el formulario y el campo válidos, se podrán (o no) seleccionar filtros individuales según las relaciones que tenga el formulario seleccionado para consultar información más específica. Se debe mostrar al usuario listas con los filtros individuales mostrando los nombres de los registros.  Una vez seleccionado el formulario con el campo NPS y filtrado con filtros individuales, se podrá seleccionar una fecha o un rango entre dos fechas que no excedan 30 días para traer resultados en esas fechas.

 Cuando se hayan realizado todos los filtros, el usuario podrá generar el reporte con los cálculos que realice el sistema y la información que arroje al hacer clic o tocar un botón de “Calcular y generar reporte”. El sistema hará los cálculos y renderizará el reporte con los indicadores, gráficas y tablas que se dispongan.

Nota: El usuario podrá guardar el reporte con los filtros seleccionados anteriormente y un nombre para que pueda acceder a este y volverlo a generar desde el módulo en cualquier momento sin necesidad de volver a recorrer todo el proceso. Podrá también descargar el reporte en pdf con los elementos renderizados, la fecha, el logo del cliente y el logo de VOZ.

Elementos en el reporte NPS.

 Mostrar los filtros seleccionados para el reporte, la fecha y el logo de VOZ.  Mostrar un indicador con el índice en porcentaje del NPS calculado como se explicó. Junto al indicador, graficar el porcentaje con la gráfica Gauge Solid (https://www.highcharts.com/demo/gauge-solid) y variar del color rojo, amarillo y verde según el porcentaje.

Entre más alto el porcentaje más verde la barra de la gráfica.   Mostrar un indicador con la cantidad total de datos (filas) tomados para el reporte.  Mostrar una gráfica de Línea básica (https://www.highcharts.com/demo/line- basic) con la variación del índice NPS en porcentaje calculado por día según el rango de fechas seleccionado.

Si se selecciona sólo un día no mostrar esta gráfica.  Mostrar un indicador con el porcentaje “Detractores”, “Pasivos” y “Promotores”.  Mostrar una gráfica de torta básica (https://www.highcharts.com/demo/pie-basic) con las cantidades totales en unidades de detractores, pasivos y promotores.

 Mostrar una tabla con la cantidad de veces (en unidades y porcentaje) que se han seleccionado las opciones de cada uno del resto de campos del formulario y graficar las cantidades con una gráfica de torta. Filtrar los resultados en 2: el comportamiento de las selecciones de cada campo por detractores y por promotores, 

Nota: para este el último punto de este reporte es necesario identificar y contar que opciones seleccionaron del resto de campos del formulario los usuarios que clasifiquen como detractores y promotes según su selección en el campo NPS.


2. Nivel de Satisfacción: este reporte se basa en campos con emoticones que tienen valores del 1 al 5. El resultado del reporte de nivel de satisfacción es básico, se debe mostrar el comportamiento de las 5 opciones de cada campo, es decir, la cantidad de veces que han seleccionado cada opción. Esos resultados se muestran con los 5 indicadores y gráficas mostrando en porcentaje y unidades la cantidad de veces seleccionado cada opción.


Pasos para generar un reporte Nivel de Satisfacción.

 Una vez seleccionada esta opción, el sistema debe mostrarle una lista con los formularios que haya creado con campos de Satisfacción). El usuario podrá seleccionar un campo de referencia para generar el reporte. Si selecciona un campo referencia, el sistema debe generar un reporte comparativo entre las opciones de ese campo en relación con las opciones de los otros campos (más o menos como un informe de NPS, pero de un campo con varias opciones).

 Cuando se seleccione el formulario, se podrán seleccionar filtros individuales según las relaciones que tenga el formulario seleccionado para consultar información más específica. Se debe mostrar al usuario listas con los filtros individuales mostrando los nombres de los registros.  Una vez seleccionado el formulario y filtrado con filtros individuales, se podrá seleccionar una fecha o un rango entre dos fechas que no excedan 30 días para traer resultados en esas fechas.

 Cuando se hayan realizado todos los filtros, el usuario podrá generar el reporte con los conteos que realice el sistema y la información que arroje al hacer clic o tocar un botón de “Generar reporte”. El sistema hará los conteos y renderizará el reporte con los indicadores, gráficas y tablas que se dispongan.

Nota: El usuario podrá guardar el reporte con los filtros seleccionados anteriormente y un nombre para que pueda acceder a este y volverlo a generar desde el módulo en cualquier momento sin necesidad de volver a recorrer todo el proceso. Podrá también descargar el reporte en pdf con los elementorenderizados, la fecha, el logo del cliente y el logo de VOZ.

Elementos en el reporte Nivel de Satisfacción.

Mostrar por cada campo de satisfacción: 

 Mostrar los filtros seleccionados para el reporte, la fecha y el logo de VOZ.  Mostrar un indicador con la cantidad total de datos (filas) tomados para el reporte.

Mostrar para cada campo

 Mostrar cinco indicadores con las cantidades de cada emoji. Se deben mostrar los cinco emojis y junto a ellos las cantidades.  Mostrar una gráfica de Línea básica (https://www.highcharts.com/demo/line- basic) graficando la cantidad de veces que se ha seleccionado cada emoji (1,2,3,4,5) por día según el rango de fechas seleccionado.

Si se selecciona sólo un día no mostrar esta gráfica.  Mostrar una gráfica de torta básica (https://www.highcharts.com/demo/pie-basic) con los porcentajes totales seleccionadas de los 5 emojis por cada campo.


3. Personalizado: este reporte se basa en los campos de selección que el usuario haya marcado como criterio. El resultado del reporte personalizado es el más básico, se debe mostrar el comportamiento de las opciones de los campos del formulario, es decir, la cantidad de veces que han seleccionado cada opción de cada campo. Esos resultados se muestran con el porcentaje y cantidad de veces seleccionado cada opción y dos gráficas.



Pasos para generar un reporte Personalizado.  Una vez seleccionada esta opción, el sistema debe mostrarle una lista con los formularios que haya creado con campos Criterio (de selección). El usuario podrá seleccionar un campo de referencia para generar el reporte.

Si selecciona un campo referencia, el sistema debe generar un reporte comparativo entre las opciones de ese campo en relación con las opciones de los otros campos (mas o menos como un informe de NPS pero de un campo con varias opciones).  Cuando se seleccione el campo criterio, se podrán seleccionar filtros individuales según las relaciones que tenga el formulario seleccionado para consultar información más específica. Se debe mostrar al usuario listas con los filtros individuales mostrando los nombres de los registros.

 Una vez seleccionado el formulario y el campo Criterio y filtrado con filtros individuales, se podrá seleccionar una fecha o un rango entre dos fechas que no excedan 30 días para traer resultados en esas fechas.  Cuando se hayan realizado todos los filtros, el usuario podrá generar el reporte con los conteos que realice el sistema y la información que arroje al hacer clic o tocar un botón de “Generar reporte”. El sistema hará los conteos y renderizará el reporte con los indicadores, gráficas y tablas que se dispongan.



Nota: El usuario podrá guardar el reporte con los filtros seleccionados anteriormente y un nombre para que pueda acceder a este y volverlo a generar desde el módulo en cualquier momento sin necesidad de volver a recorrer todo el proceso. Podrá también descargar el reporte en pdf con los elementos renderizados, la fecha, el logo del cliente y el logo de VOZ.

Elementos en el reporte Personalizado.

 Mostrar los filtros seleccionados para el reporte, la fecha y el logo de VOZ.  Mostrar un indicador con la cantidad total de datos (filas) tomados para el reporte.


Mostrar para cada campo

 Mostrar tabla con la cantidad total de registros de las opciones del campo en unidades y porcentaje.  Mostrar una gráfica de Línea básica (https://www.highcharts.com/demo/line- basic) graficando la cantidad de veces que se ha seleccionado cada opción del campo por día según el rango de fechas seleccionado. Si se selecciona sólo un día no mostrar esta gráfica.

 Mostrar una gráfica de torta básica (https://www.highcharts.com/demo/pie-basic) con las cantidades totales seleccionadas de las opciones.


Nota: si el usuario selecciona un campo referencia, debe mostrar esta información del comportamiento de las selecciones de cada campo por cada opción del campo referencia. Es necesario identificar y contar que opciones seleccionaron del resto de campos del formulario los usuarios que hayan seleccionado cada opción del campo referencia.


Mockups: acceder a mockups de referencia por el siguiente link.

https://www.figma.com/proto/PgJmWxXApviFofWhNl3zvn/Reportes-VOZ?nodeid=1%3A2&scaling=min-zoom