Indicadores - Cards (new)

Cards de indicadores podem ser adicionados em algumas partes do sistema, existem também tipos diferentes de cards, nessa doc explicaremos como e onde esses cards podem ser adicionados e todos os seus tipos e personalizações.

Locais dos Indicadores

Home Painel CRUD

Tipos de card

Os cards do tipo: mean, sum, panel e também o padrão (sem type) compartilham de uma mesma estrutura de configuração. Cada um deles vai possuir 4 campos que identificamos por esses termos.

O que apresenta uma diferença visual é o tipo progress. Esse além dos 4 campos semelhantes aos outros tipos teremos mais 3 campos que são:

Todos são configurados por JSON e quando há necessidade de uma consulta no banco de dados é usado o NFS Query Builder.

Propriedades do card

O JSON que armazena as configurações espera as seguintes propriedades:

displayName

Define o nome que aparecerá acima dos quadros fazendo o detalhamento deles.

{
    "displayName": "Indicadores (Momento atual)"
}

Card padrão

O modelo de card padrão pode não ter um type definido ou ser dos tipos "sum" ou "mean".

Exemplo:

{
  "totalOS": {
    "label": {
			"text": "OS criadas em 2018"
		},
    "color": "red",
    "icon": {
			"class": "fa-signal"
		},
    "display": "[result]",
    "type": "",
    "reload": true,
    "queryBuilder": {
      "totalOS": {
        "select": [
          "count(os.seq_db) result"
        ],
        "from": "os os",
        "where": [
          "os.INS_DH > '2018-01-01 00:00:00'"
        ]
      }
    }
  }
}

• totalOS: Será o nome do indicador e não pode haver dois iguais.
• label
  • text: Representa uma descrição que será exibida no indicador.
• color : Cor do indicador. Se houver configurado a propriedade card esse campo não é necessário.
• icon
  • class : Nome do ícone que será exibido. Por padrão o ícone é exibido como uma marca d'agua no canto inferior esquerdo do car.
• type: Os tipos suportados são: mean (média) e sum (soma). Caso deseje somente exibir um determinado valor diretamente não adicione a propriedade type ao objeto e retorne um único valor.
  • mean: A query deve retornar mais de um valor e será feita a sua soma e divido pela quantidade de itens.
  • sum: É feita a soma de todos os valores que são retornados na queryBuilder.
• display: Como será exibido o resultado, caso o resulta do query seja um valor a ser exibido em porcentagem ficaria [result] %.
• decimalPlace: Quantidade de casas após a vírgula.
• queryBuilder: (Exclusivo do Indicador do cadastro): Uma query que vai retornar o valor que deseja ser exibido.
• reload: Pode ser true ou false, se não for passado a chave reload é considerado por padrão false.

Card type panel

O tipo panel é um indicador com comportamento estático que pode ou não receber uma url. Sem a chave "indicatorUrl" o indicador fica sem interação.

"label": ...
"indicatorUrl": "https://google.com",
"icon": ...

Sem nenhum estilo sua aparencia padrão será igual ao padrão.

Card type progress

O tipo progress habilita novos recursos ao card, mas precisa receber novos itens para que seja exibido corretamente.

Na query precisaremos receber a porcentagem e o valor correspondente para montar uma barra de progresso preenchida com a porcentagem indicada.

No JSON, além da propriedade "type": "progress" vamos adicionar a propriedade "porcentage" que irá receber um objeto contendo um "title": "OS em Andamento" que conterá a descrição do subtítulo.

Exemplo:

