Data de Publicação

08/09/2026

Data de Modificação

07/09/2026

Plano de Desenvolvimento: Dashboard Visual de Blocos e LEGO® (legos-graficos.html)

Este documento descreve o plano arquitetural, de métricas e de interface para a criação da nova página Dashboard Visual de Blocos e LEGO® (pessoal/compras/legos-graficos.qmd).

O objetivo é transformar os dados tabulares de compras em uma experiência analítica visual, atraente e acessível para qualquer pessoa entender a coleção, destacando curiosidades como o custo por quilo, a concentração de gastos nos sets mais caros (Top 15%) e a situação física de uso dos sets (montados, presentes, aguardando).

1. Visão Geral e Navegação

  • URL da Página: http://localhost:3062/pessoal/compras/legos-graficos.html
  • Arquivo Fonte: pessoal/compras/legos-graficos.qmd
  • Integração de Navegação:
    • Botão de navegação cruzada em legos.qmd: 📊 Alternar para Painel Gráfico e Estatísticas
    • Botão de retorno em legos-graficos.qmd: 📋 Ver Tabela Completa e Detalhes de Pedidos
graph LR
    A["Controle Geral (index.html)"] <--> B["Tabela de LEGOs (legos.html)"]
    B <--> C["Dashboard Gráfico (legos-graficos.html)"]
    C --> D["Páginas Individuais dos Sets (/blocos-de-montar/*.html)"]

2. Estrutura e Seções do Dashboard

Seção 1: Indicadores Gerais (Hero KPI Cards)

Cards modernos com gradientes suaves e números de alto impacto: 1. Total de Modelos Únicos: Contagem de sets distintos. 2. Volume Total de Blocos: Total de peças somadas (ex: 120.000+ peças). 3. Massa Total de Plástico: Soma de todos os pesos convertida em quilogramas (ex: 148,5 kg de blocos). 4. Custo Médio por Quilo: \(\text{R\$} / \text{kg}\) médio pago na coleção. 5. Custo Médio por Peça: Centavos por peça (\(\text{R\$} / \text{peça}\)). 6. Economia Estimada vs Preço Oficial: Comparativo entre o total pago e o valor oficial LEGO (MSRP/Brasil).

Seção 2: Análise dos 15% Sets Mais Caros (Princípio de Pareto)

Pergunta respondida: “Quanto do dinheiro investido foi concentrado nos maiores e mais caros sets da coleção?”

  • Cálculo:
    • Ordenação decrescente por Valor_Pago_BRL de cada set.
    • Seleção dos \(15\%\) com maior valor (ex: Titanic, Torre Eiffel, Minas Tirith, Barad-dûr, Avengers Tower, Disney Castle, etc.).
    • Percentual acumulado do investimento absorvido por esse grupo.
  • Gráficos e Visualizações:
    • Gráfico Donut / Sunburst: Comparação da fatia financeira dos 15% mais caros vs os 85% restantes.
    • Ranking Visual Horizontal: Gráfico de barras com os sets mais caros, mostrando o valor pago, o tema e o link direto para a página de cada modelo.

Seção 3: Análise de Eficiência – Custo por Quilo (R$/kg) e Custo por Peça

Pergunta respondida: “Quais compras trouxeram mais plástico por real investido? Quais foram os sets mais densos ou caros proporcionalmente?”

  • **Métrica R\(/kg:**\)\(\text{Preço por Quilo} = \frac{\text{Valor Pago (R\$)}}{\text{Peso (g)} / 1000}\)$
  • **Métrica R\(/Peça:**\)\(\text{Preço por Peça} = \frac{\text{Valor Pago (R\$)}}{\text{Número de Peças}}\)$
  • Visualizações Propostas:
    1. Top 5 “Melhor Custo-Benefício por Peso”: Os sets com menor R$/kg (onde cada real comprou mais gramas de plástico).
    2. Top 5 “Maior Valor por Peso”: Sets de alta densidade de custo (ex: minifiguras raras, peças translúcidas/eletrônicos ou sets muito pequenos).
    3. Scatter Plot Interativo (Preço vs Peso):
      • Eixo X: Peso do Set (kg).
      • Eixo Y: Valor Pago (R$).
      • Tamanho do ponto: Quantidade de Peças.
      • Cor do ponto: Tema (Technic, Icons, Star Wars, etc.).
      • Tooltip: Nome do set, foto, valor, peso e R$/kg.

Seção 4: Segmentação por Status de Uso (Montado, Presente, Aguardando)

Pergunta respondida: “Onde estão esses sets hoje? O que já foi montado na estante? O que virou presente? O que ainda está na caixa?”

  • Categorias Suportadas:
    • 🟢 MONTADO: Sets concluídos e expostos.
    • 🎁 PRESENTE: Sets presenteados para amigos ou familiares.
    • 📦 AGUARDANDO: Sets recebidos aguardando montagem ou novos no catálogo.
    • 🏷️ OUTROS / DESAPEGO: Sets para venda ou troca (se houver).
  • Interface e Filtros:
    • Gráfico de Barras Segmentado ou Donut: Distribuição de peças e valor alocado em cada estado de uso.
    • Abas ou Dropdown Interativo: Tabela simplificada filtrável com busca rápida por status de uso, facilitando ao usuário atualizar suas classificações futuras.

Seção 5: Distribuição por Temas e Linha do Tempo de Aquisição

  • Treemap / Barras por Tema:
    • Concentração de investimento por linha (Technic, Icons, Ideas, Star Wars, Architecture, Art, Harry Potter, etc.).
  • Linha do Tempo (Evolução 2023 - 2026):
    • Gráfico de linha/área mostrando o acúmulo de quilos de blocos e peças ao longo dos meses.

3. Tecnologias e Implementação

Recurso Tecnologia Vantagem
Geração de Página Quarto (.qmd) + Python Integrado ao pipeline existente do Quarto, sem dependência de servidor ativo.
Gráficos Interativos Plotly (plotly.express / graph_objects) 100% responsivo, tooltips ricos com imagens, zoom, seleção interativa de categorias e compatível com dark mode nativo do site.
Tabelas Filtráveis ITables / DataTables JS Ordenação instantânea sem recarregar a página.
CSS e Estilo SCSS do site (theme.scss) Harmonização visual total com a identidade visual do alessiojr.com.

4. Próximos Passos (A Executar Quando Autorizado)

  1. Criação do arquivo: pessoal/compras/legos-graficos.qmd.
  2. Implementação do pipeline de dados em Python: Cálculos de R\(/kg, R\)/peça, Top 15% Pareto e métricas agregadas.
  3. Construção dos gráficos Plotly: Estilizados com o template do site (fundo transparente, paleta elegante).
  4. Adição dos botões de troca rápida em legos.qmd e legos-graficos.qmd.
  5. Renderização local e validação visual via navegador.
De volta ao topo