Callback custom actions

const onCustomAction = () => {
        const embed = new LiveboardEmbed("#embed", {
            liveboardId: "e40c0727-01e6-49db-bb2f-5aa19661477b",
            vizId: "8d2e93ad-cae8-4c8e-a364-e7966a69a41e",
        });
        embed.on(EmbedEvent.CustomAction, payload => {
                if (payload.id === "show-data" || "payload.data.id === show-data") {
                    showData(payload)
                }
            })
            .render();
        const showData = (payload) => {
            const liveboardActionData = LiveboardActionData.createFromJSON(payload);
            const dataElement = document.getElementById('show-data');
            dataElement.style.display = 'block';
        }

/**
 * This class handles data from Liveboard visualizations if the callback action is set as
 * a More menu or primary action.
 * It does not work for Search or saved Answer data payloads or callback actions in the context menus.
 */
class LiveboardActionData {
  /**
   * Creates a new LiveboardContextActionData  from the payload.
   * @param jsonData  A string from payload.data
   * @returns {LiveboardContextActionData}
   */
    static createFromJSON(jsonData) {
        let isV1 = true;
        // Handle data structure differences between Liveboards operating in the classic and new experience modes.
        if (typeof jsonData.data === 'string' || jsonData.data instanceof String) {
            jsonData = JSON.parse(jsonData.data);
            isV1 = true;
        } else {
            jsonData = jsonData.data;
            isV1 = false;
        }
        const liveboardActionData = new LiveboardActionData(jsonData);
        try {
            const columnNames = [];
            const data = [];

            if (isV1) {
                const reportBookData = getValues(jsonData.reportBookData)[0]; // assume there's only one.
                const vizData = getValues(reportBookData.vizData)[0]; // assume there's only one.

                // Get the column meta information.
                const columns = vizData.dataSets.PINBOARD_VIZ.columns;
                const nbrCols = columns.length;
                for (let colCnt = 0; colCnt < nbrCols; colCnt += 1) {
                    columnNames.push(columns[colCnt].column.name);
                }
                // can come in two flavors, so need to get the right data
                const dataSet = (Array.isArray(vizData.dataSets.PINBOARD_VIZ.data)) ?
                    vizData.dataSets.PINBOARD_VIZ.data[0].columnDataLite :
                    vizData.dataSets.PINBOARD_VIZ.data.columnDataLite;

                for (let cnt = 0; cnt < columnNames.length; cnt++) {
                    data.push(dataSet[cnt].dataValue); // should be an array of columns values.
                }
            } else { // is v2
                const columns = jsonData.embedAnswerData.columns;
                const nbrCols = columns.length;
                for (let colCnt = 0; colCnt < nbrCols; colCnt++) {
                    columnNames.push(columns[colCnt].column.name);
                }
                for (let colCnt = 0; colCnt < nbrCols; colCnt++) {
                    // The data is always under 0 for what we want.
                    data.push(jsonData.embedAnswerData.data[0].columnDataLite[colCnt].dataValue);
                }
            }
            liveboardActionData.columnNames = columnNames;
        } catch (error) {
            console.error(`Error creating Liveboard action data: ${error}`);
            console.error(jsonData);
        }
        return liveboardActionData;
    }
}

const showData = (payload) => {
    const data = payload.data;
    if (data.id === 'show-data') {
        // Display the data as a table.
        const actionData = ActionData.createFromJSON(payload);
        const html = actionDataToHTML(actionData);
        const dataContentElement = document.getElementById('modal-data-content');
        dataContentElement.innerHTML = html;
        const dataElement = document.getElementById('show-data');
        dataElement.style.display = 'block';
    } else {
        console.log(`Got unknown custom actions ${data.id}`);
    }
}

//This function converts column-based representations of the data to a table for display
const zip = (arrays) => {
    return arrays[0].map(function(_, i) {
        return arrays.map(function(array) {
            return array[i]
        })
    });
}
/**
 * This class handles data from Search and Answers if the callback action is set as a More menu or primary action.
 * It does not work for Liveboard visualizations or callback actions in the context menu.
 */
class ActionData {
    // Wrapper for the data sent when a custom action is triggered.
    constructor() {
        this._columnNames = []; // list of the columns in order.
        this._data = {}; // data is stored and indexed by column with the index being column name.
    }
    get nbrRows() {
        // Returns the number of rows.  Assumes all columns are of the same length.
        if (this._columnNames && Object.keys(this._data)) { // make sure there is some data.
            return this._data[this._columnNames[0]]?.length;
        }
        return 0;
    }
    get nbrColumns() {
        // Returns the number of columns.
        return this._columnNames.length;
    }
    static createFromJSON(jsonData) {
        // Creates a new ActionData object from JSON.
        const actionData = new ActionData();
        // Gets the column names.
        const nbrCols = jsonData.data.embedAnswerData.columns.length;
        for (let colCnt = 0; colCnt < nbrCols; colCnt += 1) {
            actionData._columnNames.push(jsonData.data.embedAnswerData.columns[colCnt].column.name);
        }
        let dataSet;
        dataSet = (Array.isArray(jsonData.data.embedAnswerData.data)) ?
            jsonData.data.embedAnswerData.data[0].columnDataLite :
            jsonData.data.embedAnswerData.data.columnDataLite;
        for (let colCnt = 0; colCnt < actionData.nbrColumns; colCnt++) {
            actionData._data[actionData._columnNames[colCnt]] = Array.from(dataSet[colCnt].dataValue); // shallow copy the data
        }
        return actionData
    }
    getDataAsTable() {
        // returns the data as a table.  The columns will be in the same order as the column headers.
        const arrays = []
        for (const cname of this._columnNames) {
            arrays.push(this._data[cname])
        }
        return zip(arrays); // returns a two dimensional data array
    }
}
const actionDataToHTML = (actionData) => {
    // Converts an ActionData data to an HTML table.
    let table = '<table class="tabular-data">';
    // Add a header
    table += '<tr>';
    for (const columnName of actionData._columnNames) {
        table += `<th class="tabular-data-th">${columnName}</th>`;
    }
    table += '</tr>';
    const data = actionData.getDataAsTable();
    for (let rnbr = 0; rnbr < actionData.nbrRows; rnbr++) {
        table += '<tr>';
        for (let cnbr = 0; cnbr < actionData.nbrColumns; cnbr++) {
            table += `<td class="tabular-data">${data[rnbr][cnbr]}</td>`;
        }
        table += '</tr>';
    }
    table += '</table>';
    return table;
}
export {
    ActionData,
    actionDataToHTML
}