OKR Dashboard

Grid de cards com objetivos estrategicos, barras de progresso e key results.

components/okr-dashboard.cssAbrir no Figma

Uso

Quando e como utilizar o componente OKR Dashboard.

Use para visualizar objetivos estrategicos (Objectives) e seus resultados-chave (Key Results) em formato de grid.
Ideal para dashboards de gestao, paineis de acompanhamento trimestral e relatorios de OKR.
Cada card exibe um objetivo com sua barra de progresso geral e a lista de key results individuais.
Os indicadores de saude (success, warning, error) sinalizam visualmente o status de cada objetivo.
Nao recomendado para metricas operacionais simples — prefira componentes de KPI nesses casos.

Exemplos

Demonstracao interativa do OKR Dashboard com diferentes indicadores e progresso.

Carregando exemplo...

Anatomia

Estrutura interna do componente.

Elemento	Classe	Descricao
Container	`.okr-dashboard`	Wrapper principal do dashboard.
Titulo	`.okr-dashboard__title`	Titulo geral do dashboard.
Grid	`.okr-dashboard__grid`	Layout em grid responsivo para os cards.
Card	`.okr-dashboard__card`	Card de um objetivo individual.
Cabecalho	`.okr-dashboard__card-header`	Area superior do card com objetivo e indicador.
Objetivo	`.okr-dashboard__objective`	Texto descritivo do objetivo estrategico.
Indicador	`.okr-dashboard__indicator`	Badge visual de saude do objetivo.
Progresso	`.okr-dashboard__progress`	Container da barra de progresso geral.
Barra	`.okr-dashboard__progress-bar`	Preenchimento da barra de progresso.
Label	`.okr-dashboard__progress-label`	Percentual exibido ao lado da barra.
Lista KR	`.okr-dashboard__kr-list`	Lista dos key results do objetivo.
Key Result	`.okr-dashboard__kr`	Item individual de key result.
Vazio	`.okr-dashboard__empty`	Exibido quando nao existem objetivos.

Indicadores

Mapeamento de saude dos objetivos: success, warning e error.

Os indicadores de saude seguem uma logica baseada no progresso do objetivo em relacao ao tempo decorrido do ciclo:

Indicador	Classe	Condicao	Cor
No caminho	`--success`	Progresso >= esperado para o periodo	Verde
Em risco	`--warning`	Progresso entre 50% e 80% do esperado	Amarelo
Comprometido	`--error`	Progresso < 50% do esperado	Vermelho

Os modificadores --success, --warning e --error se aplicam tanto ao __indicator quanto ao __progress-bar, mantendo coerencia visual entre o badge e a barra de progresso.

css

.okr-dashboard__indicator--success { background: var(--color-success); }
.okr-dashboard__indicator--warning { background: var(--color-warning); }
.okr-dashboard__indicator--error   { background: var(--color-error); }

.okr-dashboard__progress-bar--success { background: var(--color-success); }
.okr-dashboard__progress-bar--warning { background: var(--color-warning); }
.okr-dashboard__progress-bar--error   { background: var(--color-error); }

Propriedades

Classes CSS disponiveis para o componente.

Propriedade	Tipo	Default	Descrição
`.okr-dashboard`	`classe`	—	Container principal do dashboard de OKRs.
`.okr-dashboard__title`	`classe`	—	Titulo do dashboard.
`.okr-dashboard__grid`	`classe`	—	Grid responsivo que organiza os cards.
`.okr-dashboard__card`	`classe`	—	Card individual de um objetivo.
`.okr-dashboard__card-header`	`classe`	—	Cabecalho do card com titulo e indicador.
`.okr-dashboard__objective`	`classe`	—	Texto do objetivo estrategico.
`.okr-dashboard__indicator`	`classe`	—	Indicador visual de saude do objetivo.
`.okr-dashboard__indicator--success`	`classe`	—	Indicador verde — objetivo no caminho.
`.okr-dashboard__indicator--warning`	`classe`	—	Indicador amarelo — objetivo em risco.
`.okr-dashboard__indicator--error`	`classe`	—	Indicador vermelho — objetivo comprometido.
`.okr-dashboard__progress`	`classe`	—	Container da barra de progresso geral do objetivo.
`.okr-dashboard__progress-bar`	`classe`	—	Barra de progresso preenchida.
`.okr-dashboard__progress-bar--success`	`classe`	—	Barra de progresso verde.
`.okr-dashboard__progress-bar--warning`	`classe`	—	Barra de progresso amarela.
`.okr-dashboard__progress-bar--error`	`classe`	—	Barra de progresso vermelha.
`.okr-dashboard__progress-label`	`classe`	—	Label percentual da barra de progresso.
`.okr-dashboard__kr-list`	`classe`	—	Lista de key results dentro do card.
`.okr-dashboard__kr`	`classe`	—	Item individual de key result.
`.okr-dashboard__kr-text`	`classe`	—	Descricao textual do key result.
`.okr-dashboard__kr-progress`	`classe`	—	Container da barra de progresso do key result.
`.okr-dashboard__kr-bar`	`classe`	—	Barra de progresso preenchida do key result.
`.okr-dashboard__kr-value`	`classe`	—	Valor percentual do key result.
`.okr-dashboard__empty`	`classe`	—	Estado vazio quando nao ha objetivos cadastrados.

