Shapes e layout
Elementos geométricos e de layout para compor o visual do relatório.
Line
Linha entre dois pontos. Suporta linha sólida ou tracejada/pontilhada.
json
{
"type": "line",
"id": "separator",
"x": 40,
"y": 50,
"x2": 555,
"y2": 50,
"strokeWidth": 1,
"color": "cccccc",
"strokeDashed": false,
"strokeDashGap": 4.0
}| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
x2 | double | — | Posição X final |
y2 | double | — | Posição Y final |
zIndex | int | 0 | Ordem de empilhamento |
strokeWidth | double | 1.0 | Espessura |
color | string | "000000" | Cor (hex) |
strokeDashed | bool | false | Linha tracejada/pontilhada |
strokeDashGap | double | 4.0 | Tamanho do espaço entre traços |
Substituindo o Divider
O tipo divider foi removido. Use line horizontal para o mesmo efeito:
json
{ "type": "line", "id": "div1", "x": 40, "y": 30, "x2": 540, "y2": 30, "strokeWidth": 1 }Rect
Retângulo com preenchimento e borda. Suporta cantos retos ou arredondados via propriedade borderRadius. Pode conter elementos filhos.
json
{
"type": "rect",
"id": "bg_box",
"x": 30,
"y": 5,
"width": 500,
"height": 50,
"fill": "f0f4ff",
"hasBorder": true,
"borderColor": "1976d2",
"borderWidth": 1,
"children": [
{ "type": "text", "id": "inner_text", "x": 10, "y": 15, "content": "Dentro do retângulo" }
]
}Exemplo com cantos arredondados (card):
json
{
"type": "rect",
"id": "card",
"x": 30,
"y": 10,
"width": 250,
"height": 80,
"borderRadius": 12,
"fill": "ffffff",
"hasBorder": true,
"borderColor": "e0e0e0"
}| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
width | double | — | Largura |
height | double | — | Altura |
borderRadius | double | 0.0 | Raio dos cantos. 0 = cantos retos |
zIndex | int | 0 | Ordem de empilhamento (use -1 para backgrounds) |
fill | string | "ffffff" | Cor de preenchimento |
hasBorder | bool | true | Exibir borda |
borderColor | string | "000000" | Cor da borda |
borderWidth | double | 1.0 | Espessura da borda |
borderDashed | bool | false | Borda tracejada |
borderDashGap | double | 4.0 | Espaçamento do tracejado |
children | array | null | Elementos posicionados dentro do retângulo |
Circle
Círculo ou elipse.
json
{
"type": "circle",
"id": "dot",
"x": 100,
"y": 20,
"radius": 15,
"fill": "4caf50",
"hasBorder": false
}| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
radius | double | — | Raio do círculo |
width | double | null | Para elipse: largura |
height | double | null | Para elipse: altura |
zIndex | int | 0 | Ordem de empilhamento |
fill | string | "ffffff" | Cor de preenchimento |
hasBorder | bool | true | Exibir borda |
borderColor | string | "000000" | Cor da borda |
borderWidth | double | 1.0 | Espessura da borda |
borderDashed | bool | false | Borda tracejada |
borderDashGap | double | 4.0 | Espaçamento do tracejado |
Se width e height forem fornecidos, renderiza uma elipse.
Spacer
Espaço vazio. Não renderiza nada visualmente, mas ocupa espaço no layout.
json
{
"type": "spacer",
"id": "sp1",
"x": 0,
"y": 0,
"width": 100,
"height": 20
}| Propriedade | Tipo |
|---|---|
width | double |
height | double |
zIndex | int |