Mozaik-ext-multijson NPM

Mozaïk multi-JSON widget

This widget display data from multiple JSON sources (up to three) in your Mozaik dashboard. These JSON sources may be either static hosted files or JSON objects fetched from REST API's.

json

Installation

To install mozaik-ext-multijson from npm, run:

npm install --save mozaik-ext-multijson

Configuration

Static hosted file

Let's say you want to display two set of data from files you host on your Dropbox public directory.

JSON file

In your Mozaik dashboard's config.js file, add the following section:

  {
      type:  'json.multidata',
      title: 'DEPLOYED APPLICATIONS',
      sources: [
        {
          url: 'https://dl.dropboxusercontent.com/u/11555789/f1.json',
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'https://dl.dropboxusercontent.com/u/11555789/f2.json',
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'https://dl.dropboxusercontent.com/u/11555789/f3.json',
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        }
      ],
      columns: 1, rows: 1,
      x: 1, y: 1
  }

JSON data fetched from REST API

In your Mozaik dashboard's config.js file, add the webservice url in the api section. The url key shall contains the full URL where your webservice is hosted. An optionnal headers key can be added (to add authentication information for example):

  {
      type:  'json.multidata',
      title: 'DEPLOYED APPLICATIONS',
      sources: [
        {
          url: 'http://mywebservice/rest/api/2/resource/id1',
          headers: [{name: 'Authorization', value: 'Basic aKjs6LK8ijkSfT'}, {name: 'Content-type', value: 'application/json'}],
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'http://mywebservice/rest/api/2/resource/id2',
          headers: [{name: 'Authorization', value: 'Basic aKjs6LK8ijkSfT'}, {name: 'Content-type', value: 'application/json'}],
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'http://mywebservice/rest/api/2/resource/id3',
          headers: [{name: 'Authorization', value: 'Basic aKjs6LK8ijkSfT'}, {name: 'Content-type', value: 'application/json'}],
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        }
      ],
      columns: 1, rows: 1,
      x: 1, y: 1
  }

parameters

title, value and unit parameters can be either a String or a property path to be retrieve in the JSON data.

key	required	description
`type`	yes	Always equal to 'json.multidata' (String)
`title`	yes	The title to be displayed in the header (String)
`sources`	yes	The list of the sources to be displayed (Array)
`sources.url`	yes	The url of the x.th source (URL)
`sources.headers`	no	Headers to be used to fetch the source (Array)
`sources.label`	yes	Label of the row (String)
`sources.data`	yes	Data to be displayed (String)
`sources.time`	no	Date information (String)