Codigo

Snippets de implementacao.

HTML estatico

html

<div class="okr-dashboard">
  <h2 class="okr-dashboard__title">OKRs — Q1 2026</h2>
  <div class="okr-dashboard__grid">
    <div class="okr-dashboard__card">
      <div class="okr-dashboard__card-header">
        <h3 class="okr-dashboard__objective">Aumentar a receita recorrente em 30%</h3>
        <span class="okr-dashboard__indicator okr-dashboard__indicator--success"></span>
      </div>
      <div class="okr-dashboard__progress">
        <div class="okr-dashboard__progress-bar okr-dashboard__progress-bar--success" style="width: 72%"></div>
        <span class="okr-dashboard__progress-label">72%</span>
      </div>
      <ul class="okr-dashboard__kr-list">
        <li class="okr-dashboard__kr">
          <span class="okr-dashboard__kr-text">Fechar 15 novos contratos enterprise</span>
          <div class="okr-dashboard__kr-progress">
            <div class="okr-dashboard__kr-bar" style="width: 80%"></div>
          </div>
          <span class="okr-dashboard__kr-value">80%</span>
        </li>
        <li class="okr-dashboard__kr">
          <span class="okr-dashboard__kr-text">Reduzir churn para menos de 3%</span>
          <div class="okr-dashboard__kr-progress">
            <div class="okr-dashboard__kr-bar" style="width: 65%"></div>
          </div>
          <span class="okr-dashboard__kr-value">65%</span>
        </li>
      </ul>
    </div>
    <div class="okr-dashboard__card">
      <div class="okr-dashboard__card-header">
        <h3 class="okr-dashboard__objective">Melhorar NPS para acima de 70</h3>
        <span class="okr-dashboard__indicator okr-dashboard__indicator--warning"></span>
      </div>
      <div class="okr-dashboard__progress">
        <div class="okr-dashboard__progress-bar okr-dashboard__progress-bar--warning" style="width: 45%"></div>
        <span class="okr-dashboard__progress-label">45%</span>
      </div>
      <ul class="okr-dashboard__kr-list">
        <li class="okr-dashboard__kr">
          <span class="okr-dashboard__kr-text">Implementar programa de feedback continuo</span>
          <div class="okr-dashboard__kr-progress">
            <div class="okr-dashboard__kr-bar" style="width: 60%"></div>
          </div>
          <span class="okr-dashboard__kr-value">60%</span>
        </li>
        <li class="okr-dashboard__kr">
          <span class="okr-dashboard__kr-text">Tempo de resposta do suporte < 4h</span>
          <div class="okr-dashboard__kr-progress">
            <div class="okr-dashboard__kr-bar" style="width: 30%"></div>
          </div>
          <span class="okr-dashboard__kr-value">30%</span>
        </li>
      </ul>
    </div>
  </div>
</div>

DataLoader + Factory

html

