Stats

Apresentação

O componente Stats é responsável por exibir estatísticas e métricas de forma organizada e visualmente atraente. Ele permite criar cards de estatísticas com título, valor, descrição, figura e ações, sendo ideal para dashboards e painéis de controle.

Quando usar

• Para exibir métricas importantes
• Para criar dashboards
• Para mostrar estatísticas de negócio
• Para apresentar KPIs
• Para exibir dados numéricos
• Para criar painéis de controle

Forma básica de uso

import { Stats, Stat } from 'eitri-luminus';

// Estatística básica
<Stats>
  <Stat>
    <Stat.Title>Total de Vendas</Stat.Title>
    <Stat.Value>R$ 25.000</Stat.Value>
    <Stat.Desc>Últimos 30 dias</Stat.Desc>
  </Stat>
</Stats>

// Estatística com figura
<Stats>
  <Stat>
    <Stat.Figure>
      <img src="/icons/sales.svg" alt="Vendas" />
    </Stat.Figure>
    <Stat.Title>Vendas</Stat.Title>
    <Stat.Value>2.500</Stat.Value>
    <Stat.Desc>Unidades vendidas</Stat.Desc>
  </Stat>
</Stats>

// Estatística com ações
<Stats>
  <Stat>
    <Stat.Title>Usuários Ativos</Stat.Title>
    <Stat.Value>1.234</Stat.Value>
    <Stat.Desc>Este mês</Stat.Desc>
    <Stat.Actions>
      <button className="btn btn-sm">Ver detalhes</button>
    </Stat.Actions>
  </Stat>
</Stats>

// Múltiplas estatísticas
<Stats>
  <Stat>
    <Stat.Title>Receita</Stat.Title>
    <Stat.Value>R$ 50.000</Stat.Value>
    <Stat.Desc>Mês atual</Stat.Desc>
  </Stat>
  <Stat>
    <Stat.Title>Despesas</Stat.Title>
    <Stat.Value>R$ 30.000</Stat.Value>
    <Stat.Desc>Mês atual</Stat.Desc>
  </Stat>
  <Stat>
    <Stat.Title>Lucro</Stat.Title>
    <Stat.Value>R$ 20.000</Stat.Value>
    <Stat.Desc>Mês atual</Stat.Desc>
  </Stat>
</Stats>

Propriedades

Stats

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Stat

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o card de estatística
id	string	Identificador único do componente

Stat.Title

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o título
id	string	Identificador único do componente

Stat.Value

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o valor
id	string	Identificador único do componente

Stat.Desc

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para a descrição
id	string	Identificador único do componente

Stat.Figure

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para a figura
id	string	Identificador único do componente

Stat.Actions

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para as ações
id	string	Identificador único do componente

Heranças

O componente Stats e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa classes CSS específicas para cada subcomponente
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Suporta múltiplas estatísticas em um único container
• Ideal para exibição de métricas e KPIs
• Pode ser combinado com outros componentes para criar dashboards complexos
• Suporta figuras e ações para maior interatividade
• Mantém uma estrutura semântica clara para cada elemento