Grid Reports Library

This library helps to build schema for analytics reports.

Installation

npm i @ombori/grid-reports --save or yarn add @ombori/grid-reports

Example

import {
  AnalyticsSchema,
  CardType,
  SessionInteractionType,
} from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.Sessions, interactionType: SessionInteractionType.Interactive },
      ],
    },
  ],
};

export default analyticsSchema;

As a result of the above example, you will get an analytics report with one card that shows information about user sessions.

Analytics schema is an object that should match AnalyticsSchema type. Do not forget to export your schema using default export.

Description

There are several types that helps you to build analytics schema.

AnalyticsSchema

import { AnalyticsSchema } from '@ombori/grid-reports';

Top level type for your analytics schema.

import { AnalyticsSchema } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {};

export default analyticsSchema;

Options

• groups: object[]
  • Required
  • List of groups for this analytics report.

Group

Analytics report consists of groups of reports. Each group defines its own list of report cards. If you have a big analytics report with a lot of data it maybe handy to split data into several groups.

import { AnalyticsSchema } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [],
    },
  ],
};

export default analyticsSchema;

Property groups defines a list of analytics report groups.

One group has next options.

Options

• name: string
  • Required
  • Defines report group name.
• cards: object[]
  • Required
  • List of cards for this report group.
• columnsCount: number
  • Optional
  • Defines number of columns for report group layout.
• gridStyles: object
  • Optional
  • It is possible to customize report group layout with grid-* css properties. For example, gridStyles: { 'grid-gap': '20px' }.

Card

Each report group has its own list of analytics cards.

import { AnalyticsSchema, CardType, SessionInteractionType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        {
          type: CardType.Sessions,
          interactionType: SessionInteractionType.Interactive,
        }
      ],
    },
  ],
};

export default analyticsSchema;

Cards

Each card is an object with a certain type and card specific properties.

Sessions card

Adds card with data about user sessions to the report group.

import { AnalyticsSchema, CardType, SessionInteractionType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        {
          type: CardType.Sessions,
          interactionType: SessionInteractionType.Interactive,
        }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.Sessions
  • Required
• interactionType: SessionInteractionType
  • Optional
  • Defines the type of sessions data to be shown. Use SessionInteractionType enum.
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

Nps card

Adds card with data about NPS score and number of nps replies.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.Nps }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.Nps
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

EventsList card

Adds card with list of captured events.

import { AnalyticsSchema, CardType, InteractionType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.EventsList, interactionType: InteractionType.Interactive,   title: 'Sesame success rate',
          dataSource:  DataSourceBaseEntity.Space,
          dataSourceType: DataSourceTypeEntityEnum.LOCATION,
          events: [
            {
              title: 'Success',
              eventTypes: ['EXIT_ZONE_VALID_RECEIPT'],
              color: '#57CD65',
            }
          ],
          additionalData: [
            {
              icon: 'https://storemanager.itab.com/assets/img/sales.svg',
              title: 'Total',
              eventTypes: ['CHECKOUT_ISSUE_RECEIPT', 'CHECKOUT_ISSUE_RECEIPT_NO_ID'],
            },
          ],
        },
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.EventsList
  • Required
• interactionType: InteractionType
  • Optional
  • Defines the type of events data to be shown. Use InteractionType enum.
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• title: string
  • Optional
  • It is possible to show title in the card rather show hard coded value in from the console.
• events: array of object
  • Optional
  • Defines the array of events data to be shown.
• additionalData: array of object
  • Optional
  • Defines the array of additionalData events data to be shown.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.
• datasource: DataSourceBaseEntity
  • Optional
  • Defines the type of source data to be shown. Use DataSourceBaseEntity enum.
• datasource: DataSourceTypeEntityEnum
  • Optional
  • Defines the type of space data to be shown. Use DataSourceTypeEntityEnum enum.

EventsFunnel card

Adds card with events funnel based on predefined list of events.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        {
          type: CardType.EventsFunnel,
          title: 'Sales conversions funnel',
          events: ['CATEGORY_VIEW', 'PRODUCT_VIEW', 'CART_ADD', 'CHECKOUT', 'PURCHASE'],
        },
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.EventsFunnel
  • Required
• title: string
  • Required
  • Defines card title.
• events: string[]
  • Required
  • Defines list of events that should be used to build events funnel. For example, ['CATEGORY_VIEW', 'PRODUCT_VIEW', 'CART_ADD', 'CHECKOUT', 'PURCHASE'].
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

ProductsEventCount card

Adds card with list of captured product events.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        {
          type: CardType.ProductsEventCount,
          eventType: 'PRODUCT_VIEW',
          title: 'Product views',
        },
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.ProductsEventCount
  • Required
• title: string
  • Required
  • Defines card title.
• eventType: string
  • Required
  • Defines an event type.
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

CategoriesEventCount card

Adds card with list of captured product categories events.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.CategoriesEventCount },
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.CategoriesEventCount
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

EventsFlow card

Adds card that shows flow of captured events.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.EventsFlow }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.EventsFlow
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

WeekHeatmap card

Adds card with sessions or events data that is shown as a heatmap.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        {
          type: CardType.WeekHeatmap,
          title: 'Sessions week heatmap',
          dataSource: {
            type: WeekHeatmapDataSourceType.Sessions,
            interactionType: SessionInteractionType.Interactive,
          },
        },
      ],
    },
  ],
};

export default analyticsSchema;

• type: CardType.WeekHeatmap
  • Required
• title: string
  • Required
  • Defines card title.
• dataSource: WeekHeatmapDataSourceSessions | WeekHeatmapDataSourceEvents
  • Required
  • WeekHeatmapDataSourceSessions: { type, interactionType }
    • type: WeekHeatmapDataSourceType.Sessions
      • Required
    • interactionType: SessionInteractionType
      • Optional
  • WeekHeatmapDataSourceEvents: { type, eventType }
    • type: WeekHeatmapDataSourceType.Events
      • Required
    • eventType: string
      • Required
      • Defines the specific event type to be used as data source. For example, CART_ADD.
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

AverageSales Card

Adds card with data about average sales.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.AverageSales }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.AverageSales
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

AverageTimeBetweenTransactions Card

Adds card with data about average time between transactions.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.AverageTimeBetweenTransactions }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.AverageTimeBetweenTransactions
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

AverageNumberOfPurchasedProducts Card

Adds card with data about average number of purchased products per transaction.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.AverageNumberOfPurchasedProducts }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.AverageNumberOfPurchasedProducts
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

PurchasedProductsEventCount Card

Adds card with data about purchased products.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.PurchasedProductsEventCount }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.PurchasedProductsEventCount
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

PurchasedProductsCategoriesEventCount Card

Adds card with data about purchased products categories.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.PurchasedProductsCategoriesEventCount }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.PurchasedProductsCategoriesEventCount
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

QrCodesCount Card

Adds card with data about scanned qr codes.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.QrCodesCount }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.QrCodesCount
  • Required
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.

Media Card

Adds card with data in tabular format about media content that has been played.

import { AnalyticsSchema, CardType } from '@ombori/grid-reports';

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.Media }
      ],
    },
  ],
};

export default analyticsSchema;

Options

• type: CardType.Media
  • Required
• primaryKey: MediaCardPrimaryKeyType
  • Required
  • Defines the primary key for the data table. Use MediaCardPrimaryKeyType enum.
• title: string
  • Optional
  • Defines card title.
• gridStyles: object
  • Optional
  • It is possible to customize card layout with grid-* css properties.
• isVisibleWithoutData: boolean
  • Optional
  • Defines if card should be visible if there is no data to show. Default value is false.