❤
npm
Sign UpSign In

react-report-builder
TypeScript icon, indicating that this package has built-in type declarations

5.0.8 • Public • Published

React Report Builder component

Report builder is powerful reporting module for Peekdata API, consisting of customizable React components.

Key features:

  • Introduce comprehensive reporting capabilities into your application in no time
  • Your end users can build any report they want
  • Create ready to use templates for the most common searches
  • Define any filtering and sorting criteria
  • Easy way to explore data and learn from it

See reportbuilder.peekdata.io for live demo.

Installation and usage

The easiest way to use react-report-builder is to install it from npm and build it into your app using bundler (Webpack, etc.). Report builder uses peekdata-datagateway-api-sdk as a dependency therefore you must install it as well:

npm install --save react-report-builder peekdata-datagateway-api-sdk -force

or

yarn add react-report-builder peekdata-datagateway-api-sdk

To use report builder in your project you must also import needed styles in code:

  • Report builder own styles: react-report-builder/lib/main.css
  • Bootstrap styles: bootstrap/dist/css/bootstrap.min.css
  • React DatePicker styles: react-datepicker/dist/react-datepicker.css
  • React table styles: react-table/react-table.css

NOTE: all third-party styles are already installed with react-report-builder - no need to install them separately.

import React from "react";
import { ReportBuilder } from "react-report-builder";
import { PeekdataApi } from "peekdata-datagateway-api-sdk";

import "bootstrap/dist/css/bootstrap.min.css";
import "react-datepicker/dist/react-datepicker.css";
import "react-table/react-table.css";
import "react-report-builder/lib/main.css";

const peekdataApi = new PeekdataApi({
  baseUrl: "https://demo.peekdata.io:8443/datagateway/v1",
  timeout: 60000,
});

export class App extends React.Component {
  render() {
    return <ReportBuilder peekdataApi={peekdataApi} />;
  }
}

Properties

These are the properties for ReportBuilder component:

Name Type Default value Description
peekdataApi (required) object Peekdata API object. To understand how to create it read here.
translations object Translations object. All available translations can be seen in ITranslations interface.
reportRequest object This object can be used to prefill report builder form fields. All properties are optional. To understand how to create or modify this object read here.
loader elementType Loader can be changed by passing custom loader component.
showScopesDropdown boolean true Whether the scopes dropdown is shown
showDataModelsDropdown boolean true Whether the data models dropdown is shown
showDimensionsList boolean true Whether the dimensions list is shown
showMetricsList boolean true Whether the metrics list is shown
showFilters boolean true Whether the filters component is shown
showRowsOffset boolean true Whether the rows offset input is shown
showRowsLimit boolean true Whether the rows limit input is shown
defaultRowsOffset number 0 Sets default rows offset
defaultRowsLimit number 100 Sets default rows limit
maxRowsLimit number 1000 Sets max value of rows limit input
showRequestViewButton boolean true Whether the request view button is shown
showResponseViewButton boolean true Whether the response view button is shown
showDataTabs boolean true Whether the tabs section is shown
showChart boolean true Whether the chart is shown
showDataTable boolean true Whether the data table is shown
defaultTab number 0 Sets index of active tab
chartColors IRgb[] 0 Custom colors for chart data in rgb format. Example: [{ r: 10, g: 20, b: 30 }, { r: 50, g: 90, b: 16 }]

Translations

Every label in report builder is translatable. All possible translation can be seen in ITranslations interface. Translation object based on this interface can be passed to ReportBuilder component translations property.

Translation object example:

import { ITranslations } from "react-report-builder";
import { ApiErrorCode } from "peekdata-datagateway-api-sdk";

const translations: Partial<ITranslations> = {
  contentTitle: "Report content",
  dataModelDropdownTitle: "Data Source",
  dimensionsListTitle: "Dimensions",
  apiErrors: {
    [ApiErrorCode.DimensionsMetricsNotCompatible]:
      "Dimension/metric combination is not valid",
  },
};

Color scheme

