{
  "name": "GranularitySelectFieldPro",
  "label": "Granularity Select Field",
  "description": "Dropdown for picking time granularity (day, week, month, …). Pairs with a granularity variable used as a sub-input on a time dimension.",
  "category": "Dropdowns - dates",
  "defaultWidth": 300,
  "defaultHeight": 120,
  "inputs": [
    {
      "name": "title",
      "type": "string",
      "label": "Title",
      "category": "Component Header"
    },
    {
      "name": "description",
      "type": "string",
      "label": "Description",
      "category": "Component Header"
    },
    {
      "name": "tooltip",
      "type": "string",
      "label": "Tooltip",
      "category": "Component Header"
    },
    {
      "name": "placeholder",
      "type": "string",
      "label": "Placeholder",
      "category": "Component Settings",
      "defaultValue": "Select a granularity"
    },
    {
      "name": "granularities",
      "type": "granularity",
      "label": "Available granularities",
      "array": true,
      "defaultValue": [
        "hour",
        "day",
        "week",
        "month",
        "quarter",
        "year"
      ],
      "category": "Pre-configured variables"
    },
    {
      "name": "granularity",
      "type": "granularity",
      "label": "Selected granularity",
      "category": "Pre-configured variables"
    },
    {
      "name": "primaryTimeRange",
      "type": "timeRange",
      "label": "Primary date-range",
      "description": "Connect your primary date-range variable to enable automatic selection of the most appropriate granularity",
      "category": "Pre-configured variables"
    },
    {
      "type": "boolean",
      "name": "clearable",
      "label": "Can be cleared",
      "defaultValue": false,
      "category": "Component Settings"
    }
  ],
  "events": [
    {
      "name": "onChange",
      "label": "Selected granularity updated",
      "properties": [
        {
          "name": "value",
          "label": "Selected granularity",
          "type": "granularity"
        }
      ]
    }
  ],
  "variables": [
    {
      "name": "granularity value",
      "type": "granularity",
      "defaultValue": "day",
      "inputs": [
        "granularity"
      ],
      "events": [
        {
          "name": "onChange",
          "property": "value"
        }
      ]
    }
  ]
}