Elementos do Widget

Os elementos são utilizados para exibir os dados para os usuários. A plataforma possúi uma bibliotema com vários tipos de elementos que devem ser usados de acordo com o dado e o objetivo visual correspondente.

INFO

O atributo de classe (class) deve utilizar a biblioteca Tailwind CSS como referência.

Já para definir o valor do atributo estilo (style) deve utilizar a notação padrão de CSS.

Texto

• Tipo: text
• Atributos: class | style | data | height | width | size | color | icon | iconColor | iconSize | lines | hideCondition | tooltip

Utilizado pra exibir informações de texto.

{
  "data": "Valor Total Investido",
  "size": "24px",
  "style": "font-weight: 500; line-height: 26px;",
  "type": "text",
  "color": "#263F90",
  "icon": "mdi-star",
  "iconSize": "20px",
  "iconColor": "#ADD8E6"
}

Caso seja necessário definir a quantidade máxima de linhas para um elemento de texto basta usar o atributo lines que a plataforma vai limitar a essa quantidade de linhas e incluir reticências no final do texto.

Ícone

• Tipo: icon
• Atributos: class | style | data | height | width | size | color | hideCondition | tooltip

Utilizado para exibir um icone

{
  "data": "mdi-star",
  "size": 60,
  "style": "padding: 10px;",
  "type": "icon",
  "color": "#FF00FF"
}

Bloco

• Tipo: block
• Atributos: class | style | height | width | color | hideCondition | tooltip

Utilizado quando é necessário criar uma barra horizontal ou vertical ou algum separador.

{
  "color": "#FF00FF",
  "height": "5px",
  "type": "block",
  "width": "100%"
}

Número

• Tipo: number
• Atributos: class | style | data | height | width | size | color | pattern | locale | hideCondition | tooltip

Utilizado pra exibir informações numéricas.

{
  "data": "https://placehold.co/400",
  "height": "85px",
  "type": "image"
}

Chip

• Tipo: chip
• Atributos: class | style | data | height | width | size | color | bg | hoverColor | hoverBg | icon | iconColor | hideCondition | tooltip

Utilizado quando é necessário exibir um tag.

{
  "data": "Esporte",
  "icon": "mdi-run-fast",
  "bg": "#ff00ff",
  "color": "#ffffff",
  "tooltip": {
    "label": "Classificação Principal"
  },
  "type": "chip"
}

Caso seja definido no atributo data um objeto com os atributos o proprio componente renderiza da forma correta e não é necessário passar nenhum outro atributo além do type e data.

{
  "data": "${ds.category}",
  "type": "chip"
}

Para um cenário onde você tenha o código de uma opção de um dataset e queira pegar as configurações para utilizar no chip, basta utilizar no data a função datasetResult() passando o código da fonte de dados e o código da opção que deseja.

{
  "data": "${datasetResult('statusprojeto',ds.data.custom.status)}",
  "type": "chip"
}

Outra funcionalidade do chip é renderizar vários itens caso seja definido o atributo data como sendo um array de configurações de chip.

{
  "data": "${ds.cidades}",
  "style": "display: grid; grid-template-columns: repeat(${ds?.cidades.length}, max-content); overflow-x: auto; gap: 10px;"
  "type": "chip"
}

Avaliação

• Tipo: rate
• Atributos: class | style | data | height | width | size | color | stars | increment | hideCondition | tooltip

Utilizado quando é necessário exibir uma pontuação exibindo estrelas.

{
  "data": 3,
  "height": "85px",
  "type": "rate"
}

Imagem

• Tipo: image
• Atributos: class | style | data | height | width | mask | hideCondition | tooltip

Utilizado quando é necessário exibir uma imagem.

{
  "data": "https://placehold.co/400",
  "height": "85px",
  "type": "image"
}

Para tratar imagens que estão associadas a um documento devemos usar a função documentURL() que facilita a construção da URL correta para acessar a imagem.

{
  "data": "${documentURL(ds.data?.capa)}",
  "type": "image",
  "width": "100%"
}

INFO

Lembre-se que devemos sempre utilizar a variável: ${params.hrz.settings.storePublicURL} para definir o caminho da imagem. Assim quando migrarmos os widgets entre ambientes não haverá nenhum problema.

{
  "data": "${params.hrz.settings.storePublicURL}assets/widget/dash/files/sol.png",
  "style": "position: absolute; top: 10px; right: -120px;",
  "type": "image"
}

HTML

• Tipo: html
• Atributos: class | style | data | height | width | hideCondition

Utilizado para rederizar um código como sendo um HTML.

{
  "data": "<div>Lorem Ipsum</div>",
  "type": "html"
}

Muitas das vezes o html que estamos querendo construir é complexo e tem a necessidade de acessar os dados dinâmicos, para isso podemos utilizar a funcionalidade de scripts disponível no Widget.

{
  "data": "${js(scripts.kpi)}",
  "type": "html"
}

Para acessar saber mais sobre como configurar os scripts para gerar código HTML clique aqui.

Gráficos

• Tipo: chart
• Atributos: class | style | data | height | width | script | version | hideCondition

Utilizado para rederizar um gráfico.

{
  "data": "${ds.chart}",
  "type": "chart",
  "script": "pieChart",
  "version": "v5"
}

O atributo script define qual será o script que vai ser utilizado para configurar o gráfico. Se esse atributo não for definido o sistema vai tentar encontrar um script com o código igual a "chart" para utilizar.

Para acessar saber mais sobre como configurar os scripts para gerar os Gráficos clique aqui.