Configuring visualization overrides

import {
    init, // Core SDK initialization function.
    AuthType, // for authentication type selection.
    SearchEmbed, // Embeds the ThoughtSpot Search page into a host application.
    ConditionalFormattingOperator, // Enum for conditional formatting comparison operators.
    DataLabelFilterOperator, // Enum for data label filter operators.
    ConditionalFormattingComparisonType, // Enum for conditional formatting comparison.
    BackgroundFormatType, // Enum for the background fill type in conditional formatting rules.
    TableTheme, // Enum for the visual theme of embedded tables.
    TableContentDensity, // Enum for the row height and padding density of embedded tables.
    LegendPosition, // Enum for the position of the chart legend.
} from "@thoughtspot/visual-embed-sdk";

init({
    thoughtSpotHost: '<ThoughtSpot Host>', // Replace with your application URL
    authType: AuthType.None,
});

const embed = new SearchEmbed('#tsEmbed', {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSource: "<data-source-id>", // Replace with your application URL
    visualOverrides: {
        chart: {
            // Show or hide the chart legend, and set its position.
            legend: {
                show: true,
                position: LegendPosition.Bottom,
            },
            // Data labels to show on chart series.
            dataLabel: {
                // Show labels on all data points across all series.
                allLabels: true,
                // Show cumulative total labels on stacked chart segments.
                stackLabels: true,
                // Per-column label visibility and optional value filters.
                // Use filters to suppress labels below or above a threshold.
                columnDataLabel: [{
                        name: 'Ship Mode',
                        visible: true,
                        // Only show the data label when the value is greater than 0
                        filter: {
                            value: 0,
                            operator: DataLabelFilterOperator.GreaterThan
                        },
                    },
                    {
                        name: 'Discount',
                        // Hide data labels for this column entirely.
                        visible: false,
                        // No filter applied
                        filter: null, //label is hidden regardless of value.
                    },
                ],
            },
            // chart display settings.
            display: {
                // Controls row/column summary rows on crosstab (pivot) charts.
                summaries: {
                    showRowTotals: true, // Show totals at the end of each row.
                    showColumnTotals: false, // Hide totals at the bottom of each column.
                    showRowGrandTotals: true, // Show the grand total row.
                    showColumnGrandTotals: true, // Show the grand total column.
                },
                // Show a statistical regression (trend) line on the chart.
                regressionLine: true,
                // Show or hide horizontal and vertical grid lines.
                gridLine: {
                    x: true, // Show vertical grid lines (x-axis).
                    y: true, // Show horizontal grid lines (y-axis).
                },
            },

            // Each entry in this array configures one axis group. columns listed in "linkedColumns" share the same axis settings.
            axis: [{
                // Columns bound to this axis configuration.
                linkedColumns: ['Total Discount', 'Ship Mode'],

                // Show the axis name label.
                showName: true,

                // Show tick mark value labels along the axis.
                showLabelValue: true,

                // Fix the y-axis domain to a specific minimum/maximum range.
                // Useful for enforcing a consistent scale across embed instances.
                yAxisRange: {
                    min: 0,
                    max: 100,
                },
            }, ],
            // Per-column series color and conditional formatting rules.
            columns: [{
                name: 'Total Discount',
                // Default series color for this column (hex string).
                color: '#ababab',
                // Applies visual formatting rules to data points that meet the specified conditions. Each entry in rows[] is one rule.
                conditionalFormatting: {
                    rows: [{
                        // Trigger this rule when the cell value is greater than 3300.
                        operator: ConditionalFormattingOperator.GreaterThan,
                        value: '3300',
                        // When true, draws a reference band across the chart instead of coloring individual data points.
                        plotAsBand: true,
                        // Compare the column value against a literal value.
                        comparisonType: ConditionalFormattingComparisonType.ValueBased,
                        // The column whose value is evaluated against the rule.
                        lhsColumnId: 'Total Discount',
                        // Applied to cell text when the condition is met.
                        fontProperties: {
                            color: '#ffffff', // White text.
                            bold: true,
                            italic: false,
                            strikeThrough: false,
                            underline: false,
                        },
                        // Use a solid fill color or a gradient fill.
                        backgroundFormatType: BackgroundFormatType.Solid,
                        solidBackgroundAttrs: {
                            color: '#2E75F0', // Blue background when condition is met.
                        },

                        // For gradient fill, set "BackgroundFormatType.Gradient".
                        // backgroundFormatType: BackgroundFormatType.Gradient,
                        // gradientBackgroundAttrs: {
                        //     colors: ['#000000', '#ffffff'],
                        // },
                    }, ],
                },
            }, ],

            // Field mask for partial updates. An empty array applies all provided fields.
            updateMaskPaths: [],
        },
        table: {
            // Per-column overrides for visibility, text wrapping, and conditional formatting.
            columns: [{
                    name: "Total Discount", // Column name
                    wrapText: true, //  wrap long content across multiple lines
                    show: true,
                    // Conditional formatting rules to cells in this column.
                    conditionalFormatting: {
                        rows: [{
                            // Trigger rule based on the cell value. Compares the column value against the literal string in `value`.
                            operator: ConditionalFormattingOperator.GreaterThan,
                            value: "3300",
                            // For value range-based matching condition, use `ConditionalFormattingOperator.IsBetween` and `rangeValues`
                            // operator: ConditionalFormattingOperator.IsBetween ('IS_BETWEEN').
                            // rangeValues: { min: 0, max: 1000000 },
                            // Apply formatting to the entire table row instead of just the individual cell.
                            isHighlightRow: false,
                            comparisonType: ConditionalFormattingComparisonType.ValueBased,
                            // The column whose value is evaluated against the rule (left-hand side).
                            lhsColumnId: "Total Discount",
                            // Text styling applied to the cell when the condition is met.
                            fontProperties: {
                                color: "#ffffff", // White text.
                                bold: true,
                                italic: false,
                                strikeThrough: false,
                                underline: false,
                            },

                            // Use solid or gradient fill color for background styling
                            backgroundFormatType: BackgroundFormatType.Solid,
                            solidBackgroundAttrs: {
                                color: "#2E75F0", //Solid fill color applied when the condition is met.
                            },
                        }, ],
                    },
                },

                // second column with no conditional formatting.
                {
                    name: "Ship Mode",
                    wrapText: false,
                    show: true,
                },
            ],
            // Table-level display settings.
            display: {
                // Set the row height and padding density of the table.
                tableContentDensity: TableContentDensity.Compact, // Use TableContentDensity.Regular for standard row height.
            },
            displaySummaryConfig: {
                // Show summary rows for all columns by default.
                showAllSummaries: true,
                // Per-column exceptions to showAllSummaries.
                columnVisibility: [{
                        columnId: "Total Discount",
                        visible: false
                    },
                    {
                        columnId: "Total Extended Price",
                        visible: false
                    },
                ],
            },

            // Field mask for partial updates. An empty array applies all provided fields.
            updateMaskPaths: [],

        },
    },
});

embed.render();