Component SDK → Definition.json

As a React developer, you must get to know the definition.json file with all of the possible values and attributes that will help you develop a custom visualization.

Below is the structure of the definition.json file and the possible attributes and definitions that you can use.

Definitions

Attribute	Description	Example
name	Enter a name for the new chart or visualization you are trying to create	`“name”: “Bar Race Chart”`
hint	Enter a message to show in the tooltip when you hover on the chart in the Visualization panel	`"hint": “This is a custom Bar Race chart developed to serve your business purposes.”`
icon	Enter the path of the icon that will be displayed in the Visualization panel. Note: Images are saved in the local path of the project in the assets folder.	`"icon":"/assets/tour-visualizations-guide/Bar-Race-Chart.png"`
options	Enter the set of settings and filters	`"options":` `{ "aggregation": true,` `"sort": false },`
aggregation	Boolean that indicates whether the data should be aggregated or listed	`"aggregation": true`
sort	Boolean that indicates whether to show or hide the sort by tray	`"sort": false`
individualFilter	Boolean that indicates whether to show or hide the individual filter tray	`"individualFilter": true`
distinctFilter	Boolean that indicates whether to show or hide the distinct filter tray	`"distinctFilter": false`
aggregateFilter	Boolean that indicates whether to show or hide the aggregate filter tray	`"aggregateFilter": false`
settings	Array of settings in the Settings panel	`"settings": [` `{` `}` `]`
bindingsTrays	Array of the available trays, such as a Measure tray	`"bindingsTrays": [` `{` `},` `]`

Settings panel

Attribute	Description	Example
name	The setting group name, which will reflect in the Settings panel	`"name":`
settings	Array of options and settings in the Settings panel group	`"settings": [` `{` `}` `]`

Properties panel

Attribute	Description	Example
key	The unique name to store the value of the tray context	`"key": "name",`
name	The display name of the tray in the Properties panel	`"name": "Name",`
minCount	The minimum number of bindings required in the tray for the visualization to render	`"minCount": 1,`
maxCount	The maximum number of bindings allowed in a tray	`"maxCount": 3,`
queryRole	Specifying the binding type in the data query. The value can be either measure, row, or column	`"queryRole": "column",`
settings	Array of settings in a tray Note: Settings differ depending on the value of the queryRole. For the available setting for each queryRole, refer to queryRole Settings	`"settings": [` `{` `}` `]`

Properties panel settings

Attribute	Description	Example
key	The unique name to store the value of the setting context	`“key": "period",`
name	The display name of the setting in the Settings panel	`"name": "Period",`
type	The type of the setting	`"type": "number",`
defaultValue	The default value of the setting	`"defaultValue": false`
options	When `type` is set as `dropdown`, this attribute is mandatory to contain the drop down list values	`options: [` `]`

The dropdown option is an array of options. Each array consists of a key and a label.

Attribute	Description	Example
key	The drop down unique value to be stored	`"key": "max",`
label	The display name of the drop down list value	`"label": "Maximum"`

Settings panel values

For each chart, you can have a set of settings that control how a chart will behave and display. The below settings will be displayed in the Settings panel of the Analyzer. These settings are part of the custom SDK, which you can use accordingly. When you define a setting, you must also define a name and a key. The key must be of a unique value.

Setting	Description	Note
boolean	Define to show a toggle, which indicate true or false values	`{` `"name": "Is Empty?",` `"key": "isEmpty",` `"type": "boolean",` `"defaultValue": true` `},`
number	Define to show a numeric text box	`{` `"name": "Duration",` `"key": "duration",` `"type": "number",` `"defaultValue": 250` `},`
text	Define to show a text box that accepts alpha-numeric input	`{` `"name": "Brief",` `"key": "brief",` `"type": "text",` `"defaultValue": “Enter your text here”` `}`
dropdown	Define to show a drop down list with multiple string options that you can define in an array as mentioned in Dropdown options	`{` `"key": "true",` `"Label”: “Yes”` `}`
color	Define to show the color picker palette setting	`{` `"name": "Color Palette",` `"key": "color-palette",` `"type": "color"` `}`
page-size	Define to show a numeric text box to control the number of items in a page for the data pagination	`{` `"name": "Pages",` `"key": "pages",` `"type": "page-size"` `}`
max-rows	Define to show numeric text box setting to control the maximum number of rows	`{` `"name": "Maximum Rows",` `"key": "maximum-rows",` `"type": "max-rows"` `}`
row-sub-total	Define to show a toggle setting to calculate the sum for each group of rows	`{` `"name": "Row Subtotal",` `"key": "row-subtotal",` `"type": "row-sub-total"` `}`
row-total	Define to show a toggle setting to calculate the sum of all rows	`{` `"name": "Row Total",` `"key": "row-total",` `"type": "row-total"` `}`
column-sub-total	Define to show a toggle setting to calculate the sum for each group of columns	`{` `"name": "Column Subtotal",` `"key": "column-subtotal",` `"type": "column-sub-total"` `}`
column-total	Define to show a toggle setting to calculate the sum of all columns	`{` `"name": "Column Total",` `"key": "column-total",` `"type": "column-total"` `}`
max-groups	Define to show a numeric text box setting to control the maximum number of data groups	`{` `"name": "Maximum Groups",` `"key": "maximum-groups",` `"type": "max-groups"` `}`
missing-values	Define to show a text box setting, in which you specify text to replace missing values	`{` `"name": "Missing Values",` `"key": "missing-values",` `"type": "missing-values"` `}`
join-measures	Define to show a drop down list setting to calculate the group-by function across joined tables	`{` `"name": "Join Measures?",` `"key": "join-measures",` `"type": "join-measures"` `}`

