BuscarCtrl K

Appearance

Extensões

Mapa de Capacidade ​

Tabela de regioes com indicadores de capacidade, demanda, utilizacao e status. Permite visualizar rapidamente quais regioes estao dentro da capacidade, proximas do limite ou sobrecarregadas.

Uso ​

html
<div class="capacity-map">
  <h3 class="capacity-map__title">Capacidade por Regiao</h3>
  <table class="capacity-map__table">
    <thead class="capacity-map__header">
      <tr>
        <th>Regiao</th>
        <th>Fiscais</th>
        <th>Capacidade</th>
        <th>Demanda</th>
        <th>Utilizacao</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="capacity-map__row">
        <td class="capacity-map__row-label">Norte</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">12</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">480</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">320</td>
        <td class="capacity-map__cell">
          <div class="capacity-map__bar-wrapper">
            <div class="capacity-map__bar" style="width: 66%"></div>
            <span class="capacity-map__bar-label">66%</span>
          </div>
        </td>
        <td class="capacity-map__cell">
          <span class="capacity-map__status capacity-map__status--ok">OK</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Exemplos ​

Carregando exemplo...

Anatomia ​

ClasseElementoDescricao
.capacity-mapdivContainer principal do componente
__titleh3Titulo descritivo do mapa
__tabletableTabela que organiza linhas e colunas
__headertheadCabecalho com nomes das colunas
__rowtrLinha representando uma regiao
__row-labeltdNome da regiao na primeira coluna
__celltdCelula generica de dados
__cell--numerictdCelula com valor numerico, alinhada a direita
__bar-wrapperdivContainer que delimita a barra de utilizacao
__bardivPreenchimento colorido proporcional ao percentual
__bar-labelspanTexto com o valor percentual sobre a barra
__statusspanBadge de status da regiao
__status--okspanVariante verde para utilizacao adequada
__status--warningspanVariante amarela para utilizacao proxima do limite
__status--overloadspanVariante vermelha para utilizacao acima do limite
__summarydivRodape com totais consolidados
__emptydivMensagem exibida quando nao ha dados

Classificacao de Status ​

O status de cada regiao e calculado automaticamente com base no percentual de utilizacao:

StatusFaixaCorClasse
OK< 90%Verde__status--ok
Warning90% - 100%Amarelo__status--warning
Overload> 100%Vermelho__status--overload

A cor da barra de utilizacao (__bar) tambem acompanha a classificacao de status, usando os mesmos tons de verde, amarelo e vermelho para reforcar a leitura visual.

html
<!-- OK: utilizacao abaixo de 90% -->
<span class="capacity-map__status capacity-map__status--ok">OK</span>

<!-- Warning: utilizacao entre 90% e 100% -->
<span class="capacity-map__status capacity-map__status--warning">Alerta</span>

<!-- Overload: utilizacao acima de 100% -->
<span class="capacity-map__status capacity-map__status--overload">Sobrecarga</span>

Barras de Utilizacao ​

As barras representam visualmente o percentual de utilizacao de cada regiao. O preenchimento e controlado via width inline no elemento __bar.

html
<div class="capacity-map__bar-wrapper">
  <div class="capacity-map__bar" style="width: 66%"></div>
  <span class="capacity-map__bar-label">66%</span>
</div>
  • A largura do __bar deve ser definida como porcentagem (ex.: width: 66%).
  • Valores acima de 100% sao limitados visualmente a 100% no CSS, mas o rotulo exibe o valor real.
  • A cor do preenchimento varia conforme a faixa de status (verde, amarelo, vermelho).

Propriedades ​

PropriedadeTipoDefaultDescrição

Codigo ​

HTML estatico ​

