Table of Contents

Vizpad APIs

Hardik Chheda Updated by Hardik Chheda

Post Message Filters

Introduction

This allows user to filter data using a json object.

Steps to connect to tellius

  1. To connect to Tellius app, embedding app (in this case  `CustomerX`) need to Post a message called INITIALIZE after the app is loaded.
  2. Tellius app will respond back with a message called TELLIUS_INITIALIZED . This is useful to  Validate that the received message is from Tellius and communicate further.
  3. Once TELLIUS_INITIALIZED is received, filters can be applied.

Example:

var telliusFrame;    document.querySelector("iframe").addEventListener("load", function() {
    telliusFrame = document.getElementsByTagName("iframe")[0].contentWindow;        telliusFrame.postMessage('INITIALIZE', "*");        
})
function receiveMessage(event) {
    if(event.data === 'TELLIUS_INITIALIZED') {
        telliusFrame.postMessage ({actionType: "filterBySelection",vizId:
        "f7931a1e4-a9b2-4966-95ad-138c8d0f278c", selectionPointType: "single", 
        values: "Standard Class", filterType: "Keep", columns: "Ship_Mode"},       
        "*");
    }
}
window.addEventListener("message", receiveMessage, false);

Steps to reproduce in our App

  1. Copy link from Share button available in Vizpads in the top bar.
    A popup will appear.
  2. Change the mode from “Can View” to “Can Edit” under the Embed URL section. Hit the Copy button.
    The Structure of URL is “https://dev.app.tellius.com/explore/view/<vizpad id>/?access=edit&datasetId=<dataset id>&jwt=<token>”
    URL Structure breakdown :“https://dev.app.tellius.com” is the website url
    "/explore/view/” is to be not modified as this is an app specific url extension for vizpads
    <vizpad id> is the unique vizpad id.
    access=edit refers to edit mode. There are two modes : “edit” and “read”.
    “datasetId=<dataset id>” refers to the unique dataset id - not mandatory.
    jwt=<token> refers to the login credentials or token for security and login purposes.
    You can copy the given link (it would work until the session of JWT token expires)
    for example:
    https://dev.app.tellius.com/explore/view/3b7b372d-8784-42ac-a26c-3fdd77ea79d9/?access=edit&datasetId=load_7b3b1e7a-71ec-4631-89b1-ae53a796892f&jwt=eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJ7XCJ1c2VybmFtZVwiOlwiYW5hbmRoXCIsXCJyb2xlXCI6XCJhZG1pblwiLFwiaWRcIjpcIjNiMjJmOTZmLTAyZWMtNDFjNi1iMWMzLWIzNzQyMTk3ODIzOVwiLFwiZ3JvdXBzXCI6W3tcInJvbGVcIjpcInBvd2VyXCIsXCJuYW1lXCI6XCJncm91cDFcIixcImlkXCI6XCJhNDYzMjRiMC1mZDA3LTQyZTMtYmI5Zi0yNDY1ZGNjYTNiNzhcIn1dLFwiZW1haWxcIjpcImFuYW5kaC5rdW1hckB0ZWxsaXVzLmNvbVwifSIsImV4cCI6MTU2NzE0MDI1OSwiaWF0IjoxNTY0NTQ4MjU5LCJpc3MiOiJUZWxsaXVzTWlkZGxld2FyZSIsImp0aSI6ImIzNTE3NjI2LThlZjAtNGQ3Mi1iYTE1LTc5Mjg2NTM3NDAxYSIsInBlbSI6e30sInN1YiI6IntcInVzZXJuYW1lXCI6XCJhbmFuZGhcIixcInJvbGVcIjpcImFkbWluXCIsXCJpZFwiOlwiM2IyMmY5NmYtMDJlYy00MWM2LWIxYzMtYjM3NDIxOTc4MjM5XCIsXCJncm91cHNcIjpbe1wicm9sZVwiOlwicG93ZXJcIixcIm5hbWVcIjpcImdyb3VwMVwiLFwiaWRcIjpcImE0NjMyNGIwLWZkMDctNDJlMy1iYjlmLTI0NjVkY2NhM2I3OFwifV0sXCJlbWFpbFwiOlwiYW5hbmRoLmt1bWFyQHRlbGxpdXMuY29tXCJ9IiwidHlwIjoiYWNjZXNzIn0.gbSOZVqhqORoyVk_9yrZ4Bz-NKJjhhqDxVegs3q17hN0G70yNyiS2_LM9eJtPkDD0GA3_Z-PzTKrkGARQjdBlA
  3. Go to Embedded App (http://34.201.98.2:32543/) and click on Vizpad button.
  4. Paste the copied link in the textbox and wait till the vizpad is loaded.
    Please refer the image below :
  5. Enter the column name you want to filter upon.
  6. Now drag and select data values on the chart and then select any button for desired operation.
    Dragging and selecting bars “Pen” and “Pen Set”:
    Resulting Chart:

Format

Single Filter

Remove:
{
    actionType: "filterBySelection",
    vizId: <vizId>,
    selectionPointType: "single",
    values: <values>,
    filterType: "Remove",
    columns: <columnName>
};
Keep:
{
    actionType: "filterBySelection",
    vizId: <vizId>,
    selectionPointType: "single",
    values: <values>,
    filterType: "Keep",
    columns: <columnName>
};

Multiple Filter

Keep:
{
    actionType: "filterBySelection",
    vizId: <vizId>,
    selectionPointType: "multiple",
    values: <values>,
    filterType: "Keep",
    columns: <columnName>
};
Remove:
{
    actionType: "filterBySelection",
    vizId: <vizId>,
    selectionPointType: "multiple",
    values: <values>,
    filterType: "Remove",
    columns: <columnName>
};
Note: The user who is embedding the app, will get <vizId>, <values>, and <columnName> from the child app.

“actionType” can be categorized by “drillByColumn”, “drillByHierarchy”, “filterBySelection” and others yet to come. It means the type of action user wants to take on vizs. For Filters we use “filterBySelection”.

“selectionPointType” refers to single or multiple point selection with filter on a particular data value or multiple data values respectively. Please refer the examples given below. It can be either “single” or “multiple”.

Examples

For Single Keep Filter the object will be like
{
    actionType: "filterBySelection",
    columns: "Item",
    filterType: "Keep"
    selectionPointType: "single",
    values: "Pen",
    vizId: "2f79721a-07ab-43e2-b8ad-7f4e29a268bf"
}
For Multiple Keep Filter the object will be like
{
    actionType: "filterBySelection",
    columns: "Item",
    filterType: "Keep",
    selectionPointType: "multiple",
    values: [“Pen”, “Pen Set”],
    vizId: "2f79721a-07ab-43e2-b8ad-7f4e29a268bf"
}

Tracking filters using window communication service

We use window.postmessage for the communication between the Tellius(embedded app) and the embedding App.

The communication can be both ways, one from embedding app(i.e CustomerX) to embedded app(i.e Tellius) and vice versa.

  1. For the embedding app to communicate to the embedded app please refer this.
  2. For the Embedded app to communicate to the embedding app, Embedding app needs to have eventLister to receive this message. For every Point click in the chart, Area selection or highlighting the chart Tellius will post a message to the embedding app.

List of Filters supported

Filters

  • Local Filter
  • Global filters
  • Timeline Filters

Notations

  • Viz: each Independent  chart is referred as Viz here
  • Vizpad: collection of viz’s is referred as Vizpad here
  • Local Filters: Filtes at Viz level
  • Global Filters: Filters at Vizpad level

Local Filter 

To apply a local Filter we need to define the below props:

  • actionType:vizFilter.
  • vizId: Id of the Viz
  • Column: columnName
  • Value: value to apply
  • Operator: operator to apply. 
{
    actionType: "vizFilter",
    filters: [{
        vizId: "0568aff9-d059-458b-80ac-989cba5f1c34",
        value: "10000",
        column: "Sales",
        operator: ">="
    }]
}

Global Filter

To apply a global Filter we need to define the below props:

  • actionType: vizpadFilter. 
  • Value: value to apply
  • Column: columnName
  • Operator: operator to apply. 
{
    actionType: "vizpadFilter",
    filters: [{
        value: "Same",
	column: "Ship_Mode",
	operator: "Does not contain"
    }]
}

List of Filters

Sr. No.

Filter Name

Filter Operator

1

Less than

<

2

Less than or Equal to

<=

3

Greater than

> 

4

Greater than or Equal to

>=

5

Equal to

=

6

Between

>= & <=

7

In

in

8

Not in

Not in

9

Does not Equal

!=

10

Contains

like

11

Doesn’t contain

not like

12

Starts with

like

13

End with

like

14

Doesn’t start with

not like

** Between operator: two filters will be required to support the Between operator.For usage refer example section - TelliusEx1a 

Timeline Filters

Sr. No.

Filter Name

Filter Operator

1

Today

today

2

Yesterday

yesterday

3

Last 5 Days

last 5 days

4

Last 7 Days

last 7 days

5

Last 15 Days

last 15 days

6

Last 30 Days

last 30 days

7

Last week

last week

8

Last month

last month

9

This month

this month

10

Last 3 months

last 3 months

11

Last 6 months

last 6 months

12

This year

this year

13

Last year

Last year

14

Last 3 years

last 3 years

15

Last 6 years

last 6 years

16

Custom Range

** Custom Range: refer example section TelliusEx1b  to see how we can apply custom range

Resolution Filter

Sr. No.

Filter Name

Filter Operator

1

Hourly

hourly

2

Daily

daily

3

Weekly

weekly

4

Monthly

monthly

5

Quarterly

quarterly

6

Yearly

yearly

Additional ActionType

List of different actions we support

actionType

comments

Example

getAllFiltersApplied

It returns the list of all filters applied

telliusFrame.postMessage({actionType: "getAllFiltersApplied"}, "*");

getVizpadFiltersApplied

It returns the list of all filters applied at vizpad level

telliusFrame.postMessage({actionType: "getVizpadFiltersApplied"}, "*");

getVizFiltersApplied

It returns the list of all filters applied at viz level

telliusFrame.postMessage({actionType: "getVizFiltersApplied"}, "*");

getBusinessViewColumns

It returns the list of BV column

telliusFrame.postMessage({actionType: "getBusinessViewColumns"}, "*");

getResolutionApplied

It returns the resolution applied to vizpad

telliusFrame.postMessage({actionType: "getResolutionApplied"}, "*");

Examples

TelliusEx1a

{
    actionType: "vizFilter", 
    filters: [{
        vizId: "7fcae9ae-9101-4c82-b354-71c36b9d7c11",
        value: "900",
        column: "Shipping_Cost",
        operator: ">=",
    }, 
    {
        vizId: "7fcae9ae-9101-4c82-b354-71c36b9d7c11",
        value: "1200",
        column: "Shipping_Cost",
        operator: "<=" 
    }]
}

TelliusEx1b

{ 
    actionType: "vizFilter",
        filters: [{
	    value: {
	        start: "2014-02-18T00:00:00Z",
		end: "2018-02-18T00:00:00Z"
	    },
                column: "Ship_Date",
		filterKind: "vizTimelineFilter",
		vizId: "7fcae9ae-9101-4c82-b354-71c36b9d7c11", 
	}
]}

TelliusEx1c

{actionType: "resolution", timeColumn: {resolution: "quarterly", }}

List of BusinessView columns

To get List of columns as a part of the window message, we need to set actionType as getBusinessViewColumns.  

Example:

{actionType: "getBusinessViewColumns"}

Embedding app will receive columns info as follow:

{ columns: ["List of columns info"], columnNames: ["list of columnNames"], actionType: "BVCOLUMNS",}

Remove Filters

Remove Normal Filter

  1. To remove applied filters from Vizpad we need to set actionType as removeVizpadFilter
    Ex:
    { actionType: "removeVizpadFilter", filters: [{value: "Same Day", column: "Ship_Mode", operator: "=" }]}
  2. To remove applied filters from Viz we need to set actionType as removeVizFilter
    Ex: 
    { actionType: "removeVizFilter", filters: [{vizId: "ed198301-5c74-4aa0-8e17-83838681dc49", value: "Same Day", column: "Ship_Mode", operator: "=" }]}

Remove IN/NOT IN Filter

**Here value field must be array

telliusFrame.postMessage({actionType: "removeVizpadFilter", filters: [{ value: ["Same Day"], column: "Ship_Mode", operator: "Not in"}]}, "*");

REMOVE VIZPAD/VIZ TIMELINE FILTER

telliusFrame.postMessage({actionType: "removeVizpadFilter", filters: [{ value: "last 6 years", column: "Order_Date", filterKind: "vizpadTimelineFilter"}]}, "*");

To enable voice based search, we need to add add one queryParameter called:

allow="microphone;"

Example:

<iframe class="telliusEmbedding"  height="500px" width="1200px" src={src} allow="microphone;"></iframe>

How Did We Do?

Machine Learning APIs

Contact