queryRole settings values

Depending on the value of queryRole you enter, the settings will differ from one queryRole to another. These settings are part of the custom SDK, which you can use accordingly. When you define a setting, you must also define a name and a key, knowing that a key must be of a unique value.

The following is a table that lists the available settings along with their description, availability per queryRole, and examples.

Setting	Description	queryRole Availability	Example
boolean	Define to show a toggle, which indicate true or false values	all	`{` `"name": "Is Percent",` `"key": "isPercent",` `"type": "boolean",` `"defaultValue": true` `},`
number	Define to show a numeric text box	all	`{` `"key": "min",` `"name": "Min",` `"type": "number"` `},`
text	Define to show a text box that accepts alpha-numeric input	all	`{` `"key": "Name",` `"name": "title",` `"type": "text"` `},`
dropdown	Define to show a drop down list with multiple string options that you can define in an array as mentioned in Dropdown options	all	`{` `"key": "Type",` `"name": "type",` `"type": "dropdown"` `},`
color	Define to show the color picker palette setting	all	`{` `"name": "Color",` `"key": "color",` `"type": "color"` `},`
scale	Define to show a drop down list setting with predefined values to choose the data scale display type	measure	`{` `"name": "Data Scale",` `"key": "dataScale",` `"type": "scale"` `},`
running-total	Define to show the running total value setting to enable or disable showing the running total for the measure values	measure	`{` `"name": "Running Total",` `"key": "running-total",` `"type": "running-total"` `},`
filter	Define to show the drag and drop filter setting, in which you can add a column or a formula to filter the measure	measure	`{` `"name": "Filtration",` `"key": "filtration",` `"type": "filter"` `},`
number-format	Define to show the number format settings of the measure	measure	`{` `"name": "Number Format",` `"key": "number-format",` `"type": "number-format"` `},`
date-format	Define to show the date format settings of the measure	measure	`{` `"name": "Date Format",` `"key": "date-format",` `"type": "date-format"` `},`
conditional-formatting	Define to show the + Add Conditional Format link to change the color of a data point based on its value	measure	`{` `"name": "Conditional Formatting",` `"key": "conditional-formatting",` `"type": "conditional-formatting"` `},`
drill-down	Define to show the drill-down option, which enables you to select a dashboard tab to drill down to, when you select a grouping dimension value in the insight	measure and row	`{` `"name": "Dashboard Drilldown",` `"key": "drilldown",` `"type": "drill-down"` `},`
range	Define to show the data range settings	measure	`{` `"name": "Range",` `"key": "range",` `"type": "range"` `},`
show-empty-groups	Define to show the setting to enable or disable showing empty groups	row	`{` `"name": "Show Empty Groups",` `"key": "empty-groups",` `"type": "show-empty-groups"` `},`
sort	Define to show the drag and drop Sort by setting to sort data according to the column you add to this setting	row and column	`{` `"name": "Sort Data",` `"key": "sort-data",` `"type": "sort"` `},`

Definition.json file example

{
  "icon": "./assets/icon.png",
  "name": "KPI",
  "hint": "SimpleKPI Chart",
  "options": {
    "aggregation": true
  },
  "settings": [
    {
      "name": {
        "key": "group"
      },
      "settings": [
        {
          "name": {
            "key": "Max Tiles"
          },
          "key": "maxTiles",
          "type": "number"
        },
        {
          "name": "icon URL",
          "key": "iconURL",
          "type": "text"
        }
      ]
    }
  ],
  "bindingsTrays": [
    {
      "key": "dim",
      "name": "Dimension",
      "queryRole": "row",
      "minCount": 1
    },
    {
      "key": "tray-key",
      "name": "measure1",
      "queryRole": "measure",
      "minCount": 1,
      "settings": [
        {
          "name": "Number Format",
          "settings": [
            {
              "name": "Format",
              "key": "format",
              "type": "number-format"
            }
          ]
        }
      ]
    },
    {
      "key": "tray-key2",
      "name": "measure2",
      "queryRole": "measure",
      "minCount": 1,
      "settings": [
        {
          "name": "Number Format",
          "settings": [
            {
              "name": "Format",
              "key": "format",
              "type": "number-format"
            }
          ]
        }
      ]
    }
  ]
}