Render Stage¶
The render stage transforms compiled faces with data into visual output formats.
Supported Formats¶
The renderer supports the following output formats:
- SVG: Scalable vector graphics (default)
- HTML: Interactive HTML pages with embedded charts
- PNG: Raster image format
- PDF: PDF documents
- Terminal: Terminal output with ASCII/Unicode charts (prints to stdout)
Entry Points¶
render¶
The main entry point for rendering datafaces:
render
¶
render(
face: CompiledFace,
executor: Executor,
format: str = "svg",
variables: VariableValues | None = None,
**options: Any
) -> str | bytes
Render a compiled dataface.
Stage: RENDER (Main Entry Point)
This is the main rendering function. It walks the layout structure, renders each chart (triggering lazy query execution), and produces output in the requested format.
| PARAMETER | DESCRIPTION |
|---|---|
face
|
Compiled dataface to render
TYPE:
|
executor
|
Executor for query execution
TYPE:
|
format
|
Output format (svg, html, png, pdf, terminal, json)
TYPE:
|
variables
|
Variable values for queries
TYPE:
|
**options
|
Format-specific options - background: Background color - scale: Scale factor (for png) - grid: Show grid overlay (for debugging)
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
str | bytes
|
Rendered output: - str for svg, html, terminal - bytes for png, pdf |
| RAISES | DESCRIPTION |
|---|---|
RenderError
|
If rendering fails |
FormatError
|
If format is unknown |
Source code in dataface/core/render/renderer.py
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | |
render_chart¶
Render a single chart:
render_chart
¶
render_chart(
chart: CompiledChart | ResolvedChart | Any,
data: list[dict[str, Any]],
format: str = "json",
width: float | None = None,
height: float | None = None,
theme: str | None = None,
structure: str | None = None,
is_placeholder: bool = False,
) -> str
Render a chart to JSON, SVG, PNG, or PDF.
Source code in dataface/core/render/chart/vega_lite.py
Layout Functions¶
The layout module provides functions for rendering different layout types.
Rows Layout¶
render_rows_layout
¶
render_rows_layout(
items: list[LayoutItem],
executor: Executor,
variables: VariableValues,
available_width: float,
available_height: float,
gap: float,
background: str | None = None,
theme: str | None = None,
structure: str | None = None,
) -> LayoutResult
Render items in vertical stack.
In a rows layout, items stack vertically. Heights are determined by: 1. Pre-calculated dimensions from sizing module (preferred) 2. Content-aware fallback if not pre-calculated
| PARAMETER | DESCRIPTION |
|---|---|
items
|
Layout items to render
TYPE:
|
executor
|
Executor for query execution
TYPE:
|
variables
|
Variable values for queries
TYPE:
|
available_width
|
Available container width
TYPE:
|
available_height
|
Available container height
TYPE:
|
gap
|
Gap between items
TYPE:
|
background
|
Optional background color
TYPE:
|
theme
|
Optional theme name to apply
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
LayoutResult
|
LayoutResult with SVG content and dimensions |
Source code in dataface/core/render/layouts.py
Columns Layout¶
render_cols_layout
¶
render_cols_layout(
items: list[LayoutItem],
executor: Executor,
variables: VariableValues,
available_width: float,
available_height: float,
gap: float,
background: str | None = None,
theme: str | None = None,
structure: str | None = None,
) -> LayoutResult
Render items in horizontal distribution.
Trusts the normalizer for all sizing. Uses pre-calculated item.x, item.width, and item.height values.
| PARAMETER | DESCRIPTION |
|---|---|
items
|
Layout items to render (with pre-calculated dimensions from normalizer)
TYPE:
|
executor
|
Executor for query execution
TYPE:
|
variables
|
Variable values for queries
TYPE:
|
available_width
|
Available container width
TYPE:
|
available_height
|
Available container height (upper bound)
TYPE:
|
gap
|
Gap between items (unused - normalizer already applied it)
TYPE:
|
background
|
Optional background color
TYPE:
|
theme
|
Optional theme name to apply
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
LayoutResult
|
LayoutResult with SVG content and dimensions |
Source code in dataface/core/render/layouts.py
Grid Layout¶
render_grid_layout
¶
render_grid_layout(
items: list[LayoutItem],
executor: Executor,
variables: VariableValues,
available_width: float,
available_height: float,
columns: int,
gap: float,
background: str | None = None,
theme: str | None = None,
structure: str | None = None,
) -> LayoutResult
Render items in positioned grid.
Grid items have explicit x, y positions and width, height spans. Each item's dimensions are calculated based on the grid columns/rows.
| PARAMETER | DESCRIPTION |
|---|---|
items
|
Layout items with grid positions (x, y, width, height)
TYPE:
|
executor
|
Executor for query execution
TYPE:
|
variables
|
Variable values for queries
TYPE:
|
available_width
|
Available container width
TYPE:
|
available_height
|
Available container height
TYPE:
|
columns
|
Number of grid columns
TYPE:
|
gap
|
Gap between grid cells
TYPE:
|
background
|
Optional background color
TYPE:
|
theme
|
Optional theme name to apply
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
LayoutResult
|
LayoutResult with SVG content and dimensions |
Source code in dataface/core/render/layouts.py
Tabs Layout¶
render_tabs_layout
¶
render_tabs_layout(
items: list[LayoutItem],
executor: Executor,
variables: VariableValues,
available_width: float,
available_height: float,
tab_titles: list[str] | None = None,
tab_slugs: list[str] | None = None,
tab_variable: str | None = None,
active_tab: int = 0,
tab_position: str = "top",
background: str | None = None,
theme: str | None = None,
structure: str | None = None,
) -> LayoutResult
Render tabbed container (active tab only).
In a tabs layout, each tab gets the full container size minus the tab bar. Only the active tab is rendered in SVG output. The tab bar is rendered as clickable SVG links that update URL params for server re-rendering.
| PARAMETER | DESCRIPTION |
|---|---|
items
|
Layout items (one per tab)
TYPE:
|
executor
|
Executor for query execution
TYPE:
|
variables
|
Variable values for queries
TYPE:
|
available_width
|
Available container width
TYPE:
|
available_height
|
Available container height
TYPE:
|
tab_titles
|
Display titles for tabs
TYPE:
|
tab_slugs
|
URL-safe slugs for tabs (used in URL params)
TYPE:
|
tab_variable
|
Variable name for tab selection (URL param name)
TYPE:
|
active_tab
|
Index of active tab (0-based)
TYPE:
|
tab_position
|
Position of tabs ("top" or "left")
TYPE:
|
background
|
Optional background color
TYPE:
|
theme
|
Optional theme name to apply
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
LayoutResult
|
LayoutResult with SVG content and dimensions |
Source code in dataface/core/render/layouts.py
294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 | |
Vega-Lite Integration¶
Charts are rendered using Vega-Lite specifications.
generate_vega_lite_spec¶
generate_vega_lite_spec
¶
generate_vega_lite_spec(
chart: CompiledChart | ResolvedChart | Any,
data: list[dict[str, Any]],
width: float | None = None,
height: float | None = None,
theme: str | None = None,
structure: str | None = None,
) -> dict[str, Any]
Generate a Vega-Lite spec for charts that render as Vega-Lite.
Source code in dataface/core/render/chart/vega_lite.py
render_chart¶
render_chart
¶
render_chart(
chart: CompiledChart | ResolvedChart | Any,
data: list[dict[str, Any]],
format: str = "json",
width: float | None = None,
height: float | None = None,
theme: str | None = None,
structure: str | None = None,
is_placeholder: bool = False,
) -> str
Render a chart to JSON, SVG, PNG, or PDF.
Source code in dataface/core/render/chart/vega_lite.py
HTML Output¶
HTML output is now a minimal wrapper around SVG output. Use format='html' to get
a complete HTML document that embeds the SVG dataface with proper styling.
The SVG content includes all interactivity via embedded JavaScript and foreignObject elements for variable controls.
Errors¶
errors
¶
Rendering error types.
Stage: RENDER Purpose: Define error types for rendering failures.
These errors are raised during: - General rendering failures (RenderError) - Format conversion (FormatError)
All errors inherit from RenderError → DatafaceError for easy catching.
Note: Many render errors are displayed IN the output rather than thrown, so users see helpful error messages in the rendered dataface.
RenderError
¶
Bases: DatafaceError
Base error for all rendering failures.
This is the parent class for all rendering-related errors. Catch this to handle any rendering error.
| ATTRIBUTE | DESCRIPTION |
|---|---|
message |
Human-readable error description
|
element |
Element that failed to render (if applicable)
|
Source code in dataface/core/render/errors.py
ChartDataError
¶
Bases: RenderError
Chart received data that doesn't match its requirements.
Raised when: - KPI chart receives more than 1 row - Chart references a column not present in the data - Data shape doesn't match chart type expectations
Source code in dataface/core/render/errors.py
FormatError
¶
Bases: RenderError
Error during format conversion.
Raised when: - Unknown format requested - SVG to PNG/PDF conversion fails - HTML template error
Example
try: ... render(face, executor, format="unknown") ... except FormatError as e: ... print(f"Format error: {e}")