Come usare
- Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
- Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
- Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/officetuning/skill-library --skill dashboard-layoutPrima di iniziare
- L’installazione non include abbonamenti, quote API o accesso ai file.
- Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.
Layout e sistema visual
Pergunta central
Se eu desenhasse esta página em papel antes de abrir o Power BI, ela ficaria consistente com as outras páginas?
Hierarquia do padrão
- Base 8px + zonas reservadas do Background Builder — fonte de verdade,
não negociável.
- Grid 12 colunas × 9 linhas — convenção subordinada. Troque o número de
colunas ou linhas quando o projeto pedir, desde que a divisão continue múltipla de 8.
O grid não é recurso nativo do Power BI. É convenção de design aplicada pelas posições X/Y/Width/Height, que o visual.json do PBIR persiste em pixels.
Regras
Obrigatório
- Wireframe antes de abrir o Desktop, em canvas 1920×1080.
- Toda largura e altura de célula múltipla de 8.
- Mesmo tipo de visual na mesma célula em todas as páginas (filtros sempre no
mesmo lugar, KPIs sempre na mesma linha).
- Intenção e Cálculo de cada bloco herdados do Painel Visual do Canvas (skill
dashboard-canvas). O wireframe decide onde, não o quê.
Preferir
- Elemento dominante ocupa mais colunas, não necessariamente a linha de cima.
- Anotar o
tabOrderpretendido no wireframe. - Congelar o wireframe com aprovação do stakeholder antes do primeiro visual.
Evitar
- "Montar e ir ajustando" em relatório com mais de 2–3 páginas.
- Tratar o grid como camisa de força (mapa costuma pedir proporção livre).
Grid 12×9
| Conta | Valor | Múltiplo de 8 | |
|---|---|---|---|
| Coluna | 1920 ÷ 12 | 160 px | ✔️ |
| Linha | 1080 ÷ 9 | 120 px | ✔️ |
⚠️ Não use 8 linhas: 1080 ÷ 8 = 135 px, que não é múltiplo de 8.
| Bloco | Colunas | Largura | Uso |
|---|---|---|---|
| 1/4 | 3 | 480 | Cartão de KPI |
| 1/3 | 4 | 640 | Gráfico secundário |
| 1/2 | 6 | 960 | Gráfico principal |
| 2/3 | 8 | 1280 | Protagonista |
| Inteira | 12 | 1920 | Faixa de filtros, mapa |
| Linhas | Altura | Uso |
|---|---|---|
| 1 | 120 | Filtros e título, só sem Background Builder |
| 2–3 | 240 | KPIs |
| 4–9 | 720 | Corpo |
Grid → pixel
x = (coluna_inicial − 1) × 160
y = (linha_inicial − 1) × 120 (+ altura do cabeçalho, com Background Builder)
width = número_de_colunas × 160
height = número_de_linhas × 120Exemplo: KPI em col 1–3, linha 2–3 → x=0, y=120, width=480, height=240.
Confirme o formato exato do bloco de posição no JSON Schema do PBIR antes de editar em lote (skill tmdl-pbir).
Exemplo trabalhado completo (página "Performance Comercial"), fluxo do Canvas ao visual construído e checklist: references/wireframe.md.
Com Background Builder
O fundo gerado reserva, em pixel exato, onde cada visual real deve ficar. Relatório "torto" = visual fora da área reservada. Três mudanças:
- Filtros saem do grid e vão para o cabeçalho, conforme o modo:
1 filtro → header-1 · 2 filtros → header-2 · 3+ → sidebar (painel lateral que consome colunas do corpo).
- O corpo começa abaixo do cabeçalho e termina acima do rodapé. Altura útil
= 1080 − cabeçalho − rodapé. Recalcule a linha e confira o múltiplo de 8. A altura do cabeçalho vem do guia de montagem exportado do projeto; não chute.
- Tooltip tem canvas próprio de 400×304 px, fora do grid.
Evite posicionar visual sobre os cantos reservados à ilustração.
Estrutura das páginas, modos de filtro, paleta, guia de montagem em 12 passos e o que revisar num relatório feito com o Background Builder: references/background-builder.md.
Bug: fuso horário em "última atualização"
TODAY() e NOW() usam o fuso local no Desktop, mas rodam em UTC no Service. A data exibida diverge assim que o relatório é publicado.
Solução: capturar o momento do refresh no Power Query numa tabela de interface (TabIntAtualização) e aplicar o deslocamento de fuso numa medida. Estrutura completa em references/background-builder.md.
