Pular para o conteúdo

ScoreMeter

  • Angular: mds-score-meter
  • CSS/HTML (mds-styles): disponível
  • Figma: ❌
  • Tipo: Componente Angular

O ScoreMeter é um indicador de medidor de pontuação (CSAT/Satisfação) que exibe visualmente um valor dentro de uma escala de 0 a 100. Ele utiliza cores, ícones e rótulos semânticos para classificar níveis de satisfação, qualidade ou desempenho. ![image]((hosted image)) ![image]((hosted image))


Para manter a consistência entre os módulos, sugere-se a escala de 5 níveis (mais precisa):

  1. Crítico (Vermelho): Desempenho muito abaixo do esperado.
  2. Ruim (Laranja): Necessita de melhorias imediatas.
  3. Regular (Amarelo): Atende aos requisitos mínimos, mas com ressalvas.
  4. Bom (Verde Claro): Desempenho satisfatório e dentro da meta.
  5. Excelente (Verde Escuro): Supera as expectativas de qualidade.

  • Indicador de Valor (Pin): O marcador numérico deve flutuar abaixo da barra, apontando exatamente para a posição do valor na escala.
  • Cores Semânticas: A cor do rótulo, do ícone e do marcador deve ser idêntica à cor da faixa onde o valor se encontra.
  • Ícones de Sentimento: Utilize ícones de expressão (emojis ou faces lineares) para reforçar a classificação qualitativa.
  • Vá Direto ao Ponto: Os rótulos das faixas devem ser palavras únicas ou expressões curtíssimas.
    • Certo: Excelente ou Precisa de melhoria