OnExportReady

The onExportReady parameter returns the exportResult function that allows you to export data from an existing insight into CSV or XLSX. The exportResult function accepts one parameter (the exportConfig object), and returns the URI of the exported file.

The onExportReady parameter is available in all visual components except for the KPI, the AFM components, and the AttributeFilter component.

exportConfig

The exportConfig object includes the following properties:

• format (optional, string) specifies the format of the exported data. Can be set to csv (default) or xlsx.
• mergeHeaders (only when format is set to xlsx; optional, boolean) specifies whether repeating header cells should be merged (true; default) or should not be merged (false).
• title (optional, string) is the title of the exported data.

Structure

<Visualization
    projectId="<workspace-id>"
    identifier="<visualization-identifier>"
    onExportReady={(exportResult) => exportResult()}
/>

Example

export class Example extends React.Component {
    constructor(props) {
        super(props);
        this.doExport = this.doExport.bind(this);
        this.onExportReady = this.onExportReady.bind(this);
    }

    onExportReady(exportResult) {
        this.exportResult = exportResult;
    }

    async doExport() {
        try {
            const result = await this.exportResult({
                format: 'xlsx',
                mergeHeaders: true,
                title: 'CustomTitle'
            });
            console.log('Export successfully: ', result.uri);
        } catch (error) {
            console.log('Export error: ', error);
        }
    }

    render() {
        return (
            <div style={{ height: 367 }}>
                <Visualization
                    projectId="<workspace-id>"
                    identifier="<visualization-identifier>"
                    onExportReady={this.onExportReady}
                />
                <button className="button button-secondary" onClick={this.doExport}>Export</button>
            </div>
        );
    }
}