BG Reporting

NPM package for boredguys's react devexpress reporting

Installation

npm install @boredguyscorp/reporting

or

pnpm add @boredguyscorp/reporting

or

yarn add @boredguyscorp/reporting

Usage

'use client'

import dynamic from 'next/dynamic'

// import css
import 'jquery-ui/themes/base/all.css'
import 'devextreme/dist/css/dx.common.css'
import 'devextreme/dist/css/dx.light.css'
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css'
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css'
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css'
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css'
import 'devexpress-reporting/dist/css/dx-reportdesigner.css'

import { useReport } from '@boredguyscorp/reporting'

// dynamic import report designer
const ReportDesigner = dynamic(() => import('@boredguyscorp/reporting').then((mod) => mod.ReportDesigner), { ssr: false })

function Designer() {
  const { designer, designerRef } = useReport() // use hook to get the designer instance and ref

  return (
    <div className='w-full h-full'>
      <ReportDesigner
        url='default'
        options={{
          requestOptions: {
            host: 'https://localhost:5001/',
            getDesignerModelAction: 'DXXRD/GetDesignerModel'
          }
        }}
      />
    </div>
  )
}

'use client'

import dynamic from 'next/dynamic'

// dynamic import report viewer
import 'jquery-ui/themes/base/all.css'
import 'devextreme/dist/css/dx.common.css'
import 'devextreme/dist/css/dx.light.css'
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css'
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css'
import '@devexpress/analytics-core/dist/css/dx-querybuilder.css'
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css'
import 'devexpress-reporting/dist/css/dx-reportdesigner.css'

import { useReport } from '@boredguyscorp/reporting'

const ReportViewer = dynamic(() => import('@boredguyscorp/reporting').then((mod) => mod.ReportViewer), { ssr: false })

function Viewer() {
  const { viewer, viewerRef } = useReport() // use hook to get the viewer instance and ref

  return (
    <div className='w-full h-full'>
      <ReportViewer
        url='default'
        options={{
          requestOptions: {
            host: 'https://localhost:5001/',
            invokeAction: 'DXXRDV'
          }
        }}
      />
    </div>
  )
}

ReportProvider

The ReportProvider is a wrapper component that provides the viewer & designer instance and ref to the children components.

'use client'

import Viewer from './components/viewer'
import Designer from './components/designer'
import dynamic from 'next/dynamic'

const ReportProvider = dynamic(() => import('@boredguyscorp/reporting').then((mod) => mod.ReportProvider), { ssr: false })

function Reporting() {
  return (
    <div>
      <main className='flex min-h-screen flex-col items-center justify-between p-24'>
        <h1 className='text-2xl font-bold'>REPORT VIEWER</h1>
        <div className='size-[1800px]'>
          <ReportProvider>
            <Viewer />
          </ReportProvider>
        </div>

        <h1 className='mt-5 text-2xl font-bold'>REPORT DESIGNER</h1>
        <div className='size-[1800px]'>
          <ReportProvider>
            <Designer />
          </ReportProvider>
        </div>
      </main>
    </div>
  )
}