Skip to main content

Insight Pane Bricks

PurposeExplore this guide to uncover the Insight Pane Bricks and learn how to set them up. We will guide you through the simple steps to configure the Insight Pane Brick, making it easy for you to use and enhance your projects.
Last UpdatedMay 16, 2024

About Insight Pane bricks​

Specifically crafted for configuring the visualization aspect of the Query App, Insight Pane Bricks enable users to customize how tables are presented graphically.

Creating a Brick​

To create a new Insight Pane Brick, navigate to Settings / Brick Management V3 and click CREATE BRICK in the top right corner.

Fill in the name and description and select Dashboard Pane as Type.

If you have an existing Brick you can fork it, helping you to skip several steps of the configuration process.

Code​

  1. To start writing the brick code, navigate to Code and click + to add a python file called main.py.

  2. Create a file called config.json. This file determines the configuration parameters of your brick. More information on this configuration file will follow in the Configuration section.

Chart Class​

Implement a Chart class. This class holds the core logic of your brick.

render() method​

This method allows determines how your visualization will be rendered.

Contains the following Parameters:

  • df (String): DataFrame containing the query results.
  • **kwargs: The parameters configured will be passed to the render method as keyword arguments. The names of these arguments will correspond with the names configured in the configuration file.

returns​

chart (Chart): Chart has the following initialization parameters:

  • data: The data of your chart.
    • content_type: The content type of your chart. Can be one of: SVG: image/svg+xml Apache Echarts:application/vnd.echart+json Plotly:application/vnd.plotly+json Vega: application/vnd.vega.v5+json

Configuration​

The example below a configuration in config.json:

{
    "params": [
        {
            "name": "x",
            "default": null,
            "required": true,
            "label": "Select x field",
            "placeholder": "Select y column",
            "type": "column",
        },
        {
            "name": "y",
            "default": null,
            "required": true,
            "label": "Select y field",
            "placeholder": "Select y column",
            "type": "column"
        },
        {
            "name": "y",
            "default": null,
            "required": true,
            "label": "Select y field",
            "placeholder": "Select y column",
            "type": "column"
        }
    ]

}

In this case, the visualization is configured by setting an x and and y column parameter.

Parameters can have the following types:

  • str: Allows you to set a string parameter. This is useful for titles, descriptions, and discrete configuration options.
  • column: This will allow you to select one of the columns from the query results.
  • columns: This allows you to select one or multiple columns from the query results.
  • int: This lets you to set an integer parameter. This is useful for thresholds, sizes, and offsets.
  • float: This lets you to set a float parameter. This is useful for thresholds, sizes, and offsets.

By following these steps, you can effectively customize the visualization of query results according to your preferences.

Examples of Insight Pane Bricks Libraries:​

The Portal provides you with distinct Libraries to choose from when selecting a Pane, between them we have:

  1. eChart: This is an open-source JavaScript library.

    For more information on eChart follow link below:

    Learn more about eChart.

  2. Plotly: This is an open-source Python library.

    For more information on the Plotly Library follow the link below:

    Learn more about Plotly.

  3. Vega: Vega stands out as a graphing library written in JSON, offering a unique approach to creating data visualizations.

    For more information on the Vega Library follow the link below:

    Learn more about Vega

Choose a Library based on your specific visualization needs, as each Library offers distinct features, such as different axis types or data plotting capabilities.