Skip to main content
Version: 2.0.0

Configure and Use

Props

Required Props​

chartConfigs​

Defines:

  • Graphs
  • KPIs
  • Filters
  • Aggregators
  • Dashboard settings

See testconfig.json for an example shape.

Example:

chartConfigs={dashboardConfig}

userId​

Used for:

  • User preferences
  • Personalized rendering
  • Access control
userId="nitish.bharadwaj@incture.com"

Process Configuration Props​

Optional Props​

processId​

Selects process-specific configuration and determines which graphs and KPIs are rendered for that process.

processId="PROC_01"

processName​

Display name for the dashboard (used in the UI and in exported artifacts such as PDF metadata).

processName="Invoice Management"

activityLabel​

Short label used in the dashboard header and export filenames.

activityLabel="Finance Dashboard"

Role Management Props (Optional)​

roleId​

Controls:

  • Admin access
  • KPI permissions
  • Graph visibility

Example:

roleId={["ADMIN"]}

Authentication Configuration Props​

Optional Props​

BTPToken​

Authentication token used by the library when useWorkAccess is true. Provide a raw token string or an object such as { accessToken: '<token>' }.

BTPToken={{ accessToken: token }}

Short notes — tokens & flags​

useWorkAccess​

When true, internal requests include the user authentication token (Authorization: Bearer <token>).

useWorkAccess={true}

useConfigServerDestination​

When true, request URLs are rewritten using environment-specific base URLs from the configuration server.

useConfigServerDestination={true}

destinationData​

Destination/environment metadata used for URL mapping. It does not provide authentication tokens — pass BTPToken or attach auth headers in your fetch callbacks.

Refer the DestinationMetaData file.

destinationData={destinationConfig}

Filter Configuration Props​

Optional Props​

defaultGlobalFilters​

A mapping of filter keys to values (date ranges, ids, values).

defaultGlobalFilters={{
  region: ["India"],
  status: ["Open"]
}}

isPredefinedFilters​

If true, Dashboard will render the filters passed in defaultGlobalFilters and treat them as initial active filters.

isPredefinedFilters={true}

presets​

Saved filter sets..

presets={savedPresets}

Events Configuration Props​

Optional Props​

Chart Click Event​

events={{
  onClick: ({ selectedDataPoint, values }) => {
    console.log(values);
  }
}}

onClick: ({ selectedDataPoint, values }) => void — called for chart clicks/drilldown onMarkerClick: ({ selectedDataPoint, values }) => void — called for marker click events

KPI Navigation Event​

Used to configure KPI click navigation. Example shape:

clickEvent={{
  allow: true,
  type: 'navigation',
  navigate: (values) => {
    console.log(values);
  }
}}

Full Dashboard Example​

<Dashboard
  chartConfigs={dashboardConfig}
  userId="EMP001"
  processId="PROC_01"
  processName="Invoice Management"
  activityLabel="Finance Dashboard"
  roleId={["ADMIN"]}
  BTPToken={{ accessToken: token }}
  useWorkAccess={true}
  useConfigServerDestination={true}
  destinationData={destinationConfig}
  defaultGlobalFilters={{ status: ['Open'] }}
  isPredefinedFilters={true}
  presets={savedPresets}
/>