07-Intro to getChartContext

Pre-conditions

If you’ve followed the steps in the previous sections, you should have a copy of the code and be able to run it with an error on renderChart. If not, please revisit the previous lessons to get set up.

We will implement renderChart in next tutorial for now let have a quick intro to all the keys in getChartContext Object.

getDefaultChartConfig (Doc)

This function takes in a ChartModel object and returns a well-formed point configuration definition.

Here we are creating bar chart so we will get chartModel with one column as attribute and other as measure so we are classifying them as x and y labels.

To create a bar version of the data set, the above-mentioned headers must be presented as columns from ThoughtSpot. The query on the ThoughtSpot Answer page should have all the above columns to plot a bar chart.

getQueriesFromChartConfig (Doc)

This method defines the data query that is required to fetch the data from ThoughtSpot to render the chart. For most use cases, you do not require the data outside of the columns listed in your chart.

This example bar chart all the columns in the configuration as an array of columns in the arguments.

validateConfig (Doc)

This method use to apply any custom validation that is required by developer on the chartconfig and chartModel. For example you want to user have a certain input validation in some form that changing chartconfig or chartModel you can do validations here. This a optional method.

In the code snippet we are checking if config is not empty. You can send your custom error message in validationErrorMessage.

chartConfigEditorDefinition (Doc)

This is a optional method provided in getChartContext where you can define the custom config editor that will be shown in settings in TS and leverage TS feature from there. It take chartModel and customChartContext as parameter and return the chartConfigEditorDefinition[] which contain columnSection where you can define editor column for each config axis.

In the current example we are defining editor for one attribute and remaining measure column values.

visualPropEditorDefinition (Doc)

This is a optional method provided in getChartContext where you can define custom visual editor property that can levarage TS features. This will be shown in setting in TS. It takes currentVisualProp and customChartContextbased on which can define the current visual prop editor. You can see type of propElement we support in doc

In this example we are defining radio element for applying different color in bar element and accordian for datalabels that when set to true will show color2 which will used to select color for data labels.

renderChart (Doc)

This renderChart (Doc) function is required to render the chart implemented in your code. This function ensures that every time chartContext tries to re-render the chart due to the changes in data or chart model, the chart rendered in your application is updated.

Note: You can control render and re-render by implementing more granular control for the updates on data, visual props, or chart model.