Strategic Matrix

Matriz estrategica de programas x objetivos com barras de contribuicao percentual e headers rotacionados. Ideal para dashboards de planejamento estrategico, mostrando como cada programa contribui para cada objetivo institucional.

components/strategic-matrix.cssAbrir no Figma

Uso

Quando e como utilizar a Matriz Estrategica para visualizar contribuicoes de programas em objetivos.

• Programas x Objetivos — Visualize a contribuicao percentual de cada programa para cada objetivo estrategico.
• Classificacao por Cor — Identifique rapidamente contribuicoes altas (verde), medias (amarelo) e baixas (vermelho).
• HTML Estatico — Monte a tabela manualmente com classes CSS para barras e modificadores, sem JavaScript.
• DataLoader + Factory — Carregue dados de CSV e renderize automaticamente via renderStrategicMatrix().

Exemplos

Veja abaixo o exemplo interativo da Matriz Estrategica com dados de programas, incluindo dark mode e estado vazio.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Container	.strategic-matrix	Wrapper principal, width 100%
Titulo	.strategic-matrix__title	Heading opcional, Space Grotesk 18px w600
Scroll	.strategic-matrix__scroll-wrapper	Overflow-x auto com scrollbar customizada (6px)
Tabela	.strategic-matrix__table	Tabela com border-collapse e min-width 800px
Cabecalho	.strategic-matrix__header	Celulas th com fundo neutro, texto 12px
Header rotacionado	.strategic-matrix__header--rotated	Header com writing-mode vertical-lr, altura 160px
Label da linha	.strategic-matrix__row-label	Nome do programa, sticky left com z-index 1
Celula	.strategic-matrix__cell	Celula contendo wrapper de barra
Wrapper da barra	.strategic-matrix__bar-wrapper	Fundo neutro com border-radius 4px, height 20px
Barra	.strategic-matrix__bar	Preenchimento proporcional ao percentual
Valor	.strategic-matrix__bar-value	Texto do percentual (12px, alinhado a direita)
Vazio	.strategic-matrix__empty	Estado vazio com borda dashed e padding 48px

Classificacao de Contribuicao

A matriz classifica cada contribuicao em 3 niveis com cores distintas baseadas no percentual.

A classificacao e aplicada automaticamente pelo factory com base no valor percentual de cada celula. Voce tambem pode aplicar manualmente via modificadores CSS.