To customize colors in report builder components, you will have to make two changes:

  1. Include custom css file
  2. Provide chartColors property for chart data coloring

First, include the following CSS file and modify color variables in it according to your needs:

/* Customize these color variables to make your color scheme */
:root {
  --white: #fff;
  --black: #000;
  --caramel: #f4d2b6;
  --dark-caramel: #db955c;
  --grey-lighter: #fbfbfb;
  --grey-light: #e0e2e6;
  --grey: #aab0bb;
  --grey-dark: #808799;
  --grey-blue-dark: #323d4b;
  --crimson-light: #d71c4e;
  --crimson-dark: #910c2e;
}

/* -------- COMMON --------- */

.rb-title-dark {
  color: var(--grey-blue-dark);
}

.rb-title-dark > span {
  color: var(--grey);
}

.rb-input {
  border-color: var(--grey-dark);
}

.rb-input::placeholder {
  color: var(--grey);
}

.rb-btn-crimson {
  color: var(--caramel) !important;
  background-color: var(--crimson-light);
}

.rb-btn-crimson:focus {
  color: var(--caramel) !important;
  background-color: var(--crimson-light);
}

.rb-btn-crimson:hover,
.rb-btn-crimson:active {
  color: var(--caramel) !important;
  background-color: var(--crimson-dark);
}

.rb-btn-crimson.disabled:focus,
.rb-btn-crimson.disabled:active,
.rb-btn-crimson.disabled:active:hover,
.rb-btn-crimson.disabled:focus:active {
  background-color: var(--crimson-light);
}

.rb-btn-caramel-dashed {
  color: var(--dark-caramel) !important;
  background-color: transparent;
  border-color: var(--dark-caramel);
}

.rb-split-btn .btn {
  background-color: var(--white);
  border-color: var(--crimson-dark);
}

.rb-split-btn .btn:hover,
.rb-split-btn .btn:focus {
  background-color: var(--white);
  border-color: var(--crimson-dark);
}

.rb-split-btn .caret {
  border-top-color: var(--crimson-dark);
}

.rb-split-btn .open .btn {
  background-color: var(--white);
  border-color: var(--crimson-dark);
}

.rb-split-btn .open .btn:hover,
.rb-split-btn .open .btn:focus {
  background-color: var(--white);
  border-color: var(--crimson-dark);
}

.rb-split-btn .open .caret {
  border-bottom-color: var(--crimson-dark);
}

.rb-split-btn .dropdown-menu li:first-child a {
  border-top-color: var(--grey-light);
}

.rb-split-btn .dropdown-menu li a {
  border-color: var(--grey-light);
}

.rb-split-btn .dropdown-menu li a:hover {
  color: var(--crimson-dark);
  background-color: var(--grey-lighter);
}

.rb-btn-group button {
  color: var(--grey-blue-dark);
  background-color: var(--white);
  border-color: var(--grey);
}

.rb-btn-group button:hover {
  color: var(--crimson-dark);
}

.rb-btn-group button:last-child {
  border-right-color: var(--grey);
}

.rb-btn-group .btn-active {
  color: var(--caramel);
  background-color: var(--crimson-light);
  border-color: var(--crimson-light);
}

.rb-btn-group .btn-active:last-child {
  border-right-color: var(--crimson-light);
}

.rb-btn-group .btn-active + button {
  border-left-color: var(--crimson-light);
}

.rb-btn-group .btn-active:hover {
  color: var(--caramel);
}

/* -------- DATE PICKER --------- */

.rb-datepicker .rb-datepicker-icon:hover i {
  color: var(--crimson-dark);
}

