@adia-ai/a2ui-corpus 0.0.1 → 0.0.2

package/patterns/data/chart-grid-with-kpis.json

@@ -0,0 +1,314 @@
+{
+  "$schema": "../_schema.json",
+  "name": "chart-grid-with-kpis",
+  "version": 1,
+  "domain": "data",
+  "description": "Dashboard with a 4-column KPI stat-with-sparkline row on top and a 2-column grid of chart cards with trend footers below. Modernized version of chart-dashboard using the Phase 1+3 primitives.",
+  "tags": {
+    "purpose": [
+      "visualization",
+      "data-display",
+      "dashboard"
+    ],
+    "complexity": "complex",
+    "layout": "grid",
+    "interaction": []
+  },
+  "keywords": [
+    "dashboard",
+    "chart",
+    "kpi",
+    "stats",
+    "sparkline",
+    "trend",
+    "analytics",
+    "reporting"
+  ],
+  "related": [
+    "chart-dashboard",
+    "stat-with-sparkline",
+    "chart-card-with-trend-footer",
+    "chart-with-filter-pills",
+    "metrics"
+  ],
+  "template": [
+    {
+      "id": "root",
+      "component": "Column",
+      "children": [
+        "dash-header",
+        "kpi-grid",
+        "chart-grid"
+      ],
+      "gap": "4"
+    },
+    {
+      "id": "dash-header",
+      "component": "Row",
+      "children": [
+        "dash-title",
+        "dash-actions"
+      ]
+    },
+    {
+      "id": "dash-title",
+      "component": "Text",
+      "textContent": "Dashboard",
+      "variant": "title"
+    },
+    {
+      "id": "dash-actions",
+      "component": "Row",
+      "children": [
+        "export-btn"
+      ],
+      "gap": "2"
+    },
+    {
+      "id": "export-btn",
+      "component": "Button",
+      "text": "Export",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "download"
+    },
+    {
+      "id": "kpi-grid",
+      "component": "Grid",
+      "children": [
+        "k1",
+        "k2",
+        "k3",
+        "k4"
+      ],
+      "columns": "4"
+    },
+    {
+      "id": "k1",
+      "component": "Card",
+      "children": ["k1s"]
+    },
+    {
+      "id": "k1s",
+      "component": "Section",
+      "children": ["k1stat"]
+    },
+    {
+      "id": "k1stat",
+      "component": "Stat",
+      "label": "Revenue",
+      "value": "$48.2k",
+      "change": "+12.5%",
+      "trend": "up",
+      "children": ["k1spark"]
+    },
+    {
+      "id": "k1spark",
+      "component": "Chart",
+      "slot": "chart",
+      "type": "sparkline",
+      "x": "month",
+      "y": "revenue"
+    },
+    {
+      "id": "k2",
+      "component": "Card",
+      "children": ["k2s"]
+    },
+    {
+      "id": "k2s",
+      "component": "Section",
+      "children": ["k2stat"]
+    },
+    {
+      "id": "k2stat",
+      "component": "Stat",
+      "label": "Users",
+      "value": "2,340",
+      "change": "+8%",
+      "trend": "up",
+      "children": ["k2spark"]
+    },
+    {
+      "id": "k2spark",
+      "component": "Chart",
+      "slot": "chart",
+      "type": "sparkline",
+      "x": "month",
+      "y": "users"
+    },
+    {
+      "id": "k3",
+      "component": "Card",
+      "children": ["k3s"]
+    },
+    {
+      "id": "k3s",
+      "component": "Section",
+      "children": ["k3stat"]
+    },
+    {
+      "id": "k3stat",
+      "component": "Stat",
+      "label": "Bounce",
+      "value": "24.3%",
+      "change": "-3.1%",
+      "trend": "down",
+      "children": ["k3spark"]
+    },
+    {
+      "id": "k3spark",
+      "component": "Chart",
+      "slot": "chart",
+      "type": "sparkline",
+      "x": "month",
+      "y": "bounce"
+    },
+    {
+      "id": "k4",
+      "component": "Card",
+      "children": ["k4s"]
+    },
+    {
+      "id": "k4s",
+      "component": "Section",
+      "children": ["k4stat"]
+    },
+    {
+      "id": "k4stat",
+      "component": "Stat",
+      "label": "Session",
+      "value": "4m 23s",
+      "change": "+15s",
+      "trend": "up",
+      "children": ["k4spark"]
+    },
+    {
+      "id": "k4spark",
+      "component": "Chart",
+      "slot": "chart",
+      "type": "sparkline",
+      "x": "month",
+      "y": "session"
+    },
+    {
+      "id": "chart-grid",
+      "component": "Grid",
+      "children": [
+        "ch1",
+        "ch2"
+      ],
+      "columns": "2"
+    },
+    {
+      "id": "ch1",
+      "component": "Card",
+      "children": ["ch1h", "ch1s", "ch1f"]
+    },
+    {
+      "id": "ch1h",
+      "component": "Header",
+      "children": ["ch1t", "ch1d"]
+    },
+    {
+      "id": "ch1t",
+      "component": "Text",
+      "slot": "heading",
+      "textContent": "Revenue",
+      "variant": "section"
+    },
+    {
+      "id": "ch1d",
+      "component": "Text",
+      "slot": "description",
+      "textContent": "Last 3 months",
+      "variant": "caption"
+    },
+    {
+      "id": "ch1s",
+      "component": "Section",
+      "children": ["ch1-chart"]
+    },
+    {
+      "id": "ch1-chart",
+      "component": "Chart",
+      "type": "area",
+      "x": "month",
+      "y": "revenue"
+    },
+    {
+      "id": "ch1f",
+      "component": "Footer",
+      "children": ["ch1ft", "ch1fd"]
+    },
+    {
+      "id": "ch1ft",
+      "component": "Text",
+      "slot": "heading",
+      "textContent": "Trending up by 5.2% this month",
+      "variant": "body"
+    },
+    {
+      "id": "ch1fd",
+      "component": "Text",
+      "slot": "description",
+      "textContent": "January – March 2024",
+      "variant": "caption"
+    },
+    {
+      "id": "ch2",
+      "component": "Card",
+      "children": ["ch2h", "ch2s", "ch2f"]
+    },
+    {
+      "id": "ch2h",
+      "component": "Header",
+      "children": ["ch2t", "ch2d"]
+    },
+    {
+      "id": "ch2t",
+      "component": "Text",
+      "slot": "heading",
+      "textContent": "Users",
+      "variant": "section"
+    },
+    {
+      "id": "ch2d",
+      "component": "Text",
+      "slot": "description",
+      "textContent": "Daily active users",
+      "variant": "caption"
+    },
+    {
+      "id": "ch2s",
+      "component": "Section",
+      "children": ["ch2-chart"]
+    },
+    {
+      "id": "ch2-chart",
+      "component": "Chart",
+      "type": "line",
+      "x": "month",
+      "y": "users"
+    },
+    {
+      "id": "ch2f",
+      "component": "Footer",
+      "children": ["ch2ft", "ch2fd"]
+    },
+    {
+      "id": "ch2ft",
+      "component": "Text",
+      "slot": "heading",
+      "textContent": "2,340 daily users",
+      "variant": "body"
+    },
+    {
+      "id": "ch2fd",
+      "component": "Text",
+      "slot": "description",
+      "textContent": "Up 8% vs last quarter",
+      "variant": "caption"
+    }
+  ]
+}

