{
  "extractedAt": "2026-05-08T03:56:19.859Z",
  "figmaFileKey": "YbsPRUVmNdsbN40NNwh1Gn",
  "figmaName": "Chart",
  "nodeId": "4949:7176",
  "type": "COMPONENT_SET",
  "pageId": "4923:6783",
  "pageName": "— — Chart",
  "description": "Chart variants: pie / donut / line / bar / bar-horizontal. All colors bound to TVU design system variables.",
  "key": "080b12ba6033477a28aece90d811133776f27574",
  "variants": [
    {
      "id": "4949:7090",
      "name": "type=pie",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 220,
      "w": 240,
      "x": 40,
      "y": 40,
      "pH": 16,
      "pV": 16,
      "pR": 16,
      "pB": 16,
      "gap": 12,
      "r": 8,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": "CENTER",
      "counterAxisAlignItems": "CENTER",
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#262626",
          "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
          "token": {
            "cssVar": "--bg-layer3",
            "figmaName": "Color Type/Background/Layer_3",
            "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
            "strategy": "hex-fallback"
          }
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "A",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 12,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 16,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "description": null,
      "componentSetId": "4949:7176",
      "componentPropertyReferences": null
    },
    {
      "id": "4949:7109",
      "name": "type=donut",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 220,
      "w": 240,
      "x": 320,
      "y": 40,
      "pH": 16,
      "pV": 16,
      "pR": 16,
      "pB": 16,
      "gap": 12,
      "r": 8,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": "CENTER",
      "counterAxisAlignItems": "CENTER",
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#262626",
          "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
          "token": {
            "cssVar": "--bg-layer3",
            "figmaName": "Color Type/Background/Layer_3",
            "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
            "strategy": "hex-fallback"
          }
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "75%",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 12,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 16,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#ffffff"
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "description": null,
      "componentSetId": "4949:7176",
      "componentPropertyReferences": null
    },
    {
      "id": "4949:7121",
      "name": "type=line",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 270,
      "w": 320,
      "x": 600,
      "y": 40,
      "pH": 16,
      "pV": 16,
      "pR": 16,
      "pB": 16,
      "gap": 12,
      "r": 8,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": null,
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#262626",
          "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
          "token": {
            "cssVar": "--bg-layer3",
            "figmaName": "Color Type/Background/Layer_3",
            "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
            "strategy": "hex-fallback"
          }
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "100",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 12,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 16,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "description": null,
      "componentSetId": "4949:7176",
      "componentPropertyReferences": null
    },
    {
      "id": "4949:7146",
      "name": "type=bar",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 270,
      "w": 320,
      "x": 960,
      "y": 40,
      "pH": 16,
      "pV": 16,
      "pR": 16,
      "pB": 16,
      "gap": 12,
      "r": 8,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": null,
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#262626",
          "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
          "token": {
            "cssVar": "--bg-layer3",
            "figmaName": "Color Type/Background/Layer_3",
            "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
            "strategy": "hex-fallback"
          }
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "100",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 12,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 16,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "description": null,
      "componentSetId": "4949:7176",
      "componentPropertyReferences": null
    },
    {
      "id": "4949:7159",
      "name": "type=bar-horizontal",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 220,
      "w": 240,
      "x": 40,
      "y": 350,
      "pH": 16,
      "pV": 16,
      "pR": 16,
      "pB": 16,
      "gap": 10,
      "r": 8,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": null,
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#262626",
          "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
          "token": {
            "cssVar": "--bg-layer3",
            "figmaName": "Color Type/Background/Layer_3",
            "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
            "strategy": "hex-fallback"
          }
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "CPU",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 12,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 16,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "description": null,
      "componentSetId": "4949:7176",
      "componentPropertyReferences": null
    },
    {
      "id": "4953:7170",
      "name": "type=line-bar",
      "type": "COMPONENT",
      "visible": true,
      "opacity": 1,
      "blendMode": "PASS_THROUGH",
      "h": 270,
      "w": 320,
      "x": 320,
      "y": 350,
      "pH": 16,
      "pV": 16,
      "pR": 16,
      "pB": 16,
      "gap": 8,
      "r": 8,
      "layoutMode": "VERTICAL",
      "primaryAxisAlignItems": null,
      "counterAxisAlignItems": null,
      "fills": [
        {
          "type": "SOLID",
          "visible": true,
          "opacity": 1,
          "blendMode": "NORMAL",
          "hex": "#262626",
          "v": "VariableID:VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
          "token": {
            "cssVar": "--bg-layer3",
            "figmaName": "Color Type/Background/Layer_3",
            "variableId": "VariableID:93476370766e7edf391998c8568deada1951f9e6/4684:3",
            "strategy": "hex-fallback"
          }
        }
      ],
      "strokes": [],
      "strokeWeight": 1,
      "effects": [],
      "text": {
        "characters": "100",
        "visible": true,
        "opacity": 1,
        "blendMode": "PASS_THROUGH",
        "size": 12,
        "fontFamily": "Roboto",
        "fontWeight": 400,
        "lineHeightPx": 16,
        "letterSpacing": 0,
        "textCase": null,
        "textDecoration": null,
        "fills": [
          {
            "type": "SOLID",
            "visible": true,
            "opacity": 1,
            "blendMode": "NORMAL",
            "hex": "#cccccc",
            "v": "VariableID:VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
            "token": {
              "cssVar": "--color-grey-5",
              "figmaName": null,
              "variableId": "VariableID:b35edd8cd173ead8f0ac251b3f00a9ec9a7b61f4/3010:117",
              "strategy": "direct-variable-id-map"
            }
          }
        ],
        "v": null,
        "compositeToken": null
      },
      "vectorNodeIds": [],
      "description": null,
      "componentSetId": "4949:7176",
      "componentPropertyReferences": null
    }
  ],
  "tokenizedAt": "2026-05-08T04:02:55.497Z",
  "tokenizationStrategy": "variable-id-first-then-hex-fallback",
  "source": {
    "sourceLayer": "figma-data/raw/components",
    "sourceFile": "figma-data/raw/components/chart__4949_7176.json",
    "rawExtractedAt": "2026-05-08T03:56:19.859Z",
    "rawNodeId": "4949:7176",
    "rawSha256": "7cd15d3006bc20c374270bc509b4d0a200fc40c84d0b7786b0f8c12eb0bd97fb"
  }
}