html
<div class="capacity-map">
  <h3 class="capacity-map__title">Capacidade por Regiao</h3>
  <table class="capacity-map__table">
    <thead class="capacity-map__header">
      <tr>
        <th>Regiao</th>
        <th>Fiscais</th>
        <th>Capacidade</th>
        <th>Demanda</th>
        <th>Utilizacao</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="capacity-map__row">
        <td class="capacity-map__row-label">Norte</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">12</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">480</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">320</td>
        <td class="capacity-map__cell">
          <div class="capacity-map__bar-wrapper">
            <div class="capacity-map__bar" style="width: 66%"></div>
            <span class="capacity-map__bar-label">66%</span>
          </div>
        </td>
        <td class="capacity-map__cell">
          <span class="capacity-map__status capacity-map__status--ok">OK</span>
        </td>
      </tr>
      <tr class="capacity-map__row">
        <td class="capacity-map__row-label">Sudeste</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">25</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">1000</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">950</td>
        <td class="capacity-map__cell">
          <div class="capacity-map__bar-wrapper">
            <div class="capacity-map__bar" style="width: 95%"></div>
            <span class="capacity-map__bar-label">95%</span>
          </div>
        </td>
        <td class="capacity-map__cell">
          <span class="capacity-map__status capacity-map__status--warning">Alerta</span>
        </td>
      </tr>
      <tr class="capacity-map__row">
        <td class="capacity-map__row-label">Sul</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">8</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">320</td>
        <td class="capacity-map__cell capacity-map__cell--numeric">380</td>
        <td class="capacity-map__cell">
          <div class="capacity-map__bar-wrapper">
            <div class="capacity-map__bar" style="width: 100%"></div>
            <span class="capacity-map__bar-label">118%</span>
          </div>
        </td>
        <td class="capacity-map__cell">
          <span class="capacity-map__status capacity-map__status--overload">Sobrecarga</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Com DataLoader ​

html
<div class="capacity-map"
     data-source="/api/capacidade-regioes.csv"
     data-delimiter=";">
  <h3 class="capacity-map__title">Capacidade por Regiao</h3>
  <table class="capacity-map__table">
    <thead class="capacity-map__header">
      <tr>
        <th>Regiao</th>
        <th>Fiscais</th>
        <th>Capacidade</th>
        <th>Demanda</th>
        <th>Utilizacao</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody data-bind="rows">
      <!-- Linhas renderizadas automaticamente -->
    </tbody>
  </table>
</div>

Auto-init ​

html
<div class="capacity-map" data-auto-init="capacity-map"
     data-source="/api/capacidade-regioes.csv"
     data-delimiter=";">
</div>

Com data-auto-init, o componente renderiza o titulo, cabecalho e linhas automaticamente a partir da fonte de dados.

Estado vazio ​

html
<div class="capacity-map">
  <h3 class="capacity-map__title">Capacidade por Regiao</h3>
  <div class="capacity-map__empty">
    Nenhum dado de capacidade disponivel.
  </div>
</div>

Fonte de Dados ​

O componente espera um CSV com delimitador ; e as seguintes colunas:

regiao;fiscais;capacidade;demanda;utilizacao;status
Norte;12;480;320;66;ok
Nordeste;18;720;600;83;ok
Sudeste;25;1000;950;95;warning
Sul;8;320;380;118;overload
Centro-Oeste;10;400;360;90;warning
ColunaTipoDescricao
regiaostringNome da regiao
fiscaisnumberQuantidade de fiscais alocados
capacidadenumberCapacidade total de atendimento
demandanumberDemanda atual de atendimento
utilizacaonumberPercentual de utilizacao (sem o simbolo %)
statusstringClassificacao: ok, warning ou overload

Dark Mode ​

O componente responde automaticamente ao dark mode via [data-theme="dark"] ou prefers-color-scheme: dark.

  • O fundo da tabela e linhas alternam entre tons escuros.
  • As cores de status (verde, amarelo, vermelho) mantem contraste adequado.
  • As barras de utilizacao usam variantes de cor adaptadas ao fundo escuro.
  • Bordas e separadores utilizam tons de cinza mais suaves.
css
/* Exemplo de customizacao no dark mode */
[data-theme="dark"] .capacity-map__table {
  background: var(--color-surface-dark);
}

[data-theme="dark"] .capacity-map__bar {
  opacity: 0.85;
}
Versão0.1.0
Última atualização
Caminho

Design System interno do GALES

IpeWeb