Creación de Demo#

La creación de un reporte comienza con el desarrollo de un reporte demo (prototipo). Este prototipo tiene como objetivo mostrar la idea de funcionamiento y demostrar las funcionalidades del reporte al cliente. Esto permite recibir retroalimentación y realizar mejoras en el aspecto visual del reporte y la forma de presentar la información.

Una vez que se cuenta con la demo, la integración del script se simplifica, ya que resulta más fácil comprender qué datos se van a utilizar y cómo deben presentarse.

Nota

Recuerde que para el desarrollo de un reporte puede realizar el proceso de configuración en Producción o en Preproducción , ya que el proceso es idéntico. Sin embargo, se recomienda iniciar el proceso de creación de reportes en preproducción. Una vez finalizado y seguro de sus cambios, puede transferirlo a producción.

Estructura de archivos#

Dentro del Repositorio servido encontrará los archivos correspondientes al front-end del reporte. Por favor, sigan los siguientes pasos para crear los archivos necesarios y continúe revisando cada sección correspondiente a la explicación sobre su contenido.

Cree una carpeta exclusiva dentro de la carpeta Apps para sus reportes en caso de no contar con una.

Nota

Identifique a la carpeta con el nombre de su empresa o el cliente que lo requiera.

Cree los cuatro archivos correspondientes al front-end del reporte, las cuales incluyen:

reporte_nombre.html: Estructura del reporte.
reporte_nombre.js: Lógica encargada de gestionar las solicitudes a la API, así como de procesar y presentar la información correspondiente en la estructura establecida.
reporte_nombre_data.js: Configuraciones de librerías que se utilizan.
style.css: Estilos generales del reporte (un archivo por carpeta).

Importante

En las siguientes secciones se explicará el contenido de cada archivo. Sin embargo, considere que NO se tiene un estándar establecido para el contenido. No obstante, utilice los ejemplos como base para sus proyectos futuros.

Estructura js#

El archivo js en Servido contiene la lógica encargada de gestionar las solicitudes a la API de Linkaform, así como de procesar y presentar la información correspondiente en la estructura establecida.

Observe el siguiente bloque de código, el cual representa de manera general las variables y funciones principales que componen al archivo js.

Atención

Tenga en cuenta que el siguiente código está basado en un ejemplo para un reporte específico con una tabla. Sin embargo, consulte las tabs para identificar el funcionamiento para elementos como cards o gráficos.

En el contenido posterior podrá encontrar detalles sobre las funciones más relevantes, resaltando los elementos que puede personalizar. Por favor, compare los ids y clases usadas con el archivo HTML para comprender el funcionamiento.

Nota

Regularmente, las variables y funciones que no tienen ningún comentario como título contienen código genérico que rara vez se modifica; por lo tanto, se mantienen sin cambios.

let us = null;
let usTy = null;
let jw = null;
let userId = null;
let userJwt = null;
let userName = null;
let userParentId = null;
let scriptId = null;

$('#divOptions').hide();
$('#title_report').hide();
$('.title_tables').hide();
hideElement("title_demo");
hideElement("firstParameters");
hideElement("firstElement");
hideElement("secondElement");
hideElement("thirdElement");

window.onload = function(){ ...
}

function unHideReportElements(){ ...
}

const loading = document.querySelector('.loading-container');
loading.style.display = 'none';

//-----DEMO
function loadDemoData(){ ...
}

//-----DATE
function setDate(){ ...
}

//-----EXCUTION
function runFirstElement(){ ...
}

function getFirstElement(dateTo, dateFrom, promotor){ ...
}

//-----TABLES
function getDrawTable(id, columnsData, tableData, height = 500){ ...
}

//-----CATALOG
function get_catalog(){ ...
};

Variables globales y métodos#

Las variables globales siguientes se utilizan para retener información asociada a la cuenta que accede al reporte o al script y forman parte de las cookies. Estas variables se utilizan en el archivo servido_utils.

Advertencia

Las variables no se modifican.

let us = null;
let usTy = null;
let jw = null;
let userId = null;
let userJwt = null; //Token del usuario
let userName = null;
let userParentId = null; //Id de la cuenta padre
let scriptId = null; //Script del reporte

El siguiente bloque de código corresponde a métodos de jQuery, se utiliza para manipular el DOM de la página. Específicamente, oculta varios elementos visuales antes de cualquier interacción con el reporte. Lo hace tanto por su identificador único (id) como por su clase.

Independientemente del número de elementos en su reporte, incluya los elementos que debe ocultar. O en su defecto, si no tiene elementos agrupados, oculte según lo requiera. Por favor, revise los comentarios dentro del código.

$('#divOptions').hide(); // Oculta el elemento con ID "divOptions" (botón Run)
$('#title_report').hide(); // Oculta el elemento con ID "title_report" (título del reporte)
$('.title_tables').hide(); // Oculta el elemento con ID "title_tables" (Título de las tablas)