<script>
  async function loadOkrDashboard(container, url) {
    const response = await fetch(url);
    const data = await response.json();

    const title = document.createElement('h2');
    title.className = 'okr-dashboard__title';
    title.textContent = data.title;
    container.appendChild(title);

    const grid = document.createElement('div');
    grid.className = 'okr-dashboard__grid';

    data.objectives.forEach((obj) => {
      const card = document.createElement('div');
      card.className = 'okr-dashboard__card';

      let krsHtml = obj.keyResults.map((kr) => `
        <li class="okr-dashboard__kr">
          <span class="okr-dashboard__kr-text">${kr.text}</span>
          <div class="okr-dashboard__kr-progress">
            <div class="okr-dashboard__kr-bar" style="width: ${kr.progress}%"></div>
          </div>
          <span class="okr-dashboard__kr-value">${kr.progress}%</span>
        </li>
      `).join('');

      card.innerHTML = `
        <div class="okr-dashboard__card-header">
          <h3 class="okr-dashboard__objective">${obj.objective}</h3>
          <span class="okr-dashboard__indicator okr-dashboard__indicator--${obj.status}"></span>
        </div>
        <div class="okr-dashboard__progress">
          <div class="okr-dashboard__progress-bar okr-dashboard__progress-bar--${obj.status}" style="width: ${obj.progress}%"></div>
          <span class="okr-dashboard__progress-label">${obj.progress}%</span>
        </div>
        <ul class="okr-dashboard__kr-list">${krsHtml}</ul>
      `;
      grid.appendChild(card);
    });

    container.appendChild(grid);
  }
</script>

<div class="okr-dashboard" id="okr-panel"></div>
<script>
  loadOkrDashboard(
    document.getElementById('okr-panel'),
    '/api/okr-dashboard.json'
  );
</script>

Auto-init via data attributes

html

<div class="okr-dashboard"
     data-component="okr-dashboard"
     data-src="/api/okr-dashboard.json">
</div>

<script>
  document.querySelectorAll('[data-component="okr-dashboard"]').forEach((el) => {
    const src = el.dataset.src;

    fetch(src)
      .then((r) => r.json())
      .then((data) => renderOkrDashboard(el, data));
  });
</script>

Estado vazio

html

<div class="okr-dashboard">
  <h2 class="okr-dashboard__title">OKRs — Q1 2026</h2>
  <div class="okr-dashboard__empty">
    <p>Nenhum objetivo cadastrado para este ciclo.</p>
  </div>
</div>

Fonte de Dados

Formato de dados esperado pelo componente.

O OKR Dashboard aceita dados em formato JSON com a seguinte estrutura, incluindo o array keyResults aninhado em cada objetivo:

json

{
  "title": "OKRs — Q1 2026",
  "objectives": [
    {
      "objective": "Aumentar a receita recorrente em 30%",
      "status": "success",
      "progress": 72,
      "keyResults": [
        {
          "text": "Fechar 15 novos contratos enterprise",
          "progress": 80
        },
        {
          "text": "Reduzir churn para menos de 3%",
          "progress": 65
        }
      ]
    },
    {
      "objective": "Melhorar NPS para acima de 70",
      "status": "warning",
      "progress": 45,
      "keyResults": [
        {
          "text": "Implementar programa de feedback continuo",
          "progress": 60
        },
        {
          "text": "Tempo de resposta do suporte < 4h",
          "progress": 30
        }
      ]
    }
  ]
}

Os valores validos para status sao: success, warning e error. O campo progress e um numero de 0 a 100 representando o percentual de conclusao.

Dark Mode

Comportamento do componente no modo escuro.

O OKR Dashboard adapta-se automaticamente ao dark mode via CSS custom properties. Os cards recebem fundo escuro com bordas sutis, as barras de progresso mantem suas cores semanticas (success, warning, error) com luminosidade ajustada, e os textos alternam para tons claros. Nenhuma classe adicional e necessaria — basta que o tema escuro esteja ativo no :root ou no container pai.

OKR Dashboard ​

Uso ​

Exemplos ​

Anatomia ​

Indicadores ​

Propriedades ​

Codigo ​

HTML estatico ​

DataLoader + Factory ​

Auto-init via data attributes ​

Estado vazio ​

Fonte de Dados ​

Dark Mode ​

OKR Dashboard

Uso

Exemplos

Anatomia

Indicadores

Propriedades

Codigo

HTML estatico

DataLoader + Factory

Auto-init via data attributes

Estado vazio

Fonte de Dados

Dark Mode