package/patterns/data/chart-grid-with-kpis.yaml

@@ -0,0 +1,63 @@
+$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
+name: chart-grid-with-kpis
+domain: data
+version: 1
+description: >-
+  Dashboard with a 4-column KPI row (stat-with-sparkline each) on top and a
+  2-column grid of chart cards with trend footers below. Modernized version
+  of chart-dashboard that uses the Phase 1 (footer heading slot) and Phase 3
+  (stat chart slot) primitives.
+tags:
+  purpose:
+    - visualization
+    - data-display
+    - dashboard
+  complexity: complex
+  layout: grid
+  interaction: []
+keywords:
+  - dashboard
+  - chart
+  - kpi
+  - stats
+  - sparkline
+  - trend
+  - analytics
+  - reporting
+related:
+  - chart-dashboard
+  - stat-with-sparkline
+  - chart-card-with-trend-footer
+  - chart-with-filter-pills
+  - metrics
+use-cases:
+  - Admin/executive dashboards with KPIs + chart cards at a glance.
+  - SaaS analytics pages — revenue / users / bounce / session cards + trend charts.
+  - Marketing dashboards where each KPI card shows a sparkline and each chart card carries a trend caption.
+variants:
+  - name: filter-pills
+    description: >-
+      Add `Segmented` pills to chart card headers (slot="action") per the
+      chart-with-filter-pills pattern for time-range selection.
+  - name: narrower-kpi-row
+    description: >-
+      Set `columns: "3"` or `"2"` on `kpi-grid` when only 2-3 KPIs matter.
+wiring-intent:
+  summary: >-
+    Static pattern. Typical integration wires each Stat's value + its
+    sparkline's .data from the same controller; each chart card receives
+    its `.data` + trend narrative from the same source.
+  controllers: []
+  actions: []
+components:
+  - Column
+  - Row
+  - Grid
+  - Card
+  - Header
+  - Section
+  - Footer
+  - Text
+  - Button
+  - Stat
+  - Chart