Nivel	Modificador	Faixa	Cor (light)	Descricao
Alta	--high	> 70%	Verde (#22c55e)	Contribuicao significativa para o objetivo
Media	--medium	40–70%	Amarelo (#eab308)	Contribuicao moderada, atencao necessaria
Baixa	--low	< 40%	Vermelho (#ef4444)	Contribuicao insuficiente, acao corretiva

A formula para determinar o nivel:

function classifyContribution(value) {
  if (value > 70) return 'high';
  if (value >= 40) return 'medium';
  return 'low';
}

Headers Rotacionados

Os headers de objetivos sao rotacionados verticalmente para acomodar textos longos sem alargar as colunas.

A rotacao e feita via writing-mode: vertical-lr combinado com transform: rotate(180deg) para que o texto fique legivel de baixo para cima. Isso permite colunas estreitas (80–100px) mesmo com nomes longos de objetivos.

.strategic-matrix__header--rotated {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  height: 160px;
  white-space: nowrap;
  font-size: 12px;
  text-align: left;
  padding: 8px 4px;
}

A altura de 160px garante espaco suficiente para textos de ate ~30 caracteres. Para textos mais longos, considere abreviacoes ou tooltips.

Propriedades

Classes CSS disponiveis para configurar a Matriz Estrategica.

Propriedade	Tipo	Default	Descrição
.strategic-matrix	classe	—	Container principal da matriz estrategica (width 100%).
.strategic-matrix__title	classe	—	Titulo da matriz (18px w600, font-heading).
.strategic-matrix__scroll-wrapper	classe	—	Wrapper com overflow-x auto para scroll horizontal.
.strategic-matrix__table	classe	—	Tabela HTML com border-collapse e min-width 800px.
.strategic-matrix__header	classe	—	Celulas de cabecalho (th) com fundo neutro e texto 12px.
.strategic-matrix__header--rotated	classe	—	Modificador para headers rotacionados (writing-mode: vertical-lr).
.strategic-matrix__row-label	classe	—	Primeira coluna com nome do programa, position sticky left.
.strategic-matrix__cell	classe	—	Celula de dados contendo a barra de contribuicao.
.strategic-matrix__bar-wrapper	classe	—	Container da barra com fundo neutro e border-radius.
.strategic-matrix__bar	classe	—	Barra de preenchimento com largura proporcional ao percentual.
.strategic-matrix__bar-value	classe	—	Texto do valor percentual exibido ao lado da barra.
.strategic-matrix__bar--high	classe	—	Modificador de contribuicao alta (>70%, verde).
.strategic-matrix__bar--medium	classe	—	Modificador de contribuicao media (40–70%, amarelo).
.strategic-matrix__bar--low	classe	—	Modificador de contribuicao baixa (<40%, vermelho).
.strategic-matrix__empty	classe	—	Estado vazio com borda dashed e texto centralizado.

Codigo

Snippets prontos para copiar e usar no seu projeto.

HTML estatico

<div class="strategic-matrix">
  <h3 class="strategic-matrix__title">Matriz Estrategica — PPA 2026</h3>
  <div class="strategic-matrix__scroll-wrapper">
    <table class="strategic-matrix__table">
      <thead>
        <tr>
          <th class="strategic-matrix__header">Programa</th>
          <th class="strategic-matrix__header strategic-matrix__header--rotated">Reducao da Pobreza</th>
          <th class="strategic-matrix__header strategic-matrix__header--rotated">Saude Universal</th>
          <th class="strategic-matrix__header strategic-matrix__header--rotated">Educacao de Qualidade</th>
          <th class="strategic-matrix__header strategic-matrix__header--rotated">Sustentabilidade</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="strategic-matrix__row-label">Bolsa Familia</td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--high" style="width: 92%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">92%</span>
          </td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--medium" style="width: 45%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">45%</span>
          </td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--medium" style="width: 60%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">60%</span>
          </td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--low" style="width: 15%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">15%</span>
          </td>
        </tr>
        <tr>
          <td class="strategic-matrix__row-label">Mais Saude</td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--low" style="width: 30%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">30%</span>
          </td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--high" style="width: 88%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">88%</span>
          </td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--low" style="width: 25%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">25%</span>
          </td>
          <td class="strategic-matrix__cell">
            <div class="strategic-matrix__bar-wrapper">
              <div class="strategic-matrix__bar strategic-matrix__bar--medium" style="width: 50%;"></div>
            </div>
            <span class="strategic-matrix__bar-value">50%</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

DataLoader + Factory

<div id="matrix-csv"></div>

<script type="module">
  import { DataLoader } from '../core/data-loader.js';
  import { renderStrategicMatrix } from '../components/strategic-matrix.js';

  const data = await DataLoader.load({
    endpoint: '/data/matrix/programas-objetivos.csv',
    csvOptions: { delimiter: ';' }
  });

  renderStrategicMatrix(
    document.getElementById('matrix-csv'),
    data,
    { rowLabel: 'programa' },
    { title: 'Matriz Estrategica — PPA 2026', rotatedHeaders: true }
  );
</script>

Auto-init via data attributes

<div data-arenito="strategic-matrix"
     data-endpoint="/data/matrix/programas-objetivos.csv"
     data-format="csv"
     data-delimiter=";"
     data-title="Matriz Estrategica — PPA 2026"
     data-mapping='{"rowLabel":"programa"}'
     data-rotated-headers="true">
</div>

Estado vazio

<div class="strategic-matrix">
  <h3 class="strategic-matrix__title">Matriz Estrategica</h3>
  <div class="strategic-matrix__empty">Nenhum dado encontrado para os filtros selecionados.</div>
</div>

Fonte de Dados

A Matriz Estrategica aceita dados de CSV com programas nas linhas e objetivos nas colunas. Para CSVs brasileiros, atencao ao delimitador.

O DataLoader suporta CSV como formato de entrada. Arquivos CSV gerados por ferramentas brasileiras (Excel pt-BR, LibreOffice com locale pt_BR) usam ponto-e-virgula (;) como delimitador, pois a virgula e usada como separador decimal.

Exemplo de CSV compativel:

programa;Reducao da Pobreza;Saude Universal;Educacao de Qualidade;Sustentabilidade
Bolsa Familia;92;45;60;15
Mais Saude;30;88;25;50
Educacao para Todos;55;20;95;35
Infraestrutura Verde;10;15;40;85

Para carregar esse arquivo, passe delimiter: ';' nas opcoes do CSV:

const data = await DataLoader.load({
  endpoint: '/data/matrix/programas-objetivos.csv',
  csvOptions: { delimiter: ';' }
});

A primeira coluna (programa) e usada como label das linhas. As demais colunas sao tratadas como objetivos, e seus valores numericos (0–100) determinam a largura da barra e a classificacao de cor (high/medium/low).

Se o CSV usar virgula como delimitador (padrao internacional), omita a opcao csvOptions ou passe delimiter: ','.

Dark Mode

A Matriz Estrategica adapta automaticamente suas cores para o dark mode via classe .dark no body.

No dark mode, as cores das barras de contribuicao sao substituidas por versoes com opacidade reduzida usando rgba(). Isso evita que cores vibrantes dominem a interface em fundo escuro e mantem o contraste legivel.

Nivel	Light	Dark
High	#22c55e (verde solido)	rgba(34, 197, 94, 0.35)
Medium	#eab308 (amarelo solido)	rgba(234, 179, 8, 0.35)
Low	#ef4444 (vermelho solido)	rgba(239, 68, 68, 0.35)

O fundo do .strategic-matrix__bar-wrapper muda de var(--neutral-100) para var(--neutral-700) no dark mode, mantendo contraste adequado para as barras. Os headers rotacionados e os labels de linha herdam automaticamente os tokens semanticos de superficie e nao precisam de ajuste manual.

Versão0.2.0

Última atualização14 mar 2026

Caminhosrc/components/strategic-matrix.css