Initialize Chart With SDK

Pre-conditions

Check if you have completed the activities listed in the previous lessons, the following steps in particular:

You have gone to the start coding section of tutorial.
You have downloaded the GitHub source code as described in the Set up for the course lesson.
You have a ThoughtSpot account with Developer privileges
You have configured the security settings to enable Custom Charts

Initialize Chart Context

Chart Context is the main context object that helps in orchestrating ThoughtSpot APIs to render charts. It also acts as a core central point of all interactions on the charts.

Import getChartContext and other types from ts-chart-sdk using the following:

import {
  ChartColumn,
  ChartConfig,
  ChartModel,
  ColumnType,
  CustomChartContext,
  getCfForColumn,
  getChartContext,
  Query,
  ValidationResponse,
  VisualPropEditorDefinition,
  VisualProps,
} from "@thoughtspot/ts-chart-sdk";
import _ from "lodash";

To initialize the chart context, call getChartContext in custom-charts.ts and comment the code in the previous set up we will be using that code to render chart from the context we are passing in renderChart in below.

(async () => {
const ctx = await getChartContext({
    getDefaultChartConfig: (chartModel: ChartModel): ChartConfig[] => {
        const cols = chartModel.columns;

        const measureColumns = _.filter(
            cols,
            (col) => col.type === ColumnType.MEASURE,
        );

        const attributeColumns = _.filter(
            cols,
            (col) => col.type === ColumnType.ATTRIBUTE,
        );

        const axisConfig: ChartConfig = {
            key: 'column',
            dimensions: [
                {
                    key: 'x',
                    columns: [attributeColumns[0]],
                },
                {
                    key: 'y',
                    columns: measureColumns.slice(0, 2),
                },
            ],
        };
        return [axisConfig];
    },
    getQueriesFromChartConfig: (
        chartConfig: ChartConfig[],
    ): Array<Query> => {
        const queries = chartConfig.map(
            (config: ChartConfig): Query =>
                _.reduce(
                    config.dimensions,
                    (acc: Query, dimension) => ({
                        queryColumns: [
                            ...acc.queryColumns,
                            ...dimension.columns,
                        ],
                    }),
                    {
                        queryColumns: [],
                    } as Query,
                ),
        );
        return queries;
    },
        validateConfig: (
            updatedConfig: any[],
            chartModel: any,
        ): ValidationResponse => {
            if (updatedConfig.length <= 0) {
                return {
                    isValid: false,
                    validationErrorMessage: ['Invalid config. no config found'],
                };
            } else {
                return {
                    isValid: true,
                };
            }
        },
        chartConfigEditorDefinition: (
            currentChartConfig: ChartModel,
            ctx: CustomChartContext,
        ): ChartConfigEditorDefinition[] => {
            const { config, visualProps } = currentChartConfig;

            const yColumns = config?.chartConfig?.[0]?.dimensions.find(
                (dimension) => dimension.key === 'y' && dimension.columns,
            );

            const configDefinition = [
                {
                    key: 'column',
                    label: 'Custom Column',
                    descriptionText:
                        'X Axis can only have attributes, Y Axis can only have measures, Color can only have attributes. ' +
                        'Should have just 1 column in Y axis with colors columns.',
                    columnSections: [
                        {
                            key: 'x',
                            label: 'Custom X Axis',
                            allowAttributeColumns: true,
                            allowMeasureColumns: false,
                            allowTimeSeriesColumns: true,
                            maxColumnCount: 1,
                        },
                        {
                            key: 'y',
                            label: 'Custom Y Axis',
                            allowAttributeColumns: false,
                            allowMeasureColumns: true,
                            allowTimeSeriesColumns: false,
                        },
                    ],
                },
            ];
            if (yColumns?.columns.length) {
                for (let i = 0; i < yColumns.columns.length; i++) {
                    configDefinition[0].columnSections.push({
                        key: `layers${i}`,
                        label: `Measures layer${i}`,
                        allowAttributeColumns: false,
                        allowMeasureColumns: true,
                        allowTimeSeriesColumns: false,
                    });
                }
            }
            return configDefinition;
        },
        visualPropEditorDefinition: (
            currentVisualProps: ChartModel,
            ctx: CustomChartContext,
        ): VisualPropEditorDefinition => {
            const { visualProps } = currentVisualProps;
            const elements = [
                {
                    key: 'color',
                    type: 'radio',
                    defaultValue: 'red',
                    values: ['red', 'green', 'yellow'],
                    label: 'Colors',
                },
                {
                    type: 'section',
                    key: 'accordion',
                    label: 'Accordion',
                    children: [
                        {
                            key: 'datalabels',
                            type: 'toggle',
                            defaultValue: false,
                            label: 'Data Labels',
                        },
                    ],
                },
            ];
            if (visualProps?.length !== 0) {
                if (visualProps?.accordion?.datalabels) {
                    elements[1].children?.push({
                        key: 'Color2',
                        type: 'radio',
                        defaultValue: 'blue',
                        values: ['blue', 'white', 'red'],
                        label: 'Color2',
                    });
                }
            }
            return { elements };
        }
    renderChart: (ctx) => renderChart(ctx),
});

renderChart(ctx);
})();

info

Naming of folders does not affect functionality it is just advised to use this nomenclature, you can name file or folder according to your choice.

tip

For more information about the chart context component, refer to the following documentation resources:

CustomChartContextProps

CustomChartContext

The custom chart context component must include the following mandatory properties to function:

We will have a learn about each key in getChartContext in next tutorial.

Pre-conditions​

Initialize Chart Context​

Pre-conditions

Initialize Chart Context