package/patterns/data/chart-with-filter-pills.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "../_schema.json",
+  "name": "chart-with-filter-pills",
+  "version": 1,
+  "domain": "data",
+  "description": "Chart in a card with a time-range pill selector in the header's action slot. The pills are a Segmented control (single-select) that drives the data window.",
+  "tags": {
+    "purpose": [
+      "visualization",
+      "data-display",
+      "filtering"
+    ],
+    "complexity": "composed",
+    "layout": "single-column",
+    "interaction": [
+      "filter",
+      "time-range"
+    ]
+  },
+  "keywords": [
+    "chart",
+    "filter",
+    "pills",
+    "time-range",
+    "segmented",
+    "analytics",
+    "dashboard"
+  ],
+  "related": [
+    "chart-card-with-trend-footer",
+    "chart-dashboard",
+    "metrics"
+  ],
+  "template": [
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "rc-header",
+        "rc-body"
+      ]
+    },
+    {
+      "id": "rc-header",
+      "component": "Header",
+      "children": [
+        "rc-title",
+        "rc-filter"
+      ]
+    },
+    {
+      "id": "rc-title",
+      "component": "Text",
+      "slot": "heading",
+      "textContent": "Revenue",
+      "variant": "section"
+    },
+    {
+      "id": "rc-filter",
+      "component": "Segmented",
+      "slot": "action",
+      "value": "1m",
+      "children": [
+        "f-1w",
+        "f-2w",
+        "f-1m",
+        "f-3m"
+      ]
+    },
+    {
+      "id": "f-1w",
+      "component": "Segment",
+      "text": "1w",
+      "value": "1w"
+    },
+    {
+      "id": "f-2w",
+      "component": "Segment",
+      "text": "2w",
+      "value": "2w"
+    },
+    {
+      "id": "f-1m",
+      "component": "Segment",
+      "text": "1m",
+      "value": "1m"
+    },
+    {
+      "id": "f-3m",
+      "component": "Segment",
+      "text": "3m",
+      "value": "3m"
+    },
+    {
+      "id": "rc-body",
+      "component": "Section",
+      "children": [
+        "rc-chart"
+      ]
+    },
+    {
+      "id": "rc-chart",
+      "component": "Chart",
+      "type": "line",
+      "x": "date",
+      "y": "revenue"
+    }
+  ],
+  "actions": [
+    {
+      "event": { "event": "change", "target": "rc-filter" },
+      "handler": "update-data-model",
+      "config": {
+        "path": "filters.range",
+        "value": "{{event.value}}"
+      }
+    },
+    {
+      "event": { "event": "change", "target": "rc-filter" },
+      "handler": "fetch-resource",
+      "config": {
+        "uri": "api://metrics/revenue?range={{event.value}}",
+        "target": "rc-chart.data"
+      }
+    }
+  ]
+}

package/patterns/data/chart-with-filter-pills.yaml

