Program schedule

A Gantt schedule: period columns with a bar per row, each carrying a progress fill and a trailing figure. Entirely data-driven — edit the rows to re-plan.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "title",            "gantt"          ],          "gap": "md"        },        {          "id": "title",          "component": "Text",          "text": "Roadmap",          "variant": "title"        },        {          "id": "gantt",          "component": "Gantt",          "periods": {            "path": "/periods"          },          "rows": {            "path": "/rows"          }        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "periods": [          "Q1",          "Q2",          "Q3",          "Q4"        ],        "rows": [          {            "id": "r1",            "label": "Discovery",            "secondary": "Research",            "start": 0,            "span": 1,            "progress": 100,            "tone": "success",            "value": "done"          },          {            "id": "r2",            "label": "Renderer",            "secondary": "Core",            "start": 1,            "span": 2,            "progress": 65,            "tone": "info",            "value": "65%"          },          {            "id": "r3",            "label": "Catalog",            "secondary": "Contract",            "start": 1,            "span": 1,            "progress": 80,            "tone": "info",            "value": "80%"          },          {            "id": "r4",            "label": "GA launch",            "secondary": "Release",            "start": 3,            "span": 1,            "progress": 0,            "tone": "neutral",            "value": "planned"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "title",
            "gantt"
          ],
          "gap": "md"
        },
        {
          "id": "title",
          "component": "Text",
          "text": "Roadmap",
          "variant": "title"
        },
        {
          "id": "gantt",
          "component": "Gantt",
          "periods": {
            "path": "/periods"
          },
          "rows": {
            "path": "/rows"
          }
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "periods": [
          "Q1",
          "Q2",
          "Q3",
          "Q4"
        ],
        "rows": [
          {
            "id": "r1",
            "label": "Discovery",
            "secondary": "Research",
            "start": 0,
            "span": 1,
            "progress": 100,
            "tone": "success",
            "value": "done"
          },
          {
            "id": "r2",
            "label": "Renderer",
            "secondary": "Core",
            "start": 1,
            "span": 2,
            "progress": 65,
            "tone": "info",
            "value": "65%"
          },
          {
            "id": "r3",
            "label": "Catalog",
            "secondary": "Contract",
            "start": 1,
            "span": 1,
            "progress": 80,
            "tone": "info",
            "value": "80%"
          },
          {
            "id": "r4",
            "label": "GA launch",
            "secondary": "Release",
            "start": 3,
            "span": 1,
            "progress": 0,
            "tone": "neutral",
            "value": "planned"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Roadmap

Discovery

Research

done

Renderer

Core

65%

Catalog

Contract

80%

GA launch

Release

planned