// Oculta el elementos con la identificación proporcionada para que no se muestre en la pantalla.
hideElement("title_demo"); // Oculta el elemento con ID "title_demo" (titulo que especifica que el reporte contiene datos demo)
hideElement("firstParameters"); // Oculta el elemento con ID "firstParameters" (botón de filtros)
hideElement("firstElement"); // Oculta el primer elemento del reporte

// Ajuste el numero de elementos de su reporte
hideElement("secondElement"); // Oculta el segundo elemento del reporte
hideElement("thirdElement"); // Oculta el tercer elemento del reporte
hideElement("fourthElement"); // Oculta el cuarto elemento del reporte
hideElement("thirdElement"); // Oculta el quinto elemento del reporte
hideElement("fiveElement"); // Oculta el sexto elemento del reporte

// Oculta elemento por elemento
hideElement("div_alert1"); // Card1
hideElement("div_alert2"); // Card2 línea 5) para traer la data única de un catálogo. Por favor, lea detenidamente los comentarios.
hideElement("div_alert3"); // Card3

Función `window.onload`#

La función window.onload() se activa siempre que la pantalla se carga por completo. Además, procesa los parámetros de la URL para actualizar los elementos del reporte en función a esos parámetros. También se encarga de manipular el contenido de los filtros mediante el ID de los elementos.

En las líneas 6-8, verifica si la clave (key) recibida es igual a script_id, es decir, lo que se recibe como parámetro de la URL.

Ver también

Consulte la sección URLs de acceso, específicamente en la de Servido .

Revise la configuración del reporte en la sección Crear reporte .

De manera similar, en las líneas 10-13, verifica si se está accediendo al entorno de pruebas para apuntar y acceder a los valores de preproducción.

Ver también

Consulte: Entorno de prueba (Test Environment) .

window.onload = function(){ // Esta función se ejecutará cuando la ventana haya cargado completamente.
var qs = urlParamstoJson(); // Obtiene los parámetros de la URL y los convierte en un objeto.
var formNode = document.getElementById("appCont"); // Obtiene el elemento del DOM del contenido de "inicio de sesión".
    for(var key in qs){ // Recorre los parámetros de la URL.
    // Verifica si el parámetro es "script_id" y lo convierte en un entero.
    if (key === 'script_id' ){
    scriptId = parseInt(qs[key]);
    }
     // Verifica si el parámetro es "env" y establece la URL en función del valor.
    if (key === 'env') {
    if (qs[key] === 'test'){
        url = "https://preprod.linkaform.com/api/"; // Establece la URL de la API en modo de prueba.
    }
    }
    // Verifica si el parámetro es "title" y establece el texto del elemento con el ID "title_report" que es el título del reporte.
    if (key ==='title'){
    $("#title_report").text(qs[key]);
    }
        var elements = getAllElementsWithAttribute(formNode, 'data-infosync-id', key); // Obtiene todos los elementos con el atributo 'data-infosync-id' igual a 'key'.
        var value = decodeURI(qs[key]); // Decodifica el valor del parámetro.
     // Si el parámetro es 'infosyncRecordID', establece su valor en un elemento con el mismo ID.
    if (key === 'infosyncRecordID'){
    var recId = document.getElementById("infosyncRecordID");
    recId.value = value;
    }
        else if(elements.length > 0){
            // Si existen elementos con el atributo 'data-infosync-id', actualiza sus valores según el tipo de elemento del filtro.
            switch(elements[0].type){
                case 'text':
                    elements[0].value = value;
                    break;
                case 'textarea':
                    elements[0].value = value;
                    break;
                case 'select-one':
                    elements[0].value = value;
                    break;
                case 'radio':
                    for(var idx in elements){
                        if(elements[idx].value === value){
                            elements[idx].checked = true;
                        }
                    }
                    break;
                case 'checkbox':
                    var values = value.split(';');
                    for(var idx in elements){
                        if(values.indexOf(elements[idx].value) !== -1){
                            elements[idx].checked = true;
                        }
                    }
                    break;
            }
        }
    }

Continuando con la función window.onload de forma general, la condicional (línea 11) verifica si se ha iniciado sesión. El parámetro us corresponde al ID del usuario (línea 2), el parámetro jw al token del usuario (línea 3).

Si el parámetro scriptId es nulo, el entorno se configurará como demo. Si la condición se cumple, se ejecutan otras acciones. Revise los comentarios dentro del código para comprender el flujo.

// Obtiene valores de cookies y almacena en variables.
us = getCookie("userId");
jw = getCookie("userJwt");
userParentId = getCookie("userParentId");

// Oculta elementos con los IDs "close_sesion" y "firstParameters".
hideElement("close_sesion"); // opción para cerrar sesión.
hideElement("firstParameters");// opción para mostrar filtros.

// Verifica si las cookies "userId" y "userJwt" no están vacías o si "scriptId" es nulo.
if(us != "" && jw != "" || scriptId===null){
    hideElement("inicio_ses"); // Oculta el inicio de sesión porque ya hay una sesión activa.
    unhideElement("close_sesion"); // Muestra el botón "cerrar sesión" que aparece en la parte superior derecha.
    getCompanyLogo(userParentId); // Obtiene el logo de la empresa según el "userParentId".

    // Asigna valores a variables globales.
    userId = us;
    userJwt = jw;
    userName = getCookie("userName"); //Obtiene el nombre del usuario a través de la cookie.
    document.getElementById("firstParameters").style.removeProperty('display');  // Restablece la propiedad "display" del elemento con los filtros del reporte "id firstParameters" (lo muestra).
    unHideReportElements() // Muestra elementos del reporte (llama a una función "unHideReportElements" ubicada en código posterior).

    // Si "scriptId" es nulo, carga datos de la demo y ejecuta la función correspondiente de loadDemoData.
    if (scriptId == null) {
    loadDemoData(); // Ejecuta la función "loadDemoData()". Podrá encontrar la explicación en contenido posterior.
    }
    //--Styles
    setSpinner(); // Carga la animación de spinner cuando se carga la data.
    setDate(); // Ejecuta la función "setDate()". Podrá encontrar la explicación en contenido posterior.
    get_catalog(); // Ejecuta la función "get_catalog()". Podrá encontrar la explicación en contenido posterior.
    $('#divOptions').show(); // Muestra las opciones de filtro.
    $('#title_report').show(); // Muestra el título del reporte.
    document.getElementById("firstParameters").style.removeProperty('display');

} else {
    // Si las condiciones anteriores no se cumplen, muestra el elemento con el ID "inicio_ses" que es el formulario para la autenticación.
    unhideElement("inicio_ses");

    // Oculta varios elementos, incluyendo "divContent", "divOptions", "title_report" y elementos con la clase "title_tables".
    $('#divContent').hide(); // Elementos que se utilizan para representar la data de las formas (Tablas, gráficos, etc.).
    $('#divOptions').hide(); // Botones opciones de filtro.
    $('#title_report').hide(); // Título del reporte.
    $('.title_tables').hide(); // Títulos de las tablas (NOTA: Este elemento corresponde a una tabla, en caso de algún otro elemento deberá colocarlo aquí).
    hideElement("firstElement-Buttons");
}
///-----HIDE AND SHOW
for(var key in qs){ // Recorre los parámetros de la URL.
    // Si el parámetro es "embed" y tiene un valor, oculta los elementos con los IDs "close_sesion" (opción para cerrar sesión, ubicada en la parte superior derecha) y "image_log".
    if (key === 'embed'){
    if (qs[key]){
        $("#close_sesion").hide();
        $("#image_log").hide();
    }
    }
}
}

