Informe Clásico con Iconos y Formato de Columna de Gráfico de Porcentaje

Para este ejemplo vamos a usar los datos de la tabla EBA_DEMO_IR_PROJECTS de la aplicación demo Sample Reporting.

Para los que no tengan acceso a dicha tabla he creado una tabla personalizada con la misma información:

Aquí tienes los scripts:

CREATE TABLE  "KIU_PROYECTOS" 
   (	"ID" NUMBER, 
	"PROYECTO" VARCHAR2(30), 
	"NOMBRE_TAREA" VARCHAR2(255), 
	"FECHA_INICIO" DATE, 
	"FECHA_FIN" DATE, 
	"ESTADO" VARCHAR2(30), 
	"ASIGNADO_A" VARCHAR2(30), 
	"COSTO" NUMBER, 
	"PRESUPUESTO" NUMBER, 
	 CONSTRAINT "KIU_PROYECTOS_PK" PRIMARY KEY ("ID") ENABLE
   )
/
CREATE SEQUENCE   "KIU_PROJECTS_SEQ"  MINVALUE 1 MAXVALUE 9999999999999999999999999999 INCREMENT BY 1 START WITH 1 CACHE 20 NOORDER  NOCYCLE
/
CREATE OR REPLACE TRIGGER  "BI_KIU_PROYECTOS" 
  before insert on "KIU_PROYECTOS"               
  for each row  
begin   
  if :NEW."ID" is null then 
    select "KIU_PROJECTS_SEQ".nextval into :NEW."ID" from sys.dual; 
  end if; 
end; 

/
ALTER TRIGGER  "BI_KIU_PROYECTOS" ENABLE
/

Los datos de la tabla los puedes cargar a través del Taller de SQL usando este archivo.

Creamos una página con una región de tipo Informe Clásico el cual lo llamaremos Proyectos.

En la consulta de Origen colocamos la siguiente consulta SQL:

select   
      proyecto,  
      fecha_inicio,  
      fecha_fin,  
      estado,  
      case estado   
        when 'Open' then 'fa-clock-o is-open'  
        when 'Closed' then 'fa-check-circle is-closed'  
        when 'On-Hold' then 'fa-exclamation-circle is-holding'  
        when 'Pending' then 'fa-exclamation-triangle is-pending'  
      end estado_icono,  
      greatest(0, least((sysdate - fecha_inicio) / ((fecha_fin + 1) - fecha_inicio), 1)) * 100 Progreso,  
        asignado_a
    from KIU_PROYECTOS 
    order by 2  

Podemos ver en nuestra consulta que tenemos la columna ESTADO y además la columna ESTADO_ICONO la cual muestra el icono de open, closed, on-hold o pending según sea la denominación en la columna de ESTADO.

Expandimos las columnas del Informe Clásico, seleccionamos la columna ESTADO y agregamos en la sección de Formato de Columna, la siguiente expresión HTML:

<span class="fa #ESTADO_ICONO#"></span> #ESTADO#  

Con la variable de sustitución #ESTADO_ICONO# estamos colocando el nombre del icono que corresponde.  

Luego ocultamos la columna ESTADO_ICONO del Informe clásico.  

Agregamos unas reglas CSS para dar color a los iconos, para ello desde los atributos de la página colocamos las siguientes CSS en la sección CSS En Línea:

.is-open {  
      color: #ff2d55; }  
      
    .is-holding {  
      color: #ffcc00; }  
      
    .is-pending {  
      color: #ff9500; }  
      
    .is-closed {  
      color: #4cd964; }  

Por el momento vemos nuestro Informe clásico como sigue:

Volvemos al Diseñador de Páginas y seleccionamos la columna PROGRESO y en la sección Identificación seleccionamos en Tipo que sea Gráfico de Porcentaje, de este modo se mostrará una barra de porcentaje que mostrará el progreso del proyecto.

En cabecera colocamos: Progreso

En Apariencia:
– Color de Fondo: #E2ECF8
– Color de primer Plano: #5284C1

Como vemos en la consulta SQL estamos usando la función greatest(). Esta función devuelve el mayor de una o más expresiones. Oracle utiliza la primera expresión para determinar el tipo de retorno. Si la primera expresión es numérica, Oracle determina el argumento con la precedencia numérica más alta, convierte implícitamente los argumentos restantes a ese tipo de datos antes de la comparación y devuelve ese tipo de datos. Si la primera expresión es no numérica, cada expresión después de la primera se convierte implícitamente en el tipo de datos de la primera expresión antes de la comparación.

La comparación de caracteres se basa en los códigos numéricos de los caracteres del conjunto de caracteres de la base de datos y se realiza en cadenas completas tratadas como una secuencia de bytes, en lugar de carácter por carácter. Si el valor devuelto por esta función es datos de caracteres, entonces su tipo de datos es siempre VARCHAR2.

La función least() devuelve el mínimo de la lista de expresiones. Todas las expresiones después de la primera se convierten implícitamente en el tipo de datos de la primera expresión antes de la comparación.

Ahora podemos ver en el informe Clásico la columna progreso como una columna de tipo gráfico de barras.

¡Espero este post sea de utilidad!

¡Hasta Pronto!

Publicado por Ing. Clarisa Maman Orfali

Clarisa es Oracle ACE Director, con más de 27 años de experiencia como desarrolladora, docente, autora y consultora en Tecnologías de la Información. Clarisa es de Argentina que vive y trabaja en Irvine, California, en los Estados Unidos. Ella es autora de los primeros tres libros de Oracle APEX. También es co-fundadora del Grupo de Usuarios de Oracle de Argentina (AROUG) y se ha especializado los últimos 13 años en el desarrollo de aplicaciones web con Oracle Application Express (APEX).

Deja un comentario

A %d blogueros les gusta esto: