Peel Dashboard Kit

Library for embedding Peel's dashboard in third party applications.

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. You can install them from here Node and NPM.

To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

React >=16 is also needed.

Installation

$ cd PROJECT
$ npm i peel-dashboard-kit

Usage

Example with custom columns layout:

import { PeelDashboard } from 'peel-dashboard-kit'

const App = () => {
  return (
    <div className="App">
      <PeelDashboard
        dashboardID="f123d932215e74e2b6dcfdf710be923f1eda9a8d"
        studyID="43"
        token={/* YOUR_PEEL_DASHBOARD_TOKEN */}
      />
    </div>
  );
};

Peel dashboard kit props

/*
  ID of the dashboard that is being shown
*/
dashboardID: string = ''

/*
  ID of the study the dashboard belongs to
*/
studyID: string = ''

/*
  base url for api requests (token has to be generated for the particular host)
*/
host?: string = 'https://app.peelinsights.com'

/*
  grouping string that specifies the grouping option for the dashboard. Useful when grouping is selected outside the peel dashboard component
*/
goruping?: string: DAY | WEEK | MONTH | QUARTERLY | YEAR | WEEKDAY | ROLLING_7DAY | ROLLING_30DAY | ROLLING_6WEEK | WEEK_TO_DATE | MONTH_TO_DATE | QUARTER_TO_DATE | YEAR_TO_DATE | PACING.

/*
  An array string with start and end dates to filter the information from the dashboard.
  format: YYYY-MM-DD
  e.g.: ['2023-10-01', '2023-12-01']
*/
customDatesRange?: Array<string> = false;

/*
  This prop enables showing the filters on the dashboard.
  Filters include a datepicker and a time grouping.
*/
showFilters?: boolean = false;

/*
  This prop enables showing the header of the dashboard,
  which displays the dashboard name and the description.
*/
showHeader?: boolean = false;

/*
  If set to true, it shows the read only version of a dashboard.
  It hides the edit widget button on hover.
*/
isReadOnly?: boolean = false;

/*
  If set to true, it shows a spinner indicator.
*/
isLoading?: boolean = false;

/*
  flag that tells the peel dashboard kit when to go fetch multi metric widget information again.
  When set to true it fetches the multi metric widget information again.
  Useful when stats are added/removed from the outside and we need to update the widget without having to refresh the page
*/
reloadMultiline?: boolean = false

/*
  This prop sets the rowHeight of react-grid-layout.
  refer to https://github.com/react-grid-layout/react-grid-layout
*/
rowHeight?: number = 150;

/*
  Margin between items [x, y] in px.
  refer to https://github.com/react-grid-layout/react-grid-layout
*/
margin: ?[number, number] = [10, 10]


// Number of columns in this layout.
// refer to https://github.com/react-grid-layout/react-grid-layout
cols: ?number = 12,

/*
  Theme prop currently support 'default' theme which has the look and feel of Peel, and the 'polaris' theme which has the shopify polaris look and feel
*/
theme?: string = 'default'

/*
  chartColors prop is an array of strings that accepts n colors for the different segments of the charts
*/
chartColors?: Array<string> = 'https://app.peelinsights.com'

/*
  If set to true, it shows headlines on each widget. If set to false it only shows the descriptions.
*/
showInsightsAndAnnotations?: boolean = false

/*
  Callback function when the edit widget button is clicked.
  widget: widget information of the current widget on which the user clicked the edit button
  callback: callback function that the user can execute once edition has been made on the widget. It expects either newWidget information
  or newLayout information. (newWidget, newLayout) => void
*/
onEditWidget?: (widget, callback) => void

/*
  Callback function when the user clicks on "Ask Differently" button. This happens when the AI couldn't generate a response for a query.
  It sends the newQuery string, which is the new query/question the user is asking.
*/
onAskDifferently?: (newQuery: string) => void

/*
  Callback function that executes when the user clicks "Talk to Human" button when the AI couldn't create a response for the query.
  e.g. you can open up intercom chat on this callback
*/
onTalkToHuman?: () => void

Run storybook

npm run storybook

Deploy a new version to npm

Create locally the dist folder which gets published to npm

npm run build-lib

Publish the new version to npm

npm publish

Test new version locally (without publishing it to npm)

Create locally the dist folder which gets published to npm

npm run build-lib

Create .tgz file on the destination project/folder. This creates a .tgz file in the destination folder that exists in the create-pack script. You might to change that destination folder to match your own local folder.

npm run create-pack

Install the version inside the project

Once you created the tgz file, make sure to change the peel-dashboard-kit reference in the package.json to point to that file.

// package.json
//...
"peel-dashboard-kit": "file:[email protected]"
//...

Then run:

npm install

Note on React 18 and strict mode.

google-map-react has a known bug when using React 18 and strict mode.

We use google-map-react to display the audience widget on dashboards.

A workaround to make the audience widget work on React 18 is to disable strict mode by removing <React.StrictMode>...</React.StrictMode>

License

MIT License