/* */
.rb-datepicker .react-datepicker-popper .react-datepicker {
  border-color: var(--grey-blue-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__triangle {
  border-bottom-color: var(--grey-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__triangle::before {
  border-bottom-color: var(--grey-blue-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__navigation:hover {
  background-color: var(--grey-blue-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__navigation.react-datepicker__navigation--previous {
  border-right-color: var(--grey-blue-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__navigation.react-datepicker__navigation--previous::after {
  border-right-color: var(--white);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__navigation.react-datepicker__navigation--next {
  border-left-color: var(--grey-blue-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__navigation.react-datepicker__navigation--next::after {
  border-left-color: var(--white);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__header {
  background-color: var(--white);
  border-bottom-color: var(--grey-light);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__header
  .react-datepicker__current-month {
  color: var(--white);
  background-color: var(--grey-dark);
  border-bottom-color: var(--grey-blue-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__header
  .react-datepicker__day-names
  > div {
  border-top-color: var(--grey-light);
  border-right-color: var(--grey-light);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__month
  .react-datepicker__week
  > div {
  border-right-color: var(--grey-light);
  border-bottom-color: var(--grey-light);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__month
  .react-datepicker__week
  > div:hover {
  color: var(--crimson-dark);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__month
  .react-datepicker__week
  .react-datepicker__day--selected {
  color: var(--crimson-dark);
  background-color: var(--white);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__month
  .react-datepicker__week
  .react-datepicker__day--outside-month {
  color: var(--grey);
}

.rb-datepicker
  .react-datepicker-popper
  .react-datepicker
  .react-datepicker__month-container
  .react-datepicker__month
  .react-datepicker__week
  .react-datepicker__day--disabled:hover {
  color: var(--grey);
}

/* -------- DROPDOWN LIST --------- */

.rb-dropdown-container {
  color: var(--grey-blue-dark);
}

.rb-dropdown-container.rb-show-list
  > .rb-dropdown-display
  .rb-selection-icon
  > div {
  border-bottom-color: var(--crimson-dark);
}

.rb-dropdown-container > .rb-dropdown-display {
  border-color: var(--crimson-dark);
}

.rb-dropdown-container > .rb-dropdown-display .rb-selection-icon > div {
  border-top-color: var(--crimson-dark);
}

.rb-dropdown-container > .rb-dropdown-list > div {
  background: var(--white);
}

.rb-dropdown-container > .rb-dropdown-list > div > .rb-dropdown-item {
  border-color: var(--grey-light);
}

.rb-dropdown-container
  > .rb-dropdown-list
  > div
  > .rb-dropdown-item:first-child {
  border-top-color: var(--grey-light);
}

.rb-dropdown-container > .rb-dropdown-list > div > .rb-dropdown-item:hover {
  color: var(--crimson-dark);
  background-color: var(--grey-lighter);
}

/* -------- DROPDOWN LIST WITH SEARCH --------- */

.rb-dropdown-with-search-container .rb-dropdown-with-search__control {
  background-color: var(--white);
  border-color: var(--crimson-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__control
  .rb-dropdown-with-search__value-container
  .rb-dropdown-with-search__placeholder {
  color: var(--grey);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__control
  .rb-dropdown-with-search__value-container
  > div {
  color: var(--grey-blue-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__control
  .rb-dropdown-with-search__value-container
  .rb-dropdown-with-search__multi-value {
  background-color: var(--white);
  border-color: var(--grey-light);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__control
  .rb-dropdown-with-search__indicators
  .rb-dropdown-with-search__dropdown-indicator::after {
  border-top-color: var(--crimson-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__control.rb-dropdown-with-search__control--is-disabled
  .rb-dropdown-with-search__placeholder {
  color: var(--grey-blue-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__control--is-focused
  .rb-dropdown-with-search__indicators
  .rb-dropdown-with-search__dropdown-indicator::after {
  border-bottom-color: var(--crimson-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__group
  .rb-dropdown-with-search__group-heading {
  color: var(--grey-blue-dark);
  background-color: var(--grey-light);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__group
  .rb-dropdown-with-search__group-heading
  .rb-dropdown-with-search-group-heading {
  border-bottom-color: var(--grey-blue-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__group
  .rb-dropdown-with-search__group-heading
  .rb-dropdown-with-search-group-heading
  .rb-group-heading-indicator
  > div::after {
  border-top-color: var(--grey-blue-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__group
  .rb-dropdown-with-search__group-heading
  .rb-dropdown-with-search-group-heading
  .rb-group-heading-indicator.is-expanded
  > div::after {
  border-bottom-color: var(--grey-blue-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__option {
  color: var(--grey-blue-dark);
  background-color: var(--white);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__option.rb-dropdown-with-search__option--is-focused {
  color: var(--crimson-dark);
  background-color: var(--grey-lighter);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__option
  .rb-dropdown-with-search-label {
  border-color: var(--grey-light);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__option
  .rb-dropdown-with-search-label
  .rb-tooltip {
  color: var(--caramel);
  background-color: var(--crimson-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__option
  .rb-dropdown-with-search-label
  .rb-tooltip
  > div::before {
  border-bottom-color: var(--crimson-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__option:first-child
  .rb-dropdown-with-search-label {
  border-top-color: var(--grey-light);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__option:last-child
  .rb-tooltip
  > div::after {
  border-top-color: var(--crimson-dark);
}

.rb-dropdown-with-search-container
  .rb-dropdown-with-search__menu
  .rb-dropdown-with-search__menu-list
  .rb-dropdown-with-search__menu-notice {
  color: var(--grey);
  border-color: var(--grey-light);
}

/* -------- RESULT PREVIEWER --------- */

.rb-content-with-copy-container .rb-content-with-copy {
  border-color: var(--grey-light);
}

/* -------- FILTER --------- */

.rb-filter-control {
  border-bottom-color: var(--grey-light);
}

.rb-filter-control .rb-btn-filter-remove {
  border-color: var(--grey-dark);
}

.rb-filter-control .rb-btn-filter-remove:hover > i {
  color: var(--crimson-dark);
}

.rb-filter-control
  .rb-filter-dropdown.rb-filter-multi
  .rb-dropdown-with-search__multi-value,
.rb-filter-control
  .rb-filter-value.rb-filter-multi
  .rb-dropdown-with-search__multi-value {
  background-color: var(--white);
  border-color: var(--grey-light);
}

.rb-filter-control
  .rb-filter-dropdown.rb-filter-multi
  .rb-dropdown-with-search__multi-value
  .rb-dropdown-with-search__multi-value__remove,
.rb-filter-control
  .rb-filter-value.rb-filter-multi
  .rb-dropdown-with-search__multi-value
  .rb-dropdown-with-search__multi-value__remove {
  color: var(--black);
  background-color: var(--white);
}

.rb-filter-control
  .rb-filter-dropdown.rb-filter-multi
  .rb-dropdown-with-search__multi-value
  .rb-dropdown-with-search__multi-value__remove:hover,
.rb-filter-control
  .rb-filter-value.rb-filter-multi
  .rb-dropdown-with-search__multi-value
  .rb-dropdown-with-search__multi-value__remove:hover {
  color: var(--crimson-dark);
}

.rb-filter-control
  .rb-dropdown-container.rb-show-list
  > .rb-dropdown-display
  .rb-selection-icon
  > div {
  border-bottom-color: var(--grey-dark);
}

.rb-filter-control .rb-dropdown-container > .rb-dropdown-display {
  border-color: var(--grey-dark);
}

.rb-filter-control
  .rb-dropdown-container
  > .rb-dropdown-display
  .rb-selection-icon
  > div {
  border-top-color: var(--grey-dark);
}

.rb-filter-control
  .rb-dropdown-with-search-container
  .rb-dropdown-with-search__control {
  border-color: var(--grey-dark);
}

.rb-filter-control
  .rb-dropdown-with-search-container
  .rb-dropdown-with-search__control
  .rb-dropdown-with-search__indicators
  .rb-dropdown-with-search__dropdown-indicator::after {
  border-top-color: var(--grey);
}

.rb-filter-control
  .rb-dropdown-with-search-container
  .rb-dropdown-with-search__control
  .rb-dropdown-with-search__indicators
  .rb-dropdown-with-search__clear-indicator {
  color: var(--grey);
}

.rb-filter-control
  .rb-dropdown-with-search-container
  .rb-dropdown-with-search__control--is-focused
  .rb-dropdown-with-search__indicators
  .rb-dropdown-with-search__dropdown-indicator::after {
  border-bottom-color: var(--grey);
}

/* -------- REPORT OPTIONS --------- */

.rb-report-options {
  border-color: var(--crimson-dark);
}

/* -------- TABLES --------- */

.rb-table .ReactTable .rt-table .rt-thead .rt-tr .rt-th {
  color: var(--white);
  background-color: var(--grey);
  border-left-color: var(--grey-blue-dark);
}

.rb-table .ReactTable .rt-table .rt-thead .rt-tr .rt-th.-sort-desc {
  box-shadow: inset 0 -3px 0 0 var(--grey-blue-dark);
}

.rb-table .ReactTable .rt-table .rt-thead .rt-tr .rt-th.-sort-asc {
  box-shadow: inset 0 3px 0 0 var(--grey-blue-dark);
}

.rb-table .ReactTable .pagination-bottom .-btn {
  color: var(--caramel);
  background-color: var(--crimson-light);
}

.rb-table .ReactTable .pagination-bottom .-btn:hover,
.rb-table .ReactTable .pagination-bottom .-btn:active {
  color: var(--caramel);
  background-color: var(--crimson-dark);
}

.rb-reports-table .rt-tr-group:hover {
  color: var(--crimson-dark);
}

.rb-reports-table .rb-report-actions > div:hover {
  color: var(--grey-blue-dark);
}

/* -------- TABS --------- */

.rb-tabs-control > ul.nav-tabs .rb-tab {
  background-color: var(--grey);
}

.rb-tabs-control > ul.nav-tabs .rb-tab + .rb-tab {
  border-left-color: var(--grey-blue-dark);
}

.rb-tabs-control > ul.nav-tabs .rb-tab.active {
  background-color: var(--grey-blue-dark);
}

.rb-tabs-control > ul.nav-tabs .rb-tab.active:hover {
  background-color: var(--grey-blue-dark);
}

.rb-tabs-control > ul.nav-tabs .rb-tab:hover {
  background-color: var(--grey-dark);
}

.rb-tabs-control > ul.nav-tabs .rb-tab > a {
  color: var(--white);
}

/* -------- REPORT BUILDER --------- */

.rb-report-builder-container
  .rb-report-container
  .rb-report-filters
  .rb-filter-container {
  border-color: var(--crimson-dark);
}

.rb-report-option
  .rb-dropdown-with-search-container
  .rb-dropdown-with-search__control {
  border-color: var(--grey-light);
}

.rb-report-option
  .rb-dropdown-with-search-container
  .rb-dropdown-with-search__control
  .rb-dropdown-with-search__indicators
  .rb-dropdown-with-search__dropdown-indicator::after {
  border-top-color: var(--grey);
}

.rb-report-option
  .rb-dropdown-with-search-container
  .rb-dropdown-with-search__control--is-focused
  .rb-dropdown-with-search__indicators
  .rb-dropdown-with-search__dropdown-indicator::after {
  border-bottom-color: var(--grey);
}

.rb-report-option .rb-btn-close:hover > i,
.rb-report-option .rb-btn-sort:hover > i {
  color: var(--crimson-dark);
}

Second, provide chartColors property to ReportBuilder component as in the example below:

<ReportBuilder
  chartColors={[
    { r: 10, g: 20, b: 30 },
    { r: 50, g: 90, b: 16 },
  ]}
  ...
/>

Example

A working example project can be found here

Readme

Keywords

Package Sidebar

Install

npm i react-report-builder

Repository

gitlab.com/peekdata/react-report-builder

Homepage

peekdata.io

Weekly Downloads

51

Version

5.0.8

License

LGPL-3.0-only

Unpacked Size

794 kB

Total Files

74

Last publish

Collaborators

  • viaruc
  • aarlauskas
  • dantipenkovas
  • umasko
Try on RunKit
Report malware