ScoreMeter
Tipo: Componente Angular
- DesignersFigmaAinda não disponível
- Devs · HTML/CSSmds-stylesAinda não disponível
- Devs · Angularmds-angular Storybook com inputs e outputs
Definição Funcional
Seção intitulada “Definição Funcional”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. ) )
Diretrizes de Classificação
Seção intitulada “Diretrizes de Classificação”Para manter a consistência entre os módulos, sugere-se a escala de 5 níveis (mais precisa):
- Crítico (Vermelho): Desempenho muito abaixo do esperado.
- Ruim (Laranja): Necessita de melhorias imediatas.
- Regular (Amarelo): Atende aos requisitos mínimos, mas com ressalvas.
- Bom (Verde Claro): Desempenho satisfatório e dentro da meta.
- Excelente (Verde Escuro): Supera as expectativas de qualidade.
** Diretrizes de Comportamento**
Seção intitulada “** Diretrizes de Comportamento**”- 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
Para desenvolvedores
Seção intitulada “Para desenvolvedores”Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.
Angular (mds-angular)
Seção intitulada “Angular (mds-angular)”Seletor
Seção intitulada “Seletor”mds-score-meter
Exibição de Medidor de Pontuação, ex: CSAT
| Input | Tipo | Padrão | Descrição |
|---|---|---|---|
className |
string |
'' |
Classe CSS customizada adicionada ao host |
value |
number |
0 |
Valor da pontuação entre 0-100 |
type |
MdsScoreMeterTypes |
'default' |
Tipo da exibição do medidor |
animated |
boolean |
false |
Habilita animação ao exibir o valor |