Función `unHideReportElements`#

La siguiente función unHideReportElements() se encarga de mostrar los elementos específicos en la página que son necesarios para el reporte al iniciar sesión. Lea los comentarios.

Atención

Configure aquí todos los elementos del reporte que deben mostrarse al iniciar sesión.

function unHideReportElements(){

unhideElement("firstElement-Buttons"); // Botones opciones de filtro.
unhideElement("firstParameters"); // Filtros.
unhideElement("close_sesion"); // Opción para cerrar sesión.
}

// La variable "loading" almacena el primer elemento con la clase "loading-container" (spinner).
const loading = document.querySelector('.loading-container');

// Oculta visualmente el elemento seleccionado estableciendo su propiedad de estilo 'display' en 'none'.
loading.style.display = 'none';

Función `loadDemoData`#

La función loadDemoData() está diseñada para cargar datos de demostración y otros elementos como tablas, tarjetas y gráficas en el reporte.

Atención

Esta es una de las funciones más importantes que debe adaptar. Revise las siguientes pestañas que ejemplifican escenarios con diferentes elementos. Considere los mismos ejemplos que en los elementos de representación , a medida que avance revise y compare ids y clases del código con la documentación.

Tablas

En esta pestaña encontrará únicamente el código correspondiente a una tabla.

Observe que en la línea 11 se llama a la función getDrawTable , la cual se utiliza para obtener datos y elementos de una tabla, enviando los siguientes cuatro parámetros:

firstElement: Id de la tabla.
columsTable1: Variable que contiene un array de objetos que representan las columnas de la tabla (biblioteca de tablas Tabulator).

Ver también

Consulte el archivo data.js , donde está ubicada la variable mencionada anteriormente.

dataTable1: Variable que contiene un array de objetos que representan los datos de la tabla. Recuerde que, dado que es un reporte demo, se llena con información ficticia que no se extrae de la base de datos con registros reales.

Ver también

Consulte el archivo data.js , donde está ubicada la variable mencionada anteriormente.

350: Es la altura máxima en píxeles que medirá la tabla.

