Writing Custom Data Queries for Panopticon

Jeffrey Slentz_20727

When writing custom JavaScript components, you may want to retrieve some data from one of your data tables. First, let's take a look at JavaScript Parts.

JavaScript Parts

JavaScript parts have three functions:

postLink(config) getDataQuery(config) handleDataUpdate(config, data)

And here's what it looks like in the Panopticon editor: 

Functions

postLink(config)

When the JavaScript part is loaded by the user, postLink(config) is called. The parameter config is an object with a single property element. Nicely, config will persist throughout the lifetime of the JavaScript part, allowing us to save any state we might need.

For example, we could add some text to our JavaScript part by writing the following:

config.element.textContent = 'Hello World'

A more detailed example can be found in the attached workbook "How to use JS Dashboard Part".

getDataQuery(config)

This optional function will allow us to retrieve data from a specific Data Table in the provided dropdown. We will need to write a special dataQuery object.

handleDataUpdate(config, data)

This optional function will allow our JavaScript Part to react to our incoming queried data.

Building a Data Request Object

Data Request Objects are used by visualization components on a dashboard to request data from the Panopticon server. Here's an example of a Data Request Object:

As you can see, this query will return all items grouped by the text column "Character".

For a more complicated dataQuery object, I recommended letting Panopticon build it for you. To accomplish this, we need to do a couple things.

First, we need to enable detailed logging for Panopticon's front end. In your Panopticon servers' data directory (c:\vizserver on Windows by default), find the file JavaScriptConfiguration/workbook and add this parameter:

"logLevel" : "trace"

You don't need to restart your server for the configuration to take effect.

Next, we'll need to check how Panopticon builds the dataQuery object. Make a new empty dashboard put just one component on it so that we can isolate the dataQuery object we're interested in. As an example, I've added a single table:

Now, we can check what our dataQuery object looks like. In this example, I'm using Google chrome. Open up the chrome developer console (F11 or right click > inspect) and navigate to the console tab. Make sure to change the logging level to "All levels", then clear the console.

Now, refresh the Dashboard (not the browser itself) and check the console. I've highlighted the objects that we're interested in.

We can have a poke around the object itself.

To actually use our new dataQuery object in our javascript part, we'll have to do a bit of work. We can copy the object to our favorite text/code editor by first right clicking the dataQuery object in the console and copying it.

This is what the copied dataQuery object looks like in VSCode:

Now, we can remove attributes we're not interested in. The attributes workbookName, datatableName, datatableVersion, and dashboardName will be provided by Panopticon, so we can remove those.

The final step is to put return in front of our dataRequest object.

Now, we have a fully built dataRequest object that we can use in our Javascript part. To test it, let's add it to a JavaScript part and add some logging.

 Now to view the dataResponse object that's returned:

And that's it! We can now use data directly from the Panopticon server to influence our JavaScript part.

Tony Halse_22248

Brilliant! Just what I needed to get started using JavaScript Parts. I found the documentation quite sparse and wasn't sure how to construct the getDataQuery section but you have explained how to delve into this and I followed your instructions (nice screenshots) and I got a query that worked.

So now I can start integrating the data into my javascript...