{
  "element": "nve-gauge",
  "entrypoint": "@nvidia-elements/core/gauge/gauge.examples.json",
  "items": [
    {
      "id": "gauge",
      "name": "Default",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge value=\"50\">50%</nve-gauge>\n  <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n</div>\n",
      "summary": "270-degree gauges for displaying system resource usage.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "gauge-shape",
      "name": "Shape",
      "template": "<div nve-layout=\"row gap:sm align:vertical-center\">\n  <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" status=\"accent\" value=\"66\">66%</nve-gauge>\n</div>\n",
      "summary": "Shape variants compare the default 270-degree gauge with the compact half gauge for telemetry layouts with tighter vertical space.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-shape-half",
      "name": "ShapeHalf",
      "template": "<div nve-layout=\"row gap:sm align:vertical-center\">\n  <nve-gauge shape=\"half\" value=\"66\" size=\"sm\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" value=\"66\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" value=\"66\" size=\"lg\">66%</nve-gauge>\n</div>\n",
      "summary": "Half shape variant for telemetry layouts with tighter vertical space.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-shape-half-needle",
      "name": "ShapeHalfNeedle",
      "template": "<div nve-layout=\"row gap:sm align:vertical-center\">\n  <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"sm\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"lg\">66%</nve-gauge>\n</div>\n",
      "summary": "Half shape with needle thumb variant for rapidly changing values in confined spaces.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-thumb",
      "name": "Thumb",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge thumb=\"fill\" value=\"66\">fill</nve-gauge>\n  <nve-gauge thumb=\"dot\" value=\"66\">dot</nve-gauge>\n  <nve-gauge thumb=\"needle\" value=\"66\">needle</nve-gauge>\n</div>\n",
      "summary": "Thumb variants compare filled, dot, and needle indicators for dashboards that need different levels of visual emphasis.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-values",
      "name": "Values",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge value=\"0\">0%</nve-gauge>\n  <nve-gauge value=\"33\">33%</nve-gauge>\n  <nve-gauge value=\"66\">66%</nve-gauge>\n  <nve-gauge value=\"100\">100%</nve-gauge>\n</div>\n",
      "summary": "Gauges with values from 0% to 100% for displaying system resource usage.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-max",
      "name": "Max",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge status=\"accent\" max=\"20\" value=\"5\">5/20</nve-gauge>\n  <nve-gauge max=\"20\" value=\"10\">10/20</nve-gauge>\n  <nve-gauge max=\"20\" value=\"15\">15/20</nve-gauge>\n</div>\n",
      "summary": "Gauges with custom max values for mission checkpoints, validation clips, and map tile processing.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-status",
      "name": "Status",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge value=\"50\">50%</nve-gauge>\n  <nve-gauge status=\"accent\" value=\"75\">75%</nve-gauge>\n  <nve-gauge status=\"success\" value=\"75\">75%</nve-gauge>\n  <nve-gauge status=\"warning\" value=\"75\" aria-valuetext=\"2.1m\">2.1m</nve-gauge>\n  <nve-gauge status=\"danger\" value=\"75\" aria-valuetext=\"0Hz\">0Hz</nve-gauge>\n</div>\n",
      "summary": "Gauges with accent, success, warning, and danger colors for autonomous system health and readiness signals.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-gradient",
      "name": "Gradient",
      "template": "<style>\n  nve-gauge#gauge-temperature-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-success-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-success-emphasis-color) 300deg 360deg\n    );\n  }\n  nve-gauge#gauge-mbps-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-success-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-danger-emphasis-color) 300deg 360deg\n    );\n  }\n</style>\n<div nve-layout=\"row gap:md\">\n  <nve-gauge thumb=\"dot\" value=\"82\" id=\"gauge-temperature-example\" aria-label=\"Temperature\" aria-valuetext=\"82°C\">\n    <span>82&deg;C</span>\n    <span nve-text=\"body sm muted\">TEMP</span>\n  </nve-gauge>\n  <nve-gauge thumb=\"needle\" value=\"98\" id=\"gauge-mbps-example\" aria-label=\"Download\" aria-valuetext=\"980Mbps\">\n    <span nve-text=\"body sm\">980Mbps</span>\n    <span nve-text=\"body sm muted\">Download</span>\n  </nve-gauge>\n</div>\n",
      "summary": "Use gradient colors for gauges with scaled non-segmented values such as temperature and bandwidth.",
      "description": "",
      "composition": false,
      "tags": [
        "pattern"
      ]
    },
    {
      "id": "gauge-with-text",
      "name": "WithText",
      "template": "<div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n  <nve-gauge status=\"accent\" size=\"sm\" value=\"50\" aria-labelledby=\"route-solve-label\" aria-valuetext=\"2.4s\"\n    >2.4s</nve-gauge\n  >\n  <span id=\"route-solve-label\">Route solve</span>\n</div>\n",
      "summary": "Small gauge paired with route-solve text for compact autonomous vehicle task rows.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-size",
      "name": "Size",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge size=\"sm\" value=\"50\" aria-valuetext=\"30Hz\">\n    <span nve-text=\"grow\">30Hz</span>\n  </nve-gauge>\n  <nve-gauge size=\"md\" value=\"50\" aria-valuetext=\"12Hz\">\n    <span nve-text=\"grow\">12Hz</span>\n  </nve-gauge>\n  <nve-gauge size=\"lg\" value=\"50\" aria-valuetext=\"84%\">\n    <span nve-text=\"grow\">84%</span>\n  </nve-gauge>\n</div>\n",
      "summary": "Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "gauge-dynamic",
      "name": "Dynamic",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"dynamic-gpu-gauge\" status=\"success\" value=\"0\" aria-label=\"GPU\" aria-valuetext=\"0%\">\n    <span nve-text=\"grow\">0%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const gauge = document.querySelector(\"#dynamic-gpu-gauge\");\n  const valueElement = gauge.querySelector(\"span\");\n  setInterval(() => {\n    const value = Math.floor(Math.random() * 101);\n    const text = value + \"%\";\n    gauge.value = value;\n    gauge.status = value >= 80 ? \"danger\" : value >= 60 ? \"warning\" : \"success\";\n    gauge.setAttribute(\"aria-valuetext\", text);\n    valueElement.textContent = text;\n  }, 1500);\n</script>\n",
      "summary": "Use for displaying real-time system usage and performance metrics.",
      "description": "",
      "composition": false,
      "tags": [
        "pattern"
      ]
    },
    {
      "id": "gauge-multi-gauge",
      "name": "MultiGauge",
      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"av-taxi-battery-gauge\" status=\"success\" value=\"74\" aria-label=\"Battery\" aria-valuetext=\"74%\">\n    <span nve-text=\"grow\">74%</span>\n    <span nve-text=\"body sm muted\">BATTERY</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-perception-gauge\" status=\"success\" value=\"96\" aria-label=\"Perception\" aria-valuetext=\"96%\">\n    <span nve-text=\"grow\">96%</span>\n    <span nve-text=\"body sm muted\">PERCEPTION</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-compute-gauge\" status=\"success\" value=\"62\" aria-label=\"GPU\" aria-valuetext=\"62%\">\n    <span nve-text=\"grow\">62%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n  const telemetry = {\n    battery: 74,\n    compute: 62,\n    perception: 96,\n  };\n  const gauges = {\n    battery: document.querySelector(\"#av-taxi-battery-gauge\"),\n    compute: document.querySelector(\"#av-taxi-compute-gauge\"),\n    perception: document.querySelector(\"#av-taxi-perception-gauge\"),\n  };\n  const setGauge = (gauge, value, text, status) => {\n    gauge.value = Math.round(value);\n    gauge.status = status;\n    gauge.setAttribute(\"aria-valuetext\", text);\n    gauge.querySelector(\"span\").textContent = text;\n  };\n  setInterval(() => {\n    telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);\n    telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);\n    telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);\n    const battery = Math.round(telemetry.battery);\n    const compute = Math.round(telemetry.compute);\n    const perception = Math.round(telemetry.perception);\n    setGauge(gauges.battery, battery, battery + \"%\", battery < 30 ? \"danger\" : battery < 50 ? \"warning\" : \"success\");\n    setGauge(gauges.compute, compute, compute + \"%\", compute >= 85 ? \"danger\" : compute >= 70 ? \"warning\" : \"success\");\n    setGauge(\n      gauges.perception,\n      perception,\n      perception + \"%\",\n      perception < 90 ? \"danger\" : perception < 94 ? \"warning\" : \"success\",\n    );\n  }, 1600);\n</script>\n",
      "summary": "Autonomous vehicle taxi gauges combine battery, perception, compute, and link status with realistic drift. Use for live dispatch views that need changing system health.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}