//-----DEMO
// Verifica si el entorno es la demo, en caso de serlo muestra ciertos elementos pertenecientes al mismo.
function loadDemoData(){
unhideElement("title_demo")// Muestra el elemento con la clase "title_demo". En este caso, coloca "Demo data" debajo del titulo del reporte para indicar que es un reporte de demostración.
$('.title_tables').show();// Muestra todos los elementos con la clase "title_tables". En este caso, el titulo de la o las tablas (dependiendo de cuantas tablas haya establecido).

// Restablece la propiedad "display" (elimina la propiedad display del estilo del elemento) para mostrar y permitir que el elemento con el ID "firstParameters" (opciones y botones de filtros) force a la regla de estilo predeterminada a abarcar todo el espacio de la página.
document.getElementById("firstParameters").style.removeProperty('display');

// Llama a la función "getDrawTable" para obtener y mostrar una tabla.
getDrawTable('firstElement', columsTable1, dataTable1, 350);
// Restablece la propiedad "display" (eliminar la propiedad display del estilo del elemento) para mostrar y permitir que el elemento con el ID "firstElement" (tabla) force a abarcar todo el espacio de la página.
document.getElementById("firstElement").style.removeProperty('display');
}

Cards

En esta pestaña encontrará el código necesario para presentar datos de demostración para tarjetas (cards). Aunque anteriormente se recalcó que estos datos pueden aplicarse directamente en el span correspondiente.

Observe la línea de código 16, donde se llama a la función getDrawGauge , que se utiliza para obtener datos y elementos de un indicador Gauge. Esta función envía dos parámetros:

gaugeFirst: Id de la tarjeta (indicador Gauge).
dataGauge1: Variable que contiene la data del medidor.

function loadDemoData(){

unhideElement("title_demo"); // Muestra el titulo que especifica que es un reporte demo.
unhideElement("div_alert1"); // Muestra la tarjeta 1
unhideElement("div_alert2"); // Muestra la tarjeta 2
unhideElement("div_alert3"); // Muestra el indicador Gauge

// Restablece la propiedad "display" (elimina la propiedad display del estilo del elemento) para mostrar y permitir que el elemento con el ID "firstParameters" (opciones y botones de filtros) force a la regla de estilo predeterminada a abarcar todo el espacio de la página.
document.getElementById("firstParameters").style.removeProperty('display');

// Establecen su contenido de texto interno utilizando la propiedad innerText.
document.getElementById("textAlert1").innerText = 50;
document.getElementById("textAlert2").innerText = 10;

// Llama a la función getDrawGauge()
getDrawGauge('gaugeFirst', dataGauge1)
document.getElementById("firstGauge").style.removeProperty('display');
}

Función `setDate`#

La función setDate() está diseñada para establecer valores iniciales en los filtros de tipo fecha del reporte. Estos son los inputs con los IDs date_to y date_from que existen en la estructura de los filtros establecidos en el archivo HTML. Lea los comentarios del código.

//-----DATE
function setDate(){ // Función para establecer valores predeterminados en campos de fecha
// Array de representaciones de dos dígitos de los 12 meses del año
array_month = ['01','02','03','04','05','06','07','08','09','10','11','12'];

//---DATE TO
// Obtiene fecha actual como fecha final del filtro hasta (date_to)
date_to = new Date();
year = date_to.getFullYear();
month = array_month[date_to.getMonth()];
day = date_to.getDate();
date_to = year +'-'+ month +'-'+ day;
$('#date_to').val(date_to); // Establece el valor en el campo de fecha final

//---DATE FROM
// Obtiene fecha actual menos 30 días como fecha de inicio (date_from)
date_from = new Date();
date_from.setDate(date_from.getDate() - 30)

year = date_from.getFullYear();
month = array_month[date_from.getMonth()];
day = date_from.getDate();
date_from = year +'-'+ month +'-'+ day;
$('#date_from').val(date_from);// Establece el valor en el campo de fecha de inicio
}

Función `get_catalog`#

La función get_catalog() se encarga de realizar una petición (puede ser a producción o a preproducción dependiendo del parámetro que contenga en la URL, línea 5) al servidor para traer la data única de un catálogo.

Prudencia

La siguiente función está diseñada para realizar una petición para el selector Promotor (filtro) correspondiente a un catálogo. Puede usarla como referencia en caso de que necesite extraer información para un filtro de un catalogo. Consulte la sección Catálogos para más detalles.

Cada usuario que inicia sesión en su cuenta tiene un token (Jwt) línea 13, el cual se envía en la petición del script. Si el usuario tiene acceso al script, ya sea porque se le compartió o pertenece al grupo de la cuenta padre, podrá ejecutarlo. En caso contrario, se le indicará a través de un mensaje que no tiene acceso y se le sugerirá iniciar sesión.

Ver también

Consulte Ver ID del script (línea 8).

Observe la condicional en el bloque de código entre las líneas 20-39. Aquí es donde se extrae la información del catálogo. Por favor, lea detenidamente los comentarios.

Ver también

Recuerde colocar el id correspondiente del campo de su forma. Consulte Opciones avanzadas para conocer el id del campo.

