사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/officetuning/skill-library --skill dashboard-layout시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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.
