react-report-builder v5.0.8

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:

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