LayoutCard

LayoutCard manifests describe card-shaped containers that can host charts, tables, and text. They are useful for dashboards and reusable widgets.

Spec outline

apiVersion: bino.bi/v1alpha1
kind: LayoutCard
metadata:
  name: revenue_card
spec:
  titleImage: "debug/concordia.png"
  titleBusinessUnit: "Sales"
  titleScenarios: "ac,fc,py"
  titleVariances: "dpy_ac_pos"
  titleOrder: category
  titleOrderDirection: desc
  titleMeasures:
    - name: "Revenue"
      unit: "mEUR"
  titleDateStart: 2024-01-01
  titleDateEnd: 2024-03-31
  titleDateFormat: quarter
  titleDateLink: interval
  titleNamespace: _system
  footerText: "Quarterly revenue overview"
  cardLayout: split-horizontal
  cardCustomTemplate: '"a b" "c d"'
  cardGridGap: "0.5rem"
  cardFitToContent: true
  cardShowBorder: true
  children:
    - kind: ChartStructure
      spec: { ... }
    - kind: Table
      spec: { ... }

Important fields mirror LayoutPage but are scoped to a card:

• Header: titleImage, titleBusinessUnit, titleScenarios, titleVariances, titleOrder, titleOrderDirection, titleMeasures, titleDateStart, titleDateEnd, titleDateFormat, titleDateLink, titleNamespace.
• Footer: footerText.
• Layout: cardLayout, cardCustomTemplate, cardGridGap, cardFitToContent, cardShowBorder.
• Content: children – required array of layoutChild objects.

Card inside a page

---
apiVersion: bino.bi/v1alpha1
kind: LayoutCard
metadata:
  name: revenue_card
spec:
  titleBusinessUnit: "Sales"
  titleMeasures:
    - name: "Revenue"
      unit: "mEUR"
  cardLayout: full
  children:
    - kind: ChartTime
      spec:
        dataset: revenue_monthly
        chartTitle: "Monthly revenue"
        type: line
        dateInterval: month
        axisLabelsMode: smart
---
apiVersion: bino.bi/v1alpha1
kind: LayoutPage
metadata:
  name: dashboard_page
spec:
  pageLayout: 2x2
  children:
    - kind: LayoutCard
      spec:
        # embed card spec directly or reference by convention
        titleBusinessUnit: "Sales"
        cardLayout: full
        children:
          - kind: ChartTime
            spec:
              dataset: revenue_monthly
              chartTitle: "Monthly revenue"
              type: line

Use cards to keep layout definitions modular and to reuse card patterns across multiple reports.

Referencing standalone cards

You can define LayoutCard as a standalone document and reference it from a LayoutPage using ref. This enables card reuse across multiple pages.

---
apiVersion: bino.bi/v1alpha1
kind: LayoutCard
metadata:
  name: revenue_card
spec:
  titleBusinessUnit: "Sales"
  cardLayout: full
  children:
    - kind: ChartTime
      spec:
        dataset: revenue_monthly
        chartTitle: "Monthly revenue"
        type: line

---
apiVersion: bino.bi/v1alpha1
kind: LayoutPage
metadata:
  name: dashboard_page
spec:
  pageLayout: 2x2
  children:
    - kind: LayoutCard
      ref: revenue_card
    - kind: LayoutCard
      ref: revenue_card
      spec:
        titleBusinessUnit: "Marketing" # Override the business unit

See the LayoutPage reference for more details on ref syntax and override behavior.

Optional references

LayoutCard children support the same optional field as LayoutPage children. Use it for references that may legitimately be missing:

children:
  - kind: ChartTime
    ref: mainChart           # Required: fails if missing
  - kind: Text
    ref: debugInfo
    optional: true           # Optional: skips gracefully if missing

See the LayoutPage optional references section for details on when to use this field.

Inline child constraints

LayoutCard children support metadata.constraints just like LayoutPage. Use constraints to conditionally include components based on the artefact’s context.

apiVersion: bino.bi/v1alpha1
kind: LayoutCard
metadata:
  name: summary_card
spec:
  cardLayout: split-horizontal
  children:
    # Only in production builds
    - kind: Table
      metadata:
        constraints:
          - labels.env==prod
          - mode==build
      spec:
        dataset: production_metrics

    # Only in preview mode (string format)
    - kind: Text
      metadata:
        constraints:
          - mode==preview
      spec:
        value: "Preview placeholder"

    # Using in operator for multiple environments
    - kind: ChartStructure
      metadata:
        constraints:
          - field: labels.env
            operator: in
            value: [staging, prod]
      spec:
        dataset: metrics

For the full constraint syntax and operators, see Inline child constraints and Constraints and Scoped Names.