dashboard

presentation

slug: step-dashboard

Step: dashboard

Category: Visualization / Reporting

---

Purpose

The dashboard step assembles pre-rendered assets, such as KPI cards, charts, tables, or reports—into a single responsive dashboard view. It uses HTML flexbox layout for automatic arrangement and spacing, allowing all components to flow naturally without fixed column constraints.

This step does not modify the assets themselves; it simply places them together on a page for presentation. Titles, headers, and styling are managed by the incoming assets. Exporting or saving the dashboard is handled by the orchestrator outside of this step.

---

Input

• Assets to assemble: Provided via the DSL assemble parameter. Assets may come from:

  • $work[] datasets containing an html column (e.g., KPI cards built via calculate or transpose)
  • $html[] rendered assets (e.g., reports, charts)

Each asset should already contain any metadata for presentation, such as card size, goals, titles, or other display parameters.

Example DSL Input:

- dashboard:
    assemble: [kpiCards, salesChart, report1]
    layout:
      row_gap: 20px
      column_gap: 20px
      responsive: true

---

Parameters

Parameter	Type	Default	Description
assemble	array	[]	List of assets to include in the dashboard. Assets can be $work datasets with an html column or $html[] objects.
layout	object	{ row_gap: "20px", column_gap: "20px", responsive: true }	Layout options for the dashboard.
layout.row_gap	string	"20px"	Vertical spacing between rows.
layout.column_gap	string	"20px"	Horizontal spacing between columns.
layout.responsive	boolean	true	If true, flexbox automatically wraps items based on browser width.

---

Output

• $html[$output] — The final dashboard HTML is written directly to the normal rendered html output just like any other presentation output.
• This HTML is fully responsive and ready to render in a browser.

No changes are made to the underlying assets.

---

Step Sequence

The dashboard step is typically called last in a workflow after all asset preparation:

• consider steps like cube step to generate summaries and statistics, then fed into calculate step to create a new column 'html'
• Charts, tables, or reports rendered to $html[].
• Call dashboard to produce the final flexbox layout.

---

Example DSL Workflow

steps:
  - loadInline:
      data: [...]
      output: kpiData

  - calculate:
      dataset: kpiData
      template: kpiCardTemplate
      output: kpiCards

  - chart:
      dataset: salesData
      type: bar
      output: salesChart

  - print:
      dataset: inventoryData
      output: report1

  - dashboard:
      assemble: [kpiCards, salesChart, report1]
      layout:
        row_gap: 20px
        column_gap: 20px
        responsive: true

---

Notes & Best Practices

• All assets should be pre-rendered before calling dashboard.
• calculate can be used to generate custom HTML for cards or tables.
• Use metadata in $work or $html[] objects for card size, titles, or KPI goals.
• dashboard does not handle exporting; let the orchestrator manage final output.
• Flexbox ensures natural wrapping; do not specify column counts for full responsiveness.