Código

//-----CATALOG
// Función para obtener datos de un catálogo a través de una solicitud fetch
function get_catalog(){
// Realiza una solicitud fetch usando el método POST
fetch(url + 'infosync/scripts/run/', {
    method: 'POST',
    body: JSON.stringify({ // Convierte a un JSON
        script_id: 95556, // Id del script al que debe apuntar
        option: 0, // Determina que consulta debe realizar, en este caso 0 le indica que debe realizar una consulta a un catalogo, en el caso de que fuera 1 seria una petición normal a la forma.
    }),
    headers:{
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+userJwt
    },
    })
    // Procesa la respuesta en formato JSON
    .then(res => res.json())
    .then(res => {
    // Verifica si la petición fue exitosa (success = true)
    if (res.success) {
        // Verifica si hay elementos en el catálogo devuelto
        if (res.response.catalog.length){
        array_value = []
        // Itera sobre los elementos del catálogo para extraer valores únicos
        for (i = 0; i < res.response.catalog.length; i++) {
            if (!array_value.includes(res.response.catalog[i]['63dc0f1ec29b8336b7b72615'])) {
            array_value.push(res.response.catalog[i]['63dc0f1ec29b8336b7b72615'])
            }
        }
        // Ordena los valores únicos en el array
        array_value.sort();
        // Limpia y actualiza un elemento del DOM (select con ID "promotor" (filtro))
        $("#promotor").empty();
        $('#promotor').append('<option value="--">--Seleccione--</option>');
        // Itera sobre los valores únicos y agregar opciones al elemento "promotor"
        for (i = 0; i <array_value.length; i++) {
            $('#promotor').append('<option value="'+ array_value[i] +'">'+array_value[i]+'</option>');
        }
    }
}

Resultado

Función `runFirstElement`#

La función runFirstElement() se ejecuta cuando se presiona el botón Run de los filtros. Obtiene las referencias de los filtros para validar que no estén vacíos (línea 10) y poder traer la data correspondiente (línea 12). Por favor, continue leyendo los comentarios dentro del código.

Atención

Ajuste esta función de acuerdo a los filtros que necesite. En este caso, los campos (filtros) son de fechas y promotores. Si no están vacíos y están completos, llama a la función getFirstElement con los valores de fecha y promotor. Si los campos de fecha están vacíos, muestra una alerta visual utilizando la biblioteca Swal (SweetAlert2 ), solicitando al usuario que ingrese un rango de fechas antes de continuar.

//-----EXCUTION
// Se encarga de gestionar los filtros existentes, toma los valores de "date_to" (de esta fecha) y "date_from" (a esta fecha) y las almacena en las variables.
function runFirstElement(){
// Obtiene referencias a los elementos HTML con los IDs "date_from", "date_to" y "promotor".
let date_from = document.getElementById("date_from");
let date_to = document.getElementById("date_to");
let promotor = document.getElementById("promotor");

// Verifica si los campos de fecha no están vacíos.
if (date_from.value != null && date_to.value != null && date_from.value != "" && date_to.value != ""){
    // Si los campos no están vacíos, llama a la función getFirstElement con los valores de fecha y promotor
    getFirstElement(date_to.value, date_from.value, promotor.value);
}
else
{
    // Muestra un mensaje de alerta si los campos de fecha están vacíos
    Swal.fire({
    title: 'Rango de Fechas Requerido',
    });
}
}

Función `getFirstElement`#

En términos generales, la función getFirstElement() obtiene los parámetros de los filtros y presenta datos dinámicos del servidor en los elementos del reporte.

La función se encarga de recibir las validaciones de los filtros (:ref: funcion-runFirstElement ) para realiza una solicitud al servidor (puede ser a producción o a preproducción dependiendo del parámetro que contenga en la URL, línea 9) utilizando el método POST.

Ver también

El scriptId es lo que se recibe como parámetro en la URL, línea 12 (Regrese y consulte la Función window.onload , específicamente las líneas 6-8, y lea los comentarios).

Después de procesar la respuesta del servidor, muestra u oculta elementos en la interfaz según el resultado. Si la respuesta es exitosa, se actualiza el elemento (tabla) con los datos recibidos. En caso de error se muestra un mensaje utilizando la biblioteca Swal (SweetAlert2 ) líneas 46-60. Lea detenidamente los comentarios dentro del código para comprender el flujo.

Nota

Los errores más comunes que pueden presentarse al hacer la solicitud pueden incluir:

No tener acceso a la información.
La sesión caducó (el token ha expirado).

Observe la línea de código número 40, llama a la función getDrawTable . Desglosando los parámetros que envía:

firstElement: Es el ID del div donde se necesita colocar la tabla.
columsTable1: Variable que contiene un array de objetos que representan las columnas de la tabla (biblioteca de tablas Tabulator Download Data ).

Prudencia

columsTable1 es la única variable que funciona tanto en el reporte demo como en el reporte operativo final. Las columnas pueden ser dinámicas o estáticas, sin embargo, al utilizar funciones propias de JavaScript es difícil usar el dinamismo a menos de que todas las columnas lleven la misma estructura. Consulte el archivo data.js para más detalles.

res.response.firstElement.tabledata: Son las filas extraídas del valor, es decir, toda la data real.
450: Es la altura máxima en píxeles que medirá la tabla.

// Función para obtener datos de los elementos a través de una solicitud fetch
function getFirstElement(dateTo, dateFrom, promotor){
//----Hide Css
$("#divContent").hide(); // Oculta todos los elementos (tablas, gráficos, etc.) para que, al aplicar un filtro, los elementos se recarguen y no permanezcan visibles hasta que se complete la carga del nuevo filtro.
$('.load-wrapp').show(); // Muestra la animación del spinner para cargar la data.
$('.title_tables').hide(); // Asegura que el título de la o las tablas esté oculto para que cada vez que se aplique un filtro, los elementos vuelvan a cargarse.

// Realiza una solicitud fetch usando el método POST para obtener datos del servidor
fetch(url + 'infosync/scripts/run/', {
    method: 'POST',
    body: JSON.stringify({ // Convierte a un JSON
    script_id: scriptId,
    // Parámetros (filtros) que recibirá el script
    date_to: dateTo,
    date_from: dateFrom,
    promotor: promotor,
    option: 1, // Determina que consulta debe realizar, en este caso 1 le indica que debe realizar una consulta normal es decir, a la forma
    }),
    headers:{
    'Content-Type': 'application/json',
    'Authorization': 'Bearer '+userJwt
    },
})
 // Procesa la respuesta en formato JSON
.then(res => res.json())
.then(res => {
    // Verifica si la petición fue exitosa (success = true)
    if (res.success) {
    //----Hide and show
    $('.load-wrapp').hide(); // Oculta la animación del spinner para cargar la data
    $("#divContent").show(); // Muestra todos los elementos (tablas, gráficos, etc.)
    $('.title_tables').show(); // Se habilitan títulos de la o las tablas que estaban ocultas

    // Observe en la consola del navegador la data extraída, almacenada en un objeto
    console.log(res.response)

    // Verificar si hay datos en la respuesta
    if (res.response.firstElement.tabledata) {
        // Llama a la función "getDrawTable()" para actualizar la tabla con los datos recibidos. NOTA: Consulte la función para más detalles ubicada posteriormente.
        getDrawTable('firstElement', columsTable1, res.response.firstElement.tabledata, 450);
        // Restablecer la propiedad 'display' para mostrar el elemento 'firstElement'
        document.getElementById("firstElement").style.removeProperty('display');
    }
    } else {
    // En caso de error, oculta el indicador de carga y muestra un mensaje de error
    hideLoading();
    if(res.code == 11){
        Swal.fire({
        title: 'Error',
        html: res.error
        });
        $('.load-wrapp').hide();
    } else {
        Swal.fire({
        title: 'Error',
        html: res.error
        });
        $('.load-wrapp').hide();
    }
    }
})
}

Función `getDrawTable`#

La función getDrawTable() se utiliza para dibujar y configurar la tabla interactiva utilizando la biblioteca Tabulator . Proporciona opciones para descargar los datos de la tabla en formatos XLSX y CSV. A continuación, se describe el flujo de la función de manera general:

Prudencia

Esta función NO está estandarizada, pero si está preparada para funcionar con n cantidad de tablas que se requieran de un mismo reporte.

Observe la línea 4, donde el ID es el indicador de HTML que toma el valor de la variable id y lo concatena con el símbolo de almohadilla (#), creando así un selector de identificador completo para seleccionar un elemento específico en el documento HTML basado en su identificador (tabla).

Ejemplo

Si id tiene el valor firstElement, entonces # + id se convierte en #firstElement y eso se utilizará para seleccionar el elemento con el ID firstElement en el HTML. Es decir, no tendrá que repetir la función por cada tabla y colocar firstElement, secondElement y así sucesivamente.

Identifique las líneas de código de la 4-15, aquí se crea una instancia de Tabulator Download Data y se configuran aspectos de la tabla, como la altura, el diseño, los datos, la capacidad de redimensionar filas, la estructura de árbol de datos, la capacidad de copiar al portapapeles, la dirección del texto y las columnas.

Ver también

Para funciones más personalizadas considere revisar las opciones de tablas y ajuste las propiedades según sus necesidades. Revise la documentación correspondiente a la tabla.

En los bloques de código (18-27, 29-38) verifica si existe un elemento del DOM para la descarga de datos en formato XLSX y CSV (botones para descarga). Si existe, se reemplaza con una copia para evitar duplicados y se agrega un evento de clic para activar la descarga de datos en formato XLSX y CSV cuando se haga clic en el elemento.

//-----TABLES
function getDrawTable(id, columnsData, tableData, height = 500){
// Crear una instancia de Tabulator y configurar la tabla
var  table = new Tabulator("#" + id, {
    height:height +"px",
    layout:"fitDataTable",
    data:tableData,
    resizableRows:false,
    dataTree:true,
    dataTreeStartExpanded:false,
    clipboard:true,
    clipboardPasteAction:"replace",
    textDirection:"ltr",
    columns:columnsData,
});

// Configuración para descargar datos en formato XLSX (Excel)
if (document.getElementById("download_xlsx_"+id)){
    // trigger download of data.xlsx file
    // Reemplaza el elemento actual con una copia clonada del mismo elemento
    document.getElementById("download_xlsx_"+id).replaceWith(document.getElementById("download_xlsx_"+id).cloneNode(true));
    // Agrega un evento al elemento clonado para la descarga del archivo XLSX
    document.getElementById("download_xlsx_"+id).addEventListener("click", function (){
    // Utiliza la función "table.download" para descargar el contenido de la tabla en formato XLSX con el nombre de archivo "data.xlsx"
    table.download("xlsx", "data.xlsx", {sheetName:"data"});
    });
}
// Configuración para descargar datos en formato CSV
if (document.getElementById("download_csv_"+id)){
    //trigger download of data.csv file
    // Reemplaza el elemento actual con una copia clonada del mismo elemento
    document.getElementById("download_csv_"+id).replaceWith(document.getElementById("download_csv_"+id).cloneNode(true));
    // Agrega un evento al elemento clonado para la descarga del archivo CSV
    document.getElementById("download_csv_"+id).addEventListener("click", function (){
    // Utiliza la función "table.download" para descargar el contenido de la tabla en formato CSV con el nombre de archivo "data.csv"
    table.download("csv", "data.csv");
    });
}
}

Función `getDrawGauge`#

La función getDrawGauge() utiliza la biblioteca plotly para dibujar y configurar un gráfico de tipo Gauge (medidor).

La función recibe dos parámetros:

id: El id del contenedor donde se dibujará el gráfico de Gauge.
data: Los datos necesarios para dibujar el gráfico de Gauge.

En la línea 3 se define un objeto layout que especifica las propiedades del diseño del gráfico. En este caso, se establecen el ancho, el alto y los márgenes del gráfico.

Nota

En el objeto layout, las propiedades t y b en el atributo margin especifican el margen superior (t de top) y el margen inferior (b de bottom).

Luego, se utiliza Plotly.newPlot() para crear un nuevo gráfico de Gauge. Se pasa el id, data y layout definido anteriormente como argumentos.

//-----GAUGE
function getDrawGauge(id, data){
var layout = {
width: 340,
height: 190,
margin: {
    t: 42 ,
    b: 0
    }
};

Plotly.newPlot(id, data, layout);
}

Estructura data.js#

La estructura de un archivo data.js en Servido tiene el propósito de albergar configuraciones de las librerías utilizadas en el reporte. Es utilizado para proporcionar datos de relleno de tablas, gráficos y otros elementos y visualizar cómo se verá el reporte cuando se complete con datos reales. A continuación, se detalla más acerca de la estructura de un archivo data.js. Al final, encontrará el código completo:

El siguiente bloque de código contiene un array de objetos que representan las columnas de la tabla, continue:

Ubique la líneas de código 2-4, es una funcion propia de JavaScript diseñada para generar dinámicamente una URL para un enlace en función del valor del campo record_id en la fila actual de la tabla. Cada celda en la columna Folio tendrá un enlace único que apunta a la página de detalles del registro (Consulte: Visualizar registro ) correspondiente en la aplicación de Linkaform. Es decir, la función url se utiliza como parte del formateador para la columna Folio en Tabulator.

Método/Instrucción	Descripción
`cell.getData()`	Se utiliza para obtener los datos asociados con esa celda en la fila actual de la tabla. Asumiendo que la celda está asociada al conjunto de datos que incluye un campo llamado `record_id`.
`record_id`	Después de obtener los datos de la celda con `getData()`, se accede al valor específico del campo `record_id` y se extrae su valor.
`formatter`	Formateador de la celda por columna.
`formateadorParams`	Parámetros adicionales con el formateador, que debe contener un objeto con información adicional para configurar el formateador.

Ver también

Consulte formateador de tabla con url para más detalles o revise otras opciones para formatear tablas .

Estructura

var columsTable1 = [
{title:"Folio", field:'folio', hozAlign:"right", formatter:"link", formatterParams:{
url:function(cell){return "https://app.linkaform.com/#/records/detail/" + cell.getData().record_id},
target:"_blank",}, headerFilter:"input",width:100},
{ title:"Store ID", field:'store_id',hozAlign:"right",width:200},
{ title:"Merchant", field:'merchant',hozAlign:"left",width:300},
{ title:"Store", field:'store',hozAlign:"left",width:300},
{ title:"Promotor", field:'promotor',hozAlign:"left",width:300},
{ title:"City", field:'city',hozAlign:"left",width:250},
{ title:"State", field:'state',hozAlign:"left",width:250},
{ title:"Fecha Inicio de Captura", field:'fecha_captura',hozAlign:"right",width:250},
{ title:"Coordenadas Latitud", field:'cordenada_latitud',hozAlign:"right",formatter: "money",
"formatterParams": {"symbol": "", "symbolAfter": "", "thousand": "",  precision:false},width:250},
{ title:"Coordenadas Longitud", field:'cordenada_longitud',hozAlign:"right",formatter: "money",
"formatterParams": {"symbol": "", "symbolAfter": "", "thousand": "",  precision:1},width:250},
{ title:"Check In", field:'checkin',hozAlign:"right",width:250},
{ title:"Check Out", field:'checkout',hozAlign:"right",width:250},
{ title:"Tiempo Visita", field:'tiempo_visita',hozAlign:"right",width:250},
];

Resultado

title: Texto de la columna.
field: Atributo key que permitirá enlzar las columnas con las filas.
hozAlign: Alineación de la data, puede ser righth, center o left, pero no justify.
width: Ancho de la columna en px.

Prudencia

Las columnas pueden ser dinámicas solamente si no se utilizan formateos específicos para la tabla. Es decir, si todas las columnas de la tabla son estáticas y usan la misma estructura (title, field, hozAlign y width), como se muestra en la línea 6.

El siguiente bloque de código representa un array de objetos de la data de la tabla.

Nota

Cada objeto dentro del arreglo representa una fila de datos con propiedades específicas.

Estructura

var dataTable1 = [
{
    "folio": "850-11702",
    "record_id": "63eaed385a3ef7414d4899da",
    "store_id": "1209250816961081402",
    "merchant": "Calvin Klein Instore",
    "store": "Ck Parque Lindavista",
    "centro_comercial": "Parque Lindavista",
    "promotor": "Alberto Torres",
    "city": "Gustavo A. Madero",
    "fecha_creacion": "2023-02-14 08:08:56",
    "checkin": "2023-02-14 08:03:49",
    "checkout": "2023-02-14 08:08:45",
    "tz_offset": -360.0,
    "tiempo_visita": 296.0
},
{
    "folio": "850-11702",
    "record_id": "63eaed385a3ef7414d4899da",
    "store_id": "1209250816961081402",
    "merchant": "Calvin Klein Instore",
    "store": "Ck Parque Lindavista",
    "centro_comercial": "Parque Lindavista",
    "promotor": "Alberto Torres",
    "city": "Gustavo A. Madero",
    "fecha_creacion": "2023-02-14 08:08:56",
    "checkin": "2023-02-14 08:03:49",
    "checkout": "2023-02-14 08:08:45",
    "tz_offset": -360.0,
    "tiempo_visita": 296.0
},
];

Resultado

Estructura CSS#

La estructura de un archivo CSS es simple y básica, son estilos generales aplicados especialmente a los títulos de los elementos. Utilice el siguiente código como base para sus reportes futuros.

Nota

La mayoría de los estilos del reporte dependen de la herramienta que se esté utilizando, ya que estas contienen sus propios estilos.

.title_tables h3 {
color: black;
font: 33px gothambook;
margin-top: 30px;
text-align: left;
}


.hrFirstElement {
border-top: 1px solid #707b7c;
width: 500px;
margin-left: 0%;
}

.hrSecondElement {
border-top: 1px solid #707b7c;
width: 550px;
margin-left: 0%;
}

body{
font-family: gothambook;
}

En esta sección ha aprendido lo necesario para desarrollar sus reportes demo. Por favor, continúe con la siguiente parte para desarrollar el script necesario y construir las consultas a la base de datos y poblar sus elementos con datos reales.

Creación de Demo#

Estructura de archivos#

Estructura html#

head#

body#

Header del reporte#

Content del reporte#

Filtros#

Elementos de representación#

Librerías#

Estructura js#

Variables globales y métodos#

Función `window.onload`#

Función `unHideReportElements`#

Función `loadDemoData`#

Función `setDate`#

Función `get_catalog`#

Función `runFirstElement`#

Función `getFirstElement`#

Función `getDrawTable`#

Función `getDrawGauge`#

Estructura data.js#

Estructura CSS#

Creación de Demo#

Estructura de archivos#

Estructura html#

head#

body#

Header del reporte#

Content del reporte#

Filtros#

Elementos de representación#

Librerías#

Estructura js#

Variables globales y métodos#

Función window.onload#

Función unHideReportElements#

Función loadDemoData#

Función setDate#

Función get_catalog#

Función runFirstElement#

Función getFirstElement#

Función getDrawTable#

Función getDrawGauge#

Estructura data.js#

Estructura CSS#

Función `window.onload`#

Función `unHideReportElements`#

Función `loadDemoData`#

Función `setDate`#

Función `get_catalog`#

Función `runFirstElement`#

Función `getFirstElement`#

Función `getDrawTable`#

Función `getDrawGauge`#