{
  "osAnd": {
    "label": {
			"text": "OS Abertas nos últimos 90 dias"
	},
    "color": "yellow-gold",
    "icon": {
    	"class": "fa-file"
	},
    "type": "progress",
    "porcentage": {
      "title": "OS em Andamento"
    },
    "display": "[result]",
    "queryBuilder": {
      "osAnd": {
        "select": [
          "count(os.seq_db) porcentage",
          "180 value"
        ],
        "from": "os os",
        "inner_join": [
          [
            "os",
            "status_os",
            "st",
            "st.SEQ_DB = os.STATUS_OS_SEQ_DB"
          ]
        ],
        "where": [
          "os.INS_DH > date_sub(now(), interval 90 DAY)",
          "st.DESCRICAO  = 'Andamento'"
        ]
      }
    }
  }

Sem nenhum estilo sua aparencia padrão será assim:

Personalização & estilos

Algumas propriedades aceitam receber estilos CSS em seus componentes, podemos passar esses estilos da seguinte forma no nosso objeto JSON. Essas propriedades passam a receber um objeto com essas instruções.

Os estilos serão aplicados a partir do estilo padrão.

card: Recebe a propriedade style e controla os estilos do container. Com a inclusão dessa propriedade a propriedade color do objeto JSON passa a não ter efeito:

"card": {
	"style": {
		"cursor": "pointer",
		"background-color": "#000",
		"border": "2px solid limegreen"
	}
},

label: Recebe a propriedade style e pode receber estilos conforme exemplo:

"label": {
	"text": "OS's Encerradas e Integradas",
	"style": {
		"text-decoration": "none",
		"color": "limegreen",
		"font-weight": "bold",
		"font-family": "\"Open Sans\", sans-serif"          
	}      
},

number: Recebe a propriedade style e pode receber estilos no número principal do card:

"number": {
	"style": {
		"font-size": "2.5em",
		"text-align": "right",
		"color": "#e43a45",
		"font-family": "\"Open Sans\", sans-serif",
		"font-weight": "bold"
	}
},

icon: Recebe a propriedade style e pode receber estilos no icone, e também propriedades de posicionamento.

"icon":{
	"style": {
		"color": "limegreen",
		"margin-top": "-28px",
		"margin-left": "70px"
	},
	"class": "fa-folder-open-o"
},

Resultado da configuração:

Estilos card progress

Como já vimos o card do tipo progress possui elementos adicionais em sua composição, listaremos aqui como podemos aplicar também a esses elementos estilos CSS.

progressBar: Divisão que é usada para ser o fundo da barra de progresso.

"progressBar": {
	"style": {
		"background-color": "black"
	}
},

statusProgressBar: Barra que irá sendo preenchida conforme porcentagem.

"statusProgressBar": {
	"style": {
		"background-color": "green"
	}
},

statusText: Texto localizado abaixo da barra de progresso.

"statusText": {
	"style": {
		"color": "#000"
	}
},

Resultado da configuração:

Intervalo de Atualização do Card

O card atualiza a cada minuto por padrão, caso deseja alterar esse valor basta adicionar a chave interval no json, seu valor é em milisegundos, lembrando que cada segundo corresponde a mil milisegundos.

1s = 1000ms

Casos de uso

No caso abaixo a atualização está para ser feita a cada 2 minutos.

{
  "osIntegracao": {
    "label": "OS's com Faturamento liberado",
    "color": "",
    "icon": "fa fa-signal",
    "display": "[result]",
    "interval" : "120000",
    "decimalPlace": "2",
    "queryBuilder": {
      "osIntegracao": {
        "select": [
          "count(os.seq_db) result"
        ],
        "from": "os os",
        "inner_join": [
          [
            "os",
            "status_os",
            "st",
            "st.SEQ_DB = os.STATUS_OS_SEQ_DB"
          ],
          [
            "os",
            "cliente",
            "c",
            "c.SEQ_DB = os.CLIENTE_SEQ_DB"
          ]
        ],
        "where": [
          "st.DESCRICAO in ('Liberada Faturamento')"
        ]
      }
    }
  }
}

Definir Colunas na Tabela de Indicadores

Criando a Tabela

Para criar a tabela de indicadores, é necessário incluir o bloco queryBuilderData. Abaixo está um exemplo completo de definição:

"OSProspeccao": {
    "label": "OT's Programadas (Prospección)",
    "color": "green-jungle",
    "icon": "fa fa-calendar",
    "display": "[result]",
    "queryBuilder": {
        "OSProspeccao": {
            "select": [
                "count(distinct os.CODIGO) result"
            ],
            "from": "os os",
            "inner_join": [
                ["os", "agendamento_servico", "ag", "ag.OS_SEQ_DB = os.SEQ_DB"],
                ["ag", "agendamento_servico_detalhe", "ags", "ags.AGENDAMENTO_SERVICO_SEQ_DB = ag.SEQ_DB"],
                ["ags", "funcionario", "fun", "fun.SEQ_DB = ags.FUNCIONARIO_SEQ_DB"],
                ["ag", "cliente", "cli", "cli.SEQ_DB = ag.CLIENTE_SEQ_DB"]
            ],
            "left_join": [
                ["ag", "apontamento_prospeccao_nc", "apn", "apn.SEQ_DB = ag.APONTAMENTO_PROSPECCAO_NC_SEQ_DB"]
            ],
            "where": [
                "ag.FLAG_PROSPECCAO = 1"
            ]
        }
    },
    "queryBuilderData": {
        "OSProspeccao": {
            "select": [
                "os.SEQ_DB seq_db_os",
                "os.CODIGO 'Código OT'",
                "DATE_FORMAT(os.DATA_ABERTURA, '%d/%m/%Y') 'Fecha Apertura'",
                "CONCAT(fun.CRACHA,'::',fun.NOME) 'Empleado'",
                "apn.SEQ_DB_DEVICE 'Número Checklist'",
                "CONCAT(eqp.CHASSI,'::',eqp.DESCRICAO) 'Equipo'",
                "cli.DESCRICAO 'Cliente'",
                "fun.SEQ_DB func_seq_db"
            ],
            "from": "os os",
            "inner_join": [
                ["os", "agendamento_servico", "ag", "ag.OS_SEQ_DB = os.SEQ_DB"],
                ["ag", "agendamento_servico_detalhe", "ags", "ags.AGENDAMENTO_SERVICO_SEQ_DB = ag.SEQ_DB"],
                ["ags", "funcionario", "fun", "fun.SEQ_DB = ags.FUNCIONARIO_SEQ_DB"],
                ["ag", "cliente", "cli", "cli.SEQ_DB = ag.CLIENTE_SEQ_DB"],
                ["os", "equipamento", "eqp", "eqp.SEQ_DB = os.EQUIPAMENTO_SEQ_DB"]
            ],
            "left_join": [
                ["ag", "apontamento_prospeccao_nc", "apn", "apn.SEQ_DB = ag.APONTAMENTO_PROSPECCAO_NC_SEQ_DB"]
            ],
            "where": [
                "ag.FLAG_PROSPECCAO = 1"
            ],
            "group_by": [
                ["os.SEQ_DB"]
            ],
            "order_by": [
                ["os.SEQ_DB"]
            ]
        }
    },
    "report": {
        "displayColumns": [
            "Código OT",
            "Fecha Apertura",
            "Empleado",
            "Número Checklist",
            "Equipo",
            "Cliente"
        ],
        "links": {
            "Código OT": "/t/os/edit/%seq_db_os%"
        }
    }
}

Definindo as Colunas

Para exibir as colunas na tabela de indicadores:

1. Inclua os campos desejados na cláusula select do queryBuilderData.
2. Utilize alias para nomear as colunas conforme devem aparecer na visualização. Por exemplo:

   DATE_FORMAT(os.DATA_ABERTURA, '%d/%m/%Y') 'Fecha Apertura'

Adicione o nome da coluna no array displayColumns.

Observação: Para nomes com espaços, utilize aspas simples no alias.