87 lines
3.7 KiB
Markdown
87 lines
3.7 KiB
Markdown
# FightRate — Redesign de gráficos e sistema visual
|
||
|
||
## Objetivo
|
||
|
||
Corrigir a direção visual do FightRate: gráficos profissionais, úteis e interativos; interface menos genérica/card-heavy; design system original e obrigatório para próximas telas.
|
||
|
||
## Problemas atuais
|
||
|
||
- Gráficos aparecem mesmo sem dados úteis.
|
||
- Estados vazios parecem gráficos quebrados/amadores.
|
||
- Vico está subutilizado: pouca interação, pouco contexto visual, sem zoom/scroll claro.
|
||
- UI tem excesso de cards iguais, pouca hierarquia e pouco padrão visual.
|
||
- O aplicativo parece montado por IA, não por um produto esportivo premium.
|
||
|
||
## Decisões
|
||
|
||
- Manter Vico. Pesquisa em 2026-06 mostra Vico como biblioteca Compose/Kotlin madura com suporte a `scrollState` e `zoomState`.
|
||
- Não trocar dependências nesta fase.
|
||
- Não desenhar chart customizado em Canvas.
|
||
- Não renderizar gráfico se houver menos de 2 pontos reais.
|
||
- Se houver poucos dados, mostrar insight/empty state, não eixos vazios.
|
||
- O eixo temporal deve continuar baseado em timestamps reais.
|
||
- O design system passa a ser a fonte visual do app.
|
||
|
||
## Design System: FightRate Combat Lab
|
||
|
||
### Conceito
|
||
|
||
Interface de laboratório de performance para lutas: escura, precisa, atlética, com sensação de equipamento esportivo premium. Menos cartões genéricos, mais painéis editoriais, faixas de dados, chips compactos, e superfícies com função clara.
|
||
|
||
### Tokens principais
|
||
|
||
- Fundo: `#090A0B` — preto quente de OLED.
|
||
- Surface: `#111315` — bloco primário.
|
||
- Surface Elevated: `#181B1E` — módulo de leitura.
|
||
- Ink: `#F6F0E7` — texto principal quente.
|
||
- Muted: `#A79C8F` — texto secundário.
|
||
- Dim: `#6E665D` — metadados.
|
||
- Accent: `#FF6A1A` — FightRate Orange.
|
||
- Amber: `#F6B44B` — atenção.
|
||
- Redline: `#FF3B30` — limite/risco.
|
||
- Cyan: `#48C7D8` — recuperação/ciência.
|
||
- Line: `#2A2E32` — divisores sutis.
|
||
|
||
### Forma
|
||
|
||
- Telas: blocos editoriais com seções claras, não grade de cards repetidos.
|
||
- Painéis principais: radius 28–32 dp, borda hairline, padding 20–24 dp.
|
||
- Métricas pequenas: strips/pills, não cards grandes.
|
||
- Gráfico: painel amplo, prioridade visual máxima, legenda compacta.
|
||
- Empty state: peça editorial com próxima ação, nunca gráfico vazio.
|
||
|
||
### Tipografia
|
||
|
||
- Números grandes, tabulares quando possível.
|
||
- Títulos curtos, fortes, em PT-BR.
|
||
- Corpo pequeno, mas legível. Nada abaixo de 10sp para informação essencial.
|
||
- Evitar muitos pesos/tamanhos diferentes.
|
||
|
||
### Gráficos
|
||
|
||
- Mostrar gráfico somente se `samples.size >= 2` e duração > 0.
|
||
- Para 1 ponto: mostrar leitura única e instrução de continuar medindo.
|
||
- Para 0 pontos: mostrar estado vazio contextual.
|
||
- Linha com espessura alta, cor FightRate Orange, área/ambiente escuro.
|
||
- Scroll/zoom habilitado via Vico quando possível.
|
||
- Controles explícitos de janela/zoom fora do gráfico.
|
||
- Resumo sempre visível: média, pico, mínima, duração, densidade de amostras.
|
||
- Não usar índices como tempo; usar segundos/minutos reais desde o início da janela.
|
||
|
||
## Fatias de implementação
|
||
|
||
1. Consolidar tokens em tema/design system.
|
||
2. Criar componentes visuais base: `FightSection`, `FightMetricStrip`, `FightEmptyState`, `FightChartPanel`.
|
||
3. Atualizar `HeartRateLineChart` para não renderizar vazio e usar zoom/scroll Vico.
|
||
4. Reorganizar Home/Histórico para priorizar gráfico e dados úteis.
|
||
5. Atualizar documentação e roadmap.
|
||
6. Rodar testes/build e gerar APK.
|
||
|
||
## Critérios de sucesso
|
||
|
||
- Nenhum gráfico vazio é renderizado.
|
||
- Gráfico com dados tem zoom/scroll ou controle equivalente claro.
|
||
- Histórico sem dados mostra estado vazio premium.
|
||
- UI usa tokens e componentes do design system.
|
||
- Build final passa com `./gradlew :app:testDebugUnitTest :app:assembleDebug`.
|