Creating reports and dashboards | Stimulsoft community forum

Code: Select all

import React from 'react';
import { Stimulsoft } from 'stimulsoft-reports-js/Scripts/stimulsoft.viewer';
import 'stimulsoft-reports-js/Css/stimulsoft.viewer.simple.gray.css';




interface dataOnClick {
    elementArgument: string|null
    elementSeries: string|null
}

interface Props {
    templatePath: any
    jsonData: Object
    defaultZoom: number
    barNumber: number
    onClick: (data: dataOnClick)=>void
    saveTrigger: boolean
    setSaveBarChart: (state:boolean)=>void
}

interface State {

}

class StiTisBarChart extends React.Component<Props, State> {

    private viewerOptions = new Stimulsoft.Viewer.StiViewerOptions()
    private viewer = new Stimulsoft.Viewer.StiViewer(this.viewerOptions, 'StiViewer', false);
    private report = new Stimulsoft.Report.StiReport()

    constructor (props:Props) {
        super(props)
    }


    setviewerOptions = () => {
        const { defaultZoom } = this.props

        this.viewerOptions.toolbar.showFindButton = false
        this.viewerOptions.toolbar.showFullScreenButton = false
        this.viewerOptions.toolbar.showPrintButton = false
        this.viewerOptions.toolbar.showOpenButton = false
        this.viewerOptions.toolbar.showViewModeButton = false
        this.viewerOptions.toolbar.showLastPageButton = false
        this.viewerOptions.toolbar.showPreviousPageButton = false
        this.viewerOptions.toolbar.showFirstPageButton = false
        this.viewerOptions.toolbar.showLastPageButton = false
        this.viewerOptions.toolbar.showNextPageButton  = false
        this.viewerOptions.toolbar.showCurrentPageControl = false
        this.viewerOptions.toolbar.showAboutButton = false
        this.viewerOptions.toolbar.zoom = defaultZoom
    }

    loadData = () => {
        const { jsonData } = this.props

        var dataSet = new Stimulsoft.System.Data.DataSet("havQuadrant")
        dataSet.readJson(jsonData)
        this.report.dictionary.databases.clear()
        this.report.regData("havQuadrant", "havQuadrant", dataSet)
    }

    refreshViewer = () => {
        this.report.renderAsync( () => {
            Stimulsoft.Report.Dashboard.StiCacheCleaner.clean()
            this.viewer.refreshViewer()
        });
    }

    saveAsPdf = () => {
        this.report.exportDocumentAsync((pdf:any)=>{
            let fileName = this.report.reportAlias
            Stimulsoft.System.StiObject.saveAs(pdf, fileName + ".pdf", "application/pdf");
        }, Stimulsoft.Report.StiExportFormat.Pdf)
    }

    
    componentDidMount() {
        try{
            this.setviewerOptions()
            this.report.loadFile(this.props.templatePath)
            this.viewer.report = this.report
            this.viewer.renderHtml("viewer")
            // this.loadData()
        }
        catch(e) {
            console.log("error stimulsoft after mount ====>", e)
        }
    }

    componentDidUpdate(prevProps:Props) {
        if (prevProps.saveTrigger !== this.props.saveTrigger && this.props.saveTrigger) {
            this.saveAsPdf()
            this.props.setSaveBarChart(false)
        }
    }
    
    render() {
        
        return (
            <div id="viewer" className="Report"></div> 
        );
    }

}

export default StiTisBarChart;

Code: Select all

"browserslist": {
    "production": [
      "> 1% and not op_mini all"
    ]