{
  "name": "analytics-sparklines-dashboard",
  "kind": "block",
  "primary": "grid-ui",
  "page": "/apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "columns": "2 4@lg",
    "gap": "4"
  },
  "html": "<grid-ui columns=\"2 4@lg\" gap=\"4\">\n            <card-ui>\n              <header>\n                <h3>Page Views</h3>\n                <text-ui slot=\"description\" variant=\"title\">84,232</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-views\" type=\"sparkline\" x=\"d\" y=\"v\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Bounce Rate</h3>\n                <text-ui slot=\"description\" variant=\"title\">24.3%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-bounce\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"warning\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Session Duration</h3>\n                <text-ui slot=\"description\" variant=\"title\">4m 32s</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-duration\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"success\"></chart-ui>\n              </section>\n            </card-ui>\n            <card-ui>\n              <header>\n                <h3>Conversion</h3>\n                <text-ui slot=\"description\" variant=\"title\">3.2%</text-ui>\n              </header>\n              <section bleed>\n                <chart-ui id=\"dash-spark-conv\" type=\"sparkline\" x=\"d\" y=\"v\" color=\"info\"></chart-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "metadata": {
    "domain": "data",
    "description": "4-column web analytics cards with inline sparklines — each card pairs a headline metric value with a small trend sparkline chart. Page views, bounce rate, session duration, conversion metrics with mini-chart.",
    "keywords": [
      "analytics",
      "sparklines",
      "page-views",
      "bounce-rate",
      "session-duration",
      "conversion",
      "web-analytics",
      "mini-chart",
      "chart-ui",
      "inline-chart",
      "trend",
      "sparkline-chart",
      "sparklines",
      "dashboard",
      "analytics-dashboard",
      "web-metrics",
      "traffic"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Page Views"
    },
    {
      "id": "text-2",
      "component": "Text",
      "slot": "description",
      "variant": "title",
      "textContent": "84,232"
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2"
      ]
    },
    {
      "id": "dash-spark-views",
      "component": "Chart",
      "type": "sparkline",
      "x": "d",
      "y": "v"
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "dash-spark-views"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "heading",
      "textContent": "Bounce Rate"
    },
    {
      "id": "text-4",
      "component": "Text",
      "slot": "description",
      "variant": "title",
      "textContent": "24.3%"
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "text-3",
        "text-4"
      ]
    },
    {
      "id": "dash-spark-bounce",
      "component": "Chart",
      "type": "sparkline",
      "color": "warning",
      "x": "d",
      "y": "v"
    },
    {
      "id": "section-2",
      "component": "Section",
      "bleed": true,
      "children": [
        "column-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "dash-spark-bounce"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "header-2",
        "section-2"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "heading",
      "textContent": "Session Duration"
    },
    {
      "id": "text-6",
      "component": "Text",
      "slot": "description",
      "variant": "title",
      "textContent": "4m 32s"
    },
    {
      "id": "header-3",
      "component": "Header",
      "children": [
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "dash-spark-duration",
      "component": "Chart",
      "type": "sparkline",
      "color": "success",
      "x": "d",
      "y": "v"
    },
    {
      "id": "section-3",
      "component": "Section",
      "bleed": true,
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "dash-spark-duration"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "header-3",
        "section-3"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "heading",
      "textContent": "Conversion"
    },
    {
      "id": "text-8",
      "component": "Text",
      "slot": "description",
      "variant": "title",
      "textContent": "3.2%"
    },
    {
      "id": "header-4",
      "component": "Header",
      "children": [
        "text-7",
        "text-8"
      ]
    },
    {
      "id": "dash-spark-conv",
      "component": "Chart",
      "type": "sparkline",
      "color": "info",
      "x": "d",
      "y": "v"
    },
    {
      "id": "section-4",
      "component": "Section",
      "bleed": true,
      "children": [
        "column-4"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "children": [
        "dash-spark-conv"
      ]
    },
    {
      "id": "card-4",
      "component": "Card",
      "children": [
        "header-4",
        "section-4"
      ]
    },
    {
      "id": "root",
      "component": "Grid",
      "columns": "2 4@lg",
      "gap": "4",
      "children": [
        "card",
        "card-2",
        "card-3",
        "card-4"
      ]
    }
  ]
}