The purpose of the Enigma mocker is to be able to render visualizations without a connected Qlik engine. This could be useful for example when running rendering tests or to make runnable code examples.

Installation

EnigmaMocker is exposed from @nebula.js/stardust.

npm install @nebula.js/stardust

Example usage

import { embed, EnigmaMocker } from '@nebula.js/stardust';
import mekko from '@nebula.js/sn-mekko-chart';

const genericObject = {
  getLayout() {
    return {
      qInfo: {
        qId: 'qqj4zx',
        qType: 'sn-grid-chart'
      },
      ...
    }
   },
   getHyperCubeData(path, page) {
     return [ ... ];
   }
 };
const app = await EnigmaMocker.fromGenericObjects([genericObject]);

const orion = embed(app, {
  types: [{
    name: 'mekko',
    load: () => Promise.resolve(mekko);
  }]
});

orion.render({
  element,
  type: 'mekko',
  fields: ['Product', 'Region', 'Sales']
});

Generic objects

The mocked enigma app can be created from one or more generic objects using EnigmaMocker.fromGenericObjects(genericObjects). Each generic object represents one visualization and specifies how it behaves. For example, what layout to use the data to present.

The generic object is represented by a Javascript object with a number of properties. The name of the property correlates to the name in the Enigma model for app.getObject(id). For example, the property getLayout in the generic object is used to define app.getObject(id).getLayout(). Any property can be added to the fixture (just make sure it exists and behaves as in the Enigma model!).

Structure of mocked enigma app:

{
  id: ...,
  getObject(id) {
    // Properties of generic object is added here
  },
};

The value for each property is either fixed (string / boolean / number / object) or a function. Arguments are forwarded to the function to allow for greater flexibility. For example, this can be used to return different hypercube data when scrolling in the chart.

Example with fixed values:

{
  getLayout: {
    qInfo: {
      qId: 'qqj4zx',
      qType: 'sn-grid-chart'
    }
  },
  getHyperCubeData: [ ... ]
}

Example with functions:

{
  getLayout() {
    return {
      qInfo: {
        qId: 'qqj4zx',
        qType: 'sn-grid-chart'
      }
    }
  },
  getHyperCubeData(path, page) {
    return [ ... ];
  }
}