@ombori/grid-reports / Phygrid Developers

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.

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.

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.
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.

EventsCount card

Adds a card showing the total count of a specific event type.

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

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: "SCO Breakdown",
      cards: [
        {
          type: CardType.EventsCount,
          title: "SCO Breakdown",
          eventType: "CHECKOUT_ISSUE_RECEIPT",
          dataSource: DataSourceBaseEntity.Space,
        },
      ],
    },
  ],
};

export default analyticsSchema;

Options

type: CardType.EventsCount
- Required
title: string
- Required
- Defines card title.
eventType: string
- Required
- Defines the type of event type to count
dataSource: string
- Optional
- Possible values are "tenant", "space", "installation"
- If "tenant" is set, it will count all the occurence of specified event type on tenant level
- If "space" is set, it will show the breakdown of the count of the specific event type occurence per space
- If "installation" is set, it will show the breakdown of the count of the specific event type occurence per installation
- Default value is "installation"

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.

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.

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.

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.

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.

Monitoring Real-time status

Adds a card with monitored object through grid signals

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

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Real-time analytics',
      cards: [
        {
          type: CardType.MonitoringRealtimeStatus,
          eventType: 'MONITOR_SESAME_DEVICE_STATUS',
          distinctColumns: ['str1', 'str2', 'deviceId'],
          title: 'Device status',
          statusReference: {
            0: {
              label: 'Offline',
              color: 'red'
            },
            1: {
              label: 'Online',
              color: 'green'
            },
            [-1]: {
              label: 'Unknown',
              color: 'gray'
            }
          }
        },
      ],
    },
  ],
};

export default analyticsSchema;

type: CardType.MonitoringRealtimeStatus
- Required
title: string
- Required
- Defines card title.
eventType: string
- Required
- Should start with MONITOR_ eventType prefix that is sent from a gridapp through grid signals
distinctColumns: "str1" | "str2" | "str3" | "str4" | "str5" | "int1" | "int2" | "int3" | "int4" | "int5" | "deviceId"
- Required
- list of column keys to identify unique rows of the report
statusReference: Record<string | number, { label: string; color: string }
- Optional
- Default when not supplied is
  - 0 - Offline
  - 1 - Online
  - -1 - Unknown
gridStyles: object
- Optional
- It is possible to customize card layout with grid-* css properties.

Monitoring 24 Hour History

Adds a card with monitored object through grid signals with 24hours span

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

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Real-time analytics',
      cards: [
        {
          type: CardType.MonitoringStatusHistory,
          eventType: 'MONITOR_SESAME_DEVICE_STATUS',
          title: 'Device status history',
          statusReference: {
            0: {
              label: 'Offline',
              color: 'red'
            },
            1: {
              label: 'Online',
              color: 'green'
            },
            [-1]: {
              label: 'Unknown',
              color: 'gray'
            }
          }
        },
      ],
    },
  ],
};

export default analyticsSchema;

type: CardType.MonitoringStatusHistory
- Required
title: string
- Required
- Defines card title.
eventType: string
- Required
- Should start with MONITOR_ eventType prefix that is sent from a gridapp through grid signals
statusReference: Record<string | number, { label: string; color: string }
- Optional
- Default when not supplied is
  - 0 - Offline
  - 1 - Online
  - -1 - Unknown
gridStyles: object
- Optional
- It is possible to customize card layout with grid-* css properties.

Monitoring Real-time status

Adds a card with monitored object through grid signals

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

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Real-time analytics',
      cards: [
        {
          type: CardType.MonitoringRealtimeStatus,
          eventType: 'MONITOR_SESAME_DEVICE_STATUS',
          distinctColumns: ['str1', 'str2', 'deviceId'],
          title: 'Device status',
          statusReference: {
            0: {
              label: 'Offline',
              color: 'red'
            },
            1: {
              label: 'Online',
              color: 'green'
            },
            [-1]: {
              label: 'Unknown',
              color: 'gray'
            }
          }
        },
      ],
    },
  ],
};

export default analyticsSchema;

type: CardType.MonitoringRealtimeStatus
- Required
title: string
- Required
- Defines card title.
eventType: string
- Required
- Should start with MONITOR_ eventType prefix that is sent from a gridapp through grid signals
distinctColumns: "str1" | "str2" | "str3" | "str4" | "str5" | "int1" | "int2" | "int3" | "int4" | "int5" | "deviceId"
- Required
- list of column keys to identify unique rows of the report
statusReference: Record<string | number, { label: string; color: string }
- Optional
- Default when not supplied is
  - 0 - Offline
  - 1 - Online
  - -1 - Unknown
gridStyles: object
- Optional
- It is possible to customize card layout with grid-* css properties.

Images card

Adds a card with images shown which are fetched from the relative installation settings

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

const analyticsSchema: AnalyticsSchema = {
  groups: [
    {
      name: 'Overview',
      cards: [
        { type: CardType.Image, title: 'Images', imageProperty: 'image' },
      ],
      visibility: [VisibilityEnum.Device, VisibilityEnum.Space],
    },
  ],
};
export default analyticsSchema;

type: CardType.Image
- Required
title: string
- Required
- Defines card title.
imageProperty: string
- Required
- the property path of the image based on the gridapp settings-schema
visibility: VisibilityEnum
- Optional
- If not specified, it will be visible to all levels of analytics dashboards