@@ -0,0 +1,76 @@
+$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
+name: chart-with-filter-pills
+domain: data
+version: 1
+description: >-
+  Chart in a card with a time-range pill selector in the header's `action`
+  slot. The pills are a `Segmented` control (single-select of `Segment`
+  children) that drives the data window. Value changes are wired via A2UI
+  action binding to the chart's .data replacement.
+tags:
+  purpose:
+    - visualization
+    - data-display
+    - filtering
+  complexity: composed
+  layout: single-column
+  interaction:
+    - filter
+    - time-range
+keywords:
+  - chart
+  - filter
+  - pills
+  - time-range
+  - segmented
+  - analytics
+  - dashboard
+related:
+  - chart-card-with-trend-footer
+  - chart-dashboard
+  - metrics
+use-cases:
+  - Revenue / user / signup charts with 1w / 2w / 1m / 3m range pills.
+  - Analytics cards where the range toggle drives a server-side data refresh.
+  - Metric cards in a SaaS dashboard with standard Last 7d / 30d / 90d pills.
+variants:
+  - name: toggle-group
+    description: >-
+      Swap `Segmented` for `ToggleGroup` when users need to multi-select
+      (e.g., comparing multiple ranges or series).
+  - name: dropdown
+    description: >-
+      Swap the pill row for a `Select` component when the range set grows
+      beyond ~5 options.
+wiring-intent:
+  summary: >-
+    Segmented's change event drives two A2UI actions: (1) update the
+    data model's `filters.range` path so other surfaces can react to
+    the same selection, and (2) fetch the range-scoped metric series
+    and replace the chart's `.data`. Both actions target the same
+    event (`change` on `rc-filter`) so they fire in registration
+    order — model update first, then fetch. Canonical shapes are
+    carried in the JSON's top-level `actions` array (see the pattern
+    file) so the wiring is self-documenting for authors copying the
+    composition.
+  controllers:
+    - range-filter
+  actions:
+    - event: rc-filter.change
+      handler: update-data-model
+      config:
+        path: filters.range
+        value: event.value
+    - event: rc-filter.change
+      handler: fetch-resource
+      config:
+        uri: 'api://metrics/revenue?range={{event.value}}'
+        target: rc-chart.data
+components:
+  - Card
+  - Header
+  - Section
+  - Chart
+  - Text
+  - Segmented
+  - Segment

package/patterns/data/stat-with-sparkline.json

@@ -0,0 +1,67 @@
+{
+  "$schema": "../_schema.json",
+  "name": "stat-with-sparkline",
+  "version": 1,
+  "domain": "data",
+  "description": "KPI stat card with an inline sparkline on the right side. Uses the Stat component's `chart` slot introduced in Phase 3.",
+  "tags": {
+    "purpose": [
+      "visualization",
+      "data-display",
+      "kpi"
+    ],
+    "complexity": "simple",
+    "layout": "single-column",
+    "interaction": []
+  },
+  "keywords": [
+    "stat",
+    "kpi",
+    "sparkline",
+    "metric",
+    "chart",
+    "summary",
+    "overview"
+  ],
+  "related": [
+    "chart-dashboard",
+    "chart-grid-with-kpis",
+    "chart-card-with-trend-footer",
+    "metrics"
+  ],
+  "template": [
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "sec"
+      ]
+    },
+    {
+      "id": "sec",
+      "component": "Section",
+      "children": [
+        "kpi"
+      ]
+    },
+    {
+      "id": "kpi",
+      "component": "Stat",
+      "label": "Revenue",
+      "value": "$48.2k",
+      "change": "+12.5%",
+      "trend": "up",
+      "children": [
+        "kpi-spark"
+      ]
+    },
+    {
+      "id": "kpi-spark",
+      "component": "Chart",
+      "slot": "chart",
+      "type": "sparkline",
+      "x": "month",
+      "y": "revenue"
+    }
+  ]
+}

package/patterns/data/stat-with-sparkline.yaml

@@ -0,0 +1,51 @@
+$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
+name: stat-with-sparkline
+domain: data
+version: 1
+description: >-
+  KPI stat card with an inline sparkline on the right side. The `Stat`
+  component's `chart` slot (Phase 3 addition) routes the sparkline into a
+  right-column region spanning rows 2-3 of the stat grid — hero number
+  and mini-chart read as a single visual unit.
+tags:
+  purpose:
+    - visualization
+    - data-display
+    - kpi
+  complexity: simple
+  layout: single-column
+  interaction: []
+keywords:
+  - stat
+  - kpi
+  - sparkline
+  - metric
+  - chart
+  - summary
+  - overview
+related:
+  - chart-dashboard
+  - chart-grid-with-kpis
+  - chart-card-with-trend-footer
+  - metrics
+use-cases:
+  - Dashboard KPI tiles with inline trend sparklines.
+  - Top-of-page metric cards that need a richer signal than a +/- badge.
+  - Executive summary views pairing a hero number with its 30-day trajectory.
+variants:
+  - name: bar-sparkline
+    description: Swap `type: sparkline` for `type: bar` for a mini-bar version.
+  - name: no-trend-badge
+    description: Omit `change` + `trend` when only the number + sparkline are wanted.
+wiring-intent:
+  summary: >-
+    Static pattern. Sparkline .data is typically wired alongside the stat
+    value from the same controller — a single data fetch populates both
+    the hero number and its trajectory.
+  controllers: []
+  actions: []
+components:
+  - Card
+  - Section
+  - Stat
+  - Chart