{
  "apiVersion": 3,
  "title": "Chart",
  "name": "brandy/chart",
  "category": "brandy-blocks",
  "description": "Bar, line, area, pie and donut charts. Server-rendered, so the data is readable without JavaScript.",
  "keywords": [
    "chart",
    "graph",
    "bar",
    "line",
    "pie",
    "donut",
    "data",
    "statistics"
  ],
  "attributes": {
    "chartType": {
      "type": "string",
      "default": "bar",
      "enum": [
        "bar",
        "line",
        "area",
        "pie",
        "donut"
      ]
    },
    "orientation": {
      "type": "string",
      "default": "vertical",
      "enum": [
        "vertical",
        "horizontal"
      ]
    },
    "stacked": {
      "type": "boolean",
      "default": false
    },
    "categories": {
      "type": "array",
      "default": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun"
      ]
    },
    "series": {
      "type": "array",
      "default": [
        {
          "label": "Online store",
          "color": "",
          "data": [
            18400,
            21300,
            19800,
            26500,
            28100,
            31200
          ]
        },
        {
          "label": "Retail",
          "color": "",
          "data": [
            12100,
            13500,
            14200,
            15800,
            16400,
            17900
          ]
        }
      ]
    },
    "paletteName": {
      "type": "string",
      "default": "light",
      "enum": [
        "light",
        "dark"
      ]
    },
    "surfaceColor": {
      "type": "string",
      "default": ""
    },
    "plotHeight": {
      "type": "number",
      "default": 320
    },
    "barMaxThickness": {
      "type": "number",
      "default": 24
    },
    "donutHole": {
      "type": "number",
      "default": 55
    },
    "showLegend": {
      "type": "boolean",
      "default": true
    },
    "legendPosition": {
      "type": "string",
      "default": "bottom",
      "enum": [
        "top",
        "bottom"
      ]
    },
    "showGrid": {
      "type": "boolean",
      "default": true
    },
    "showValueAxis": {
      "type": "boolean",
      "default": true
    },
    "showCategoryAxis": {
      "type": "boolean",
      "default": true
    },
    "rotateCategoryLabels": {
      "type": "boolean",
      "default": false
    },
    "axisMin": {
      "type": "string",
      "default": ""
    },
    "axisMax": {
      "type": "string",
      "default": ""
    },
    "tickCount": {
      "type": "number",
      "default": 5
    },
    "valuePrefix": {
      "type": "string",
      "default": "$"
    },
    "valueSuffix": {
      "type": "string",
      "default": ""
    },
    "decimals": {
      "type": "number",
      "default": 0
    },
    "thousandSeparator": {
      "type": "boolean",
      "default": true
    },
    "valueLabels": {
      "type": "string",
      "default": "selective",
      "enum": [
        "none",
        "selective",
        "all"
      ]
    },
    "smoothLine": {
      "type": "boolean",
      "default": false
    },
    "showMarkers": {
      "type": "boolean",
      "default": true
    },
    "showTooltip": {
      "type": "boolean",
      "default": true
    },
    "showDataTable": {
      "type": "boolean",
      "default": true
    },
    "dataTableLabel": {
      "type": "string",
      "default": "Show data"
    },
    "categoryHeading": {
      "type": "string",
      "default": "Category"
    },
    "animate": {
      "type": "boolean",
      "default": true
    },
    "chartLabel": {
      "type": "string",
      "default": ""
    }
  },
  "variations": [
    {
      "name": "bar",
      "title": "Bar chart",
      "description": "Compare values across categories.",
      "isDefault": true,
      "scope": [
        "inserter",
        "transform"
      ],
      "attributes": {
        "chartType": "bar"
      }
    },
    {
      "name": "line",
      "title": "Line chart",
      "description": "Show a trend over time.",
      "scope": [
        "inserter",
        "transform"
      ],
      "attributes": {
        "chartType": "line",
        "valuePrefix": "",
        "categories": [
          "Week 1",
          "Week 2",
          "Week 3",
          "Week 4",
          "Week 5",
          "Week 6",
          "Week 7",
          "Week 8"
        ],
        "series": [
          {
            "label": "Sessions",
            "color": "",
            "data": [
              4200,
              4650,
              4380,
              5210,
              5890,
              5640,
              6480,
              7120
            ]
          },
          {
            "label": "Orders",
            "color": "",
            "data": [
              310,
              348,
              322,
              401,
              452,
              437,
              508,
              566
            ]
          }
        ]
      }
    },
    {
      "name": "area",
      "title": "Area chart",
      "description": "A single trend, filled to the baseline.",
      "scope": [
        "inserter",
        "transform"
      ],
      "attributes": {
        "chartType": "area",
        "valuePrefix": "",
        "valueSuffix": " kg",
        "categories": [
          "2019",
          "2020",
          "2021",
          "2022",
          "2023",
          "2024",
          "2025"
        ],
        "series": [
          {
            "label": "Recycled packaging",
            "color": "",
            "data": [
              1200,
              1850,
              2600,
              3900,
              5400,
              7100,
              9250
            ]
          }
        ]
      }
    },
    {
      "name": "pie",
      "title": "Pie chart",
      "description": "Part-to-whole, at a glance.",
      "scope": [
        "inserter",
        "transform"
      ],
      "attributes": {
        "chartType": "pie",
        "valuePrefix": "",
        "valueSuffix": "%",
        "categories": [
          "Organic search",
          "Direct",
          "Social",
          "Email",
          "Referral"
        ],
        "series": [
          {
            "label": "Traffic sources",
            "color": "",
            "data": [
              42,
              23,
              16,
              12,
              7
            ]
          }
        ]
      }
    },
    {
      "name": "donut",
      "title": "Donut chart",
      "description": "Part-to-whole with room in the middle.",
      "scope": [
        "inserter",
        "transform"
      ],
      "attributes": {
        "chartType": "donut",
        "categories": [
          "Apparel",
          "Footwear",
          "Accessories",
          "Home"
        ],
        "series": [
          {
            "label": "Revenue by category",
            "color": "",
            "data": [
              48200,
              31500,
              18400,
              9700
            ]
          }
        ]
      }
    }
  ],
  "example": {
    "viewportWidth": 800,
    "attributes": {
      "chartType": "bar",
      "plotHeight": 220,
      "valueLabels": "none",
      "showDataTable": false
    }
  },
  "supports": {
    "reusable": false,
    "html": false,
    "interactivity": true,
    "color": {
      "gradients": true,
      "__experimentalDefaultControls": {
        "background": true
      }
    },
    "spacing": {
      "margin": true,
      "padding": true
    },
    "typography": {
      "fontSize": true,
      "__experimentalFontFamily": true
    },
    "align": [
      "wide",
      "full"
    ]
  },
  "render": "file:./render.php",
  "textdomain": "brandy-blocks",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScriptModule": "file:./view.js"
}